@justifi/webcomponents 4.8.2 → 4.9.0

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

@@ -0,0 +1,248 @@
+import { h } from "@stencil/core";
+import { config } from "../../../config";
+import { PaymentMethodTypes } from "../../api/Payment";
+import { PaymentMethodOption } from "./payment-method-option-utils";
+export class PaymentMethodOptions {
+    constructor() {
+        this.showCard = undefined;
+        this.showAch = undefined;
+        this.clientId = undefined;
+        this.accountId = undefined;
+        this.iframeOrigin = config.iframeOrigin;
+        this.savedPaymentMethods = [];
+        this.selectedPaymentMethodId = undefined;
+        this.paymentMethodOptions = [];
+    }
+    paymentMethodsChanged() {
+        this.paymentMethodOptions = this.savedPaymentMethods.map((paymentMethod) => new PaymentMethodOption(paymentMethod));
+        if (this.showCard) {
+            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.card }));
+        }
+        if (this.showAch) {
+            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.bankAccount }));
+        }
+        this.selectedPaymentMethodId = this.paymentMethodOptions[0].id;
+    }
+    paymentMethodOptionSelected(event) {
+        this.selectedPaymentMethodId = event.detail.id;
+    }
+    async getPaymentMethodToken() {
+        var _a;
+        return await ((_a = this.selectedPaymentMethodOptionRef) === null || _a === void 0 ? void 0 : _a.getPaymentMethodToken());
+    }
+    render() {
+        var _a;
+        return (h("div", null, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+            const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
+            const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
+            const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
+            if (newCard || newBankAccount) {
+                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, "client-id": this.clientId, "account-id": this.accountId, "is-selected": isSelected, ref: (el) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
+            else {
+                return (h("justifi-saved-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, ref: (el) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
+        })));
+    }
+    static get is() { return "justifi-payment-method-options"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["payment-method-options.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["payment-method-options.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showCard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-card",
+                "reflect": false
+            },
+            "showAch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-ach",
+                "reflect": false
+            },
+            "clientId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-id",
+                "reflect": false
+            },
+            "accountId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "account-id",
+                "reflect": false
+            },
+            "iframeOrigin": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "iframe-origin",
+                "reflect": false,
+                "defaultValue": "config.iframeOrigin"
+            },
+            "savedPaymentMethods": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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
+            }
+        };
+    }
+    static get states() {
+        return {
+            "paymentMethodOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleCreatingNewPaymentMethod",
+                "name": "toggleCreatingNewPaymentMethod",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getPaymentMethodToken": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "savedPaymentMethods",
+                "methodName": "paymentMethodsChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "paymentMethodOptionSelected",
+                "method": "paymentMethodOptionSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,123 @@
+import { Fragment, h } from "@stencil/core";
+import { config } from "../../../config";
+import { CardBrandLabels } from "./payment-method-option-utils";
+export class SavedPaymentMethod {
+    constructor() {
+        this.onPaymentMethodOptionClick = () => {
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+        this.iframeOrigin = config.iframeOrigin;
+        this.paymentMethodOption = undefined;
+        this.isSelected = undefined;
+    }
+    async getPaymentMethodToken() {
+        var _a;
+        return (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    ;
+    render() {
+        var _a, _b, _c, _d, _e;
+        return (h(Fragment, null, h("div", { class: "payment-method" }, h("div", { class: "payment-method-header p-3 border-bottom", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
+            _e.acct_last_four)))));
+    }
+    static get is() { return "justifi-saved-payment-method"; }
+    static get properties() {
+        return {
+            "iframeOrigin": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "iframe-origin",
+                "reflect": false,
+                "defaultValue": "config.iframeOrigin"
+            },
+            "paymentMethodOption": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaymentMethodOption",
+                    "resolved": "PaymentMethodOption",
+                    "references": {
+                        "PaymentMethodOption": {
+                            "location": "import",
+                            "path": "./payment-method-option-utils",
+                            "id": "src/components/checkout/payment-method-option-utils.tsx::PaymentMethodOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "isSelected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-selected",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "paymentMethodOptionSelected",
+                "name": "paymentMethodOptionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getPaymentMethodToken": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

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

@@ -0,0 +1,22 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('justifi-checkout', () => {
+    it('should correctly render submit button with correct text', async () => {
+        // Create new testing page and add our component to it
+        const page = await newE2EPage();
+        await page.setContent(`
+        <justifi-checkout
+          bank-account="true"
+          card="true"
+          email="test@example.com"
+          iframe-origin="https://iframe.example.com"
+          client-id="testId"
+          account-id="accountId"
+          submit-button-text="Pay Now"
+        />
+      `);
+        // Find the submit button on the page
+        const submitButton = await page.find('justifi-checkout >>> button');
+        // Assert that the submit button's text is set correctly
+        expect(await submitButton.textContent).toBe('Pay Now');
+    });
+});

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

@@ -0,0 +1,166 @@
+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({
+            components: [Checkout, CheckoutCore],
+            html: '<justifi-checkout></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>
+    //     `);
+    //   });
+});

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

@@ -0,0 +1,19 @@
+export const mockCheckout = {
+    "id": "cho_1Kx0fKUNt2GVfHrDj5GxoO",
+    "type": "checkout",
+    "page_info": null,
+    "data": {
+        "payment_intent_id": "pi_3triuDeQOGkrdkONJwsOxD",
+        "account_id": "acc_323sM3WDAUnHH0fJD7re9h",
+        "platform_account_id": "acc_75j5yGxQUf69B9vT2hDUn9",
+        "payment_amount": "2413",
+        "payment_client_id": "test_eohVQllq0mJy34T14dsZJlHjXKr7rKyH",
+        "payment_description": "dptest pos mode",
+        "payment_methods": [],
+        "payment_method_group_id": null,
+        "payment_settings": {
+            "credit_card_payments": true,
+            "ach_payments": true
+        }
+    }
+};

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

@@ -1,7 +1,10 @@
 import { h } from "@stencil/core";
 export const LoadingState = () => (h("main", { part: "detail-loading-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", { part: "detail-loading-spinner", class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading..."))));
 export const ErrorState = (errorMessage) => (h("main", { part: "detail-empty-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", null, errorMessage)));
-export const DetailSection = (props, children) => (h("div", { part: "detail-section", class: "mt-4" }, h("h5", { part: "detail-section-title" }, props.sectionTitle), h("hr", null), h("div", { class: "d-table gap-2 w-100" }, ...children)));
+export const DetailSectionTitle = (props) => [
+    h("h5", { part: "detail-section-title", class: "mt-4" }, props.sectionTitle),
+    h("hr", null),
+];
 export const DetailItem = ({ title, value, }) => title && value ? (h("div", { class: "d-table-row gap-2" }, h("span", { part: "detail-section-item-title", class: "fw-bold d-table-cell px-2" }, title), h("span", { part: "detail-section-item-data", class: "flex-1 d-table-cell px-2 text-wrap", innerHTML: value }))) : null;
 export const EntityHeadInfoItem = ({ title, value, classes, }) => (h("div", { part: "detail-head-info-item", class: `d-flex flex-column ${classes}` }, h("span", { part: "detail-head-info-item-title", class: "fw-bold border-1 border-bottom ps-2 pe-2" }, title), h("span", { part: "detail-head-info-item-data", class: "pt-2 ps-2 pe-2" }, value)));
 export const EntityHeadInfo = ({ title, slot, badge }, children) => (h("div", { slot: slot, part: "detail-head", class: "p-2" }, h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" }, h("h1", { class: "m-0", part: "detail-title" }, title), badge), h("div", { part: "detail-head-info", class: "d-flex flex-row align-items-top" }, children)));

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

@@ -0,0 +1,14 @@
+export const makeGetGrossPaymentChartData = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    try {
+        const response = await service.fetchGrossVolumeChartData(id, authToken);
+        if (!response.error) {
+            onSuccess(response.data);
+        }
+        else {
+            onError(`Error trying to fetch data : ${response.error}`);
+        }
+    }
+    catch (error) {
+        onError(`Error trying to fetch data : ${error}`);
+    }
+};