vc-error-handlers 0.1.8 → 0.1.91

package/fesm2020/vc-error-handlers.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, Input, Directive, ViewChild, NgModule, Optional, InjectionToken, ErrorHandler } from '@angular/core';
 import { Subject, throwError } from 'rxjs';
+import * as i3 from '@angular/router';
+import { NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
 import * as i1 from '@vcomply/authorizer';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/router';
-import { NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
 import { HttpResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as Sentry from '@sentry/angular-ivy';
 import { timeout, tap, catchError } from 'rxjs/operators';
@@ -38,71 +38,6 @@ var ErrorStatusCode;
     ErrorStatusCode[ErrorStatusCode["JSChunkUnavailable"] = 600] = "JSChunkUnavailable";
 })(ErrorStatusCode || (ErrorStatusCode = {}));
 
-class GlobalErrorService {
-    constructor() {
-        this.globalError$ = new Subject();
-        this.localError$ = new Subject();
-    }
-    handleError(error, request) {
-        if (this.isUnauthenticated(error) ||
-            this.isUnauthorizedAccess(error) ||
-            this.isNetworkUnavailable(error)) {
-            this.globalError$.next(error);
-        }
-    }
-    isUnauthenticated(error) {
-        return error.status === ErrorStatusCode.Unauthenticated;
-    }
-    isUnauthorizedAccess(error) {
-        return error.status === ErrorStatusCode.UnauthorizedAccess;
-    }
-    isNetworkUnavailable(error) {
-        return error.status === ErrorStatusCode.NetworkUnavailable;
-    }
-}
-GlobalErrorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GlobalErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-GlobalErrorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GlobalErrorService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GlobalErrorService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class AuthService {
-    constructor(authorizer) {
-        this.authorizer = authorizer;
-    }
-    logoutUser() {
-        this.authorizer.logout();
-    }
-}
-AuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AuthService, deps: [{ token: i1.AuthorizerService }], target: i0.ɵɵFactoryTarget.Injectable });
-AuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AuthService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AuthService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: function () { return [{ type: i1.AuthorizerService }]; } });
-
-class RouterService {
-    redirectToLogin() {
-        window.location.href =
-            `https://${window.location.host}/` +
-                'signin?redirectURL=' +
-                encodeURIComponent(window.location.href);
-    }
-}
-RouterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: RouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-RouterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: RouterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: RouterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 const VCOMPLY_LOGO_URL = 'https://cdn.v-comply.com/logo/prod/v-logo.svg';
 const API_TIMEOUT_TIME = 1000 * 15;
 const ERROR_CONFIG = {
@@ -146,6 +81,115 @@ const ERROR_CONFIG = {
     },
 };
 
