@justifi/webcomponents 4.7.1 → 4.7.2

package/dist/components/justifi-payment-details.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { A as Api } from './Api.js';
 import './Pagination.js';
-import './Payout.js';
-import { M as MapPaymentStatusToBadge, b as formatCurrency, a as formatDate, d as formatTime } from './utils2.js';
+import { a as Payment } from './Payout.js';
+import { M as MapPaymentStatusToBadge, b as formatCurrency, a as formatDate, d as formatTime, s as snakeCaseToHumanReadable } from './utils2.js';
 import { L as LoadingState, E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSection, a as DetailItem, C as CodeBlock } from './utils.js';
 import { c as config } from './config.js';
 import { d as defineCustomElement$2 } from './details.js';
@@ -27,26 +27,35 @@ const PaymentDetails = /*@__PURE__*/ proxyCustomElement(class PaymentDetails ext
     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(this.authToken, config.proxyApiOrigin).get(endpoint);
-    if (!response.error) {
-      this.payment = response.data;
+    try {
+      const endpoint = `payments/${this.paymentId}`;
+      const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);
+      if (!response.error) {
+        this.payment = new 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 (h(Host, null, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payment && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge((_a = this.payment) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate((_b = this.payment) === null || _b === void 0 ? void 0 : _b.updated_at)} ${formatTime((_c = this.payment) === null || _c === void 0 ? void 0 : _c.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate((_d = this.payment) === null || _d === void 0 ? void 0 : _d.created_at)} ${formatTime((_e = this.payment) === null || _e === void 0 ? void 0 : _e.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: (_f = this.payment) === null || _f === void 0 ? void 0 : _f.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency((_g = this.payment) === null || _g === void 0 ? void 0 : _g.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency((_h = this.payment) === null || _h === void 0 ? void 0 : _h.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency((_j = this.payment) === null || _j === void 0 ? void 0 : _j.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency((_k = this.payment) === null || _k === void 0 ? void 0 : _k.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge((_l = this.payment) === null || _l === void 0 ? void 0 : _l.status) }), h(DetailItem, { title: "Payment ID", value: (_m = this.payment) === null || _m === void 0 ? void 0 : _m.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency((_o = this.payment) === null || _o === void 0 ? void 0 : _o.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: (_p = this.payment) === null || _p === void 0 ? void 0 : _p.statement_descriptor }), h(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) && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: (_s = this.payment) === null || _s === void 0 ? void 0 : _s.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: (_t = this.payment) === null || _t === void 0 ? void 0 : _t.payment_method.card.acct_last_four }), h(DetailItem, { title: "Brand", value: (_u = this.payment) === null || _u === void 0 ? void 0 : _u.payment_method.card.brand }), h(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) && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: (_x = this.payment) === null || _x === void 0 ? void 0 : _x.payment_method.bank_account.id }), h(DetailItem, { title: "Last 4 Numbers", value: (_y = this.payment) === null || _y === void 0 ? void 0 : _y.payment_method.bank_account.acct_last_four }), h(DetailItem, { title: "Bank Name", value: (_z = this.payment) === null || _z === void 0 ? void 0 : _z.payment_method.bank_account.bank_name }), h(DetailItem, { title: "Account Owner", value: (_0 = this.payment) === null || _0 === void 0 ? void 0 : _0.payment_method.bank_account.account_owner_name }))), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: (_1 = this.payment) === null || _1 === void 0 ? void 0 : _1.metadata })))))));
+    return (h(Host, null, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+      this.payment && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payment.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { title: "Payment ID", value: this.payment.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { title: "Description", value: this.payment.description })), this.payment.payment_method.card && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { title: "Cardholder", value: this.payment.payment_method.payersName }))), this.payment.payment_method.bank_account && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { title: "Account Owner", value: this.payment.payment_method.payersName }))), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payment.metadata })))))));
   }
   static get watchers() { return {
     "paymentId": ["updateOnPropChange"],

package/dist/components/justifi-payment-form.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Pagination.js';
-import { a as PaymentMethodTypes } from './Payout.js';
+import { b as PaymentMethodTypes } from './Payout.js';
 import { e as extractComputedFontsToLoad } from './utils2.js';
 import { d as defineCustomElement$6 } from './billing-form.js';
 import { d as defineCustomElement$5 } from './payment-method-form.js';
@@ -76,11 +76,21 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
     if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
       return;
     this.isLoading = true;
-    const billingFormFieldValues = await this.billingFormRef.getValues();
-    const paymentMethodData = Object.assign({ email: this.email }, billingFormFieldValues);
-    const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);
-    this.submitted.emit(tokenizeResponse);
-    this.isLoading = false;
+    try {
+      const billingFormFieldValues = await this.billingFormRef.getValues();
+      const paymentMethodData = Object.assign({ email: this.email }, billingFormFieldValues);
+      const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);
+      if (tokenizeResponse.error) {
+        console.error(`An error occured submitting the form: ${tokenizeResponse.error.message}`);
+      }
+      this.submitted.emit(tokenizeResponse);
+    }
+    catch (error) {
+      console.error(`An error occured submitting the form: ${error}`);
+    }
+    finally {
+      this.isLoading = false;
+    }
   }
   render() {
     return (h(Host, null, h("form", { class: "row gy-3" }, this.allowedPaymentMethodTypes.length > 1 && (h("div", { class: "col-12" }, h("justifi-payment-method-selector", { paymentMethodTypes: this.allowedPaymentMethodTypes, selectedPaymentMethodType: this.selectedPaymentMethodType }))), h("div", { class: "col-12" }, h("justifi-payment-method-form", { "payment-method-form-type": this.selectedPaymentMethodType, "iframe-origin": this.iframeOrigin, ref: el => {

package/dist/components/justifi-payments-list.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { A as Api } from './Api.js';
 import { p as pagingDefaults } from './Pagination.js';
-import { b as Payment } from './Payout.js';
+import { a as Payment } from './Payout.js';
 import { a as formatDate, d as formatTime, b as formatCurrency, M as MapPaymentStatusToBadge } from './utils2.js';
 import { c as config } from './config.js';
 import { d as defineCustomElement$3 } from './table.js';
@@ -47,28 +47,27 @@ const PaymentsList = /*@__PURE__*/ proxyCustomElement(class PaymentsList extends
       return;
     }
     this.loading = true;
-    const api = Api(this.authToken, config.proxyApiOrigin);
-    const endpoint = `account/${this.accountId}/payments`;
-    const response = await api.get(endpoint, this.params);
-    if (!response.error) {
-      this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
-      const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Payment(dataItem));
-      this.payments = data;
-    }
-    else {
-      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    try {
+      const api = Api(this.authToken, config.proxyApiOrigin);
+      const endpoint = `account/${this.accountId}/payments`;
+      const response = await api.get(endpoint, this.params);
+      if (!response.error) {
+        this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
+        const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Payment(dataItem));
+        this.payments = data;
+      }
+      else {
+        const responseError = typeof response.error === 'string' ? response.error : response.error.message;
+        console.error(`Error fetching payments: ${responseError}`);
+        this.errorMessage = 'No results';
+      }
     }
-    this.loading = false;
-  }
-  getPaymentMethod(paymentMethod) {
-    return paymentMethod.card || paymentMethod.bank_account;
-  }
-  getPaymentMethodName(paymentMethod) {
-    if (paymentMethod.card) {
-      return paymentMethod.card.name;
+    catch (error) {
+      console.error(`Error fetching payments: ${error.message}`);
+      this.errorMessage = 'No results';
     }
-    else {
-      return paymentMethod.bank_account.account_owner_name;
+    finally {
+      this.loading = false;
     }
   }
   render() {
@@ -96,8 +95,8 @@ const PaymentsList = /*@__PURE__*/ proxyCustomElement(class PaymentsList extends
         },
         formatCurrency(payment.amount),
         payment.description,
-        this.getPaymentMethodName(payment.payment_method),
-        this.getPaymentMethod(payment.payment_method).acct_last_four,
+        payment.payment_method.payersName,
+        payment.payment_method.lastFourDigits,
         {
           type: 'inner',
           value: MapPaymentStatusToBadge(payment.status)

package/dist/components/justifi-payout-details.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { A as Api } from './Api.js';
 import './Pagination.js';
-import './Payout.js';
+import { c as Payout } from './Payout.js';
 import { g as MapPayoutStatusToBadge, b as formatCurrency, a as formatDate, d as formatTime } from './utils2.js';
 import { L as LoadingState, E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSection, a as DetailItem, C as CodeBlock } from './utils.js';
 import { c as config } from './config.js';
@@ -34,21 +34,29 @@ const PaymentDetails = /*@__PURE__*/ proxyCustomElement(class PaymentDetails ext
       return;
     }
     this.loading = true;
-    const endpoint = `payouts/${this.payoutId}`;
-    const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);
-    if (!response.error) {
-      this.payout = response.data;
+    try {
+      const endpoint = `payouts/${this.payoutId}`;
+      const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);
+      if (!response.error) {
+        this.payout = new Payout(response.data);
+      }
+      else {
+        const responseError = typeof response.error === 'string' ? response.error : response.error.message;
+        this.errorMessage = `Error fetching payout details: ${responseError}`;
+        console.error(this.errorMessage);
+      }
     }
-    else {
-      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    catch (error) {
+      this.errorMessage = `Error fetching payout details: ${error}`;
+      console.error(this.errorMessage);
+    }
+    finally {
+      this.loading = false;
     }
-    this.loading = false;
   }
   render() {
     var _a;
-    return (h(Host, null, this.loading ? LoadingState :
-      !this.payout ? ErrorState(this.errorMessage) :
-        h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payout.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { title: "Statement Description", value: this.payout.description }), h(DetailItem, { title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSection, { sectionTitle: "Account" }, h(DetailItem, { title: "ID", value: this.payout.account_id }), h(DetailItem, { title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payout.metadata }))))));
+    return (h(Host, null, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payout.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { title: "Statement Description", value: this.payout.description }), h(DetailItem, { title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSection, { sectionTitle: "Account" }, h(DetailItem, { title: "ID", value: this.payout.account_id }), h(DetailItem, { title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payout.metadata })))))));
   }
   static get watchers() { return {
     "payoutId": ["updateOnPropChange"],

package/dist/components/justifi-payouts-list.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { A as Api } from './Api.js';
 import { p as pagingDefaults } from './Pagination.js';
-import { c as PayoutStatuses, d as PayoutStatusesSafeNames, e as Payout } from './Payout.js';
+import { d as PayoutStatuses, e as PayoutStatusesSafeNames, c as Payout } from './Payout.js';
 import { a as formatDate, d as formatTime, b as formatCurrency } from './utils2.js';
 import { c as config } from './config.js';
 import { d as defineCustomElement$3 } from './table.js';
@@ -63,18 +63,28 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
       return;
     }
     this.loading = true;
-    const api = Api(this.authToken, config.proxyApiOrigin);
-    const endpoint = `account/${this.accountId}/payouts`;
-    const response = await api.get(endpoint, this.params);
-    if (!response.error) {
-      this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
-      const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Payout(dataItem));
-      this.payouts = data;
+    try {
+      const api = Api(this.authToken, config.proxyApiOrigin);
+      const endpoint = `account/${this.accountId}/payouts`;
+      const response = await api.get(endpoint, this.params);
+      if (!response.error) {
+        this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
+        const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Payout(dataItem));
+        this.payouts = data;
+      }
+      else {
+        const responseError = typeof response.error === 'string' ? response.error : response.error.message;
+        console.error(`Error fetching payouts: ${responseError}`);
+        this.errorMessage = 'No results';
+      }
     }
-    else {
-      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    catch (error) {
+      console.error(`Error fetching payouts: ${error}`);
+      this.errorMessage = 'No results';
+    }
+    finally {
+      this.loading = false;
     }
-    this.loading = false;
   }
   render() {
     return (h(Host, null, h("justifi-table", { rowClickHandler: (e) => {

package/dist/components/justifi-subaccount-details.js

@@ -68,10 +68,8 @@ const SubaccountDetails = /*@__PURE__*/ proxyCustomElement(class SubaccountDetai
     this.loading = false;
   }
   render() {
-    var _a, _b, _c, _d, _e, _f;
-    return (h(Host, null, this.loading ? LoadingState :
-      !this.subaccount || !this.onboardingData ? ErrorState(this.errorMessage) :
-        h("justifi-details", null, h(EntityHeadInfo, { slot: 'head-info', badge: h("span", { slot: 'badge', innerHTML: MapSubAccountStatusToBadge((_a = this.subaccount) === null || _a === void 0 ? void 0 : _a.status) }), title: (_b = this.subaccount) === null || _b === void 0 ? void 0 : _b.name }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.subaccount.created_at)} ${formatTime(this.subaccount.created_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Last Updated", value: `${formatDate(this.subaccount.updated_at)} ${formatTime(this.subaccount.updated_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.subaccount.id })), h("div", { slot: 'detail-sections' }, h("subaccount-account-details", { subaccount: this.subaccount, onboardingData: this.onboardingData }), h("subaccount-merchant-details", { onboardingData: this.onboardingData }), h("subaccount-representative-details", { data: (_d = (_c = this.onboardingData) === null || _c === void 0 ? void 0 : _c.payload) === null || _d === void 0 ? void 0 : _d.representative }), h("subaccount-owners-details", { data: (_f = (_e = this.onboardingData) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.owners })))));
+    var _a, _b;
+    return (h(Host, null, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.subaccount && this.onboardingData && (h("justifi-details", null, h(EntityHeadInfo, { slot: 'head-info', badge: h("span", { slot: 'badge', innerHTML: MapSubAccountStatusToBadge(this.subaccount.status) }), title: this.subaccount.name }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.subaccount.created_at)} ${formatTime(this.subaccount.created_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Last Updated", value: `${formatDate(this.subaccount.updated_at)} ${formatTime(this.subaccount.updated_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.subaccount.id })), h("div", { slot: 'detail-sections' }, h("subaccount-account-details", { subaccount: this.subaccount, onboardingData: this.onboardingData }), h("subaccount-merchant-details", { onboardingData: this.onboardingData }), h("subaccount-representative-details", { data: (_a = this.onboardingData.payload) === null || _a === void 0 ? void 0 : _a.representative }), h("subaccount-owners-details", { data: (_b = this.onboardingData.payload) === null || _b === void 0 ? void 0 : _b.owners }))))));
   }
   static get watchers() { return {
     "subaccountId": ["updateOnPropChange"],

package/dist/components/owner-details2.js

@@ -12,7 +12,10 @@ const OwnerDetails = /*@__PURE__*/ proxyCustomElement(class OwnerDetails extends
     this.owners = undefined;
   }
   render() {
-    return (h(Host, null, h(DetailSection, { sectionTitle: "Owner Details" }, h("div", { class: "row" }, !!(this === null || this === void 0 ? void 0 : this.owners.length) ? (this.owners.map(owner => (h("div", null, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Name", value: owner.name }), h(DetailItem, { title: "Title", value: owner.title }), h(DetailItem, { title: "Email", value: owner.email }), h(DetailItem, { title: "Phone", value: owner.phone }), h(DetailItem, { title: "Date of Birth", value: formatMediumDate(new Date(Number(owner.dob_day), Number(owner.dob_month), Number(owner.dob_year))) }), h(DetailItem, { title: "Identification Number", value: `********${owner.ssn_last4}` })), h(DetailSection, { sectionTitle: "Owner Address" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Line 1", value: owner.address.line1 }), h(DetailItem, { title: "Line 2", value: owner.address.line2 }), h(DetailItem, { title: "City", value: owner.address.city }), h(DetailItem, { title: "State", value: owner.address.state }), h(DetailItem, { title: "Zip", value: owner.address.postal_code })))))))) : (h(DetailItem, { title: "No owners", value: "" }))))));
+    return (h(Host, null, !!(this === null || this === void 0 ? void 0 : this.owners.length) ? (this.owners.map(owner => {
+      var _a, _b, _c, _d, _e;
+      return (h("div", { class: "row" }, h(DetailSection, { sectionTitle: `Owner ${owner === null || owner === void 0 ? void 0 : owner.name}'s Details` }, h(DetailItem, { title: "Name", value: owner === null || owner === void 0 ? void 0 : owner.name }), h(DetailItem, { title: "Title", value: owner === null || owner === void 0 ? void 0 : owner.title }), h(DetailItem, { title: "Email", value: owner === null || owner === void 0 ? void 0 : owner.email }), h(DetailItem, { title: "Phone", value: owner === null || owner === void 0 ? void 0 : owner.phone }), h(DetailItem, { title: "Date of Birth", value: formatMediumDate(new Date(Number(owner === null || owner === void 0 ? void 0 : owner.dob_day), Number(owner === null || owner === void 0 ? void 0 : owner.dob_month), Number(owner === null || owner === void 0 ? void 0 : owner.dob_year))) }), h(DetailItem, { title: "Identification Number", value: `********${owner === null || owner === void 0 ? void 0 : owner.ssn_last4}` }), h(DetailItem, { title: "Line 1", value: (_a = owner === null || owner === void 0 ? void 0 : owner.address) === null || _a === void 0 ? void 0 : _a.line1 }), h(DetailItem, { title: "Line 2", value: (_b = owner === null || owner === void 0 ? void 0 : owner.address) === null || _b === void 0 ? void 0 : _b.line2 }), h(DetailItem, { title: "City", value: (_c = owner === null || owner === void 0 ? void 0 : owner.address) === null || _c === void 0 ? void 0 : _c.city }), h(DetailItem, { title: "State", value: (_d = owner === null || owner === void 0 ? void 0 : owner.address) === null || _d === void 0 ? void 0 : _d.state }), h(DetailItem, { title: "Zip", value: (_e = owner === null || owner === void 0 ? void 0 : owner.address) === null || _e === void 0 ? void 0 : _e.postal_code }))));
+    })) : (h(DetailItem, { title: "No owners", value: "" }))));
   }
   static get style() { return ownerDetailsCss; }
 }, [1, "owner-details", {