@justifi/webcomponents 4.10.0 → 4.11.0

package/dist/collection/components/business-forms/schemas/business-additional-questions-schema.js

@@ -1,7 +1,16 @@
 import { object, string } from "yup";
-export const additionQuestionsSchema = object({
-    business_revenue: string().required('Enter business revenue'),
-    business_payment_volume: string().required('Enter business payment volume'),
-    business_dispute_volume: string().required('Enter business dispute volume'),
-    business_receivable_volume: string().required('Enter business receivable volume'),
-});
+export const additionalQuestionsSchema = (allowOptionalFields) => {
+    const schema = object({
+        business_revenue: string().required('Enter business revenue'),
+        business_payment_volume: string().required('Enter business payment volume'),
+        business_dispute_volume: string().required('Enter business dispute volume'),
+        business_receivable_volume: string().required('Enter business receivable volume'),
+    });
+    const easySchema = object({
+        business_revenue: string().nullable(),
+        business_payment_volume: string().nullable(),
+        business_dispute_volume: string().nullable(),
+        business_receivable_volume: string().nullable()
+    });
+    return allowOptionalFields ? easySchema : schema;
+};

package/dist/collection/components/business-forms/schemas/business-address-schema.js

@@ -1,16 +1,51 @@
 import { object, string } from "yup";
 import StateOptions from "../../../utils/state-options";
