@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

package/dist/esm/justifi-new-payment-method_5.entry.js

@@ -1,312 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-57431c24.js';
-import { c as config } from './config-27764a9d.js';
-import { a as PaymentMethodTypes } from './Payment-2a868d0c.js';
-import { h as snakeToCamel, b as formatCurrency } from './utils-1df1e55a.js';
-
-const PaymentMethodTypeLabels = {
-    bankAccount: 'New bank account',
-    card: 'New credit or debit card',
-};
-const NewPaymentMethod = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
-        this.onPaymentMethodOptionClick = () => {
-            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
-        };
-        this.iframeOrigin = config.iframeOrigin;
-        this.authToken = undefined;
-        this.accountId = undefined;
-        this.paymentMethodOption = undefined;
-        this.paymentMethodGroupId = undefined;
-        this.isSelected = undefined;
-        this.saveNewPaymentMethodChecked = false;
-    }
-    handleCheckboxChanged(event) {
-        this.saveNewPaymentMethodChecked = event.detail;
-    }
-    async fillBillingForm(fields) {
-        this.billingFormRef.fill(fields);
-    }
-    async resolvePaymentMethod(insuranceValidation) {
-        var _a, _b;
-        if (!this.paymentMethodFormRef || !this.billingFormRef)
-            return;
-        const isValid = await this.validate();
-        if (!isValid || !insuranceValidation.isValid) {
-            return { validationError: true };
-        }
-        const tokenizeResponse = await this.tokenize();
-        if (tokenizeResponse.error) {
-            return { error: tokenizeResponse.error };
-        }
-        else {
-            const tokenizeRessponseData = tokenizeResponse.data;
-            return { token: ((_a = tokenizeRessponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeRessponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token) };
-        }
-    }
-    async validate() {
-        const billingFormValidation = await this.billingFormRef.validate();
-        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
-        return billingFormValidation.isValid && paymentMethodFormValidation.isValid;
-    }
-    async tokenize() {
-        try {
-            const billingFormFieldValues = await this.billingFormRef.getValues();
-            let paymentMethodData;
-            if (this.saveNewPaymentMethodChecked) {
-                paymentMethodData = Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupId });
-            }
-            else {
-                paymentMethodData = Object.assign({}, billingFormFieldValues);
-            }
-            const clientId = this.authToken;
-            const tokenizeResponse = await this.paymentMethodFormRef.tokenize(clientId, paymentMethodData, this.accountId);
-            return tokenizeResponse;
-        }
-        catch (error) {
-            return error;
-        }
-    }
-    showNewPaymentMethodForm() {
-        var _a;
-        return (h("div", { class: "mt-2 pb-4 border-bottom" }, h("div", { class: "mb-3" }, h("justifi-payment-method-form", { ref: (el) => (this.paymentMethodFormRef = el), "payment-method-form-type": (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, "iframe-origin": this.iframeOrigin })), h("h3", { class: "fs-6 fw-bold lh-lg mb-4" }, "Billing address"), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
-    }
-    render() {
-        var _a, _b, _c, _d;
-        return (h("div", { key: 'a3ab3946d37bc52aff2a08a99b5f9e0a1dce9902', class: "payment-method" }, h("div", { key: '8bd1d2c2f4272e383ab93fff3829013307316369', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '5fb9efbdcee3ca7f53e1592862188db5a4ae59a3', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: 'cf174ee431e67f9e4483ff15d1a7841fc61bbc95', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
-    }
-};
-
-class PaymentMethodOption {
-    constructor(paymentMethod) {
-        this.id = paymentMethod.id;
-        this.brand = paymentMethod.brand;
-        this.acct_last_four = paymentMethod.acct_last_four;
-        this.type = snakeToCamel(paymentMethod.type);
-    }
-}
-var CardBrandLabels;
-(function (CardBrandLabels) {
-    CardBrandLabels["american_express"] = "American Express";
-    CardBrandLabels["diners_club"] = "Diners Club";
-    CardBrandLabels["discover"] = "Discover";
-    CardBrandLabels["jcb"] = "JCB";
-    CardBrandLabels["mastercard"] = "Mastercard";
-    CardBrandLabels["china_unionpay"] = "UnionPay";
-    CardBrandLabels["visa"] = "Visa";
-    CardBrandLabels["unknown"] = "Unknown";
-})(CardBrandLabels || (CardBrandLabels = {}));
-
-const paymentMethodOptionsCss = ":host{display:block}.payment-method-header{cursor:pointer;color:var(--jfi-radio-button-group-color);background-color:var(--jfi-radio-button-group-background-color);border-bottom:var(--jfi-radio-button-group-divider)}.payment-method-header:hover{color:var(--jfi-radio-button-group-color-hover);background-color:var(--jfi-radio-button-group-background-color-hover)}";
-const JustifiPaymentMethodOptionsStyle0 = paymentMethodOptionsCss;
-
-const formCheckInputCss = ".form-check-input,label{cursor:pointer}.form-check-input{background-color:var(--jfi-radio-button-background-color);border-color:var(--jfi-radio-button-border-color)}.form-check-input:checked,.form-check-input:checked:focus{background-color:var(--jfi-radio-button-background-color-selected);border-color:var(--jfi-radio-button-border-color-selected)}.form-check-input:focus{border-color:var(--jfi-radio-button-border-color-focus);box-shadow:var(--jfi-radio-button-box-shadow-focus)}";
-const JustifiPaymentMethodOptionsStyle1 = formCheckInputCss;
-
-const PaymentMethodOptions = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.toggleCreatingNewPaymentMethod = createEvent(this, "toggleCreatingNewPaymentMethod", 7);
-        this.showCard = undefined;
-        this.showAch = undefined;
-        this.showBnpl = undefined;
-        this.showSavedPaymentMethods = undefined;
-        this.paymentMethodGroupId = undefined;
-        this.bnpl = undefined;
-        this.insuranceToggled = undefined;
-        this.authToken = undefined;
-        this.accountId = undefined;
-        this.iframeOrigin = config.iframeOrigin;
-        this.savedPaymentMethods = [];
-        this.paymentAmount = undefined;
-        this.selectedPaymentMethodId = undefined;
-        this.paymentMethodOptions = [];
-    }
-    async fillBillingForm(fields) {
-        const newPaymentMethodElement = this.selectedPaymentMethodOptionRef;
-        if (newPaymentMethodElement.fillBillingForm) {
-            newPaymentMethodElement.fillBillingForm(fields);
-        }
-    }
-    connectedCallback() {
-        this.paymentMethodsChanged();
-    }
-    paymentMethodsChanged() {
-        var _a, _b;
-        this.paymentMethodOptions = this.savedPaymentMethods
-            .map((paymentMethod) => new PaymentMethodOption(paymentMethod))
-            .filter((paymentMethod) => {
-            // Don't saved card or bank account if they are disabled
-            return ((this.showCard || paymentMethod.type !== PaymentMethodTypes.card) &&
-                (this.showAch || paymentMethod.type !== PaymentMethodTypes.bankAccount));
-        });
-        if (this.showBnpl && ((_a = this.bnpl) === null || _a === void 0 ? void 0 : _a.provider) === 'sezzle' && !this.insuranceToggled) {
-            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.sezzle }));
-        }
-        if (this.showCard) {
-            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.card }));
-        }
-        if (this.showAch) {
-            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.bankAccount }));
-        }
-        if (!this.selectedPaymentMethodId) {
-            this.selectedPaymentMethodId = (_b = this.paymentMethodOptions[0]) === null || _b === void 0 ? void 0 : _b.id;
-        }
-    }
-    paymentMethodOptionSelected(event) {
-        this.selectedPaymentMethodId = event.detail.id;
-    }
-    async resolvePaymentMethod(insuranceValidation) {
-        var _a;
-        return await ((_a = this.selectedPaymentMethodOptionRef) === null || _a === void 0 ? void 0 : _a.resolvePaymentMethod(insuranceValidation));
-    }
-    render() {
-        var _a;
-        return (h(Host, { key: '56916dc3ddab28b5518c917d980bc757169a814b' }, (_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, paymentMethodGroupId: this.paymentMethodGroupId, ref: (el) => {
-                        if (isSelected) {
-                            this.selectedPaymentMethodOptionRef = el;
-                        }
-                    } }));
-            }
-            else if (sezzle) {
-                return (h("justifi-sezzle-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, paymentAmount: this.paymentAmount, bnpl: this.bnpl, ref: (el) => {
-                        if (isSelected) {
-                            this.selectedPaymentMethodOptionRef = el;
-                        }
-                    } }));
-            }
-            else if (this.showSavedPaymentMethods) {
-                return (h("justifi-saved-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, ref: (el) => {
-                        if (isSelected) {
-                            this.selectedPaymentMethodOptionRef = el;
-                        }
-                    } }));
-            }
-        })));
-    }
-    static get watchers() { return {
-        "savedPaymentMethods": ["paymentMethodsChanged"]
-    }; }
-};
-PaymentMethodOptions.style = JustifiPaymentMethodOptionsStyle0 + JustifiPaymentMethodOptionsStyle1;
-
-const SaveNewPaymentMethod = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.checkboxChanged = createEvent(this, "checkboxChanged", 7);
-        this.isChecked = false;
-    }
-    handleCheckboxChange(event) {
-        const target = event.target;
-        this.isChecked = target.checked;
-        this.checkboxChanged.emit(this.isChecked);
-    }
-    render() {
-        return (h("div", { key: 'dc65b5d53172a7d3b26f7a09ea98b865fcc4689a', class: "mt-4 form-check" }, h("input", { key: 'e4af44c05c9f45ffe6d2eb88199983725d421d7b', type: "checkbox", checked: this.isChecked, onChange: (event) => this.handleCheckboxChange(event), class: "form-check-input" }), h("label", { key: 'ad6aa82a60e4d2c6f73cda78a819e9f1590a598b', class: "form-check-label" }, "Save new payment method")));
-    }
-};
-
-const SavedPaymentMethod = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
-        this.onPaymentMethodOptionClick = () => {
-            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
-        };
-        this.iframeOrigin = config.iframeOrigin;
-        this.paymentMethodOption = undefined;
-        this.isSelected = undefined;
-    }
-    async resolvePaymentMethod(insuranceValidation) {
-        var _a;
-        if (!insuranceValidation.isValid) {
-            return { validationError: true };
-        }
-        return { token: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id };
-    }
-    ;
-    render() {
-        var _a, _b, _c, _d, _e;
-        return (h(Fragment, { key: '9bcd2cd5776229c7eff6658e3dc1f98429d0812d' }, h("div", { key: '00edbed020974c57713d9864b83a811189fbfea1', class: "payment-method" }, h("div", { key: 'a4af4151ddb4d300ec6b543942710439032ee27b', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'd210d4826658e7ebd26bcb5da2f5e2cd1f495f9b', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: 'ef66a85ab7e8526f826ef4f57e262c4bd31dafaa', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
-            _e.acct_last_four)))));
-    }
-};
-
-const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg", alt: "Sezzle", style: {
-        display: 'inline',
-        width: '80px',
-        marginLeft: '5px',
-        marginTop: '-5px',
-    } }));
-const SezzlePaymentMethod = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
-        this.onPaymentMethodOptionClick = () => {
-            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
-        };
-        this.initializeSezzleCheckout = () => {
-            let resolveSezzlePromise;
-            this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
-            const bnpl = this.bnpl;
-            const amount = +this.paymentAmount; // convert to number
-            const Checkout = window.Checkout;
-            const checkout = new Checkout({
-                mode: 'popup',
-                publicKey: bnpl.provider_client_id,
-                apiMode: bnpl.provider_mode,
-                apiVersion: bnpl.provider_api_version,
-            });
-            checkout.sezzleButtonElement = this.sezzleButtonRef;
-            checkout.init({
-                onClick: function (event) {
-                    event.preventDefault();
-                    checkout.startCheckout({
-                        checkout_url: bnpl.provider_checkout_url
-                    });
-                },
-                onComplete: (event) => resolveSezzlePromise({ bnpl: event.data }),
-                onCancel: (event) => resolveSezzlePromise({ bnpl: event.data }),
-                onFailure: (event) => resolveSezzlePromise({ bnpl: event.data }),
-            });
-            this.sezzleCheckout = checkout;
-            this.installmentPlan = this.sezzleCheckout.getInstallmentPlan(amount);
-        };
-        this.iframeOrigin = config.iframeOrigin;
-        this.bnpl = undefined;
-        this.clientId = undefined;
-        this.accountId = undefined;
-        this.paymentMethodOption = undefined;
-        this.isSelected = undefined;
-        this.paymentAmount = undefined;
-        this.installmentPlan = undefined;
-        this.sezzleCheckout = undefined;
-        this.sezzlePromise = undefined;
-    }
-    componentDidRender() {
-        this.scriptRef.onload = () => {
-            this.sezzleButtonRef = document.createElement('button');
-            this.initializeSezzleCheckout();
-        };
-    }
-    async resolvePaymentMethod(insuranceValidation) {
-        if (!insuranceValidation.isValid) {
-            return { validationError: true };
-        }
-        this.sezzleButtonRef.click();
-        return this.sezzlePromise;
-    }
-    render() {
-        var _a, _b, _c, _d, _e;
-        return (h("div", { key: '5c1e9653930fe5e2c2c72145a59ff29ec8aaae58', class: "payment-method" }, h("script", { key: '5b500fb5c44bf750486d26eeb492fa76c70ecb1c', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '2fd81eb7f13f3aeeaffbefaac4d8797465265f92', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '7dec7485102a17b93cd7d3b55dc25e549d67e477', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: 'f2b85b11fb6ca254e3ff541a33b0aab2fc8373d8', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: '4f2c0df30f6b41d80f747e0475e79a26bd34a981' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: '84b235727da8bbc38a4d793feb18fca6432f6d6c' }, h("span", { key: '399213d7597c342d065d50296f0991d03f11e964' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: 'c27dba665086c540e566c192a6b451721e4169f3' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: '1c8b4b9342b3f48365ff313becbf8aaab402a191', class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
-    }
-};
-
-export { NewPaymentMethod as justifi_new_payment_method, PaymentMethodOptions as justifi_payment_method_options, SaveNewPaymentMethod as justifi_save_new_payment_method, SavedPaymentMethod as justifi_saved_payment_method, SezzlePaymentMethod as justifi_sezzle_payment_method };

package/dist/esm/justifi-payment-form.entry.js

@@ -1,137 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
-import './Checkout-0b4086f8.js';
-import './Pagination-afc8f96d.js';
-import { a as PaymentMethodTypes } from './Payment-2a868d0c.js';
-import './SubAccount-99a00594.js';
-import { l as loadFontsOnParent } from './utils-1df1e55a.js';
-import { c as config } from './config-27764a9d.js';
-import { a as ComponentErrorCodes, C as ComponentErrorSeverity } from './ComponentError-3ce7f437.js';
-import { g as getErrorMessage } from './utils-b10dae27.js';
-import { J as JustifiAnalytics } from './Analytics-77dc80f3.js';
-import { B as Button } from './button-34e75e0f.js';
-import { S as StyledHost } from './styled-host-e0ddb759.js';
-import { c as checkPkgVersion } from './check-pkg-version-fbf01ce7.js';
-import './package-627f73c1.js';
-import './Api-391d00e2.js';
-
-const paymentFormCss = ":host{display:block}justifi-payment-method-form{display:block;margin-left:calc(var(--jfi-layout-padding) * -1);margin-right:calc(var(--jfi-layout-padding) * -1)}*::part(label){color:var(--jfi-form-label-color);font-family:var(--jfi-form-label-font-family);font-weight:var(--jfi-form-label-font-weight);font-size:var(--jfi-form-label-font-size);margin:var(--jfi-form-label-margin)}*::part(input){font-family:var(--jfi-layout-font-family);background-color:var(--jfi-form-control-background-color);border-color:var(--jfi-form-control-border-color);border-width:var(--jfi-form-control-border-width);border-bottom-width:var(--jfi-form-control-border-bottom-width);border-left-width:var(--jfi-form-control-border-left-width);border-right-width:var(--jfi-form-control-border-right-width);border-top-width:var(--jfi-form-control-border-top-width);border-radius:var(--jfi-form-control-border-radius);border-style:var(--jfi-form-control-border-style);box-shadow:var(--jfi-form-control-box-shadow);color:var(--jfi-form-control-color);font-size:var(--jfi-form-control-font-size);font-weight:var(--jfi-form-control-font-weight);line-height:var(--jfi-form-control-line-height);margin:var(--jfi-form-control-margin);padding:var(--jfi-form-control-padding)}*::part(input):focus{color:var(--jfi-form-control-color-focus);border-color:var(--jfi-form-control-border-color-focus);box-shadow:var(--jfi-form-control-box-shadow-focus)}*::part(input-invalid){border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error)}*::part(input-invalid):focus{border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error-focus)}.jfi-submit-button{font-family:var(--jfi-layout-font-family);color:var(--jfi-submit-button-color);background-color:var(--jfi-submit-button-background-color);border-color:var(--jfi-submit-button-border-color);padding:var(--jfi-submit-button-padding);font-size:var(--jfi-submit-button-font-size);border-radius:var(--jfi-submit-button-border-radius);width:var(--jfi-submit-button-width);box-shadow:var(--jfi-submit-button-box-shadow)}.jfi-submit-button:hover{color:var(--jfi-submit-button-color-hover);background-color:var(--jfi-submit-button-background-color-hover);border-color:var(--jfi-submit-button-border-color-hover)}.jfi-submit-button:focus{color:var(--jfi-submit-button-color-focus);background-color:var(--jfi-submit-button-background-color-focus);border-color:var(--jfi-submit-button-border-color-focus)}.btn.jfi-submit-button:active{color:var(--jfi-submit-button-color-active);background-color:var(--jfi-submit-button-background-color-active);border-color:var(--jfi-submit-button-border-color-active)}.btn.jfi-submit-button-loading{min-width:75px;color:var(--jfi-submit-button-color-loading);background-color:var(--jfi-submit-button-background-color-loading);border-color:var(--jfi-submit-button-border-color-loading)}.btn.jfi-submit-button-loading .spinner-border{border-top-color:var(--jfi-submit-button-color-loading);border-bottom-color:var(--jfi-submit-button-color-loading);border-left-color:var(--jfi-submit-button-color-loading)}";
-const JustifiPaymentFormStyle0 = paymentFormCss;
-
-const PaymentForm = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.submitted = createEvent(this, "submitted", 7);
-        this.errorEvent = createEvent(this, "error-event", 7);
-        this.bankAccount = undefined;
-        this.card = undefined;
-        this.email = undefined;
-        this.clientId = undefined;
-        this.authToken = undefined;
-        this.accountId = undefined;
-        this.submitButtonText = undefined;
-        this.submitButtonEnabled = true;
-        this.isLoading = false;
-        this.selectedPaymentMethodType = PaymentMethodTypes.card;
-    }
-    componentWillLoad() {
-        checkPkgVersion();
-        this.analytics = new JustifiAnalytics(this);
-        if (!this.validateProps()) {
-            this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.MISSING_PROPS,
-                message: 'clientId or authToken is required',
-                severity: ComponentErrorSeverity.ERROR
-            });
-            this.submitButtonEnabled = false;
-        }
-    }
-    connectedCallback() {
-        loadFontsOnParent();
-    }
-    disconnectedCallback() {
-        this.analytics.cleanup();
-    }
-    async fillBillingForm(fields) {
-        this.billingFormRef.fill(fields);
-    }
-    async enableSubmitButton() {
-        this.submitButtonEnabled = true;
-    }
-    async disableSubmitButton() {
-        this.submitButtonEnabled = false;
-    }
-    showPaymentMethodTypeSelector() {
-        return this.card && this.bankAccount;
-    }
-    getSelectedPaymentMethodType() {
-        if (this.showPaymentMethodTypeSelector()) {
-            return this.selectedPaymentMethodType;
-        }
-        else if (this.card) {
-            return PaymentMethodTypes.card;
-        }
-        else if (this.bankAccount) {
-            return PaymentMethodTypes.bankAccount;
-        }
-        else {
-            return PaymentMethodTypes.card;
-        }
-    }
-    paymentMethodSelectedHandler(event) {
-        const paymentMethodType = event.detail;
-        this.selectedPaymentMethodType = paymentMethodType;
-    }
-    validateProps() {
-        return !!(this.clientId || this.authToken);
-    }
-    getToken() {
-        return this.authToken || this.clientId;
-    }
-    async submit(event) {
-        event.preventDefault();
-        if (!this.paymentMethodFormRef || !this.billingFormRef)
-            return;
-        const billingFormValidation = await this.billingFormRef.validate();
-        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
-        if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
-            return;
-        this.isLoading = true;
-        try {
-            const billingFormFieldValues = await this.billingFormRef.getValues();
-            const paymentMethodData = Object.assign({ email: this.email }, billingFormFieldValues);
-            const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.getToken(), paymentMethodData, this.accountId);
-            if (tokenizeResponse.error) {
-                this.errorEvent.emit({
-                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                    message: tokenizeResponse.error.message,
-                    severity: ComponentErrorSeverity.ERROR
-                });
-            }
-            this.submitted.emit(tokenizeResponse);
-        }
-        catch (error) {
-            this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.UNKNOWN_ERROR,
-                message: getErrorMessage(error),
-                severity: ComponentErrorSeverity.ERROR
-            });
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    render() {
-        return (h(StyledHost, { key: 'a2391aac29babb363f477ec8254491e5790ee34e' }, h("form", { key: 'd41b1f80b10c9be6def16ba694a8a94a14b09d13', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '26c13e2fa0f1df35c8477b14fbd5a91e65b3d2fa', class: "col-12" }, h("justifi-payment-method-selector", { key: '8c8a4989c3bef7f1b701ab06494e65d1d5f18fff', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: '49917b87314717b1cb0cd9be42ae1f88a05bebad', class: "col-12" }, h("justifi-payment-method-form", { key: '786aa47bacfeea8dc2ae0e878633ad33e771892d', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
-                if (el) {
-                    this.paymentMethodFormRef = el;
-                }
-            } })), h("div", { key: '7bd1068b1eb84e58ad0b13702b4d5e6d1bb548a4', class: "col-12" }, h("justifi-billing-form", { key: '63e53f0e0073f84b3d665d6cc7f7381f0d74e653', legend: "Billing Info", ref: el => {
-                if (el) {
-                    this.billingFormRef = el;
-                }
-            } })), h("slot", { key: 'bd274a3501c6ad6225bb928a9e0c3354a075ee5b', name: 'insurance' }), h("div", { key: '5c777cc15acc4e74690e7060130c35398227f60d', class: "col-12" }, h(Button, { key: '6c5b367e177f64d6034eac6fc21468ab34ab9e5e', variant: "primary", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, isLoading: this.isLoading, "data-testid": "submit-button", style: { width: '100%' } }, this.submitButtonText || 'Submit')))));
-    }
-};
-PaymentForm.style = JustifiPaymentFormStyle0;
-
-export { PaymentForm as justifi_payment_form };

