@justifi/webcomponents 4.10.0-rc.0 → 4.11.0

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;
@@ -22,12 +24,13 @@ export class TextInput {
         const target = event.target;
         const name = target.getAttribute('name');
         this.inputHandler(name, target.value);
+        this.formControlInput.emit(target.value);
     }
     componentDidLoad() {
         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"; }
@@ -111,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/test/form-control-datepart.spec.js

@@ -0,0 +1,88 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { DatePartInput } from "../form-control-datepart";
+import * as IMaskPackage from "imask";
+jest.mock('imask', () => ({
+    default: jest.fn().mockImplementation(() => ({
+        on: jest.fn(),
+        destroy: jest.fn(),
+        value: '',
+        unmaskedValue: '',
+    })),
+}));
+const IMaskSpy = jest.spyOn(IMaskPackage, 'default');
+afterEach(() => {
+    jest.clearAllMocks();
+});
+describe('form-control-datepart', () => {
+    it('renders correctly with default props', async () => {
+        const page = await newSpecPage({
+            components: [DatePartInput],
+            html: `<form-control-datepart label="Date Part" name="datepart"></form-control-datepart>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('should initialize IMask with correct options for "day" type', async () => {
+        await newSpecPage({
+            components: [DatePartInput],
+            html: '<form-control-datepart type="day"></form-control-datepart>',
+        });
+        expect(IMaskSpy).toHaveBeenCalled();
+        expect(IMaskSpy.mock.calls[0][1]).toEqual({ mask: Number, min: 1, max: 31 });
+    });
+    it('should initialize IMask with correct options for "month" type', async () => {
+        // Clear mocks to reset the calls count
+        jest.clearAllMocks();
+        await newSpecPage({
+            components: [DatePartInput],
+            html: '<form-control-datepart type="month"></form-control-datepart>',
+        });
+        expect(IMaskSpy).toHaveBeenCalled();
+        expect(IMaskSpy.mock.calls[0][1]).toEqual({ mask: Number, min: 1, max: 12 });
+    });
+    it('should initialize IMask with correct options for "year" type', async () => {
+        // Clear mocks to reset the calls count
+        jest.clearAllMocks();
+        await newSpecPage({
+            components: [DatePartInput],
+            html: '<form-control-datepart type="year"></form-control-datepart>',
+        });
+        expect(IMaskSpy).toHaveBeenCalled();
+        expect(IMaskSpy.mock.calls[0][1]).toEqual({ mask: Number, min: 1900, max: new Date().getFullYear() });
+    });
+    it('emits formControlBlur on input blur', async () => {
+        const page = await newSpecPage({
+            components: [DatePartInput],
+            html: `<form-control-datepart></form-control-datepart>`,
+        });
+        const blurSpy = jest.fn();
+        page.win.addEventListener('formControlBlur', blurSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.dispatchEvent(new Event('blur', { bubbles: true }));
+        await page.waitForChanges();
+        expect(blurSpy).toHaveBeenCalled();
+    });
+    it('calls inputHandler and emits formControlInput on user input', async () => {
+        const inputHandlerMock = jest.fn();
+        const page = await newSpecPage({
+            components: [DatePartInput],
+            html: `<form-control-datepart type="day" name="day"></form-control-datepart>`,
+        });
+        page.rootInstance.inputHandler = inputHandlerMock;
+        await page.waitForChanges();
+        const inputSpy = jest.fn();
+        page.win.addEventListener('formControlInput', inputSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.value = '15'; // Assuming 'day' type for simplicity
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        await page.waitForChanges();
+        expect(inputHandlerMock).toHaveBeenCalledWith('day', '15');
+        expect(inputSpy).toHaveBeenCalled();
+    });
+    it('displays error message correctly', async () => {
+        const page = await newSpecPage({
+            components: [DatePartInput],
+            html: `<form-control-datepart error="Error message"></form-control-datepart>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+});

package/dist/collection/components/form/test/form-control-monetary.spec.js

@@ -0,0 +1,69 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { MonetaryInput } from "../form-control-monetary";
+describe('form-control-monetary', () => {
+    it('renders correctly with default props', async () => {
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `<form-control-monetary></form-control-monetary>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('handles props correctly', async () => {
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `
+      <form-control-monetary
+        label="Amount"
+        name="amount"
+        error="Invalid amount"  
+        defaultValue="1000"
+      ></form-control-monetary>
+    `,
+        });
+        await page.waitForChanges();
+        const label = page.root.shadowRoot.querySelector('label');
+        const input = page.root.shadowRoot.querySelector('input');
+        const errorDiv = page.root.shadowRoot.querySelector('.invalid-feedback');
+        expect(label.textContent).toBe('Amount');
+        expect(input.getAttribute('name')).toBe('amount');
+        expect(errorDiv.textContent).toBe('Invalid amount');
+    });
+    it('calls inputHandler and emits formControlInput on user input', async () => {
+        const inputHandlerMock = jest.fn();
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `<form-control-monetary></form-control-monetary>`,
+        });
+        page.rootInstance.inputHandler = inputHandlerMock;
+        await page.waitForChanges();
+        const inputSpy = jest.fn();
+        page.win.addEventListener('formControlInput', inputSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.value = '1234.56';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        await page.waitForChanges();
+        expect(inputHandlerMock).toHaveBeenCalled();
+        expect(inputSpy).toHaveBeenCalled();
+    });
+    it('emits formControlBlur on input blur', async () => {
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `<form-control-monetary></form-control-monetary>`,
+        });
+        const blurSpy = jest.fn();
+        page.win.addEventListener('formControlBlur', blurSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.dispatchEvent(new Event('blur', { bubbles: true }));
+        await page.waitForChanges();
+        expect(blurSpy).toHaveBeenCalled();
+    });
+    it('displays error message when error prop is set', async () => {
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `<form-control-monetary error="Invalid amount"></form-control-monetary>`,
+        });
+        const errorDiv = page.root.shadowRoot.querySelector('.invalid-feedback');
+        expect(errorDiv.textContent).toBe('Invalid amount');
+        expect(page.root).toMatchSnapshot();
+    });
+});

package/dist/collection/components/form/test/form-control-number.spec.js

@@ -0,0 +1,77 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { NumberInput } from "../form-control-number";
+describe('form-control-number', () => {
+    it('renders with default props', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number label="Age"></form-control-number>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('renders with an error message', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number label="Age" error="Invalid input"></form-control-number>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('handles the disabled state', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number label="Age" disabled></form-control-number>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('updates the input value when defaultValue changes', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number label="Age"></form-control-number>`,
+        });
+        let input = page.root.shadowRoot.querySelector('input');
+        expect(input.value).toBe(''); // Default should be empty
+        page.root.defaultValue = '30';
+        await page.waitForChanges();
+        input = page.root.shadowRoot.querySelector('input');
+        expect(input.value).toBe('30');
+    });
+    it('calls inputHandler on user input', async () => {
+        const inputHandlerMock = jest.fn();
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number name="age"></form-control-number>`,
+        });
+        page.rootInstance.inputHandler = inputHandlerMock;
+        await page.waitForChanges();
+        const input = page.root.shadowRoot.querySelector('input');
+        input.value = '25';
+        await input.dispatchEvent(new Event('input', { bubbles: true }));
+        expect(inputHandlerMock).toHaveBeenCalledWith('age', '25');
+    });
+    it('emits formControlBlur on input blur', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number></form-control-number>`,
+        });
+        const blurSpy = jest.fn();
+        page.win.addEventListener('formControlBlur', blurSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        await input.dispatchEvent(new CustomEvent('blur'));
+        expect(blurSpy).toHaveBeenCalled();
+    });
+    it('emits formControlInput on input', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number name="age"></form-control-number>`,
+        });
+        page.rootInstance.inputHandler = jest.fn();
+        await page.waitForChanges();
+        const inputSpy = jest.fn();
+        page.win.addEventListener('formControlInput', inputSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.value = '25';
+        const mockEvent = new Event('input', { bubbles: true });
+        Object.defineProperty(mockEvent, 'target', { value: input, enumerable: true });
+        await input.dispatchEvent(mockEvent);
+        expect(inputSpy).toHaveBeenCalled();
+    });
+});

package/dist/collection/components/form/test/form-control-select.spec.js

@@ -0,0 +1,84 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SelectInput } from "../form-control-select";
+describe('form-control-select', () => {
+    it('renders with default props', async () => {
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select label="Test Select" name="test"></form-control-select>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        expect(page.rootInstance.label).toBe('Test Select');
+        expect(page.rootInstance.name).toBe('test');
+    });
+    it('populates options correctly and handles selection', async () => {
+        const options = [
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' }
+        ];
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select></form-control-select>`,
+        });
+        page.rootInstance.options = options;
+        await page.waitForChanges();
+        const selectElement = page.root.shadowRoot.querySelector('select');
+        expect(selectElement.children.length).toBe(options.length);
+        expect(selectElement.children[0].textContent).toBe(options[0].label);
+        selectElement.value = options[1].value;
+        expect(selectElement.value).toBe('2');
+    });
+    it('shows error and applies error styling when error prop is provided', async () => {
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select error="This field is required."></form-control-select>`,
+        });
+        const shadowRoot = page.root.shadowRoot;
+        expect(shadowRoot.querySelector('.invalid-feedback').textContent).toBe('This field is required.');
+        expect(shadowRoot.querySelector('.form-select').classList.contains('is-invalid')).toBeTruthy();
+    });
+    it('emits formControlInput event on input', async () => {
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select></form-control-select>`,
+        });
+        page.rootInstance.inputHandler = jest.fn();
+        const inputEventSpy = jest.fn();
+        page.root.addEventListener('formControlInput', inputEventSpy);
+        const selectElement = page.root.shadowRoot.querySelector('select');
+        selectElement.value = '1';
+        selectElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        await page.waitForChanges();
+        expect(inputEventSpy).toHaveBeenCalled();
+    });
+    it('emits formControlBlur event on blur', async () => {
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select></form-control-select>`,
+        });
+        const blurEventSpy = jest.fn();
+        page.root.addEventListener('formControlBlur', blurEventSpy);
+        const selectElement = page.root.shadowRoot.querySelector('select');
+        selectElement.dispatchEvent(new Event('blur'));
+        expect(blurEventSpy).toHaveBeenCalled();
+    });
+    it('disables select when disabled prop is true', async () => {
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select disabled="true"></form-control-select>`,
+        });
+        const selectElement = page.root.shadowRoot.querySelector('select');
+        // This is weird, but the value of the disabled 
+        // attribute is an empty string on Stencil mock DOM
+        expect(selectElement.attributes.getNamedItem('disabled').value).toBe('');
+    });
+    it('handles empty options array', async () => {
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select></form-control-select>`,
+        });
+        page.rootInstance.options = [];
+        await page.waitForChanges();
+        const selectElement = page.root.shadowRoot.querySelector('select');
+        expect(selectElement.children.length).toBe(0);
+    });
+});

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

@@ -0,0 +1,104 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TextInput } from "../form-control-text";
+describe('form-control-text', () => {
+    // Test 1: Initial Rendering and Props
+    it('renders with default props', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text label="Username" name="username"></form-control-text>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        expect(page.rootInstance.label).toBe('Username');
+        expect(page.rootInstance.name).toBe('username');
+    });
+    // Test 2: Rendering with all props
+    it('renders with all props provided', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `
+        <form-control-text
+          label="Email"
+          name="email"
+          default-value="user@example.com"
+          error="Invalid email"
+          disabled
+        ></form-control-text>
+      `,
+        });
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        expect(page.rootInstance.label).toBe('Email');
+        expect(inputElement.value).toBe('user@example.com');
+        expect(inputElement.disabled).toBeTruthy();
+    });
+    // Test 3: Handle Default Value Changes
+    it('updates input value on defaultValue prop change', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text default-value="initial"></form-control-text>`,
+        });
+        page.rootInstance.defaultValue = 'updated';
+        await page.waitForChanges();
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        expect(inputElement.value).toBe('updated');
+    });
+    // Test 4: User Interaction - Input
+    it('handles user input correctly', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text></form-control-text>`,
+        });
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        const testValue = 'Hello, World!';
+        inputElement.value = testValue;
+        await inputElement.dispatchEvent(new Event('input'));
+        expect(inputElement.value).toBe(testValue);
+    });
+    // Test 5: Event Emission on Input
+    it('emits formControlInput event on input', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text></form-control-text>`,
+        });
+        // Set a mock inputHandler to prevent it from being undefined
+        page.rootInstance.inputHandler = jest.fn();
+        const inputEventSpy = jest.fn();
+        page.root.addEventListener('formControlInput', inputEventSpy);
+        await page.waitForChanges();
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        inputElement.value = 'Hello, World!';
+        inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        await page.waitForChanges();
+        expect(inputEventSpy).toHaveBeenCalled();
+    });
+    // Test 6: Event Emission on Blur
+    it('emits formControlBlur event on blur', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text></form-control-text>`,
+        });
+        const blurEventSpy = jest.fn();
+        page.win.addEventListener('formControlBlur', blurEventSpy);
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        inputElement.dispatchEvent(new Event('blur'));
+        expect(blurEventSpy).toHaveBeenCalled();
+    });
+    // Test 7: Disabled Prop
+    it('disables input when disabled prop is true', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text disabled></form-control-text>`,
+        });
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        expect(inputElement.disabled).toBeTruthy();
+    });
+    // Test 8: Error Prop
+    it('shows error and applies error styling when error prop is provided', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text error="This field is required."></form-control-text>`,
+        });
+        const shadowRoot = page.root.shadowRoot;
+        expect(shadowRoot.querySelector('.invalid-feedback').textContent).toBe('This field is required.');
+        expect(shadowRoot.querySelector('.form-control').classList.contains('is-invalid')).toBeTruthy();
+    });
+});

package/dist/collection/components/form/test/form.spec.js

@@ -0,0 +1,60 @@
+import * as yup from "yup";
+import { FormController } from "../form";
+describe('FormController', () => {
+    let formController;
+    const mockSchema = yup.object().shape({
+        name: yup.string().required(),
+        email: yup.string().email().required(),
+    });
+    beforeEach(() => {
+        formController = new FormController(mockSchema);
+    });
+    it('should initialize with default empty values and errors', () => {
+        expect(formController.values.getValue()).toEqual({});
+        expect(formController.errors.getValue()).toEqual({});
+    });
+    it('should set initial values correctly', () => {
+        const initialValues = { name: 'John', email: 'john@example.com' };
+        formController.setInitialValues(initialValues);
+        expect(formController.values.getValue()).toEqual(initialValues);
+    });
+    it('should update values correctly', async () => {
+        const updateValues = { name: 'Jane' };
+        formController.setInitialValues({
+            name: 'John',
+            email: 'john@example.com',
+        });
+        formController.setValues(updateValues);
+        expect(formController.values.getValue()).toEqual({
+            name: 'Jane',
+            email: 'john@example.com',
+        });
+    });
+    it('should reset values to initial values', () => {
+        const initialValues = { name: 'John', email: 'john@example.com' };
+        formController.setInitialValues(initialValues);
+        formController.setValues({ name: 'Jane' }); // Update values
+        formController.resetValues(); // Reset to initial values
+        expect(formController.values.getValue()).toEqual(initialValues);
+    });
+    it('should validate and set errors correctly for invalid data', async () => {
+        formController.setValues({ email: 'invalid-email' }); // Set invalid email
+        await formController.validateAndSubmit(() => null);
+        expect(formController.errors.getValue()).toHaveProperty('email');
+    });
+    it('should call submit handler on valid data', async () => {
+        const submitHandlerMock = jest.fn();
+        formController.setInitialValues({
+            name: 'John',
+            email: 'john@example.com',
+        });
+        await formController.validateAndSubmit(submitHandlerMock);
+        expect(submitHandlerMock).toHaveBeenCalled();
+    });
+    it('should not call submit handler on invalid data', async () => {
+        const submitHandlerMock = jest.fn();
+        formController.setValues({ email: 'invalid-email' }); // Set invalid email
+        await formController.validateAndSubmit(submitHandlerMock);
+        expect(submitHandlerMock).not.toHaveBeenCalled();
+    });
+});

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",