@justifi/webcomponents 4.19.1-rc → 4.19.1-rc-3

package/dist/webcomponents/p-85fc69e5.js

@@ -1 +1,90 @@
-import{c as e,a as t}from"./p-2eab3c90.js";import{l,a,c as s,s as d,p as n,i as r,b as i,e as o,d as c,f as m,g as p}from"./p-89887332.js";const u=r=>{const i=e({line1:l.required("Enter street address"),line2:a.nullable(),city:s.required("Enter city"),state:d.required("Select state"),postal_code:n.required("Enter postal code"),country:t().required("Select country")}),o=e({line1:l.nullable(),line2:a.nullable(),city:s.nullable(),state:d.nullable(),postal_code:n.nullable(),country:t().required("Select country")});return r?o:i},b=(l,a)=>{const s=e({name:r.required(`Enter ${l} name`),title:i.required(`Enter ${l} title`),email:o.required(`Enter ${l} email`),phone:c.required("Enter phone number"),dob_full:m(l).required("Enter date of birth"),ssn_last4:t().nullable(),identification_number:p,address:u(a)}),d=e({name:r.required(`Enter ${l} name`),title:i.nullable(),email:o.nullable(),phone:c.nullable(),dob_full:m(l).nullable(),ssn_last4:t().nullable(),identification_number:p.nullable(),address:u(a)});return a?d:s},E=(e,t)=>{var l;return f(e),_(e.legal_address),y(e.representative),(null===(l=t.owners)||void 0===l?void 0:l.length)&&delete e.owners,e},f=e=>(delete e.id,delete e.documents,delete e.bank_accounts,delete e.product_categories,delete e.created_at,delete e.updated_at,delete e.associated_accounts,delete e.terms_conditions_accepted,e),_=e=>(delete e.id,delete e.created_at,delete e.updated_at,e),y=e=>(delete e.id,delete e.documents,delete e.created_at,delete e.updated_at,delete e.address.id,delete e.address.created_at,delete e.address.updated_at,delete e.business_id,delete e.dob_full,delete e.ssn_last4,e);export{u as a,f as b,y as c,_ as d,b as i,E as p}
+import { c as create$3, a as create$6 } from './p-2eab3c90.js';
+import { l as lineOneValidation, a as lineTwoValidation, c as cityValidation, s as stateValidation, p as postalValidation, i as identityNameValidation, b as identityTitleValidation, e as emailValidation, d as phoneValidation, f as dobValidation, g as ssnValidation } from './p-89887332.js';
+
+const addressSchema = (allowOptionalFields) => {
+    const schema = create$3({
+        line1: lineOneValidation.required('Enter street address'),
+        line2: lineTwoValidation.nullable(),
+        city: cityValidation.required('Enter city'),
+        state: stateValidation.required('Select state'),
+        postal_code: postalValidation.required('Enter postal code'),
+        country: create$6().required('Select country')
+    });
+    const easySchema = create$3({
+        line1: lineOneValidation.nullable(),
+        line2: lineTwoValidation.nullable(),
+        city: cityValidation.nullable(),
+        state: stateValidation.nullable(),
+        postal_code: postalValidation.nullable(),
+        country: create$6().required('Select country')
+    });
+    return allowOptionalFields ? easySchema : schema;
+};
+
+const identitySchema = (role, allowOptionalFields) => {
+    const schema = create$3({
+        name: identityNameValidation.required(`Enter ${role} name`),
+        title: identityTitleValidation.required(`Enter ${role} title`),
+        email: emailValidation.required(`Enter ${role} email`),
+        phone: phoneValidation.required('Enter phone number'),
+        dob_full: dobValidation(role).required('Enter date of birth'),
+        ssn_last4: create$6().nullable(),
+        identification_number: ssnValidation,
+        address: addressSchema(allowOptionalFields),
+    });
+    const easySchema = create$3({
+        name: identityNameValidation.required(`Enter ${role} name`),
+        title: identityTitleValidation.nullable(),
+        email: emailValidation.nullable(),
+        phone: phoneValidation.nullable(),
+        dob_full: dobValidation(role).nullable(),
+        ssn_last4: create$6().nullable(),
+        identification_number: ssnValidation.nullable(),
+        address: addressSchema(allowOptionalFields),
+    });
+    return allowOptionalFields ? easySchema : schema;
+};
+
+// These props should not be sent to the server
+// This function is for the larger business form. 
+const parseBusiness = (values, initialValues) => {
+    var _a;
+    parseCoreInfo(values);
+    parseAddressInfo(values.legal_address);
+    parseIdentityInfo(values.representative);
+    ((_a = initialValues.owners) === null || _a === void 0 ? void 0 : _a.length) && delete values.owners;
+    return values;
+};
+// These functions are for the stepped business form.
+const parseCoreInfo = (values) => {
+    delete values.id;
+    delete values.documents;
+    delete values.bank_accounts;
+    delete values.product_categories;
+    delete values.created_at;
+    delete values.updated_at;
+    delete values.associated_accounts;
+    delete values.terms_conditions_accepted;
+    return values;
+};
+const parseAddressInfo = (values) => {
+    delete values.id;
+    delete values.created_at;
+    delete values.updated_at;
+    return values;
+};
+const parseIdentityInfo = (values) => {
+    delete values.id;
+    delete values.documents;
+    delete values.created_at;
+    delete values.updated_at;
+    delete values.address.id;
+    delete values.address.created_at;
+    delete values.address.updated_at;
+    delete values.business_id;
+    delete values.dob_full;
+    delete values.ssn_last4;
+    return values;
+};
+
+export { addressSchema as a, parseCoreInfo as b, parseIdentityInfo as c, parseAddressInfo as d, identitySchema as i, parseBusiness as p };