package/dist/esm/justifi-payment-method-selector.entry.js

@@ -1,30 +0,0 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-57431c24.js';
-import './Checkout-0b4086f8.js';
-import './Pagination-afc8f96d.js';
-import { a as PaymentMethodTypes } from './Payment-2a868d0c.js';
-import './SubAccount-99a00594.js';
-
-const paymentMethodSelectorCss = ":host{display:block}.jfi-btn-radio+.jfi-btn-radio-label{color:var(--jfi-radio-button-color);background-color:var(--jfi-radio-button-background-color);border-color:var(--jfi-radio-button-border-color);padding:var(--jfi-radio-button-padding);font-size:var(--jfi-radio-button-font-size)}.jfi-btn-radio:focus+.jfi-btn-radio-label{box-shadow:var(--jfi-box-shadow-focus)}.jfi-btn-radio+.jfi-btn-radio-label:hover{color:var(--jfi-radio-button-color-hover);border-color:var(--jfi-radio-button-border-color-hover);background-color:var(--jfi-radio-button-background-color-hover)}.jfi-btn-radio:checked+.jfi-btn-radio-label:hover{color:var(--jfi-radio-button-color-selected-hover);border-color:var(--jfi-radio-button-border-color-selected-hover);background-color:var(--jfi-radio-button-background-color-selected-hover)}.jfi-btn-radio:checked+.jfi-btn-radio-label{color:var(--jfi-radio-button-color-selected);background-color:var(--jfi-radio-button-background-color-selected);border-color:var(--jfi-radio-button-border-color-selected)}.jfi-btn-radio-group{font-family:var(--jfi-layout-font-family);display:inline-flex;width:var(--jfi-radio-button-group-width)}";
-const JustifiPaymentMethodSelectorStyle0 = paymentMethodSelectorCss;
-
-const PaymentMethodLabels = {
-    bankAccount: 'Bank Account',
-    card: 'Card',
-};
-const PaymentMethodSelector = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.paymentMethodSelected = createEvent(this, "paymentMethodSelected", 7);
-        this.paymentMethodTypes = [PaymentMethodTypes.card, PaymentMethodTypes.bankAccount];
-        this.selectedPaymentMethodType = undefined;
-    }
-    onChangeHandler(event) {
-        this.paymentMethodSelected.emit(event.target.value);
-    }
-    render() {
-        return (h("div", { key: '66ac630ad3bd8379c28743402fd1df3e4386dac5', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
-    }
-};
-PaymentMethodSelector.style = JustifiPaymentMethodSelectorStyle0;
-
-export { PaymentMethodSelector as justifi_payment_method_selector };

package/dist/esm/pagination-menu_2.entry.js

@@ -1,49 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-57431c24.js';
-import { E as ExtendedPagingDefaults } from './Pagination-afc8f96d.js';
-import { B as Button } from './button-34e75e0f.js';
-import { h as hasFilters } from './utils-4006c425.js';
-
-const PaginationMenu = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.paging = ExtendedPagingDefaults;
-        this.params = {};
-    }
-    render() {
-        return (h(Host, { key: '645df5028861aa714a814f908ccace8dcd0986f8', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: '6cb86ce01c625db9c31204f63258570f8a5d0a0f', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '7ffb5771a1c51553d64735721b937e53c699949d', class: "pagination m-0" }, h("li", { key: 'b439c2f7fe81ccdfa29670a6fc04715681ed5ab3', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: 'dc59152e834a3076f09304f6fcd0195058ebefec', href: "#", class: "page-link", onClick: (e) => {
-                e.preventDefault();
-                this.paging.handleClickPrevious(this.paging.start_cursor);
-            }, part: `page-button${this.paging.has_previous ? '' : ' page-button-disabled'}` }, h("span", { key: 'fc640fb9ae2ca672bfed89d23c5641cb346c673d', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: 'fb6fcd31ebd4d194b37f53a071537133b8c4d369', part: "page-button-text" }, "Previous"))), h("li", { key: 'b10e12ec7bc4a89cd897e868ec7b303c62599cd3', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '51f91eb7cfef91dcbcfd9f11522213308bf717b5', href: "#", class: "page-link", onClick: (e) => {
-                e.preventDefault();
-                this.paging.handleClickNext(this.paging.end_cursor);
-            }, part: `page-button${this.paging.has_next ? '' : ' page-button-disabled'}` }, h("span", { key: 'd89f50a44dead676d19b8862a92ba636947fe6b1', part: "page-button-text" }, "Next"), h("span", { key: 'f5dd2ddddef86931d935df56101f1fed8118e4f6', class: "ms-1", part: "page-arrow" }, "\u00BB")))))));
-    }
-};
-
-const TableFiltersMenu = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.anchorButton = undefined;
-        this.menu = undefined;
-        this.showClearButton = false;
-        this.params = undefined;
-        this.clearParams = undefined;
-    }
-    watchParamsHandler(newValue) {
-        this.showClearButton = hasFilters(newValue);
-    }
-    show() {
-        this.menu.classList.add('show');
-    }
-    hide() {
-        this.menu.classList.remove('show');
-    }
-    render() {
-        return (h("div", { key: 'de116fd5406fcc4feb36df24f8fc3162b39567e8', class: "d-flex gap-2" }, h("div", { key: '07c7d885acc4816d28e3c2653d5e4c9a7ea42108', class: "dropdown pb-3" }, h(Button, { key: '34cee2bf49991340c4291c5014d17bfa9c3593d8', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '19640a1ab19bdda14398c4a76392584c6bf1e6d9', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'a72ce2a8ab9fc317236128980bd4bc9be92faf2c', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '008b23e2dc775ec59247df27379780d1ccdd81eb' })))), h("div", { key: '5b60c0821e4cfe5395c6eca11957e18446039cd7' }, h(Button, { key: '56d032309bdff48f6501ae6be6344860d008f481', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
-    }
-    static get watchers() { return {
-        "params": ["watchParamsHandler"]
-    }; }
-};
-
-export { PaginationMenu as pagination_menu, TableFiltersMenu as table_filters_menu };

package/dist/esm/payments-list-filters.entry.js

@@ -1,36 +0,0 @@
-import { r as registerInstance, h } from './index-57431c24.js';
-import { l as lodash } from './lodash-faeb5a52.js';
-import { g as convertToUTC, c as convertToLocal } from './utils-1df1e55a.js';
-
-const PaymentsListFilters = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.handleDateInput = (name, value) => {
-            const utcDate = convertToUTC(value, { setExactTime: true });
-            this.setParamsOnChange(name, utcDate);
-        };
-        this.params = {};
-        this.setParamsOnChange = undefined;
-        this.clearParams = undefined;
-    }
-    componentWillLoad() {
-        // debounced input handler for text input
-        this.debouncedSetParamsOnChange = lodash.exports.debounce(this.setParamsOnChange, 300);
-    }
-    get paymentStatusOptions() {
-        return [
-            { label: 'All', value: '' },
-            { label: 'Pending', value: 'pending' },
-            { label: 'Authorized', value: 'authorized' },
-            { label: 'Succeeded', value: 'succeeded' },
-            { label: 'Failed', value: 'failed' },
-            { label: 'Disputed', value: 'disputed' },
-            { label: 'Refunded', value: 'refunded' }
-        ];
-    }
-    render() {
-        return (h("table-filters-menu", { key: '64b3b8cc77a08a6aa58c89b99248380bf8d9ad0f', params: this.params, clearParams: this.clearParams }, h("div", { key: 'ce5c017776a3b066d688ee25b9c7ef567df66695', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '8cf5d22905c448b3ddb4496483e6b6788b0d19db', class: "p-2" }, h("form-control-text", { key: '7156ecff36896b91d5cd600488a0739ff8ed4d96', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.payment_id })), h("div", { key: 'e04ca45af970a4d0e4725b8e7a0ba63ef7a5f5e9', class: "p-2" }, h("form-control-text", { key: '006191433fd479f95539dcdb2f2d6de3ac6d9828', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: 'fb5b1dfe7964ed7b95b349285e6df6bd0d83746b', class: "p-2" }, h("form-control-select", { key: '9832248a99214d5121f6420879fe596dbe3bd3e9', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_status || '' })), h("div", { key: '138911f0f97f91910cda968208da26b3c9fd8303', class: "p-2" }, h("form-control-date", { key: 'd6a7a2ef2df3740af32edd6f454bbda154d5c3ef', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.params.created_after, { showInputDateTime: true }) || '', showTime: true })), h("div", { key: 'b4a808a46fd88c21e5e6f01381c1aaedc5ec9e39', class: "p-2" }, h("form-control-date", { key: 'a23eab0b41cb51786eaaecec6c91898ab70121ea', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.params.created_before, { showInputDateTime: true }) || '', showTime: true })))));
-    }
-};
-
-export { PaymentsListFilters as payments_list_filters };