+const PAGE_LEVEL_API_CONFIG = [
+    {
+        method: 'POST',
+        path: '/compliance_post',
+        query: { mode: 'xyz' },
+        body: { mode: 'abc' },
+        pageCodes: ['compliance:mr', 'risk:mr'],
+    },
+    {
+        method: 'GET',
+        path: '/compliance_post',
+        query: { mode: 'xyz' },
+        body: { mode: 'abc' },
+        pageCodes: ['compliance:mr', 'risk:mr'],
+    },
+];
+const COMPONENT_LEVEL_API_CONFIG = [
+    {
+        method: 'GET',
+        path: '/organization/?mode=organisationUsersList',
+        query: { type: 'active' },
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/organization/?mode=organisationUsersList',
+        query: { type: 'power_users' },
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/organization/?mode=organisationUsersList',
+        query: { type: 'light_users' },
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/organization/?mode=organisationUsersList',
+        query: { type: 'inactive' },
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/Global-Dashboard/ManageDashboards',
+        query: null,
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/Global-Dashboard/MyDashboard',
+        query: null,
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/grc_object/?mode=grcObject/getGRCTypeList',
+        query: null,
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/compliance/?mode=responsibilityCenterTree',
+        query: null,
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/organization/?mode=rcholidaylist',
+        query: null,
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/organization/?mode=roles/getRoles',
+        query: null,
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/organization/?mode=groupsList',
+        query: null,
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/compliance_post/?mode=rcProfile',
+        query: null,
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/organization_post/?mode=userProfile',
+        query: null,
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/organization/?mode=roles/roleById',
+        query: null,
+        body: null,
+    },
+    {
+        method: 'GET',
+        path: '/organization/?mode=groupDetails',
+        query: null,
+        body: null,
+    }
+];
+
 class SnackBarService {
     constructor() {
         this.snackbarSubject = new Subject();
@@ -175,6 +219,195 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
+class UtilsService {
+    isJsonSubset(parentJson, subsetJson) {
+        for (let key in subsetJson) {
+            if (!parentJson.hasOwnProperty(key) || parentJson[key] !== subsetJson[key]) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
+UtilsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+UtilsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: UtilsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: UtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class GlobalErrorService {
+    constructor(snackBarService, utilService, router) {
+        this.snackBarService = snackBarService;
+        this.utilService = utilService;
+        this.router = router;
+        this.globalError$ = new Subject();
+        this.localError$ = new Subject();
+        this.pageLevelApiConfig = PAGE_LEVEL_API_CONFIG;
+        this.componentLevelApiConfig = COMPONENT_LEVEL_API_CONFIG;
+    }
+    handleSoftErrors(event) {
+        const xData = event.headers.get('X-Data');
+        if (xData) {
+            const parsedData = JSON.parse(xData);
+            const statusCode = parsedData.statusCode;
+            const statusMessage = parsedData.message;
+            if (statusCode && statusCode !== 0) {
+                this.snackBarService.show(statusMessage || 'Error occurred', 'error');
+            }
+        }
+    }
+    handleError(error, request) {
+        if (this.isUnauthenticated(error) ||
+            this.isUnauthorizedAccess(error) ||
+            this.isNetworkUnavailable(error)) {
+            this.publishGlobalError(error);
+        }
+        else if (this.isServerError(error)) {
+            this.handleServerError(error, request);
+        }
+        else {
+            this.handleSoftErrors(error);
+        }
+    }
+    isServerError(error) {
+        const serverErrorCodes = [
+            ErrorStatusCode.InternalServerError,
+            ErrorStatusCode.ServiceUnavailable,
+            ErrorStatusCode.BadGateway,
+            ErrorStatusCode.RequestTimeout,
+        ];
+        return serverErrorCodes.includes(error.status);
+    }
+    isUnauthenticated(error) {
+        return error.status === ErrorStatusCode.Unauthenticated;
+    }
+    isUnauthorizedAccess(error) {
+        return error.status === ErrorStatusCode.UnauthorizedAccess;
+    }
+    isNetworkUnavailable(error) {
+        return error.status === ErrorStatusCode.NetworkUnavailable;
+    }
+    handleServerError(error, request) {
+        if (this.isPageLevelError(error, request)) {
+            this.publishGlobalError(error);
+        }
+        else if (this.isComponentLevelError(error, request)) {
+            this.publishLocalError(error, request);
+        }
+        else {
+            this.showServerSnackBarError();
+        }
+    }
+    publishGlobalError(error) {
+        this.globalError$.next(error);
+    }
+    publishLocalError(error, request) {
+        this.localError$.next({ error, request });
+    }
+    showServerSnackBarError() {
+        const message = ERROR_CONFIG.SERVER_ERROR.snackBarMessage;
+        this.snackBarService.show(message, 'error');
+    }
+    isPageLevelError(error, request) {
+        const { method, path, query, body } = this.parseRequest(request);
+        const pageCode = this.getPageCode();
+        const isConfigMatched = this.pageLevelApiConfig.some((apiConfig) => {
+            if (apiConfig.method !== method)
+                return false;
+            if (apiConfig.path !== path)
+                return false;
+            const isQuerySubset = this.utilService.isJsonSubset(apiConfig.query, query);
+            if (!isQuerySubset)
+                return false;
+            const isBodyMatch = this.utilService.isJsonSubset(apiConfig.body, body);
+            if (!isBodyMatch)
+                return false;
+            return apiConfig.pageCodes.includes(pageCode);
+        });
+        return isConfigMatched;
+    }
+    isComponentLevelError(error, request) {
+        const { method, url: path, params, body } = request;
+        const query = {};
+        params.keys().forEach((key) => {
+            query[key] = params.get(key);
+        });
+        const isConfigFound = this.componentLevelApiConfig.some((apiConfig) => {
+            if (apiConfig.method !== method)
+                return false;
+            if (!path.includes(apiConfig.path))
+                return false;
+            const isQuerySubset = this.utilService.isJsonSubset(query, apiConfig.query);
+            if (!isQuerySubset)
+                return false;
+            if (apiConfig.body) {
+                const isBodyMatch = this.utilService.isJsonSubset(apiConfig.body, body);
+                if (!isBodyMatch)
+                    return false;
+            }
+            return true;
+        });
+        return isConfigFound;
+    }
+    parseRequest(request) {
+        const { method, url: path, params, body } = request;
+        const query = {};
+        params.keys().forEach((key) => {
+            query[key] = params.get(key);
+        });
+        return { method, path, query, body };
+    }
+    getPageCode() {
+        const currentRoute = this.router.routerState.snapshot.root.firstChild;
+        return currentRoute?.data?.pageCode;
+    }
+}
+GlobalErrorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GlobalErrorService, deps: [{ token: SnackBarService }, { token: UtilsService }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+GlobalErrorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GlobalErrorService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GlobalErrorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SnackBarService }, { type: UtilsService }, { type: i3.Router }]; } });
+
+class AuthService {
+    constructor(authorizer) {
+        this.authorizer = authorizer;
+    }
+    logoutUser() {
+        this.authorizer.logout();
+    }
+}
+AuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AuthService, deps: [{ token: i1.AuthorizerService }], target: i0.ɵɵFactoryTarget.Injectable });
+AuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AuthService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: function () { return [{ type: i1.AuthorizerService }]; } });
+
+class RouterService {
+    redirectToLogin() {
+        window.location.href =
+            `https://${window.location.host}/` +
+                'signin?redirectURL=' +
+                encodeURIComponent(window.location.href);
+    }
+}
+RouterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: RouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RouterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: RouterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: RouterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class SnackBarComponent {
     constructor(snackbarService) {
         this.snackbarService = snackbarService;
@@ -597,6 +830,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: DialogService }]; } });
 
