@justifi/webcomponents 5.7.6-rc-08 → 5.7.6

package/dist/collection/components/modular-checkout/sub-components/apple-pay.js

@@ -1,547 +0,0 @@
-import { h, } from "@stencil/core";
-import { ApplePayService } from "../../../api/services/apple-pay.service";
-import { ApplePayButtonType, ApplePayButtonStyle, ApplePayHelpers, } from "../../../api/ApplePay";
-import { StyledHost } from "../../../ui-components";
-import ApplePaySkeleton from "./apple-pay-skeleton";
-import { ApplePayButton } from "../../../ui-components/apple-pay-button";
-import { checkoutStore, onChange } from "../../../store/checkout.store";
-export class ApplePay {
-    constructor() {
-        this.countryCode = "US";
-        this.merchantIdentifier = "merchant.com.justifi.checkout";
-        this.merchantDisplayName = "JustiFi Checkout";
-        this.initiativeContext = "checkout.justifi.tech";
-        this.apiBaseUrl = "https://api.justifi-staging.com";
-        this.buttonType = ApplePayButtonType.PLAIN;
-        this.buttonStyle = ApplePayButtonStyle.BLACK;
-        this.disabled = false;
-        this.showSkeleton = true;
-        this.isLoading = true;
-        this.isProcessing = false;
-        this.isAvailable = false;
-        this.canMakePayments = false;
-        this.error = null;
-        this.handleApplePayClick = async () => {
-            var _a;
-            if (this.isProcessing || this.disabled || !this.isAvailable) {
-                return;
-            }
-            try {
-                this.isProcessing = true;
-                this.error = null;
-                this.applePayStarted.emit();
-                const paymentRequest = {
-                    countryCode: this.countryCode,
-                    currencyCode: checkoutStore.paymentCurrency,
-                    merchantCapabilities: ApplePayHelpers.getDefaultMerchantCapabilities(),
-                    supportedNetworks: ApplePayHelpers.getDefaultSupportedNetworks(),
-                    total: ApplePayHelpers.createLineItem(checkoutStore.paymentDescription, checkoutStore.paymentAmount),
-                };
-                const result = await this.applePayService.startPaymentSession(paymentRequest);
-                if (result.success) {
-                    this.applePayCompleted.emit({
-                        success: true,
-                        token: result.token,
-                    });
-                }
-                else {
-                    this.applePayCompleted.emit({
-                        success: false,
-                        error: result.error,
-                    });
-                    this.applePayError.emit({
-                        error: ((_a = result.error) === null || _a === void 0 ? void 0 : _a.message) || "Payment failed",
-                    });
-                }
-            }
-            catch (error) {
-                console.error("Apple Pay payment error:", error);
-                const errorMessage = error instanceof Error ? error.message : "Payment failed";
-                this.error = errorMessage;
-                this.applePayError.emit({ error: errorMessage });
-                this.applePayCompleted.emit({
-                    success: false,
-                    error: errorMessage,
-                });
-            }
-            finally {
-                this.isProcessing = false;
-            }
-        };
-    }
-    componentWillLoad() {
-        this.applePayService = new ApplePayService();
-        this.applePayService.setApiBaseUrl(this.apiBaseUrl);
-        this.applePayService.setAuthToken(checkoutStore.authToken);
-        this.applePayService.setAccountId(checkoutStore.accountId);
-        this.initializeApplePay();
-    }
-    componentDidLoad() {
-        onChange('paymentAmount', () => {
-            this.initializeApplePay();
-        });
-        onChange('authToken', () => {
-            if (this.applePayService) {
-                this.applePayService.setAuthToken(checkoutStore.authToken);
-            }
-        });
-    }
-    watchPropsChange() {
-        if (this.applePayService) {
-            this.applePayService.setApiBaseUrl(this.apiBaseUrl);
-            this.applePayService.setAuthToken(checkoutStore.authToken);
-        }
-        this.initializeApplePay();
-    }
-    async initializeApplePay() {
-        try {
-            this.isLoading = true;
-            this.error = null;
-            if (!checkoutStore.paymentAmount) {
-                this.error = "Missing required Apple Pay configuration";
-                this.isLoading = false;
-                return;
-            }
-            this.isAvailable = ApplePayHelpers.isApplePaySupported();
-            this.canMakePayments = ApplePayHelpers.canMakePayments();
-            if (!this.isAvailable) {
-                this.error = "Apple Pay is not supported on this device";
-                this.isLoading = false;
-                return;
-            }
-            if (!this.canMakePayments) {
-                this.error = "Apple Pay is not available";
-                this.isLoading = false;
-                return;
-            }
-            const applePayConfig = {
-                merchantIdentifier: this.merchantIdentifier,
-                displayName: this.merchantDisplayName,
-                initiative: "web",
-                initiativeContext: this.initiativeContext,
-                buttonType: this.buttonType,
-                buttonStyle: this.buttonStyle,
-            };
-            this.applePayService.initialize(applePayConfig);
-            const hasActiveCard = await this.applePayService.canMakePaymentsWithActiveCard();
-            if (!hasActiveCard) {
-                console.warn("No Apple Pay cards available, but continuing...");
-            }
-        }
-        catch (error) {
-            console.error("Apple Pay initialization error:", error);
-            this.error =
-                error instanceof Error
-                    ? error.message
-                    : "Failed to initialize Apple Pay";
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    async isSupported() {
-        return this.isAvailable && this.canMakePayments;
-    }
-    async getPaymentMethods() {
-        if (!this.isAvailable) {
-            return [];
-        }
-        return ApplePayHelpers.getDefaultSupportedNetworks();
-    }
-    async abort() {
-        this.applePayService.abortPaymentSession();
-        this.isProcessing = false;
-        this.applePayCancelled.emit();
-    }
-    render() {
-        const isReady = !this.isLoading &&
-            this.isAvailable &&
-            this.canMakePayments &&
-            !this.error;
-        return (h(StyledHost, { key: '063e9340c91a578205cdc68d57a4e92fb5dad7ea' }, h("div", { key: 'e1d01e34398adc6c5cd9fa10ef8a609e81980cff', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: 'e17de7edd2fcc10f01ab36307e8645d5d79be261', isReady: isReady }), !this.isLoading && this.error && (h("div", { key: '7b929489b4bc65f7ece00fbd1d941923e5fef384', class: 'apple-pay-error', role: 'alert' }, h("span", { key: '8683f75685f4e5804dab52b1c28553cc0cf7753a', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '4d18feba86c7b565275e134819e0f68a7feb6e40', class: 'error-message' }, this.error))), !this.isLoading && !this.error && !this.isAvailable && (h("div", { key: '2dbccabcda4d7a7b632abcc68d538f21b63ca286', class: 'apple-pay-unavailable' }, h("span", { key: '5993b7051423a443b3afcdc433c2928e47fc4a50', class: 'unavailable-message' }, "Apple Pay is not available on this device"))), !this.isLoading &&
-            !this.error &&
-            this.isAvailable &&
-            this.canMakePayments && (h(ApplePayButton, { key: 'cba576ef4b535396d1c6225e682ce52bd452b53f', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: '75271c0e6b8053cf11589cb54e2af22df921c8df' }, `
-            .apple-pay-container {
-              width: 100%;
-            }
-
-            .apple-pay-error {
-              display: flex;
-              align-items: center;
-              gap: 8px;
-              padding: 12px;
-              background: #fef2f2;
-              border: 1px solid #fecaca;
-              border-radius: 8px;
-              color: #dc2626;
-              font-size: 14px;
-            }
-
-            .apple-pay-unavailable {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              padding: 12px;
-              background: #f9fafb;
-              border: 1px solid #e5e7eb;
-              border-radius: 8px;
-              color: #6b7280;
-              font-size: 14px;
-            }
-
-            .error-icon {
-              font-size: 16px;
-            }
-          `)));
-    }
-    static get is() { return "justifi-apple-pay"; }
-    static get encapsulation() { return "shadow"; }
-    static get properties() {
-        return {
-            "countryCode": {
-                "type": "string",
-                "attribute": "country-code",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"US\""
-            },
-            "merchantIdentifier": {
-                "type": "string",
-                "attribute": "merchant-identifier",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"merchant.com.justifi.checkout\""
-            },
-            "merchantDisplayName": {
-                "type": "string",
-                "attribute": "merchant-display-name",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"JustiFi Checkout\""
-            },
-            "initiativeContext": {
-                "type": "string",
-                "attribute": "initiative-context",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"checkout.justifi.tech\""
-            },
-            "apiBaseUrl": {
-                "type": "string",
-                "attribute": "api-base-url",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"https://api.justifi-staging.com\""
-            },
-            "buttonType": {
-                "type": "string",
-                "attribute": "button-type",
-                "mutable": false,
-                "complexType": {
-                    "original": "ApplePayButtonType",
-                    "resolved": "ApplePayButtonType.BOOK | ApplePayButtonType.BUY | ApplePayButtonType.CHECK_OUT | ApplePayButtonType.DONATE | ApplePayButtonType.PLAIN | ApplePayButtonType.SET_UP | ApplePayButtonType.SUBSCRIBE",
-                    "references": {
-                        "ApplePayButtonType": {
-                            "location": "import",
-                            "path": "../../../api/ApplePay",
-                            "id": "src/api/ApplePay.ts::ApplePayButtonType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "ApplePayButtonType.PLAIN"
-            },
-            "buttonStyle": {
-                "type": "string",
-                "attribute": "button-style",
-                "mutable": false,
-                "complexType": {
-                    "original": "ApplePayButtonStyle",
-                    "resolved": "ApplePayButtonStyle.BLACK | ApplePayButtonStyle.WHITE | ApplePayButtonStyle.WHITE_OUTLINE",
-                    "references": {
-                        "ApplePayButtonStyle": {
-                            "location": "import",
-                            "path": "../../../api/ApplePay",
-                            "id": "src/api/ApplePay.ts::ApplePayButtonStyle"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "ApplePayButtonStyle.BLACK"
-            },
-            "disabled": {
-                "type": "boolean",
-                "attribute": "disabled",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "showSkeleton": {
-                "type": "boolean",
-                "attribute": "show-skeleton",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "true"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isLoading": {},
-            "isProcessing": {},
-            "isAvailable": {},
-            "canMakePayments": {},
-            "error": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "applePayStarted",
-                "name": "applePayStarted",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "applePayCompleted",
-                "name": "applePayCompleted",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{\n    success: boolean;\n    token?: IApplePayToken;\n    error?: any;\n  }",
-                    "resolved": "{ success: boolean; token?: IApplePayToken; error?: any; }",
-                    "references": {
-                        "IApplePayToken": {
-                            "location": "import",
-                            "path": "../../../api/ApplePay",
-                            "id": "src/api/ApplePay.ts::IApplePayToken"
-                        }
-                    }
-                }
-            }, {
-                "method": "applePayCancelled",
-                "name": "applePayCancelled",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "applePayError",
-                "name": "applePayError",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ error: string }",
-                    "resolved": "{ error: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "isSupported": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "getPaymentMethods": {
-                "complexType": {
-                    "signature": "() => Promise<string[]>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string[]>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "abort": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "merchantIdentifier",
-                "methodName": "watchPropsChange"
-            }, {
-                "propName": "apiBaseUrl",
-                "methodName": "watchPropsChange"
-            }, {
-                "propName": "buttonType",
-                "methodName": "watchPropsChange"
-            }, {
-                "propName": "buttonStyle",
-                "methodName": "watchPropsChange"
-            }, {
-                "propName": "disabled",
-                "methodName": "watchPropsChange"
-            }];
-    }
-}

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

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

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

@@ -1,98 +0,0 @@
-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: '1cf811a60b481271f29c151aff5ab8c132d65d4b' }, h(BankAccountFormSkeleton, { key: '3b81c1b9456f2be69fb89f0abac6c0bb95d5f2d3', isReady: this.isReady }), h("hidden-input", { key: 'd1d02debee100c4a851f7eb5aa9196587e58e54d' }), h("div", { key: '49ced4f6c7c3b9b42fc2b08fd14161ed9a21fdfa', class: "container-fluid p-0", style: {
-                opacity: this.isReady ? '1' : '0',
-                height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '5d44c0b231532e4b98ff6a777db820c41ce5ce0b', class: "row mb-3" }, h("iframe-input", { key: '1628067e98f44f9e7e0f404b1df9e61d756e9d50', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '513aa503c8df3f79d340bf9f4bec9cdee2679a69', class: "row" }, h("iframe-input", { key: 'fdbaf1f56b3d0fbc5d1395293240f3b27c134bdd', 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

@@ -1,21 +0,0 @@
-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;
-};