@justifi/webcomponents 6.5.0-rc.1 → 6.5.0

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

@@ -1,609 +0,0 @@
-import { h, } from "@stencil/core";
-import { GooglePayService } from "../../../api/services/google-pay.service";
-import { GooglePayButtonType, GooglePayButtonStyle, GooglePayButtonSizeMode, GooglePayEnvironment, GooglePayHelpers, } from "../../../api/GooglePay";
-import { StyledHost } from "../../../ui-components";
-import GooglePaySkeleton from "./google-pay-skeleton";
-import { GooglePayButton } from "../../../ui-components/google-pay-button";
-import { checkoutStore, onChange } from "../../../store/checkout.store";
-import { PAYMENT_METHODS } from "../ModularCheckout";
-export class GooglePay {
-    constructor() {
-        this.unsubscribes = [];
-        this.canMakePayments = false;
-        this.error = null;
-        this.isAvailable = false;
-        this.isLoading = true;
-        this.isProcessing = false;
-        this.buttonSizeMode = GooglePayButtonSizeMode.FILL;
-        this.buttonStyle = GooglePayButtonStyle.BLACK;
-        this.buttonType = GooglePayButtonType.PLAIN;
-        this.countryCode = "US";
-        this.disabled = false;
-        this.environment = GooglePayEnvironment.TEST;
-        this.merchantId = "gateway:justifi";
-        this.merchantName = "justifi";
-        this.showSkeleton = true;
-        this.handleGooglePayClick = async () => {
-            var _a;
-            if (this.isProcessing ||
-                this.disabled ||
-                !this.isAvailable ||
-                !this.canMakePayments) {
-                return;
-            }
-            try {
-                this.isProcessing = true;
-                this.error = null;
-                this.googlePayStarted.emit();
-                const paymentDataRequest = this.createPaymentDataRequest();
-                const result = await this.googlePayService.startPaymentSession(paymentDataRequest, checkoutStore.authToken, checkoutStore.accountId);
-                if (result.success) {
-                    this.googlePayCompleted.emit({
-                        success: true,
-                        paymentData: result.paymentData,
-                        paymentMethodId: result.paymentMethodId,
-                    });
-                }
-                else {
-                    this.googlePayCompleted.emit({
-                        success: false,
-                        error: result.error,
-                    });
-                    if (((_a = result.error) === null || _a === void 0 ? void 0 : _a.code) === "USER_CANCELLED") {
-                        this.googlePayCancelled.emit();
-                    }
-                    else {
-                        // Error will be conveyed via googlePayCompleted with success:false
-                    }
-                }
-            }
-            catch (error) {
-                const errorMessage = error instanceof Error ? error.message : "Payment failed";
-                this.error = errorMessage;
-                this.googlePayCompleted.emit({
-                    success: false,
-                    error: errorMessage,
-                });
-            }
-            finally {
-                this.isProcessing = false;
-            }
-        };
-    }
-    watchConfigChange() {
-        this.initializeGooglePay();
-    }
-    componentWillLoad() {
-        this.googlePayService = new GooglePayService();
-    }
-    componentDidLoad() {
-        const unsub = onChange("paymentAmount", () => {
-            this.prefetchPaymentData();
-        });
-        if (typeof unsub === 'function')
-            this.unsubscribes.push(unsub);
-        const unsubCurrency = onChange("paymentCurrency", () => {
-            this.prefetchPaymentData();
-        });
-        if (typeof unsubCurrency === 'function')
-            this.unsubscribes.push(unsubCurrency);
-        const unsubDesc = onChange("paymentDescription", () => {
-            this.prefetchPaymentData();
-        });
-        if (typeof unsubDesc === 'function')
-            this.unsubscribes.push(unsubDesc);
-    }
-    disconnectedCallback() {
-        this.unsubscribes.forEach((fn) => {
-            try {
-                fn();
-            }
-            catch (_a) { }
-        });
-        this.unsubscribes = [];
-    }
-    /**
-     * Returns supported authentication methods when Google Pay is available.
-     */
-    async getSupportedAuthMethods() {
-        if (!this.isAvailable) {
-            return [];
-        }
-        return GooglePayHelpers.getDefaultAuthMethods();
-    }
-    /**
-     * Returns supported card networks when Google Pay is available.
-     */
-    async getSupportedNetworks() {
-        if (!this.isAvailable) {
-            return [];
-        }
-        return GooglePayHelpers.getDefaultSupportedNetworks();
-    }
-    /**
-     * Select Google Pay in the modular checkout parent.
-     */
-    async handleSelectionClick() {
-        checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.GOOGLE_PAY };
-    }
-    /**
-     * Returns whether Google Pay is both available and can make payments.
-     */
-    async isSupported() {
-        return this.isAvailable && this.canMakePayments;
-    }
-    /**
-     * Prefetch payment data for faster load times of the Google Pay sheet.
-     */
-    async prefetchPaymentData() {
-        if (!this.isAvailable || !this.canMakePayments) {
-            return;
-        }
-        const paymentDataRequest = this.createPaymentDataRequest();
-        this.googlePayService.prefetchPaymentData(paymentDataRequest);
-    }
-    async initializeGooglePay() {
-        try {
-            this.isLoading = true;
-            this.error = null;
-            if (!checkoutStore.paymentAmount) {
-                this.error = "Missing required Google Pay configuration";
-                this.isLoading = false;
-                return;
-            }
-            const googlePayConfig = {
-                environment: this.environment,
-                merchantId: this.merchantId,
-                merchantName: this.merchantName,
-                buttonType: this.buttonType,
-                buttonStyle: this.buttonStyle,
-                buttonSizeMode: this.buttonSizeMode,
-            };
-            this.googlePayService.initialize(googlePayConfig);
-            this.isAvailable = this.googlePayService.isAvailable();
-            if (!this.isAvailable) {
-                this.error = "Google Pay is not supported on this device";
-                this.isLoading = false;
-                return;
-            }
-            this.canMakePayments = await this.googlePayService.canMakePayments();
-            if (!this.canMakePayments) {
-                this.error = "Google Pay is not available for payments";
-                this.isLoading = false;
-                return;
-            }
-            const paymentDataRequest = this.createPaymentDataRequest();
-            this.googlePayService.prefetchPaymentData(paymentDataRequest);
-        }
-        catch (error) {
-            this.error =
-                error instanceof Error
-                    ? error.message
-                    : "Failed to initialize Google Pay";
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    createPaymentDataRequest() {
-        return GooglePayService.createPaymentDataRequest(checkoutStore.paymentAmount, checkoutStore.paymentDescription, this.countryCode, checkoutStore.paymentCurrency, this.merchantName);
-    }
-    render() {
-        const showError = !this.isLoading && !!this.error;
-        const showDeviceUnavailable = !this.isLoading && !this.error && !this.isAvailable;
-        const showPaymentsUnavailable = !this.isLoading && !this.error && this.isAvailable && !this.canMakePayments;
-        const showButton = !this.isLoading && !this.error && this.isAvailable && this.canMakePayments;
-        return (h(StyledHost, { key: 'f4cf31bbc6ea32eab1f2b09de9074fa10afce596' }, checkoutStore.checkoutLoaded && (h("script", { key: '2a425b9181cacdcb9dfcfcb42f71ea3c95d8f9c2', async: true, src: 'https://pay.google.com/gp/p/js/pay.js', onLoad: () => {
-                this.initializeGooglePay();
-            } })), h("div", { key: 'c64ef59f1db3ded1ba50088283a893a71125b01d', class: 'google-pay-container' }, h(GooglePaySkeleton, { key: '26ee48338d84dca3f6f96b9eef1efd5044de2717', isLoading: this.isLoading }), showError && (h("div", { key: 'bd9b26a2c42a9a9635c5aec77fee4a8b54a45aad', class: 'google-pay-error', role: 'alert', "data-testid": 'gp-error' }, h("span", { key: '4ccddf69edae7f1f9bf65ad243e01284d39621e1', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '7c6adf975cdfc62126feb784ba07081eef3c8c2a', class: 'error-message' }, this.error))), showDeviceUnavailable && (h("div", { key: 'c5a390895ae1d0490a2666d6632895fbb5b62c47', class: 'google-pay-unavailable', "data-testid": 'gp-device-unavailable' }, h("span", { key: 'cd0e1b12be794f3e4d6a6efda7a94827b602caa6', class: 'unavailable-message' }, "Google Pay is not available on this device"))), showPaymentsUnavailable && (h("div", { key: '4bd15c7b5a140f3632241b669008c789e847b815', class: 'google-pay-unavailable', "data-testid": 'gp-payments-unavailable' }, h("span", { key: 'b87029a460e53cb10dfe8321afae844e93c0b48d', class: 'unavailable-message' }, "Google Pay is not available for payments"))), showButton && (h(GooglePayButton, { key: '84f36f038b1bf8f472f4eccdf519f1cf4fd1ca5a', "data-testid": 'gp-button', buttonType: this.buttonType, buttonStyle: this.buttonStyle, buttonSizeMode: this.buttonSizeMode, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleGooglePayClick }))), h("style", { key: '56cf24d22755a83ea556406cd438a868b61da3f4' }, `
-            .google-pay-container {
-              width: 100%;
-            }
-
-            .google-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;
-            }
-
-            .google-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-google-pay"; }
-    static get encapsulation() { return "shadow"; }
-    static get properties() {
-        return {
-            "buttonSizeMode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "GooglePayButtonSizeMode",
-                    "resolved": "GooglePayButtonSizeMode.FILL | GooglePayButtonSizeMode.STATIC",
-                    "references": {
-                        "GooglePayButtonSizeMode": {
-                            "location": "import",
-                            "path": "../../../api/GooglePay",
-                            "id": "src/api/GooglePay.ts::GooglePayButtonSizeMode"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-size-mode",
-                "defaultValue": "GooglePayButtonSizeMode.FILL"
-            },
-            "buttonStyle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "GooglePayButtonStyle",
-                    "resolved": "GooglePayButtonStyle.BLACK | GooglePayButtonStyle.WHITE",
-                    "references": {
-                        "GooglePayButtonStyle": {
-                            "location": "import",
-                            "path": "../../../api/GooglePay",
-                            "id": "src/api/GooglePay.ts::GooglePayButtonStyle"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-style",
-                "defaultValue": "GooglePayButtonStyle.BLACK"
-            },
-            "buttonType": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "GooglePayButtonType",
-                    "resolved": "GooglePayButtonType.BOOK | GooglePayButtonType.BUY | GooglePayButtonType.CHECKOUT | GooglePayButtonType.DONATE | GooglePayButtonType.ORDER | GooglePayButtonType.PAY | GooglePayButtonType.PLAIN | GooglePayButtonType.SUBSCRIBE",
-                    "references": {
-                        "GooglePayButtonType": {
-                            "location": "import",
-                            "path": "../../../api/GooglePay",
-                            "id": "src/api/GooglePay.ts::GooglePayButtonType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-type",
-                "defaultValue": "GooglePayButtonType.PLAIN"
-            },
-            "countryCode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "country-code",
-                "defaultValue": "\"US\""
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "environment": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "GooglePayEnvironment",
-                    "resolved": "GooglePayEnvironment.PRODUCTION | GooglePayEnvironment.TEST",
-                    "references": {
-                        "GooglePayEnvironment": {
-                            "location": "import",
-                            "path": "../../../api/GooglePay",
-                            "id": "src/api/GooglePay.ts::GooglePayEnvironment"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "environment",
-                "defaultValue": "GooglePayEnvironment.TEST"
-            },
-            "merchantId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "merchant-id",
-                "defaultValue": "\"gateway:justifi\""
-            },
-            "merchantName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "merchant-name",
-                "defaultValue": "\"justifi\""
-            },
-            "showSkeleton": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-skeleton",
-                "defaultValue": "true"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "canMakePayments": {},
-            "error": {},
-            "isAvailable": {},
-            "isLoading": {},
-            "isProcessing": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "googlePayCancelled",
-                "name": "googlePayCancelled",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "googlePayCompleted",
-                "name": "googlePayCompleted",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when Google Pay flow completes. On failure, `success=false` and `error` is populated."
-                },
-                "complexType": {
-                    "original": "{\n    success: boolean;\n    paymentData?: IGooglePayPaymentData;\n    paymentMethodId?: string;\n    error?: IGooglePayError | string;\n  }",
-                    "resolved": "{ success: boolean; paymentData?: IGooglePayPaymentData; paymentMethodId?: string; error?: string | IGooglePayError; }",
-                    "references": {
-                        "IGooglePayPaymentData": {
-                            "location": "import",
-                            "path": "../../../api/GooglePay",
-                            "id": "src/api/GooglePay.ts::IGooglePayPaymentData"
-                        },
-                        "IGooglePayError": {
-                            "location": "import",
-                            "path": "../../../api/GooglePay",
-                            "id": "src/api/GooglePay.ts::IGooglePayError"
-                        }
-                    }
-                }
-            }, {
-                "method": "googlePayStarted",
-                "name": "googlePayStarted",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "getSupportedAuthMethods": {
-                "complexType": {
-                    "signature": "() => Promise<string[]>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string[]>"
-                },
-                "docs": {
-                    "text": "Returns supported authentication methods when Google Pay is available.",
-                    "tags": []
-                }
-            },
-            "getSupportedNetworks": {
-                "complexType": {
-                    "signature": "() => Promise<string[]>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string[]>"
-                },
-                "docs": {
-                    "text": "Returns supported card networks when Google Pay is available.",
-                    "tags": []
-                }
-            },
-            "handleSelectionClick": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Select Google Pay in the modular checkout parent.",
-                    "tags": []
-                }
-            },
-            "isSupported": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Returns whether Google Pay is both available and can make payments.",
-                    "tags": []
-                }
-            },
-            "prefetchPaymentData": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Prefetch payment data for faster load times of the Google Pay sheet.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "merchantId",
-                "methodName": "watchConfigChange"
-            }, {
-                "propName": "environment",
-                "methodName": "watchConfigChange"
-            }];
-    }
-}