@justifi/webcomponents 4.12.2 → 4.13.0-rc.1

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { makeGetCheckout, makeCheckoutComplete } from "./checkout-actions";
 import { CheckoutService } from "../../api/services/checkout.service";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 export class Checkout {
     constructor() {
         this.iframeOrigin = undefined;
@@ -27,7 +28,11 @@ export class Checkout {
             });
         }
         else {
-            this.errorMessage = 'auth-token and checkout-id are required';
+            this.errorEvent.emit({
+                message: 'auth-token and checkout-id are required',
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     propChanged() {
@@ -37,7 +42,6 @@ export class Checkout {
         return (h("justifi-checkout-core", { getCheckout: this.getCheckout, complete: this.complete }));
     }
     static get is() { return "justifi-checkout"; }
-    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "iframeOrigin": {
@@ -100,6 +104,30 @@ export class Checkout {
             "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": "authToken",

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

@@ -16,14 +16,21 @@ export class NewPaymentMethod {
         this.isSelected = undefined;
     }
     async resolvePaymentMethod() {
+        var _a, _b;
         if (!this.paymentMethodFormRef || !this.billingFormRef)
             return;
         const billingFormValidation = await this.billingFormRef.validate();
         const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
         if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
             return;
-        const token = await this.tokenize();
-        return { token: token };
+        const tokenizeResponse = await this.tokenize();
+        if (tokenizeResponse.error) {
+            return { error: tokenizeResponse.error };
+        }
+        else {
+            const tokenizeRessponseData = tokenizeResponse.data;
+            return { token: ((_a = tokenizeRessponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeRessponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token) };
+        }
     }
     async tokenize() {
         try {
@@ -31,17 +38,10 @@ export class NewPaymentMethod {
             const paymentMethodData = Object.assign({}, billingFormFieldValues);
             const clientId = this.clientId;
             const tokenizeResponse = await this.paymentMethodFormRef.tokenize(clientId, paymentMethodData, this.accountId);
-            if (tokenizeResponse.error) {
-                console.error(`An error occured submitting the form: ${tokenizeResponse.error.message}`);
-                return null;
-            }
-            const data = tokenizeResponse.data;
-            const tokenizedPaymentMethod = data.card || data.ach; // fix the response types to avoid this
-            return tokenizedPaymentMethod.token;
+            return tokenizeResponse;
         }
         catch (error) {
-            console.error(`An error occured submitting the form: ${error}`);
-            return null;
+            return error;
         }
     }
     showNewPaymentMethodForm() {

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,124 @@
+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(mockResponse);
+        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: {
+                complete: 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: mockPostCheckoutSuccess
+        }));
+    });
+});

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>
-    //     `);
-    //   });
 });