@justifi/webcomponents 4.7.1 → 4.7.2-rc.0

package/dist/collection/api/Payment.js

@@ -24,6 +24,54 @@ export var PaymentDisputedStatuses;
   PaymentDisputedStatuses["lost"] = "lost";
   PaymentDisputedStatuses["open"] = "open";
 })(PaymentDisputedStatuses || (PaymentDisputedStatuses = {}));
+export 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;
+  }
+}
+export 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;
+  }
+}
+export 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;
+  }
+}
 export class Payment {
   constructor(payment) {
     this.id = payment.id;
@@ -44,7 +92,7 @@ export 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;

package/dist/collection/api/mockData/MockPayments.js

@@ -1,4 +1,4 @@
-import { CaptureStrategy, Payment, PaymentStatuses } from "../Payment";
+import { CaptureStrategy, Card, Payment, PaymentMethod, PaymentStatuses } from "../Payment";
 const mockPayments = [
   // payment 0: succeeded
   new Payment({
@@ -39,8 +39,8 @@ const mockPayments = [
       ],
     },
     payment_intent_id: null,
-    payment_method: {
-      card: {
+    payment_method: new PaymentMethod({
+      card: new Card({
         acct_last_four: '6449',
         brand: 'mastercard',
         created_at: '2022-01-13T14:19:11.803Z',
@@ -48,8 +48,8 @@ const mockPayments = [
         name: 'Nick Name',
         token: 'fake-token',
         updated_at: '2022-01-13T14:19:11.803Z',
-      },
-    },
+      }),
+    }),
     refunded: false,
     status: PaymentStatuses.succeeded,
     updated_at: '2022-01-10T15:29:58.940Z',
@@ -76,8 +76,8 @@ const mockPayments = [
     is_test: false,
     metadata: null,
     payment_intent_id: null,
-    payment_method: {
-      card: {
+    payment_method: new PaymentMethod({
+      card: new Card({
         acct_last_four: '1213',
         brand: 'visa',
         created_at: '2021-01-13T14:19:11.803Z',
@@ -85,8 +85,8 @@ const mockPayments = [
         name: 'Good Customer',
         token: 'fake-token',
         updated_at: '2021-01-13T14:19:11.803Z',
-      },
-    },
+      }),
+    }),
     refunded: true,
     status: PaymentStatuses.fully_refunded,
     updated_at: '2021-01-10T15:29:58.940Z',
@@ -113,8 +113,8 @@ const mockPayments = [
     is_test: false,
     metadata: null,
     payment_intent_id: null,
-    payment_method: {
-      card: {
+    payment_method: new PaymentMethod({
+      card: new Card({
         acct_last_four: '9780',
         brand: 'american_express',
         created_at: '2021-11-13T14:19:11.803Z',
@@ -122,8 +122,8 @@ const mockPayments = [
         name: 'Sal Gleason',
         token: 'fake-token',
         updated_at: '2021-11-13T14:19:11.803Z',
-      },
-    },
+      }),
+    }),
     refunded: true,
     status: PaymentStatuses.partially_refunded,
     updated_at: '2022-01-10T15:29:58.940Z',
@@ -162,8 +162,8 @@ const mockPayments = [
     is_test: false,
     metadata: null,
     payment_intent_id: null,
-    payment_method: {
-      card: {
+    payment_method: new PaymentMethod({
+      card: new Card({
         acct_last_four: '1554',
         brand: 'discover',
         created_at: '2021-09-13T14:19:11.803Z',
@@ -171,8 +171,8 @@ const mockPayments = [
         name: 'Sal Gleason',
         token: 'fake-token',
         updated_at: '2021-09-13T14:19:11.803Z',
-      },
-    },
+      }),
+    }),
     refunded: false,
     status: PaymentStatuses.disputed,
     updated_at: '2021-09-10T15:29:58.940Z',
@@ -199,8 +199,8 @@ const mockPayments = [
     is_test: true,
     metadata: null,
     payment_intent_id: null,
-    payment_method: {
-      card: {
+    payment_method: new PaymentMethod({
+      card: new Card({
         acct_last_four: '8774',
         brand: 'diners_club',
         created_at: '2022-01-18T15:07:15.975Z',
@@ -208,8 +208,8 @@ const mockPayments = [
         name: 'Minnie Bernhard',
         token: 'fake-token',
         updated_at: '2022-01-18T15:07:15.975Z',
-      },
-    },
+      }),
+    }),
     refunded: false,
     status: PaymentStatuses.failed,
     updated_at: '2022-01-18T12:54:44.822Z',

package/dist/collection/components/business-details/business-details.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { Api } from "../../api";
-import { ErrorState, LoadingState } from "../details/utils"; // Make sure to adjust the path if necessary
+import { ErrorState, LoadingState } from "../details/utils";
 import { config } from "../../../config";
 var RENDER_STATES;
 (function (RENDER_STATES) {
@@ -24,15 +24,16 @@ export class BusinessDetails {
     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);
@@ -43,27 +44,30 @@ export class BusinessDetails {
     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/collection/components/business-details/representative-details/representative-details.js

@@ -14,8 +14,8 @@ export class JustifiRepresentativeDetails {
     this.representative = undefined;
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    return (h(Host, null, h(DetailSection, { sectionTitle: "Representative Details" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Name", value: (_a = this.representative) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: "ID", value: (_b = this.representative) === null || _b === void 0 ? void 0 : _b.id }), h(DetailItem, { title: "Representative Address", value: (_c = this.representative) === null || _c === void 0 ? void 0 : _c.address.line1 }), h(DetailItem, { title: "Representative Created At", value: formatMediumDate((_d = this.representative) === null || _d === void 0 ? void 0 : _d.created_at) })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Title", value: (_e = this.representative) === null || _e === void 0 ? void 0 : _e.title }), h(DetailItem, { title: "Is Owner?", value: (_f = this.representative) === null || _f === void 0 ? void 0 : _f.is_owner.toString() }), h(DetailItem, { title: "Date Of Birth", value: 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))) }), h(DetailItem, { title: "Email", value: (_k = this.representative) === null || _k === void 0 ? void 0 : _k.email }), h(DetailItem, { title: "Phone", value: (_l = this.representative) === null || _l === void 0 ? void 0 : _l.phone }), h(DetailItem, { title: "Representative Updated At", value: 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 (h(Host, null, h(DetailSection, { sectionTitle: "Representative Details" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Name", value: (_a = this.representative) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: "ID", value: (_b = this.representative) === null || _b === void 0 ? void 0 : _b.id }), h(DetailItem, { title: "Representative Address", value: (_c = this.representative) === null || _c === void 0 ? void 0 : _c.address.line1 }), h(DetailItem, { title: "Created At", value: ((_d = this.representative) === null || _d === void 0 ? void 0 : _d.created_at) && formatMediumDate((_e = this.representative) === null || _e === void 0 ? void 0 : _e.created_at) })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Title", value: (_f = this.representative) === null || _f === void 0 ? void 0 : _f.title }), h(DetailItem, { title: "Is Owner?", value: (_g = this.representative) === null || _g === void 0 ? void 0 : _g.is_owner.toString() }), h(DetailItem, { title: "Date Of Birth", value: this.representative && 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))) }), h(DetailItem, { title: "Email", value: (_l = this.representative) === null || _l === void 0 ? void 0 : _l.email }), h(DetailItem, { title: "Phone", value: (_m = this.representative) === null || _m === void 0 ? void 0 : _m.phone }), h(DetailItem, { title: "Updated At", value: this.representative && formatMediumDate((_o = this.representative) === null || _o === void 0 ? void 0 : _o.updated_at) }))))));
   }
   static get is() { return "representative-details"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/business-form/business-form-example.js

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

package/dist/collection/components/business-form/business-form-stepped-example.js

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

package/dist/collection/components/business-form/business-form-stepped.stories.js

@@ -1,7 +1,7 @@
 import { config } from "../../../config";
 class BusinessFormSteppedStoryArgs {
   constructor(args) {
-    this['auth-token'] = args['auth-token'] || '';
+    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
     this['business-id'] = args['business-id'] || '';
     this['account-id'] = args['account-id'] || config.exampleAccountId;
     this['css-variables'] = args['css-variables'] || '';

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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"; }