@justifi/webcomponents 5.0.0 → 5.2.0

package/dist/module/checkout-core.js

@@ -1,31 +1,32 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as formatCurrency } from './utils2.js';
-import { c as config } from './config.js';
 import { C as Checkout } from './Checkout.js';
 import { a as ComponentErrorSeverity } from './ComponentError.js';
 import { i as insuranceValuesOn, v as validateInsuranceValues, H as Header2, a as insuranceValues } from './insurance-state.js';
 import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
-import { t as text } from './parts.js';
+import { t as text, Z as checkoutSummary } from './parts.js';
 import { S as Skeleton } from './skeleton.js';
-import { d as defineCustomElement$5, H as Header3 } from './new-payment-method.js';
+import { d as defineCustomElement$7, H as Header3 } from './billing-form-wrapper.js';
 import './details.js';
-import { d as defineCustomElement$h } from './bank-account-form2.js';
-import { d as defineCustomElement$g } from './card-form2.js';
-import { d as defineCustomElement$f } from './custom-popper2.js';
-import { d as defineCustomElement$e } from './form-control-checkbox2.js';
-import { d as defineCustomElement$d } from './form-control-help-text3.js';
-import { d as defineCustomElement$c } from './form-control-radio2.js';
-import { d as defineCustomElement$b } from './form-control-select2.js';
-import { d as defineCustomElement$a } from './form-control-text2.js';
-import { d as defineCustomElement$9 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$8 } from './hidden-input2.js';
-import { d as defineCustomElement$7 } from './iframe-input2.js';
-import { d as defineCustomElement$6 } from './billing-form.js';
-import { d as defineCustomElement$4 } from './payment-method-options.js';
-import { d as defineCustomElement$3 } from './save-new-payment-method.js';
-import { d as defineCustomElement$2 } from './saved-payment-method.js';
-import { d as defineCustomElement$1 } from './sezzle-payment-method.js';
+import { d as defineCustomElement$j } from './bank-account-form2.js';
+import { d as defineCustomElement$i } from './billing-form2.js';
+import { d as defineCustomElement$h } from './card-form2.js';
+import { d as defineCustomElement$g } from './custom-popper2.js';
+import { d as defineCustomElement$f } from './form-control-checkbox2.js';
+import { d as defineCustomElement$e } from './form-control-help-text3.js';
+import { d as defineCustomElement$d } from './form-control-radio2.js';
+import { d as defineCustomElement$c } from './form-control-select2.js';
+import { d as defineCustomElement$b } from './form-control-text2.js';
+import { d as defineCustomElement$a } from './form-control-tooltip2.js';
+import { d as defineCustomElement$9 } from './hidden-input2.js';
+import { d as defineCustomElement$8 } from './iframe-input2.js';
+import { d as defineCustomElement$6 } from './new-payment-method.js';
+import { d as defineCustomElement$5 } from './payment-method-options.js';
+import { d as defineCustomElement$4 } from './save-new-payment-method.js';
+import { d as defineCustomElement$3 } from './saved-payment-method.js';
+import { d as defineCustomElement$2 } from './sezzle-payment-method.js';
+import { d as defineCustomElement$1 } from './postal-form2.js';
 
 const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends HTMLElement {
     constructor() {
@@ -55,7 +56,6 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
             });
             this.renderState = 'error';
         };
-        this.iframeOrigin = config.iframeOrigin;
         this.authToken = undefined;
         this.getCheckout = undefined;
         this.complete = undefined;
@@ -64,6 +64,7 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
         this.disableBankAccount = undefined;
         this.disableBnpl = undefined;
         this.disablePaymentMethodGroup = undefined;
+        this.hideCardBillingForm = undefined;
         this.hasLoadedFonts = false;
         this.checkout = undefined;
         this.serverError = undefined;
