@justifi/webcomponents 4.12.1 → 4.13.0-rc.0

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

@@ -1,4 +1,3 @@
-import { BusinessType } from "../../../api/Business";
 export var BusinessFormServerErrors;
 (function (BusinessFormServerErrors) {
     BusinessFormServerErrors["fetchData"] = "Error retrieving business data";
@@ -23,25 +22,3 @@ export var OwnerFormClickActions;
     OwnerFormClickActions["addOwnerForm"] = "addOwnerForm";
     OwnerFormClickActions["updateOwner"] = "updateOwner";
 })(OwnerFormClickActions || (OwnerFormClickActions = {}));
-export const BusinessTypeOptions = [
-    {
-        label: 'Choose business type',
-        value: '',
-    },
-    {
-        label: 'Individual',
-        value: BusinessType.individual,
-    },
-    {
-        label: 'For Profit',
-        value: BusinessType.for_profit,
-    },
-    {
-        label: 'Non Profit',
-        value: BusinessType.non_profit,
-    },
-    {
-        label: 'Government Entity',
-        value: BusinessType.government_entity,
-    },
-];

package/dist/collection/components/checkout/checkout-actions.js

@@ -1,5 +1,7 @@
-import { getErrorMessage } from "../../api/services/utils";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
 export const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.fetchCheckout(authToken, checkoutId);
         if (!response.error) {
@@ -8,14 +10,25 @@ export const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({
         }
         else {
             const responseError = getErrorMessage(response.error);
-            return onError(responseError);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        return onError(error.message || error);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };
 export const makeCheckoutComplete = ({ authToken, checkoutId, service }) => async ({ payment, onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.complete(authToken, checkoutId, payment);
         if (!response.error) {
@@ -24,10 +37,20 @@ export const makeCheckoutComplete = ({ authToken, checkoutId, service }) => asyn
         }
         else {
             const responseError = getErrorMessage(response.error);
-            return onError(responseError);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        return onError(error.message || error);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };

package/dist/collection/components/checkout/checkout-core.js

@@ -20,7 +20,6 @@ export class CheckoutCore {
         this.serverError = false;
         this.errorMessage = '';
         this.creatingNewPaymentMethod = false;
-        this.selectedPaymentMethodToken = undefined;
     }
     componentWillLoad() {
         if (this.getCheckout) {
@@ -40,10 +39,15 @@ export class CheckoutCore {
                 this.checkout = new Checkout(checkout);
                 this.isLoading = false;
             },
-            onError: (errorMessage) => {
-                this.errorMessage = errorMessage;
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
                 this.isLoading = false;
-            },
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+            }
         });
     }
     ;
@@ -201,8 +205,7 @@ export class CheckoutCore {
             "checkout": {},
             "serverError": {},
             "errorMessage": {},
-            "creatingNewPaymentMethod": {},
-            "selectedPaymentMethodToken": {}
+            "creatingNewPaymentMethod": {}
         };
     }
     static get events() {
@@ -227,6 +230,27 @@ export class CheckoutCore {
                         }
                     }
                 }
