@justifi/webcomponents 5.6.0 → 5.7.0

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

@@ -1,52 +1,44 @@
 import { h } from "@stencil/core";
 import { FormController } from "../../../ui-components/form/form";
 import { businessFormSchema } from "../schemas/business-form-schema";
-import { Api } from "../../../api";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../api";
 import { Business, BusinessFormServerErrors } from "../../../api/Business";
 import JustifiAnalytics from "../../../api/Analytics";
 import { Button, Header1, StyledHost } from "../../../ui-components";
 import { checkPkgVersion } from "../../../utils/check-pkg-version";
 import { BusinessFormLoading } from "./business-form-loading";
 import { BusinessFormClickActions } from "../utils";
+import { makeGetBusiness, makePatchBusiness } from "../payment-provisioning/payment-provisioning-actions";
+import { BusinessService } from "../../../api/services/business.service";
 export class BusinessForm {
     constructor() {
+        this.isLoading = false;
+        this.isSaving = false;
         this.hideErrors = false;
         this.formTitle = 'Business Information';
         this.removeTitle = false;
-        this.isLoading = false;
-        this.isSaving = false;
         this.instantiateBusiness = (data) => {
             const business = new Business(data);
             this.formController.setInitialValues(Object.assign({}, business));
         };
         this.sendData = async () => {
             this.isSaving = true;
-            try {
-                const values = this.formController.values.getValue();
-                const initialValues = this.formController.getInitialValues();
-                const payload = new Business(Object.assign(Object.assign({}, initialValues), values)).payload;
-                const response = await this.api.patch(this.businessEndpoint, payload);
-                this.handleReponse(response);
-            }
-            catch (error) {
-                this.errorMessage = BusinessFormServerErrors.patchData;
-            }
-            finally {
-                this.isSaving = false;
-            }
-        };
-        this.fetchData = async () => {
-            this.isLoading = true;
-            try {
-                const response = await this.api.get(this.businessEndpoint);
-                this.instantiateBusiness(response.data);
-            }
-            catch (error) {
-                this.errorMessage = BusinessFormServerErrors.fetchData;
-            }
-            finally {
-                this.isLoading = false;
-            }
+            const values = this.formController.values.getValue();
+            const initialValues = this.formController.getInitialValues();
+            const payload = new Business(Object.assign(Object.assign({}, initialValues), values)).payload;
+            this.patchBusiness({
+                payload,
+                onSuccess: (response) => {
+                    this.handleReponse(response);
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorMessage = error.message;
+                    this.errorEvent.emit({ errorCode: code, message: error.message, severity });
+                },
+                final: () => {
+                    this.isSaving = false;
+                }
+            });
         };
         this.validateAndSubmit = (event) => {
             event.preventDefault();
@@ -56,15 +48,8 @@ export class BusinessForm {
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
-        const missingAuthTokenMessage = 'Warning: Missing auth-token. The form will not be functional without it.';
-        const missingBusinessIdMessage = 'Warning: Missing business-id. The form requires an existing business-id to function.';
-        if (!this.authToken)
-            console.error(missingAuthTokenMessage);
-        if (!this.businessId)
-            console.error(missingBusinessIdMessage);
         this.formController = new FormController(businessFormSchema);
-        this.api = Api({ authToken: this.authToken, apiOrigin: PROXY_API_ORIGIN });
-        this.fetchData();
+        this.initializeApi();
     }
     disconnectedCallback() {
         this.analytics.cleanup();
@@ -78,11 +63,44 @@ export class BusinessForm {
     get businessEndpoint() {
         return `entities/business/${this.businessId}`;
     }
+    initializeApi() {
+        if (this.authToken && this.businessId) {
+            this.getBusiness = makeGetBusiness({
+                authToken: this.authToken,
+                businessId: this.businessId,
+                service: new BusinessService()
+            });
+            this.patchBusiness = makePatchBusiness({
+                authToken: this.authToken,
+                businessId: this.businessId,
+                service: new BusinessService()
+            });
+            this.getBusiness({
+                onSuccess: (response) => {
+                    this.instantiateBusiness(response.data);
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorMessage = error.message;
+                    this.errorEvent.emit({ errorCode: code, message: error.message, severity });
+                },
+                final: () => {
+                    this.isLoading = false;
+                }
+            });
+        }
+        else {
+            this.errorEvent.emit({
+                message: 'auth-token and business-id are required',
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
     handleReponse(response) {
         if (response.error) {
             this.errorMessage = BusinessFormServerErrors.patchData;
         }
-        this.submitEvent.emit({ response: response });
+        this.submitEvent.emit({ response });
         this.instantiateBusiness(response.data);
     }
     render() {
@@ -245,6 +263,27 @@ export class BusinessForm {
                         }
                     }
                 }
+            }, {
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
+                    "references": {
+                        "ComponentErrorEvent": {
+                            "location": "import",
+                            "path": "../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
+                        }
+                    }
+                }
             }];
     }
 }

package/dist/collection/components/business-forms/payment-provisioning/business-core-info/business-core-info-form-step-core.js

@@ -82,7 +82,7 @@ export class BusinessCoreInfoFormStepCore {
         if (this.isLoading) {
             return h(PaymentProvisioningLoading, null);
         }
-        return (h("form", null, h("fieldset", null, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Business Information")), h("hr", { class: "mt-2" }), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Business Name", defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (don't use acronyms or abbreviations unless you registered that way)." })), h("div", { class: "col-12" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (leave blank if you don't have a registered DBA/trade name)" })), h("div", { class: "col-12 col-md-8" }, h("form-control-select", { name: "classification", label: "Business Classification", options: businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "date_of_incorporation", label: "Date of Incorporation", defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler, helpText: "Describe what you sell" })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "tax_id", label: "Tax ID (EIN or SSN)", defaultValue: coreInfoDefaultValue.tax_id, errorText: this.errors.tax_id, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, maxLength: 9, helpText: "Employer Identification Numbers (EINs) are nine digits. The federal tax identification number/EIN issued to you by the IRS. It can be found on your tax returns." })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Business Website URL", defaultValue: coreInfoDefaultValue.website_url, errorText: this.errors.website_url, inputHandler: this.inputHandler, helpText: "Don't have a live website? You can use your social media business page, app store link, or staging site URL." })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Business Email Address", defaultValue: coreInfoDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Business Phone Number", defaultValue: coreInfoDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
+        return (h("form", null, h("fieldset", null, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Business Information")), h("hr", { class: "mt-2" }), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Business Name", defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (don't use acronyms or abbreviations unless you registered that way)." })), h("div", { class: "col-12" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (leave blank if you don't have a registered DBA/trade name)" })), h("div", { class: "col-12 col-md-8" }, h("form-control-select", { name: "classification", label: "Business Classification", options: businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "date_of_incorporation", label: "Date of Incorporation", defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler, helpText: "Describe what you sell" })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "tax_id", label: "Tax ID (EIN or SSN)", defaultValue: coreInfoDefaultValue.tax_id, errorText: this.errors.tax_id, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, maxLength: 9, helpText: "Employer Identification Numbers (EINs) are nine digits. The federal tax identification number/EIN issued to you by the IRS. It can be found on your tax returns. Enter value without dashes." })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Business Website URL", defaultValue: coreInfoDefaultValue.website_url, errorText: this.errors.website_url, inputHandler: this.inputHandler, helpText: "Don't have a live website? You can use your social media business page, app store link, or staging site URL." })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Business Email Address", defaultValue: coreInfoDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Business Phone Number", defaultValue: coreInfoDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
     }
     static get is() { return "justifi-business-core-info-form-step-core"; }
     static get properties() {

package/dist/collection/components/business-forms/schemas/business-core-info-schema.js

@@ -9,7 +9,7 @@ export const businessCoreInfoSchema = (allowOptionalFields) => {
         doing_business_as: doingBusinessAsValidation.nullable(),
         classification: businessClassificationValidation.required('Select business classification'),
         industry: industryValidation.required('Enter a business industry'),
-        tax_id: taxIdValidation.required('Enter tax id, SSN, or EIN'),
+        tax_id: taxIdValidation.required('Enter valid tax ID (SSN or EIN) without dashes'),
         date_of_incorporation: dateOfIncorporationValidation.required('Enter date of incorporation'),
     });
     const easySchema = object({

package/dist/collection/components/checkout/bank-account-form/bank-account-form.js

@@ -1,16 +1,13 @@
 import { h, Host } from "@stencil/core";
 import BankAccountFormSkeleton from "./bank-account-form-skeleton";
+import { configState, waitForConfig } from "../../config-provider/config-state";
 export class BankAccountForm {
     constructor() {
         this.isReady = false;
     }
-    async validate() {
-        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
-        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
-        return accountNumberIsValid && routingNumberIsValid;
-    }
-    async tokenize(clientId, paymentMethodMetadata, account) {
-        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    async componentWillLoad() {
+        await waitForConfig();
+        this.iframeOrigin = configState.iframeOrigin;
     }
     componentDidRender() {
         const elements = [
@@ -25,39 +22,25 @@ export class BankAccountForm {
             this.isReady = true;
         });
     }
+    async validate() {
+        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
+        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
+        return accountNumberIsValid && routingNumberIsValid;
+    }
+    async tokenize(clientId, paymentMethodMetadata, account) {
+        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
     render() {
-        return (h(Host, { key: '3d21d5269871beaffeffaef8b9c5104da59c1783' }, h(BankAccountFormSkeleton, { key: 'eb14285f2f0994085423901139f717c3b644273b', isReady: this.isReady }), h("div", { key: '906895204049f1113d596bade78de29bd5def6c2', class: "container-fluid p-0", style: {
+        return (h(Host, { key: 'b6cdf5a9320d92a5390daaa0a5218274f2dfc178' }, h(BankAccountFormSkeleton, { key: '286fcc38a26820d166ced0bc886143ed3d880da4', isReady: this.isReady }), h("div", { key: '041fcacff70d7cdfc0c8f41258bd9db18703e4c1', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'c56aa2cdec0c8be615dee4388346e890b2610b82', class: "row mb-3" }, h("iframe-input", { key: '5dd97225f360e267abf0c772b28ba890edf284db', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '20504c4b3c984c907765b99051a9e44ad6b5a37a', class: "row" }, h("iframe-input", { key: 'a85f47d87b01e099ac54969ce482abcc1fcb5366', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: '94dc0eb0d79b40ade96e1961611e3e7a8eef20ea', class: "row mb-3" }, h("iframe-input", { key: '41c82b772e7873a45409e35ed56dfea16c20c2ee', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '1c95618a50e2d36a3a9a3a7b691ae0dfa6a09936', class: "row" }, h("iframe-input", { key: '28a4dde70c8f55b4f6bf6ce2d3beee6acbebbc0b', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
     static get is() { return "bank-account-form"; }
-    static get properties() {
-        return {
-            "iframeOrigin": {
-                "type": "string",
-                "attribute": "iframe-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            }
-        };
-    }
     static get states() {
         return {
-            "isReady": {}
+            "isReady": {},
+            "iframeOrigin": {}
         };
     }
     static get methods() {

package/dist/collection/components/checkout/card-form/card-form.js

@@ -1,9 +1,14 @@
 import { h, Host } from "@stencil/core";
 import CardFormSkeleton from "./card-form-skeleton";
+import { configState, waitForConfig } from "../../config-provider/config-state";
 export class CardForm {
     constructor() {
         this.isReady = false;
     }
+    async componentWillLoad() {
+        await waitForConfig();
+        this.iframeOrigin = configState.iframeOrigin;
+    }
     componentDidRender() {
         const elements = [
             this.cardNumberIframeElement,
@@ -30,38 +35,16 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '035f015833d7c16a99ffb3cc4c1b88f44928839f' }, h(CardFormSkeleton, { key: '4f6a98efb4bb1ec08bc7660fe8fb11cf1f91aac4', isReady: this.isReady }), h("div", { key: 'efe85d9a9f3cd1ecabd6014b4e6ef6a22dce94f1', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '3d28e96f020196a359a359507237b50dd9fed020' }, h(CardFormSkeleton, { key: 'ee07eb10acf142fcaab1398278e335df49f1abe9', isReady: this.isReady }), h("div", { key: 'bfce475f392cbb2bad3fd1c76f16c6e6a6718c1f', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'd72b1e2e6034d556eccbc6bd68b1469ce51ae257', class: "mb-3" }, h("iframe-input", { key: 'd5d4ae255037b01aced2c90c59bb74d65053b88a', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '1ff59862ecaf86c067638bc86a7a21425ee27ec0', class: "row" }, h("div", { key: '3f6803d69bc30890eb39f005c32c06d0cfb6cf0d', class: "col-4 align-content-end" }, h("iframe-input", { key: 'a328d46fbfea56f3fd483194a74e6d8520cbc2ae', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '46594d660b45a68f5b578823ed54db1a570a0291', class: "col-4 align-content-end" }, h("iframe-input", { key: 'e107c2515d16a339d52a3b08f91537eca3c92a23', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '3df8a556f5e0bade368137a673e814774ad507b9', class: "col-4 align-content-end" }, h("iframe-input", { key: '3432154c7645eda22beb1fe180936357b5b4b2c2', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: 'e8517852800a9a165e61308f8d1cf875a87c021e', class: "mb-3" }, h("iframe-input", { key: '6efe224b7f4a2f63eec601d3e48c454d78c30300', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'cb6df3c5d9788a22c26255d1fe94331544730d24', class: "row" }, h("div", { key: '895943798b131da4215b24da822f7109e045e05b', class: "col-4 align-content-end" }, h("iframe-input", { key: 'ebea71cabe9f783734f924cfd0b03797cd203ce7', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'a65042ba66ca4a2a6f520147d316eb20f82369ea', class: "col-4 align-content-end" }, h("iframe-input", { key: '8ef921245a3075ba36c310955bea671b71aca658', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'e37d637b078a36736ba698d0d96465e138fcf5ab', class: "col-4 align-content-end" }, h("iframe-input", { key: 'df20adb17524ea29f55e1c223267a9f0294b6062', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
     static get is() { return "card-form"; }
-    static get properties() {
-        return {
-            "iframeOrigin": {
-                "type": "string",
-                "attribute": "iframe-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            }
-        };
-    }
     static get states() {
         return {
-            "isReady": {}
+            "isReady": {},
+            "iframeOrigin": {}
         };
     }
     static get methods() {

package/dist/collection/components/checkout/checkout-core.js

@@ -115,14 +115,14 @@ export class CheckoutCore {
     }
     get paymentType() {
         var _a, _b, _c, _d, _e;
-        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled, iframeOrigin: this.iframeOrigin }))));
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
     }
     get summary() {
         var _a, _b;
         return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { part: text }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", null, h("span", { part: text }, "Total"), "\u00A0", h("span", { part: text }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
     }
     render() {
-        return (h(StyledHost, { key: 'f02d0164b3e051bef6898d28efc52c3eb957b0ea' }, h("div", { key: '457c53bd60d22b1c31693f657ba68e37c92e6004', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '80a64216626921e9ea1162aaadcbcd39e646b8f6', class: "col-12", part: checkoutSummary }, h(Header2, { key: '6c26edfa8e55efa4e6dce35bc6a033049d3274a9', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: '871352bbea880434c1f1206a185116beeb583225', class: "col-12" }, h("slot", { key: '7c1f22eee6502bb3921d6b887408df94a62eda4b', name: "insurance" })), h("div", { key: 'c47495deecf30222832850b904db0187cfe914cd', class: "col-12 mt-4" }, h(Header2, { key: 'f4b8b52bce3f002948918edc9fe319f2e6688673', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '3013b9ac43206948e1fd1e2a3c58c8b99e8c71d2', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: 'f7820a1754a6885572e44bd58c3cf819a6d5c3cf', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '54368dbcbf70067aca7f275db6dccf890b46408a', class: "col-12" }, h("div", { key: 'd7fda8916e810961613921eb1d7c5d04c1051fb5', class: "d-flex justify-content-end" }, h(Button, { key: '347e5a5abde014dc3222a7603603d35547c09671', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
+        return (h(StyledHost, { key: '2fb8b2c2b543712023c74cf9b41dc57675c89237' }, h("div", { key: 'caba36e076e4162d9c92844f7c0632b5bf678de6', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '6a27d64005d785815d5567894d6e2a6e1e515cf8', class: "col-12", part: checkoutSummary }, h(Header2, { key: '645fe4250331805e86811700b453458f065188bd', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: 'c49c73eb3462ad17e0344e74be508abe958a9358', class: "col-12" }, h("slot", { key: 'be626bff57c95b92f9853e2e9b63dd9279834142', name: "insurance" })), h("div", { key: '025b0400164935f10d6c79d445bfdcf157290fd6', class: "col-12 mt-4" }, h(Header2, { key: '483b5d53b5cea3ae6fccfbb3aa9d3efe0dc8fcab', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '21abbd4d669e351c8ad0a87b7b408a4998948b46', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: '9441e97e1bd64b796ebcf1404d4ca04964990982', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '9db2e4fccff5b868e7d329d9b0be864942adcc3d', class: "col-12" }, h("div", { key: '2eaef4ed6062b27de2516de7b71a056c829f8cab', class: "d-flex justify-content-end" }, h(Button, { key: '505869afa61094d628b58a32749c44f678e4fda3', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
     }
     static get is() { return "justifi-checkout-core"; }
     static get encapsulation() { return "shadow"; }
@@ -212,25 +212,6 @@ export class CheckoutCore {
                 "setter": false,
                 "reflect": false
             },
-            "iframeOrigin": {
-                "type": "string",
-                "attribute": "iframe-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "disableCreditCard": {
                 "type": "boolean",
                 "attribute": "disable-credit-card",

package/dist/collection/components/checkout/checkout.js

@@ -6,7 +6,6 @@ import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 export class Checkout {
     constructor() {
-        this.iframeOrigin = IFRAME_ORIGIN;
         this.errorMessage = '';
     }
     componentWillLoad() {
@@ -49,11 +48,11 @@ export class Checkout {
         return { isValid };
     }
     render() {
-        return (h("justifi-checkout-core", { key: '5d7045778d53e02d85627ea6f945d45599e6d090', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, iframeOrigin: this.iframeOrigin, ref: el => {
+        return (h("justifi-checkout-core", { key: '2a0e3529580beae8de71d6305e3ca9af2c705ee5', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: el => {
                 if (el) {
                     this.checkoutCoreRef = el;
                 }
-            } }, h("div", { key: '4a5badd7e9f77de58dafb09405cd563014f0e6e2', slot: "insurance" }, h("slot", { key: 'b0067d049fe5ed9bb7b35c8614a28e967872599b', name: "insurance" }))));
+            } }, h("div", { key: '132ad877917930b63fdd9d4ff5432d2f6a82a76d', slot: "insurance" }, h("slot", { key: '9854d96105ebac1adc176ea195f0e0b2b792b125', name: "insurance" }))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -209,26 +208,6 @@ export class Checkout {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "iframeOrigin": {
-                "type": "string",
-                "attribute": "iframe-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "IFRAME_ORIGIN"
             }
         };
     }

package/dist/collection/components/checkout/new-payment-method.js

@@ -69,14 +69,14 @@ export class NewPaymentMethod {
     showNewPaymentMethodForm() {
         var _a;
         const paymentMethodType = (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
-        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el, iframeOrigin: this.iframeOrigin })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el, iframeOrigin: this.iframeOrigin })), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el })), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
     }
     get hiddenRadioInput() {
         return !this.showAch || !this.showCard;
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'a3da4a7aa5c5f68bec412be9eb210e8d45d81e80', class: "payment-method" }, h("div", { key: 'b15cf071a206e09333d55d5c7af26b71a79c46cf', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'd6ff109905c264b201ff3d6f09001a17e4cc351b', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h(Host, { key: 'b80791923e2276322ebe0ce3b25b2073beac188d', class: "payment-method" }, h("div", { key: '47dc555bc135d4562958cf371ca3c8b80ee7236d', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'e485347f39fa4b7d46d64e231931d6bdf541687c', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
     static get is() { return "justifi-new-payment-method"; }
     static get properties() {
@@ -256,25 +256,6 @@ export class NewPaymentMethod {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "iframeOrigin": {
-                "type": "string",
-                "attribute": "iframe-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
             }
         };
     }

package/dist/collection/components/checkout/payment-method-options.js

@@ -51,13 +51,13 @@ export class PaymentMethodOptions {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2cf31e17412eb30afabe6749b86b7d1a6f308114' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '506450161ed363330132c2bfa99a6a7729e94778' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
             const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
             if (newCard || newBankAccount) {
-                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, "show-card": this.showCard, "show-ach": this.showAch, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, iframeOrigin: this.iframeOrigin, ref: (el) => {
+                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, "show-card": this.showCard, "show-ach": this.showAch, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
                         }
@@ -333,25 +333,6 @@ export class PaymentMethodOptions {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "iframeOrigin": {
-                "type": "string",
-                "attribute": "iframe-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
             }
         };
     }

package/dist/collection/components/checkouts-list/checkouts-list-core.js

@@ -4,8 +4,7 @@ import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-co
 import { checkoutTableColumns, checkoutTableCells } from "./checkouts-table";
 import { Table } from "../../utils/table";
 import { getRequestParams, onQueryParamsChange } from "./checkouts-list-params-state";
-import { table, tableCell } from "../../styles/parts";
-import { TableClickActions } from "../../ui-components/table/event-types";
+import { TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions } from "../../ui-components";
 export class CheckoutsListCore {
     constructor() {
         this.checkouts = [];
@@ -119,7 +118,7 @@ export class CheckoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '0dd82ae052b98ada5c277a6472c43992d43485a5', class: "table-wrapper" }, h("table", { key: 'd8bc8f4a0fe8cb778397529704d86815876e831c', class: "table table-hover", part: table }, h("thead", { key: 'b38366e22402d695e20bb713a0c4e38d06e5043f', class: "table-head sticky-top" }, h("tr", { key: '8a82e88f24aaa6bec09de27ec439083572cf617c', class: "table-light text-nowrap" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: 'fc09f4d4263d588fc1002657f6f535097069c16b', class: "table-body" }, h(TableLoadingState, { key: 'beb188a8b7e19eb8516c84727b365e38fb9f07b2', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '5b8945e459c72cb21da62a1ad24f5a409b442137', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '39b99e63e8759221589be8053a88b74d37d78013', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '8effcd26c82977391f8487b80fabe954694338f8', class: "sticky-bottom" }, h("tr", { key: 'cc95a3c59060b0cbc44a39a66c8061912f4c995f', class: "table-light align-middle" }, h("td", { key: '54850b1384a006b4a0a70d465bfac1c94698be9a', part: tableCell, colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'b3f5da967dbd19bf1018fea9a926885ed0f40865', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '79f36b8dd358285868187892962f5e2138942fe8' }, h(TableComponent, { key: 'e48c644e425ac45ab27b92548bc49af35b599245' }, h(TableHead, { key: '6d47b68c0a74f0eff3146dfc4720b0cc0f6fc24d' }, h(TableHeadRow, { key: 'a3660ae82b53ba7dead2e577fd8d573426935dc6' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '08fbd465bae0afa3de8d472c84e0410150509673' }, h(TableLoadingState, { key: 'ba7d778f9fc029166d6228fe9b1a8f1598a68c5a', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '312b176371526658852b74ae228524695f5c1947', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'a24680fb1d681397a3cb266ec34ab5c9310dfa64', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '503ffd707d958a353a18a6f06d1280a0cb01c741' }, h(TableFootRow, { key: '250fcfc3961881ab460221e5e0160d5b6d35e5c3' }, h(TableFootCell, { key: '2631d54b49bbee1502e5412cd9303d7d67746525', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'd7bb27501b62a1089090b06c82b2a2c328a2e0b6', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "checkouts-list-core"; }
     static get properties() {

package/dist/collection/components/checkouts-list/checkouts-list.js

@@ -11,7 +11,6 @@ import { defaultColumnsKeys } from "./checkouts-table";
 export class CheckoutsList {
     constructor() {
         this.errorMessage = null;
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.columns = defaultColumnsKeys;
         this.handleErrorEvent = (event) => {
             this.errorMessage = event.detail.message;
@@ -38,8 +37,7 @@ export class CheckoutsList {
             this.getCheckouts = makeGetCheckouts({
                 accountId: this.accountId,
                 authToken: this.authToken,
-                service: new CheckoutService(),
-                apiOrigin: this.apiOrigin,
+                service: new CheckoutService()
             });
         }
         else {
@@ -56,13 +54,12 @@ export class CheckoutsList {
             this.getSubAccounts = makeGetSubAccounts({
                 accountId: this.accountId,
                 authToken: this.authToken,
-                service: new SubAccountService(),
-                apiOrigin: this.apiOrigin
+                service: new SubAccountService()
             });
         }
     }
     render() {
-        return (h(StyledHost, { key: 'ae2a18885c69808bd589848ae1b33f4a4a3085e9' }, h("checkouts-list-core", { key: '86201976540a348eb800ee07e9c50f68a1f1a1cf', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '086d85512b11a65ac2d8960f515e373093d4bd96' }, h("checkouts-list-core", { key: 'abe06be934ac5f13ec98425f29c6b6b7c0ff4456', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-checkouts-list"; }
     static get encapsulation() { return "shadow"; }
@@ -106,26 +103,6 @@ export class CheckoutsList {
                 "setter": false,
                 "reflect": false
             },
-            "apiOrigin": {
-                "type": "string",
-                "attribute": "api-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "PROXY_API_ORIGIN"
-            },
             "columns": {
                 "type": "string",
                 "attribute": "columns",