@justifi/webcomponents 5.7.6-rc-21 → 5.7.7

package/dist/module/modular-checkout.js

@@ -1,336 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as checkoutStore, o as onChange } from './checkout.store.js';
-import { J as JustifiAnalytics, c as checkPkgVersion } from './Analytics.js';
-import './config-state.js';
-import './dinero.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes, d as ComponentErrorMessages, I as ICheckoutStatus } from './Refund.js';
-import './Pagination.js';
-import './Business.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
-import { C as CheckoutService } from './checkout.service.js';
-import { i as insuranceValuesOn, h as hasInsuranceValueChanged, a as insuranceValues } from './insurance-state.js';
-
-const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
-    var _a;
-    try {
-        const response = await service.fetchCheckout(authToken, checkoutId);
-        if (!response.error) {
-            const checkout = response.data;
-            onSuccess({ checkout });
-        }
-        else {
-            const responseError = getErrorMessage(response.error);
-            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
-            return onError({
-                error: responseError,
-                code,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-        }
-    }
-    catch (error) {
-        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
-        return onError({
-            error: error.message || error,
-            code,
-            severity: ComponentErrorSeverity.ERROR,
-        });
-    }
-};
-const makeCheckoutComplete = ({ authToken, checkoutId, service }) => async ({ payment, onSuccess, onError }) => {
-    var _a;
-    try {
-        const response = await service.complete(authToken, checkoutId, payment);
-        if (!response.error) {
-            const checkout = response.data;
-            onSuccess({ checkout });
-        }
-        else {
-            const responseError = getErrorMessage(response.error);
-            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
-            return onError({
-                error: responseError,
-                code,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-        }
-    }
-    catch (error) {
-        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
-        return onError({
-            error: error.message || error,
-            code,
-            severity: ComponentErrorSeverity.ERROR,
-        });
-    }
-};
-
-const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.errorEvent = createEvent(this, "error-event", 7);
-        this.submitEvent = createEvent(this, "submit-event", 7);
-        this.paymentMethodChangedEvent = createEvent(this, "payment-method-changed", 7);
-        this.savePaymentMethod = false;
-    }
-    savePaymentMethodChanged(newValue) {
-        checkoutStore.savePaymentMethod = newValue;
-    }
-    connectedCallback() {
-        this.observer = new MutationObserver(() => {
-            this.queryFormRefs();
-        });
-        this.observer.observe(this.hostEl, {
-            childList: true,
-            subtree: true
-        });
-        checkoutStore.checkoutId = this.checkoutId;
-        const config = {
-            authToken: this.authToken,
-            checkoutId: this.checkoutId,
-            service: new CheckoutService()
-        };
-        this.getCheckout = makeGetCheckout(config);
-        this.completeCheckout = makeCheckoutComplete(config);
-        onChange('selectedPaymentMethod', (newValue) => {
-            this.paymentMethodChangedEvent.emit(newValue);
-        });
-    }
-    componentWillLoad() {
-        if (!this.authToken || !this.checkoutId) {
-            this.errorEvent.emit({
-                message: ComponentErrorMessages.NOT_AUTHENTICATED,
-                errorCode: ComponentErrorCodes.NOT_AUTHENTICATED,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return;
-        }
-        this.analytics = new JustifiAnalytics(this);
-        checkPkgVersion();
-        checkoutStore.authToken = this.authToken;
-        checkoutStore.savePaymentMethod = this.savePaymentMethod;
-        this.fetchCheckout();
-        // Refresh the checkout data when insurance values actually change (not on initial load)
-        insuranceValuesOn('set', (key) => {
-            const value = insuranceValues[key];
-            if (value !== undefined && hasInsuranceValueChanged(key, value)) {
-                this.fetchCheckout();
-            }
-        });
-    }
-    componentDidLoad() {
-        this.queryFormRefs();
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    fetchCheckout() {
-        if (this.getCheckout) {
-            this.getCheckout({
-                onSuccess: ({ checkout }) => {
-                    if (checkout.status === ICheckoutStatus.completed) {
-                        this.errorEvent.emit({
-                            message: ComponentErrorMessages.CHECKOUT_ALREADY_COMPLETED,
-                            errorCode: ComponentErrorCodes.CHECKOUT_ALREADY_COMPLETED,
-                            severity: ComponentErrorSeverity.ERROR,
-                        });
-                        return;
-                    }
-                    else if (checkout.status === ICheckoutStatus.expired) {
-                        this.errorEvent.emit({
-                            message: ComponentErrorMessages.CHECKOUT_EXPIRED,
-                            errorCode: ComponentErrorCodes.CHECKOUT_EXPIRED,
-                            severity: ComponentErrorSeverity.ERROR,
-                        });
-                        return;
-                    }
-                    this.updateStore(checkout);
-                },
-                onError: (error) => {
-                    this.errorEvent.emit({
-                        message: error.message,
-                        errorCode: ComponentErrorCodes.FETCH_ERROR,
-                        severity: ComponentErrorSeverity.ERROR,
-                    });
-                }
-            });
-        }
-    }
-    updateStore(checkout) {
-        var _a, _b, _c, _d;
-        checkoutStore.accountId = checkout.account_id;
-        checkoutStore.paymentMethods = checkout.payment_methods;
-        checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
-        checkoutStore.paymentDescription = checkout.payment_description;
-        checkoutStore.totalAmount = checkout.total_amount;
-        checkoutStore.paymentAmount = checkout.payment_amount;
-        checkoutStore.bnplEnabled = checkout.payment_settings.bnpl_payments;
-        checkoutStore.bnplProviderClientId = (_a = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _a === void 0 ? void 0 : _a.provider_client_id;
-        checkoutStore.bnplProviderMode = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_mode;
-        checkoutStore.bnplProviderApiVersion = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_api_version;
-        checkoutStore.bnplProviderCheckoutUrl = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_checkout_url;
-    }
-    queryFormRefs() {
-        this.paymentMethodFormRef = this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form');
-        this.billingInformationFormRef = this.hostEl.querySelector('justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple');
-        this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
-        this.sezzlePaymentMethodRef = this.hostEl.querySelector('justifi-sezzle-payment-method');
-    }
-    async tokenizePaymentMethod(tokenizeArgs) {
-        var _a, _b, _c;
-        const billingInfoValues = (_b = await ((_a = this.billingInformationFormRef) === null || _a === void 0 ? void 0 : _a.getValues())) !== null && _b !== void 0 ? _b : {};
-        const combinedBillingInfo = Object.assign(Object.assign({}, tokenizeArgs), billingInfoValues);
-        const paymentMethodMetadata = Object.assign({ accountId: checkoutStore.accountId, payment_method_group_id: undefined }, combinedBillingInfo);
-        if (checkoutStore.savePaymentMethod) {
-            paymentMethodMetadata.payment_method_group_id = checkoutStore.paymentMethodGroupId;
-        }
-        return (_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
-            clientId: this.authToken,
-            paymentMethodMetadata,
-            account: checkoutStore.accountId,
-        });
-    }
-    async getPaymentMethod(submitCheckoutArgs) {
-        // If we have a payment token from the store (set by tokenize-payment-method), use it
-        if (checkoutStore.paymentToken) {
-            return checkoutStore.paymentToken;
-        }
-        // Fallback to the original tokenization logic for backward compatibility
-        if (!this.paymentMethodFormRef) {
-            return checkoutStore.selectedPaymentMethod;
-        }
-        const { error, id: token } = await this.tokenizePaymentMethod(submitCheckoutArgs);
-        if (error) {
-            this.errorEvent.emit({
-                errorCode: error.code,
-                message: error.message,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return undefined;
-        }
-        return token;
-    }
-    async validate() {
-        var _a;
-        const promises = [
-            (_a = this.billingInformationFormRef) === null || _a === void 0 ? void 0 : _a.validate()
-        ];
-        // Only validate payment method form if we don't have a payment token from tokenize-payment-method
-        if (!checkoutStore.paymentToken && this.paymentMethodFormRef) {
-            promises.push(this.paymentMethodFormRef.validate());
-        }
-        if (this.insuranceFormRef) {
-            promises.push(this.insuranceFormRef.validate());
-        }
-        const validationResults = await Promise.all(promises);
-        return validationResults.every(result => {
-            // Handle different return types from different form components
-            if (typeof result === 'boolean') {
-                return result;
-            }
-            if (result && typeof result === 'object' && 'isValid' in result) {
-                return result.isValid;
-            }
-            return result !== false;
-        });
-    }
-    async submitCheckout(submitCheckoutArgs) {
-        var _a;
-        const isValid = await this.validate();
-        if (!isValid) {
-            this.errorEvent.emit({
-                message: 'Please fill in all required fields.',
-                errorCode: ComponentErrorCodes.VALIDATION_ERROR,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return;
-        }
-        let payment;
-        if (checkoutStore.selectedPaymentMethod === 'sezzle') {
-            const insuranceValidation = this.insuranceFormRef ? await this.insuranceFormRef.validate() : { isValid: true };
-            const sezzleResult = await this.sezzlePaymentMethodRef.resolvePaymentMethod(insuranceValidation);
-            if (sezzleResult.error) {
-                this.errorEvent.emit({
-                    message: sezzleResult.error.message,
-                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                    severity: ComponentErrorSeverity.ERROR,
-                });
-                return;
-            }
-            else if (((_a = sezzleResult.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
-                payment = {
-                    payment_mode: 'bnpl',
-                    payment_token: undefined,
-                };
-            }
-        }
-        else {
-            const paymentMethod = await this.getPaymentMethod(submitCheckoutArgs);
-            if (!paymentMethod) {
-                this.errorEvent.emit({
-                    message: 'Payment method tokenization failed.',
-                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                    severity: ComponentErrorSeverity.ERROR,
-                });
-                return;
-            }
-            payment = {
-                payment_mode: 'ecom',
-                payment_token: paymentMethod,
-            };
-        }
-        this.completeCheckout({
-            payment,
-            onSuccess: ({ checkout }) => {
-                this.submitEvent.emit({
-                    checkout,
-                    message: 'Checkout completed successfully',
-                });
-            },
-            onError: (error) => {
-                this.errorEvent.emit({
-                    message: error.message,
-                    errorCode: ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
-                    severity: ComponentErrorSeverity.ERROR,
-                });
-            },
-        });
-    }
-    async setSelectedPaymentMethod(paymentMethodId) {
-        checkoutStore.selectedPaymentMethod = paymentMethodId;
-    }
-    render() {
-        return (h(Host, { key: '047a90f9aed88b72c60f6333e20fa00871fdd17a' }));
-    }
-    get hostEl() { return this; }
-    static get watchers() { return {
-        "savePaymentMethod": ["savePaymentMethodChanged"]
-    }; }
-}, [256, "justifi-modular-checkout", {
-        "authToken": [1, "auth-token"],
-        "checkoutId": [1, "checkout-id"],
-        "savePaymentMethod": [4, "save-payment-method"],
-        "validate": [64],
-        "submitCheckout": [64],
-        "setSelectedPaymentMethod": [64]
-    }, undefined, {
-        "savePaymentMethod": ["savePaymentMethodChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-modular-checkout"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-modular-checkout":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ModularCheckout);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { ModularCheckout as M, defineCustomElement as d };

package/dist/module/payment-method-option-utils.js

@@ -1,15 +0,0 @@
-import './dinero.js';
-
-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 };

package/dist/module/payment-method-option.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface PaymentMethodOption extends Components.PaymentMethodOption, HTMLElement {}
-export const PaymentMethodOption: {
-    prototype: PaymentMethodOption;
-    new (): PaymentMethodOption;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/module/payment-method-option.js

@@ -1,54 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { r as radioListItem } from './parts.js';
-import { S as StyledHost } from './styled-host.js';
-import './details.js';
-import './event-types.js';
-import './justifi-radio-list-item2.js';
-import { d as defineCustomElement$3 } from './form-control-help-text2.js';
-import { d as defineCustomElement$2 } from './form-control-radio2.js';
-
-const PaymentMethodOption$1 = /*@__PURE__*/ proxyCustomElement(class PaymentMethodOption extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    render() {
-        return (h(StyledHost, { key: '8055addaf7563d5deb7d9b31794bf36e1d273a0d', class: "payment-method" }, h("div", { key: '5fb85a3e5c94eff4e397ba5b23d3fb7a34e4c312', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'b36c23bb6eeee3fc7325ea6d9b46aed4fc43c21c', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
-    }
-}, [257, "payment-method-option", {
-        "paymentMethodOptionId": [1, "payment-method-option-id"],
-        "isSelected": [4, "is-selected"],
-        "clickHandler": [16, "click-handler"],
-        "radioButtonHidden": [4, "radio-button-hidden"],
-        "label": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["payment-method-option", "form-control-help-text", "form-control-radio"];
-    components.forEach(tagName => { switch (tagName) {
-        case "payment-method-option":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PaymentMethodOption$1);
-            }
-            break;
-        case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-radio":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const PaymentMethodOption = PaymentMethodOption$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PaymentMethodOption, defineCustomElement };

package/dist/module/saved-payment-methods.js

@@ -1,73 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { r as radioListItem } from './parts.js';
-import { S as StyledHost } from './styled-host.js';
-import './details.js';
-import './event-types.js';
-import './justifi-radio-list-item2.js';
-import { c as checkoutStore } from './checkout.store.js';
-import { C as CardBrandLabels } from './payment-method-option-utils.js';
-import { d as defineCustomElement$2 } from './form-control-help-text2.js';
-import { d as defineCustomElement$1 } from './form-control-radio2.js';
-
-const SavedPaymentMethods = /*@__PURE__*/ proxyCustomElement(class SavedPaymentMethods extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        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)));
-    }
-}, [257, "justifi-saved-payment-methods"]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-saved-payment-methods", "form-control-help-text", "form-control-radio"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-saved-payment-methods":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SavedPaymentMethods);
-            }
-            break;
-        case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "form-control-radio":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { SavedPaymentMethods as S, defineCustomElement as d };

package/dist/module/summary.js

@@ -1,35 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { t as text } from './parts.js';
-import { c as formatCurrency } from './utils2.js';
-import { c as checkoutStore } from './checkout.store.js';
-import { S as StyledHost } from './styled-host.js';
-import './details.js';
-import './event-types.js';
-import './justifi-radio-list-item2.js';
-
-const Summary = /*@__PURE__*/ proxyCustomElement(class Summary extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    render() {
-        return (h(StyledHost, { key: 'fccb819d66329424af42e9c53effec29a6c9784d' }, h("section", { key: '0ee7a4e0579f7f222a9db82e6b4db6bb92542d9e' }, h("div", { key: 'bdf74b2bc5db35b96ca75d50783b790bb482a76e' }, h("div", { key: '851b481bd6beb1fcaadc106d27d131f8b07d1c9a', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: '0b261bc0e2d65cf989778e02df51b3265816f7aa' }, h("span", { key: '0eee0017ddf25ae45d6b5c828071098f45e6e19d', part: text }, "Total"), "\u00A0", h("span", { key: 'd21576f14c3437f70a4b85b9dfc01107392d663a', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
-    }
-}, [257, "justifi-checkout-summary"]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-checkout-summary"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-checkout-summary":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Summary);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { Summary as S, defineCustomElement as d };