@justifi/webcomponents 4.7.1-rc.0 → 4.7.2-rc.0

package/dist/cjs/Api-548eaa62.js

@@ -106,5 +106,3 @@ function handleError(requestUrl) {
 }
 
 exports.Api = Api;
-
-//# sourceMappingURL=Api-548eaa62.js.map

package/dist/cjs/Pagination-cae1dcbd.js

@@ -11,5 +11,3 @@ const ExtendedPagingDefaults = Object.assign(Object.assign({}, pagingDefaults),
 
 exports.ExtendedPagingDefaults = ExtendedPagingDefaults;
 exports.pagingDefaults = pagingDefaults;
-
-//# sourceMappingURL=Pagination-cae1dcbd.js.map

package/dist/cjs/{Payout-68a99ee3.js → Payout-f8240e9c.js}

@@ -26,6 +26,54 @@ var PaymentDisputedStatuses;
   PaymentDisputedStatuses["lost"] = "lost";
   PaymentDisputedStatuses["open"] = "open";
 })(PaymentDisputedStatuses || (PaymentDisputedStatuses = {}));
+class PaymentMethod {
+  constructor(paymentMethod) {
+    this.card = paymentMethod.card ? new Card(paymentMethod.card) : undefined;
+    this.bank_account = paymentMethod.bank_account
+      ? new BankAccount(paymentMethod.bank_account)
+      : undefined;
+  }
+  get payersName() {
+    if (this.card) {
+      return this.card.name;
+    }
+    else if (this.bank_account) {
+      return this.bank_account.name;
+    }
+    return null;
+  }
+  get lastFourDigits() {
+    if (this.card) {
+      return `**** ${this.card.acct_last_four}`;
+    }
+    else if (this.bank_account) {
+      return `**** ${this.bank_account.acct_last_four}`;
+    }
+    return null;
+  }
+}
+class BankAccount {
+  constructor(bankAccount) {
+    this.id = bankAccount.id;
+    this.acct_last_four = bankAccount.acct_last_four;
+    this.name = bankAccount.name;
+    this.brand = bankAccount.brand;
+    this.token = bankAccount.token;
+    this.created_at = bankAccount.created_at;
+    this.updated_at = bankAccount.updated_at;
+  }
+}
+class Card {
+  constructor(card) {
+    this.id = card.id || '';
+    this.acct_last_four = card.acct_last_four;
+    this.name = card.name;
+    this.brand = card.brand;
+    this.token = card.token;
+    this.created_at = card.created_at;
+    this.updated_at = card.updated_at;
+  }
+}
 class Payment {
   constructor(payment) {
     this.id = payment.id;
@@ -46,7 +94,7 @@ class Payment {
     this.fee_amount = payment.fee_amount;
     this.is_test = payment.is_test;
     this.metadata = payment.metadata;
-    this.payment_method = payment.payment_method;
+    this.payment_method = new PaymentMethod(payment.payment_method);
     this.payment_intent_id = payment.payment_intent_id;
     this.refunded = payment.refunded;
     this.status = payment.status;
@@ -133,5 +181,3 @@ class Payout {
 exports.Payment = Payment;
 exports.PaymentBalanceTransaction = PaymentBalanceTransaction;
 exports.Payout = Payout;
-
-//# sourceMappingURL=Payout-68a99ee3.js.map

package/dist/cjs/SubAccount-f47c8522.js

@@ -105,5 +105,3 @@ class SubAccount {
 }
 
 exports.SubAccount = SubAccount;
-
-//# sourceMappingURL=SubAccount-f47c8522.js.map

package/dist/cjs/additional-questions-details_5.cjs.entry.js

@@ -69,8 +69,8 @@ const JustifiRepresentativeDetails = class {
     this.representative = undefined;
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    return (index.h(index.Host, null, index.h(utils.DetailSection, { sectionTitle: "Representative Details" }, index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12 col-md-6" }, index.h(utils.DetailItem, { title: "Name", value: (_a = this.representative) === null || _a === void 0 ? void 0 : _a.name }), index.h(utils.DetailItem, { title: "ID", value: (_b = this.representative) === null || _b === void 0 ? void 0 : _b.id }), index.h(utils.DetailItem, { title: "Representative Address", value: (_c = this.representative) === null || _c === void 0 ? void 0 : _c.address.line1 }), index.h(utils.DetailItem, { title: "Representative Created At", value: utils$1.formatMediumDate((_d = this.representative) === null || _d === void 0 ? void 0 : _d.created_at) })), index.h("div", { class: "col-12 col-md-6" }, index.h(utils.DetailItem, { title: "Title", value: (_e = this.representative) === null || _e === void 0 ? void 0 : _e.title }), index.h(utils.DetailItem, { title: "Is Owner?", value: (_f = this.representative) === null || _f === void 0 ? void 0 : _f.is_owner.toString() }), index.h(utils.DetailItem, { title: "Date Of Birth", value: utils$1.formatMediumDate(new Date(Number((_g = this.representative) === null || _g === void 0 ? void 0 : _g.dob_year), Number((_h = this.representative) === null || _h === void 0 ? void 0 : _h.dob_month) - 1, Number((_j = this.representative) === null || _j === void 0 ? void 0 : _j.dob_day))) }), index.h(utils.DetailItem, { title: "Email", value: (_k = this.representative) === null || _k === void 0 ? void 0 : _k.email }), index.h(utils.DetailItem, { title: "Phone", value: (_l = this.representative) === null || _l === void 0 ? void 0 : _l.phone }), index.h(utils.DetailItem, { title: "Representative Updated At", value: utils$1.formatMediumDate((_m = this.representative) === null || _m === void 0 ? void 0 : _m.updated_at) }))))));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    return (index.h(index.Host, null, index.h(utils.DetailSection, { sectionTitle: "Representative Details" }, index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12 col-md-6" }, index.h(utils.DetailItem, { title: "Name", value: (_a = this.representative) === null || _a === void 0 ? void 0 : _a.name }), index.h(utils.DetailItem, { title: "ID", value: (_b = this.representative) === null || _b === void 0 ? void 0 : _b.id }), index.h(utils.DetailItem, { title: "Representative Address", value: (_c = this.representative) === null || _c === void 0 ? void 0 : _c.address.line1 }), index.h(utils.DetailItem, { title: "Created At", value: ((_d = this.representative) === null || _d === void 0 ? void 0 : _d.created_at) && utils$1.formatMediumDate((_e = this.representative) === null || _e === void 0 ? void 0 : _e.created_at) })), index.h("div", { class: "col-12 col-md-6" }, index.h(utils.DetailItem, { title: "Title", value: (_f = this.representative) === null || _f === void 0 ? void 0 : _f.title }), index.h(utils.DetailItem, { title: "Is Owner?", value: (_g = this.representative) === null || _g === void 0 ? void 0 : _g.is_owner.toString() }), index.h(utils.DetailItem, { title: "Date Of Birth", value: this.representative && utils$1.formatMediumDate(new Date(Number((_h = this.representative) === null || _h === void 0 ? void 0 : _h.dob_year), Number((_j = this.representative) === null || _j === void 0 ? void 0 : _j.dob_month) - 1, Number((_k = this.representative) === null || _k === void 0 ? void 0 : _k.dob_day))) }), index.h(utils.DetailItem, { title: "Email", value: (_l = this.representative) === null || _l === void 0 ? void 0 : _l.email }), index.h(utils.DetailItem, { title: "Phone", value: (_m = this.representative) === null || _m === void 0 ? void 0 : _m.phone }), index.h(utils.DetailItem, { title: "Updated At", value: this.representative && utils$1.formatMediumDate((_o = this.representative) === null || _o === void 0 ? void 0 : _o.updated_at) }))))));
   }
 };
 JustifiRepresentativeDetails.style = representativeDetailsCss;
