@justifi/webcomponents 4.10.0-rc.0 → 4.11.0

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',
+            }
+        }));
+    });
 });

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

@@ -1,11 +1,15 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { GrossPaymentChart } from "../gross-payment-chart";
 import { GrossPaymentChartCore } from "../gross-payment-chart-core";
+import { ReportsService } from "../../../api/services/reports.service";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
+jest.mock("../../../api/services/reports.service");
 describe('GrossPaymentChart', () => {
     it('renders an error when no accountId and authToken is passed', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChart, GrossPaymentChartCore],
-            html: '<justifi-gross-payment-chart></justifi-gross-payment-chart>',
+            template: () => h("justifi-gross-payment-chart", null),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
@@ -13,7 +17,7 @@ describe('GrossPaymentChart', () => {
     it('renders an error when no accountId is passed', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChart, GrossPaymentChartCore],
-            html: '<justifi-gross-payment-chart auth-token="abc"></justifi-gross-payment-chart>',
+            template: () => h("justifi-gross-payment-chart", { "auth-token": "abc" }),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
@@ -21,9 +25,57 @@ describe('GrossPaymentChart', () => {
     it('renders an error when no authToken is passed', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChart, GrossPaymentChartCore],
-            html: '<justifi-gross-payment-chart account-id="abc"></justifi-gross-payment-chart>',
+            template: () => h("justifi-gross-payment-chart", { "account-id": "abc" }),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
+    it('emits an error event when no accountId and authToken is passed', async () => {
+        const errorEvent = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChart, GrossPaymentChartCore],
+            template: () => h("justifi-gross-payment-chart", { "onError-event": errorEvent }),
+        });
+        await page.waitForChanges();
+        expect(errorEvent).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'missing-props',
+                message: 'Account ID and Auth Token are required',
+                severity: 'error',
+            }
+        }));
+    });
+    it('emits an error event when fetch fails', async () => {
+        ReportsService.prototype.fetchGrossVolumeChartData = jest.fn().mockReturnValue(API_NOT_AUTHENTICATED_ERROR);
+        const errorEvent = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChart, GrossPaymentChartCore],
+            template: () => (h("justifi-gross-payment-chart", { "account-id": "abc", "auth-token": "abc", "onError-event": errorEvent })),
+        });
+        await page.waitForChanges();
+        expect(errorEvent).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'not-authenticated',
+                message: 'Not Authenticated',
+                severity: 'error',
+            }
+        }));
+    });
+    it('emits an error event when error occurs', async () => {
+        ReportsService.prototype.fetchGrossVolumeChartData = jest.fn()
+            .mockRejectedValue(new Error('Network error'));
+        const errorEvent = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChart, GrossPaymentChartCore],
+            template: () => (h("justifi-gross-payment-chart", { "account-id": "abc", "auth-token": "abc", "onError-event": errorEvent })),
+        });
+        await page.waitForChanges();
+        expect(errorEvent).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'fetch-error',
+                message: 'Network error',
+                severity: 'error',
+            }
+        }));
+    });
 });

package/dist/collection/components/payment-details/get-payment-details.js

@@ -1,6 +1,8 @@
 import { Payment } from "../../api";
