@justifi/webcomponents 6.0.0-rc.8 → 6.0.0

package/dist/collection/api/services/apple-pay.service.js

@@ -1,5 +1,14 @@
 import { Api } from "../Api";
 import { ApplePaySessionStatus, ApplePayHelpers, ApplePayConfig, ApplePayPaymentRequest, } from "../ApplePay";
+// Centralized error codes for Apple Pay service
+export var ApplePayServiceErrorCode;
+(function (ApplePayServiceErrorCode) {
+    ApplePayServiceErrorCode["UNAVAILABLE"] = "UNAVAILABLE";
+    ApplePayServiceErrorCode["SESSION_ERROR"] = "SESSION_ERROR";
+    ApplePayServiceErrorCode["MERCHANT_VALIDATION_ERROR"] = "MERCHANT_VALIDATION_ERROR";
+    ApplePayServiceErrorCode["PAYMENT_PROCESSING_ERROR"] = "PAYMENT_PROCESSING_ERROR";
+    ApplePayServiceErrorCode["USER_CANCELLED"] = "USER_CANCELLED";
+})(ApplePayServiceErrorCode || (ApplePayServiceErrorCode = {}));
 export class ApplePayService {
     constructor() {
         this.api = Api();
@@ -70,28 +79,70 @@ export class ApplePayService {
      * Start Apple Pay session
      */
     async startPaymentSession(paymentRequest, authToken, accountId) {
+        // Begin verbose diagnostics for easier debugging in the field
+        console.groupCollapsed('[ApplePayService] startPaymentSession called');
+        console.log('[ApplePayService] raw paymentRequest:', JSON.stringify(paymentRequest, null, 2));
+        console.log('[ApplePayService] has authToken:', Boolean(authToken));
+        console.log('[ApplePayService] accountId:', accountId);
+        console.log('[ApplePayService] has config:', Boolean(this.applePayConfig));
         if (!this.applePayConfig) {
+            console.error('[ApplePayService] Missing applePayConfig. Did you call initialize()?');
+            console.groupEnd();
             throw new Error('Apple Pay not initialized. Call initialize() first.');
         }
         // if (!this.isAvailable()) {
         //   throw new Error('Apple Pay is not available on this device/browser');
         // }
         const request = new ApplePayPaymentRequest(paymentRequest);
+        console.log('[ApplePayService] created ApplePayPaymentRequest:', request);
         if (!request.isValid) {
+            const missingFields = [];
+            if (!request.countryCode)
+                missingFields.push('countryCode');
+            if (!request.currencyCode)
+                missingFields.push('currencyCode');
+            if (!request.merchantCapabilities ||
+                request.merchantCapabilities.length === 0)
+                missingFields.push('merchantCapabilities');
+            if (!request.supportedNetworks || request.supportedNetworks.length === 0)
+                missingFields.push('supportedNetworks');
+            if (!request.total || !request.total.label || !request.total.amount)
+                missingFields.push('total');
+            console.error('[ApplePayService] Payment request is invalid. Missing/invalid:', missingFields);
+            console.groupEnd();
             throw new Error('Invalid payment request provided');
         }
         this.currentPaymentRequest = request;
         return new Promise((resolve, reject) => {
             try {
+                console.log('[ApplePayService] About to instantiate ApplePaySession');
+                // Defensive checks for Apple Pay environment
+                if (typeof window === 'undefined' || !('ApplePaySession' in window)) {
+                    console.error('[ApplePayService] ApplePaySession not available on window');
+                    console.groupEnd();
+                    return reject({
+                        success: false,
+                        error: {
+                            code: ApplePayServiceErrorCode.APPLE_PAY_UNAVAILABLE,
+                            message: 'ApplePaySession API is not available in this environment',
+                        },
+                    });
+                }
                 this.currentSession = new window.ApplePaySession(3, request);
+                console.log('[ApplePayService] ApplePaySession instantiated:', this.currentSession);
                 this.setupSessionEventHandlers(resolve, reject, authToken, accountId);
+                console.log('[ApplePayService] Event handlers set. Beginning session...');
                 this.currentSession.begin();
+                console.log('[ApplePayService] Session.begin() called');
+                console.groupEnd();
             }
             catch (error) {
+                console.error('[ApplePayService] Exception while starting session:', error);
+                console.groupEnd();
                 reject({
                     success: false,
                     error: {
-                        code: 'SESSION_ERROR',
+                        code: ApplePayServiceErrorCode.SESSION_ERROR,
                         message: error instanceof Error
                             ? error.message
                             : 'Failed to start Apple Pay session',
@@ -117,16 +168,26 @@ export class ApplePayService {
         if (!this.currentSession ||
             !this.applePayConfig ||
             !this.currentPaymentRequest) {
+            console.error('[ApplePayService] setupSessionEventHandlers called without required state', {
+                hasSession: Boolean(this.currentSession),
+                hasConfig: Boolean(this.applePayConfig),
+                hasPaymentRequest: Boolean(this.currentPaymentRequest),
+            });
             return;
         }
         this.currentSession.onvalidatemerchant = async () => {
+            console.groupCollapsed('[ApplePayService] onvalidatemerchant');
             try {
+                console.log('[ApplePayService] accountId:', accountId);
                 if (!authToken) {
+                    console.error('[ApplePayService] Missing authToken for merchant validation');
                     throw new Error('Authentication token not provided.');
                 }
                 const merchantSession = await this.validateMerchant(authToken, accountId);
+                console.log('[ApplePayService] merchantSession received');
                 try {
                     this.currentSession.completeMerchantValidation(merchantSession);
+                    console.log('[ApplePayService] completeMerchantValidation called');
                 }
                 catch (completionError) {
                     console.error('Error calling completeMerchantValidation:', completionError);
@@ -136,32 +197,44 @@ export class ApplePayService {
             catch (error) {
                 console.error('=== MERCHANT VALIDATION ERROR ===');
                 console.error('Error during merchant validation:', error);
-                console.error('Error stack:', error.stack);
+                if (error && error.stack) {
+                    console.error('Error stack:', error.stack);
+                }
                 this.currentSession.abort();
                 reject({
                     success: false,
                     error: {
-                        code: 'MERCHANT_VALIDATION_ERROR',
+                        code: ApplePayServiceErrorCode.MERCHANT_VALIDATION_ERROR,
                         message: error instanceof Error
                             ? error.message
                             : 'Merchant validation failed',
                     },
                 });
             }
+            console.groupEnd();
         };
         this.currentSession.onpaymentauthorized = async (event) => {
+            var _a;
+            console.groupCollapsed('[ApplePayService] onpaymentauthorized');
             try {
                 const payment = event.payment;
+                console.log('[ApplePayService] payment payload snapshot:', {
+                    hasToken: Boolean(payment === null || payment === void 0 ? void 0 : payment.token),
+                    tokenType: ((_a = payment === null || payment === void 0 ? void 0 : payment.token) === null || _a === void 0 ? void 0 : _a.paymentData) ? 'paymentData' : 'raw',
+                });
                 const paymentPayload = Object.assign(Object.assign({}, payment.token), { product_details: {
                         name: this.currentPaymentRequest.total.label,
                         price: ApplePayHelpers.parseAmount(this.currentPaymentRequest.total.amount),
                         description: this.currentPaymentRequest.total.label,
                     } });
+                console.log('[ApplePayService] paymentPayload prepared');
                 const paymentResult = await this.processPayment(authToken, accountId, paymentPayload);
+                console.log('[ApplePayService] processPayment result:', paymentResult);
                 if (paymentResult.success) {
                     this.currentSession.completePayment({
                         status: ApplePaySessionStatus.STATUS_SUCCESS,
                     });
+                    console.log('[ApplePayService] Payment success; resolving');
                     resolve({
                         success: true,
                         token: payment.token,
@@ -176,7 +249,7 @@ export class ApplePayService {
                     reject({
                         success: false,
                         error: {
-                            code: 'PAYMENT_PROCESSING_ERROR',
+                            code: ApplePayServiceErrorCode.PAYMENT_PROCESSING_ERROR,
                             message: 'Payment processing failed',
                         },
                     });
@@ -185,14 +258,16 @@ export class ApplePayService {
             catch (error) {
                 console.error('=== PAYMENT PROCESSING ERROR ===');
                 console.error('Error processing payment:', error);
-                console.error('Error stack:', error.stack);
+                if (error && error.stack) {
+                    console.error('Error stack:', error.stack);
+                }
                 this.currentSession.completePayment({
                     status: ApplePaySessionStatus.STATUS_FAILURE,
                 });
                 reject({
                     success: false,
                     error: {
-                        code: 'PAYMENT_PROCESSING_ERROR',
+                        code: ApplePayServiceErrorCode.PAYMENT_PROCESSING_ERROR,
                         message: error instanceof Error
                             ? error.message
                             : 'Payment processing failed',
@@ -200,31 +275,40 @@ export class ApplePayService {
                 });
             }
             finally {
+                console.log('[ApplePayService] Cleaning up session state');
                 this.currentSession = undefined;
                 this.currentPaymentRequest = undefined;
             }
+            console.groupEnd();
         };
         this.currentSession.onpaymentmethodselected = () => {
+            console.groupCollapsed('[ApplePayService] onpaymentmethodselected');
             const paymentUpdate = {
                 newTotal: this.currentPaymentRequest.total,
                 newLineItems: this.currentPaymentRequest.lineItems || [],
             };
             try {
                 this.currentSession.completePaymentMethodSelection(paymentUpdate);
+                console.log('[ApplePayService] completePaymentMethodSelection called');
             }
             catch (error) {
                 console.error('Error completing payment method selection:', error);
                 this.currentSession.abort();
             }
+            console.groupEnd();
         };
         this.currentSession.onshippingmethodselected = () => {
+            console.groupCollapsed('[ApplePayService] onshippingmethodselected');
             this.currentSession.completeShippingMethodSelection({
                 status: ApplePaySessionStatus.STATUS_SUCCESS,
                 newTotal: this.currentPaymentRequest.total,
                 newLineItems: this.currentPaymentRequest.lineItems || [],
             });
+            console.log('[ApplePayService] completeShippingMethodSelection called');
+            console.groupEnd();
         };
         this.currentSession.oncancel = (event) => {
+            console.groupCollapsed('[ApplePayService] oncancel');
             if (event.sessionError) {
                 console.error(event.sessionError);
                 switch (event.sessionError.code) {
@@ -251,13 +335,15 @@ export class ApplePayService {
             reject({
                 success: false,
                 error: {
-                    code: 'USER_CANCELLED',
+                    code: ApplePayServiceErrorCode.USER_CANCELLED,
                     message: 'User cancelled the Apple Pay session',
                 },
             });
+            console.groupEnd();
         };
         if ('onerror' in this.currentSession) {
             this.currentSession.onerror = (error) => {
+                console.groupCollapsed('[ApplePayService] onerror');
                 console.error('=== APPLE PAY SESSION ERROR ===');
                 console.error('Session error:', error);
                 this.currentSession = undefined;
@@ -265,10 +351,11 @@ export class ApplePayService {
                 reject({
                     success: false,
                     error: {
-                        code: 'SESSION_ERROR',
+                        code: ApplePayServiceErrorCode.SESSION_ERROR,
                         message: 'Apple Pay session error occurred',
                     },
                 });
+                console.groupEnd();
             };
         }
     }

package/dist/collection/collection-manifest.json

@@ -50,6 +50,7 @@
     "components/modular-checkout/sub-components/card-billing-form-simple.js",
     "components/modular-checkout/sub-components/bank-account-billing-form-simple.js",
     "components/checkout/card-form/card-form.js",
+    "ui-components/form/form-control-checkbox.js",
     "components/checkouts-list/checkouts-list-core.js",
     "components/checkouts-list/checkouts-list-filters.js",
     "components/checkouts-list/checkouts-list.js",
@@ -105,7 +106,6 @@
     "components/terminals-list/terminals-list.js",
     "components/tokenize-payment-method/tokenize-payment-method.js",
     "ui-components/custom-popper/custom-popper.js",
-    "ui-components/form/form-control-checkbox.js",
     "ui-components/form/form-control-file-v2.js",
     "ui-components/form/form-control-file.js",
     "ui-components/form/form-control-monetary.js",
@@ -125,7 +125,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.36.3",
+    "version": "4.37.0",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/checkout/bank-account-form/bank-account-form.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import BankAccountFormSkeleton from "./bank-account-form-skeleton";
 import { configState, waitForConfig } from "../../config-provider/config-state";
+import { generateTabId } from "../../../utils/utils";
 export class BankAccountForm {
     constructor() {
         this.isReady = false;
@@ -8,6 +9,7 @@ export class BankAccountForm {
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
+        this.tabId = generateTabId();
     }
     componentDidRender() {
         const elements = [
@@ -31,16 +33,17 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'b6cdf5a9320d92a5390daaa0a5218274f2dfc178' }, h(BankAccountFormSkeleton, { key: '286fcc38a26820d166ced0bc886143ed3d880da4', isReady: this.isReady }), h("div", { key: '041fcacff70d7cdfc0c8f41258bd9db18703e4c1', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '7ee7c6e3c26ab1a90bdbf7215fe13f65aade1025' }, h(BankAccountFormSkeleton, { key: 'e4afc94a21b041972d031cfce88a102f763932d1', isReady: this.isReady }), h("div", { key: '8980e0dc0048dbd9cd93a4f93fab8c4cbfeef611', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '94dc0eb0d79b40ade96e1961611e3e7a8eef20ea', class: "row mb-3" }, h("iframe-input", { key: '41c82b772e7873a45409e35ed56dfea16c20c2ee', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '1c95618a50e2d36a3a9a3a7b691ae0dfa6a09936', class: "row" }, h("iframe-input", { key: '28a4dde70c8f55b4f6bf6ce2d3beee6acbebbc0b', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: 'd04bb6b18498de9646ba6e2ee32f223774a72cc7', class: "row mb-3" }, h("iframe-input", { key: '7eb29da8beff34cbe5d2b7c151fec433d17f8555', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: 'c6345cddc37cbe5627ca4581fb98be55b85550a6', class: "row" }, h("iframe-input", { key: '0bf71a22e9126e04f15f213d84953ccfd3388ef0', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {
         return {
             "isReady": {},
-            "iframeOrigin": {}
+            "iframeOrigin": {},
+            "tabId": {}
         };
     }
     static get methods() {

package/dist/collection/components/checkout/card-form/card-form.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import CardFormSkeleton from "./card-form-skeleton";
 import { configState, waitForConfig } from "../../config-provider/config-state";
+import { generateTabId } from "../../../utils/utils";
 export class CardForm {
     constructor() {
         this.isReady = false;
@@ -8,6 +9,7 @@ export class CardForm {
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
+        this.tabId = generateTabId();
     }
     componentDidRender() {
         const elements = [
@@ -35,16 +37,17 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'd5e5c74e5e3be0bb5a9603a89724d23cc6216d6c' }, h(CardFormSkeleton, { key: 'a1e90d74ca6e72678255590a94937932a9520046', isReady: this.isReady }), h("div", { key: 'bb303552ed581492de8ebb0d83cea751ddd90a09', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '8a6454e0a16e0a26762627f7a42527ab243c1c7a' }, h(CardFormSkeleton, { key: 'ed7386f746518e1ebb62d1bf9bc2e98778d9804e', isReady: this.isReady }), h("div", { key: 'f3092bcce1626f04a079ebcf64f0cdf06a7029a8', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '9641c97124a504729b1eba3e8704d8fd3fda7fde', class: "mb-3" }, h("iframe-input", { key: 'a5a73c00c2ac0cd12ef98b155a40108248529fb7', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'dad1b83f028745aa8b85a8e552f702d5daa3ac6f', class: "d-flex align-items-start" }, h("div", { key: '5de05029d93a81d5ad8c799135863e8cdd1e8619', class: "flex-fill me-3" }, h("iframe-input", { key: '4ec81652e51187bbaa25600299f8cb89f0c41c5c', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '0280f01efdbbfa3542036fa4ee7baec130e42688', class: "flex-fill me-3" }, h("iframe-input", { key: 'b13dba61a6bd18529e70987029592b5b7307e74b', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'edf1e383a148a2d535c4733a2b5af2d8e31e2f43', class: "flex-fill" }, h("iframe-input", { key: 'd63e832db1a089f36909db23cacb110f6571535c', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: '3e211e500bef824aff5b6bf6cdedc99435cacfd4', class: "mb-3" }, h("iframe-input", { key: '6ad14a317fd6cad6d6535ba661684e31c325c5ab', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '931e9f1b047ff57c2b37bb2947e29f6708f239d9', class: "d-flex align-items-start" }, h("div", { key: '5ca19fbf9047bd6595557890b0bdbbf0d2e65de9', class: "flex-fill me-3" }, h("iframe-input", { key: 'c99f426b77308b15fcb174e8adbe8c120abc58b5', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '677b8fb8f33a021afda90a8b4e13b5f44b5fe694', class: "flex-fill me-3" }, h("iframe-input", { key: '9bcf91464c5f2ca77b339f2fe299db6027aa9f8b', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '9b5c52d9cc5b30eedf522801c3f8f6c0530757ce', class: "flex-fill" }, h("iframe-input", { key: '3e73df1c7119193a239fcd2f5212967e109cff83', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
     static get is() { return "card-form"; }
     static get states() {
         return {
             "isReady": {},
-            "iframeOrigin": {}
+            "iframeOrigin": {},
+            "tabId": {}
         };
     }
     static get methods() {

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

@@ -4,8 +4,10 @@ import { checkPkgVersion } from "../../utils/check-pkg-version";
 import { checkoutStore } from "../../store/checkout.store";
 import { checkoutSummary } from "../../styles/parts";
 import { StyledHost } from "../../ui-components";
+import { PAYMENT_METHODS } from "../modular-checkout/ModularCheckout";
 export class Checkout {
     constructor() {
+        this.availablePaymentMethods = [];
         this.errorMessage = '';
         this.insuranceToggled = false;
         this.isSubmitting = false; // This is used to prevent multiple submissions and is different from loading state
@@ -38,6 +40,9 @@ export class Checkout {
     checkoutError(_event) {
         this.isSubmitting = false;
     }
+    checkoutChanged(event) {
+        this.availablePaymentMethods = event.detail.availablePaymentMethodTypes;
+    }
     async fillBillingForm(fields) {
         var _a;
         checkoutStore.billingFormFields = fields;
@@ -65,7 +70,10 @@ export class Checkout {
         return !this.disableCreditCard && !this.disableBankAccount;
     }
     render() {
-        return (h(StyledHost, { key: '9f4a7eca05e031eca99c30bfedd3073855c73529' }, h("justifi-modular-checkout", { key: 'bd15f818c0b214d540c0a17b26701a09c9ad0e3c', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: checkoutStore.savePaymentMethod }, h("div", { key: 'b12acaab9fd003f97bf99e75066e0b8b46dce89e', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '6a8618155c0822bf8c997e8542ecf78a68cbc1c7', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: 'f60d7dbe6115443c313122dfccb6dcb9e0b974c5', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: 'ef2583dd15bf25f344a68ac43cefda0d845438c9' }, h("justifi-checkout-summary", { key: '23b1818736c79e126ae79d8ff1951e44bc84facb' }))), h("div", { key: 'd86495b7da53b9ce7c5a3d65d618e4be3079338f', class: "col-12 mt-4" }, h("slot", { key: '85e34415fa3191a185a0a8da50c16338583e7392', name: "insurance" })), h("div", { key: '8cff610ad6e3535438546aeec85b128ee752f4bb', class: "col-12 mt-4" }, h("justifi-header", { key: 'a2b1c31d40e0c5b7a4f3802312c50cb718b80dbc', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '6bff6394a243c0a3cb643e0704c44b36001393c3', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: 'deecdfb1d74a74af62c31f1fb88767986c8f142c', class: "d-flex flex-column" }, h("section", { key: '47bc56f1ad8418c65bb1b3f7eba3aedd22d1df0e' }, h("div", { key: '4aac99bba9fbe8acebc652c3c510157f6623dd1e' }, h("justifi-saved-payment-methods", { key: '62fe7c65f1528828bd07746881f3a64e5c8c3f3a' }), h("justifi-sezzle-payment-method", { key: '81fa1dcea2fabf9a1555dc4e9bdb278f09921f01' }), h("justifi-plaid-payment-method", { key: '6e9f782bfe9fbc098084fac5f6effc5d09c3de97' }), h("justifi-tokenize-payment-method", { key: '53616f11a7ec79d9334da2705d85206dd6260b63', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: '4b61246ea605254aa0e329c3803b9fb725709158', class: "mt-4" }, h("justifi-button", { key: '0e5f46931aa558cea5a81d9ea9c9627a1feeca50', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+        var _a, _b;
+        return (h(StyledHost, { key: '8967ceca5773c0f5913b893f8b626ef2eb58abe8' }, h("justifi-modular-checkout", { key: '74294e37e359e68601699a543751c0835f074d47', ref: (el) => {
+                this.modularCheckoutRef = el;
+            }, authToken: this.authToken, checkoutId: this.checkoutId }, h("div", { key: '9daf1561a627f0a84dd7390c7d44ffab15a4a746', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '1f45fa61d3fa5f3e21d3086123aef3137734a363', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '812d922d688bb5e00eaff3f967350b705454a06c', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '9c8cfe346833339197f3922dcbee7230308064e6' }, h("justifi-checkout-summary", { key: '8b6410ed811ff2793167ab8b21954d6bbb52c3d8' }))), h("div", { key: '87413afe99372a8523b25b8e3fe14b17666328ac', class: "col-12 mt-4" }, h("slot", { key: 'f8342527afd4e86abda3275db447e82f72e13e03', name: "insurance" })), h("div", { key: '97b39e4f03829ea5d1d29b2b1be3066ff4100ac7', class: "col-12 mt-4" }, h("justifi-header", { key: '2b3196519d949d534595767879102951caad5788', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'c40bbfddfb990feda4aa75ab4caa38b4376b4a04', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: 'c323e2e892985b02a607253355b0b72eb5bfe9e9', class: "d-flex flex-column" }, h("section", { key: 'c85bb72343b256d072a086a4974167d421154023' }, h("div", { key: 'f4cb5c3b7fa4facbff7882b769da2bf9b9d01811' }, h("justifi-saved-payment-methods", { key: '087cbde10cb23af391eb848f53a3732cdd528cd0' }), this.availablePaymentMethods.includes(PAYMENT_METHODS.SEZZLE) && (h("justifi-radio-list-item", { key: '35c7b0484cbec62b115aa8851c8266cd4d39b2b6', name: "paymentMethodType", value: PAYMENT_METHODS.SEZZLE, checked: ((_a = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.SEZZLE, label: h("justifi-sezzle-payment-method", { ref: (el) => (this.sezzlePaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.sezzlePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), this.availablePaymentMethods.includes(PAYMENT_METHODS.PLAID) && (h("justifi-radio-list-item", { key: 'a7ec30342cbb3453b460e72d60a1c726e3a3efa3', name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: ((_b = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.PLAID, label: h("justifi-plaid-payment-method", { ref: (el) => (this.plaidPaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.plaidPaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), h("justifi-tokenize-payment-method", { key: '590b2085e9aee9a06f5ee1755aeeb41aa3448699', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: 'b725e958faa55605e4542f59d461780eeced96fe', class: "mt-4" }, h("justifi-button", { key: '119f7879620fc6dd06517c7a894ec05b60b1d4f8', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -232,6 +240,7 @@ export class Checkout {
     }
     static get states() {
         return {
+            "availablePaymentMethods": {},
             "checkout": {},
             "complete": {},
             "errorMessage": {},
@@ -387,6 +396,12 @@ export class Checkout {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "checkout-changed",
+                "method": "checkoutChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/checkout/save-new-payment-method.js

@@ -3,6 +3,7 @@ import { StyledHost } from "../../ui-components";
 import { checkoutStore } from "../../store/checkout.store";
 export class SaveNewPaymentMethod {
     constructor() {
+        this.label = 'Save New Payment Method';
         this.isChecked = false;
         this.handleCheckboxChange = (_name, value) => {
             this.isChecked = value;
@@ -11,10 +12,34 @@ export class SaveNewPaymentMethod {
         };
     }
     render() {
-        return (h(StyledHost, { key: '407e24ad9cd84378dab6a85ed813a8040f93942a' }, h("form-control-checkbox", { key: '73dc01e01c4ca57e26c6897c06a0280fda8c98db', label: "Save New Payment Method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
+        return (h(StyledHost, { key: 'c3808f4373067144ded9db353e48fe9cd3df59bc' }, h("form-control-checkbox", { key: '2f104a35497fdc1397c014c4c4ed646f7b389239', label: this.label || 'Save New Payment Method', name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Save New Payment Method'"
+            }
+        };
+    }
     static get states() {
         return {
             "isChecked": {}

package/dist/collection/components/checkouts-list/checkouts-list-core.js

@@ -118,7 +118,7 @@ export class CheckoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'ac27fa8b086e64e53a287f96be1d1212a7c23fc3' }, h(TableComponent, { key: '965b9e4761f686a254297a753b638952181d9758' }, h(TableHead, { key: '41502bb86d87acd8f730f22705d82a2bb4c3787c' }, h(TableHeadRow, { key: '9aa770a8bbb3c9623fde336580dcecda0ee6909e' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'ad20f6287a2eefd0aa659925cf4be8a03766c1c2' }, h(TableLoadingState, { key: 'bdd7d89bed12c4451199b59e2793cc3d4dbc24a8', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '8b89063a5cc78beb42a52375c431e834583ef12a', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'a557b0a68af21a5501139433f980a6c083536d71', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '0ba995e692b70214b1f63f3fbb7e05e76f229304' }, h(TableFootRow, { key: '25703345e36b46ce3a4cd9d09893c744b6db4d86' }, h(TableFootCell, { key: '07f5df6019322cb80053e4c061a2b5cb6ba7187e', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'daf2dd74a5f24192c9052a2906459a6d2b53544d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'c411d1c3a54fd8a331f0c5cdbae344e231482c0f' }, h(TableComponent, { key: '21774546f3500612497943869017fa7c712dff7e' }, h(TableHead, { key: 'c4e745ead905a393ff1b0cd0fba23db2fcc03ad8' }, h(TableHeadRow, { key: '88063d0baedd1febe0febcab1ccefc512accfd7d' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'e2534bc13d9e015f127c5396bbe73545d92536b4' }, h(TableLoadingState, { key: '0f0958fa87403652880222365cf7f88dd33335cc', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '588bb80d518892791ed2134dd5405940e7c28db7', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '219cce1137232c64b7c9188042c4aaca7e0e91b6', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '16978b3be698ceabd1d19b9eaa3f85c01a862b83' }, h(TableFootRow, { key: 'cd26e5b6f03dff77e09dfb4f9962e7601b2e40dc' }, h(TableFootCell, { key: '508008cf682b393549a839453d4b4c2eee1f67a4', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '688702c35e666def509ccb77b88b88ddd5e0d58a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "checkouts-list-core"; }
     static get properties() {

package/dist/collection/components/checkouts-list/checkouts-list-filters.js

@@ -38,7 +38,7 @@ export class CheckoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '05a4d429a1acd7bbaf202872523284e2b2cd3677' }, h("table-filters-menu", { key: 'abf61654a75212537af580f3bfd2646042eaba8a', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'f8e5cfe4b0a23723d0df939a1d1873adffcb1da9', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'd9e23e96a7269b3609e690a1e64e8c20bd125cb7', class: "p-2" }, h("form-control-select", { key: 'e1899dbc615be07486bc54f8baa395bee776d8ce', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: 'bedbc26d9d9f6906013ef4b80542d9031822b19c', class: "p-2" }, h("form-control-select", { key: '3bfef7fabeb85a29304e11093005bb1f58b23f41', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
+        return (h(StyledHost, { key: '5474a09b729c816bafb47101dbf5a25aff92eb1b' }, h("table-filters-menu", { key: '92e46a05e67bdf84b74cd644c1b89d0fc4c86af9', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'd8562876f8a0c1d85caa5a298cccdb1143bd7512', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '4162644cf10861d91a79dc07f845dd21a6c8d6a5', class: "p-2" }, h("form-control-select", { key: '2b13ef4af25f6ac3865f3b0edde91929655537bf', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '9aee7f453be147b03a548fe9ea9bd9bcc6a233aa', class: "p-2" }, h("form-control-select", { key: '8f375d5660c3414e5f3796e02694fa46ed761871', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
     }
     static get is() { return "justifi-checkouts-list-filters"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkouts-list/checkouts-list.js

@@ -61,7 +61,7 @@ export class CheckoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'b0c774c4f56f94cd6b4a3dc8651938f9f33ca94e' }, h("checkouts-list-core", { key: 'd524423a791f70c234044f5ba27d7bc3648fc988', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '41bf633467138b6af13b1c02ccf1e1016ec54bfe' }, h("checkouts-list-core", { key: 'cd3ca431258ad73e701fe74612ecdf2c0f2a1bda', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-checkouts-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dispute-management/dispute-management-core.js

@@ -46,7 +46,7 @@ export class DisputeManagementCore {
         });
     }
     render() {
-        return (h("div", { key: 'b5a802e8c418b3b7f3235f43260186084a6ee079' }, this.showDisputeResponseForm ? (h("justifi-dispute-response", { disputeId: this.disputeId, disputeResponse: this.dispute.dispute_response, authToken: this.authToken })) : (h("justifi-dispute-notification", { dispute: this.dispute, authToken: this.authToken, isLoading: this.isLoading }))));
+        return (h("div", { key: 'c85852cbd1169f371eb30ae06b6a2a564a15ece7' }, this.showDisputeResponseForm ? (h("justifi-dispute-response", { disputeId: this.disputeId, disputeResponse: this.dispute.dispute_response, authToken: this.authToken })) : (h("justifi-dispute-notification", { dispute: this.dispute, authToken: this.authToken, isLoading: this.isLoading }))));
     }
     static get is() { return "justifi-dispute-management-core"; }
     static get properties() {

package/dist/collection/components/dispute-management/dispute-management.js

@@ -43,7 +43,7 @@ export class DisputeManagement {
         }
     }
     render() {
-        return (h("justifi-dispute-management-core", { key: '8c800827aaa9d549a734ea05698763685e160a98', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (h("justifi-dispute-management-core", { key: '4087eb105a046a3cc194d9f25c80fa11298fa0a2', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
     }
     static get is() { return "justifi-dispute-management"; }
     static get properties() {

package/dist/collection/components/dispute-management/dispute-notification.js

@@ -30,7 +30,7 @@ export class DisputeNotification {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h(StyledHost, { key: '90d2506d5bde2ea478fa3575fc162bb356b67fac' }, this.isLoading && (h("div", { key: '4877ae22d3d8e312640b122c9107b6bdd8f924cb', style: { marginBottom: '8px' } }, h(Skeleton, { key: '31fa0717949bbc6aa49db1c6ae0e324099ae1de2', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'ac5179232cb9ee33d3f3e16d9f93536ecfbf46a5', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: 'c22a5e3b257d01f92de7f6188fa0758861abc747', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: 'be331b1a5e2fa0baf46bc593ef7ce4f5872abcff', part: text }, h("h1", { key: '8094c16d3b375f28ffe314613f21ae25b63e59ef', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: 'd89ae665e1f9bd99c9338e2132c1dc56e5386696' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '2786733eac76628019993e13473d1f43c0c395ed', class: "h5" }, "Dispute details"), h("div", { key: '663c28c46136bd56889b6ad0b9bfce9e5adbb590', class: "d-table gap-2" }, h("div", { key: 'dc688fad875d1591dcb7f31d423b61a3df2ff954', class: "d-table-row gap-2" }, h("span", { key: '442db7a6e95524ca6b092794c7a4a4d987c9866e', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: '0a31de8692c9b00f43fcf3c0508e4d00a221d096', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_b = this.dispute) === null || _b === void 0 ? void 0 : _b.amount))), h("div", { key: '9fe0c1a3d3350c36fca190ae748dafe24d41b5fc', class: "d-table-row gap-2" }, h("span", { key: '12165cb6671519130a5f2e0d8938aaa55e7e3ead', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '4a37ca8a7d64b97142997bb50ec11d737ac6a882', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_c = this.dispute) === null || _c === void 0 ? void 0 : _c.reason)), h("div", { key: '4d9cf74a8ed26dd84e4ce7325d4b8703352362a4', class: "d-table-row gap-2" }, h("span", { key: '8c0eaa24ebec7703eb18384b0b1f2eae8a684b55', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '238813abf2ea0848e1fe817d5798b9b0d0b78ffc', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_d = this.dispute) === null || _d === void 0 ? void 0 : _d.id))), h("div", { key: 'd156a7e9bf0e7214ff2164fc09b12c0b8f1d2b36', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: '7822fd12dfc39bd2aced043956d012fd34cc1b01', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '05132b3a6d1fc3d136dc227008ea1999330cdb96', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: 'b04dd0c34f608b75ea3997a9c28ce948fa9dba5c' }, h("h1", { key: 'ac2a13373315703e86247b6707097af7cf2e6757', class: "h4" }, "This payment is disputed and under review"), h("p", { key: '203aed553e01bbaebe44bb370a1d088c149cda06' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_f = this.dispute) === null || _f === void 0 ? void 0 : _f.won) && (h("div", { key: '6325264f8ad7b6678825878ed59f03f90eee421a' }, h("h1", { key: '7b647ed77373884e0751de4fc39403211c249db6', class: "h4" }, "This payment was disputed"), h("p", { key: '2a5c1560d341af9b743234a058a1187f245a2ae8' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.lost) && (h("div", { key: 'a89e7f4d7e8926ed052023c7dbbbaf076a03ed9c' }, h("h1", { key: '534b560aa35dd43ba0eba668904ef70dc1a6954f', class: "h4" }, "This payment was disputed"), h("p", { key: '2381f2f6418b47dce67c498c56d5f3789add57dc' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
+        return (h(StyledHost, { key: '0f1028825a7a96a06e7219518ffed54bc0db1b2b' }, this.isLoading && (h("div", { key: 'f4b704182a5a7085827854634d38c56423cc2e1b', style: { marginBottom: '8px' } }, h(Skeleton, { key: 'b2062d8b683ab110c26fc30f1600c4500f668d87', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'b5d2afe1fdd2e5ee0ec60048a48778bcfa6c78d3', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: '1e87c8936b3f2e26e680786927c5a4609aca0b83', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: '49090493e3921353b7a830397795496bb234d112', part: text }, h("h1", { key: 'fd7b56a7cfeaa6820bf2cc121575314d075b5a83', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '72ba296695928baca8f7c5c3b1f858c596efedb2' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: 'cce733ff1bbca7a9530a442035cbae2995e018e7', class: "h5" }, "Dispute details"), h("div", { key: '28b7f081e345112d99c52d05f205734995617253', class: "d-table gap-2" }, h("div", { key: 'd9476d8d0adfa3c6eccad229e94cd3824a720c7d', class: "d-table-row gap-2" }, h("span", { key: '4d9e0714eee778c326ee1d70a32f79d90d3d4b09', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'b227edcf9b4b65b790d8aa98021d2662a12855bc', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_b = this.dispute) === null || _b === void 0 ? void 0 : _b.amount))), h("div", { key: 'b1b1cdaac5482f565a6f26af71c0b526b8c19f4e', class: "d-table-row gap-2" }, h("span", { key: '0a479a9de96cce6e42bec90a17affe2c93ced44f', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '5d5020dda571f4465e2a358880ad5f20bc6171ea', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_c = this.dispute) === null || _c === void 0 ? void 0 : _c.reason)), h("div", { key: 'a5f42c3fcbb5d14f8479d0a576d31a50f8fc6441', class: "d-table-row gap-2" }, h("span", { key: '280fca5a101eb0e823eb9ccc13c746ac7ed62069', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '4dfc0b9a295ffc804b708d3590358256009e5376', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_d = this.dispute) === null || _d === void 0 ? void 0 : _d.id))), h("div", { key: '654e7baccd08628bc90d050bad108011b49f9972', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: 'd0817cdb23bf33086c6ce5122f4ed5388027d96c', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '5446bef44a0ca747692d59fd5490409d00a9e285', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: '17fbc5902badc4230c5485b326f480180c844768' }, h("h1", { key: 'fefa0234306588d9e7f56733872bf8c9793f51dd', class: "h4" }, "This payment is disputed and under review"), h("p", { key: 'eaad72aa8d9f65ca296379a2800180878ec8a7e5' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_f = this.dispute) === null || _f === void 0 ? void 0 : _f.won) && (h("div", { key: 'ec1b0d728a7518f913c2a69976fa1f5fc8f76c74' }, h("h1", { key: '9d42fad15fbeee507e2f364c3a35f143ff7599e2', class: "h4" }, "This payment was disputed"), h("p", { key: '3b728a5544fe17a6c58c12f7e8eef290022945b6' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.lost) && (h("div", { key: '6d1813508a657265546fbef00bd1e8f46ffaf740' }, h("h1", { key: 'de981fc2e06e860f47146647975965a903a39b55', class: "h4" }, "This payment was disputed"), h("p", { key: '4e57ab86518bd678a3a5402b712d40d573b3a970' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
     }
     static get is() { return "justifi-dispute-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dispute-management/dispute-response/additional-statement.js

@@ -29,7 +29,7 @@ export class AdditionalStatement {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '3904e1b961f9e1a0683647d306a128efcd7b9202' }, h("div", { key: '37ae13e4b7ad7bc8a18b588c4e591cde9030147e', class: "row gy-3" }, h("div", { key: '2f9b835795f21e4585638ad8be2093642f08b982', class: "col-12" }, h("h2", { key: '9ff1aeb8256ffe97c6300bd48597542519cda0a7', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: 'e4c6b9f4624b06103b6c643838a76c4a724e3168', class: "col-12" }, h("form-control-textarea", { key: 'dc9a5cb126a2d6f70cd8d59cdcfcd29f5c4e341b', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.additional_statement, inputHandler: this.inputHandler, errorText: this.errors.additional_statement })), h("div", { key: 'ba5202a5d8df30f5f4b7217341110646bb76e082', class: "col-12" }, h("form-control-file-v2", { key: '3168fc63d6bd6013821ee335914d916bb680fe42', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided.", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_b = this.documentErrors) === null || _b === void 0 ? void 0 : _b.uncategorized_file })))));
+        return (h("div", { key: '4d0fbca80a880577be7853efc494807d7d1e2fd9' }, h("div", { key: '6c3a82afe01b0812807a8e19dc750d4e9901876a', class: "row gy-3" }, h("div", { key: '89e7f50b0c6d67249b892caf8c6b2d78c1742309', class: "col-12" }, h("h2", { key: 'e0c4db3f5330cdd0e00897da0a54b898f0056f93', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: '58d4506d4bc0470afa4de87fdcf25ce4397d4180', class: "col-12" }, h("form-control-textarea", { key: 'aee641d90803d0ff483cfe75d881e3259303d4bc', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.additional_statement, inputHandler: this.inputHandler, errorText: this.errors.additional_statement })), h("div", { key: '19377eb6382adc9cb69ec57fe7928b7d477110d8', class: "col-12" }, h("form-control-file-v2", { key: '9529de236046398904d4780fcedada3a67ce4daf', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided.", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_b = this.documentErrors) === null || _b === void 0 ? void 0 : _b.uncategorized_file })))));
     }
     static get is() { return "justifi-additional-statement"; }
     static get properties() {

package/dist/collection/components/dispute-management/dispute-response/cancellation-policy.js

@@ -28,7 +28,7 @@ export class CancellationPolicy {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '29819e51969e655219ccbdbb2e1d1b738b64f7d3' }, h("div", { key: '28279bbc8354128a5041ed6eac16d4966be1584c', class: "row gy-3" }, h("div", { key: '8b6215544f87a8c35b81a93a5f4826a35e0c0f9f', class: "col-12" }, h("h2", { key: 'b6337efb93f03ea48f2c29b1baef4929f236df2d', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: 'b7d78115378ecd0b4a4f8a43349f1b4f2527ca35', class: "col-12" }, h("form-control-textarea", { key: '6ab47f5626a945f222efceef43dc096061cb67ed', label: "Cancellation Policy Disclosure", name: "cancellation_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.cancellation_policy_disclosure, inputHandler: this.inputHandler, errorText: this.errors.cancellation_policy_disclosure })), h("div", { key: '6aeccf798d112e79251408401c99d916a9065e94', class: "col-12" }, h("form-control-textarea", { key: '580e61e4370570c9a04496fef4b7ad9c19058336', label: "Cancellation Rebuttal", name: "cancellation_rebuttal", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.cancellation_rebuttal, inputHandler: this.inputHandler, errorText: this.errors.cancellation_rebuttal })), h("div", { key: 'e0deddf002b64d02bc5a5db075da11d2566dc3bb', class: "col-12" }, h("form-control-file-v2", { key: '3da55e915d4d3126456de8e95debc6d9e46dca42', label: "Upload Cancellation Policy", name: "cancellation_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.cancellation_policy })))));
+        return (h("div", { key: 'ac10b9b21d37179211d74118b06f561e95d9ea71' }, h("div", { key: '8ff525f8ed20828ed153b7dc23cb84a0277b81d4', class: "row gy-3" }, h("div", { key: '4f22ed526972a6625dc77b3ab0ab5b074277d7b2', class: "col-12" }, h("h2", { key: 'd78d54468b91edd99238bd757f871b18ec5b58ca', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: '629c9660446cbba8951cd8396d9b72aea71c731b', class: "col-12" }, h("form-control-textarea", { key: '60e0b4903e4ddec6915d23617f215d5d2ea20935', label: "Cancellation Policy Disclosure", name: "cancellation_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.cancellation_policy_disclosure, inputHandler: this.inputHandler, errorText: this.errors.cancellation_policy_disclosure })), h("div", { key: 'aec3e4561f880b86ba6f5c7ce0298e45b837c2fd', class: "col-12" }, h("form-control-textarea", { key: 'e77d126709037cb22e6e4fcf2228652ffeb672ee', label: "Cancellation Rebuttal", name: "cancellation_rebuttal", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.cancellation_rebuttal, inputHandler: this.inputHandler, errorText: this.errors.cancellation_rebuttal })), h("div", { key: '407c071a0f7a1e488eb2ef4d522e515138a5ed2c', class: "col-12" }, h("form-control-file-v2", { key: '15dfacd8e1de439848d12ecec9a0f5ffac259484', label: "Upload Cancellation Policy", name: "cancellation_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.cancellation_policy })))));
     }
     static get is() { return "justifi-cancellation-policy"; }
     static get properties() {

package/dist/collection/components/dispute-management/dispute-response/customer-details.js

@@ -28,7 +28,7 @@ export class CustomerDetails {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: 'f5442efc59bb6a99a87f90feb5a4a147019af940' }, h("div", { key: 'd0f97e7ca943bfe8e4846ea84838ab08dc3658ab', class: "row gy-3" }, h("div", { key: 'da7f41d96c717f921010786f593c3776e2644738', class: "col-12" }, h("h2", { key: '0f7d56f400ec0f4250bbf7c8b2b736e084c17ab0', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: 'eca73b10ec43454be35d4ec6e09b410b7a509b46', class: "col-12" }, h("form-control-text", { key: '1b67e031f3ac24b43319b09a01a5e297095ecc84', label: "Full Name", name: "customer_name", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_name, inputHandler: this.inputHandler, errorText: this.errors.customer_name })), h("div", { key: '967326bb10e6d2a64b2f3f0bae99432f238e361c', class: "col-12" }, h("form-control-text", { key: 'fc7d83cc51728920d9f4849dd85f4f019bb50fe4', label: "Email", name: "customer_email_address", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.customer_email_address, inputHandler: this.inputHandler, errorText: this.errors.customer_email_address })), h("div", { key: '4e598f3e9bf118ddf22c4c160f0171c9789cd853', class: "col-12" }, h("form-control-textarea", { key: 'fe1c2e1a4c70ef463a31e890349a5b49f979e21b', label: "Billing Address", name: "customer_billing_address", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.customer_billing_address, inputHandler: this.inputHandler, errorText: this.errors.customer_billing_address })), h("div", { key: 'a4345bc3b39f913cc233baa21373a6d7d93d3cda', class: "col-12" }, h("form-control-file-v2", { key: '82cb1b948807d901845a23137b5d488c9edd53ae', label: "Customer Signature", name: "customer_signature", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.customer_signature })), h("div", { key: 'ffc589785e6114d604c2d98d3140de5487dc8af6', class: "col-12" }, h("form-control-file-v2", { key: '5b6b64927e4b90cc6dbb302fbc0d2067b70c6f4a', label: "Customer Communication", name: "customer_communication", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.customer_communication })))));
+        return (h("div", { key: 'e09402d1c3ca9bb8f3a243c22bec2e9d908d661f' }, h("div", { key: '67a1038f92a9a9711ca37d353af7a06b87cbe0a8', class: "row gy-3" }, h("div", { key: '1be2249539c434bf3faf847b4202ff2f421d15a3', class: "col-12" }, h("h2", { key: '17d8bc1b31dfa77f08500ff4029f572049d9e1ce', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: '3e218b39c8f5dab178cc8b23caf403e1a912694c', class: "col-12" }, h("form-control-text", { key: 'ab28a2176315c3ecd1ff984a599589a81375f4e0', label: "Full Name", name: "customer_name", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_name, inputHandler: this.inputHandler, errorText: this.errors.customer_name })), h("div", { key: 'e1739728748de575e39f29018cd1139d75232611', class: "col-12" }, h("form-control-text", { key: '9f2aec120b08ac793be93f9c990d81a74c9e57d2', label: "Email", name: "customer_email_address", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.customer_email_address, inputHandler: this.inputHandler, errorText: this.errors.customer_email_address })), h("div", { key: '9be7e4a85edfc9bc95e8ede96ebc81f4777f1cdb', class: "col-12" }, h("form-control-textarea", { key: '100e419cc2064509aaa03c76e2898fc7df85e950', label: "Billing Address", name: "customer_billing_address", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.customer_billing_address, inputHandler: this.inputHandler, errorText: this.errors.customer_billing_address })), h("div", { key: '94da95bb013738aefb17088203ee14e07f159ae0', class: "col-12" }, h("form-control-file-v2", { key: '1ab77a12a715fbb82c0bc1c9f9081e54fd3fef0e', label: "Customer Signature", name: "customer_signature", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.customer_signature })), h("div", { key: '88eed9387758b86332137fa64b4e3b3c5825d908', class: "col-12" }, h("form-control-file-v2", { key: '0b654ffcf253c639b07ffe03450a87550caaa75a', label: "Customer Communication", name: "customer_communication", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.customer_communication })))));
     }
     static get is() { return "justifi-customer-details"; }
     static get properties() {