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

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

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 (748) hide show

package/dist/collection/components/business-form/business-address/business-address-form-schema.js CHANGED Viewed

@@ -11,4 +11,3 @@ const BusinessAddressFormSchema = object({
     .min(5, 'Enter a valid ZIP')
 });
 export default BusinessAddressFormSchema;
-//# sourceMappingURL=business-address-form-schema.js.map

package/dist/collection/components/business-form/business-address/business-address-form.js CHANGED Viewed

@@ -95,4 +95,3 @@ export class BusinessAddressForm {
       }];
   }
 }
-//# sourceMappingURL=business-address-form.js.map

package/dist/collection/components/business-form/business-address/test/business-address.e2e.js CHANGED Viewed

@@ -7,4 +7,3 @@ describe('justifi-business-address-form', () => {
     expect(element).toHaveClass('hydrated');
   });
 });
-//# sourceMappingURL=business-address.e2e.js.map

package/dist/collection/components/business-form/business-address/test/business-address.spec.js CHANGED Viewed

@@ -73,4 +73,3 @@ describe('business-address', () => {
   `);
   });
 });
-//# sourceMappingURL=business-address.spec.js.map

package/dist/collection/components/business-form/business-form-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-business-form')}
+<body>
+  <justifi-business-form></justifi-business-form>
+</body>
+</html>`;

package/dist/collection/components/business-form/business-form-schema.js CHANGED Viewed

@@ -157,4 +157,3 @@ const additionQuestionsSchema = object({
 });
 const businessFormSchema = object(Object.assign(Object.assign({}, businessGenericInfoSchema.fields), { legal_address: legalAddressSchema.required('Enater legal address'), additional_questions: additionQuestionsSchema.required('Enter additional questions'), representative: representativeSchema.required('Enter representative information'), owners: array().of(ownerSchema).min(1, 'Enter at least 1 owners') }));
 export default businessFormSchema;
-//# sourceMappingURL=business-form-schema.js.map

package/dist/collection/components/business-form/business-form-stepped-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-business-form-stepped')}
+<body>
+  <justifi-business-form-stepped></justifi-business-form-stepped>
+</body>
+</html>`;

package/dist/collection/components/business-form/business-form-stepped.js CHANGED Viewed

@@ -21,6 +21,7 @@ export class BusinessFormStepped {
     this.authToken = undefined;
     this.accountId = undefined;
     this.businessId = undefined;
+    this.testMode = false;
     this.isLoading = false;
     this.currentStep = 0;
     this.totalSteps = 4;
@@ -58,6 +59,11 @@ export class BusinessFormStepped {
     }
   }
   async sendData(onSuccess) {
+    // Stopgap solution to prevent sending data in storybook examples.
+    if (this.testMode) {
+      onSuccess();
+      return;
+    }
     this.isLoading = true;
     try {
       const data = this.formController.values.getValue();
@@ -180,6 +186,24 @@ export class BusinessFormStepped {
         },
         "attribute": "business-id",
         "reflect": false
+      },
+      "testMode": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "test-mode",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -192,4 +216,3 @@ export class BusinessFormStepped {
     };
   }
 }
-//# sourceMappingURL=business-form-stepped.js.map

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

@@ -42,6 +42,7 @@ const Template = (args) => {
         auth-token="${authToken}"
         business-id="${businessId}"
         account-id="${accountId}"
+        test-mode="true"
       />
     </div>
     <style>
@@ -129,4 +130,3 @@ Styled.args = new BusinessFormSteppedStoryArgs({
   --jfi-radio-button-group-width: 100%;
   `,
 });
-//# sourceMappingURL=business-form-stepped.stories.js.map

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

@@ -131,4 +131,3 @@ export class BusinessForm {
     };
   }
 }
-//# sourceMappingURL=business-form.js.map

package/dist/collection/components/business-form/business-form.stories.js CHANGED Viewed

