@justifi/webcomponents 5.7.6-rc-19 → 5.7.6-rc-21

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

@@ -1,554 +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";
-import { configState } from "../../config-provider/config-state";
-export class ApplePay {
-    constructor() {
-        this.countryCode = "US";
-        this.merchantIdentifier = "merchant.com.staging-justifi.checkout-dev";
-        this.merchantDisplayName = "JustiFi Checkout";
-        this.initiativeContext = "dev-checkout.justifi-staging.com";
-        this.apiBaseUrl = configState.apiOrigin;
-        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() {
-        this.initializeApplePay();
-    }
-    async initializeApplePay() {
-        console.log('Initializing Apple Pay');
-        try {
-            if (this.applePayService) {
-                this.applePayService.setApiBaseUrl(this.apiBaseUrl);
-                this.applePayService.setAuthToken(checkoutStore.authToken);
-            }
-            this.isLoading = true;
-            this.error = null;
-            if (!checkoutStore.paymentAmount) {
-                this.error = "Missing required Apple Pay configuration";
-                this.isLoading = false;
-                return;
-            }
-            this.isAvailable = true; // ApplePayHelpers.isApplePaySupported();
-            this.canMakePayments = true; // 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,
-            };
-            console.log('=== APPLE PAY CONFIG ===');
-            console.log('Config:', applePayConfig);
-            console.log('Auth token present:', !!checkoutStore.authToken);
-            console.log('Account ID:', checkoutStore.accountId);
-            this.applePayService.setAccountId(checkoutStore.accountId);
-            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: 'd55dda44d46f4656c7a9ff6885391947f857c2dc' }, h("script", { key: '723e706fc06e2c1e3561986e8a589e6e1e189a60', async: true, src: "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js" }), h("div", { key: 'efbcd52f6524a949b5f214a3344a0b529f30dce1', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: 'fefcd7c8d03f2d35f344382fda095f460b70a400', isReady: isReady }), !this.isLoading && this.error && (h("div", { key: '459f2d85daa0c51993d1bc4b4714ae987537dfef', class: 'apple-pay-error', role: 'alert' }, h("span", { key: 'cd1169c676cb4ddb45aa21a4fa22a9758fb7e9cb', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '9bcef321a5083deef7b94c99a290b1168bbf8522', class: 'error-message' }, this.error))), !this.isLoading && !this.error && !this.isAvailable && (h("div", { key: '1fef9ea9163afa8e6813a35a386392c33ef8ae27', class: 'apple-pay-unavailable' }, h("span", { key: '394ec2ba879d948ee79947ba90e890ba27454b5a', class: 'unavailable-message' }, "Apple Pay is not available on this device"))), !this.isLoading &&
-            !this.error &&
-            this.isAvailable &&
-            this.canMakePayments && (h(ApplePayButton, { key: '79fbd6c1e0ee6d7fcf3a96d3cc88dcb6118ce81e', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: 'ec8cceea78e8d9d961d2e2e1376232cea4273a6a' }, `
-            .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.staging-justifi.checkout-dev\""
-            },
-            "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": "\"dev-checkout.justifi-staging.com\""
-            },
-            "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": "configState.apiOrigin"
-            },
-            "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/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;
-};

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

@@ -1,97 +0,0 @@
-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: 'a6ce1995bc8f0bc79b52c692d71bde1235d90622' }, h("div", { key: '5ce8118beaf6cfc090c3b6858fb2888741aa7e53', part: billingForm }, h("form", { key: '15a9035e31659a0ce08d675d1868afea612811d5' }, h("fieldset", { key: '9c57ae450cc38e0fe50a6e0d2949b18d945ace1c' }, h("div", { key: '0f6dfd8c20b64e60f22fed232ab56cc0d2509b82', class: "row gy-3" }, h("div", { key: '40024642467bd869d4e1b926e6dde10a4f200f8b', class: "col-12" }, h("form-control-text", { key: 'ead74011aa5097a6c3ae9634a149ded0399729ef', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'c31e9d4cf5285a0113f4d931035534949709a1ca', class: "col-12" }, h("form-control-text", { key: '1cef8e3f7fd41d46046a214b1d442923074f7a41', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: '9d6dd8dd7894866ecbffeb7dfb347e0ea4099946', class: "col-12" }, h("form-control-text", { key: 'a65736751e7d8a6470c3eb2d04cf4ff173e660b6', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '1c0ba7f2720bc71434b69cb285ddf6214932d063', class: "col-12" }, h("form-control-text", { key: 'de507ce3010e4cb09d3b659823b097fd9c9d9d63', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: '31421327f01601abe6aaaae8ac2391afcdc485d9', class: "col-12" }, h("form-control-select", { key: '30be012a7b96e75b57808922bc689f31a056e8d7', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: 'f24ba6174800f8f57a02a295e71fb0b018249634', class: "col-12" }, h("form-control-text", { key: 'cf69224b9af53ad11971ccea42756dbacebb104d', 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": []
-                }
-            }
-        };
-    }
-}