npm - @justifi/webcomponents - Versions diffs - 4.7.1 → 4.7.2 - Mend

@justifi/webcomponents 4.7.1 → 4.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (133) hide show

package/dist/collection/components/details/utils.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 export const LoadingState = (h("main", { part: "detail-loading-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", { part: "detail-loading-spinner", class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading..."))));
 export const ErrorState = (errorMessage) => (h("main", { part: "detail-empty-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", null, errorMessage)));
-export const DetailSection = ({ sectionTitle }, children) => (h("div", { part: "detail-section", class: "mt-4" }, h("h5", { part: "detail-section-title" }, sectionTitle), h("hr", null), h("div", { class: "d-flex flex-column justify-content-center gap-2 text-nowrap" }, children)));
-export const DetailItem = ({ title, value, }) => title && value ? (h("div", { class: "d-flex gap-2" }, h("span", { part: "detail-section-item-title", class: "fw-bold flex-1" }, title), h("span", { part: "detail-section-item-data", class: "flex-1", innerHTML: value }))) : null;
+export const DetailSection = ({ sectionTitle }, children) => (h("div", { part: "detail-section", class: "mt-4" }, h("h5", { part: "detail-section-title" }, sectionTitle), h("hr", null), h("div", { class: "d-table gap-2 w-100" }, children)));
+export const DetailItem = ({ title, value, }) => title && value ? (h("div", { class: "d-table-row gap-2" }, h("span", { part: "detail-section-item-title", class: "fw-bold d-table-cell px-2" }, title), h("span", { part: "detail-section-item-data", class: "flex-1 d-table-cell px-2 text-wrap", innerHTML: value }))) : null;
 export const EntityHeadInfoItem = ({ title, value, classes, }) => (h("div", { part: "detail-head-info-item", class: `d-flex flex-column ${classes}` }, h("span", { part: "detail-head-info-item-title", class: "fw-bold border-1 border-bottom ps-2 pe-2" }, title), h("span", { part: "detail-head-info-item-data", class: "pt-2 ps-2 pe-2" }, value)));
 export const EntityHeadInfo = ({ title, slot, badge }, children) => (h("div", { slot: slot, part: "detail-head", class: "p-2" }, h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" }, h("h1", { class: "m-0", part: "detail-title" }, title), badge), h("div", { part: "detail-head-info", class: "d-flex flex-row align-items-top" }, children)));
 export const CodeBlock = ({ metadata }) => metadata && Object.keys(metadata).length ? (h("div", { class: 'mt-4' }, h("pre", { part: "detail-metadata", class: "p-2", "aria-label": "metadata content" }, h("code", null, JSON.stringify(metadata, null, 2))))) : null;

package/dist/collection/components/form/form-control-datepart.js CHANGED Viewed

@@ -47,7 +47,7 @@ export class DatePartInput {
   }
   updateInput(newValue) {
     if (this.imask) {
-      this.imask.value = newValue;
+      this.imask.value = String(newValue);
     }
   }
   disconnectedCallback() {

package/dist/collection/components/gross-payment-chart/example.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { head } from '../../../storybook-pages/example-parts';
+export default `<DOCTYPE html>
+<html dir="ltr" lang="en">
+${head('justifi-gross-payment-chart')}
+<body>
+  <justifi-gross-payment-chart></justifi-gross-payment-chart>
+</body>
+</html>`;

package/dist/collection/components/gross-payment-chart/gross-payment-chart.js CHANGED Viewed

@@ -31,15 +31,27 @@ export class GrossPaymentChart {
       return;
     }
     this.loading = true;
-    const api = Api(this.authToken, 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;
+    try {
+      const api = Api(this.authToken, 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;
     }
-    this.loading = false;
   }
   renderChart() {
     if (this.chart) {

package/dist/collection/components/payment-details/payment-details.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { Api } from "../../api";
-import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { Api, Payment } from "../../api";
+import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
 import { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
 import { config } from "../../../config";
 /**
@@ -42,26 +42,35 @@ export class PaymentDetails {
     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 is() { return "justifi-payment-details"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/payment-form/payment-form.js CHANGED Viewed

@@ -63,11 +63,21 @@ export class PaymentForm {
     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 => {
@@ -239,7 +249,7 @@ export class PaymentForm {
         },
         "complexType": {
           "original": "CreatePaymentMethodResponse",
-          "resolved": "BankAccountCreateResponse | CardCreateResponse",
+          "resolved": "BankAccountCreateResponse | CardCreateResponse | PaymentMethodErrorResponse",
           "references": {
             "CreatePaymentMethodResponse": {
               "location": "import",

package/dist/collection/components/payments-list/payments-list.js CHANGED Viewed

@@ -55,28 +55,27 @@ export class PaymentsList {
       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() {
@@ -104,8 +103,8 @@ export class PaymentsList {
         },
         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/collection/components/payout-details/payout-details.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { Api } from "../../api";
+import { Api, Payout } from "../../api";
 import { MapPayoutStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
 import { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
 import { config } from "../../../config";
@@ -49,21 +49,29 @@ export class PaymentDetails {
       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 is() { return "justifi-payout-details"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/payouts-list/payouts-list.js CHANGED Viewed

@@ -71,18 +71,28 @@ export class PayoutsList {
       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/collection/components/subaccount-details/subaccount-details.js CHANGED Viewed

@@ -55,10 +55,8 @@ export class SubaccountDetails {
     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 is() { return "justifi-subaccount-details"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.css CHANGED Viewed

@@ -8074,4 +8074,9 @@ progress {
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
+  table-layout: fixed;
+}
+.table-wrapper {
+  overflow-x: scroll;
 }

package/dist/collection/components/table/table.js CHANGED Viewed

@@ -29,7 +29,7 @@ export class Table {
   render() {
     var _a, _b, _c;
     return (h(Host, { exportparts: "\n        table-head,table-head-row,table-head-cell,table-body,table-row,table-row-even,\n        table-row-odd,table-cell,loading-state-cell,loading-state-spinner,error-state,\n        empty-state,pagination-bar,arrow,arrow-left,arrow-right,button-disabled,\n        previous-button-text,next-button-text\n      " }, this.columnData ?
-      h("table", { class: "table table-hover" }, h("thead", { class: "table-head sticky-top", part: "table-head" }, h("tr", { class: "table-light", part: 'table-head-row' }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0])))), h("tbody", { class: "table-body", part: 'table-body' }, this.loading ? this.loadingState() :
+      h("div", { class: "table-wrapper" }, h("table", { class: "table table-hover" }, h("thead", { class: "table-head sticky-top", part: "table-head" }, h("tr", { class: "table-light text-nowrap", part: 'table-head-row' }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0])))), h("tbody", { class: "table-body", part: 'table-body' }, this.loading ? this.loadingState() :
         this.errorMessage ? this.errorState() :
           this.showEmptyState() ? this.emptyState() :
             (_b = this.rowData) === null || _b === void 0 ? void 0 : _b.map((data, index) => {
@@ -39,7 +39,7 @@ export class Table {
                   : h("th", { scope: "row", part: "table-cell" }, h("td", { part: "table-cell", innerHTML: dataEntry.value })));
               })));
             })), this.paging &&
-        h("tfoot", { class: "sticky-bottom" }, h("tr", { class: "table-light align-middle" }, h("td", { part: "pagination-bar", colSpan: (_c = this.columnData) === null || _c === void 0 ? void 0 : _c.length }, h("pagination-menu", { paging: this.paging, params: this.params })))))
+        h("tfoot", { class: "sticky-bottom" }, h("tr", { class: "table-light align-middle" }, h("td", { part: "pagination-bar", colSpan: (_c = this.columnData) === null || _c === void 0 ? void 0 : _c.length }, h("pagination-menu", { paging: this.paging, params: this.params }))))))
       :
         h("div", { "data-test-id": "empty-error-state" }, "Column data is required")));
   }

package/dist/components/Payout.js CHANGED Viewed

@@ -24,6 +24,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;
@@ -44,7 +92,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;
@@ -128,4 +176,4 @@ class Payout {
   }
 }
-export { PaymentBalanceTransaction as P, PaymentMethodTypes as a, Payment as b, PayoutStatuses as c, PayoutStatusesSafeNames as d, Payout as e };
+export { PaymentBalanceTransaction as P, Payment as a, PaymentMethodTypes as b, Payout as c, PayoutStatuses as d, PayoutStatusesSafeNames as e };

package/dist/components/additional-questions-details2.js CHANGED Viewed

@@ -11,8 +11,8 @@ const AdditionalQuestionsDetails = /*@__PURE__*/ proxyCustomElement(class Additi
     this.business = undefined;
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    return (h(Host, null, h(DetailSection, { sectionTitle: "Additional Questions" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Business Revenue", value: (_b = (_a = this.business) === null || _a === void 0 ? void 0 : _a.additional_questions.business_revenue) === null || _b === void 0 ? void 0 : _b.toString() }), h(DetailItem, { title: "Business Payment Volume", value: (_d = (_c = this.business) === null || _c === void 0 ? void 0 : _c.additional_questions.business_payment_volume) === null || _d === void 0 ? void 0 : _d.toString() })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Business Dispute Volume", value: (_f = (_e = this.business) === null || _e === void 0 ? void 0 : _e.additional_questions.business_dispute_volume) === null || _f === void 0 ? void 0 : _f.toString() }), h(DetailItem, { title: "Business Receivable Volume", value: (_h = (_g = this.business) === null || _g === void 0 ? void 0 : _g.additional_questions.business_receivable_volume) === null || _h === void 0 ? void 0 : _h.toString() }))))));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    return (h(Host, null, h(DetailSection, { sectionTitle: "Additional Questions" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Business Revenue", value: (_c = (_b = (_a = this.business) === null || _a === void 0 ? void 0 : _a.additional_questions) === null || _b === void 0 ? void 0 : _b.business_revenue) === null || _c === void 0 ? void 0 : _c.toString() }), h(DetailItem, { title: "Business Payment Volume", value: (_f = (_e = (_d = this.business) === null || _d === void 0 ? void 0 : _d.additional_questions) === null || _e === void 0 ? void 0 : _e.business_payment_volume) === null || _f === void 0 ? void 0 : _f.toString() })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Business Dispute Volume", value: (_j = (_h = (_g = this.business) === null || _g === void 0 ? void 0 : _g.additional_questions) === null || _h === void 0 ? void 0 : _h.business_dispute_volume) === null || _j === void 0 ? void 0 : _j.toString() }), h(DetailItem, { title: "Business Receivable Volume", value: (_m = (_l = (_k = this.business) === null || _k === void 0 ? void 0 : _k.additional_questions) === null || _l === void 0 ? void 0 : _l.business_receivable_volume) === null || _m === void 0 ? void 0 : _m.toString() }))))));
   }
   static get style() { return additionalQuestionsDetailsCss; }
 }, [1, "additional-questions-details", {

package/dist/components/form-control-datepart2.js CHANGED Viewed

@@ -55,7 +55,7 @@ const DatePartInput = /*@__PURE__*/ proxyCustomElement(class DatePartInput exten
   }
   updateInput(newValue) {
     if (this.imask) {
-      this.imask.value = newValue;
+      this.imask.value = String(newValue);
     }
   }
   disconnectedCallback() {

package/dist/components/justifi-business-details.js CHANGED Viewed

@@ -29,15 +29,16 @@ const BusinessDetails = /*@__PURE__*/ proxyCustomElement(class BusinessDetails e
     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(this.authToken, config.proxyApiOrigin);
@@ -48,27 +49,30 @@ const BusinessDetails = /*@__PURE__*/ proxyCustomElement(class BusinessDetails e
     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 LoadingState;
+      return h(Host, null, LoadingState);
     }
     if (this.renderState === RENDER_STATES.ERROR) {
-      return ErrorState(this.errorMessage);
+      return h(Host, null, ErrorState(this.errorMessage));
     }
     return (h(Host, null, h("generic-info-details", { business: this.business }), h("legal-address-details", { legalAddress: (_a = this.business) === null || _a === void 0 ? void 0 : _a.legal_address }), h("representative-details", { representative: (_b = this.business) === null || _b === void 0 ? void 0 : _b.representative }), h("owner-details", { owners: (_c = this.business) === null || _c === void 0 ? void 0 : _c.owners }), h("additional-questions-details", { business: this.business })));
   }

package/dist/components/justifi-gross-payment-chart.js CHANGED Viewed

@@ -10992,15 +10992,27 @@ const GrossPaymentChart = /*@__PURE__*/ proxyCustomElement(class GrossPaymentCha
       return;
     }
     this.loading = true;
-    const api = Api(this.authToken, 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(this.authToken, 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) {