@justifi/webcomponents 6.0.0-rc.2 → 6.0.0-rc.3

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: '45f2eaf52c3a2b2641a9cf6b22861de0a2a628a6' }, h("script", { key: '42a858aefc0e5ff23d5cf322ebca4408d7ac745f', async: true, src: "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js" }), h("div", { key: '87ff666f7a898051253e18a1c14a9fca0373b1a8', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: '3b4a24e3e8f4a4fdde1b134b61d7cbe422b40fd9', isReady: isReady }), !this.isLoading && this.error && (h("div", { key: 'a6f58df266b99e385eb38f7d8104906966b337af', class: 'apple-pay-error', role: 'alert' }, h("span", { key: 'c97d5489a323df55a97a5d3395fd4e14363ba32b', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: 'd6447983dcf879d061d1b4d6d06300e9df3430d4', class: 'error-message' }, this.error))), !this.isLoading && !this.error && !this.isAvailable && (h("div", { key: 'd58714c3a66403876a1b92f7de5a2981a71baaa4', class: 'apple-pay-unavailable' }, h("span", { key: '7d01800c0044a6b1cce70d76da8c4b37e9d592c8', class: 'unavailable-message' }, "Apple Pay is not available on this device"))), !this.isLoading &&
-            !this.error &&
-            this.isAvailable &&
-            this.canMakePayments && (h(ApplePayButton, { key: '6e950987ae3c2d7c5168028f48a6400bd97a0692', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: '2358f7ee9df1d9d270754801b00be2c807c2a10c' }, `
-            .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"
-            }];
-    }
-}