@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

package/dist/esm/justifi-checkout-core.entry.js

@@ -1,23 +1,20 @@
-import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
-import { b as formatCurrency } from './utils-1df1e55a.js';
-import { c as config } from './config-27764a9d.js';
+import { r as registerInstance, c as createEvent, h } from './index-29fcfdf5.js';
+import { b as formatCurrency } from './utils-54543523.js';
+import { c as config } from './config-187b3ae1.js';
 import { C as Checkout } from './Checkout-0b4086f8.js';
 import { C as ComponentErrorSeverity } from './ComponentError-3ce7f437.js';
-import { i as insuranceValuesOn, v as validateInsuranceValues, a as insuranceValues } from './insurance-state-8ce01e59.js';
-import { B as Button } from './button-34e75e0f.js';
-import { S as StyledHost } from './styled-host-e0ddb759.js';
-import { S as Skeleton } from './skeleton-145a80d4.js';
-
-const checkoutCoreCss = ":host{display:block}justifi-payment-method-form{display:block;margin-left:calc(var(--jfi-layout-padding) * -1);margin-right:calc(var(--jfi-layout-padding) * -1)}.jfi-checkout-core{color:var(--jfi-body-color)}*::part(label){color:var(--jfi-form-label-color);font-family:var(--jfi-form-label-font-family);font-weight:var(--jfi-form-label-font-weight);font-size:var(--jfi-form-label-font-size);margin:var(--jfi-form-label-margin)}*::part(input){font-family:var(--jfi-layout-font-family);background-color:var(--jfi-form-control-background-color);border-color:var(--jfi-form-control-border-color);border-width:var(--jfi-form-control-border-width);border-bottom-width:var(--jfi-form-control-border-bottom-width);border-left-width:var(--jfi-form-control-border-left-width);border-right-width:var(--jfi-form-control-border-right-width);border-top-width:var(--jfi-form-control-border-top-width);border-radius:var(--jfi-form-control-border-radius);border-style:var(--jfi-form-control-border-style);box-shadow:var(--jfi-form-control-box-shadow);color:var(--jfi-form-control-color);font-size:var(--jfi-form-control-font-size);font-weight:var(--jfi-form-control-font-weight);line-height:var(--jfi-form-control-line-height);margin:var(--jfi-form-control-margin);padding:var(--jfi-form-control-padding)}*::part(input):focus{color:var(--jfi-form-control-color-focus);border-color:var(--jfi-form-control-border-color-focus);box-shadow:var(--jfi-form-control-box-shadow-focus)}*::part(input-invalid){border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error)}*::part(input-invalid):focus{border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error-focus)}*::part(invalid-feedback){color:var(--jfi-error-message-color);font-size:var(--jfi-error-message-font-size);margin:var(--jfi-error-message-margin);line-height:normal}.jfi-submit-button{font-family:var(--jfi-layout-font-family);color:var(--jfi-submit-button-color);background-color:var(--jfi-submit-button-background-color);border-color:var(--jfi-submit-button-border-color);padding:var(--jfi-submit-button-padding);font-size:var(--jfi-submit-button-font-size);border-radius:var(--jfi-submit-button-border-radius);width:var(--jfi-submit-button-width);box-shadow:var(--jfi-submit-button-box-shadow);line-height:var(--jfi-submit-button-line-height);text-transform:var(--jfi-submit-button-text-transform)}.jfi-submit-button:hover{color:var(--jfi-submit-button-color-hover);background-color:var(--jfi-submit-button-background-color-hover);border-color:var(--jfi-submit-button-border-color-hover)}.jfi-submit-button:focus{color:var(--jfi-submit-button-color-focus);background-color:var(--jfi-submit-button-background-color-focus);border-color:var(--jfi-submit-button-border-color-focus)}.btn.jfi-submit-button:active{color:var(--jfi-submit-button-color-active);background-color:var(--jfi-submit-button-background-color-active);border-color:var(--jfi-submit-button-border-color-active)}.btn.jfi-submit-button-loading{min-width:75px;color:var(--jfi-submit-button-color-loading);background-color:var(--jfi-submit-button-background-color-loading);border-color:var(--jfi-submit-button-border-color-loading)}.btn.jfi-submit-button-loading .spinner-border{border-top-color:var(--jfi-submit-button-color-loading);border-bottom-color:var(--jfi-submit-button-color-loading);border-left-color:var(--jfi-submit-button-color-loading)}";
-const JustifiCheckoutCoreStyle0 = checkoutCoreCss;
-
-const headerCss = ".jfi-header{color:var(--jfi-header-color);border-bottom:var(--jfi-header-border)}";
-const JustifiCheckoutCoreStyle1 = headerCss;
+import { i as insuranceValuesOn, v as validateInsuranceValues, H as Header2, a as insuranceValues } from './insurance-state-8fc9376f.js';
+import { B as Button } from './button-1886a33d.js';
+import { S as StyledHost } from './styled-host-32228b45.js';
+import { t as text } from './parts-186d437f.js';
+import { S as Skeleton } from './skeleton-8f71cdf7.js';
+import { H as Header3 } from './header-3-a1c6d475.js';
+import './index-a47fdc7f.js';
 
 const CheckoutCore = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.submitted = createEvent(this, "submitted", 7);