package/dist/esm/payments-table-bba91324.js

@@ -1,27 +0,0 @@
-import { h } from './index-57431c24.js';
-import { M as MapPaymentStatusToBadge } from './payments-status-a7c18f2a.js';
-import { c as convertToLocal, b as formatCurrency } from './utils-1df1e55a.js';
-
-const defaultColumnsKeys = 'created_at,amount,status,payment_type,description,payers_name,last_four_digits';
-const paymentTableColumns = {
-    created_at: () => (h("th", { part: "table-head-cell", scope: "col", title: "The date and time each payment was made" }, "Date")),
-    amount: () => (h("th", { part: "table-head-cell", scope: "col", title: "The dollar amount of each payment" }, "Amount")),
-    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each payment" }, "Status")),
-    payment_type: () => (h("th", { part: "table-head-cell", scope: "col", title: "The type of each payment" }, "Type")),
-    description: () => (h("th", { part: "table-head-cell", scope: "col", title: "The payment description, if you provided one" }, "Description")),
-    payers_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The name associated with the payment method" }, "Account Holder")),
-    last_four_digits: () => (h("th", { part: "table-head-cell", scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
-};
-const paymentTableCells = {
-    created_at: (value) => (h("td", { part: "table-cell" },
-        h("div", { class: "fw-bold" }, convertToLocal(value, { showDisplayDate: true })),
-        h("div", { class: "fw-bold" }, convertToLocal(value, { showTime: true })))),
-    amount: (value) => (h("td", { part: "table-cell" }, formatCurrency(value, true, true))),
-    status: (value) => (h("td", { part: "table-cell", innerHTML: MapPaymentStatusToBadge(value) })),
-    payment_type: (value) => (h("td", { part: "table-cell" }, value)),
-    description: (value) => (h("td", { part: "table-cell" }, value)),
-    payers_name: (value) => (h("td", { part: "table-cell" }, value)),
-    last_four_digits: (value) => (h("td", { part: "table-cell" }, value))
-};
-
-export { paymentTableCells as a, defaultColumnsKeys as d, paymentTableColumns as p };

package/dist/esm/payouts-list-filters.entry.js

@@ -1,20 +0,0 @@
-import { r as registerInstance, h } from './index-57431c24.js';
-import { g as convertToUTC, c as convertToLocal } from './utils-1df1e55a.js';
-
-const PayoutsListFilters = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.handleDateInput = (name, value) => {
-            const utcDate = convertToUTC(value, { setEndOfDay: true });
-            this.setParamsOnChange(name, utcDate);
-        };
-        this.params = undefined;
-        this.setParamsOnChange = undefined;
-        this.clearParams = undefined;
-    }
-    render() {
-        return (h("table-filters-menu", { key: '2f80b6ac3308af53f20f1c8c8fbc596937eeda1d', params: this.params, clearParams: this.clearParams }, h("div", { key: '6e0bf319268d1bcbbd81e922f0855eb1c497815f', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '8c29a63ea0c4836a0b002db9adc75ea69cdde988', class: "p-2" }, h("form-control-date", { key: '74399fdd150d71758f817454944ef34c9b443240', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.params.created_after, { showInputDate: true }) })), h("div", { key: 'e98911d5b92ed5a6642d8f59b23abbebf4f1f85b', class: "p-2" }, h("form-control-date", { key: '4f233e95aeae496357938c69f25336123fbf1f0f', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.params.created_before, { showInputDate: true }) })))));
-    }
-};
-
-export { PayoutsListFilters as payouts_list_filters };