@justifi/webcomponents 5.7.6 → 6.0.0-rc.2

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

@@ -0,0 +1,400 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import './event-types.js';
+import { d as defineCustomElement$2 } from './justifi-radio-list-item2.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
+import { a as ComponentErrorCodes, P as PaymentMethodTypes, C as ComponentErrorSeverity } from './Refund.js';
+import './config-state.js';
+import './dinero.js';
+import './Pagination.js';
+import './Business.js';
+import { c as checkoutStore } from './checkout.store.js';
+import { d as defineCustomElement$i } from './custom-popper2.js';
+import { d as defineCustomElement$h } from './form-control-checkbox2.js';
+import { d as defineCustomElement$g } from './form-control-help-text2.js';
+import { d as defineCustomElement$f } from './form-control-radio2.js';
+import { d as defineCustomElement$e } from './form-control-select2.js';
+import { d as defineCustomElement$d } from './form-control-text2.js';
+import { d as defineCustomElement$c } from './form-control-tooltip2.js';
+import { d as defineCustomElement$b } from './hidden-input2.js';
+import { d as defineCustomElement$a } from './iframe-input2.js';
+import { d as defineCustomElement$9 } from './bank-account-billing-form-simple.js';
+import { d as defineCustomElement$8 } from './bank-account.js';
+import { d as defineCustomElement$7 } from './billing-form.js';
+import { d as defineCustomElement$6 } from './billing-form-full.js';
+import { d as defineCustomElement$5 } from './justifi-button2.js';
+import { d as defineCustomElement$4 } from './card-billing-form-simple.js';
+import { d as defineCustomElement$3 } from './card-form2.js';
+import { d as defineCustomElement$1 } from './save-new-payment-method.js';
+
+// Constants
+const PAYMENT_METHOD_TYPE_LABELS = {
+    [PaymentMethodTypes.bankAccount]: 'New bank account',
+    [PaymentMethodTypes.card]: 'New credit or debit card',
+};
+const ERROR_MESSAGES = {
+    AUTH_TOKEN_REQUIRED: 'Auth token is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
+    ACCOUNT_ID_REQUIRED: 'Account ID is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
+    FORM_NOT_READY: 'Payment form not ready',
+    VALIDATION_ERROR: 'Validation error',
+};
+const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePaymentMethod extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.submitEvent = createEvent(this, "submit-event", 7);
+        this.isLoading = false;
+        this.computedHideSubmitButton = false;
+        this.submitButtonText = 'Submit';
+    }
+    componentWillLoad() {
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+        this.validateRequiredProps();
+    }
+    connectedCallback() {
+        this.setDefaultSelectedPaymentMethod();
+        this.setComputedHideSubmitButton();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    paymentMethodsChanged() {
+        this.setDefaultSelectedPaymentMethod();
+    }
+    handleRadioClick(event) {
+        this.selectedPaymentMethodId = event.detail;
+    }
+    async fillBillingForm(fields) {
+        var _a;
+        (_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
+    }
+    async tokenizePaymentMethod(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this.isLoading = true;
+        try {
+            const validation = await this.validate();
+            if (!validation.isValid) {
+                this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    message: ERROR_MESSAGES.VALIDATION_ERROR,
+                });
+                this.isLoading = false;
+                return;
+            }
+            const tokenizeResponse = await this.resolvePaymentMethod({ isValid: true });
+            if (tokenizeResponse.error) {
+                this.emitError({
+                    errorCode: tokenizeResponse.error.code,
+                    message: tokenizeResponse.error.message,
+                });
+            }
+            this.submitEvent.emit({ response: tokenizeResponse });
+            return tokenizeResponse;
+        }
+        catch (error) {
+            const errorResponse = this.createErrorResponse(ComponentErrorCodes.TOKENIZE_ERROR, error.message);
+            this.emitError({
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                message: error.message,
+            });
+            this.submitEvent.emit({ response: errorResponse });
+            return errorResponse;
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async validate() {
+        if (!this.areFormsReady()) {
+            return { isValid: false, errors: { general: ERROR_MESSAGES.FORM_NOT_READY } };
+        }
+        const [billingValidation, paymentMethodValidation] = await Promise.all([
+            this.billingFormRef.validate(),
+            this.paymentMethodFormRef.validate(),
+        ]);
+        return {
+            isValid: billingValidation.isValid && paymentMethodValidation.isValid,
+            errors: Object.assign(Object.assign({}, billingValidation.errors), paymentMethodValidation.errors),
+        };
+    }
+    validateRequiredProps() {
+        if (!this.authToken && !checkoutStore.authToken) {
+            this.emitError({
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                message: ERROR_MESSAGES.AUTH_TOKEN_REQUIRED,
+            });
+        }
+        if (!this.accountId && !checkoutStore.accountId) {
+            this.emitError({
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                message: ERROR_MESSAGES.ACCOUNT_ID_REQUIRED,
+            });
+        }
+    }
+    setDefaultSelectedPaymentMethod() {
+        if (this.selectedPaymentMethodId) {
+            return;
+        }
+        if (!this.disableCreditCard) {
+            this.selectedPaymentMethodId = PaymentMethodTypes.card;
+        }
+        else if (!this.disableBankAccount) {
+            this.selectedPaymentMethodId = PaymentMethodTypes.bankAccount;
+        }
+    }
+    setComputedHideSubmitButton() {
+        // If hideSubmitButton prop is explicitly set, use that value
+        if (this.hideSubmitButton !== undefined) {
+            this.computedHideSubmitButton = this.hideSubmitButton;
+            return;
+        }
+        // Otherwise, auto-detect if component is slotted within modular-checkout
+        const isWithinModularCheckout = this.isSlottedWithinModularCheckout();
+        this.computedHideSubmitButton = isWithinModularCheckout;
+    }
+    isSlottedWithinModularCheckout() {
+        var _a;
+        let parent = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement;
+        while (parent) {
+            if (parent.tagName === 'JUSTIFI-MODULAR-CHECKOUT') {
+                return true;
+            }
+            parent = parent.parentElement;
+        }
+        return false;
+    }
+    get availablePaymentMethods() {
+        const methods = [];
+        if (!this.disableCreditCard) {
+            methods.push(PaymentMethodTypes.card);
+        }
+        if (!this.disableBankAccount) {
+            methods.push(PaymentMethodTypes.bankAccount);
+        }
+        return methods;
+    }
+    areFormsReady() {
+        return !!(this.billingFormRef && this.paymentMethodFormRef);
+    }
+    emitError(errorData) {
+        this.errorEvent.emit(Object.assign(Object.assign({}, errorData), { severity: ComponentErrorSeverity.ERROR }));
+    }
+    createErrorResponse(code, message) {
+        return {
+            error: {
+                code: code,
+                message,
+                decline_code: undefined,
+            },
+        };
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        if (!this.areFormsReady()) {
+            return this.createErrorResponse('form_not_ready', ERROR_MESSAGES.FORM_NOT_READY);
+        }
+        try {
+            const validation = await this.validate();
+            if (!validation.isValid || !insuranceValidation.isValid) {
+                const errorMessage = Object.values(validation.errors)[0] || ERROR_MESSAGES.VALIDATION_ERROR;
+                return {
+                    validationError: true,
+                    error: {
+                        code: 'validation_error',
+                        message: String(errorMessage),
+                        decline_code: undefined,
+                    },
+                };
+            }
+            return await this.performTokenization();
+        }
+        catch (error) {
+            return { error };
+        }
+    }
+    async performTokenization() {
+        var _a, _b;
+        const tokenizeResponse = await this.tokenize();
+        if (tokenizeResponse.error) {
+            return { error: tokenizeResponse.error };
+        }
+        const tokenizeResponseData = tokenizeResponse.data;
+        return {
+            token: ((_a = tokenizeResponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeResponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token),
+            data: tokenizeResponseData,
+        };
+    }
+    async tokenize() {
+        try {
+            const billingFormFieldValues = await this.billingFormRef.getValues();
+            const config = {
+                clientId: this.authToken || checkoutStore.authToken,
+                account: this.accountId || checkoutStore.accountId,
+                paymentMethodMetadata: this.buildPaymentMethodMetadata(billingFormFieldValues),
+            };
+            return await this.paymentMethodFormRef.tokenize(config);
+        }
+        catch (error) {
+            return error;
+        }
+    }
+    buildPaymentMethodMetadata(billingFormFieldValues) {
+        return this.shouldSavePaymentMethod
+            ? Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupID }) : Object.assign({}, billingFormFieldValues);
+    }
+    get paymentMethodGroupID() {
+        return this.paymentMethodGroupId || checkoutStore.paymentMethodGroupId;
+    }
+    get shouldSavePaymentMethod() {
+        return !!(this.paymentMethodGroupId || checkoutStore.savePaymentMethod);
+    }
+    get shouldHideRadioInput() {
+        return this.disableCreditCard || this.disableBankAccount;
+    }
+    renderPaymentMethodOption(paymentMethodType) {
+        const isSelected = this.selectedPaymentMethodId === paymentMethodType;
+        return (h("div", { class: "payment-method" }, h("justifi-radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
+    }
+    renderSelectedPaymentMethodForm(paymentMethodId) {
+        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId })), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID })));
+    }
+    renderPaymentMethodForm(paymentMethodId) {
+        return paymentMethodId === PaymentMethodTypes.card ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
+    }
+    render() {
+        return (h(StyledHost, { key: '47fb6432264a7009d1df82cac73c3283be5a1514' }, h("form", { key: 'b283f414e00296cbf08960a669fbd0f91a2cb554' }, h("fieldset", { key: 'bfaddf226f5ec365ceb22185804f29d46f9f59c7' }, h("div", { key: 'b828e27ea63fa96dd7f38ef8d6038e3a6d1f234c', class: "row gy-3" }, h("div", { key: '1b34dba8e5d3a5426f002e4b2eace7dbc32b80e8', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'd62cdda4a73c39ce53936717c5c22779dd9c3c48', class: "col-12" }, h("justifi-button", { key: '24bbd9e275990e59d0549b07725111aa0fffa8c4', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "disableCreditCard": ["paymentMethodsChanged"],
+        "disableBankAccount": ["paymentMethodsChanged"]
+    }; }
+}, [256, "justifi-tokenize-payment-method", {
+        "accountId": [1, "account-id"],
+        "authToken": [1, "auth-token"],
+        "disableBankAccount": [4, "disable-bank-account"],
+        "disableCreditCard": [4, "disable-credit-card"],
+        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
+        "hideCardBillingForm": [4, "hide-card-billing-form"],
+        "hideSubmitButton": [4, "hide-submit-button"],
+        "paymentMethodGroupId": [1, "payment-method-group-id"],
+        "submitButtonText": [1, "submit-button-text"],
+        "isLoading": [32],
+        "selectedPaymentMethodId": [32],
+        "computedHideSubmitButton": [32],
+        "fillBillingForm": [64],
+        "tokenizePaymentMethod": [64],
+        "validate": [64]
+    }, [[0, "radio-click", "handleRadioClick"]], {
+        "disableCreditCard": ["paymentMethodsChanged"],
+        "disableBankAccount": ["paymentMethodsChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-tokenize-payment-method", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-bank-account-billing-form-simple", "justifi-bank-account-form", "justifi-billing-form", "justifi-billing-form-full", "justifi-button", "justifi-card-billing-form-simple", "justifi-card-form", "justifi-radio-list-item", "justifi-save-new-payment-method"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-tokenize-payment-method":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TokenizePaymentMethod);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "justifi-bank-account-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "justifi-bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "justifi-billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "justifi-billing-form-full":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "justifi-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "justifi-card-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "justifi-card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "justifi-radio-list-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "justifi-save-new-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { TokenizePaymentMethod as T, defineCustomElement as d };