@justifi/webcomponents 5.7.6-rc-08 → 5.7.6

package/dist/esm/justifi-saved-payment-methods_2.entry.js

@@ -1,113 +0,0 @@
-import { r as registerInstance, h, c as createEvent } from './index-kpoIU4v_.js';
-import { r as radioListItem } from './parts-D3G5aVLy.js';
-import { S as StyledHost } from './styled-host-B_XBaM7z.js';
-import './event-types-CZfYo5-1.js';
-import { c as checkoutStore } from './checkout.store-QrBBYQfi.js';
-import { C as CardBrandLabels } from './payment-method-option-utils-Cm6lAaP1.js';
-import { f as formatCurrency } from './utils-B7jE0g5_.js';
-import './index-B9me4yN2.js';
-
-const SavedPaymentMethods = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.onPaymentMethodOptionClick = (paymentMethodId) => (e) => {
-            e.preventDefault();
-            checkoutStore.selectedPaymentMethod = paymentMethodId;
-        };
-        this.isAllowedPaymentMethod = (paymentMethod) => {
-            if (paymentMethod.type === 'card' && checkoutStore.disableCreditCard) {
-                return false;
-            }
-            if (paymentMethod.type === 'bank_account' && checkoutStore.disableBankAccount) {
-                return false;
-            }
-            return true;
-        };
-    }
-    componentWillLoad() {
-        if (!checkoutStore.paymentMethods.length) {
-            console.warn('No saved payment methods available.');
-        }
-        if (checkoutStore.disablePaymentMethodGroup) {
-            console.warn('Payment method group is disabled.');
-        }
-    }
-    render() {
-        if (checkoutStore.disablePaymentMethodGroup) {
-            return null;
-        }
-        return (h(StyledHost, null, h("div", { class: "saved-payment-methods" }, checkoutStore.paymentMethods.length ? checkoutStore.paymentMethods
-            .filter(this.isAllowedPaymentMethod)
-            .map((paymentMethod) => (h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) }, h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: checkoutStore.selectedPaymentMethod === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
-    }
-};
-
-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");
-        this.paymentMethodOptionId = 'sezzle';
-        this.onPaymentMethodOptionClick = (e) => {
-            e.preventDefault();
-            checkoutStore.selectedPaymentMethod = this.paymentMethodOptionId;
-            this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
-        };
-        this.initializeSezzleCheckout = () => {
-            let resolveSezzlePromise;
-            this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
-            const amount = Number(checkoutStore.paymentAmount);
-            const Checkout = window.Checkout;
-            const checkout = new Checkout({
-                mode: 'popup',
-                publicKey: checkoutStore.bnplProviderClientId,
-                apiMode: checkoutStore.bnplProviderMode,
-                apiVersion: checkoutStore.bnplProviderApiVersion,
-            });
-            checkout.sezzleButtonElement = this.sezzleButtonRef;
-            checkout.init({
-                onClick: function (event) {
-                    event.preventDefault();
-                    checkout.startCheckout({
-                        checkout_url: checkoutStore.bnplProviderCheckoutUrl,
-                    });
-                },
-                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);
-        };
-    }
-    componentDidRender() {
-        if (!this.scriptRef)
-            return;
-        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;
-        if (!checkoutStore.bnplEnabled || checkoutStore.disableBnpl) {
-            console.warn('justifi-sezzle-payment-method: BNPL is not enabled for this account.');
-            return null;
-        }
-        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { name: "paymentMethodType", value: this.paymentMethodOptionId, checked: checkoutStore.selectedPaymentMethod === this.paymentMethodOptionId, label: h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents))))) }))));
-    }
-};
-
-export { SavedPaymentMethods as justifi_saved_payment_methods, SezzlePaymentMethod as justifi_sezzle_payment_method };

package/dist/esm/justifi-skeleton.entry.js

@@ -1,15 +0,0 @@
-import { r as registerInstance, h } from './index-kpoIU4v_.js';
-import { S as StyledHost } from './styled-host-B_XBaM7z.js';
-import { S as Skeleton } from './skeleton-CZfDofm6.js';
-import './parts-D3G5aVLy.js';
-
-const JustifiSkeleton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(StyledHost, { key: '4c06883ecab0314da95dbfdab5a9ff46be2286b5' }, h(Skeleton, { key: 'ebe43cc3008e04345c3daf16c44d94d78b99fab6', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
-    }
-};
-
-export { JustifiSkeleton as justifi_skeleton };

package/dist/esm/payment-method-option-utils-Cm6lAaP1.js

@@ -1,23 +0,0 @@
-import { s as snakeToCamel } from './utils-B7jE0g5_.js';
-
-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 = {}));
-
-export { CardBrandLabels as C, PaymentMethodOption as P };

package/dist/module/billing-information-form.js

