vc-error-handlers 0.1.7 → 0.1.9

package/fesm2015/vc-error-handlers.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Directive, ViewChild, NgModule, Optional, InjectionToken, ErrorHandler } from '@angular/core';
+import { Injectable, Component, Input, Directive, ViewChild, NgModule, Optional, InjectionToken, ErrorHandler } from '@angular/core';
 import { Subject, throwError } from 'rxjs';
-import * as i1 from '@vcomply/authorizer';
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/router';
 import { NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import * as i1 from '@vcomply/authorizer';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { HttpResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as Sentry from '@sentry/angular-ivy';
-import { timeout, catchError } from 'rxjs/operators';
+import { timeout, tap, catchError } from 'rxjs/operators';
 
 class VcErrorHandlersService {
     constructor() { }
@@ -38,17 +38,182 @@ var ErrorStatusCode;
     ErrorStatusCode[ErrorStatusCode["JSChunkUnavailable"] = 600] = "JSChunkUnavailable";
 })(ErrorStatusCode || (ErrorStatusCode = {}));
 
-class GlobalErrorService {
+const VCOMPLY_LOGO_URL = 'https://cdn.v-comply.com/logo/prod/v-logo.svg';
+const API_TIMEOUT_TIME = 1000 * 15;
+const ERROR_CONFIG = {
+    PAGE_NOT_FOUND: {
+        imageUrl: 'https://cdn.v-comply.com/application/images/Error-page-illustration.svg',
+        title: 'Oops!',
+        description: "The page you're looking for doesn't exist.",
+        details: 'Please check the URL or return to the homepage.',
+        buttonText: 'GO TO DASHBOARD',
+    },
+    UNAUTHORIZED: {
+        imageUrl: 'https://cdn.v-comply.com/application/images/Error-page-illustration.svg',
+        title: 'Oops!',
+        description: "You don't have permission to access this page.",
+        details: 'If you believe this is an error, please contact',
+        email: 'help@v-comply.com',
+        support: 'for support',
+        buttonText: 'CONTACT SUPPORT',
+        mail: 'mailto:help@v-comply.com',
+    },
+    SESSION_EXPIRED: {
+        heading: 'Session Expired!',
+        description: 'Your session has expired. Please log in again to continue using the app.',
+        buttonText: 'LOGIN',
+    },
+    CHUNK_UNAVAILABLE: {
+        heading: 'Oops!',
+        description: 'We are unable to load the data.',
+        buttonText: 'REFRESH',
+    },
+    SERVER_ERROR: {
+        imageUrl: 'https://cdn.v-comply.com/application/images/Error-page-illustration.svg',
+        title: 'Oops!',
+        description: 'We are unable to load the data.',
+        details: 'Please refresh this page or try again later.',
+        buttonText: 'REFRESH',
+        snackBarMessage: `Oops! Something went wrong. Please try again later.`,
+    },
+    NETWORK_UNAVAILABLE: {
+        offlineMessage: "You're currently offline.Please check your internet connection and try again.",
+    },
+};
+
+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,
+    },
+];
+
+class SnackBarService {
     constructor() {
+        this.snackbarSubject = new Subject();
+        this.snackbarState = this.snackbarSubject.asObservable();
+    }
+    show(message, type) {
+        this.snackbarSubject.next({
+            show: true,
+            message,
+            icon: type,
+        });
+    }
+    hide() {
+        this.snackbarSubject.next({
+            show: false,
+            message: '',
+            icon: '',
+        });
+    }
+}
+SnackBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SnackBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], 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.globalError$.next(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;
@@ -59,15 +224,90 @@ class GlobalErrorService {
     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() {
+        var _a;
+        const currentRoute = this.router.routerState.snapshot.root.firstChild;
+        return (_a = currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.data) === null || _a === void 0 ? void 0 : _a.pageCode;
+    }
 }
-GlobalErrorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GlobalErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+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) {
@@ -103,77 +343,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }] });
 