@@ -125,4 +125,3 @@ Styled.args = new BusinessFormStoryArgs({
   --jfi-radio-button-group-width: 100%;
   `,
 });
-//# sourceMappingURL=business-form.stories.js.map

package/dist/collection/components/business-form/business-generic-info/business-generic-info.js CHANGED Viewed

@@ -71,4 +71,3 @@ export class BusinessGenericInfo {
     };
   }
 }
-//# sourceMappingURL=business-generic-info.js.map

package/dist/collection/components/business-form/business-owners/business-owners.js CHANGED Viewed

@@ -127,4 +127,3 @@ export class BusinessOwners {
     };
   }
 }
-//# sourceMappingURL=business-owners.js.map

package/dist/collection/components/business-form/business-representative/business-representative-schema.js CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export const RegExZip = /^\d{5}/;
2	- //# sourceMappingURL=business-representative-schema.js.map

package/dist/collection/components/business-form/business-representative/business-representative.js CHANGED Viewed

@@ -68,4 +68,3 @@ export class BusinessRepresentative {
     };
   }
 }
-//# sourceMappingURL=business-representative.js.map

package/dist/collection/components/business-form/helpers.js CHANGED Viewed

@@ -20,4 +20,3 @@ export const parseForPatching = (data) => {
   delete data.owners;
   return data;
 };
-//# sourceMappingURL=helpers.js.map

package/dist/collection/components/business-form/legal-address-form/legal-address-form-schema.js CHANGED Viewed

@@ -8,4 +8,3 @@ const legalAddressSchema = Yup.object({
   country: Yup.string().required('Select country'),
 });
 export default legalAddressSchema;
-//# sourceMappingURL=legal-address-form-schema.js.map

package/dist/collection/components/business-form/legal-address-form/legal-address-form.js CHANGED Viewed

@@ -69,4 +69,3 @@ export class LegalAddressForm {
     };
   }
 }
-//# sourceMappingURL=legal-address-form.js.map

package/dist/collection/components/business-form/test/business-form.spec.js CHANGED Viewed

@@ -41,4 +41,3 @@ describe('justifi-business-form', () => {
     expect(consoleSpy).not.toHaveBeenCalled();
   });
 });
-//# sourceMappingURL=business-form.spec.js.map

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

@@ -194,4 +194,3 @@ export class BusinessList {
       }];
   }
 }
-//# sourceMappingURL=business-list.js.map

package/dist/collection/components/business-list/business-list.stories.js CHANGED Viewed

@@ -66,4 +66,3 @@ Contained.decorators = [
   `
 ];
 Contained.args = new BusinessListArgs({});
-//# sourceMappingURL=business-list.stories.js.map

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

@@ -288,4 +288,3 @@ export class CardForm {
       }];
   }
 }
-//# sourceMappingURL=card-form.js.map

package/dist/collection/components/card-form/card-form.stories.js CHANGED Viewed

@@ -10,6 +10,14 @@ export default {
       },
     },
   },
+  decorators: [
+    story => `
+      <!-- Deprecated Notice -->
+      <p style="color: red; font-family: 'Roboto Mono', monospace;">Note: The 'resize' method is deprecated and will be removed in future releases.</p>
+      ${story()}
+      <script>${addEvents()}</script>
+    `,
+  ],
 };
 const handleValidateClick = async (cardForm) => {
   const valid = await cardForm.validate();
@@ -127,4 +135,3 @@ Styled.args = {
   'single-line': false,
   'css-variables': styledVariables,
 };
-//# sourceMappingURL=card-form.stories.js.map

package/dist/collection/components/card-form/test/card-form.e2e.js CHANGED Viewed

@@ -11,4 +11,3 @@ describe('justifi-card-form', () => {
     expect(readyEventSpy).toHaveReceivedEventTimes(1);
   });
 });
-//# sourceMappingURL=card-form.e2e.js.map

package/dist/collection/components/card-form/test/card-form.spec.js CHANGED Viewed

@@ -53,4 +53,3 @@ describe('justifi-card-form', () => {
     expect(tokenizeMock).toHaveBeenCalledWith(...tokenizeArgs);
   });
 });
-//# sourceMappingURL=card-form.spec.js.map

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

@@ -44,4 +44,3 @@ export class Details {
     };
   }
 }
-//# sourceMappingURL=details.js.map

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

@@ -6,4 +6,3 @@ export const DetailItem = ({ title, value, }) => title && value ? (h("div", { cl
 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;
-//# sourceMappingURL=utils.js.map

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() {
@@ -230,4 +230,3 @@ export class DatePartInput {
       }];
   }
 }
-//# sourceMappingURL=form-control-datepart.js.map

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

@@ -183,4 +183,3 @@ export class MonetaryInput {
       }];
   }
 }
-//# sourceMappingURL=form-control-monetary.js.map

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

@@ -214,4 +214,3 @@ export class NumberInputMasked {
       }];
   }
 }
-//# sourceMappingURL=form-control-number-masked.js.map

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

@@ -191,4 +191,3 @@ export class NumberInput {
       }];
   }
 }
-//# sourceMappingURL=form-control-number.js.map

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

@@ -197,4 +197,3 @@ export class SelectInput {
       }];
   }
 }
-//# sourceMappingURL=form-control-select.js.map

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

@@ -191,4 +191,3 @@ export class TextInput {
       }];
   }
 }
-//# sourceMappingURL=form-control-text.js.map

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

