@justifi/webcomponents 5.7.5 → 5.7.6-rc-02

package/dist/collection/components/modular-checkout/sub-components/bank-account.js

@@ -0,0 +1,98 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../../ui-components";
+import BankAccountFormSkeleton from "./bank-account-skeleton";
+import { checkPkgVersion } from "../../../utils/check-pkg-version";
+import JustifiAnalytics from "../../../api/Analytics";
+import { configState, waitForConfig } from "../../config-provider/config-state";
+export class BankAccountForm {
+    constructor() {
+        this.isReady = false;
+    }
+    async componentWillLoad() {
+        await waitForConfig();
+        this.iframeOrigin = configState.iframeOrigin;
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+    }
+    componentDidRender() {
+        const elements = [
+            this.accountNumberIframeElement,
+            this.routingNumberIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async validate() {
+        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
+        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
+        return accountNumberIsValid && routingNumberIsValid;
+    }
+    async tokenize({ clientId, paymentMethodMetadata, account }) {
+        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(StyledHost, { key: '62a8adb8888d6143bbc27678ccff125c7b3a59ec' }, h(BankAccountFormSkeleton, { key: 'a73372809ad95b4aa900aa6907ce4517ce01cdde', isReady: this.isReady }), h("hidden-input", { key: 'a9324304388bf0b3b19bfe4f8ea56c9fad1a12e7' }), h("div", { key: '7b7584c3af3bfe6ca6fb7bdbec25d4c0c9d43b40', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: '40c0352915f903b5ba6fda1642644158daf129b7', class: "row mb-3" }, h("iframe-input", { key: 'af64688e5d8b5da6898a5e20550cc1992a28fe9c', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '20fbdaffb3d2ba3ac8c44a4b64040f146ad58789', class: "row" }, h("iframe-input", { key: '5a0fd0855570d0ebbcd1d6be2f569d08a4ae3c17', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+    }
+    static get is() { return "justifi-bank-account-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get states() {
+        return {
+            "iframeOrigin": {},
+            "isReady": {}
+        };
+    }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "tokenize": {
+                "complexType": {
+                    "signature": "({ clientId, paymentMethodMetadata, account }: { clientId: string; paymentMethodMetadata: any; account?: string; }) => Promise<any>",
+                    "parameters": [{
+                            "name": "__0",
+                            "type": "{ clientId: string; paymentMethodMetadata: any; account?: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/billing-form-schema.js

@@ -0,0 +1,21 @@
+import { object } from "yup";
+import { cityValidation, identityNameValidation, lineOneValidation, lineTwoValidation, postalValidation, stateValidation, } from "../../business-forms/schemas/schema-validations";
+export const billingFormSchema = (postalOnly) => {
+    const fullBillingForm = object({
+        name: identityNameValidation.required('Enter full name'),
+        address_line1: lineOneValidation.required('Enter street address'),
+        address_line2: lineTwoValidation.nullable(),
+        address_city: cityValidation.required('Enter city'),
+        address_state: stateValidation.required('Select state'),
+        address_postal_code: postalValidation.required('Enter postal code'),
+    });
+    const postalForm = object({
+        name: identityNameValidation.nullable(),
+        address_line1: lineOneValidation.nullable(),
+        address_line2: lineTwoValidation.nullable(),
+        address_city: cityValidation.nullable(),
+        address_state: stateValidation.nullable(),
+        address_postal_code: postalValidation.required('Enter postal code'),
+    });
+    return postalOnly ? postalForm : fullBillingForm;
+};

package/dist/collection/components/modular-checkout/sub-components/billing-information-form.js

@@ -0,0 +1,97 @@
+import { h } from "@stencil/core";
+import { billingFormSchema } from "./billing-form-schema";
+import { billingForm } from "../../../styles/parts";
+import { numberOnlyHandler } from "../../../ui-components/form/utils";
+import StateOptions from "../../../utils/state-options";
+import { FormController } from "../../../ui-components/form/form";
+import { StyledHost } from "../../../ui-components";
+import { onChange } from "../../../store/checkout.store";
+export class BillingInformationForm {
+    constructor() {
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    connectedCallback() {
+        this.unsubscribe = onChange('billingFormFields', (newValue) => {
+            this.formController.setInitialValues(newValue);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    componentWillLoad() {
+        this.formController = new FormController(billingFormSchema());
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async validate() {
+        let isValid = await this.formController.validate();
+        return { isValid: isValid };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h(StyledHost, { key: '7111e5b5bb74bf5af175910094a75eccaff6f1c1' }, h("div", { key: '2ab9f375ca4d7b911f121a54eacbf1db58922fbf', part: billingForm }, h("form", { key: '85a3c97691dcbf47c626e879639b56abeae4b2b2' }, h("fieldset", { key: '8fbc358d9e9341f909484e1854f61fcfd1eb1fb7' }, h("div", { key: 'f829796613bf471ad10e9b56c925c279b89d1285', class: "row gy-3" }, h("div", { key: 'fb4db86dffdef38fdbdce46ff616ca04ae76e2d3', class: "col-12" }, h("form-control-text", { key: '8fbb9905623d60a3927e12b378643ba114444317', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'ad970e98848b37a7fbf38426816934d6d07f3f0c', class: "col-12" }, h("form-control-text", { key: '6e760651837835e11302b8c67a2df8fca1e8ed7e', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: 'e0e5e930cbe8d1004c9c042d11808cdfe249ec63', class: "col-12" }, h("form-control-text", { key: '804eddc192b2986da21e408c6ec4b0e5776cdc97', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '816709631875826395d2299c550aab269ebcc978', class: "col-12" }, h("form-control-text", { key: '51f9d36ac48eb9fd96e1174464c8626a5186f8fa', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: 'd6a218546863ca966ca29b6a25c7965133e03e9c', class: "col-12" }, h("form-control-select", { key: '09a02e39dd8fe8bd994f66e29c0c30e232a0fe62', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: '171d7901a169a8a86dae6db50f85094d891a754e', class: "col-12" }, h("form-control-text", { key: '9c0654206e6e7a6f3e8ec1f6e91c856d56fb10f4', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+    }
+    static get is() { return "justifi-billing-information-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get states() {
+        return {
+            "formController": {},
+            "billingInfo": {},
+            "errors": {}
+        };
+    }
+    static get methods() {
+        return {
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<BillingFormFields>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "./billing-form-schema",
+                            "id": "src/components/modular-checkout/sub-components/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<BillingFormFields>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<{ isValid: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ isValid: boolean; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/card-form-skeleton.js

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+import { Skeleton } from "../../../ui-components";
+const CardFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: "container-fluid p-0" }, h("div", { class: "mb-3" }, h(Skeleton, { height: "18px", width: "100px" }), h(Skeleton, { height: "36px" })), h("div", { class: "row" }, h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "80px" }), h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "30px" }), h(Skeleton, { height: "36px" })))));
+};
+export default CardFormSkeleton;

package/dist/collection/components/modular-checkout/sub-components/card-form.js

@@ -0,0 +1,102 @@
+import { h } from "@stencil/core";
+import CardFormSkeleton from "./card-form-skeleton";
+import { StyledHost } from "../../../ui-components";
+import JustifiAnalytics from "../../../api/Analytics";
+import { checkPkgVersion } from "../../../utils/check-pkg-version";
+import { configState, waitForConfig } from "../../config-provider/config-state";
+export class JustifiCardForm {
+    constructor() {
+        this.isReady = false;
+    }
+    async componentWillLoad() {
+        await waitForConfig();
+        this.iframeOrigin = configState.iframeOrigin;
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+    }
+    componentDidRender() {
+        const elements = [
+            this.cardNumberIframeElement,
+            this.expirationMonthIframeElement,
+            this.expirationYearIframeElement,
+            this.cvvIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async validate() {
+        const cardNumberIsValid = await this.cardNumberIframeElement.validate();
+        const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
+        const expirationYearIsValid = await this.expirationYearIframeElement.validate();
+        const cvvIsValid = await this.cvvIframeElement.validate();
+        return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
+    }
+    async tokenize({ clientId, paymentMethodMetadata, account, }) {
+        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(StyledHost, { key: '2c4ec015f537508bc875aaf6e3d527cd4f39eec6' }, h(CardFormSkeleton, { key: '064b3dab1b506c3332c753233b1893b36d36d42a', isReady: this.isReady }), h("hidden-input", { key: 'cb74f8ef5c6c437c3ff2c763b2b3f7a9f7732c13' }), h("div", { key: '7c688141ed3e96b032fc6f96a170cd4be09a65e5', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: '2722c8d805cc4767bf58cb70c5be4815e8bc09ee', class: "mb-3" }, h("iframe-input", { key: '428df22cc9075d737c5aec2520596ae774adde1e', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '292ae9746f3dd219ced19be33f6900fa00bfb4b1', class: "row" }, h("div", { key: '2e825c02e676a30e873f6f119aa6521e49ac7051', class: "col-4 align-content-end" }, h("iframe-input", { key: '4a9ddbf248fdabcc6da0fb405e95c906717a91ab', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'a500314664b746c6947107021e32d04790000865', class: "col-4 align-content-end" }, h("iframe-input", { key: '995c9294a85c8da8b9e314646c93c700a54e7310', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'b0a7d1f9df2a2fba165d3cae93b542da80cec77c', class: "col-4 align-content-end" }, h("iframe-input", { key: '3adfeccdfc31745b972bf7d040aaf0e5d55fbfb3', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+    }
+    static get is() { return "justifi-card-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get states() {
+        return {
+            "isReady": {},
+            "iframeOrigin": {}
+        };
+    }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "tokenize": {
+                "complexType": {
+                    "signature": "({ clientId, paymentMethodMetadata, account, }: { clientId: string; paymentMethodMetadata: any; account?: string; }) => Promise<any>",
+                    "parameters": [{
+                            "name": "__0",
+                            "type": "{ clientId: string; paymentMethodMetadata: any; account?: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/payment-method-option.js

@@ -0,0 +1,113 @@
+import { h } from "@stencil/core";
+import { radioListItem } from "../../../styles/parts";
+import { StyledHost } from "../../../ui-components";
+export class PaymentMethodOption {
+    render() {
+        return (h(StyledHost, { key: 'bef445cfdd80c24e9b005f503cf4913ceac4eae8', class: "payment-method" }, h("div", { key: 'af292fe29e32858371b7a41fb3d1b983a33d4cc0', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: '7f3e0ea48a5a8d9b655e1f8609065b7de06386eb', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+    }
+    static get is() { return "payment-method-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "paymentMethodOptionId": {
+                "type": "string",
+                "attribute": "payment-method-option-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isSelected": {
+                "type": "boolean",
+                "attribute": "is-selected",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "clickHandler": {
+                "type": "unknown",
+                "attribute": "click-handler",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: MouseEvent) => void",
+                    "resolved": "(event: MouseEvent) => void",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "radioButtonHidden": {
+                "type": "boolean",
+                "attribute": "radio-button-hidden",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/postal-code-form.js

@@ -0,0 +1,124 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../../ui-components";
+import { numberOnlyHandler } from "../../../ui-components/form/utils";
+import { FormController } from "../../../ui-components/form/form";
+import { billingFormSchema } from "./billing-form-schema";
+import { onChange } from "../../../store/checkout.store";
+export class PostalCodeForm {
+    constructor() {
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    connectedCallback() {
+        this.unsubscribe = onChange('billingFormFields', (newValue) => {
+            this.formController.setInitialValues(newValue);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    componentWillLoad() {
+        this.formController = new FormController(billingFormSchema(true));
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async fill(fields) {
+        this.formController.setInitialValues(fields);
+    }
+    async validate() {
+        let isValid = await this.formController.validate();
+        return { isValid: isValid };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h(StyledHost, { key: 'bc2746672b9bcb986f658f69c53ded47f78165e2' }, h("form", { key: '9a2642233487802aa55c0a0a548f277e252517d3' }, h("form-control-text", { key: 'ff3f4e10ebe6a278bbe0671691128a058e8ada8b', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))));
+    }
+    static get is() { return "justifi-postal-code-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get states() {
+        return {
+            "formController": {},
+            "billingInfo": {},
+            "errors": {}
+        };
+    }
+    static get methods() {
+        return {
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<BillingFormFields>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "./billing-form-schema",
+                            "id": "src/components/modular-checkout/sub-components/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<BillingFormFields>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "fill": {
+                "complexType": {
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "parameters": [{
+                            "name": "fields",
+                            "type": "BillingFormFields",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "./billing-form-schema",
+                            "id": "src/components/modular-checkout/sub-components/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<{ isValid: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ isValid: boolean; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/saved-payment-methods.js

@@ -0,0 +1,40 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../../ui-components";
+import { checkoutStore } from "../../../store/checkout.store";
+import { radioListItem } from "../../../styles/parts";
+import { CardBrandLabels } from "../../checkout/payment-method-option-utils";
+export class SavedPaymentMethods {
+    constructor() {
+        this.onPaymentMethodOptionClick = (paymentMethodId) => (e) => {
+            e.preventDefault();
+            checkoutStore.selectedPaymentMethod = paymentMethodId;
+        };
+        this.isAllowedPaymentMethod = (paymentMethod) => {
+            if (paymentMethod.type === 'card' && checkoutStore.disableCreditCard) {
+                return false;
+            }
+            if (paymentMethod.type === 'bank_account' && checkoutStore.disableBankAccount) {
+                return false;
+            }
+            return true;
+        };
+    }
+    componentWillLoad() {
+        if (!checkoutStore.paymentMethods.length) {
+            console.warn('No saved payment methods available.');
+        }
+        if (checkoutStore.disablePaymentMethodGroup) {
+            console.warn('Payment method group is disabled.');
+        }
+    }
+    render() {
+        if (checkoutStore.disablePaymentMethodGroup) {
+            return null;
+        }
+        return (h(StyledHost, null, h("div", { class: "saved-payment-methods" }, checkoutStore.paymentMethods.length ? checkoutStore.paymentMethods
+            .filter(this.isAllowedPaymentMethod)
+            .map((paymentMethod) => (h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) }, h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: checkoutStore.selectedPaymentMethod === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
+    }
+    static get is() { return "justifi-saved-payment-methods"; }
+    static get encapsulation() { return "shadow"; }
+}