@@ -1,97 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { b as billingFormSchema } from './billing-form-schema.js';
-import { V as billingForm } from './parts.js';
-import { n as numberOnlyHandler } from './utils3.js';
-import { S as StateOptions } from './state-options.js';
-import { F as FormController } from './form.js';
-import { S as StyledHost } from './styled-host.js';
-import './details.js';
-import './event-types.js';
-import { o as onChange } from './checkout.store.js';
-import { d as defineCustomElement$4 } from './custom-popper2.js';
-import { d as defineCustomElement$3 } from './form-control-select2.js';
-import { d as defineCustomElement$2 } from './form-control-text2.js';
-import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
-
-const BillingInformationForm = /*@__PURE__*/ proxyCustomElement(class BillingInformationForm extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.errors = {};
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-        };
-    }
-    connectedCallback() {
-        this.unsubscribe = onChange('billingFormFields', (newValue) => {
-            this.formController.setInitialValues(newValue);
-        });
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
-    }
-    componentWillLoad() {
-        this.formController = new FormController(billingFormSchema());
-    }
-    componentDidLoad() {
-        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
-        this.formController.errors.subscribe(errors => {
-            this.errors = Object.assign({}, errors);
-        });
-    }
-    async getValues() {
-        return this.formController.values.getValue();
-    }
-    async validate() {
-        let isValid = await this.formController.validate();
-        return { isValid: isValid };
-    }
-    render() {
-        const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: 'abaa29c5d463c95801ebeadb254a2b87fe116dd0' }, h("div", { key: 'f3327594ec80d1365e23cebc523d18581093ed70', part: billingForm }, h("form", { key: '2aa614c338af201f648cb03f7865238bb82aa2e4' }, h("fieldset", { key: 'a00e9457818d996eee924e996464146a741a5468' }, h("div", { key: 'a7d18b979c2505ea8e0ba8b8427f0191060da3c0', class: "row gy-3" }, h("div", { key: 'a3ee71f96aafa50cf65e54a1e259d59b44de7494', class: "col-12" }, h("form-control-text", { key: 'd9bd8c2db3ed0b7d6062a8ca454f1c33caf84471', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '539f0e9ec635487c6118ec40b1bcf683efa5b64d', class: "col-12" }, h("form-control-text", { key: '10ae18b859dffb202ba014fb303917c58b95953b', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: 'bc6aba1d85cef27587e07bcf15073c766936ca8f', class: "col-12" }, h("form-control-text", { key: '073673edb594797a2158a1d5b04022b407b9ed0c', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '50062f42ee4da8238ffcc42b2f6850bbad309ffd', class: "col-12" }, h("form-control-text", { key: '4bf1c47edb3faca18aec278bef52d078d59f60ed', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: 'd2b8c326762474d38b5271f89d682be763fb0f44', class: "col-12" }, h("form-control-select", { key: '506286fed3c031d72cae737c4631ec4f91428ceb', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: 'f70fd74b32594b43a524cb305c79854bcb5ea2ba', class: "col-12" }, h("form-control-text", { key: '8f24531c98865727c2b585feef088f9f2c9c7e96', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
-    }
-}, [257, "justifi-billing-information-form", {
-        "formController": [32],
-        "billingInfo": [32],
-        "errors": [32],
-        "getValues": [64],
-        "validate": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-billing-information-form", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-billing-information-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BillingInformationForm);
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { BillingInformationForm as B, defineCustomElement as d };

package/dist/module/checkout.store.js

@@ -1,35 +0,0 @@
-import { c as createStore } from './index2.js';
-
-const initialState = {
-    accountId: '',
-    authToken: '',
-    billingFormFields: {
-        address_postal_code: '',
-    },
-    bnplEnabled: false,
-    bnplProviderApiVersion: '',
-    bnplProviderCheckoutUrl: '',
-    bnplProviderClientId: '',
-    bnplProviderMode: '',
-    checkoutId: '',
-    disableBankAccount: false,
-    disableBnpl: false,
-    disableCreditCard: false,
-    disablePaymentMethodGroup: false,
-    paymentAmount: 0,
-    paymentCurrency: 'USD',
-    paymentDescription: '',
-    paymentMethodGroupId: '',
-    paymentMethods: [],
-    selectedPaymentMethod: '',
-    totalAmount: 0,
-};
-const { state: checkoutStore, onChange } = createStore(initialState);
-Object.keys(initialState).forEach((key) => {
-    // @ts-ignore
-    onChange(key, (newValue) => {
-        checkoutStore[key] = newValue;
-    });
-});
-
-export { checkoutStore as c, onChange as o };

package/dist/module/header-2.js

@@ -1,8 +0,0 @@
-import { h } from '@stencil/core/internal/client';
-import { h as heading2 } from './parts.js';
-
-const Header2 = (props) => {
-    return h("h2", { class: `header-2 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading2 }, props.text);
-};
-
-export { Header2 as H };

package/dist/module/header-3.js

@@ -1,8 +0,0 @@
-import { h } from '@stencil/core/internal/client';
-import { U as heading3 } from './parts.js';
-
-const Header3 = (props) => {
-    return h("h3", { class: `header-3 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading3 }, props.text);
-};
-
-export { Header3 as H };