-import { getErrorMessage } from "../../api/services/utils";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
 export const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.fetchPayment(id, authToken);
         if (!response.error) {
@@ -8,10 +10,20 @@ export const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ on
         }
         else {
             const responseError = getErrorMessage(response.error);
-            onError(`Error trying to fetch data : ${responseError}`);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            onError({
+                error: responseError,
+                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);
+        onError({
+            error: getErrorMessage(error),
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };

package/dist/collection/components/payment-details/payment-details-core.js

@@ -24,8 +24,13 @@ export class PaymentDetailsCore {
                 this.loading = false;
                 this.errorMessage = null;
             },
-            onError: (error) => {
+            onError: ({ error, code, severity }) => {
                 this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
                 this.loading = false;
             },
         });
@@ -83,6 +88,30 @@ export class PaymentDetailsCore {
             "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": "getPaymentDetails",

package/dist/collection/components/payment-details/payment-details.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { PaymentService } from "../../api/services/payment.service";
 import { makeGetPaymentDetails } from "./get-payment-details";
 import { ErrorState } from "../details/utils";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 /**
   * @exportedPart detail-loading-spinner
   * @exportedPart detail-loading-state
@@ -28,6 +29,10 @@ import { ErrorState } from "../details/utils";
 export class PaymentDetails {
     constructor() {
         this.paymentService = new PaymentService();
+        this.handleErrorEvent = event => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.paymentId = undefined;
         this.authToken = undefined;
         this.getPaymentDetails = undefined;
@@ -49,13 +54,18 @@ export class PaymentDetails {
         }
         else {
             this.errorMessage = 'Payment ID and Auth Token are required';
+            this.errorEvent.emit({
+                message: this.errorMessage,
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails }));
+        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails, "onError-event": this.handleErrorEvent }));
     }
     static get is() { return "justifi-payment-details"; }
     static get encapsulation() { return "shadow"; }
@@ -103,6 +113,30 @@ export class PaymentDetails {
             "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": "paymentId",

package/dist/collection/components/payment-details/test/get-payment-details.spec.js

@@ -1,7 +1,7 @@
 import { Payment } from "../../../api";
 import { PaymentService } from "../../../api/services/payment.service";
 import { makeGetPaymentDetails } from "../get-payment-details";
-import mockResponse from "../../../api/mockData/mockPaymentDetailSuccess.json";
+import mockResponse from "../../../../../../mockData/mockPaymentDetailSuccess.json";
 // Mock the PaymentService class
 jest.mock('../../../api/services/payment.service');
 describe('getPaymentDetails', () => {
@@ -44,7 +44,11 @@ describe('getPaymentDetails', () => {
         });
         await getPaymentDetails({ onSuccess, onError });
         expect(onSuccess).not.toHaveBeenCalled();
-        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+        expect(onError).toHaveBeenCalledWith({
+            code: 'fetch-error',
+            error: 'Error fetching payment',
+            severity: 'error',
+        });
     });
     it('should call onError with an error message on API failure', async () => {
         const mockError = new Error('Error fetching payment');
@@ -59,6 +63,10 @@ describe('getPaymentDetails', () => {
         });
         await getPaymentDetails({ onSuccess, onError });
         expect(onSuccess).not.toHaveBeenCalled();
-        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+        expect(onError).toHaveBeenCalledWith({
+            code: 'fetch-error',
+            error: 'Error fetching payment',
+            severity: 'error',
+        });
     });
 });

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

@@ -1,25 +1,25 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
-import mockPaymentDetailsResponse from "../../../api/mockData/mockPaymentDetailSuccess.json";
+import mockPaymentDetailsResponse from "../../../../../../mockData/mockPaymentDetailSuccess.json";
 import { PaymentDetailsCore } from "../payment-details-core";
 import { Details } from "../../details/details";
 import { makeGetPaymentDetails } from "../get-payment-details";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
 describe('payment-details-core', () => {
     const components = [PaymentDetailsCore, Details];
     it('it renders properly with fetched data', async () => {
         const mockPaymentService = {
             fetchPayment: jest.fn().mockResolvedValue(mockPaymentDetailsResponse),
         };
-        const page = await newSpecPage({
-            components,
-            html: `<payment-details-core></payment-details-core>`,
-        });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPaymentDetails = makeGetPaymentDetails({
+        const getPaymentDetails = makeGetPaymentDetails({
             id: '123',
             authToken: '123',
             service: mockPaymentService
         });
-        page.rootInstance.fetchData();
+        const page = await newSpecPage({
+            components,
+            template: () => h("payment-details-core", { getPaymentDetails: getPaymentDetails }),
+        });
         await page.waitForChanges();
         expect(page.rootInstance.payment).toEqual(expect.objectContaining({ id: mockPaymentDetailsResponse.data.id }));
         expect(mockPaymentService.fetchPayment).toHaveBeenCalled();
@@ -36,12 +36,55 @@ describe('payment-details-core', () => {
         });
         const page = await newSpecPage({
             components,
-            html: '<payment-details-core></payment-details-core>',
+            template: () => h("payment-details-core", { getPaymentDetails: getPaymentDetails }),
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPaymentDetails = getPaymentDetails;
-        page.rootInstance.fetchData();
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
+    it('emits an error event when there is an error fetching data', async () => {
+        const mockService = {
+            fetchPayment: jest.fn().mockRejectedValue(new Error('Fetch error'))
+        };
+        const getPaymentDetails = makeGetPaymentDetails({
+            id: 'some-id',
+            authToken: 'some-auth-token',
+            service: mockService
+        });
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components,
+            template: () => h("payment-details-core", { getPaymentDetails: getPaymentDetails, "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Fetch error',
+                errorCode: 'fetch-error',
+                severity: 'error'
+            }
+        }));
+    });
+    it('emits an error event when API return an error', async () => {
+        const mockService = {
+            fetchPayment: jest.fn().mockResolvedValue(API_NOT_AUTHENTICATED_ERROR)
+        };
+        const getPaymentDetails = makeGetPaymentDetails({
+            id: 'some-id',
+            authToken: 'some-auth-token',
+            service: mockService
+        });
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components,
+            template: () => h("payment-details-core", { getPaymentDetails: getPaymentDetails, "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Not Authenticated',
+                errorCode: 'not-authenticated',
+                severity: 'error'
+            }
+        }));
+    });
 });