@justifi/webcomponents 5.7.6 → 6.0.0-rc.2

package/dist/collection/components/modular-checkout/modular-checkout.js

@@ -0,0 +1,509 @@
+import { h, Host } from "@stencil/core";
+import { checkoutStore, onChange } from "../../store/checkout.store";
+import JustifiAnalytics from "../../api/Analytics";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { ComponentErrorCodes, ComponentErrorMessages, ComponentErrorSeverity, ICheckoutStatus } from "../../api";
+import { makeCheckoutComplete, makeGetCheckout } from "../../actions/checkout/checkout-actions";
+import { CheckoutService } from "../../api/services/checkout.service";
+import { insuranceValues, insuranceValuesOn, hasInsuranceValueChanged } from "../insurance/insurance-state";
+export class ModularCheckout {
+    constructor() {
+        this.savePaymentMethod = false;
+        this.handleApplePayCompleted = (event) => {
+            const { success, token, error } = event.detail;
+            if (success && token) {
+                this.applePayToken = token;
+                // Complete the checkout with Apple Pay token
+                this.submitCheckoutWithApplePay();
+            }
+            else {
+                console.error('Apple Pay completed but failed:', error);
+                this.errorEvent.emit({
+                    message: (error === null || error === void 0 ? void 0 : error.message) || 'Apple Pay payment failed',
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            }
+        };
+        this.handleApplePayError = (event) => {
+            const { error } = event.detail;
+            console.error('Apple Pay error:', error);
+            this.errorEvent.emit({
+                message: error || 'Apple Pay error occurred',
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        };
+        this.handleApplePayCancelled = () => {
+            console.log('Apple Pay cancelled by user');
+            // Reset the token if cancelled
+            this.applePayToken = undefined;
+        };
+    }
+    savePaymentMethodChanged(newValue) {
+        checkoutStore.savePaymentMethod = newValue;
+    }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            this.queryFormRefs();
+            this.setupApplePayListeners(); // set up again listeners when DOM changes
+        });
+        this.observer.observe(this.hostEl, {
+            childList: true,
+            subtree: true
+        });
+        checkoutStore.checkoutId = this.checkoutId;
+        const config = {
+            authToken: this.authToken,
+            checkoutId: this.checkoutId,
+            service: new CheckoutService()
+        };
+        this.getCheckout = makeGetCheckout(config);
+        this.completeCheckout = makeCheckoutComplete(config);
+        onChange('selectedPaymentMethod', (newValue) => {
+            this.paymentMethodChangedEvent.emit(newValue);
+        });
+    }
+    componentWillLoad() {
+        if (!this.authToken || !this.checkoutId) {
+            this.errorEvent.emit({
+                message: ComponentErrorMessages.NOT_AUTHENTICATED,
+                errorCode: ComponentErrorCodes.NOT_AUTHENTICATED,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        this.analytics = new JustifiAnalytics(this);
+        checkPkgVersion();
+        checkoutStore.authToken = this.authToken;
+        checkoutStore.savePaymentMethod = this.savePaymentMethod;
+        this.fetchCheckout();
+        // Refresh the checkout data when insurance values actually change (not on initial load)
+        insuranceValuesOn('set', (key) => {
+            const value = insuranceValues[key];
+            if (value !== undefined && hasInsuranceValueChanged(key, value)) {
+                this.fetchCheckout();
+            }
+        });
+    }
+    componentDidLoad() {
+        this.queryFormRefs();
+        this.setupApplePayListeners();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.removeApplePayListeners();
+    }
+    fetchCheckout() {
+        if (this.getCheckout) {
+            this.getCheckout({
+                onSuccess: ({ checkout }) => {
+                    if (checkout.status === ICheckoutStatus.completed) {
+                        this.errorEvent.emit({
+                            message: ComponentErrorMessages.CHECKOUT_ALREADY_COMPLETED,
+                            errorCode: ComponentErrorCodes.CHECKOUT_ALREADY_COMPLETED,
+                            severity: ComponentErrorSeverity.ERROR,
+                        });
+                        return;
+                    }
+                    else if (checkout.status === ICheckoutStatus.expired) {
+                        this.errorEvent.emit({
+                            message: ComponentErrorMessages.CHECKOUT_EXPIRED,
+                            errorCode: ComponentErrorCodes.CHECKOUT_EXPIRED,
+                            severity: ComponentErrorSeverity.ERROR,
+                        });
+                        return;
+                    }
+                    this.updateStore(checkout);
+                },
+                onError: (error) => {
+                    this.errorEvent.emit({
+                        message: error.message,
+                        errorCode: ComponentErrorCodes.FETCH_ERROR,
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                }
+            });
+        }
+    }
+    updateStore(checkout) {
+        var _a, _b, _c, _d;
+        checkoutStore.accountId = checkout.account_id;
+        checkoutStore.paymentMethods = checkout.payment_methods;
+        checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
+        checkoutStore.paymentDescription = checkout.payment_description;
+        checkoutStore.totalAmount = checkout.total_amount;
+        checkoutStore.paymentAmount = checkout.payment_amount;
+        checkoutStore.bnplEnabled = checkout.payment_settings.bnpl_payments;
+        checkoutStore.bnplProviderClientId = (_a = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _a === void 0 ? void 0 : _a.provider_client_id;
+        checkoutStore.bnplProviderMode = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_mode;
+        checkoutStore.bnplProviderApiVersion = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_api_version;
+        checkoutStore.bnplProviderCheckoutUrl = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_checkout_url;
+    }
+    queryFormRefs() {
+        this.paymentMethodFormRef = this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form');
+        this.billingFormRef = this.hostEl.querySelector('justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full');
+        this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
+        this.sezzlePaymentMethodRef = this.hostEl.querySelector('justifi-sezzle-payment-method');
+        this.applePayRef = this.hostEl.querySelector('justifi-apple-pay');
+    }
+    setupApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.addEventListener('applePayCompleted', this.handleApplePayCompleted);
+            this.applePayRef.addEventListener('applePayError', this.handleApplePayError);
+            this.applePayRef.addEventListener('applePayCancelled', this.handleApplePayCancelled);
+        }
+    }
+    removeApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.removeEventListener('applePayCompleted', this.handleApplePayCompleted);
+            this.applePayRef.removeEventListener('applePayError', this.handleApplePayError);
+            this.applePayRef.removeEventListener('applePayCancelled', this.handleApplePayCancelled);
+        }
+    }
+    async submitCheckoutWithApplePay() {
+        if (!this.applePayToken) {
+            this.errorEvent.emit({
+                message: 'No Apple Pay token available',
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        const payment = {
+            payment_mode: 'apple_pay',
+            payment_token: this.applePayToken,
+        };
+        this.completeCheckout({
+            payment,
+            onSuccess: ({ checkout }) => {
+                this.submitEvent.emit({
+                    checkout,
+                    message: 'Apple Pay checkout completed successfully',
+                });
+            },
+            onError: (error) => {
+                this.errorEvent.emit({
+                    message: error.message,
+                    errorCode: ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            },
+        });
+    }
+    async tokenizePaymentMethod(tokenizeArgs) {
+        var _a, _b, _c;
+        const billingInfoValues = (_b = await ((_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.getValues())) !== null && _b !== void 0 ? _b : {};
+        const combinedBillingInfo = Object.assign(Object.assign({}, tokenizeArgs), billingInfoValues);
+        const paymentMethodMetadata = Object.assign({ accountId: checkoutStore.accountId, payment_method_group_id: undefined }, combinedBillingInfo);
+        if (checkoutStore.savePaymentMethod) {
+            paymentMethodMetadata.payment_method_group_id = checkoutStore.paymentMethodGroupId;
+        }
+        return (_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
+            clientId: this.authToken,
+            paymentMethodMetadata,
+            account: checkoutStore.accountId,
+        });
+    }
+    async getPaymentMethod(submitCheckoutArgs) {
+        // If Apple Pay token is available, return a placeholder since we handle it differently
+        if (this.applePayToken) {
+            return 'apple_pay_token';
+        }
+        // If we have a payment token from the store (set by tokenize-payment-method), use it
+        if (checkoutStore.paymentToken) {
+            return checkoutStore.paymentToken;
+        }
+        // Fallback to the original tokenization logic for backward compatibility
+        if (!this.paymentMethodFormRef) {
+            return checkoutStore.selectedPaymentMethod;
+        }
+        const { error, id: token } = await this.tokenizePaymentMethod(submitCheckoutArgs);
+        if (error) {
+            this.errorEvent.emit({
+                errorCode: error.code,
+                message: error.message,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return undefined;
+        }
+        return token;
+    }
+    async validate() {
+        var _a, _b;
+        // If Apple Pay token is available, validation is already complete
+        if (this.applePayToken) {
+            return true;
+        }
+        const promises = [
+            (_a = this.paymentMethodFormRef) === null || _a === void 0 ? void 0 : _a.validate(),
+            (_b = this.billingFormRef) === null || _b === void 0 ? void 0 : _b.validate()
+        ];
+        if (this.insuranceFormRef) {
+            promises.push(this.insuranceFormRef.validate());
+        }
+        const validationResults = await Promise.all(promises);
+        return validationResults.every(result => (result === null || result === void 0 ? void 0 : result.isValid) !== false);
+    }
+    async submitCheckout(submitCheckoutArgs) {
+        var _a;
+        // If Apple Pay token is available, use Apple Pay flow
+        if (this.applePayToken) {
+            await this.submitCheckoutWithApplePay();
+            return;
+        }
+        const isValid = await this.validate();
+        if (!isValid) {
+            this.errorEvent.emit({
+                message: 'Please fill in all required fields.',
+                errorCode: ComponentErrorCodes.VALIDATION_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        let payment;
+        if (checkoutStore.selectedPaymentMethod === 'sezzle') {
+            const insuranceValidation = this.insuranceFormRef ? await this.insuranceFormRef.validate() : { isValid: true };
+            const sezzleResult = await this.sezzlePaymentMethodRef.resolvePaymentMethod(insuranceValidation);
+            if (sezzleResult.error) {
+                this.errorEvent.emit({
+                    message: sezzleResult.error.message,
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+            else if (((_a = sezzleResult.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
+                payment = {
+                    payment_mode: 'bnpl',
+                    payment_token: undefined,
+                };
+            }
+        }
+        else {
+            const paymentMethod = await this.getPaymentMethod(submitCheckoutArgs);
+            if (!paymentMethod) {
+                this.errorEvent.emit({
+                    message: 'Payment method tokenization failed.',
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+            ;
+            payment = {
+                payment_mode: 'ecom',
+                payment_token: paymentMethod,
+            };
+        }
+        this.completeCheckout({
+            payment,
+            onSuccess: ({ checkout }) => {
+                this.submitEvent.emit({
+                    checkout,
+                    message: 'Checkout completed successfully',
+                });
+            },
+            onError: (error) => {
+                this.errorEvent.emit({
+                    message: error.message,
+                    errorCode: ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            },
+        });
+    }
+    async setSelectedPaymentMethod(paymentMethodId) {
+        checkoutStore.selectedPaymentMethod = paymentMethodId;
+    }
+    render() {
+        return (h(Host, { key: '1b0c613494dde43962dc963618d5a81c4423b218' }));
+    }
+    static get is() { return "justifi-modular-checkout"; }
+    static get properties() {
+        return {
+            "authToken": {
+                "type": "string",
+                "attribute": "auth-token",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "checkoutId": {
+                "type": "string",
+                "attribute": "checkout-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "savePaymentMethod": {
+                "type": "boolean",
+                "attribute": "save-payment-method",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "submitEvent",
+                "name": "submit-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "paymentMethodChangedEvent",
+                "name": "payment-method-changed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "submitCheckout": {
+                "complexType": {
+                    "signature": "(submitCheckoutArgs?: BillingFormFields) => Promise<void>",
+                    "parameters": [{
+                            "name": "submitCheckoutArgs",
+                            "type": "BillingFormFields",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setSelectedPaymentMethod": {
+                "complexType": {
+                    "signature": "(paymentMethodId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "paymentMethodId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "savePaymentMethod",
+                "methodName": "savePaymentMethodChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+import { Skeleton } from "../../../ui-components";
+const ApplePaySkeleton = (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-center' }, h(Skeleton, { height: '44px', width: '100%', styles: { borderRadius: "8px" } })))));
+};
+export default ApplePaySkeleton;