-const VCOMPLY_IMAGE_URL = 'https://cdn.v-comply.com/logo/prod/v-logo.svg';
-const API_TIMEOUT_TIME = 1000 * 15;
-const ERROR_CONFIG = {
-    PAGE_NOT_FOUND: {
-        imageUrl: 'https://cdn.v-comply.com/application/images/Error-page-illustration.svg',
-        title: 'Oops!',
-        description: "The page you're looking for doesn't exist.",
-        details: 'Please check the URL or return to the homepage.',
-        buttonText: 'GO TO DASHBOARD',
-    },
-    UNAUTHORIZED: {
-        imageUrl: 'https://cdn.v-comply.com/application/images/Error-page-illustration.svg',
-        title: 'Oops!',
-        description: "You don't have permission to access this page.",
-        details: 'If you believe this is an error, please contact',
-        email: 'help@v-comply.com',
-        support: 'for support',
-        buttonText: 'CONTACT SUPPORT',
-    },
-    SESSION_EXPIRED: {
-        heading: 'Session Expired!',
-        description: 'Your session has expired. Please log in again to continue using the app.',
-        buttonText: 'LOGIN',
-    },
-};
+class SnackBarComponent {
+    constructor(snackbarService) {
+        this.snackbarService = snackbarService;
+        this.show = false;
+        this.message = '--';
+        this.icon = '';
+        this.type = 'alert';
+        this.icons = {
+            success: '',
+            warning: '',
+            info: '',
+            alert: '',
+            error: '',
+        };
+    }
+    ngOnInit() {
+        this.snackbarSubscription = this.snackbarService.snackbarState.subscribe((state) => {
+            if (state.icon && Object.keys(this.icons).includes(state === null || state === void 0 ? void 0 : state.icon)) {
+                this.icon = this.icons[state.icon];
+                this.type = state === null || state === void 0 ? void 0 : state.icon;
+            }
+            this.message = state.message;
+            this.show = state.show;
+        });
+    }
+    setAutoClose() {
+        setTimeout(() => {
+            this.show = false;
+            this.close();
+        }, 3000);
+    }
+    close() {
+        this.show = false;
+        this.snackbarService.hide();
+    }
+    ngOnDestroy() {
+        this.snackbarSubscription.unsubscribe();
+    }
+}
+SnackBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
+SnackBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SnackBarComponent, selector: "app-snack-bar", ngImport: i0, template: "<div class=\"workflow-snackbar\" *ngIf=\"show\">\r\n    <div class=\"workflow-snackbar-inner\">\r\n      <div class=\"workflow-snackbarText\">\r\n        <!-- &#xe914; -->\r\n        <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> <span [innerHTML]=\"message\">{{ message }}</span>\r\n      </div>\r\n      <button (click)=\"close()\">[ <span>Close</span> ]</button>\r\n    </div>\r\n  </div>", styles: ["::ng-deep .workflow-snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:2147483647!important;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .workflow-snackbar.white{background-color:#fff;color:#000;z-index:20}::ng-deep .workflow-snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}::ng-deep .workflow-snackbar .workflow-snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#ffffff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i{background:#f1f1f1;color:#d93b41;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.success{color:#34aa44}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.warning{color:#f0b819}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.info{color:#1e5dd3}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.alert,::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.error{color:#d93b41}::ng-deep .workflow-snackbar .workflow-snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}::ng-deep .workflow-snackbar .workflow-snackbar-inner button span{color:#1e5dd3;font-weight:500}::ng-deep .workflow-snackbar .workflow-snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-snack-bar', template: "<div class=\"workflow-snackbar\" *ngIf=\"show\">\r\n    <div class=\"workflow-snackbar-inner\">\r\n      <div class=\"workflow-snackbarText\">\r\n        <!-- &#xe914; -->\r\n        <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> <span [innerHTML]=\"message\">{{ message }}</span>\r\n      </div>\r\n      <button (click)=\"close()\">[ <span>Close</span> ]</button>\r\n    </div>\r\n  </div>", styles: ["::ng-deep .workflow-snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:2147483647!important;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .workflow-snackbar.white{background-color:#fff;color:#000;z-index:20}::ng-deep .workflow-snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}::ng-deep .workflow-snackbar .workflow-snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#ffffff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i{background:#f1f1f1;color:#d93b41;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.success{color:#34aa44}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.warning{color:#f0b819}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.info{color:#1e5dd3}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.alert,::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.error{color:#d93b41}::ng-deep .workflow-snackbar .workflow-snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}::ng-deep .workflow-snackbar .workflow-snackbar-inner button span{color:#1e5dd3;font-weight:500}::ng-deep .workflow-snackbar .workflow-snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
+        }], ctorParameters: function () { return [{ type: SnackBarService }]; } });
 
 class DialogConfig {
 }
 
