@justifi/webcomponents 5.3.2 → 5.3.3

package/dist/collection/api/services/dispute.service.js

@@ -1,20 +1,19 @@
 import { Api } from "..";
-import { config } from "../../../config";
 export class DisputeService {
     async fetchDispute(disputeId, authToken) {
         const endpoint = `disputes/${disputeId}`;
-        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).get(endpoint);
+        return Api({ authToken, apiOrigin: PROXY_API_ORIGIN }).get(endpoint);
     }
     async updateDisputeResponse(disputeId, authToken, payload) {
         const endpoint = `disputes/${disputeId}/response`;
-        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).patch(endpoint, payload);
+        return Api({ authToken, apiOrigin: PROXY_API_ORIGIN }).patch(endpoint, payload);
     }
     async submitDisputeResponse(disputeId, authToken, payload) {
         const endpoint = `disputes/${disputeId}/response`;
-        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).post(endpoint, payload);
+        return Api({ authToken, apiOrigin: PROXY_API_ORIGIN }).post(endpoint, payload);
     }
     async createDisputeEvidence(disputeId, authToken, payload) {
         const endpoint = `disputes/${disputeId}/evidence`;
-        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).put(endpoint, payload);
+        return Api({ authToken, apiOrigin: PROXY_API_ORIGIN }).put(endpoint, payload);
     }
 }

package/dist/collection/api/services/insurance.service.js

@@ -1,12 +1,11 @@
 import { Api } from "..";
-import { config } from "../../../config";
 export class InsuranceService {
     async fetchQuote(authToken, payload) {
         const endpoint = 'insurance/quotes';
-        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).post(endpoint, payload);
+        return Api({ authToken, apiOrigin: PROXY_API_ORIGIN }).post(endpoint, payload);
     }
     async toggleCoverage(authToken, quoteId, payload) {
         const endpoint = `insurance/quotes/${quoteId}/toggle`;
-        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).post(endpoint, payload);
+        return Api({ authToken, apiOrigin: PROXY_API_ORIGIN }).post(endpoint, payload);
     }
 }

package/dist/collection/api/services/payment.service.js

@@ -1,16 +1,12 @@
 import { Api } from "..";
-import { config } from "../../../config";
 export class PaymentService {
-    async fetchPayments(accountId, authToken, params, apiOrigin) {
-        if (!apiOrigin) {
-            apiOrigin = config.proxyApiOrigin;
-        }
+    async fetchPayments(accountId, authToken, params, apiOrigin = PROXY_API_ORIGIN) {
         const api = Api({ authToken, apiOrigin: apiOrigin });
         const endpoint = `account/${accountId}/payments`;
         return api.get(endpoint, params);
     }
     async fetchPayment(paymentId, authToken) {
         const endpoint = `payments/${paymentId}`;
-        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).get(endpoint);
+        return Api({ authToken, apiOrigin: PROXY_API_ORIGIN }).get(endpoint);
     }
 }

package/dist/collection/api/services/payout.service.js

@@ -1,26 +1,16 @@
 import { Api } from "..";
