@justifi/webcomponents 5.7.6-rc-21 → 5.7.7

package/dist/collection/components/checkout/checkout.js

@@ -1,101 +1,60 @@
 import { h } from "@stencil/core";
+import { makeGetCheckout, makeCheckoutComplete } from "../../actions/checkout/checkout-actions";
+import { CheckoutService } from "../../api/services/checkout.service";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
-import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
-import { checkoutStore } from "../../store/checkout.store";
-import { checkoutSummary } from "../../styles/parts";
-import { StyledHost } from "../../ui-components";
 export class Checkout {
     constructor() {
         this.errorMessage = '';
-        this.insuranceToggled = false;
-        this.isSubmitting = false; // This is used to prevent multiple submissions and is different from loading state
-        this.disableBankAccount = false;
-        this.disableBnpl = false;
-        this.disableCreditCard = false;
-        this.disablePaymentMethodGroup = false;
-        this.hideBankAccountBillingForm = false;
-        this.hideCardBillingForm = false;
-    }
-    propChanged() {
-        this.updateStore();
-    }
-    connectedCallback() {
-        if (this.authToken && this.checkoutId) {
-            this.updateStore();
-        }
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
+        this.initializeGetCheckout();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    checkoutComplete(_event) {
-        this.isSubmitting = false;
-    }
-    checkoutError(event) {
-        this.isSubmitting = false;
-        console.error('checkout error', event.detail);
-    }
-    async handleTokenizeSubmit(event) {
-        this.tokenizedPaymentMethod = event.detail.response;
-        if (event.detail.response.error) {
-            this.isSubmitting = false;
+    ;
+    initializeGetCheckout() {
+        if (this.authToken && this.checkoutId) {
+            this.getCheckout = makeGetCheckout({
+                authToken: this.authToken,
+                checkoutId: this.checkoutId,
+                service: new CheckoutService()
+            });
+            this.complete = makeCheckoutComplete({
+                authToken: this.authToken,
+                checkoutId: this.checkoutId,
+                service: new CheckoutService()
+            });
+        }
+        else {
             this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: event.detail.response.error.message,
-                severity: ComponentErrorSeverity.ERROR
+                message: 'auth-token and checkout-id are required',
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
             });
-            return;
         }
-        // Now submit the checkout with the tokenized payment method
-        await this.submitCheckoutWithToken();
+    }
+    propChanged() {
+        this.initializeGetCheckout();
     }
     async fillBillingForm(fields) {
-        var _a;
-        checkoutStore.billingFormFields = fields;
-        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.fillBillingForm(fields);
+        this.checkoutCoreRef.fillBillingForm(fields);
     }
     async validate() {
-        var _a, _b, _c;
-        const tokenizeValidation = await ((_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.validate());
-        const modularValidation = await ((_b = this.modularCheckoutRef) === null || _b === void 0 ? void 0 : _b.validate());
-        return {
-            isValid: ((_c = tokenizeValidation === null || tokenizeValidation === void 0 ? void 0 : tokenizeValidation.isValid) !== null && _c !== void 0 ? _c : true) && (modularValidation !== null && modularValidation !== void 0 ? modularValidation : true)
-        };
-    }
-    updateStore() {
-        checkoutStore.checkoutId = this.checkoutId;
-        checkoutStore.authToken = this.authToken;
-        checkoutStore.disableCreditCard = this.disableCreditCard;
-        checkoutStore.disableBankAccount = this.disableBankAccount;
-        checkoutStore.disableBnpl = this.disableBnpl;
-        checkoutStore.disablePaymentMethodGroup = this.disablePaymentMethodGroup;
-    }
-    async submit(_event) {
-        var _a;
-        this.isSubmitting = true;
-        // Trigger the tokenize payment method submission
-        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.tokenizePaymentMethod();
-    }
-    async submitCheckoutWithToken() {
-        if (!this.tokenizedPaymentMethod || this.tokenizedPaymentMethod.error) {
-            this.isSubmitting = false;
-            return;
-        }
-        // Set the payment token in the store for the modular checkout to use
-        checkoutStore.paymentToken = this.tokenizedPaymentMethod.token;
-        // Submit the checkout
-        this.modularCheckoutRef.submitCheckout(checkoutStore.billingFormFields);
-    }
-    get showPaymentTypeHeader() {
-        return !this.disableCreditCard && !this.disableBankAccount;
+        const { isValid } = await this.checkoutCoreRef.validate();
+        return { isValid };
     }
     render() {
-        return (h(StyledHost, { key: '516d33e24d351df623d07b8c27113568b2868aa0' }, h("justifi-modular-checkout", { key: 'd75f9484d6b77cf6ddb11f56beaa47ade1dead3f', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: checkoutStore.savePaymentMethod }, h("div", { key: '05984eb0fb57e63d2f89d3eb8d37bcaa3e212547', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '4bf6c78f9052118d24c8258c1926ebeccea304ef', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '772ce7a33a42025e37891dc72bc89ee164dfafa7', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: 'abaee0bf9c978fcaff1941cfa61fa08f64312d60' }, h("justifi-checkout-summary", { key: '8833e3a419f769b6df1f73aaf58fa0f3d761e726' }))), h("div", { key: 'a1f4ed10a8c0e87ab229a4d28893e623c6db6162', class: "col-12 mt-4" }, h("slot", { key: 'c80d7f40db60e1b8cf4f408d44f9c0bbe17bcd24', name: "insurance" })), h("div", { key: '1c75a9d0d5cc74cc5a804218960f5be9e3532bbe', class: "col-12 mt-4" }, h("justifi-header", { key: '8800e249bc4d92cf38611eaefc8230ad5f35c447', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'bff61808c64fa281230642d385c6081a51276e9d', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '1bfbac09bc3e91d07e2eb003c38cbf2bc3bea1cd', class: "d-flex flex-column" }, h("section", { key: 'd383841d037516896511f72e40d3eb3fd6f9c272' }, h("div", { key: '5440f8343465f39697ca87f3bcdfe3f5fa511685' }, h("justifi-saved-payment-methods", { key: '23ee2270b2ffecd43cc8d608482a4f77d7ce0ee3' }), h("justifi-sezzle-payment-method", { key: '0a5577cb1070563ba5fb7dd8c3b05977ee340bd6' }), h("justifi-tokenize-payment-method", { key: 'd03e8a971e532781c7d9087345fe1b4a8741f492', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: '9e488234ee43bed70992e190a23b1faf5fe61308', class: "mt-4" }, h("justifi-button", { key: '31571a8fda37762731679d69b9017e1b553bef8a', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+        return (h("justifi-checkout-core", { key: 'c1c7cf4f1aadce928e3ed6a6ae05a7824d875d68', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: el => {
+                if (el) {
+                    this.checkoutCoreRef = el;
+                }
+            } }, h("div", { key: '7a4be7220e5eb199f94c5086c23e10dce68d4854', slot: "insurance" }, h("slot", { key: 'f5db23ef6dc82d0521518ea2dbfe99d8c8b6c2cc', name: "insurance" }))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -138,9 +97,9 @@ export class Checkout {
                 "setter": false,
                 "reflect": false
             },
-            "disableBankAccount": {
+            "disableCreditCard": {
                 "type": "boolean",
-                "attribute": "disable-bank-account",
+                "attribute": "disable-credit-card",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -155,12 +114,11 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
-            "disableBnpl": {
+            "disableBankAccount": {
                 "type": "boolean",
-                "attribute": "disable-bnpl",
+                "attribute": "disable-bank-account",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -175,12 +133,11 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
-            "disableCreditCard": {
+            "disableBnpl": {
                 "type": "boolean",
-                "attribute": "disable-credit-card",
+                "attribute": "disable-bnpl",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -195,8 +152,7 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
             "disablePaymentMethodGroup": {
                 "type": "boolean",
@@ -215,12 +171,11 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
-            "hideBankAccountBillingForm": {
+            "hideCardBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-bank-account-billing-form",
+                "attribute": "hide-card-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -235,12 +190,11 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
-            "hideCardBillingForm": {
+            "hideBankAccountBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-card-billing-form",
+                "attribute": "hide-bank-account-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -255,20 +209,15 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "checkout": {},
+            "getCheckout": {},
             "complete": {},
-            "errorMessage": {},
-            "insuranceToggled": {},
-            "isSubmitting": {},
-            "serverError": {},
-            "tokenizedPaymentMethod": {}
+            "errorMessage": {}
         };
     }
     static get events() {
@@ -314,27 +263,6 @@ export class Checkout {
                         }
                     }
                 }
-            }, {
-                "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/ComponentEvents",
-                            "id": "src/api/ComponentEvents.ts::ComponentSubmitEvent"
-                        }
-                    }
-                }
             }];
     }
     static get methods() {
@@ -391,39 +319,6 @@ export class Checkout {
             }, {
                 "propName": "checkoutId",
                 "methodName": "propChanged"
-            }, {
-                "propName": "disableCreditCard",
-                "methodName": "propChanged"
-            }, {
-                "propName": "disableBankAccount",
-                "methodName": "propChanged"
-            }, {
-                "propName": "disableBnpl",
-                "methodName": "propChanged"
-            }, {
-                "propName": "disablePaymentMethodGroup",
-                "methodName": "propChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "submit-event",
-                "method": "checkoutComplete",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "error-event",
-                "method": "checkoutError",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "submit-event",
-                "method": "handleTokenizeSubmit",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }];
     }
 }