-class SessionExpiredModalComponent {
-    constructor(dialogConfig, routerService) {
+class ErrorModalComponent {
+    constructor(authService, dialogConfig, routerService) {
+        this.authService = authService;
         this.dialogConfig = dialogConfig;
         this.routerService = routerService;
-        this.errorConfig = ERROR_CONFIG.SESSION_EXPIRED;
+        this.errorType = 'session_expired';
         this.data = {
-            header: 'Message',
+            heading: 'Message',
             description: 'Description',
             buttonText: 'Click Action',
         };
-        this.data = this.dialogConfig.data;
+        this.setDataConfig();
+    }
+    setDataConfig() {
+        var _a, _b;
+        this.data = (_a = this.dialogConfig.data) === null || _a === void 0 ? void 0 : _a.errorConfig;
+        this.errorType = (_b = this.dialogConfig.data) === null || _b === void 0 ? void 0 : _b.errorType;
     }
     onContinueAction() {
-        this.routerService.redirectToLogin();
+        if (this.errorType === 'session_expired') {
+            this.authService.logoutUser();
+            this.routerService.redirectToLogin();
+        }
+        else if (this.errorType === 'chunk_not_found') {
+            window.location.reload();
+        }
     }
 }
-SessionExpiredModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SessionExpiredModalComponent, deps: [{ token: DialogConfig }, { token: RouterService }], target: i0.ɵɵFactoryTarget.Component });
-SessionExpiredModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SessionExpiredModalComponent, selector: "lib-vc-error-session-expired-modal", ngImport: i0, template: ` <div class="error-dialog-box">
-    <div class="error-dialog-box-top">{{ errorConfig.heading }}</div>
+ErrorModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ErrorModalComponent, deps: [{ token: AuthService }, { token: DialogConfig }, { token: RouterService }], target: i0.ɵɵFactoryTarget.Component });
+ErrorModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ErrorModalComponent, selector: "lib-vc-error-modal", inputs: { errorType: "errorType" }, ngImport: i0, template: ` <div class="error-dialog-box">
+    <div class="error-dialog-box-top">{{ data.heading }}</div>
     <div class="error-dialog-box-mid">
-      {{ errorConfig.description }}
+      {{ data.description }}
     </div>
     <div class="error-dialog-box-bottom">
       <button (click)="onContinueAction()" class="logIn-btn">
-        {{ errorConfig.buttonText }}
+        {{ data.buttonText }}
       </button>
     </div>
   </div>`, isInline: true, styles: [".error-dialog-box{background:#fff;border-radius:.75rem;box-shadow:0 1px 10px #0003;width:27rem}.error-dialog-box-top{color:#000;font-size:16px;font-weight:500;border-radius:.75rem .75rem 0 0;display:flex;align-items:center;height:3.375rem;padding:0 1rem;margin-bottom:1rem}.error-dialog-box-mid{color:#565a6f;font-size:13px;min-height:5.5rem;padding:0 1rem}.error-dialog-box-bottom{display:flex;justify-content:end;padding:1rem}.error-dialog-box-bottom button.logIn-btn{background:#1e5dd3;border-radius:.125rem;border:none;color:#fff;cursor:pointer;font-size:11px;height:2rem;padding:.5rem .75rem}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SessionExpiredModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ErrorModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-vc-error-session-expired-modal', template: ` <div class="error-dialog-box">