+        this.submitEvent = createEvent(this, "submit-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.loaded = createEvent(this, "loaded", 7);
         this.completeCheckout = async (payment) => {
@@ -27,8 +24,8 @@ const CheckoutCore = class {
                 onError: this.onError,
             });
         };
-        this.onSubmitted = (data) => {
-            this.submitted.emit(data);
+        this.onSubmitted = (response) => {
+            this.submitEvent.emit({ response: response });
             this.renderState = 'success';
         };
         this.onError = ({ error, code, severity }) => {
@@ -129,16 +126,15 @@ const CheckoutCore = class {
     }
     get paymentType() {
         var _a, _b, _c, _d, _e;
-        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { variant: "rounded", 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, 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", { class: "jfi-payment-description" }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", { class: "jfi-payment-total" }, h("span", { class: "jfi-payment-total-label" }, "Total"), "\u00A0", h("span", { class: "jfi-payment-total-amount" }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
+        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: '5f0d9ae550582f13376cc242bd8654e440f83219' }, h("div", { key: '6acd2acafa61be4a59b6ebbfdd7f14aac282d1dc', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '23089c7a0e688fc44ab66dc46470f115bb430d0f', class: "col-12" }, h("h2", { key: '1888832c214484c0904135029f5f6bbdba356049', class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.summary), h("div", { key: '47cac0b14213043a8b7c15127c17b51e92e6bef3', class: "col-12" }, h("slot", { key: '3548f92bee3b6b23bd74a8578601b1f1aac05960', name: "insurance" })), h("div", { key: 'ee3a5b2a7598ded7c88a17400e01b4dd8a4048bf', class: "col-12 mt-4" }, h("h2", { key: '65d196aa405f018a2f0c6606363a6d3fc0f957d6', class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { key: '10b7613dec7240a342d147c11431a9217fd514e5', class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { key: '29d3f1cca38f76f8cdee726cc779a0e0853124a2', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: 'ebfdd182534f510887a8921d89054ae329d01cfd', class: "col-12" }, h("div", { key: '1a607695a7de0ef135e9ae2ee1ac63e174e71135', class: "d-flex justify-content-end" }, h(Button, { key: 'f3e9b863354b022f872b27434e1a020d03c6979e', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
+        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"))))));
     }
 };
-CheckoutCore.style = JustifiCheckoutCoreStyle0 + JustifiCheckoutCoreStyle1;
 
 export { CheckoutCore as justifi_checkout_core };

package/dist/esm/justifi-checkout.entry.js

@@ -1,16 +1,16 @@
-import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
+import { r as registerInstance, c as createEvent, h } from './index-29fcfdf5.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-3ce7f437.js';
 import { g as getErrorMessage, a as getErrorCode } from './utils-b10dae27.js';
-import { C as CheckoutService } from './checkout.service-c1e44e0c.js';
-import { J as JustifiAnalytics } from './Analytics-77dc80f3.js';
-import { c as checkPkgVersion } from './check-pkg-version-fbf01ce7.js';
-import './config-27764a9d.js';
+import { C as CheckoutService } from './checkout.service-32a6ebe8.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-157854b7.js';
+import './config-187b3ae1.js';
 import './Api-391d00e2.js';
 import './Checkout-0b4086f8.js';
 import './Pagination-afc8f96d.js';
-import './Payment-2a868d0c.js';
+import './Payment-4f72d277.js';
+import './Dispute-5fd28ec9.js';
 import './SubAccount-99a00594.js';
-import './package-627f73c1.js';
+import './package-9e3b7f9e.js';
 
 const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
     var _a;
@@ -118,11 +118,11 @@ const Checkout = class {
         this.checkoutCoreRef.fillBillingForm(fields);
     }
     render() {
-        return (h("justifi-checkout-core", { key: '24400b7f50a91d2c24e372a030fde6b0a1af9e66', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
+        return (h("justifi-checkout-core", { key: '1a31304be74cae8c70683b9a26319d59f1462362', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
                 if (el) {
                     this.checkoutCoreRef = el;
                 }
-            } }, h("div", { key: '0f530bd18cab94b2ab3707b22908198878d34a4a', slot: "insurance" }, h("slot", { key: '94d10781b8df51ab34df5e414e304537682d8c2c', name: "insurance" }))));
+            } }, h("div", { key: 'ad9e6466d374849862f48c25c61a2a511b8465af', slot: "insurance" }, h("slot", { key: 'eb94e33e0ab10320aede52292f732de5d92e3341', name: "insurance" }))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],

package/dist/esm/justifi-checkouts-list-filters.entry.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, h } from './index-29fcfdf5.js';
+import { q as queryParams, c as clearParams } from './checkouts-list-params-state-1d968971.js';
+import { S as StyledHost } from './styled-host-32228b45.js';
+import './index-a47fdc7f.js';
+
+const CheckoutsListFilters = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.setParamsOnChange = (name, value) => {
+            queryParams[name] = value;
+        };
+    }
+    get checkoutStatusOptions() {
+        return [
+            { label: 'All', value: '' },
+            { label: 'Created', value: 'created' },
+            { label: 'Completed', value: 'completed' },
+            { label: 'Attempted', value: 'attempted' },
+            { label: 'Expired', value: 'expired' },
+        ];
+    }
+    get checkoutPaymentModeOptions() {
+        return [
+            { label: 'All', value: '' },
+            { label: 'E-commerce', value: 'ecom' },
+            { label: 'BNPL', value: 'bnpl' },
+        ];
+    }
+    render() {
+        return (h(StyledHost, { key: '7eedab4f46529871c876c5b36c3dfdc4a76442bc' }, h("table-filters-menu", { key: '645593908d9b2b258a520d6fd469f668a34d5980', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: 'dd06db2469e9666efd44f0625bd41a69dd45fb1a', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'dba0a96a17a1c255236e0733fe5394638f1abc1f', class: "p-2" }, h("form-control-select", { key: 'a833d0ece1a88f04f9a68a27098c035b71bc2d86', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.status || '' })), h("div", { key: 'bb90e2e96b0542e8fb00a2ccd7cbb43f4dc8b6a8', class: "p-2" }, h("form-control-select", { key: 'c214d31111ad970f9f40c0b6b948302e4702d2ba', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.payment_mode || '' }))))));
+    }
+};
+
+export { CheckoutsListFilters as justifi_checkouts_list_filters };

package/dist/esm/justifi-checkouts-list.entry.js

@@ -1,21 +1,21 @@
-import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
+import { r as registerInstance, c as createEvent, h } from './index-29fcfdf5.js';
 import { C as Checkout } from './Checkout-0b4086f8.js';
 import './Pagination-afc8f96d.js';
-import './Payment-2a868d0c.js';
+import './Payment-4f72d277.js';
 import './SubAccount-99a00594.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-3ce7f437.js';
 import { g as getErrorMessage, a as getErrorCode } from './utils-b10dae27.js';
-import { c as checkPkgVersion } from './check-pkg-version-fbf01ce7.js';
-import { c as config } from './config-27764a9d.js';
-import { J as JustifiAnalytics } from './Analytics-77dc80f3.js';
-import { C as CheckoutService } from './checkout.service-c1e44e0c.js';
-import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts-dd20cfa4.js';
-import { S as StyledHost } from './styled-host-e0ddb759.js';
-import { t as tableExportedParts } from './exported-parts-70e7a12b.js';
-import { d as defaultColumnsKeys } from './checkouts-table-cd33b57c.js';
-import './package-627f73c1.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-157854b7.js';
+import { c as config } from './config-187b3ae1.js';
+import { C as CheckoutService } from './checkout.service-32a6ebe8.js';
+import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts-0b8af245.js';
+import { S as StyledHost } from './styled-host-32228b45.js';
+import { d as defaultColumnsKeys } from './checkouts-table-8b116232.js';
+import './Dispute-5fd28ec9.js';
+import './package-9e3b7f9e.js';
 import './Api-391d00e2.js';
-import './utils-1df1e55a.js';
+import './utils-54543523.js';
+import './parts-186d437f.js';
 
 const makeGetCheckouts = ({ accountId, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;
@@ -106,7 +106,7 @@ const CheckoutsList = class {
         }
     }
     render() {
-        return (h(StyledHost, { key: '34696607c3d7588b1909a055cbc80a8b96689037', exportparts: tableExportedParts }, h("checkouts-list-core", { key: 'ee0682ff230d2ae4ec38dc7caef942a85acd4871', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'f96da05a065d13a24cb4de2cc114a0dc10833ab2' }, h("checkouts-list-core", { key: '4e98c537644a3e22fb63d15736f5c22ff26a931f', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/esm/justifi-details.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-57431c24.js';
-import { E as ErrorState } from './utils-218275b7.js';
-import { S as StyledHost } from './styled-host-e0ddb759.js';
+import { r as registerInstance, h, H as Host } from './index-29fcfdf5.js';
+import { E as ErrorState } from './utils-d7633e66.js';
+import './parts-186d437f.js';
 
 const Details = class {
     constructor(hostRef) {
@@ -8,7 +8,7 @@ const Details = class {
         this.errorMessage = undefined;
     }
     render() {
-        return (h(StyledHost, { key: 'c7c725936e4987ca76781b7edc73f1b67e00f21a', exportParts: 'detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info' }, this.errorMessage ?
+        return (h(Host, { key: '14ab849e7b60f834d823bb6d10f8b772a1184ad4' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));

package/dist/esm/justifi-dispute-management-core.entry.js

@@ -1,24 +1,63 @@
-import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
-import { S as StyledHost } from './styled-host-e0ddb759.js';
-import { D as DisputeManagementClickEvents } from './dispute-4d2e0a04.js';
+import { r as registerInstance, c as createEvent, h } from './index-29fcfdf5.js';
+import { D as DisputeManagementClickActions } from './event-types-07cdb9a0.js';
+import { a as Dispute, D as DisputeStatus } from './Dispute-5fd28ec9.js';
 
 const DisputeManagementCore = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.submitted = createEvent(this, "submitted", 7);
-        this.showCounterDispute = false;
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.getDispute = undefined;
+        this.disputeId = undefined;
+        this.authToken = undefined;
+        this.dispute = undefined;
+        this.isLoading = true;
+        this.showDisputeResponseForm = false;
     }
-    counterDisputeHandler(event) {
-        if (event.detail.name === DisputeManagementClickEvents.counterDispute) {
-            this.showCounterDispute = true;
+    disputeResponseHandler(event) {
+        if (event.detail.name === DisputeManagementClickActions.respondToDispute) {
+            this.showDisputeResponseForm = true;
         }
-        if (event.detail.name === DisputeManagementClickEvents.cancelDispute) {
-            this.showCounterDispute = false;
+        if (event.detail.name === DisputeManagementClickActions.cancelDispute) {
+            this.showDisputeResponseForm = false;
         }
     }
+    disputeSubmittedHandler() {
+        this.fetchData();
+    }
+    componentWillLoad() {
+        if (this.getDispute) {
+            this.fetchData();
+        }
+    }
+    updateOnPropChange() {
+        this.fetchData();
+    }
+    fetchData() {
+        this.isLoading = true;
+        this.getDispute({
+            onSuccess: ({ dispute }) => {
+                this.dispute = new Dispute(dispute);
+                this.isLoading = false;
+                if (this.dispute.status !== DisputeStatus.needsResponse) {
+                    this.showDisputeResponseForm = false;
+                }
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.isLoading = false;
+            },
+        });
+    }
     render() {
-        return (h(StyledHost, { key: '9bd815e88277ff5d96239bb6d005e1469f2762d2' }, this.showCounterDispute ? h("justifi-counter-dispute", null) : h("justifi-dispute-notification", null)));
+        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 }))));
     }
+    static get watchers() { return {
+        "getDispute": ["updateOnPropChange"]
+    }; }
 };
 
 export { DisputeManagementCore as justifi_dispute_management_core };

package/dist/esm/justifi-dispute-management.entry.js

@@ -1,12 +1,97 @@
-import { r as registerInstance, h } from './index-57431c24.js';
+import { r as registerInstance, c as createEvent, h } from './index-29fcfdf5.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-3ce7f437.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-157854b7.js';
+import { a as Dispute } from './Dispute-5fd28ec9.js';
+import { g as getErrorMessage, a as getErrorCode } from './utils-b10dae27.js';
+import { D as DisputeService } from './dispute.service-4e5059aa.js';
+import { c as config } from './config-187b3ae1.js';
+import './package-9e3b7f9e.js';
+import './Api-391d00e2.js';
+import './Checkout-0b4086f8.js';
+import './Pagination-afc8f96d.js';
+import './Payment-4f72d277.js';
+import './SubAccount-99a00594.js';
+
+const makeGetDispute = ({ id, authToken, service, apiOrigin }) => async ({ onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.fetchDispute(id, authToken, apiOrigin);
+        if (!response.error) {
+            const pagingInfo = Object.assign({}, response.page_info);
+            const dispute = new Dispute(response.data);
+            onSuccess({ dispute, pagingInfo });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};
 
 const DisputeManagement = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.handleErrorEvent = event => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
+        this.disputeId = undefined;
+        this.authToken = undefined;
+        this.apiOrigin = config.proxyApiOrigin;
+        this.getDispute = undefined;
+        this.errorMessage = null;
+    }
+    componentWillLoad() {
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+        this.initializeGetDispute();
+    }
+    disconnectedCallback() {
+        this.analytics.cleanup();
+    }
+    ;
+    propChanged() {
+        this.initializeGetDispute();
+    }
+    initializeGetDispute() {
+        if (this.disputeId && this.authToken) {
+            this.getDispute = makeGetDispute({
+                id: this.disputeId,
+                authToken: this.authToken,
+                service: new DisputeService(),
+                apiOrigin: this.apiOrigin,
+            });
+        }
+        else {
+            this.errorMessage = 'Dispute ID and Auth Token are required';
+            this.errorEvent.emit({
+                message: this.errorMessage,
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
     }
     render() {
-        return (h("justifi-dispute-management-core", { key: 'ed28c52d4621058967a53f79c1f00db1d453f5a9' }));
+        return (h("justifi-dispute-management-core", { key: '3e2a5b24484e8f1e198168910be7880732da3931', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
     }
+    static get watchers() { return {
+        "disputeId": ["propChanged"],
+        "authToken": ["propChanged"]
+    }; }
 };
 
 export { DisputeManagement as justifi_dispute_management };