@@ -144,17 +145,16 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
     }
     get paymentType() {
         var _a, _b, _c, _d, _e;
-        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
     }
     get summary() {
         var _a, _b;
         return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { part: text }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", null, h("span", { part: text }, "Total"), "\u00A0", h("span", { part: text }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
     }
     render() {
-        return (h(StyledHost, { key: '7ea5d909a307d335327b652bc247718a7b2973ff' }, h("div", { key: '0f7e9baffebadad78c28c318a770b681cabd7579', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '2453b63f1a3cffe56a85b38005a8e3cabd666f47', class: "col-12" }, h(Header2, { key: 'ea4bbc494746c1042d8976aa72f66ebc20f257ef', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: 'bee560cf279315e76551513c5135ab1a0b180de4', class: "col-12" }, h("slot", { key: '3b2260c580a2a3a4b8bafe46d215cd5821b17815', name: "insurance" })), h("div", { key: '6d0f4b6ea7ea611fe4eacc13e6cf1bf2cddfba64', class: "col-12 mt-4" }, h(Header2, { key: '1eae72a345d5f255573237cf45b4b6359ff5729c', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '89a6fefa7693ef3094128485531cb7c57a314b36', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: 'ffe09e15c81fbb821fc99031c13b753bfa943596', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '8b635fa70dbaadc8530ccb7105ed9590ce87e2ed', class: "col-12" }, h("div", { key: '9caa17a123c1ff08391c48632facfb4fe33809d2', class: "d-flex justify-content-end" }, h(Button, { key: '53faa444e15b719e9e41d8ce01295f841b9507d2', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
+        return (h(StyledHost, { key: '27b5f6263124c9c288fb81e6a0a97ef9565a49ed' }, h("div", { key: '8444c6ea0c1b4f9a63e46407c90ee1d14556f832', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '920ddc8692ce6a0cc129fc9de0353c7d1cce0fcf', class: "col-12", part: checkoutSummary }, h(Header2, { key: 'c48cfc8be18363aa522e38a6dd09acccf2f51bf4', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: '1f9615177d056357b9c960bbf86360324a2330dc', class: "col-12" }, h("slot", { key: '2a3845fe83eb3c0a213f97a0ccc74c268690818b', name: "insurance" })), h("div", { key: 'c7e588bb71c6bc3f84636cde3346021b51978bfd', class: "col-12 mt-4" }, h(Header2, { key: '512bef8ae536558eba77019531f38485983b1a2f', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '84a1d01dbae527ca1bff19b2f3dfcd47f9b3782f', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: '8770c420bf092ad3173fb7308d795e1e9ab6d00d', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '2c907e60023119910220a57725d52a2133a4e5ba', class: "col-12" }, h("div", { key: 'b2303b22c1a83755726eb08d7e732b4c472f75d7', class: "d-flex justify-content-end" }, h(Button, { key: '6c5910476d57f439648810a8fe200b190256bb2d', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
     }
 }, [1, "justifi-checkout-core", {
-        "iframeOrigin": [1025, "iframe-origin"],
         "authToken": [1, "auth-token"],
         "getCheckout": [16],
         "complete": [16],
@@ -163,6 +163,7 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
         "disableBankAccount": [4, "disable-bank-account"],
         "disableBnpl": [4, "disable-bnpl"],
         "disablePaymentMethodGroup": [4, "disable-payment-method-group"],
+        "hideCardBillingForm": [4, "hide-card-billing-form"],
         "hasLoadedFonts": [32],
         "checkout": [32],
         "serverError": [32],
@@ -175,7 +176,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-checkout-core", "bank-account-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form", "justifi-new-payment-method", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
+    const components = ["justifi-checkout-core", "bank-account-form", "billing-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form-wrapper", "justifi-new-payment-method", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method", "postal-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-checkout-core":
             if (!customElements.get(tagName)) {
@@ -184,85 +185,95 @@ function defineCustomElement() {
             break;
         case "bank-account-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$j();
+            }
+            break;
+        case "billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
             }
             break;
         case "card-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "form-control-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "form-control-radio":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "form-control-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "hidden-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "justifi-billing-form-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "justifi-billing-form":
+        case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "justifi-new-payment-method":
+        case "justifi-payment-method-options":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "justifi-payment-method-options":
+        case "justifi-save-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "justifi-save-new-payment-method":
+        case "justifi-saved-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-saved-payment-method":
+        case "justifi-sezzle-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "justifi-sezzle-payment-method":
+        case "postal-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/module/checkout.service.js

@@ -1,5 +1,4 @@
-import { c as config } from './config.js';
-import { A as Api } from './Api.js';
+import { A as Api, c as config } from './config.js';
 import './Checkout.js';
 import './Pagination.js';
 import './Payment.js';

package/dist/module/checkouts-list-core2.js

@@ -3,24 +3,39 @@ import './Checkout.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
 import './SubAccount.js';
-import { f as tableHeadCell, g as getAlternateTableCellPart, j as table, k as tableCell } from './parts.js';
+import { m as tableHeadCell, n as getAlternateTableCellPart, o as table, p as tableCell } from './parts.js';
 import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types.js';
 import './details.js';
-import { a as formatDate, b as formatTime, c as formatCurrency } from './utils2.js';
+import { a as formatDate, b as formatTime } from './utils2.js';
+import { B as Badge, a as BadgeVariant } from './badge.js';
 import { o as onQueryParamsChange, q as queryParams } from './checkouts-list-params-state.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
 const MapCheckoutStatusToBadge = (status) => {
-    switch (status) {
-        case 'created':
-            return "<span class='badge bg-primary' title='The checkout has been created'>Created</span>";
-        case 'completed':
-            return "<span class='badge bg-success' title='The checkout has been completed'>Completed</span>";
-        case 'attempted':
-            return "<span class='badge bg-secondary' title='The checkout has been attempted'>Attempted</span>";
-        case 'expired':
-            return "<span class='badge bg-danger' title='The checkout has expired'>Expired</span>";
-    }
+    const statusToBadgeProps = {
+        created: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'The checkout has been created',
+            text: 'Created',
+        },
+        completed: {
+            variant: BadgeVariant.SUCCESS,
+            title: 'The checkout has been completed',
+            text: 'Completed',
+        },
+        attempted: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'The checkout has been attempted',
+            text: 'Attempted',
+        },
+        expired: {
+            variant: BadgeVariant.DANGER,
+            title: 'The checkout has expired',
+            text: 'Expired',
+        },
+    };
+    const badgeProps = statusToBadgeProps[status];
+    return h(Badge, Object.assign({}, badgeProps));
 };
 
 const defaultColumnsKeys = 'created_at,payment_amount,payment_description,payment_mode,status';
@@ -33,20 +48,14 @@ const checkoutTableColumns = {
     status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of each checkout" }, "Status")),
 };
 const checkoutTableCells = {
-    created_at: (value, index) => (h("td", { part: getAlternateTableCellPart(index) },
-        h("div", { class: "fw-bold" },
-            formatDate(value),
-            " "),
-        h("div", { class: "fw-bold" },
-            formatTime(value),
-            " "))),
-    payment_amount: (value, index) => (h("td", { part: getAlternateTableCellPart(index) },
-        formatCurrency(value, true, true),
-        " ")),
-    payment_description: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    sub_account_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    payment_mode: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapCheckoutStatusToBadge(value) })),
+    created_at: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) },
+        h("div", { class: "fw-bold" }, formatDate(checkout.created_at)),
+        h("div", { class: "fw-bold" }, formatTime(checkout.created_at)))),
+    payment_amount: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, checkout.formattedPaymentAmount(checkout.payment_amount))),
+    payment_description: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, checkout.payment_description)),
+    sub_account_name: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, checkout.sub_account_name)),
+    payment_mode: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, checkout.payment_mode)),
+    status: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapCheckoutStatusToBadge(checkout.status))),
 };
 
 const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCore extends HTMLElement {
@@ -170,7 +179,7 @@ const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCo
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '7079f5dbb8f52d0e99da70f6975e65f2024bd7c9' }, h("div", { key: '8d73be1816687fe3af837d5853f75b5aad756f6e', class: "table-wrapper" }, h("table", { key: '3a9d8cb62a25d28660fa160de263ae80c2b67804', class: "table table-hover", part: table }, h("thead", { key: 'cc1954f52372d481e789cf5460118952633ab34e', class: "table-head sticky-top" }, h("tr", { key: '141e9d5f5e671181487a77dd01ea86d0f2927ba6', class: "table-light text-nowrap" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: 'c6f1ba23fcda58bef598d32ec6901e7bae56fe9c', class: "table-body" }, h(TableLoadingState, { key: '746e4eaab6f4840f95a7243ac7d9a119fe4dac6c', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '7d7cfed557fe138cfd56a8283da75b8fd55ef01e', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '71e438127afde6489e232ecd19f91545da9ca8fa', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '45a0d79963f2e6edd7f2f11620c0314345b3d6d5', class: "sticky-bottom" }, h("tr", { key: '8d502311b14f5f1a7cae5d00f3bff361f4816d72', class: "table-light align-middle" }, h("td", { key: '522745aa9b5d46188dd4b351debc83601c144dfe', part: tableCell, colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '41323e6e3aa31631dca4dba29e40551b9a9d5446', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '910d95f94623ddd9e90a182a7a47e7dfdff1d9a6' }, h("div", { key: 'c296c31fe48bec06067215f6aa4cfb1a9d1b681a', class: "table-wrapper" }, h("table", { key: 'dddd43e74de4989261b8014d2c66cba7c26e9d98', class: "table table-hover", part: table }, h("thead", { key: '4eabd9c8687fbf316420c9a838a95016b20f12dd', class: "table-head sticky-top" }, h("tr", { key: '2cdd7f438099613e5a670343723b883470a65dbd', class: "table-light text-nowrap" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: 'e3fd8f783e0e405d18bc120bf8c2ca4e2ca25f15', class: "table-body" }, h(TableLoadingState, { key: 'ec8e73a90b9951b5fba78651fdd9a93b7531ba49', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '6b1ebf8bbd62b0ba9c7032be47c87b929bc413db', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'a44e8985fb208b91635afe4910fdce5fb94d17e7', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '05ac7e9796a7b4e4450151e762a409c050fc037f', class: "sticky-bottom" }, h("tr", { key: 'd6135d93dafeee69c6d9a12b9bd35e8c77ec3c5a', class: "table-light align-middle" }, h("td", { key: 'ad7b4df45f54519b759797f665bcfa68a1cd512d', part: tableCell, colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '3c97cf5daeb90e9b9a881280f25e4307b7392bcf', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "queryParams": ["updateOnPropChange"],

package/dist/module/config.js

@@ -1,5 +1,119 @@
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+}
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return unsafeStringify(rnds);
+}
+
+const Api = ({ authToken, apiOrigin }) => {
+    async function getAuthorizationHeader() {
+        if (!authToken) {
+            return {
+                'Content-Type': 'application/json',
+            };
+        }
+        return {
+            Authorization: `Bearer ${authToken}`,
+            'Idempotency-Key': v4(),
+            'Content-Type': 'application/json',
+        };
+    }
+    async function makeRequest(endpoint, method, params, body, signal, headers) {
+        const url = `${apiOrigin}/v1/${endpoint}`;
+        const requestUrl = params ? `${url}?${new URLSearchParams(params)}` : url;
+        const defaultHeaders = await getAuthorizationHeader();
+        const mergedHeaders = Object.assign(Object.assign({}, defaultHeaders), headers);
+        const response = await fetch(requestUrl, {
+            method: method,
+            headers: mergedHeaders,
+            body: body,
+            signal: signal,
+        });
+        if (response) {
+            return response.status === 204 ? {} : response.json();
+        }
+        handleError(requestUrl);
+    }
+    async function get(endpoint, params, signal, headers) {
+        return makeRequest(endpoint, 'GET', params, null, signal, headers);
+    }
+    async function post(endpoint, body, params, signal) {
+        return makeRequest(endpoint, 'POST', params, JSON.stringify(body), signal);
+    }
+    async function put(endpoint, body, params, signal) {
+        return makeRequest(endpoint, 'PUT', params, JSON.stringify(body), signal);
+    }
+    async function patch(endpoint, body, params, signal) {
+        return makeRequest(endpoint, 'PATCH', params, JSON.stringify(body), signal);
+    }
+    async function destroy(endpoint, params, signal) {
+        return makeRequest(endpoint, 'DELETE', params, null, signal);
+    }
+    return { get, post, put, patch, destroy };
+};
+function handleError(requestUrl) {
+    console.error(`Error fetching from ${requestUrl}`);
+}
+
 const config = {
-    iframeOrigin: "https://components.justifi.ai/v2",
     proxyApiOrigin: "https://wc-proxy.justifi.ai",
     proxyAuthToken: 'eyJraWQiOiJqdXN0aWZpLWUyNDgyMmU3ODE1MmEzZjRkMjU1IiwidHlwIjoiSldUIiwiYWxnIjoiUlMyNTYifQ.eyJpc3MiOiJodHRwczovL2F1dGguanVzdGlmaS5haS8iLCJhenAiOiJvYXNfMmlsWHBqOHQ2WVlEQ0xWU0FiVFczMiIsInN1YiI6Im9hc18yaWxYcGo4dDZZWURDTFZTQWJUVzMyQHNlc3Npb25zIiwiYXVkIjoiaHR0cHM6Ly9hcGkuanVzdGlmaS5haS92MSIsImd0eSI6ImNsaWVudC1jcmVkZW50aWFscyIsInBlcm1pc3Npb25zIjpbeyJyb2xlIjoicmVhZDphY2NvdW50IiwicmVzb3VyY2VfaWQiOiJhY2NfNUV0OWlYclNTQVpSMktTb3VRR0FXaSJ9LHsicm9sZSI6InJlYWQ6YnVzaW5lc3MiLCJyZXNvdXJjZV9pZCI6ImJpel8zYmg2OWJxMXJrM2RtWE5vQUtWb251In1dLCJleHAiOjE3MTE1NTk0MTQsImlhdCI6MTcwMzc4MzQxNCwicGxhdGZvcm1fYWNjb3VudF9pZCI6ImFjY18zcmVOYjRhTll5MmlXRFpRVmN6bXg0In0.oPOoDYxzrnpE8PRUaz-FCU4KqnSuNbFTeDkl3AtMscjUkIctP1OIFh-ZGBjbH5eVH5noXCbaiin0j92dS7jx4gLpxuYT2Q8gpZbuIsT7fa58elvGeRkUUJ-AC5ueZxlv90yPWMm0OIbyrV7XZhuwYyKbV-ZczEbl2JpvBMe40CM-LdClQV66d_-Kw9a23SabBVfYgP5V-5OsagOIESvzZoO-27tGlNkV2a-hxqddDCOZv0HvRYAtp5S7EQrmRdEBu5gCNbf1eRFG424hxZUFVr2LdetYuKQLxJjDdUjf86ZwEUecrEaDSupiN1VC3CitdOwBVf6-R_N0VpN4VLVD5g',
     exampleAccountId: 'acc_5Et9iXrSSAZR2KSouQGAWi',
@@ -10,4 +124,4 @@ const config = {
     privateAuthToken: '',
 };
 
-export { config as c };
+export { Api as A, config as c };

package/dist/module/custom-popper2.js

@@ -1876,7 +1876,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '153f64dde49d3c00975e4ab967092fe0eab2e096' }, h("style", { key: 'f3441ee39263f615a907d371e5a75be910e6ad80' }, `
+        return (h("div", { key: '277df43099c0dd77e7dc69927ef51d2457cec263' }, h("style", { key: 'b0bce6ba8275da36f98a9a12abd541fc0ae423f9' }, `
           .popper-content {
             display: none;
           }
@@ -1884,7 +1884,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '840e5c3a19a9d57dda561971967130e8bf53518b', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '2b9bbfe2b4cd7bfb5ff3a6c21a99dea7e23d1124' }))));
+          `), h("div", { key: '23b70bc63642a5a3ec4e67da2d698f4ce70325dd', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'c7fdc0e2e03def596ca1eb4a4cb813a93f8cea21' }))));
     }
 }, [4, "custom-popper", {
         "placement": [1],

package/dist/module/customer-details.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as create$3, a as create$6, F as FormController } from './form.js';
 import { D as DisputeEvidenceDocument, a as DisputeResponseFormStep } from './dispute-response-form-types.js';
-import { J as heading5 } from './parts.js';
+import { S as heading5 } from './parts.js';
 import { d as defineCustomElement$6 } from './custom-popper2.js';
 import { d as defineCustomElement$5 } from './form-control-file-v22.js';
 import { d as defineCustomElement$4 } from './form-control-help-text3.js';
@@ -49,7 +49,7 @@ const CustomerDetails = /*@__PURE__*/ proxyCustomElement(class CustomerDetails e
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'f3b9a18d93cea09e6c9f7a134ed566ad12887839' }, h("div", { key: 'f9d3594930e9ae5d5907462bbe76c242019a19bc', class: "row gy-3" }, h("div", { key: '809f4e25c8a4d8652ae4711a33321b17d35f5796', class: "col-12" }, h("h2", { key: '56f784698452620cb30b532840b02ee2ca3b6a7a', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: '6775574f0e8f1047a11e3e9594f9f237aee09aa2', class: "col-12" }, h("form-control-text", { key: '4fc621b96baed074292ccbe8507a58d18f005237', 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: 'f57ace60afc3a74711dc98ea054345413ff51d48', class: "col-12" }, h("form-control-text", { key: '31a88ff6476ecd98fd6def5c39778940b448da51', 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: '3ea9b1729c1a516fdbf33b28674e33a5ec5f200a', class: "col-12" }, h("form-control-textarea", { key: '6eb19b40b3a514db9e1ead3e57832da37d791db6', 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: '363371261754410c5548fc9286a5d9edbec5e4a0', class: "col-12" }, h("form-control-file-v2", { key: 'bf3976ab48c50bb7cd6fd7c29a39a36bee8a70c5', label: "Customer Signature", name: "customer_signature", onChange: this.handleFileSelection })), h("div", { key: '7a85113b3a4c95e0571759f040a63757eead2788', class: "col-12" }, h("form-control-file-v2", { key: '686b82077404ce7c345a51b4c572452fa0491b7d', label: "Customer Communication", name: "customer_communication", onChange: this.handleFileSelection })))));
+        return (h("div", { key: 'f13b1b07f7e47661e94730ac84a2f579e20c407c' }, h("div", { key: 'b50fcf45a6c872543c6a691f43e82b697706c0eb', class: "row gy-3" }, h("div", { key: '71c5a773cd7254a76d4071abbecb4067417266f7', class: "col-12" }, h("h2", { key: '84beef4a3879bb36c3d5755b5e2b23c04e018247', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: 'f58feed75554bdf80574dd6a961f07bc6ff67a68', class: "col-12" }, h("form-control-text", { key: 'e781dad51a096012a9fdbe56169c62abd1c7558d', 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: 'c617221a62a8226432216fa3cf1a6bdcaea53dd8', class: "col-12" }, h("form-control-text", { key: '5c4a2d8cf779c0a4cb38c5bfd29e21d610c3283b', 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: '639449c6544b6fcbaca4a777b0b2e31573c6fb85', class: "col-12" }, h("form-control-textarea", { key: '54794fdbf93af16f55f0d7e9f3b2152a774e9ff7', 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: '24c0ad1a768f69d4f181ca12cb1520d9d89df06d', class: "col-12" }, h("form-control-file-v2", { key: '20ba764e44adfd05da308dd98de210b6a6a1918c', label: "Customer Signature", name: "customer_signature", onChange: this.handleFileSelection })), h("div", { key: '0171a822afcd450db5202e4ec1925fd85ff68090', class: "col-12" }, h("form-control-file-v2", { key: '24d31b7c0ae09f10f144e80045eadab93c01ee14', label: "Customer Communication", name: "customer_communication", onChange: this.handleFileSelection })))));
     }
 }, [0, "justifi-customer-details", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/details.js

@@ -8,7 +8,7 @@ const Details = /*@__PURE__*/ proxyCustomElement(class Details extends HTMLEleme
         this.errorMessage = undefined;
     }
     render() {
-        return (h(Host, { key: '14ab849e7b60f834d823bb6d10f8b772a1184ad4' }, this.errorMessage ?
+        return (h(Host, { key: 'd00d3b1c3b5d73af5a0eb1a18f2095f023aeb816' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));

package/dist/module/dispute-management-core.js

@@ -72,7 +72,7 @@ const DisputeManagementCore = /*@__PURE__*/ proxyCustomElement(class DisputeMana
         });
     }
     render() {
-        return (h("div", { key: 'd147755d1f58c2ad2230f1afd511f03ee9053b75' }, 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: 'd7763c7713e5278f02a1b903bbc0b2c905bd23b0' }, 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 watchers() { return {
         "getDispute": ["updateOnPropChange"]

package/dist/module/dispute-notification.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as formatCurrency } from './utils2.js';
-import { t as text, S as heading4 } from './parts.js';
+import { t as text, a0 as heading4 } from './parts.js';
 import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
 import { S as Skeleton } from './skeleton.js';
@@ -44,7 +44,7 @@ const DisputeNotification = /*@__PURE__*/ proxyCustomElement(class DisputeNotifi
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h(StyledHost, { key: 'df45596c8b40c5665589e976405c38f05271812f' }, this.isLoading && (h("div", { key: '9c1f507799665e4297a9e76d24cf1656079bb146', style: { marginBottom: '8px' } }, h(Skeleton, { key: '6a6e2314fb16348e59d4ff9b4739d895b376303c', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: '286352f2b7da7f3b494add74fc332a3d2a6f4d42', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: 'bc3985914e7dbeecbe4ea9efea1fcdd592d2600e', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: 'e0371f22a67d7ebef374e2ad4ed0e0d151b2105b', part: text }, h("h1", { key: 'a85046d309d92aee9c6a01e0311fe23d0cc48b98', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '886223ea616ea99c76b7f0e719f2bec606e6796a' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '3f12d0ded622ad0c844dee081b8eb3d444e2b4e3', class: "h5" }, "Dispute details"), h("div", { key: 'add2e0e67fcebcb484a2a30ea66a303693a95be8', class: "d-table gap-2" }, h("div", { key: '30b35751ab437971b2c0ef6ab003d7c348d3cc3f', class: "d-table-row gap-2" }, h("span", { key: '7b5ea6fdf2d644a2c31e0276185fb2a95b0ee85f', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'f91e37855056374a345a8a534c9343ed71180a1e', 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: '6d2ef3c07ee006eba74caae39e1c355c4f1d0e80', class: "d-table-row gap-2" }, h("span", { key: 'cb60ccb1855a7bc15b8e411986790c33419659c3', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: 'a2c21645bbba4529576062baacbdd1166e1b4f72', 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: '4f9bfc9fa68efc18032a9367938c82fef27f6dbe', class: "d-table-row gap-2" }, h("span", { key: 'c78b105e6e1bbe3332005c71e230609c9f2a65d9', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '0d75f20d0c665cf18eb6a91eb4a890df0e0a09be', 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: '97801ea1983a7591d0c5aa933842fcce2eb12394', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: '8155accf40a4512506b18de08423da53cd3c2ff7', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: 'b23bd82c73ae7c8c020b7ad5c60223f9a1eae8d2', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: '2b3ee4c8f1b9b0100416c7804897530e001826d3' }, h("h1", { key: 'abdeb425738b1f0cd8b27836a885f9d9e31b1774', class: "h4" }, "This payment is disputed and under review"), h("p", { key: 'aa42c034af8bef20370aac9607065e6f15a87534' }, "The cardholder is disputing this payment. A counter dispute has been submitEvent and is under review."))), ((_f = this.dispute) === null || _f === void 0 ? void 0 : _f.won) && (h("div", { key: '2a75a70a3a45a0d42dc182b0782983220444c42b' }, h("h1", { key: '3e6c8aad4507bab77c6f0bf06c2ee26af382b8e8', class: "h4" }, "This payment was disputed"), h("p", { key: 'b1d2626f6c6529005676ead7776b988693334971' }, "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: '1b9da576c01bd69842cd3d0b65e96997842461e8' }, h("h1", { key: 'c5521ef13d0f9437b90fd34b96e43f980ab7ceb8', class: "h4" }, "This payment was disputed"), h("p", { key: 'd5724f0fd2194621a908d803752dc1965d2f0043' }, "The cardholder disputed this payment and the card issuer has settled it their favor.")))));
+        return (h(StyledHost, { key: 'dfcc9e5fd86a26e8d321bc5caafa3b046b022c54' }, this.isLoading && (h("div", { key: 'deffb8dc0d001fb4dc114b6810408de098ed9621', style: { marginBottom: '8px' } }, h(Skeleton, { key: '6ea0998a7a9c4b0b161e7838e5863c6581a56ccc', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'ea46373e18690a0cf1131bdf5a6b0bfc7761c68f', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: '98c3b1ad8eca5f77a7c73998835b57a7bc5df4a2', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: '3098144d29605462b4f042b74a0a44303cddd80f', part: text }, h("h1", { key: '7c175c4c1b5c93833d0eef68b3e6509608995483', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: 'df222fa47c5df85feead831a19af3b681feeb28d' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '60f58219182bf56b788a17f53556c7245180cae9', class: "h5" }, "Dispute details"), h("div", { key: '490b807d57ff8baff1d15b644c4fb8948a786125', class: "d-table gap-2" }, h("div", { key: '86ac0b527c0a742f70c487129790d722af385bea', class: "d-table-row gap-2" }, h("span", { key: '6cd2e5172ae2c4581b672a80bad96dbc372980ba', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'e2e465afca27df4b2b5831c223c93e483cbe5ed3', 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: 'ecb4a882296f4195a9ea123ee699ec55fc0fe55f', class: "d-table-row gap-2" }, h("span", { key: '6801b0a252336c9edfc1ffbdbdf54dc404fb80ca', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: 'ffb49e592ef36e469295f5c59284aa4be249f58d', 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: '652a8b454f305fc57ad1455869ac17e45fad27f9', class: "d-table-row gap-2" }, h("span", { key: '9c8f0399a88238643c029916e44c759f1db3c2f5', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: 'b20779034577e48a5960a91db06a5627e8c17282', 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: 'c02bb382f4dca09cb660c878ff2560815ce4d20a', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: 'e2cac0a0b92fff128b5d92675f2345ed7126f420', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '000d8e1d9f96c33608637780c8b2f9d7cc476213', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: 'bbcf4a7d6acc61a55ed33512b2297195a1bc6d72' }, h("h1", { key: '53ecca8c1f9d9a30a173dc058757df984e82a94e', class: "h4" }, "This payment is disputed and under review"), h("p", { key: '3afc7790dee77ec5934020ea42c8b9c47dda4d4b' }, "The cardholder is disputing this payment. A counter dispute has been submitEvent and is under review."))), ((_f = this.dispute) === null || _f === void 0 ? void 0 : _f.won) && (h("div", { key: 'bfd88724984130c42e15882859d01cf680b34696' }, h("h1", { key: '3ab454f4e8475770cd71aada9341c035137c7989', class: "h4" }, "This payment was disputed"), h("p", { key: 'dc3c81bd81a5bc139b0eb94bdaef779a7dd217fc' }, "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: '0bd9ca6a71e978e63fff49dbc105a9078d1c0f38' }, h("h1", { key: '3e6bdea906b38af5c5191b17cbf2482ba701a481', class: "h4" }, "This payment was disputed"), h("p", { key: '05f6d5c04c28a2128bb06d27ef085eeb33377094' }, "The cardholder disputed this payment and the card issuer has settled it their favor.")))));
     }
 }, [1, "justifi-dispute-notification", {
         "dispute": [16],

package/dist/module/dispute-response-actions.js

@@ -1,11 +1,10 @@
-import { A as Api } from './Api.js';
+import { A as Api, c as config } from './config.js';
 import './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
 import './SubAccount.js';
-import { c as config } from './config.js';
 import { a as ComponentErrorSeverity } from './ComponentError.js';
-import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
+import { g as getErrorMessage, a as getErrorCode } from './utils4.js';
 
 class DisputeService {
     async fetchDispute(disputeId, authToken) {

package/dist/module/dispute-response-core.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { D as DisputeManagementClickActions } from './event-types3.js';
-import { S as heading4 } from './parts.js';
+import { a0 as heading4 } from './parts.js';
 import { B as Button } from './button.js';
 import { d as defineCustomElement$f } from './custom-popper2.js';
 import { d as defineCustomElement$e } from './form-control-date2.js';
@@ -175,7 +175,7 @@ const DisputeResponseCore = /*@__PURE__*/ proxyCustomElement(class DisputeRespon
         return this.currentStep === 0;
     }
     render() {
-        return (h("div", { key: '4c1c801c82506c50ee304934ec0c42efc986f07c', class: "row gy-3" }, h("div", { key: '27c27411ac45d0a20f5fd99e4a11eb0efe6b0007', class: "col-12" }, h("h1", { key: '48aa1635accfafe2ed76e733296bade6fdeeddf5', class: "h4", part: heading4 }, "Counter dispute")), h("div", { key: '79ca608ae5ba5a4249556754972216a82104c004', class: "col-12" }, this.currentStepComponent), h("div", { key: '39ecb37977d852c3528f09afced344d40e2022ac', class: "col-12" }, h("div", { key: '23d7523bffc81324b8e99b5f2354c75f52af9d52', class: "d-flex gap-2 mt-4 justify-content-end" }, this.isFirstStep ? (h(Button, { variant: "secondary", onClick: () => this.onCancel(), disabled: this.isLoading, isLoading: this.isLoading }, "Cancel")) : (h(Button, { variant: "secondary", onClick: () => this.onBack(), disabled: this.isLoading, isLoading: this.isLoading }, "Back")), this.isLastStep ? (h(Button, { variant: "primary", onClick: () => this.onSubmit(), disabled: this.isLoading, isLoading: this.isLoading }, "Submit Counter Dispute")) : (h(Button, { variant: "primary", onClick: () => this.onNext(), disabled: this.isLoading, isLoading: this.isLoading }, "Next"))))));
+        return (h("div", { key: '1ef9afc69174ac55282cf69d2a274bb993f663c3', class: "row gy-3" }, h("div", { key: 'e031c76cb6d3b1ce494436a9ab8daaa11c705d0c', class: "col-12" }, h("h1", { key: '424df36d16527588c91b246b0f355ee289161e8e', class: "h4", part: heading4 }, "Counter dispute")), h("div", { key: '34a33e5de2842fddf668d45ca9e1e23a0827f061', class: "col-12" }, this.currentStepComponent), h("div", { key: 'b278568d8f69511b02642d1469adfc9ac9e7921d', class: "col-12" }, h("div", { key: '59c32d48e318f805f7c7466fa64b6ebdc9ca14b0', class: "d-flex gap-2 mt-4 justify-content-end" }, this.isFirstStep ? (h(Button, { variant: "secondary", onClick: () => this.onCancel(), disabled: this.isLoading, isLoading: this.isLoading }, "Cancel")) : (h(Button, { variant: "secondary", onClick: () => this.onBack(), disabled: this.isLoading, isLoading: this.isLoading }, "Back")), this.isLastStep ? (h(Button, { variant: "primary", onClick: () => this.onSubmit(), disabled: this.isLoading, isLoading: this.isLoading }, "Submit Counter Dispute")) : (h(Button, { variant: "primary", onClick: () => this.onNext(), disabled: this.isLoading, isLoading: this.isLoading }, "Next"))))));
     }
 }, [0, "justifi-dispute-response-core", {
         "updateDisputeResponse": [16],

package/dist/module/dispute-response.js

@@ -80,7 +80,7 @@ const DisputeResponse = /*@__PURE__*/ proxyCustomElement(class DisputeResponse e
         }
     }
     render() {
-        return (h(StyledHost, { key: '359300bac34b3e344e045750f354ce974f6a02ed' }, h("justifi-dispute-response-core", { key: '121c8c358b1a8a6e9084a9de00c977ff806be974', "onError-event": this.handleErrorEvent, "dispute-id": this.disputeId, disputeResponse: this.disputeResponse, createDisputeEvidence: this.createDisputeEvidence, updateDisputeResponse: this.updateDisputeResponse, submitDisputeResponse: this.submitDisputeResponse })));
+        return (h(StyledHost, { key: 'a74ece02e19d5f6d57fc43c0eb1ed5177309b01b' }, h("justifi-dispute-response-core", { key: 'd0ad4a758750616ebce34964c9647606ff72c357', "onError-event": this.handleErrorEvent, "dispute-id": this.disputeId, disputeResponse: this.disputeResponse, createDisputeEvidence: this.createDisputeEvidence, updateDisputeResponse: this.updateDisputeResponse, submitDisputeResponse: this.submitDisputeResponse })));
     }
     ;
     static get watchers() { return {