-    <div class="error-dialog-box-top">{{ errorConfig.heading }}</div>
+            args: [{ selector: 'lib-vc-error-modal', template: ` <div class="error-dialog-box">
+    <div class="error-dialog-box-top">{{ data.heading }}</div>
     <div class="error-dialog-box-mid">
-      {{ errorConfig.description }}
+      {{ data.description }}
     </div>
     <div class="error-dialog-box-bottom">
       <button (click)="onContinueAction()" class="logIn-btn">
-        {{ errorConfig.buttonText }}
+        {{ data.buttonText }}
       </button>
     </div>
   </div>`, styles: [".error-dialog-box{background:#fff;border-radius:.75rem;box-shadow:0 1px 10px #0003;width:27rem}.error-dialog-box-top{color:#000;font-size:16px;font-weight:500;border-radius:.75rem .75rem 0 0;display:flex;align-items:center;height:3.375rem;padding:0 1rem;margin-bottom:1rem}.error-dialog-box-mid{color:#565a6f;font-size:13px;min-height:5.5rem;padding:0 1rem}.error-dialog-box-bottom{display:flex;justify-content:end;padding:1rem}.error-dialog-box-bottom button.logIn-btn{background:#1e5dd3;border-radius:.125rem;border:none;color:#fff;cursor:pointer;font-size:11px;height:2rem;padding:.5rem .75rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: DialogConfig }, { type: RouterService }]; } });
+        }], ctorParameters: function () { return [{ type: AuthService }, { type: DialogConfig }, { type: RouterService }]; }, propDecorators: { errorType: [{
+                type: Input
+            }] } });
 
 class InsertionDirective {
     constructor(viewContainerRef) {
@@ -267,7 +541,7 @@ class DialogComponent {
     }
 }
 DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: DialogRef }, { token: DialogConfig }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DialogComponent, selector: "app-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: InsertionDirective, descendants: true, static: true }], ngImport: i0, template: "<div\r\n  class=\"overlay\"\r\n  (click)=\"onOverlayClicked($event)\"\r\n  [ngClass]=\"{\r\n    top: position === 'TOP',\r\n    right: position === 'RIGHT',\r\n    bottom: position === 'BOTTOM',\r\n    left: position === 'LEFT',\r\n    center: position === 'CENTER',\r\n    black: background === 'black',\r\n    whiteBlur: background === 'whiteBlur'\r\n  }\" [class.pointer-none]=\"pointer === 'none'\"\r\n>\r\n  <div\r\n    class=\"dialog\"\r\n    [class.animate]=\"animation\"\r\n    (click)=\"onDialogClicked($event)\"\r\n    [ngClass]=\"{\r\n      top: position === 'TOP',\r\n      right: position === 'RIGHT',\r\n      bottom: position === 'BOTTOM',\r\n      left: position === 'LEFT',\r\n      center: position === 'CENTER'\r\n    }\"\r\n  >\r\n    <ng-template appInsertion></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".overlay{display:flex;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;justify-content:center;z-index:2147483009!important}.overlay.low{z-index:1}.overlay.black{background:#161b2fcc}.overlay.whiteBlur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: InsertionDirective, selector: "[appInsertion]" }] });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DialogComponent, selector: "app-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: InsertionDirective, descendants: true, static: true }], ngImport: i0, template: "<div\r\n  class=\"overlay\"\r\n  (click)=\"onOverlayClicked($event)\"\r\n  [ngClass]=\"{\r\n    top: position === 'TOP',\r\n    right: position === 'RIGHT',\r\n    bottom: position === 'BOTTOM',\r\n    left: position === 'LEFT',\r\n    center: position === 'CENTER',\r\n    black: background === 'black',\r\n    whiteBlur: background === 'whiteBlur'\r\n  }\" [class.pointer-none]=\"pointer === 'none'\"\r\n>\r\n  <div\r\n    class=\"dialog\"\r\n    [class.animate]=\"animation\"\r\n    (click)=\"onDialogClicked($event)\"\r\n    [ngClass]=\"{\r\n      top: position === 'TOP',\r\n      right: position === 'RIGHT',\r\n      bottom: position === 'BOTTOM',\r\n      left: position === 'LEFT',\r\n      center: position === 'CENTER'\r\n    }\"\r\n  >\r\n    <ng-template appInsertion></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".overlay{display:flex;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;justify-content:center;z-index:2147483009!important}.overlay.low{z-index:1}.overlay.black{background:#161b2fcc}.overlay.whiteBlur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: InsertionDirective, selector: "[appInsertion]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dialog', template: "<div\r\n  class=\"overlay\"\r\n  (click)=\"onOverlayClicked($event)\"\r\n  [ngClass]=\"{\r\n    top: position === 'TOP',\r\n    right: position === 'RIGHT',\r\n    bottom: position === 'BOTTOM',\r\n    left: position === 'LEFT',\r\n    center: position === 'CENTER',\r\n    black: background === 'black',\r\n    whiteBlur: background === 'whiteBlur'\r\n  }\" [class.pointer-none]=\"pointer === 'none'\"\r\n>\r\n  <div\r\n    class=\"dialog\"\r\n    [class.animate]=\"animation\"\r\n    (click)=\"onDialogClicked($event)\"\r\n    [ngClass]=\"{\r\n      top: position === 'TOP',\r\n      right: position === 'RIGHT',\r\n      bottom: position === 'BOTTOM',\r\n      left: position === 'LEFT',\r\n      center: position === 'CENTER'\r\n    }\"\r\n  >\r\n    <ng-template appInsertion></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".overlay{display:flex;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;justify-content:center;z-index:2147483009!important}.overlay.low{z-index:1}.overlay.black{background:#161b2fcc}.overlay.whiteBlur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"] }]
@@ -352,24 +626,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }]; } });
 
 class SessionExpiredComponent {
-    constructor(authService, dialogService) {
-        this.authService = authService;
+    constructor(dialogService) {
         this.dialogService = dialogService;
         this.errorConfig = ERROR_CONFIG.SESSION_EXPIRED;
     }
     ngOnInit() {
-        this.authService.logoutUser();
         this.openSessionExpiredModal();
     }
     openSessionExpiredModal() {
-        this.dialogService.open(SessionExpiredModalComponent, {
-            data: this.errorConfig,
+        this.dialogService.open(ErrorModalComponent, {
+            data: {
+                errorType: 'session_expired',
+                errorConfig: this.errorConfig,
+            },
             position: 'center',
             background: 'whiteBlur',
         });
     }
 }
-SessionExpiredComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SessionExpiredComponent, deps: [{ token: AuthService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+SessionExpiredComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SessionExpiredComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
 SessionExpiredComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SessionExpiredComponent, selector: "lib-vc-error-session-expired", ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SessionExpiredComponent, decorators: [{
             type: Component,
@@ -377,25 +652,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                     selector: 'lib-vc-error-session-expired',
                     template: ``,
                 }]
-        }], ctorParameters: function () { return [{ type: AuthService }, { type: DialogService }]; } });
+        }], ctorParameters: function () { return [{ type: DialogService }]; } });
 
 class UnauthorizedComponent {
     constructor() {
+        this.currentYear = new Date().getFullYear();
         this.errorConfig = ERROR_CONFIG.UNAUTHORIZED;
-        this.VcomplyImage = VCOMPLY_IMAGE_URL;
+        this.VcomplyLogo = VCOMPLY_LOGO_URL;
+    }
+    redirectToSupport() {
+        window.location.href = this.errorConfig.mail;
     }
-    redirectToSupport() { }
 }
 UnauthorizedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 UnauthorizedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: UnauthorizedComponent, selector: "lib-vc-error-unauthorized", ngImport: i0, template: `
     <div class="errorPage">
       <div class="errorPage-top">
-        <img
-          src="https://cdn.v-comply.com/logo/prod/v-logo.svg"
-          alt="VComply"
-          width="24"
-          height="24"
-        />
+        <img [src]="VcomplyLogo" alt="VComply" width="24" height="24" />
       </div>
       <div class="errorPage-container">
         <div class="errorPage-inner">
@@ -403,8 +676,8 @@ UnauthorizedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <img
               [src]="errorConfig.imageUrl"
               alt="Error Image"
-              width="256"
-              height="256"
+              width="246"
+              height="178"
             />
           </div>
           <div class="errorPage-inner-right">
@@ -420,20 +693,18 @@ UnauthorizedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </button>
           </div>
         </div>
+        <div class="errorPage-copyright">
+          &copy;&nbsp;{{ currentYear }}, VCOMPLY TECHNOLOGIES, INC.
+        </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}.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}\n"] });
+  `, 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: UnauthorizedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-vc-error-unauthorized', template: `
     <div class="errorPage">
       <div class="errorPage-top">