@@ -90,4 +90,3 @@ export class FormController {
     return this._initialValues;
   }
 }
-//# sourceMappingURL=form.js.map

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

@@ -56,4 +56,3 @@ export const generateChartOptions = (total, dates, endDate) => {
     },
   });
 };
-//# sourceMappingURL=chart-utils.js.map

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) {
@@ -125,4 +137,3 @@ export class GrossPaymentChart {
       }];
   }
 }
-//# sourceMappingURL=gross-payment-chart.js.map

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

@@ -1,6 +1,6 @@
 import { config } from "../../../config";
 export default {
-  title: 'dev/Components/GrossPaymentChart',
+  title: 'Components/GrossPaymentChart',
   component: 'justifi-gross-payment-chart',
   parameters: {}
 };
@@ -20,4 +20,3 @@ const Template = (args) => {
 };
 export const Basic = Template.bind({});
 Basic.args = new GrossChartArgs({});
-//# sourceMappingURL=gross-payment-chart.stories.js.map

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

@@ -12,4 +12,3 @@ describe('gross-payment-chart', () => {
     `);
   });
 });
-//# sourceMappingURL=gross-payment-chart.spec.js.map

package/dist/collection/components/pagination-menu/pagination-menu.js CHANGED Viewed

@@ -75,4 +75,3 @@ export class PaginationMenu {
     };
   }
 }
-//# sourceMappingURL=pagination-menu.js.map

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.js CHANGED Viewed

@@ -151,4 +151,3 @@ export class PaymentBalanceTransactions {
       }];
   }
 }
-//# sourceMappingURL=payment-balance-transactions.js.map

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.stories.js CHANGED Viewed

@@ -30,4 +30,3 @@ Styled.decorators = [
     ${Story()}
   `,
 ];
-//# sourceMappingURL=payment-balance-transactions.stories.js.map

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"; }
@@ -130,4 +139,3 @@ export class PaymentDetails {
       }];
   }
 }
-//# sourceMappingURL=payment-details.js.map

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

@@ -45,4 +45,3 @@ Styled.decorators = [
     </style>
   `
 ];
-//# sourceMappingURL=payment-details.stories.js.map

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",
@@ -323,4 +333,3 @@ export class PaymentForm {
       }];
   }
 }
-//# sourceMappingURL=payment-form.js.map

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

@@ -127,4 +127,3 @@ Styled.args = {
   --jfi-radio-button-group-width: 100%;
   `,
 };
-//# sourceMappingURL=payment-form.stories.js.map

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

@@ -94,4 +94,3 @@ export class PaymentMethodSelector {
       }];
   }
 }
-//# sourceMappingURL=payment-method-selector.js.map

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

@@ -20,4 +20,3 @@ describe('justifi-payment-form', () => {
     expect(await submitButton.textContent).toBe('Pay Now');
   });
 });
-//# sourceMappingURL=payment-form.e2e.js.map

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

@@ -180,4 +180,3 @@ describe('justifi-payment-form', () => {
     `);
   });
 });
-//# sourceMappingURL=payment-form.spec.js.map

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

	@@ -1,2 +1 @@
1 1	export {};
2	- //# sourceMappingURL=tokenize.js.map

package/dist/collection/components/payment-method-form/get-computed-theme.js CHANGED Viewed

@@ -48,4 +48,3 @@ const getComputedTheme = () => {
   return computedTheme;
 };
 export default getComputedTheme;
-//# sourceMappingURL=get-computed-theme.js.map

package/dist/collection/components/payment-method-form/message-event-types.js CHANGED Viewed

@@ -14,4 +14,3 @@ export const MessageEventType = {
     styleOverrides: 'justifi.bankAccount.styleOverrides',
   },
 };
-//# sourceMappingURL=message-event-types.js.map

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

@@ -280,4 +280,3 @@ export class PaymentMethodForm {
     };
   }
 }
-//# sourceMappingURL=payment-method-form.js.map

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

	@@ -1,2 +1 @@
1 1	export {};
2	- //# sourceMappingURL=payment-method-responses.js.map

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

@@ -19,4 +19,3 @@ it('should emit "paymentMethodFormTokenize" when conditions are met', async () =
   await page.waitForChanges();
   expect(tokenizeEventSpy).toHaveReceivedEventTimes(1);
 });
-//# sourceMappingURL=payment-method-form.e2e.js.map

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

@@ -81,4 +81,3 @@ describe('justifi-payment-method-form', () => {
     `);
   });
 });
-//# sourceMappingURL=payment-method-form.spec.js.map

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

	@@ -1,2 +1 @@
1 1	export {};
2	- //# sourceMappingURL=theme.js.map