-import { config } from "../../../config";
 export class PayoutService {
-    async fetchPayouts(accountId, authToken, params, apiOrigin) {
-        if (!apiOrigin) {
-            apiOrigin = config.proxyApiOrigin;
-        }
+    async fetchPayouts(accountId, authToken, params, apiOrigin = PROXY_API_ORIGIN) {
         const api = Api({ authToken, apiOrigin });
         const endpoint = `account/${accountId}/payouts`;
         return api.get(endpoint, params);
     }
-    async fetchPayout(payoutId, authToken, apiOrigin) {
-        if (!apiOrigin) {
-            apiOrigin = config.proxyApiOrigin;
-        }
+    async fetchPayout(payoutId, authToken, apiOrigin = PROXY_API_ORIGIN) {
         const api = Api({ authToken, apiOrigin });
         const endpoint = `payouts/${payoutId}`;
         return api.get(endpoint);
     }
-    async fetchCSV(payoutId, authToken, apiOrigin) {
-        if (!apiOrigin) {
-            apiOrigin = config.proxyApiOrigin;
-        }
+    async fetchCSV(payoutId, authToken, apiOrigin = PROXY_API_ORIGIN) {
         const api = Api({ authToken, apiOrigin });
         const endpoint = `reports/payouts/${payoutId}`;
         return api.get(endpoint);

package/dist/collection/api/services/provision.service.js

@@ -1,4 +1,3 @@
-import { config } from "../../../config";
 import Api from "../Api";
 export class ProvisionService {
     async postProvisioning(authToken, businessId, product) {
@@ -7,6 +6,6 @@ export class ProvisionService {
             business_id: businessId,
             product_category: product,
         };
-        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).post(endpoint, payload);
+        return Api({ authToken, apiOrigin: PROXY_API_ORIGIN }).post(endpoint, payload);
     }
 }

package/dist/collection/api/services/reports.service.js

@@ -1,8 +1,7 @@
-import { config } from "../../../config";
 import Api from "../Api";
 export class ReportsService {
     async fetchGrossVolumeChartData(accountId, authToken) {
-        const api = Api({ authToken: authToken, apiOrigin: config.proxyApiOrigin });
+        const api = Api({ authToken: authToken, apiOrigin: PROXY_API_ORIGIN });
         const endpoint = `account/${accountId}/reports/gross_volume`;
         return api.get(endpoint);
     }

package/dist/collection/api/services/subaccounts.service.js

@@ -1,10 +1,6 @@
 import { Api } from "..";
-import { config } from "../../../config";
 export class SubAccountService {
-    async fetchSubAccounts(accountId, authToken, params, apiOrigin) {
-        if (!apiOrigin) {
-            apiOrigin = config.proxyApiOrigin;
-        }
+    async fetchSubAccounts(accountId, authToken, params, apiOrigin = PROXY_API_ORIGIN) {
         const headers = { Account: accountId };
         const api = Api({ authToken, apiOrigin: apiOrigin });
         const endpoint = 'sub_accounts';

package/dist/collection/api/services/terminal.service.js

@@ -1,19 +1,12 @@
 import { Api } from "..";
-import { config } from "../../../config";
 export class TerminalService {
-    async fetchTerminals(accountId, authToken, params, apiOrigin) {
-        if (!apiOrigin) {
-            apiOrigin = config.proxyApiOrigin;
-        }
+    async fetchTerminals(accountId, authToken, params, apiOrigin = PROXY_API_ORIGIN) {
         const headers = { Account: accountId };
         const api = Api({ authToken, apiOrigin });
         const endpoint = 'terminals';
         return api.get(endpoint, params, null, headers);
     }
-    async fetchTerminal(terminalId, authToken, apiOrigin) {
-        if (!apiOrigin) {
-            apiOrigin = config.proxyApiOrigin;
-        }
+    async fetchTerminal(terminalId, authToken, apiOrigin = PROXY_API_ORIGIN) {
         const endpoint = `terminals/${terminalId}`;
         return Api({ authToken, apiOrigin: apiOrigin }).get(endpoint);
     }

package/dist/collection/collection-manifest.json

@@ -73,6 +73,7 @@
     "components/gross-payment-chart/gross-payment-chart.js",
     "components/insurance/season-interruption/season-interruption-insurance-core.js",
     "components/insurance/season-interruption/season-interruption-insurance.js",
+    "components/order-terminals/order-terminals.js",
     "components/payment-details/payment-details-core.js",
     "components/payment-details/payment-details.js",
     "components/payments-list/payments-list-core.js",
@@ -85,6 +86,8 @@
     "components/payouts-list/payouts-list.js",
     "ui-components/form/form-control-date.js",
     "components/refund-form/refund-form.js",
+    "components/terminal-orders-list/terminal-orders-list-core.js",
+    "components/terminal-orders-list/terminal-orders-list.js",
     "components/terminals-list/terminals-list-core.js",
     "components/terminals-list/terminals-list-filters.js",
     "components/terminals-list/terminals-list.js",

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { ErrorState } from "../../ui-components/details/utils";
 import { BusinessService } from "../../api/services/business.service";
-import { makeGetBusiness } from "./get-business";
+import { makeGetBusiness } from "../../actions/business/get-business";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";

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

@@ -2,7 +2,6 @@ import { h } from "@stencil/core";
 import { FormController } from "../../../ui-components/form/form";
 import { businessFormSchema } from "../schemas/business-form-schema";
 import { Api } from "../../../api";
-import { config } from "../../../../config";
 import { Business, BusinessFormServerErrors } from "../../../api/Business";
 import JustifiAnalytics from "../../../api/Analytics";
 import { Button, Header1, StyledHost } from "../../../ui-components";
@@ -67,7 +66,7 @@ export class BusinessForm {
         if (!this.businessId)
             console.error(missingBusinessIdMessage);
         this.formController = new FormController(businessFormSchema);
-        this.api = Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin });
+        this.api = Api({ authToken: this.authToken, apiOrigin: PROXY_API_ORIGIN });
         this.fetchData();
     }
     disconnectedCallback() {

package/dist/collection/components/business-forms/payment-provisioning/terms-and-conditions/business-terms-conditions-form-step.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
 import { FormController } from "../../../../ui-components/form/form";
-import { config } from "../../../../../config";
 import { businessTermsConditionsSchema } from "../../schemas/business-terms-conditions-schema";
 import { Api } from "../../../../api";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../../api/ComponentError";
@@ -74,7 +73,7 @@ export class BusinessTermsConditionsFormStep {
         };
     }
     async componentWillLoad() {
-        this.api = Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin });
+        this.api = Api({ authToken: this.authToken, apiOrigin: PROXY_API_ORIGIN });
         this.formController = new FormController(businessTermsConditionsSchema(this.allowOptionalFields));
         if (this.businessId && this.authToken) {
             this.fetchData();
@@ -115,7 +114,7 @@ export class BusinessTermsConditionsFormStep {
         return (h("a", { href: "https://justifi.tech/merchant-agreement/", target: "_blank", rel: "noopener noreferrer" }, "merchant agreement"));
     }
     render() {
-        return (h("form", { key: '643d1122e14cb32e62e4406c7a375d196ce310e9' }, h("fieldset", { key: 'a002f8bfa7d35b840cf01f5381e1895af3744810' }, h("legend", { key: '2ec353fe730c33c0dc2a103ef08666790343eba7', part: heading2 }, "Terms and Conditions"), h("hr", { key: 'ae538e42c49040ca41a83e9ff8664db89ae5bb03' }), h("div", { key: '2887706d30dad94180792be4c252e20cbf03cef6' }, h("p", { key: 'b1c3a9322ce96ac5265a50da6997228fe1666e9b' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), h("br", { key: 'e78c021fa44eeddb5a963cfde3e5f2fa8d5066c5' }), h("div", { key: '888a15369bea1244f338fb6062090889f6de5aa1', class: "row-gy-3" }, h("div", { key: '510074fb20d80909cbe93fc44ad6918e214e8334', class: "col-12" }, h("form-control-checkbox", { key: 'dcaf2efb889a72335b1204b075a84ec9ff367bf5', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
+        return (h("form", { key: '37500e35233a820f521ee503fc638335a2f4866c' }, h("fieldset", { key: 'e2d1005578397a07b9e876c9a5996e515831c61b' }, h("legend", { key: '46918bc1bd20bb56d4e4882ae3ad9b29e3f6e319', part: heading2 }, "Terms and Conditions"), h("hr", { key: '904dc58480d9e879fcb462c861a3e398d4dd88b7' }), h("div", { key: 'aad73d0a9beddf3487a19bf2af65684309b411aa' }, h("p", { key: '10d9f2ff569e4426aaf1563a98838d89636029fd' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), h("br", { key: 'dfb6de0078ebbbed103e7b901da879d5ee4195a4' }), h("div", { key: '4899d9b2a0c85e6d26bfd6e3d35ec1dd38f814e2', class: "row-gy-3" }, h("div", { key: '011ea552aa484fc1d6a159fb58a8fe7383887584', class: "col-12" }, h("form-control-checkbox", { key: '461b491715ed88e92795c7383af3e351e4d9d046', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
     }
     static get is() { return "justifi-business-terms-conditions-form-step"; }
     static get properties() {

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

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+import { Skeleton } from "../../../ui-components/skeleton";
+const BankAccountFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: "container-fluid p-0" }, h("div", { class: "row mb-3" }, h("div", { class: "col-12 align-content-end" }, h(Skeleton, { height: "18px", width: "120px" }), h(Skeleton, { height: "36px" }))), h("div", { class: "row" }, h("div", { class: "col-12 align-content-end" }, h(Skeleton, { height: "18px", width: "110px" }), h(Skeleton, { height: "36px" })))));
+};
+export default BankAccountFormSkeleton;

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

@@ -1,7 +1,9 @@
 import { h, Host } from "@stencil/core";
+import BankAccountFormSkeleton from "./bank-account-form-skeleton";
 export class BankAccountForm {
     constructor() {
         this.iframeOrigin = undefined;
+        this.isReady = false;
     }
     async validate() {
         const accountNumberIsValid = await this.accountNumberIframeElement.validate();
@@ -11,8 +13,24 @@ export class BankAccountForm {
     async tokenize(clientId, paymentMethodMetadata, account) {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
+    componentDidRender() {
+        const elements = [
+            this.accountNumberIframeElement,
+            this.routingNumberIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
     render() {
-        return (h(Host, { key: 'e2aa1322935463d5e0c32154ed8af52baad6b241' }, h("div", { key: 'bf528ad389d4a34762c164440cb946b727ddbfdd', class: "container-fluid p-0" }, h("div", { key: 'f2004a7223ebb0f2e54ea8c87a813461acb5449a', class: "row mb-3" }, h("iframe-input", { key: '27390ec2ac66557c2a12a38f1bc88dab0415fe57', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '59063a5784405bba8800d1595aecd2748ea9a058', class: "row" }, h("iframe-input", { key: 'fcad3cd545486450882258b86398c2bf84afca74', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+        return (h(Host, { key: '18ace2e10e76c27166f2432a84880be2e14e7d23' }, h(BankAccountFormSkeleton, { key: 'd2d3eb44c8854913866e2f1178418ab5cd43429e', isReady: this.isReady }), h("div", { key: '84987e3e4d8e5ed4f314f7e306f7e8e48f457bcb', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: 'b74ce1520cc0dd97d527ba0b8607ad891a645142', class: "row mb-3" }, h("iframe-input", { key: '6966eae250b2d702d0fb887a09fa1b14467fd823', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '02da6bb34dd86fd0e3dddd0d12bdcb7b85bfc70c', class: "row" }, h("iframe-input", { key: '3f8439860fae1d743e10f6b51f9d10cbe451bcae', 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() {
@@ -36,6 +54,11 @@ export class BankAccountForm {
             }
         };
     }
+    static get states() {
+        return {
+            "isReady": {}
+        };
+    }
     static get methods() {
         return {
             "validate": {

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

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+import { Skeleton } from "../../../ui-components/skeleton";
+const CardFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: "container-fluid p-0" }, h("div", { class: "mb-3" }, h(Skeleton, { height: "18px", width: "100px" }), h(Skeleton, { height: "36px" })), h("div", { class: "row" }, h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "80px" }), h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "30px" }), h(Skeleton, { height: "36px" })))));
+};
+export default CardFormSkeleton;

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

@@ -1,7 +1,24 @@
 import { h, Host } from "@stencil/core";
+import CardFormSkeleton from "./card-form-skeleton";
 export class CardForm {
     constructor() {
         this.iframeOrigin = undefined;
+        this.isReady = false;
+    }
+    componentDidRender() {
+        const elements = [
+            this.cardNumberIframeElement,
+            this.expirationMonthIframeElement,
+            this.expirationYearIframeElement,
+            this.cvvIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
     }
     async validate() {
         const cardNumberIsValid = await this.cardNumberIframeElement.validate();
@@ -14,7 +31,10 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '5dfd2c79d7691744614af89d0919e58db17434b3', class: "container-fluid p-0" }, h("div", { key: '307e9a7acd80285a59369e813bb0172627395cf6', class: "mb-3" }, h("iframe-input", { key: '42de95d9e8f6b785e0dfd7a9b79b23e8c1aab4ee', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '9ab568a45c652478daa2fdd936cb49258b8bdd18', class: "row" }, h("div", { key: 'ee106aa794d4fb0bbcab36f6daada68740bb4262', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c2edb5592c479763a47d399d4d0428d5468f6be5', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'e9577f47e9d3fea9be62fbbde95dc890091c47e0', class: "col-4 align-content-end" }, h("iframe-input", { key: '2f623e190959ed454c3016637f90f38c531d9062', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '4522288e5e0f1b41dc89a690830bb78063ea4df0', class: "col-4 align-content-end" }, h("iframe-input", { key: '9036d997bcd4f8c73e63daa3997111803bc99a36', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` })))));
+        return (h(Host, { key: 'a97247efa8298a7e4c3498690974e482e36ae966' }, h(CardFormSkeleton, { key: '52f338782020b5926377c9968bb85364ad720c68', isReady: this.isReady }), h("div", { key: '7cb7e827c407a18e09c1e0c925896644032428b8', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: '9a49fd64a1464ae0ae032883bd79c8a7e9c5d4b3', class: "mb-3" }, h("iframe-input", { key: '8778a816cbbd96f5b0c7e8f3364a704bd7aab2d8', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '53ab4f9f636acfa72744cd5d364a4ae3a3c732d4', class: "row" }, h("div", { key: '01aec684cab29a4aa24839acfc3ecc9e914c9911', class: "col-4 align-content-end" }, h("iframe-input", { key: '9c87ff44375de2d46028f2532a33856cf608c6a0', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'bc9176ebc7561c7cc0b654e837852a18c1b49f60', class: "col-4 align-content-end" }, h("iframe-input", { key: '5f6b133bc5ae94f912648d210a6e58dd4fe1e880', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '404c90decbac6b142b45c21a2997c0771bb59092', class: "col-4 align-content-end" }, h("iframe-input", { key: '1b9e89656a437b080fbf92b4ebd74772ae1f26f4', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
     static get is() { return "card-form"; }
     static get properties() {
@@ -38,6 +58,11 @@ export class CardForm {
             }
         };
     }
+    static get states() {
+        return {
+            "isReady": {}
+        };
+    }
     static get methods() {
         return {
             "validate": {

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

@@ -1,10 +1,9 @@
 import { h } from "@stencil/core";
-import { makeGetCheckout, makeCheckoutComplete } from "./checkout-actions";
+import { makeGetCheckout, makeCheckoutComplete } from "../../actions/checkout/checkout-actions";
 import { CheckoutService } from "../../api/services/checkout.service";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
-import { config } from "../../../config";
 export class Checkout {
     constructor() {
         this.authToken = undefined;
@@ -14,7 +13,7 @@ export class Checkout {
         this.disableBnpl = undefined;
         this.disablePaymentMethodGroup = undefined;
         this.hideCardBillingForm = undefined;
-        this.iframeOrigin = config.iFrameOrigin;
+        this.iframeOrigin = IFRAME_ORIGIN;
         this.getCheckout = undefined;
         this.complete = undefined;
         this.errorMessage = '';
@@ -55,11 +54,11 @@ export class Checkout {
         this.checkoutCoreRef.fillBillingForm(fields);
     }
     render() {
-        return (h("justifi-checkout-core", { key: '911e807dc0be670c6bfe59e497cacd5399481981', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, iframeOrigin: this.iframeOrigin, ref: el => {
+        return (h("justifi-checkout-core", { key: '52aca1a3ce8016a382f428ef142abc8aee9da41d', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, iframeOrigin: this.iframeOrigin, ref: el => {
                 if (el) {
                     this.checkoutCoreRef = el;
                 }
-            } }, h("div", { key: '29bcfd776e4dac5a7686a03488d0f8dad2d01a03', slot: "insurance" }, h("slot", { key: '993b8872e8a40dd5111ccaeb586686a396eab2ff', name: "insurance" }))));
+            } }, h("div", { key: 'fabb53264f26320fff2aa0a603c664f47ca380d0', slot: "insurance" }, h("slot", { key: 'ce09504ef5a48d6b963f4ba39252d681f23d0168', name: "insurance" }))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -199,7 +198,7 @@ export class Checkout {
                 },
                 "attribute": "iframe-origin",
                 "reflect": false,
-                "defaultValue": "config.iFrameOrigin"
+                "defaultValue": "IFRAME_ORIGIN"
             }
         };
     }

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

@@ -3,7 +3,7 @@ import { pagingDefaults } from "../../api";
 import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { checkoutTableColumns, checkoutTableCells } from "./checkouts-table";
 import { Table } from "../../utils/table";
-import { queryParams, onQueryParamsChange } from "./checkouts-list-params-state";
+import { getRequestParams, onQueryParamsChange } from "./checkouts-list-params-state";
 import { table, tableCell } from "../../styles/parts";
 import { TableClickActions } from "../../ui-components/table/event-types";
 export class CheckoutsListCore {
@@ -53,7 +53,7 @@ export class CheckoutsListCore {
     fetchData() {
         this.loading = true;
         this.getCheckouts({
-            params: this.requestParams,
+            params: this.checkoutParams,
             onSuccess: async ({ checkouts, pagingInfo }) => {
                 this.checkouts = checkouts;
                 this.paging = pagingInfo;
@@ -100,9 +100,10 @@ export class CheckoutsListCore {
             },
         });
     }
-    get requestParams() {
-        const combinedParams = Object.assign(Object.assign({}, queryParams), this.pagingParams);
-        return combinedParams;
+    get checkoutParams() {
+        const requestParams = getRequestParams();
+        const params = Object.assign(Object.assign({}, requestParams), this.pagingParams);
+        return params;
     }
     get subAccountParams() {
         let accountIdNumbers = this.checkouts.map((checkout) => checkout.account_id);
@@ -123,7 +124,7 @@ export class CheckoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '525904319e2827a04ccbd44f83881504ddeba992' }, h("div", { key: '30c5800d270fe77e2a396b6379273a0639d4221e', class: "table-wrapper" }, h("table", { key: 'f8a66cf99bf0dc185d0cc541e3d38f4b68b136be', class: "table table-hover", part: table }, h("thead", { key: 'c47c664e4bc8526b494d089b8e1198dfe27fa4fc', class: "table-head sticky-top" }, h("tr", { key: '645aca7f2610bd3b86c8e775edf264c9f53c7f6f', class: "table-light text-nowrap" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: '79a046fced553f214e55d56c401211d0d682394e', class: "table-body" }, h(TableLoadingState, { key: '654f967a8b9552213a232d35e74d2700cc237cfd', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '80d985f6055e254262653e240b0d16a2e46123d0', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'a99fa4e4f370b70cc927a9b3e65d54828e56e448', 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: '619b3f952c5e6f8e1c612927b5d976ea6e4cffe7', class: "sticky-bottom" }, h("tr", { key: '5fb77b80e4c52154c658bbd2ebc8de9d8bc903aa', class: "table-light align-middle" }, h("td", { key: 'a5d1d6d1cf164681ad7a5f59bf4ae9a70e94911c', part: tableCell, colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'ce6e17ee3d3a6a3f513dedef209e9d4f2d7eff31', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: 'ae6d3dfefad89fcd28b2ad883a1d1172fffd2218' }, h("div", { key: '91329a7880cd774c71cf30722b7be49b8a0109e9', class: "table-wrapper" }, h("table", { key: '75f974cc2140089a7a42738ef0cd3bd67729ca8d', class: "table table-hover", part: table }, h("thead", { key: '6aaaee8db285ca1b94cea662f62a51040f2a0f06', class: "table-head sticky-top" }, h("tr", { key: '68215e0698b97a8389083a521bd8a493c410a196', class: "table-light text-nowrap" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: 'b3aa9bd464fda772fae2e191e1cc4f4612bd514b', class: "table-body" }, h(TableLoadingState, { key: 'a874602fb597ee55def35b80474bd2228b918200', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '8c30048e8766be8ca14fbbd6f990aac019904b26', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'c567bbca2ebbdc42dcfa6c07ae2c61b538643cb7', 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: 'f02cd5b963f2c087b1a8ab60f25f6b1081e735aa', class: "sticky-bottom" }, h("tr", { key: 'a651ab932931db6a4ad42888a9b43e7b89a58495', class: "table-light align-middle" }, h("td", { key: '1fde503bccc4e79454d5786fac8f82bea67618e1', part: tableCell, colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '6237a008bc148f44aa7e159d530470c5114b32e4', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "checkouts-list-core"; }
     static get properties() {
@@ -245,9 +246,6 @@ export class CheckoutsListCore {
     }
     static get watchers() {
         return [{
-                "propName": "queryParams",
-                "methodName": "updateOnPropChange"
-            }, {
                 "propName": "pagingParams",
                 "methodName": "updateOnPropChange"
             }, {

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

@@ -1,31 +1,97 @@
 import { h } from "@stencil/core";
-import { queryParams, clearParams } from "./checkouts-list-params-state";
+import { ICheckoutPaymentMode, ICheckoutStatus } from "../../api";
+import { filterParams, propsParams, clearParams } from "./checkouts-list-params-state";
 import { StyledHost } from "../../ui-components";
+import { checkoutsListFilterMenu, paymentModeCheckoutsListFilterParam, statusCheckoutsListFilterParam } from "../../styles/parts";
 export class CheckoutsListFilters {
     constructor() {
         this.setParamsOnChange = (name, value) => {
-            queryParams[name] = value;
+            filterParams[name] = value;
         };
+        this.checkoutStatus = undefined;
+        this.paymentMode = undefined;
+    }
+    componentWillLoad() {
+        const propsToSet = {
+            status: this.checkoutStatus,
+            payment_mode: this.paymentMode,
+        };
+        Object.entries(propsToSet).forEach(([key, value]) => {
+            if (value) {
+                propsParams[key] = value;
+            }
+        });
     }
     get checkoutStatusOptions() {
         return [
             { label: 'All', value: '' },
-            { label: 'Created', value: 'created' },
-            { label: 'Completed', value: 'completed' },
-            { label: 'Attempted', value: 'attempted' },
-            { label: 'Expired', value: 'expired' },
+            { label: 'Created', value: ICheckoutStatus.created },
+            { label: 'Completed', value: ICheckoutStatus.completed },
+            { label: 'Attempted', value: ICheckoutStatus.attempted },
+            { label: 'Expired', value: ICheckoutStatus.expired },
         ];
     }
     get checkoutPaymentModeOptions() {
         return [
             { label: 'All', value: '' },
-            { label: 'E-commerce', value: 'ecom' },
-            { label: 'BNPL', value: 'bnpl' },
+            { label: 'E-commerce', value: ICheckoutPaymentMode.ecom },
+            { label: 'BNPL', value: ICheckoutPaymentMode.bnpl },
         ];
     }
     render() {
-        return (h(StyledHost, { key: '5015b8422169ea4c32f8e92f3931963ad0d8c8f9' }, h("table-filters-menu", { key: '2169201810641e563dc0af321c5b7367fad04a3a', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: '802ce6488f2204ece4845e95d9225b05c428bc13', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '99dfed0fafadff13f37e6cbfcb98761be6d49a68', class: "p-2" }, h("form-control-select", { key: '0b37e4c6685be467c08b3c86df6f9bfc8ab52e3d', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.status || '' })), h("div", { key: 'dec0b6be6d13847dbf748ea0a038df2db143afe2', class: "p-2" }, h("form-control-select", { key: 'acd5f387f5ea2a4b5918b9a3a80eaac199bbd8d5', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.payment_mode || '' }))))));
+        const filterMenuParams = Object.assign({}, filterParams);
+        return (h(StyledHost, { key: 'cd70cc85372ea03d544340c36de1bc559cce757d' }, h("table-filters-menu", { key: '332fbf23bcf5e542aa3439b93bcfe046889b89b0', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'a95f24fa9b92cd35e0dd15a7fc5cafb2cca84c9f', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'd58366e790b1bb2fb3aa8605a806a8197ea4f5c9', class: "p-2" }, h("form-control-select", { key: '1e48969ede334298a5d058f22bf5b1e39c78f535', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '33d8d552c77a6355423e9252779f85b288e123d1', class: "p-2" }, h("form-control-select", { key: 'a1ae23979fb00d92a9a1c7972c375494cabde720', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
     }
     static get is() { return "justifi-checkouts-list-filters"; }
     static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "checkoutStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ICheckoutStatus",
+                    "resolved": "ICheckoutStatus.attempted | ICheckoutStatus.completed | ICheckoutStatus.created | ICheckoutStatus.expired",
+                    "references": {
+                        "ICheckoutStatus": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ICheckoutStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "checkout-status",
+                "reflect": false
+            },
+            "paymentMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ICheckoutPaymentMode",
+                    "resolved": "ICheckoutPaymentMode.bank_account | ICheckoutPaymentMode.bnpl | ICheckoutPaymentMode.card | ICheckoutPaymentMode.card_present | ICheckoutPaymentMode.ecom | ICheckoutPaymentMode.unknown",
+                    "references": {
+                        "ICheckoutPaymentMode": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ICheckoutPaymentMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "payment-mode",
+                "reflect": false
+            }
+        };
+    }
 }

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

@@ -1,8 +1,14 @@
 import { createStore } from "@stencil/store";
-const initialState = {};
-const checkoutsListQueryParams = createStore(() => initialState);
-const { state: queryParams, on: onQueryParamsChange } = checkoutsListQueryParams;
+const filterParamsInitialState = {};
+const propsParamsInitialState = {};
+const filterParamsStore = createStore(() => filterParamsInitialState);
+const { state: filterParams, on: onQueryParamsChange } = filterParamsStore;
+const propsParamsStore = createStore(() => propsParamsInitialState);
+const { state: propsParams } = propsParamsStore;
+const getRequestParams = () => {
+    return Object.assign(Object.assign({}, filterParams), propsParams);
+};
 const clearParams = () => {
-    checkoutsListQueryParams.reset();
+    filterParamsStore.reset();
 };
-export { checkoutsListQueryParams, queryParams, onQueryParamsChange, clearParams };
+export { filterParams, propsParams, onQueryParamsChange, clearParams, getRequestParams };