-        <img
-          src="https://cdn.v-comply.com/logo/prod/v-logo.svg"
-          alt="VComply"
-          width="24"
-          height="24"
-        />
+        <img [src]="VcomplyLogo" alt="VComply" width="24" height="24" />
       </div>
       <div class="errorPage-container">
         <div class="errorPage-inner">
@@ -441,8 +712,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             <img
               [src]="errorConfig.imageUrl"
               alt="Error Image"
-              width="256"
-              height="256"
+              width="246"
+              height="178"
             />
           </div>
           <div class="errorPage-inner-right">
@@ -458,19 +729,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             </button>
           </div>
         </div>
+        <div class="errorPage-copyright">
+          &copy;&nbsp;{{ currentYear }}, VCOMPLY TECHNOLOGIES, INC.
+        </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 ChunkUnavailableComponent {
+    constructor(dialogService) {
+        this.dialogService = dialogService;
+        this.errorConfig = ERROR_CONFIG.CHUNK_UNAVAILABLE;
+    }
+    ngOnInit() {
+        this.openSessionExpiredModal();
+    }
+    openSessionExpiredModal() {
+        this.dialogService.open(ErrorModalComponent, {
+            data: {
+                errorType: 'chunk_not_found',
+                errorConfig: this.errorConfig,
+            },
+            position: 'center',
+            background: 'whiteBlur',
+        });
+    }
+}
+ChunkUnavailableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChunkUnavailableComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+ChunkUnavailableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChunkUnavailableComponent, selector: "lib-vc-error-chunk-unavailable", ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChunkUnavailableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-vc-error-chunk-unavailable',
+                    template: ``,
+                }]
+        }], 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>
-  `, 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}.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}\n"] }]
+  `, 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) {
+    constructor(errorService, snackBarService) {
         this.errorService = errorService;
+        this.snackBarService = snackBarService;
+        this.errorConfig = ERROR_CONFIG.NETWORK_UNAVAILABLE;
         this.unauthorized = false;
         this.sessionExpired = false;
-        this.networkUnavailable = false;
+        this.chunkUnavailable = false;
+        this.serverError = false;
+        this.isOnline = navigator.onLine;
+        this.onNetworkOnline = () => {
+            this.isOnline = true;
+            this.hideSnackBar();
+        };
+        this.onNetworkOffline = () => {
+            this.isOnline = false;
+            this.showOfflineSnackBar();
+        };
         this.subscribeGlobalError();
     }
+    ngOnInit() {
+        this.subscribeNetworkDetection();
+    }
+    ngOnDestroy() {
+        window.removeEventListener('online', this.onNetworkOnline);
+        window.removeEventListener('offline', this.onNetworkOffline);
+    }
     subscribeGlobalError() {
         this.errorService.globalError$.subscribe((error) => {
             this.handleError(error);
@@ -483,50 +873,81 @@ class VcErrorHandlersComponent {
         else if (error.status === ErrorStatusCode.UnauthorizedAccess) {
             this.unauthorized = true;
         }
+        else if (error.status === ErrorStatusCode.JSChunkUnavailable) {
+            this.chunkUnavailable = true;
+        }
         else if (error.status === ErrorStatusCode.NetworkUnavailable) {
-            this.networkUnavailable = true;
+            this.handleNetworkError();
+        }
+        else if (this.errorService.isServerError(error)) {
+            this.serverError = true;
         }
     }
+    subscribeNetworkDetection() {
+        window.addEventListener('online', this.onNetworkOnline);
+        window.addEventListener('offline', this.onNetworkOffline);
+    }
+    handleNetworkError() {
+        if (!this.isOnline) {
+            this.showOfflineSnackBar();
+        }
+    }
+    showOfflineSnackBar() {
+        this.snackBarService.show(this.errorConfig.offlineMessage, 'error');
+    }
+    hideSnackBar() {
+        this.snackBarService.hide();
+    }
 }
-VcErrorHandlersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersComponent, deps: [{ token: GlobalErrorService }], target: i0.ɵɵFactoryTarget.Component });
+VcErrorHandlersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersComponent, deps: [{ token: GlobalErrorService }, { token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
 VcErrorHandlersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: VcErrorHandlersComponent, selector: "lib-vc-error-handlers", ngImport: i0, template: `
+    <app-snack-bar></app-snack-bar>
     <lib-vc-error-session-expired
       *ngIf="sessionExpired"
     ></lib-vc-error-session-expired>
     <lib-vc-error-unauthorized *ngIf="unauthorized"></lib-vc-error-unauthorized>
-  `, isInline: true, components: [{ type: SessionExpiredComponent, selector: "lib-vc-error-session-expired" }, { type: UnauthorizedComponent, selector: "lib-vc-error-unauthorized" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    <lib-vc-error-chunk-unavailable
+      *ngIf="chunkUnavailable"
+    ></lib-vc-error-chunk-unavailable>
+    <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: [{
                     selector: 'lib-vc-error-handlers',
                     template: `
+    <app-snack-bar></app-snack-bar>
     <lib-vc-error-session-expired
       *ngIf="sessionExpired"
     ></lib-vc-error-session-expired>
     <lib-vc-error-unauthorized *ngIf="unauthorized"></lib-vc-error-unauthorized>
+    <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 }]; } });
+        }], ctorParameters: function () { return [{ type: GlobalErrorService }, { type: SnackBarService }]; } });
 
 class PageNotFoundComponent {
-    constructor() {
+    constructor(router) {
+        this.router = router;
         this.errorConfig = ERROR_CONFIG.PAGE_NOT_FOUND;
-        this.VcomplyImage = VCOMPLY_IMAGE_URL;
+        this.VcomplyLogo = VCOMPLY_LOGO_URL;
+        this.currentYear = new Date().getFullYear();
     }
     redirectToHome() {
-        // Redirect to home page
+        const currentUrl = window.location.href;
+        if (currentUrl.includes('organization')) {
+            this.router.navigate(['/global-dashboard/compliance_dashboard']);
+        }
     }
 }
-PageNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PageNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PageNotFoundComponent, deps: [{ token: i3.Router }], target: i0.ɵɵFactoryTarget.Component });
 PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: PageNotFoundComponent, selector: "lib-vc-error-page-not-found", ngImport: i0, template: `
     <div class="errorPage">
       <div class="errorPage-top">
-        <img
-          src="https://cdn.v-comply.com/logo/prod/v-logo.svg"
-          alt="VComply"
-          width="24"
-          height="24"
-        />
+        <img [src]="VcomplyLogo" alt="VComply" width="24" height="24" />
       </div>
       <div class="errorPage-container">
         <div class="errorPage-inner">
@@ -534,8 +955,8 @@ PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <img
               [src]="errorConfig.imageUrl"
               alt="Error Image"
-              width="256"
-              height="256"
+              width="246"
+              height="178"
             />
           </div>
           <div class="errorPage-inner-right">
@@ -547,20 +968,18 @@ PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </button>
           </div>
         </div>
+        <div class="errorPage-copyright">
+          &copy;&nbsp;{{ currentYear }}, VCOMPLY TECHNOLOGIES, INC.
+        </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}.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}\n"] });
+  `, 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: PageNotFoundComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-vc-error-page-not-found', template: `
     <div class="errorPage">
       <div class="errorPage-top">
-        <img
-          src="https://cdn.v-comply.com/logo/prod/v-logo.svg"
-          alt="VComply"
-          width="24"
-          height="24"
-        />
+        <img [src]="VcomplyLogo" alt="VComply" width="24" height="24" />
       </div>
       <div class="errorPage-container">
         <div class="errorPage-inner">
@@ -568,8 +987,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             <img
               [src]="errorConfig.imageUrl"
               alt="Error Image"
-              width="256"
-              height="256"
+              width="246"
+              height="178"
             />
           </div>
           <div class="errorPage-inner-right">
@@ -581,110 +1000,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             </button>
           </div>
         </div>
+        <div class="errorPage-copyright">
+          &copy;&nbsp;{{ currentYear }}, VCOMPLY TECHNOLOGIES, INC.
+        </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}.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}\n"] }]
-        }] });
-
-class ChunkUnavailableComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-ChunkUnavailableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChunkUnavailableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChunkUnavailableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChunkUnavailableComponent, selector: "lib-chunk-unavailable", ngImport: i0, template: "<p>chunk-unavailable works!</p>\r\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChunkUnavailableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-chunk-unavailable', template: "<p>chunk-unavailable works!</p>\r\n", styles: [""] }]
-        }], ctorParameters: function () { return []; } });
-
-class ServerErrorComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-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-server-error", ngImport: i0, template: "<p>server-error works!</p>\r\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ServerErrorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-server-error', template: "<p>server-error works!</p>\r\n", styles: [""] }]
-        }], ctorParameters: function () { return []; } });
-
-class SnackBarService {
-    constructor() {
-        this.snackbarSubject = new Subject();
-        this.snackbarState = this.snackbarSubject.asObservable();
-    }
-    show(message, type) {
-        this.snackbarSubject.next({
-            show: true,
-            message,
-            icon: type,
-        });
-    }
-    hide() {
-        this.snackbarSubject.next({
-            show: false,
-            message: '',
-            icon: '',
-        });
-    }
-}
-SnackBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SnackBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class SnackBarComponent {
-    constructor(snackbarService) {
-        this.snackbarService = snackbarService;
-        this.show = false;
-        this.message = '--';
-        this.icon = '&#xe914;';
-        this.type = 'alert';
-        this.icons = {
-            success: '&#xe93d;',
-            warning: '&#xe914;',
-            info: '&#xe932;',
-            alert: '&#xe914;',
-            error: '&#xeaae;',
-        };
-    }
-    ngOnInit() {
-        this.snackbarSubscription = this.snackbarService.snackbarState.subscribe((state) => {
-            if (state.icon && Object.keys(this.icons).includes(state === null || state === void 0 ? void 0 : state.icon)) {
-                this.icon = this.icons[state.icon];
-                this.type = state === null || state === void 0 ? void 0 : state.icon;
-            }
-            this.message = state.message;
-            this.show = state.show;
-            this.setAutoClose();
-        });
-    }
-    setAutoClose() {
-        setTimeout(() => {
-            this.show = false;
-            this.close();
-        }, 3000);
-    }
-    close() {
-        this.show = false;
-        this.snackbarService.hide();
-    }
-    ngOnDestroy() {
-        this.snackbarSubscription.unsubscribe();
-    }
-}
-SnackBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
-SnackBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SnackBarComponent, selector: "app-snack-bar", ngImport: i0, template: "<div class=\"workflow-snackbar\" *ngIf=\"show\">\r\n    <div class=\"workflow-snackbar-inner\">\r\n      <div class=\"workflow-snackbarText\">\r\n        <!-- &#xe914; -->\r\n        <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> <span [innerHTML]=\"message\">{{ message }}</span>\r\n      </div>\r\n      <button (click)=\"close()\">[ <span>Close</span> ]</button>\r\n    </div>\r\n  </div>", styles: ["::ng-deep .workflow-snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:2147483647!important;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .workflow-snackbar.white{background-color:#fff;color:#000;z-index:20}::ng-deep .workflow-snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}::ng-deep .workflow-snackbar .workflow-snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#ffffff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i{background:#f1f1f1;color:#d93b41;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.success{color:#34aa44}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.warning{color:#f0b819}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.info{color:#1e5dd3}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.alert,::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.error{color:#d93b41}::ng-deep .workflow-snackbar .workflow-snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}::ng-deep .workflow-snackbar .workflow-snackbar-inner button span{color:#1e5dd3;font-weight:500}::ng-deep .workflow-snackbar .workflow-snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-snack-bar', template: "<div class=\"workflow-snackbar\" *ngIf=\"show\">\r\n    <div class=\"workflow-snackbar-inner\">\r\n      <div class=\"workflow-snackbarText\">\r\n        <!-- &#xe914; -->\r\n        <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> <span [innerHTML]=\"message\">{{ message }}</span>\r\n      </div>\r\n      <button (click)=\"close()\">[ <span>Close</span> ]</button>\r\n    </div>\r\n  </div>", styles: ["::ng-deep .workflow-snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:2147483647!important;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .workflow-snackbar.white{background-color:#fff;color:#000;z-index:20}::ng-deep .workflow-snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}::ng-deep .workflow-snackbar .workflow-snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#ffffff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i{background:#f1f1f1;color:#d93b41;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.success{color:#34aa44}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.warning{color:#f0b819}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.info{color:#1e5dd3}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.alert,::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.error{color:#d93b41}::ng-deep .workflow-snackbar .workflow-snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}::ng-deep .workflow-snackbar .workflow-snackbar-inner button span{color:#1e5dd3;font-weight:500}::ng-deep .workflow-snackbar .workflow-snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
-        }], ctorParameters: function () { return [{ type: SnackBarService }]; } });
+  `, 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 SnackBarModule {
 }
@@ -707,8 +1029,9 @@ class Configurations {
 }
 
 class SentryErrorHandler {
-    constructor(authorizerService, config) {
+    constructor(authorizerService, errorService, config) {
         this.authorizerService = authorizerService;
+        this.errorService = errorService;
         if (config === null || config === void 0 ? void 0 : config.sentryConfig) {
             const SENTRY_CONFIG = config.sentryConfig;
             Sentry.init({
@@ -728,22 +1051,24 @@ class SentryErrorHandler {
     }
     handleError(error) {
         const ERROR = (error === null || error === void 0 ? void 0 : error.originalError) || error;
-        this.handleChunkError(ERROR);
+        this.handleChunkNotFoundError(ERROR);
         Sentry.captureException(ERROR);
     }
-    handleChunkError(error) {
-        const chunkFailedMessage = /Loading chunk [\d]+ failed/;
-        if (chunkFailedMessage.test(error === null || error === void 0 ? void 0 : error.message)) {
-            window.location.reload();
+    handleChunkNotFoundError(error) {
+        const failedMessage = /Loading chunk [\d]+ failed/;
+        if (failedMessage.test(error.message)) {
+            this.errorService.globalError$.next({
+                status: ErrorStatusCode.JSChunkUnavailable,
+            });
         }
     }
 }
-SentryErrorHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SentryErrorHandler, deps: [{ token: i1.AuthorizerService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SentryErrorHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SentryErrorHandler, deps: [{ token: i1.AuthorizerService }, { token: GlobalErrorService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 SentryErrorHandler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SentryErrorHandler });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SentryErrorHandler, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
-        return [{ type: i1.AuthorizerService }, { type: Configurations, decorators: [{
+        return [{ type: i1.AuthorizerService }, { type: GlobalErrorService }, { type: Configurations, decorators: [{
                         type: Optional
                     }] }];
     } });
@@ -753,7 +1078,11 @@ class HttpReqInterceptor {
         this.errorService = errorService;
     }
     intercept(req, next) {
-        return next.handle(req).pipe(timeout(API_TIMEOUT_TIME), catchError((error) => {
+        return next.handle(req).pipe(timeout(API_TIMEOUT_TIME), tap((event) => {
+            if (event instanceof HttpResponse) {
+                this.errorService.handleSoftErrors(event);
+            }
+        }), catchError((error) => {
             this.errorService.handleError(error, req);
             return throwError(error);
         }));
@@ -781,13 +1110,13 @@ VcErrorHandlersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         SessionExpiredComponent,
         ChunkUnavailableComponent,
         ServerErrorComponent,
-        SessionExpiredModalComponent], imports: [CommonModule, DialogModule, SnackBarModule], exports: [VcErrorHandlersComponent,
+        ErrorModalComponent], imports: [CommonModule, DialogModule, SnackBarModule], exports: [VcErrorHandlersComponent,
         PageNotFoundComponent,
         UnauthorizedComponent,
         SessionExpiredComponent,
         ChunkUnavailableComponent,
         ServerErrorComponent,
-        SessionExpiredModalComponent] });
+        ErrorModalComponent] });
 VcErrorHandlersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersModule, providers: [
         { provide: ErrorHandler, useClass: SentryErrorHandler },
         { provide: HTTP_INTERCEPTORS, useClass: HttpReqInterceptor, multi: true },
@@ -802,7 +1131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                         SessionExpiredComponent,
                         ChunkUnavailableComponent,
                         ServerErrorComponent,
-                        SessionExpiredModalComponent,
+                        ErrorModalComponent,
                     ],
                     imports: [CommonModule, DialogModule, SnackBarModule],
                     exports: [
@@ -812,7 +1141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                         SessionExpiredComponent,
                         ChunkUnavailableComponent,
                         ServerErrorComponent,
-                        SessionExpiredModalComponent,
+                        ErrorModalComponent,
                     ],
                     providers: [
                         { provide: ErrorHandler, useClass: SentryErrorHandler },
@@ -830,5 +1159,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthService, ChunkUnavailableComponent, FOR_ROOT_SENTRY_OPTIONS_TOKEN, GlobalErrorService, HttpReqInterceptor, PageNotFoundComponent, RouterService, ServerErrorComponent, SessionExpiredComponent, SessionExpiredModalComponent, UnauthorizedComponent, VcErrorHandlersComponent, VcErrorHandlersModule, VcErrorHandlersService };
+export { AuthService, ChunkUnavailableComponent, ErrorModalComponent, FOR_ROOT_SENTRY_OPTIONS_TOKEN, GlobalErrorService, HttpReqInterceptor, PageNotFoundComponent, RouterService, ServerErrorComponent, SessionExpiredComponent, UnauthorizedComponent, VcErrorHandlersComponent, VcErrorHandlersModule, VcErrorHandlersService };
 //# sourceMappingURL=vc-error-handlers.mjs.map