@justifi/webcomponents 6.0.0-rc.1 → 6.0.0-rc.10

package/dist/module/modular-checkout.js

@@ -1,14 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as checkoutStore, o as onChange } from './checkout.store.js';
+import { c as checkoutStore, o as onAnyChange, g as getAvailablePaymentMethodTypes } from './checkout.store.js';
 import { J as JustifiAnalytics, c as checkPkgVersion } from './Analytics.js';
 import './config-state.js';
 import './dinero.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes, d as ComponentErrorMessages, I as ICheckoutStatus } from './Refund.js';
+import { C as ComponentErrorSeverity, P as PaymentMethodTypes, a as ComponentErrorCodes, d as ComponentErrorMessages, I as ICheckoutStatus } from './Refund.js';
 import './Pagination.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { C as CheckoutService } from './checkout.service.js';
 import { i as insuranceValuesOn, h as hasInsuranceValueChanged, a as insuranceValues } from './insurance-state.js';
+import { b as PAYMENT_MODE } from './ModularCheckout.js';
 
 const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
     var _a;
@@ -71,8 +72,37 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         this.__registerHost();
         this.errorEvent = createEvent(this, "error-event", 7);
         this.submitEvent = createEvent(this, "submit-event", 7);
-        this.paymentMethodChangedEvent = createEvent(this, "payment-method-changed", 7);
+        this.checkoutChangedEvent = createEvent(this, "checkout-changed", 7);
         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;
@@ -80,39 +110,33 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
     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
+            subtree: true,
         });
         checkoutStore.checkoutId = this.checkoutId;
         const config = {
             authToken: this.authToken,
             checkoutId: this.checkoutId,
-            service: new CheckoutService()
+            service: new CheckoutService(),
         };
         this.getCheckout = makeGetCheckout(config);
         this.completeCheckout = makeCheckoutComplete(config);
-        onChange('selectedPaymentMethod', (newValue) => {
-            this.paymentMethodChangedEvent.emit(newValue);
+        // Emit checkout-changed whenever any store key changes
+        onAnyChange(() => {
+            this.emitCheckoutChanged();
         });
     }
     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) => {
+        insuranceValuesOn("set", (key) => {
             const value = insuranceValues[key];
             if (value !== undefined && hasInsuranceValueChanged(key, value)) {
                 this.fetchCheckout();
@@ -121,15 +145,26 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
     }
     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,
@@ -146,7 +181,6 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
                         });
                         return;
                     }
-                    this.updateStore(checkout);
                 },
                 onError: (error) => {
                     this.errorEvent.emit({
@@ -154,12 +188,12 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
                         errorCode: ComponentErrorCodes.FETCH_ERROR,
                         severity: ComponentErrorSeverity.ERROR,
                     });
-                }
+                },
             });
         }
     }
     updateStore(checkout) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         checkoutStore.accountId = checkout.account_id;
         checkoutStore.paymentMethods = checkout.payment_methods;
         checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
@@ -167,118 +201,165 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         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;
+        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.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.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');
-        this.sezzlePaymentMethodRef = this.hostEl.querySelector('justifi-sezzle-payment-method');
+    }
+    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 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;
+            paymentMethodMetadata.payment_method_group_id =
+                checkoutStore.paymentMethodGroupId;
         }
-        return (_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
+        const tokenizeResult = await ((_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
             clientId: this.authToken,
             paymentMethodMetadata,
             account: checkoutStore.accountId,
-        });
-    }
-    async getPaymentMethod(submitCheckoutArgs) {
-        // 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;
+        }));
+        if (tokenizeResult.error) {
+            return tokenizeResult;
         }
-        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;
+        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() {
-        var _a, _b;
-        console.log('billing information form', this.billingFormRef);
-        console.log('payment method form', this.paymentMethodFormRef);
-        console.log('insurance form', this.insuranceFormRef);
-        console.log('sezzle payment method', this.sezzlePaymentMethodRef);
-        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) {
+        const promises = [];
+        if (checkoutStore.insuranceEnabled && 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;
-        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;
+        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());
         }
-        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) {
+        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: sezzleResult.error.message,
-                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    message: 'Validation error',
+                    errorCode: ComponentErrorCodes.VALIDATION_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,
-                };
+                return false;
             }
+            return true;
         }
-        else {
-            const paymentMethod = await this.getPaymentMethod(submitCheckoutArgs);
-            if (!paymentMethod) {
+        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: 'Payment method tokenization failed.',
+                    message: tokenizeResult.error.message,
                     errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                     severity: ComponentErrorSeverity.ERROR,
                 });
                 return;
             }
-            payment = {
-                payment_mode: 'ecom',
-                payment_token: paymentMethod,
-            };
         }
+        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',
+                    message: "Checkout completed successfully",
                 });
             },
             onError: (error) => {
@@ -290,11 +371,8 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
             },
         });
     }
-    async setSelectedPaymentMethod(paymentMethodId) {
-        checkoutStore.selectedPaymentMethod = paymentMethodId;
-    }
     render() {
-        return (h(Host, { key: 'd454d321b1a7a6e3b4097c94fbb05e02ce3e36a9' }));
+        return h(Host, { key: '4df5d1aa50fbeee7da93f8e19e45f6907b6ae2c7' });
     }
     get hostEl() { return this; }
     static get watchers() { return {
@@ -304,9 +382,9 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         "authToken": [1, "auth-token"],
         "checkoutId": [1, "checkout-id"],
         "savePaymentMethod": [4, "save-payment-method"],
+        "setSelectedPaymentMethod": [64],
         "validate": [64],
-        "submitCheckout": [64],
-        "setSelectedPaymentMethod": [64]
+        "submitCheckout": [64]
     }, undefined, {
         "savePaymentMethod": ["savePaymentMethodChanged"]
     }]);

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "6.0.0-rc.1";
+const version = "6.0.0-rc.10";
 var webcomponentsPackageJson = {
 	name: name,
 	version: version};