-export const legalAddressSchema = object({
-    line1: string().required('Enter street address'),
-    line2: string().nullable(),
-    city: string().required('Enter city'),
-    state: string().required('Select state').oneOf(StateOptions.map((option) => option.value), 'Select state'),
-    postal_code: string().required('Enter postal code'),
-    country: string().required('Select country'),
+const lineOneValidation = string()
+    .min(5, 'Address must be at least 5 characters')
+    .max(100, 'Address must be less than 100 characters')
+    .matches(/^(?!^\s+$)[a-zA-Z0-9\s,.'-]*$/, 'Invalid characters in address')
+    .transform((value) => {
+    return value === '' ? null : value;
 });
-export const identityAddressSchema = object({
-    line1: string().required('Enter street address'),
-    city: string().required('Enter city'),
-    state: string().required('Select state').oneOf(StateOptions.map((option) => option.value), 'Select state'),
-    postal_code: string().required('Enter postal code'),
+const lineTwoValidation = string()
+    .max(100, 'Address must be less than 100 characters')
+    .matches(/^(?!^\s+$)[a-zA-Z0-9\s,.'-]*$/, 'Invalid characters in address')
+    .transform((value) => {
+    return value === '' ? null : value;
 });
+const cityValidation = string()
+    .min(2, 'City must be at least 2 characters')
+    .max(50, 'City must be less than 50 characters')
+    .matches(/^(?!^\s+$)[a-zA-Z\s]*$/, 'Invalid characters in city')
+    .transform((value) => {
+    return value === '' ? null : value;
+});
+const stateValidation = string()
+    .oneOf(StateOptions.map((option) => option.value), 'Select state')
+    .transform((value) => {
+    return value === '' ? null : value;
+});
+const postalValidation = string()
+    .matches(/^[0-9]{5}$/, 'Enter valid postal code')
+    .transform((value) => {
+    return value === '' ? null : value;
+});
+export const addressSchema = (allowOptionalFields) => {
+    const schema = object({
+        line1: lineOneValidation.required('Enter street address'),
+        line2: lineTwoValidation.nullable(),
+        city: cityValidation.required('Enter city'),
+        state: stateValidation.required('Select state'),
+        postal_code: postalValidation.required('Enter postal code'),
+        country: string().required('Select country')
+    });
+    const easySchema = object({
+        line1: lineOneValidation.nullable(),
+        line2: lineTwoValidation.nullable(),
+        city: cityValidation.nullable(),
+        state: stateValidation.nullable(),
+        postal_code: postalValidation.nullable(),
+        country: string().required('Select country')
+    });
+    return allowOptionalFields ? easySchema : schema;
+};

package/dist/collection/components/business-forms/schemas/business-core-info-schema.js

@@ -1,13 +1,25 @@
 import { object, string } from "yup";
-export const businessCoreInfoSchema = object({
-    legal_name: string().required('Enter legal name'),
-    website_url: string()
-        .url('Enter valid website url')
-        .required('Enter website url'),
-    email: string().email('Enter valid email').required('Enter email'),
-    phone: string().required('Enter phone number'),
-    doing_business_as: string().required('Enter doing business as'),
-    business_type: string().required('Select business type'),
-    business_structure: string().required('Select business structure'),
-    industry: string().required('Enter a business industry'),
-});
+import { phoneRegex, urlRegex } from "../utils/helpers";
+export const businessCoreInfoSchema = (allowOptionalFields) => {
+    const schema = object({
+        legal_name: string().required('Enter legal name'),
+        website_url: string().matches(urlRegex, 'Enter valid website url').required('Enter website url'),
+        email: string().email('Enter valid email').required('Enter email'),
+        phone: string().matches(phoneRegex, 'Enter valid phone number').required('Enter phone number'),
+        doing_business_as: string().required('Enter doing business as'),
+        business_type: string().required('Select business type'),
+        business_structure: string().required('Select business structure'),
+        industry: string().required('Enter a business industry'),
+    });
+    const easySchema = object({
+        legal_name: string().required('Enter legal name'),
+        website_url: string().matches(urlRegex, 'Enter valid website url').nullable(),
+        email: string().email('Enter valid email').nullable(),
+        phone: string().matches(phoneRegex, 'Enter valid phone number').nullable(),
+        doing_business_as: string().nullable(),
+        business_type: string().nullable(),
+        business_structure: string().nullable(),
+        industry: string().nullable(),
+    });
+    return allowOptionalFields ? easySchema : schema;
+};

package/dist/collection/components/business-forms/schemas/business-form-schema.js

@@ -1,6 +1,6 @@
 import { object } from "yup";
 import { businessCoreInfoSchema } from "./business-core-info-schema";
-import { additionQuestionsSchema } from "./business-additional-questions-schema";
-import { representativeSchema } from "./business-identity-schema";
-import { legalAddressSchema } from "./business-address-schema";
-export const businessFormSchema = object(Object.assign(Object.assign({}, businessCoreInfoSchema.fields), { legal_address: legalAddressSchema, additional_questions: additionQuestionsSchema, representative: representativeSchema }));
+import { additionalQuestionsSchema } from "./business-additional-questions-schema";
+import { identitySchema } from "./business-identity-schema";
+import { addressSchema } from "./business-address-schema";
+export const businessFormSchema = object(Object.assign(Object.assign({}, businessCoreInfoSchema().fields), { legal_address: addressSchema(), additional_questions: additionalQuestionsSchema(), representative: identitySchema('Representative') }));

package/dist/collection/components/business-forms/schemas/business-identity-schema.js

@@ -1,35 +1,30 @@
 import { object, string } from "yup";
-import { identityAddressSchema } from "./business-address-schema";
-export const phoneRegex = /^[0-9]+$/;
-export const representativeSchema = object({
-    name: string().required('Enter representative name'),
-    email: string()
-        .email('Enter valid representative email')
-        .required('Enter representative email'),
-    phone: string()
-        .required('Enter representative phone number')
-        .matches(phoneRegex, 'Phone number must contain only numbers')
-        .min(10, 'Phone number must contain 10 digits')
-        .max(10, 'Phone number must contain 10 digits'),
-    dob_day: string().required('Enter representative birth day'),
-    dob_month: string().required('Enter representative birth month'),
-    dob_year: string().required('Enter representative birth year'),
-    identification_number: string(),
-    address: identityAddressSchema,
-});
-export const ownerSchema = object({
-    name: string().required('Enter owner name'),
-    email: string()
-        .email('Enter valid owner email')
-        .required('Enter owner email'),
-    phone: string()
-        .required('Enter owner phone number')
-        .matches(phoneRegex, 'Phone number must contain only numbers')
-        .min(10, 'Phone number must contain 10 digits')
-        .max(10, 'Phone number must contain 10 digits'),
-    dob_day: string().required('Enter owner birth day'),
-    dob_month: string().required('Enter owner birth month'),
-    dob_year: string().required('Enter owner birth year'),
-    identification_number: string(),
-    address: identityAddressSchema,
-});
+import { addressSchema } from "./business-address-schema";
+import { phoneRegex } from "../utils/helpers";
+export const identitySchema = (title, allowOptionalFields) => {
+    const schema = object({
+        name: string().required(`Enter ${title} name`),
+        email: string()
+            .email(`Enter valid ${title} email`)
+            .required(`Enter ${title} email`),
+        phone: string().matches(phoneRegex, 'Enter valid phone number').required('Enter phone number'),
+        dob_day: string().required(`Enter ${title} birth day`),
+        dob_month: string().required(`Enter ${title} birth month`),
+        dob_year: string().required(`Enter ${title} birth year`),
+        identification_number: string(),
+        address: addressSchema(allowOptionalFields),
+    });
+    const easySchema = object({
+        name: string().required(`Enter ${title} name`),
+        email: string()
+            .email(`Enter valid ${title} email`)
+            .nullable(),
+        phone: string().matches(phoneRegex, 'Enter valid phone number').nullable(),
+        dob_day: string().nullable(),
+        dob_month: string().nullable(),
+        dob_year: string().nullable(),
+        identification_number: string().nullable(),
+        address: addressSchema(allowOptionalFields),
+    });
+    return allowOptionalFields ? easySchema : schema;
+};

package/dist/collection/components/business-forms/utils/business-form-types.js

@@ -15,3 +15,10 @@ export var OwnerFormServerErrors;
     OwnerFormServerErrors["patchData"] = "Error updating owner data";
     OwnerFormServerErrors["postData"] = "Error adding owner data";
 })(OwnerFormServerErrors || (OwnerFormServerErrors = {}));
+export var OwnerFormClickActions;
+(function (OwnerFormClickActions) {
+    OwnerFormClickActions["removeOwner"] = "removeOwner";
+    OwnerFormClickActions["addOwner"] = "addOwner";
+    OwnerFormClickActions["addOwnerForm"] = "addOwnerForm";
+    OwnerFormClickActions["updateOwner"] = "updateOwner";
+})(OwnerFormClickActions || (OwnerFormClickActions = {}));

package/dist/collection/components/business-forms/utils/helpers.js

@@ -0,0 +1,2 @@
+export const phoneRegex = /^\d{10}$/;
+export const urlRegex = /^(?:http(s)?:\/\/)?(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/;

package/dist/collection/components/form/form-control-text.js

@@ -5,6 +5,8 @@ export class TextInput {
         this.name = undefined;
         this.error = undefined;
         this.defaultValue = undefined;
+        this.keyDownHandler = undefined;
+        this.maxLength = undefined;
         this.disabled = undefined;
         this.inputHandler = undefined;
         this.input = undefined;
@@ -28,7 +30,7 @@ export class TextInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), onKeyDown: (event) => this.keyDownHandler && this.keyDownHandler(event), maxLength: this.maxLength, part: `input ${this.error ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
     }
     static get is() { return "form-control-text"; }
     static get encapsulation() { return "shadow"; }
@@ -112,6 +114,38 @@ export class TextInput {
                 "attribute": "default-value",
                 "reflect": false
             },
+            "keyDownHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: any) => void",
+                    "resolved": "(event: any) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-length",
+                "reflect": false
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/form/utils.js

@@ -1,3 +1,9 @@
 import { h } from "@stencil/core";
 export const FormAlert = (message) => (h("div", { class: 'alert alert-danger d-flex align-items-center', role: 'alert' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentColor", class: "bi bi-exclamation-triangle-fill flex-shrink-0 me-2", viewBox: "0 0 16 16", role: "img", "aria-label": "Warning:" }, h("path", { d: "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" })), h("div", null, message)));
 export const LoadingSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));
+export const filterPostalInput = (e) => {
+    const specialKeys = ['Backspace', 'Tab', 'Enter'];
+    if (!/^\d$/.test(e.key) && !specialKeys.includes(e.key)) {
+        e.preventDefault();
+    }
+};

package/dist/collection/components/gross-payment-chart/get-gross-payment-chart-data.js

@@ -1,14 +1,29 @@
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
 export const makeGetGrossPaymentChartData = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.fetchGrossVolumeChartData(id, authToken);
         if (!response.error) {
             onSuccess(response.data);
         }
         else {
-            onError(`Error trying to fetch data : ${response.error}`);
+            const errorMessage = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            onError({
+                error: errorMessage,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        onError(`Error trying to fetch data : ${error}`);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        const errorMessage = getErrorMessage(error);
+        onError({
+            error: errorMessage,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };

package/dist/collection/components/gross-payment-chart/gross-payment-chart-core.js

@@ -37,9 +37,14 @@ export class GrossPaymentChartCore {
                 this.loading = false;
                 this.grossVolumeReport = data;
             },
-            onError: (error) => {
+            onError: ({ error, code, severity }) => {
                 this.loading = false;
                 this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
             }
         });
     }
@@ -107,6 +112,30 @@ export class GrossPaymentChartCore {
             "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
     static get watchers() {
         return [{
                 "propName": "getGrossPayment",

package/dist/collection/components/gross-payment-chart/gross-payment-chart.js

@@ -2,8 +2,13 @@ import { h } from "@stencil/core";
 import { ReportsService } from "../../api/services/reports.service";
 import { makeGetGrossPaymentChartData } from "./get-gross-payment-chart-data";
 import { ErrorState } from "../details/utils";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 export class GrossPaymentChart {
     constructor() {
+        this.handleErrorEvent = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.accountId = undefined;
         this.authToken = undefined;
         this.getGrossPayment = undefined;
@@ -25,13 +30,18 @@ export class GrossPaymentChart {
         }
         else {
             this.errorMessage = 'Account ID and Auth Token are required';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: this.errorMessage,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("gross-payment-chart-core", { getGrossPayment: this.getGrossPayment }));
+        return (h("gross-payment-chart-core", { getGrossPayment: this.getGrossPayment, "onError-event": this.handleErrorEvent }));
     }
     static get is() { return "justifi-gross-payment-chart"; }
     static get encapsulation() { return "shadow"; }
@@ -79,6 +89,30 @@ export class GrossPaymentChart {
             "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
     static get watchers() {
         return [{
                 "propName": "accountId",

package/dist/collection/components/gross-payment-chart/test/get-gross-payment-chart-data.spec.js

@@ -1,6 +1,7 @@
 import { makeGetGrossPaymentChartData } from "../get-gross-payment-chart-data";
 import { ReportsService } from "../../../api/services/reports.service";
-import { mockGrossVolumeReport } from "../../../api/mockData/mockGrossVolumeReport";
+import { mockGrossVolumeReport } from "../../../../../../mockData/mockGrossVolumeReport";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
 const mockFetchGrossVolumeChartData = jest.fn().mockResolvedValue({
     data: mockGrossVolumeReport,
     error: null,
@@ -36,11 +37,7 @@ describe('makeGetGrossPaymentChartData', () => {
         expect(onError).not.toHaveBeenCalled();
     });
     it('calls onError with message on API error', async () => {
-        const mockError = 'API error';
-        mockFetchGrossVolumeChartData.mockResolvedValue({
-            error: mockError,
-            data: null,
-        });
+        mockFetchGrossVolumeChartData.mockResolvedValue(API_NOT_AUTHENTICATED_ERROR);
         const onSuccess = jest.fn();
         const onError = jest.fn();
         const getGrossPaymentChartData = makeGetGrossPaymentChartData({
@@ -49,7 +46,11 @@ describe('makeGetGrossPaymentChartData', () => {
             service: mockService,
         });
         await getGrossPaymentChartData({ onSuccess, onError });
-        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+        expect(onError).toHaveBeenCalledWith({
+            code: 'not-authenticated',
+            error: 'Not Authenticated',
+            severity: 'error',
+        });
         expect(onSuccess).not.toHaveBeenCalled();
     });
     it('calls onError with message on exception', async () => {
@@ -63,7 +64,24 @@ describe('makeGetGrossPaymentChartData', () => {
             service: mockService,
         });
         await getGrossPaymentChartData({ onSuccess, onError });
-        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+        expect(onError).toHaveBeenCalledWith(expect.objectContaining({ error: 'Network error' }));
+        expect(onSuccess).not.toHaveBeenCalled();
+    });
+    it('calls onError with message on error returned', async () => {
+        mockFetchGrossVolumeChartData.mockResolvedValue(API_NOT_AUTHENTICATED_ERROR);
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const getGrossPaymentChartData = makeGetGrossPaymentChartData({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockService,
+        });
+        await getGrossPaymentChartData({ onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith({
+            code: 'not-authenticated',
+            error: 'Not Authenticated',
+            severity: 'error',
+        });
         expect(onSuccess).not.toHaveBeenCalled();
     });
 });

package/dist/collection/components/gross-payment-chart/test/gross-payment-chart-core.spec.js

@@ -1,7 +1,9 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { GrossPaymentChartCore } from "../gross-payment-chart-core";
-import mockSuccessResponse from "../../../api/mockResponses/mockGrossVolumeReportSuccess.json";
+import mockSuccessResponse from "../../../../../../mockData/mockGrossVolumeReportSuccess.json";
 import { makeGetGrossPaymentChartData } from "../get-gross-payment-chart-data";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
 const mockDataResponse = mockSuccessResponse;
 // To prevent this error https://github.com/reactchartjs/react-chartjs-2/issues/155
 jest.mock('chart.js', () => ({
@@ -11,7 +13,7 @@ describe('gross-payment-chart', () => {
     it('should initialize with default states', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChartCore],
-            html: `<gross-payment-chart-core />`,
+            template: () => h("gross-payment-chart-core", null),
         });
         expect(page.rootInstance.loading).toBeTruthy();
         expect(page.rootInstance.errorMessage).toBe('');
@@ -27,18 +29,15 @@ describe('gross-payment-chart', () => {
         });
         const page = await newSpecPage({
             components: [GrossPaymentChartCore],
-            html: `<gross-payment-chart-core />`,
+            template: () => h("gross-payment-chart-core", { getGrossPayment: getGrossPayment }),
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getGrossPayment = getGrossPayment;
-        page.rootInstance.fetchData();
         await page.waitForChanges();
         expect(page.rootInstance.grossVolumeReport).toEqual(mockDataResponse.data);
     });
     it('matches the snapshot when in loading state', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChartCore],
-            html: `<gross-payment-chart-core></gross-payment-chart-core>`,
+            template: () => h("gross-payment-chart-core", null),
         });
         expect(page.root).toMatchSnapshot();
     });
@@ -53,12 +52,53 @@ describe('gross-payment-chart', () => {
         });
         const page = await newSpecPage({
             components: [GrossPaymentChartCore],
-            html: `<gross-payment-chart-core></gross-payment-chart-core>`,
+            template: () => h("gross-payment-chart-core", { getGrossPayment: getGrossPayment }),
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getGrossPayment = getGrossPayment;
-        page.rootInstance.fetchData();
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
+    it('emits an error event when error occurs', async () => {
+        const getGrossPayment = makeGetGrossPaymentChartData({
+            id: 'my-account-id',
+            authToken: 'my-token',
+            service: {
+                fetchGrossVolumeChartData: jest.fn().mockRejectedValue('Error message')
+            }
+        });
+        const eventSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChartCore],
+            template: () => h("gross-payment-chart-core", { getGrossPayment: getGrossPayment, "onError-event": eventSpy }),
+        });
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'fetch-error',
+                message: 'Error message',
+                severity: 'error',
+            }
+        }));
+    });
+    it('emits an error event when API return error', async () => {
+        const getGrossPayment = makeGetGrossPaymentChartData({
+            id: 'my-account-id',
+            authToken: 'my-token',
+            service: {
+                fetchGrossVolumeChartData: jest.fn().mockResolvedValue(API_NOT_AUTHENTICATED_ERROR)
+            }
+        });
+        const eventSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChartCore],
+            template: () => h("gross-payment-chart-core", { getGrossPayment: getGrossPayment, "onError-event": eventSpy }),
+        });
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'not-authenticated',
+                message: 'Not Authenticated',
+                severity: 'error',
+            }
+        }));
+    });
 });