@justifi/webcomponents 6.4.0 → 6.4.2

package/dist/collection/components/tokenize-payment-method/internal-tokenize-payment-method.js

@@ -0,0 +1,626 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../ui-components";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+import JustifiAnalytics from "../../api/Analytics";
+import { ComponentErrorCodes, ComponentErrorSeverity, } from "../../api";
+import { checkoutStore } from "../../store/checkout.store";
+import { PAYMENT_METHODS } from "../modular-checkout/ModularCheckout";
+// Constants
+const PAYMENT_METHOD_TYPE_LABELS = {
+    [PAYMENT_METHODS.NEW_BANK_ACCOUNT]: 'New bank account',
+    [PAYMENT_METHODS.NEW_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',
+};
+export class InternalTokenizePaymentMethod {
+    constructor() {
+        this.computedHideSubmitButton = false;
+        this.isLoading = false;
+        this.submitButtonText = 'Submit';
+    }
+    paymentMethodsChanged() {
+        this.setDefaultSelectedPaymentMethod();
+    }
+    connectedCallback() {
+        this.setDefaultSelectedPaymentMethod();
+        this.setComputedHideSubmitButton();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+        if (this.unsubscribeFromStore) {
+            this.unsubscribeFromStore();
+        }
+    }
+    componentWillLoad() {
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+    }
+    handleRadioClick(event) {
+        this.selectedPaymentMethod = event.detail;
+        checkoutStore.selectedPaymentMethod = { type: 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.validateRequiredProps();
+        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(),
+        ]);
+        const result = {
+            isValid: billingValidation.isValid && paymentMethodValidation.isValid,
+            errors: Object.assign(Object.assign({}, billingValidation.errors), paymentMethodValidation.errors),
+        };
+        return result;
+    }
+    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;
+        }
+    }
+    // 9. Local methods
+    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.selectedPaymentMethod) {
+            return;
+        }
+        if (!this.disableCreditCard) {
+            this.selectedPaymentMethod = PAYMENT_METHODS.NEW_CARD;
+            checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.NEW_CARD };
+        }
+        else if (!this.disableBankAccount) {
+            this.selectedPaymentMethod = PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+            checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.NEW_BANK_ACCOUNT };
+        }
+    }
+    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(PAYMENT_METHODS.NEW_CARD);
+        }
+        if (!this.disableBankAccount) {
+            methods.push(PAYMENT_METHODS.NEW_BANK_ACCOUNT);
+        }
+        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,
+                    },
+                };
+            }
+            const result = await this.performTokenization();
+            return result;
+        }
+        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,
+        };
+    }
+    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.selectedPaymentMethod === paymentMethodType && checkoutStore.selectedPaymentMethod.id === undefined;
+        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(paymentMethodType) {
+        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodType), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType })), h("div", { class: "mt-4" }, h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID, label: this.savePaymentMethodLabel }))));
+    }
+    renderPaymentMethodForm(paymentMethodType) {
+        return paymentMethodType === PAYMENT_METHODS.NEW_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: 'e1ee33f08d3eaff9a2951bd30ef9814a5d959b35' }, h("form", { key: 'df73d7965968c0efc3ee2b35a9a85d551915e5a1' }, h("fieldset", { key: '2967ed65f1c0af42082a8b7c255db5fdc1c78019' }, h("div", { key: 'f45b8e074f39ec6abefc8f7e30bdf0ae57b1272c', class: "row gy-3" }, h("div", { key: 'fe9c90b34d60802f4d0dc51863874151f4a17b2b', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'ff1b8332d70fe68c3d3140c5a173dd8b419b6a8e', class: "col-12" }, h("justifi-button", { key: 'bf2ced1a5164a9c9af2bf2c5b750c5f9734dc86b', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+    }
+    static get is() { return "internal-tokenize-payment-method"; }
+    static get properties() {
+        return {
+            "accountId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "account-id"
+            },
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auth-token"
+            },
+            "disableBankAccount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-bank-account"
+            },
+            "disableCreditCard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-credit-card"
+            },
+            "hideBankAccountBillingForm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-bank-account-billing-form"
+            },
+            "hideCardBillingForm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-card-billing-form"
+            },
+            "hideSubmitButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-submit-button"
+            },
+            "paymentMethodGroupId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "payment-method-group-id"
+            },
+            "submitButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "submit-button-text",
+                "defaultValue": "'Submit'"
+            },
+            "savePaymentMethodLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "save-payment-method-label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "computedHideSubmitButton": {},
+            "isLoading": {},
+            "selectedPaymentMethod": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
+                    "references": {
+                        "ComponentErrorEvent": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "submitEvent",
+                "name": "submit-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentSubmitEvent",
+                    "resolved": "ComponentSubmitEvent",
+                    "references": {
+                        "ComponentSubmitEvent": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentSubmitEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "fillBillingForm": {
+                "complexType": {
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "parameters": [{
+                            "name": "fields",
+                            "type": "BillingFormFields",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "tokenizePaymentMethod": {
+                "complexType": {
+                    "signature": "(event?: MouseEvent) => Promise<PaymentMethodPayload>",
+                    "parameters": [{
+                            "name": "event",
+                            "type": "MouseEvent",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "PaymentMethodPayload": {
+                            "location": "import",
+                            "path": "../checkout/payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
+                        },
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        },
+                        "ComponentErrorCodes": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorCodes"
+                        }
+                    },
+                    "return": "Promise<PaymentMethodPayload>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<ValidationResult>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ValidationResult": {
+                            "location": "global",
+                            "id": "global::ValidationResult"
+                        }
+                    },
+                    "return": "Promise<ValidationResult>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "tokenize": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TokenizeConfig": {
+                            "location": "global",
+                            "id": "global::TokenizeConfig"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "disableCreditCard",
+                "methodName": "paymentMethodsChanged"
+            }, {
+                "propName": "disableBankAccount",
+                "methodName": "paymentMethodsChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "radio-click",
+                "method": "handleRadioClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}