@@ -80,5 +80,3 @@ exports.generic_info_details = GenericInfoDetails;
 exports.legal_address_details = LegalAddressDetails;
 exports.owner_details = OwnerDetails;
 exports.representative_details = JustifiRepresentativeDetails;
-
-//# sourceMappingURL=additional-questions-details_5.cjs.entry.js.map

package/dist/cjs/business-form-schema-fe831c30.js

@@ -146,5 +146,3 @@ const businessFormSchema = index_esm.create$3(Object.assign(Object.assign({}, bu
 exports.BusinessStructureOptions = BusinessStructureOptions;
 exports.BusinessTypeOptions = BusinessTypeOptions;
 exports.businessFormSchema = businessFormSchema;
-
-//# sourceMappingURL=business-form-schema-fe831c30.js.map

package/dist/cjs/config-a156df17.js

@@ -13,5 +13,3 @@ const config = {
 };
 
 exports.config = config;
-
-//# sourceMappingURL=config-a156df17.js.map

package/dist/cjs/form-1e732a9d.js

@@ -727,5 +727,3 @@ class FormController {
 }
 
 exports.FormController = FormController;
-
-//# sourceMappingURL=form-1e732a9d.js.map

package/dist/cjs/form-control-datepart_2.cjs.entry.js

@@ -57,7 +57,7 @@ const DatePartInput = class {
   }
   updateInput(newValue) {
     if (this.imask) {
-      this.imask.value = newValue;
+      this.imask.value = String(newValue);
     }
   }
   disconnectedCallback() {
@@ -127,5 +127,3 @@ NumberInputMasked.style = formControlNumberCss;
 
 exports.form_control_datepart = DatePartInput;
 exports.form_control_number_masked = NumberInputMasked;
-
-//# sourceMappingURL=form-control-datepart_2.cjs.entry.js.map

package/dist/cjs/form-control-monetary.cjs.entry.js

@@ -61,5 +61,3 @@ const MonetaryInput = class {
 MonetaryInput.style = formControlNumberCss;
 
 exports.form_control_monetary = MonetaryInput;
-
-//# sourceMappingURL=form-control-monetary.cjs.entry.js.map

package/dist/cjs/form-control-number_3.cjs.entry.js

@@ -129,5 +129,3 @@ TextInput.style = formControlTextCss;
 exports.form_control_number = NumberInput;
 exports.form_control_select = SelectInput;
 exports.form_control_text = TextInput;
-
-//# sourceMappingURL=form-control-number_3.cjs.entry.js.map

package/dist/cjs/helpers-c505d861.js

@@ -24,5 +24,3 @@ const parseForPatching = (data) => {
 };
 
 exports.parseForPatching = parseForPatching;
-
-//# sourceMappingURL=helpers-c505d861.js.map

package/dist/cjs/index-5a880722.js

@@ -3229,5 +3229,3 @@ try {
 } catch {}
 
 exports.IMask = IMask;
-
-//# sourceMappingURL=index-5a880722.js.map

package/dist/cjs/index-c5ace247.js

@@ -1771,5 +1771,3 @@ exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
-
-//# sourceMappingURL=index-c5ace247.js.map

package/dist/cjs/index.cjs.js

@@ -1,4 +1,2 @@
 'use strict';
 
-
-//# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.esm-91ec051e.js

@@ -2237,5 +2237,3 @@ exports.create$3 = create$3;
 exports.create$5 = create$5;
 exports.create$6 = create$6;
 exports.create$7 = create$7;
-
-//# sourceMappingURL=index.esm-91ec051e.js.map

package/dist/cjs/justifi-additional-questions_6.cjs.entry.js

@@ -417,5 +417,3 @@ exports.justifi_business_generic_info = BusinessGenericInfo;
 exports.justifi_business_owners = BusinessOwners;
 exports.justifi_business_representative = BusinessRepresentative;
 exports.justifi_legal_address_form = LegalAddressForm;
-
-//# sourceMappingURL=justifi-additional-questions_6.cjs.entry.js.map

package/dist/cjs/justifi-bank-account-form.cjs.entry.js

@@ -67,5 +67,3 @@ const BankAccountForm = class {
 };
 
 exports.justifi_bank_account_form = BankAccountForm;
-
-//# sourceMappingURL=justifi-bank-account-form.cjs.entry.js.map

package/dist/cjs/justifi-billing-form_2.cjs.entry.js

@@ -103,5 +103,3 @@ PaymentMethodSelector.style = paymentMethodSelectorCss;
 
 exports.justifi_billing_form = BillingForm;
 exports.justifi_payment_method_selector = PaymentMethodSelector;
-
-//# sourceMappingURL=justifi-billing-form_2.cjs.entry.js.map

package/dist/cjs/justifi-business-details.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c5ace247.js');
 const Api = require('./Api-548eaa62.js');
 require('./Pagination-cae1dcbd.js');
-require('./Payout-68a99ee3.js');
+require('./Payout-f8240e9c.js');
 const utils = require('./utils-4622829d.js');
 const config = require('./config-a156df17.js');
 
@@ -26,15 +26,16 @@ const BusinessDetails = class {
     this.renderState = RENDER_STATES.LOADING;
     this.errorMessage = 'An error ocurred.';
     this.fetchBusiness = this.fetchBusiness.bind(this);
-    this.setError = this.setError.bind(this);
   }
   async componentWillLoad() {
     if (!this.authToken) {
-      this.setError('Missing auth-token. The form will not be functional without it.');
+      this.errorMessage = 'Missing auth-token. The form will not be functional without it.';
+      console.error(this.errorMessage);
       return;
     }
     if (!this.businessId) {
-      this.setError('Missing business-id. The form will not be functional without it.');
+      this.errorMessage = 'Missing business-id. The form will not be functional without it.';
+      console.error(this.errorMessage);
       return;
     }
     this.api = Api.Api(this.authToken, config.config.proxyApiOrigin);
@@ -45,27 +46,30 @@ const BusinessDetails = class {
     try {
       const response = await this.api.get(`entities/business/${businessId}`);
       if (response.error) {
-        this.setError(response.error.message);
+        this.errorMessage = `${this.errorMessage}: ${response.error}`;
+        console.error(this.errorMessage);
+        this.renderState = RENDER_STATES.ERROR;
         return;
       }
       this.business = response.data;
       this.renderState = RENDER_STATES.READY;
     }
     catch (error) {
-      this.setError(error);
+      this.errorMessage = `${this.errorMessage}: ${error}`;
+      console.error(this.errorMessage);
+      this.renderState = RENDER_STATES.ERROR;
+    }
+    finally {
+      this.renderState = RENDER_STATES.READY;
     }
-  }
-  setError(error) {
-    this.errorMessage = error || this.errorMessage;
-    this.renderState = RENDER_STATES.ERROR;
   }
   render() {
     var _a, _b, _c;
     if (this.renderState === RENDER_STATES.LOADING) {
-      return utils.LoadingState;
+      return index.h(index.Host, null, utils.LoadingState);
     }
     if (this.renderState === RENDER_STATES.ERROR) {
-      return utils.ErrorState(this.errorMessage);
+      return index.h(index.Host, null, utils.ErrorState(this.errorMessage));
     }
     return (index.h(index.Host, null, index.h("generic-info-details", { business: this.business }), index.h("legal-address-details", { legalAddress: (_a = this.business) === null || _a === void 0 ? void 0 : _a.legal_address }), index.h("representative-details", { representative: (_b = this.business) === null || _b === void 0 ? void 0 : _b.representative }), index.h("owner-details", { owners: (_c = this.business) === null || _c === void 0 ? void 0 : _c.owners }), index.h("additional-questions-details", { business: this.business })));
   }
@@ -73,5 +77,3 @@ const BusinessDetails = class {
 BusinessDetails.style = businessDetailsCss;
 
 exports.justifi_business_details = BusinessDetails;
-
-//# sourceMappingURL=justifi-business-details.cjs.entry.js.map

package/dist/cjs/justifi-business-form-stepped.cjs.entry.js

@@ -7,7 +7,7 @@ const form = require('./form-1e732a9d.js');
 const businessFormSchema = require('./business-form-schema-fe831c30.js');
 const Api = require('./Api-548eaa62.js');
 require('./Pagination-cae1dcbd.js');
-require('./Payout-68a99ee3.js');
+require('./Payout-f8240e9c.js');
 const helpers = require('./helpers-c505d861.js');
 const config = require('./config-a156df17.js');
 require('./index.esm-91ec051e.js');
@@ -27,6 +27,7 @@ const BusinessFormStepped = class {
     this.authToken = undefined;
     this.accountId = undefined;
     this.businessId = undefined;
+    this.testMode = false;
     this.isLoading = false;
     this.currentStep = 0;
     this.totalSteps = 4;
@@ -64,6 +65,11 @@ const BusinessFormStepped = class {
     }
   }
   async sendData(onSuccess) {
+    // Stopgap solution to prevent sending data in storybook examples.
+    if (this.testMode) {
+      onSuccess();
+      return;
+    }
     this.isLoading = true;
     try {
       const data = this.formController.values.getValue();
@@ -127,5 +133,3 @@ const BusinessFormStepped = class {
 BusinessFormStepped.style = businessFormSteppedCss;
 
 exports.justifi_business_form_stepped = BusinessFormStepped;
-
-//# sourceMappingURL=justifi-business-form-stepped.cjs.entry.js.map

package/dist/cjs/justifi-business-form.cjs.entry.js

@@ -7,7 +7,7 @@ const form = require('./form-1e732a9d.js');
 const businessFormSchema = require('./business-form-schema-fe831c30.js');
 const Api = require('./Api-548eaa62.js');
 require('./Pagination-cae1dcbd.js');
-require('./Payout-68a99ee3.js');
+require('./Payout-f8240e9c.js');
 const helpers = require('./helpers-c505d861.js');
 const config = require('./config-a156df17.js');
 require('./index.esm-91ec051e.js');
@@ -86,5 +86,3 @@ const BusinessForm = class {
 BusinessForm.style = businessFormCss;
 
 exports.justifi_business_form = BusinessForm;
-
-//# sourceMappingURL=justifi-business-form.cjs.entry.js.map

package/dist/cjs/justifi-business-list.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c5ace247.js');
 const Api = require('./Api-548eaa62.js');
 const Pagination = require('./Pagination-cae1dcbd.js');
-require('./Payout-68a99ee3.js');
+require('./Payout-f8240e9c.js');
 const utils = require('./utils-13d069be.js');
 const config = require('./config-a156df17.js');
 
@@ -156,5 +156,3 @@ const BusinessList = class {
 BusinessList.style = businessListCss;
 
 exports.justifi_business_list = BusinessList;
-
-//# sourceMappingURL=justifi-business-list.cjs.entry.js.map

package/dist/cjs/justifi-card-form.cjs.entry.js

@@ -68,5 +68,3 @@ const CardForm = class {
 };
 
 exports.justifi_card_form = CardForm;
-
-//# sourceMappingURL=justifi-card-form.cjs.entry.js.map

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

@@ -22,5 +22,3 @@ const Details = class {
 Details.style = detailsCss;
 
 exports.justifi_details = Details;
-
-//# sourceMappingURL=justifi-details.cjs.entry.js.map

package/dist/cjs/justifi-gross-payment-chart.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c5ace247.js');
 const Api = require('./Api-548eaa62.js');
 require('./Pagination-cae1dcbd.js');
-require('./Payout-68a99ee3.js');
+require('./Payout-f8240e9c.js');
 const utils = require('./utils-13d069be.js');
 const utils$1 = require('./utils-4622829d.js');
 const config = require('./config-a156df17.js');
@@ -10994,15 +10994,27 @@ const GrossPaymentChart = class {
       return;
     }
     this.loading = true;
-    const api = Api.Api(this.authToken, config.config.proxyApiOrigin);
-    const endpoint = `account/${this.accountId}/reports/gross_volume`;
-    const response = await api.get(endpoint);
-    if (!response.error) {
-      this.total = response === null || response === void 0 ? void 0 : response.data.total;
-      this.dates = response === null || response === void 0 ? void 0 : response.data.dates.reverse();
-      this.endDate = this.dates[this.dates.length - 1].date;
-    }
-    this.loading = false;
+    try {
+      const api = Api.Api(this.authToken, config.config.proxyApiOrigin);
+      const endpoint = `account/${this.accountId}/reports/gross_volume`;
+      const response = await api.get(endpoint);
+      if (!response.error) {
+        this.total = response === null || response === void 0 ? void 0 : response.data.total;
+        this.dates = response === null || response === void 0 ? void 0 : response.data.dates.reverse();
+        this.endDate = this.dates[this.dates.length - 1].date;
+      }
+      else {
+        this.errorMessage = `Error trying to fetch data : ${response.error}`;
+        console.error(this.errorMessage);
+      }
+    }
+    catch (error) {
+      this.errorMessage = `Error trying to fetch data : ${error}`;
+      console.error(this.errorMessage);
+    }
+    finally {
+      this.loading = false;
+    }
   }
   renderChart() {
     if (this.chart) {
@@ -11026,5 +11038,3 @@ const GrossPaymentChart = class {
 GrossPaymentChart.style = grossPaymentChartCss;
 
 exports.justifi_gross_payment_chart = GrossPaymentChart;
-
-//# sourceMappingURL=justifi-gross-payment-chart.cjs.entry.js.map

package/dist/cjs/justifi-payment-balance-transactions.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c5ace247.js');
 const Api = require('./Api-548eaa62.js');
 const Pagination = require('./Pagination-cae1dcbd.js');
-const Payout = require('./Payout-68a99ee3.js');
+const Payout = require('./Payout-f8240e9c.js');
 const utils = require('./utils-13d069be.js');
 const config = require('./config-a156df17.js');
 
@@ -85,5 +85,3 @@ const PaymentBalanceTransactions = class {
 PaymentBalanceTransactions.style = paymentBalanceTransactionsCss;
 
 exports.justifi_payment_balance_transactions = PaymentBalanceTransactions;
-
-//# sourceMappingURL=justifi-payment-balance-transactions.cjs.entry.js.map

package/dist/cjs/justifi-payment-details.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c5ace247.js');
 const Api = require('./Api-548eaa62.js');
 require('./Pagination-cae1dcbd.js');
-require('./Payout-68a99ee3.js');
+const Payout = require('./Payout-f8240e9c.js');
 const utils$1 = require('./utils-13d069be.js');
 const utils = require('./utils-4622829d.js');
 const config = require('./config-a156df17.js');
@@ -28,26 +28,35 @@ const PaymentDetails = class {
     this.fetchData();
   }
   async fetchData() {
-    this.errorMessage = '';
     if (!this.paymentId || !this.authToken) {
       this.errorMessage = "Can not fetch any data without a PaymentID and an AuthToken";
       this.loading = false;
       return;
     }
     this.loading = true;
-    const endpoint = `payments/${this.paymentId}`;
-    const response = await Api.Api(this.authToken, config.config.proxyApiOrigin).get(endpoint);
-    if (!response.error) {
-      this.payment = response.data;
+    try {
+      const endpoint = `payments/${this.paymentId}`;
+      const response = await Api.Api(this.authToken, config.config.proxyApiOrigin).get(endpoint);
+      if (!response.error) {
+        this.payment = new Payout.Payment(response.data);
+      }
+      else {
+        const responseError = typeof response.error === 'string' ? response.error : response.error.message;
+        this.errorMessage = `Error trying to fetch data : ${responseError}`;
+        console.error(this.errorMessage);
+      }
     }
-    else {
-      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    catch (error) {
+      this.errorMessage = `Error trying to fetch data : ${error}`;
+      console.error(this.errorMessage);
+    }
+    finally {
+      this.loading = false;
     }
-    this.loading = false;
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
-    return (index.h(index.Host, null, this.loading && utils.LoadingState, !this.loading && this.errorMessage && utils.ErrorState(this.errorMessage), !this.loading && this.payment && (index.h("justifi-details", { "error-message": this.errorMessage }, index.h(utils.EntityHeadInfo, { slot: "head-info", badge: index.h("span", { slot: 'badge', innerHTML: utils$1.MapPaymentStatusToBadge((_a = this.payment) === null || _a === void 0 ? void 0 : _a.status) }), title: `${utils$1.formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, index.h(utils.EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${utils$1.formatDate((_b = this.payment) === null || _b === void 0 ? void 0 : _b.updated_at)} ${utils$1.formatTime((_c = this.payment) === null || _c === void 0 ? void 0 : _c.updated_at)}` }), index.h(utils.EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${utils$1.formatDate((_d = this.payment) === null || _d === void 0 ? void 0 : _d.created_at)} ${utils$1.formatTime((_e = this.payment) === null || _e === void 0 ? void 0 : _e.created_at)}` }), index.h(utils.EntityHeadInfoItem, { title: "ID", value: (_f = this.payment) === null || _f === void 0 ? void 0 : _f.id })), index.h("div", { slot: 'detail-sections' }, index.h(utils.DetailSection, { sectionTitle: "Details" }, index.h(utils.DetailItem, { title: "Amount", value: utils$1.formatCurrency((_g = this.payment) === null || _g === void 0 ? void 0 : _g.amount) }), index.h(utils.DetailItem, { title: "Fees", value: utils$1.formatCurrency((_h = this.payment) === null || _h === void 0 ? void 0 : _h.fee_amount) }), index.h(utils.DetailItem, { title: "Refunded", value: utils$1.formatCurrency((_j = this.payment) === null || _j === void 0 ? void 0 : _j.amount_refunded) }), index.h(utils.DetailItem, { title: "Net", value: utils$1.formatCurrency((_k = this.payment) === null || _k === void 0 ? void 0 : _k.balance) }), index.h(utils.DetailItem, { title: "Status", value: utils$1.MapPaymentStatusToBadge((_l = this.payment) === null || _l === void 0 ? void 0 : _l.status) }), index.h(utils.DetailItem, { title: "Payment ID", value: (_m = this.payment) === null || _m === void 0 ? void 0 : _m.id }), index.h(utils.DetailItem, { title: "Processing Fees", value: utils$1.formatCurrency((_o = this.payment) === null || _o === void 0 ? void 0 : _o.fee_amount) }), index.h(utils.DetailItem, { title: "Statement Descriptor", value: (_p = this.payment) === null || _p === void 0 ? void 0 : _p.statement_descriptor }), index.h(utils.DetailItem, { title: "Description", value: (_q = this.payment) === null || _q === void 0 ? void 0 : _q.description })), ((_r = this.payment) === null || _r === void 0 ? void 0 : _r.payment_method.card) && (index.h(utils.DetailSection, { sectionTitle: "Payment Method" }, index.h(utils.DetailItem, { title: "ID", value: (_s = this.payment) === null || _s === void 0 ? void 0 : _s.payment_method.card.id }), index.h(utils.DetailItem, { title: "Payment Type", value: "Card" }), index.h(utils.DetailItem, { title: "Last 4 Numbers", value: (_t = this.payment) === null || _t === void 0 ? void 0 : _t.payment_method.card.acct_last_four }), index.h(utils.DetailItem, { title: "Brand", value: (_u = this.payment) === null || _u === void 0 ? void 0 : _u.payment_method.card.brand }), index.h(utils.DetailItem, { title: "Cardholder", value: (_v = this.payment) === null || _v === void 0 ? void 0 : _v.payment_method.card.name }))), ((_w = this.payment) === null || _w === void 0 ? void 0 : _w.payment_method.bank_account) && (index.h(utils.DetailSection, { sectionTitle: "Payment Method" }, index.h(utils.DetailItem, { title: "ID", value: (_x = this.payment) === null || _x === void 0 ? void 0 : _x.payment_method.bank_account.id }), index.h(utils.DetailItem, { title: "Last 4 Numbers", value: (_y = this.payment) === null || _y === void 0 ? void 0 : _y.payment_method.bank_account.acct_last_four }), index.h(utils.DetailItem, { title: "Bank Name", value: (_z = this.payment) === null || _z === void 0 ? void 0 : _z.payment_method.bank_account.bank_name }), index.h(utils.DetailItem, { title: "Account Owner", value: (_0 = this.payment) === null || _0 === void 0 ? void 0 : _0.payment_method.bank_account.account_owner_name }))), index.h(utils.DetailSection, { sectionTitle: 'Metadata' }, index.h(utils.CodeBlock, { metadata: (_1 = this.payment) === null || _1 === void 0 ? void 0 : _1.metadata })))))));
+    return (index.h(index.Host, null, this.loading && utils.LoadingState, !this.loading && this.errorMessage && utils.ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+      this.payment && (index.h("justifi-details", { "error-message": this.errorMessage }, index.h(utils.EntityHeadInfo, { slot: "head-info", badge: index.h("span", { slot: 'badge', innerHTML: utils$1.MapPaymentStatusToBadge(this.payment.status) }), title: `${utils$1.formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, index.h(utils.EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${utils$1.formatDate(this.payment.updated_at)} ${utils$1.formatTime(this.payment.updated_at)}` }), index.h(utils.EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${utils$1.formatDate(this.payment.created_at)} ${utils$1.formatTime(this.payment.created_at)}` }), index.h(utils.EntityHeadInfoItem, { title: "ID", value: this.payment.id })), index.h("div", { slot: 'detail-sections' }, index.h(utils.DetailSection, { sectionTitle: "Details" }, index.h(utils.DetailItem, { title: "Amount", value: utils$1.formatCurrency(this.payment.amount) }), index.h(utils.DetailItem, { title: "Fees", value: utils$1.formatCurrency(this.payment.fee_amount) }), index.h(utils.DetailItem, { title: "Refunded", value: utils$1.formatCurrency(this.payment.amount_refunded) }), index.h(utils.DetailItem, { title: "Net", value: utils$1.formatCurrency(this.payment.balance) }), index.h(utils.DetailItem, { title: "Status", value: utils$1.MapPaymentStatusToBadge(this.payment.status) }), index.h(utils.DetailItem, { title: "Payment ID", value: this.payment.id }), index.h(utils.DetailItem, { title: "Processing Fees", value: utils$1.formatCurrency(this.payment.fee_amount) }), index.h(utils.DetailItem, { title: "Statement Descriptor", value: this.payment.statement_descriptor }), index.h(utils.DetailItem, { title: "Description", value: this.payment.description })), this.payment.payment_method.card && (index.h(utils.DetailSection, { sectionTitle: "Payment Method" }, index.h(utils.DetailItem, { title: "ID", value: this.payment.payment_method.card.id }), index.h(utils.DetailItem, { title: "Payment Type", value: "Card" }), index.h(utils.DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), index.h(utils.DetailItem, { title: "Brand", value: utils$1.snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), index.h(utils.DetailItem, { title: "Cardholder", value: this.payment.payment_method.payersName }))), this.payment.payment_method.bank_account && (index.h(utils.DetailSection, { sectionTitle: "Payment Method" }, index.h(utils.DetailItem, { title: "ID", value: this.payment.payment_method.bank_account.id }), index.h(utils.DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), index.h(utils.DetailItem, { title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), index.h(utils.DetailItem, { title: "Account Owner", value: this.payment.payment_method.payersName }))), index.h(utils.DetailSection, { sectionTitle: 'Metadata' }, index.h(utils.CodeBlock, { metadata: this.payment.metadata })))))));
   }
   static get watchers() { return {
     "paymentId": ["updateOnPropChange"],
@@ -57,5 +66,3 @@ const PaymentDetails = class {
 PaymentDetails.style = paymentDetailsCss;
 
 exports.justifi_payment_details = PaymentDetails;
-
-//# sourceMappingURL=justifi-payment-details.cjs.entry.js.map