+            }, {
+                "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 methods() {

package/dist/collection/components/checkout/payment-method-options.js

@@ -11,8 +11,8 @@ export class PaymentMethodOptions {
         this.accountId = undefined;
         this.iframeOrigin = config.iframeOrigin;
         this.savedPaymentMethods = [];
-        this.selectedPaymentMethodId = undefined;
         this.paymentAmount = undefined;
+        this.selectedPaymentMethodId = undefined;
         this.paymentMethodOptions = [];
     }
     paymentMethodsChanged() {
@@ -202,23 +202,6 @@ export class PaymentMethodOptions {
                 },
                 "defaultValue": "[]"
             },
-            "selectedPaymentMethodId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "selected-payment-method-id",
-                "reflect": false
-            },
             "paymentAmount": {
                 "type": "string",
                 "mutable": false,
@@ -240,6 +223,7 @@ export class PaymentMethodOptions {
     }
     static get states() {
         return {
+            "selectedPaymentMethodId": {},
             "paymentMethodOptions": {}
         };
     }

package/dist/collection/components/checkout/test/checkout-actions.spec.js

@@ -0,0 +1,126 @@
+import { makeGetCheckout, makeCheckoutComplete } from "../checkout-actions";
+import mockResponse from "../../../../../../mockData/mockGetCheckoutSuccess.json";
+import { Checkout } from "../../../api/Checkout";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
+// Mocks
+jest.mock('../../../api/services/utils.ts', () => ({
+    getErrorMessage: jest.fn(),
+}));
+const mockService = {
+    fetchCheckout: jest.fn(),
+    complete: jest.fn(),
+};
+// Test Suite
+describe('makeGetCheckout', () => {
+    const checkoutId = '123';
+    const authToken = 'token';
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('calls onSuccess with a new Checkout instance on successful fetch', async () => {
+        mockService.fetchCheckout.mockResolvedValue(mockResponse);
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const getCheckout = makeGetCheckout({
+            checkoutId,
+            authToken,
+            service: mockService,
+        });
+        await getCheckout({ onSuccess, onError });
+        expect(onSuccess).toHaveBeenCalledWith({
+            checkout: new Checkout(mockResponse.data),
+        });
+        expect(onError).not.toHaveBeenCalled();
+    });
+    it('calls onError with an error message on fetch error', async () => {
+        mockService.fetchCheckout.mockResolvedValue(API_NOT_AUTHENTICATED_ERROR);
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const getCheckout = makeGetCheckout({
+            checkoutId,
+            authToken,
+            service: mockService,
+        });
+        await getCheckout({ onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith({
+            error: 'Not Authenticated',
+            code: 'not-authenticated',
+            severity: 'error',
+        });
+    });
+    it('calls onError with an error message on fetch exception', async () => {
+        const error = new Error('Network error');
+        mockService.fetchCheckout.mockRejectedValue(error);
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const getCheckout = makeGetCheckout({
+            checkoutId,
+            authToken,
+            service: mockService,
+        });
+        await getCheckout({ onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith({
+            error: error.message,
+            code: 'fetch-error',
+            severity: 'error',
+        });
+    });
+});
+describe('makeCheckoutComplete', () => {
+    const checkoutId = '123';
+    const authToken = 'token';
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('calls onSuccess with checkout complete response data', async () => {
+        mockService.complete.mockResolvedValue(mockResponse);
+        const payment = { payment_mode: 'ecom', payment_token: '123' };
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const completeCheckout = makeCheckoutComplete({
+            checkoutId,
+            authToken,
+            service: mockService,
+        });
+        await completeCheckout({ payment, onSuccess, onError });
+        expect(onSuccess).toHaveBeenCalledWith({
+            checkout: new Checkout(mockResponse.data),
+        });
+        expect(onError).not.toHaveBeenCalled();
+    });
+    it('calls onError with an error message on post error', async () => {
+        mockService.complete.mockResolvedValue(API_NOT_AUTHENTICATED_ERROR);
+        const payment = { payment_mode: 'ecom', payment_token: '123' };
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const completeCheckout = makeCheckoutComplete({
+            checkoutId,
+            authToken,
+            service: mockService,
+        });
+        await completeCheckout({ payment, onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith({
+            error: 'Not Authenticated',
+            code: 'not-authenticated',
+            severity: 'error',
+        });
+    });
+    it('calls onError with an error message on fetch exception', async () => {
+        const error = new Error('Network error');
+        mockService.complete.mockRejectedValue(error);
+        const payment = { payment_mode: 'ecom', payment_token: '123' };
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const completeCheckout = makeCheckoutComplete({
+            checkoutId,
+            authToken,
+            service: mockService,
+        });
+        await completeCheckout({ payment, onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith({
+            error: error.message,
+            code: 'fetch-error',
+            severity: 'error',
+        });
+    });
+});

package/dist/collection/components/checkout/test/checkout-core.spec.js

@@ -0,0 +1,127 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { CheckoutCore } from "../checkout-core";
+import { makeCheckoutComplete, makeGetCheckout } from "../checkout-actions";
+import { Checkout } from "../../../api/Checkout";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
+import mockGetCheckoutSuccess from "./../../../../../../mockData/mockGetCheckoutSuccess.json";
+import mockPostCheckoutSuccess from "./../../../../../../mockData/mockPostCheckoutSuccess.json";
+import { PaymentMethodOptions } from "../payment-method-options";
+describe('justifi-checkout-core', () => {
+    it('should display loading state correclty', async () => {
+        const page = await newSpecPage({
+            components: [CheckoutCore],
+            template: () => h("justifi-checkout-core", null),
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('should display error state correctly', async () => {
+        const getCheckout = makeGetCheckout({
+            checkoutId: '',
+            authToken: '',
+            service: {
+                fetchCheckout: async () => ({ error: 'error' }),
+            },
+        });
+        const page = await newSpecPage({
+            components: [CheckoutCore],
+            template: () => h("checkout-core", { getCheckout: getCheckout }),
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('should set checkout correctly to state', async () => {
+        const getCheckout = makeGetCheckout({
+            checkoutId: '',
+            authToken: '',
+            service: {
+                fetchCheckout: async () => mockGetCheckoutSuccess,
+            },
+        });
+        const page = await newSpecPage({
+            components: [CheckoutCore],
+            template: () => h("justifi-checkout-core", { getCheckout: getCheckout }),
+        });
+        await page.waitForChanges();
+        const expectedCheckout = new Checkout(mockGetCheckoutSuccess.data);
+        expect(page.rootInstance.checkout).toEqual(expectedCheckout);
+        expect(page.root).toMatchSnapshot();
+    });
+    it('should emit error event when fetch fails', async () => {
+        const getCheckout = makeGetCheckout({
+            authToken: '',
+            checkoutId: '',
+            service: {
+                fetchCheckout: jest.fn().mockRejectedValue(new Error('Fetch error')),
+            },
+        });
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [CheckoutCore],
+            template: () => h("justifi-checkout-core", { getCheckout: getCheckout, "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'fetch-error',
+                message: 'Fetch error',
+                severity: 'error',
+            }
+        }));
+    });
+    it('should emit error event when API returns error', async () => {
+        const getCheckout = makeGetCheckout({
+            authToken: '',
+            checkoutId: '',
+            service: {
+                fetchCheckout: jest.fn().mockResolvedValue(API_NOT_AUTHENTICATED_ERROR),
+            },
+        });
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [CheckoutCore],
+            template: () => h("justifi-checkout-core", { getCheckout: getCheckout, "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'not-authenticated',
+                message: 'Not Authenticated',
+                severity: 'error',
+            }
+        }));
+    });
+    it('emits "submitted" event upon submit request completion', async () => {
+        const getCheckout = makeGetCheckout({
+            authToken: '',
+            checkoutId: '',
+            service: {
+                fetchCheckout: async () => mockGetCheckoutSuccess,
+            }
+        });
+        const checkoutComplete = makeCheckoutComplete({
+            authToken: '',
+            checkoutId: '',
+            service: {
+                fetchCheckout: async () => mockPostCheckoutSuccess,
+            }
+        });
+        const submittedSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [CheckoutCore, PaymentMethodOptions],
+            template: () => h("justifi-checkout-core", { getCheckout: getCheckout, complete: checkoutComplete, onSubmitted: submittedSpy }),
+        });
+        await page.waitForChanges();
+        // mock resolved payment method (token) / select payment method
+        const instance = page.rootInstance;
+        instance.paymentMethodOptionsRef = { resolvePaymentMethod: jest.fn().mockResolvedValue({ token: '123' }) };
+        // Submit the form
+        const submitButton = page.root.shadowRoot.querySelector('button[type="submit"]');
+        submitButton.click();
+        await page.waitForChanges();
+        expect(submittedSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: { "code": "fetch-error", "error": "service.complete is not a function", "severity": "error" }
+        }));
+    });
+});

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

@@ -1,8 +1,6 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Checkout } from "../checkout";
 import { CheckoutCore } from "../checkout-core";
-// import { PaymentMethodTypes } from '../../../api';
-// import { BillingFormFields } from '../../billing-form/billing-form-schema';
 describe('justifi-checkout', () => {
     it('renders', async () => {
         const page = await newSpecPage({
@@ -12,155 +10,4 @@ describe('justifi-checkout', () => {
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
-    //   it('should update selectedPaymentMethodType when paymentMethodSelected event is fired', async () => {
-    //     // Mock component
-    //     const mockComponent = new Checkout();
-    //     mockComponent.selectedPaymentMethodType = PaymentMethodTypes.card;
-    //     // Define the event details
-    //     const detail = PaymentMethodTypes.bankAccount;
-    //     const event = new CustomEvent('paymentMethodSelected', { detail });
-    //     // Simulate the event
-    //     mockComponent.paymentMethodSelectedHandler(event);
-    //     // Assertion
-    //     expect(mockComponent.selectedPaymentMethodType).toBe(PaymentMethodTypes.bankAccount);
-    //   });
-    //   // Props Testing
-    //   it('should have the expected default properties', () => {
-    //     const checkout = new Checkout();
-    //     // Assert that the properties exist and have the expected default values
-    //     expect(checkout).toHaveProperty('bankAccount', undefined);
-    //     expect(checkout).toHaveProperty('card', undefined);
-    //     expect(checkout).toHaveProperty('email', undefined);
-    //     expect(checkout).toHaveProperty('iframeOrigin', undefined);
-    //     expect(checkout).toHaveProperty('clientId', undefined);
-    //     expect(checkout).toHaveProperty('accountId', undefined);
-    //     expect(checkout).toHaveProperty('submitButtonText', undefined);
-    //   });
-    //   // Method Testing
-    //   it('should correctly fill billing form when fillBillingForm method is called', async () => {
-    //     // Mock child component
-    //     const mockBillingFormRef = {
-    //       fill: jest.fn(),
-    //     };
-    //     // Mock component
-    //     const mockComponent = new Checkout();
-    //     // Cast to any to bypass type checker and directly set private property
-    //     (mockComponent as any).billingFormRef = mockBillingFormRef;
-    //     // Define the fields to fill the billing form
-    //     const fields: BillingFormFields = {
-    //       name: 'John Doe',
-    //       address_line1: '123 Main St',
-    //       address_line2: 'Apt 4B',
-    //       address_city: 'Townsville',
-    //       address_state: 'TS',
-    //       address_postal_code: '12345',
-    //     };
-    //     // Call the method
-    //     await mockComponent.fillBillingForm(fields);
-    //     // Check that the child component's fill method was called with the correct arguments
-    //     expect(mockBillingFormRef.fill).toHaveBeenCalledWith(fields);
-    //   });
-    //   it('should submit the form correctly and trigger the "submitted" event with the correct payload when submit method is called', async () => {
-    //     // Mock billingFormRef and paymentMethodFormRef
-    //     const mockBillingFormRef = {
-    //       validate: jest.fn().mockResolvedValue({ isValid: true }),
-    //       getValues: jest.fn().mockResolvedValue({ name: 'John Doe' }),
-    //     };
-    //     const mockPaymentMethodFormRef = {
-    //       validate: jest.fn().mockResolvedValue({ isValid: true }),
-    //       tokenize: jest.fn().mockResolvedValue({ token: 'abc123' }),
-    //     };
-    //     // Mock component
-    //     const mockComponent = new Checkout();
-    //     // Cast to any to bypass type checker and directly set private properties
-    //     (mockComponent as any).billingFormRef = mockBillingFormRef;
-    //     (mockComponent as any).paymentMethodFormRef = mockPaymentMethodFormRef;
-    //     // Mock event
-    //     const mockEvent = { preventDefault: jest.fn() };
-    //     // Mock event emitter
-    //     const mockEmitter = { emit: jest.fn() };
-    //     mockComponent.submitted = mockEmitter as any;
-    //     // Call submit method
-    //     await mockComponent.submit(mockEvent);
-    //     // Expectations
-    //     expect(mockEvent.preventDefault).toHaveBeenCalled();
-    //     expect(mockBillingFormRef.validate).toHaveBeenCalled();
-    //     expect(mockPaymentMethodFormRef.validate).toHaveBeenCalled();
-    //     expect(mockBillingFormRef.getValues).toHaveBeenCalled();
-    //     expect(mockPaymentMethodFormRef.tokenize).toHaveBeenCalledWith(mockComponent.clientId, { name: 'John Doe' }, mockComponent.accountId);
-    //     expect(mockEmitter.emit).toHaveBeenCalledWith({ token: 'abc123' });
-    //   });
-    //   // Event Testing
-    //   it('should fire the "submitted" event with correct data when the form is submitted', async () => {
-    //     // Mock billingFormRef and paymentMethodFormRef
-    //     const mockBillingFormRef = {
-    //       validate: jest.fn().mockResolvedValue({ isValid: true }),
-    //       getValues: jest.fn().mockResolvedValue({
-    //         name: 'John Doe',
-    //         address_line1: 'Address 1',
-    //         address_line2: 'Address 2',
-    //         address_city: 'City',
-    //         address_state: 'State',
-    //         address_postal_code: 'Postal Code',
-    //       }),
-    //     };
-    //     const mockPaymentMethodFormRef = {
-    //       validate: jest.fn().mockResolvedValue({ isValid: true }),
-    //       tokenize: jest.fn().mockResolvedValue({ token: 'abc123' }),
-    //     };
-    //     // Mock component
-    //     const mockComponent = new Checkout();
-    //     // Cast to any to bypass type checker and directly set private properties
-    //     (mockComponent as any).billingFormRef = mockBillingFormRef;
-    //     (mockComponent as any).paymentMethodFormRef = mockPaymentMethodFormRef;
-    //     // Mock event
-    //     const mockEvent = { preventDefault: jest.fn() };
-    //     // Mock event emitter
-    //     const mockEmitter = { emit: jest.fn() };
-    //     mockComponent.submitted = mockEmitter as any;
-    //     // Call submit method
-    //     await mockComponent.submit(mockEvent);
-    //     // Define expected payload
-    //     const expectedPayload = { token: 'abc123' };
-    //     // Expectations
-    //     expect(mockEmitter.emit).toHaveBeenCalledWith(expectedPayload);
-    //   });
-    //   // Render Testing
-    //   it('should correctly render the child components based on the given props and state', async () => {
-    //     // Set up new Checkout with specific props and state
-    //     const component = new Checkout();
-    //     component.iframeOrigin = 'https://example.com';
-    //     component.clientId = 'abc123';
-    //     component.accountId = 'def456';
-    //     // Cast to any to bypass type checker and directly set private properties
-    //     (component as any).submitButtonEnabled = true;
-    //     (component as any).selectedPaymentMethodType = PaymentMethodTypes.card;
-    //     (component as any).allowedPaymentMethodTypes = [PaymentMethodTypes.card, PaymentMethodTypes.bankAccount];
-    //     // Render the component
-    //     const { root } = await newSpecPage({
-    //       components: [Checkout],
-    //       html: '<justifi-checkout payment-method-form-type="card" iframe-origin="https://example.com"></justifi-checkout>',
-    //     });
-    //     // Assert that the rendered output is correct
-    //     expect(root).toEqualHtml(`
-    //       <justifi-checkout iframe-origin="https://example.com" payment-method-form-type="card">
-    //         <mock:shadow-root>
-    //           <form class="gy-3 row">
-    //             <div class="col-12">
-    //               <justifi-payment-method-form iframe-origin="https://example.com" payment-method-form-type="card"></justifi-payment-method-form>
-    //             </div>
-    //             <div class="col-12">
-    //               <justifi-billing-form legend="Billing Info"></justifi-billing-form>
-    //             </div>
-    //             <slot name="insurance"></slot>
-    //             <div class="col-12">
-    //               <button class="btn btn-primary jfi-submit-button" type="submit">
-    //                 Submit
-    //               </button>
-    //             </div>
-    //           </form>
-    //         </mock:shadow-root>
-    //       </justifi-checkout>
-    //     `);
-    //   });
 });