+class ServerErrorComponent {
+    constructor() {
+        this.errorConfig = ERROR_CONFIG.SERVER_ERROR;
+        this.VcomplyLogo = VCOMPLY_LOGO_URL;
+    }
+    refreshPage() {
+        window.location.reload();
+    }
+}
+ServerErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ServerErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ServerErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ServerErrorComponent, selector: "lib-vc-error-server-error", ngImport: i0, template: `
+    <div class="errorPage">
+      <div class="errorPage-top">
+        <img [src]="VcomplyLogo" alt="VComply" width="24" height="24" />
+      </div>
+      <div class="errorPage-container">
+        <div class="errorPage-inner">
+          <div class="errorPage-inner-image">
+            <img
+              [src]="errorConfig.imageUrl"
+              alt="Error Image"
+              width="246"
+              height="178"
+            />
+          </div>
+          <div class="errorPage-inner-right">
+            <div class="errorPage-heading">{{ errorConfig.title }}</div>
+            <div class="errorPage-text">{{ errorConfig.description }}</div>
+            <div class="errorPage-details">{{ errorConfig.details }}</div>
+            <button class="errorPage-btn" (click)="refreshPage()">
+              {{ errorConfig.buttonText }} <i class="icons">&#xe92b;</i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.errorPage{background:#161b2f;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}.errorPage-top{width:100%;height:3rem;display:flex;align-items:center;padding-left:.75rem}.errorPage-container{background:#f2f2f5;border-radius:.75rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1d5dd31a;height:calc(100vh - 3.75rem);display:flex;align-items:center;justify-content:center;padding:0 4rem;margin:0 .75rem;position:relative}.errorPage-inner{display:flex;align-items:center}.errorPage-inner-image{width:16rem}.errorPage-inner-right{margin-left:2rem;width:calc(100% - 18rem)}.errorPage-inner-right .errorPage-heading{-webkit-text-fill-color:#e3e3e9;-webkit-text-stroke-color:#a9aab6;-webkit-text-stroke-width:1px;color:#e3e3e9;font-size:78px;font-weight:bold;line-height:110px;margin-bottom:1.5rem}.errorPage-inner-right .errorPage-text{color:#141724;font-size:19px;font-weight:500;line-height:1.75rem;margin-bottom:.5rem}.errorPage-inner-right .errorPage-details{color:#565a6f;font-size:13px;line-height:20px;margin-bottom:1.75rem}.errorPage-inner-right .errorPage-btn{background:#1e5dd3;border-radius:.25rem;border:none;color:#fff;display:inline-flex;align-items:center;font-size:11px;font-weight:500;line-height:2rem;padding:0 1rem}.errorPage-inner-right .errorPage-btn i{font-size:14px;margin-left:.25rem}.errorPage-copyright{font-size:11px;color:#787a8c;font-weight:500;position:absolute;bottom:8px;right:16px;line-height:16px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ServerErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-vc-error-server-error', template: `
+    <div class="errorPage">
+      <div class="errorPage-top">
+        <img [src]="VcomplyLogo" alt="VComply" width="24" height="24" />
+      </div>
+      <div class="errorPage-container">
+        <div class="errorPage-inner">
+          <div class="errorPage-inner-image">
+            <img
+              [src]="errorConfig.imageUrl"
+              alt="Error Image"
+              width="246"
+              height="178"
+            />
+          </div>
+          <div class="errorPage-inner-right">
+            <div class="errorPage-heading">{{ errorConfig.title }}</div>
+            <div class="errorPage-text">{{ errorConfig.description }}</div>
+            <div class="errorPage-details">{{ errorConfig.details }}</div>
+            <button class="errorPage-btn" (click)="refreshPage()">
+              {{ errorConfig.buttonText }} <i class="icons">&#xe92b;</i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.errorPage{background:#161b2f;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}.errorPage-top{width:100%;height:3rem;display:flex;align-items:center;padding-left:.75rem}.errorPage-container{background:#f2f2f5;border-radius:.75rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1d5dd31a;height:calc(100vh - 3.75rem);display:flex;align-items:center;justify-content:center;padding:0 4rem;margin:0 .75rem;position:relative}.errorPage-inner{display:flex;align-items:center}.errorPage-inner-image{width:16rem}.errorPage-inner-right{margin-left:2rem;width:calc(100% - 18rem)}.errorPage-inner-right .errorPage-heading{-webkit-text-fill-color:#e3e3e9;-webkit-text-stroke-color:#a9aab6;-webkit-text-stroke-width:1px;color:#e3e3e9;font-size:78px;font-weight:bold;line-height:110px;margin-bottom:1.5rem}.errorPage-inner-right .errorPage-text{color:#141724;font-size:19px;font-weight:500;line-height:1.75rem;margin-bottom:.5rem}.errorPage-inner-right .errorPage-details{color:#565a6f;font-size:13px;line-height:20px;margin-bottom:1.75rem}.errorPage-inner-right .errorPage-btn{background:#1e5dd3;border-radius:.25rem;border:none;color:#fff;display:inline-flex;align-items:center;font-size:11px;font-weight:500;line-height:2rem;padding:0 1rem}.errorPage-inner-right .errorPage-btn i{font-size:14px;margin-left:.25rem}.errorPage-copyright{font-size:11px;color:#787a8c;font-weight:500;position:absolute;bottom:8px;right:16px;line-height:16px}\n"] }]
+        }] });
+
 class VcErrorHandlersComponent {
     constructor(errorService, snackBarService) {
         this.errorService = errorService;
@@ -605,6 +906,7 @@ class VcErrorHandlersComponent {
         this.unauthorized = false;
         this.sessionExpired = false;
         this.chunkUnavailable = false;
+        this.serverError = false;
         this.isOnline = navigator.onLine;
         this.onNetworkOnline = () => {
             this.isOnline = true;
@@ -641,6 +943,9 @@ class VcErrorHandlersComponent {
         else if (error.status === ErrorStatusCode.NetworkUnavailable) {
             this.handleNetworkError();
         }
+        else if (this.errorService.isServerError(error)) {
+            this.serverError = true;
+        }
     }
     subscribeNetworkDetection() {
         window.addEventListener('online', this.onNetworkOnline);
@@ -668,7 +973,8 @@ VcErrorHandlersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
     <lib-vc-error-chunk-unavailable
       *ngIf="chunkUnavailable"
     ></lib-vc-error-chunk-unavailable>
-  `, isInline: true, components: [{ type: SnackBarComponent, selector: "app-snack-bar" }, { type: SessionExpiredComponent, selector: "lib-vc-error-session-expired" }, { type: UnauthorizedComponent, selector: "lib-vc-error-unauthorized" }, { type: ChunkUnavailableComponent, selector: "lib-vc-error-chunk-unavailable" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    <lib-vc-error-server-error *ngIf="serverError"></lib-vc-error-server-error>
+  `, isInline: true, components: [{ type: SnackBarComponent, selector: "app-snack-bar" }, { type: SessionExpiredComponent, selector: "lib-vc-error-session-expired" }, { type: UnauthorizedComponent, selector: "lib-vc-error-unauthorized" }, { type: ChunkUnavailableComponent, selector: "lib-vc-error-chunk-unavailable" }, { type: ServerErrorComponent, selector: "lib-vc-error-server-error" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersComponent, decorators: [{
             type: Component,
             args: [{
@@ -682,6 +988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
     <lib-vc-error-chunk-unavailable
       *ngIf="chunkUnavailable"
     ></lib-vc-error-chunk-unavailable>
+    <lib-vc-error-server-error *ngIf="serverError"></lib-vc-error-server-error>
   `,
                 }]
         }], ctorParameters: function () { return [{ type: GlobalErrorService }, { type: SnackBarService }]; } });
@@ -765,74 +1072,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
   `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.errorPage{background:#161b2f;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}.errorPage-top{width:100%;height:3rem;display:flex;align-items:center;padding-left:.75rem}.errorPage-container{background:#f2f2f5;border-radius:.75rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1d5dd31a;height:calc(100vh - 3.75rem);display:flex;align-items:center;justify-content:center;padding:0 4rem;margin:0 .75rem;position:relative}.errorPage-inner{display:flex;align-items:center}.errorPage-inner-image{width:16rem}.errorPage-inner-right{margin-left:2rem;width:calc(100% - 18rem)}.errorPage-inner-right .errorPage-heading{-webkit-text-fill-color:#e3e3e9;-webkit-text-stroke-color:#a9aab6;-webkit-text-stroke-width:1px;color:#e3e3e9;font-size:78px;font-weight:bold;line-height:110px;margin-bottom:1.5rem}.errorPage-inner-right .errorPage-text{color:#141724;font-size:19px;font-weight:500;line-height:1.75rem;margin-bottom:.5rem}.errorPage-inner-right .errorPage-details{color:#565a6f;font-size:13px;line-height:20px;margin-bottom:1.75rem}.errorPage-inner-right .errorPage-btn{background:#1e5dd3;border-radius:.25rem;border:none;color:#fff;display:inline-flex;align-items:center;font-size:11px;font-weight:500;line-height:2rem;padding:0 1rem}.errorPage-inner-right .errorPage-btn i{font-size:14px;margin-left:.25rem}.errorPage-copyright{font-size:11px;color:#787a8c;font-weight:500;position:absolute;bottom:8px;right:16px;line-height:16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i3.Router }]; } });
 
-class ServerErrorComponent {
-    constructor() {
-        this.errorConfig = ERROR_CONFIG.SERVER_ERROR;
-        this.VcomplyLogo = VCOMPLY_LOGO_URL;
-    }
-    refreshPage() {
-        window.location.reload();
-    }
-}
-ServerErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ServerErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ServerErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ServerErrorComponent, selector: "lib-vc-error-server-error", ngImport: i0, template: `
-    <div class="errorPage">
-      <div class="errorPage-top">
-        <img [src]="VcomplyLogo" alt="VComply" width="24" height="24" />
-      </div>
-      <div class="errorPage-container">
-        <div class="errorPage-inner">
-          <div class="errorPage-inner-image">
-            <img
-              [src]="errorConfig.imageUrl"
-              alt="Error Image"
-              width="246"
-              height="178"
-            />
-          </div>
-          <div class="errorPage-inner-right">
-            <div class="errorPage-heading">{{ errorConfig.title }}</div>
-            <div class="errorPage-text">{{ errorConfig.description }}</div>
-            <div class="errorPage-details">{{ errorConfig.details }}</div>
-            <button class="errorPage-btn" (click)="refreshPage()">
-              {{ errorConfig.buttonText }} <i class="icons">&#xe92b;</i>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.errorPage{background:#161b2f;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}.errorPage-top{width:100%;height:3rem;display:flex;align-items:center;padding-left:.75rem}.errorPage-container{background:#f2f2f5;border-radius:.75rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1d5dd31a;height:calc(100vh - 3.75rem);display:flex;align-items:center;justify-content:center;padding:0 4rem;margin:0 .75rem;position:relative}.errorPage-inner{display:flex;align-items:center}.errorPage-inner-image{width:16rem}.errorPage-inner-right{margin-left:2rem;width:calc(100% - 18rem)}.errorPage-inner-right .errorPage-heading{-webkit-text-fill-color:#e3e3e9;-webkit-text-stroke-color:#a9aab6;-webkit-text-stroke-width:1px;color:#e3e3e9;font-size:78px;font-weight:bold;line-height:110px;margin-bottom:1.5rem}.errorPage-inner-right .errorPage-text{color:#141724;font-size:19px;font-weight:500;line-height:1.75rem;margin-bottom:.5rem}.errorPage-inner-right .errorPage-details{color:#565a6f;font-size:13px;line-height:20px;margin-bottom:1.75rem}.errorPage-inner-right .errorPage-btn{background:#1e5dd3;border-radius:.25rem;border:none;color:#fff;display:inline-flex;align-items:center;font-size:11px;font-weight:500;line-height:2rem;padding:0 1rem}.errorPage-inner-right .errorPage-btn i{font-size:14px;margin-left:.25rem}.errorPage-copyright{font-size:11px;color:#787a8c;font-weight:500;position:absolute;bottom:8px;right:16px;line-height:16px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ServerErrorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-vc-error-server-error', template: `
-    <div class="errorPage">
-      <div class="errorPage-top">
-        <img [src]="VcomplyLogo" alt="VComply" width="24" height="24" />
-      </div>
-      <div class="errorPage-container">
-        <div class="errorPage-inner">
-          <div class="errorPage-inner-image">
-            <img
-              [src]="errorConfig.imageUrl"
-              alt="Error Image"
-              width="246"
-              height="178"
-            />
-          </div>
-          <div class="errorPage-inner-right">
-            <div class="errorPage-heading">{{ errorConfig.title }}</div>
-            <div class="errorPage-text">{{ errorConfig.description }}</div>
-            <div class="errorPage-details">{{ errorConfig.details }}</div>
-            <button class="errorPage-btn" (click)="refreshPage()">
-              {{ errorConfig.buttonText }} <i class="icons">&#xe92b;</i>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.errorPage{background:#161b2f;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}.errorPage-top{width:100%;height:3rem;display:flex;align-items:center;padding-left:.75rem}.errorPage-container{background:#f2f2f5;border-radius:.75rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1d5dd31a;height:calc(100vh - 3.75rem);display:flex;align-items:center;justify-content:center;padding:0 4rem;margin:0 .75rem;position:relative}.errorPage-inner{display:flex;align-items:center}.errorPage-inner-image{width:16rem}.errorPage-inner-right{margin-left:2rem;width:calc(100% - 18rem)}.errorPage-inner-right .errorPage-heading{-webkit-text-fill-color:#e3e3e9;-webkit-text-stroke-color:#a9aab6;-webkit-text-stroke-width:1px;color:#e3e3e9;font-size:78px;font-weight:bold;line-height:110px;margin-bottom:1.5rem}.errorPage-inner-right .errorPage-text{color:#141724;font-size:19px;font-weight:500;line-height:1.75rem;margin-bottom:.5rem}.errorPage-inner-right .errorPage-details{color:#565a6f;font-size:13px;line-height:20px;margin-bottom:1.75rem}.errorPage-inner-right .errorPage-btn{background:#1e5dd3;border-radius:.25rem;border:none;color:#fff;display:inline-flex;align-items:center;font-size:11px;font-weight:500;line-height:2rem;padding:0 1rem}.errorPage-inner-right .errorPage-btn i{font-size:14px;margin-left:.25rem}.errorPage-copyright{font-size:11px;color:#787a8c;font-weight:500;position:absolute;bottom:8px;right:16px;line-height:16px}\n"] }]
-        }] });
-
 class SnackBarModule {
 }
 SnackBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -897,37 +1136,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }] }]; } });
 
 class HttpReqInterceptor {
-    constructor(errorService, snackBarService) {
+    constructor(errorService) {
         this.errorService = errorService;
-        this.snackBarService = snackBarService;
     }
     intercept(req, next) {
         return next.handle(req).pipe(timeout(API_TIMEOUT_TIME), tap((event) => {
             if (event instanceof HttpResponse) {
-                this.handleSoftErrors(event);
+                this.errorService.handleSoftErrors(event);
             }
         }), catchError((error) => {
             this.errorService.handleError(error, req);
             return throwError(error);
         }));
     }
-    handleSoftErrors(event) {
-        const xData = event.headers.get('X-Data');
-        if (xData) {
-            const parsedData = JSON.parse(xData);
-            const statusCode = parsedData.statusCode;
-            const statusMessage = parsedData.message;
-            if (statusCode && statusCode !== 0) {
-                this.snackBarService.show(statusMessage || 'Error occurred', 'error');
-            }
-        }
-    }
 }
-HttpReqInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HttpReqInterceptor, deps: [{ token: GlobalErrorService }, { token: SnackBarService }], target: i0.ɵɵFactoryTarget.Injectable });
+HttpReqInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HttpReqInterceptor, deps: [{ token: GlobalErrorService }], target: i0.ɵɵFactoryTarget.Injectable });
 HttpReqInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HttpReqInterceptor });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HttpReqInterceptor, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: GlobalErrorService }, { type: SnackBarService }]; } });
+        }], ctorParameters: function () { return [{ type: GlobalErrorService }]; } });
 
 const FOR_ROOT_SENTRY_OPTIONS_TOKEN = new InjectionToken('forRoot() SentryErrorHandler options');
 class VcErrorHandlersModule {