package/dist/webcomponents/p-890088fc.entry.js

@@ -0,0 +1,298 @@
+import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './p-fad19d75.js';
+import { a as PaymentMethodTypes } from './p-df21aaad.js';
+import { g as snakeToCamel, f as formatCurrency } from './p-83125497.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 = undefined;
+        this.authToken = undefined;
+        this.accountId = undefined;
+        this.paymentMethodOption = undefined;
+        this.paymentMethodGroupId = undefined;
+        this.isSelected = undefined;
+        this.saveNewPaymentMethodChecked = false;
+    }
+    componentWillLoad() {
+        console.log('NewPaymentMethod: componentWillLoad iframeOrigin', this, this.iframeOrigin);
+    }
+    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: 'd597ba8b0ac2a650a14a79d002a91ef3edf604a4', class: "payment-method" }, h("div", { key: 'a287f7ffd480f17f0f1093d71b9d02fe3db39e0f', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'f53d08d048cc242414fcf6794614ad2334db81bb', 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: '01712a80a30df19a7b540434532cffb4cb3b61e8', 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 = undefined;
+        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: '7ee40a1bdc9ec15596e870b48cbe7b6bbc20537c' }, (_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 SavedPaymentMethod = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
+        this.onPaymentMethodOptionClick = () => {
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+        this.iframeOrigin = undefined;
+        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: '247dafc3fe4011c5f6a2202690310eedfa5422c8' }, h("div", { key: '9cfb0b6ca9c10e5cc6173832bb8211ddb1d0ae5b', class: "payment-method" }, h("div", { key: 'd247cc4cf9f7bf43d7153134c66a921b5bfc49bc', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '180c3aa6c4153bccf7cb620b6df49cc288754cd2', 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: '6ec14d77e8171a1ddb37c686189878a7ebb4b4f4', 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 = undefined;
+        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: '1b4e4a142e1e59465e0db5515ee6b0a0b2aac146', class: "payment-method" }, h("script", { key: 'c835bc94836949e2362974eaeefca1f6a579a1a0', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '051a0392e6353116423f706be48eb266daf12b84', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '6dd0d61f1b8788b45b008f5ac05f8a8b6a6591f2', 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: 'caf3429bae616a016f58e141ac5c4493174cf3ef', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: '0e4ea85fc6fc32a1c35fe0dac86f21ab7f86eb0a' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: '3740565f14b87aa2e4af44b7e2b12d93d6e454c2' }, h("span", { key: 'ca9b6dff0042c41d378b101067d060092234fa7c' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: '14ab21fd2d9bd612f41d5cd3e175402593012619' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: '25e08c1e711af0979e14bbb911aedb58f59bc180', 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, SavedPaymentMethod as justifi_saved_payment_method, SezzlePaymentMethod as justifi_sezzle_payment_method };