@justifi/webcomponents 5.7.7 → 6.0.0-rc.10

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

@@ -0,0 +1,525 @@
+import { h, Host, } from "@stencil/core";
+import { checkoutStore, onAnyChange, getAvailablePaymentMethodTypes } from "../../store/checkout.store";
+import JustifiAnalytics from "../../api/Analytics";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { ComponentErrorCodes, ComponentErrorMessages, ComponentErrorSeverity, ICheckoutStatus, PaymentMethodTypes, } 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";
+import { PAYMENT_MODE } from "./ModularCheckout";
+export class ModularCheckout {
+    constructor() {
+        this.savePaymentMethod = false;
+        this.handleApplePayCompleted = (event) => {
+            const { success, token, paymentMethodId, error } = event.detail;
+            if (success && token) {
+                checkoutStore.paymentToken = paymentMethodId;
+                checkoutStore.selectedPaymentMethod = { type: PaymentMethodTypes.applePay };
+                this.submitCheckout();
+            }
+            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 = () => {
+            checkoutStore.paymentToken = undefined;
+            checkoutStore.selectedPaymentMethod = 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);
+        // Emit checkout-changed whenever any store key changes
+        onAnyChange(() => {
+            this.emitCheckoutChanged();
+        });
+    }
+    componentWillLoad() {
+        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.authToken || !this.checkoutId) {
+            this.errorEvent.emit({
+                message: ComponentErrorMessages.NOT_AUTHENTICATED,
+                errorCode: ComponentErrorCodes.NOT_AUTHENTICATED,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        if (this.getCheckout) {
+            this.getCheckout({
+                onSuccess: ({ checkout }) => {
+                    this.updateStore(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;
+                    }
+                },
+                onError: (error) => {
+                    this.errorEvent.emit({
+                        message: error.message,
+                        errorCode: ComponentErrorCodes.FETCH_ERROR,
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                },
+            });
+        }
+    }
+    updateStore(checkout) {
+        var _a, _b, _c, _d, _e;
+        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.insuranceEnabled = checkout.payment_settings.insurance_payments;
+        checkoutStore.bankAccountVerification = (_a = checkout.payment_settings) === null || _a === void 0 ? void 0 : _a.bank_account_verification;
+        checkoutStore.bnplProviderClientId = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_client_id;
+        checkoutStore.bnplProviderMode = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_mode;
+        checkoutStore.bnplProviderApiVersion = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_api_version;
+        checkoutStore.bnplProviderCheckoutUrl =
+            (_e = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _e === void 0 ? void 0 : _e.provider_checkout_url;
+    }
+    emitCheckoutChanged() {
+        const detail = {
+            availablePaymentMethodTypes: getAvailablePaymentMethodTypes(),
+            selectedPaymentMethod: checkoutStore.selectedPaymentMethod,
+            savedPaymentMethods: checkoutStore.paymentMethods,
+        };
+        this.checkoutChangedEvent.emit(detail);
+    }
+    queryFormRefs() {
+        this.billingFormRef = this.hostEl.querySelector("justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full");
+        this.applePayRef = this.hostEl.querySelector("justifi-apple-pay");
+        this.paymentMethodFormRef =
+            this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form, justifi-tokenize-payment-method');
+        this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
+    }
+    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 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;
+        }
+        const tokenizeResult = await ((_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
+            clientId: this.authToken,
+            paymentMethodMetadata,
+            account: checkoutStore.accountId,
+        }));
+        if (tokenizeResult.error) {
+            return tokenizeResult;
+        }
+        checkoutStore.paymentToken = tokenizeResult.id;
+        return tokenizeResult.id;
+    }
+    // set the selected payment method to the checkout store from outside the component
+    async setSelectedPaymentMethod(paymentMethod) {
+        checkoutStore.selectedPaymentMethod = paymentMethod;
+    }
+    // getAvailablePaymentMethods removed in favor of checkout-changed event
+    // if validation fails, the error will be emitted by the component
+    async validate() {
+        const promises = [];
+        if (checkoutStore.insuranceEnabled && this.insuranceFormRef) {
+            promises.push(this.insuranceFormRef.validate());
+        }
+        const isNewCard = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.card && checkoutStore.selectedPaymentMethod.id === undefined;
+        const isNewBankAccount = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.bankAccount && checkoutStore.selectedPaymentMethod.id === undefined;
+        // For new card/bank account, validate payment method + billing.
+        if (isNewCard ||
+            isNewBankAccount) {
+            if (this.paymentMethodFormRef)
+                promises.push(this.paymentMethodFormRef.validate());
+            if (this.billingFormRef)
+                promises.push(this.billingFormRef.validate());
+        }
+        if (promises.length === 0)
+            return true;
+        try {
+            const results = await Promise.all(promises);
+            // Normalize different validator return shapes:
+            // - boolean -> use it directly
+            // - object  -> look for isValid; treat missing isValid as falsey only if explicitly false
+            const resultsAreValid = results.every(r => typeof r === 'boolean' ? r : (r === null || r === void 0 ? void 0 : r.isValid) !== false);
+            if (!resultsAreValid) {
+                this.errorEvent.emit({
+                    message: 'Validation error',
+                    errorCode: ComponentErrorCodes.VALIDATION_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return false;
+            }
+            return true;
+        }
+        catch (_a) {
+            // If any validator throws/rejects, consider the whole validation failed.
+            return false;
+        }
+    }
+    async submitCheckout(submitCheckoutArgs) {
+        const isValid = await this.validate();
+        const isNewCard = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.card &&
+            checkoutStore.selectedPaymentMethod.id === undefined;
+        const isNewBankAccount = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.bankAccount &&
+            checkoutStore.selectedPaymentMethod.id === undefined;
+        const shouldTokenize = isNewCard || isNewBankAccount;
+        if (shouldTokenize) {
+            const tokenizeResult = await this.tokenizePaymentMethod(submitCheckoutArgs);
+            if (tokenizeResult === null || tokenizeResult === void 0 ? void 0 : tokenizeResult.error) {
+                this.errorEvent.emit({
+                    message: tokenizeResult.error.message,
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+        }
+        if (!isValid) {
+            this.errorEvent.emit({
+                message: "Please fill in all required fields.",
+                errorCode: ComponentErrorCodes.VALIDATION_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        if (!checkoutStore.paymentToken) {
+            this.errorEvent.emit({
+                message: 'Payment token not found.',
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+        let payment;
+        const mapTypeToPaymentMode = (type) => {
+            switch (type) {
+                case PaymentMethodTypes.card:
+                case PaymentMethodTypes.bankAccount:
+                case PaymentMethodTypes.plaid:
+                    return PAYMENT_MODE.ECOM;
+                case PaymentMethodTypes.sezzle:
+                    return PAYMENT_MODE.BNPL;
+                case PaymentMethodTypes.applePay:
+                    return PAYMENT_MODE.APPLE_PAY;
+                default:
+                    return undefined;
+            }
+        };
+        payment = {
+            payment_mode: mapTypeToPaymentMode(checkoutStore.selectedPaymentMethod.type),
+            payment_token: checkoutStore.paymentToken,
+        };
+        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,
+                });
+            },
+        });
+    }
+    render() {
+        return h(Host, { key: '4df5d1aa50fbeee7da93f8e19e45f6907b6ae2c7' });
+    }
+    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": "checkoutChangedEvent",
+                "name": "checkout-changed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "CheckoutChangedEventDetail",
+                    "resolved": "CheckoutChangedEventDetail",
+                    "references": {
+                        "CheckoutChangedEventDetail": {
+                            "location": "import",
+                            "path": "./ModularCheckout",
+                            "id": "src/components/modular-checkout/ModularCheckout.ts::CheckoutChangedEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setSelectedPaymentMethod": {
+                "complexType": {
+                    "signature": "(paymentMethod: ICheckoutPaymentMethod | { type: PaymentMethodTypes; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "paymentMethod",
+                            "type": "ICheckoutPaymentMethod | { type: PaymentMethodTypes; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ICheckoutPaymentMethod": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ICheckoutPaymentMethod"
+                        },
+                        "PaymentMethodTypes": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::PaymentMethodTypes"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ICheckoutPaymentMethod": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ICheckoutPaymentMethod"
+                        }
+                    },
+                    "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"
+                        },
+                        "ICheckoutPaymentMethod": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ICheckoutPaymentMethod"
+                        }
+                    },
+                    "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;