@justifi/webcomponents 6.5.1-rc.5 → 6.7.0

package/dist/collection/components/modular-checkout/sub-components/google-pay.js

@@ -0,0 +1,609 @@
+import { h, } from "@stencil/core";
+import { GooglePayService } from "../../../api/services/google-pay.service";
+import { GooglePayButtonType, GooglePayButtonStyle, GooglePayButtonSizeMode, GooglePayEnvironment, GooglePayHelpers, } from "../../../api/GooglePay";
+import { StyledHost } from "../../../ui-components";
+import GooglePaySkeleton from "./google-pay-skeleton";
+import { GooglePayButton } from "../../../ui-components/google-pay-button";
+import { checkoutStore, onChange } from "../../../store/checkout.store";
+import { PAYMENT_METHODS } from "../ModularCheckout";
+export class GooglePay {
+    constructor() {
+        this.unsubscribes = [];
+        this.canMakePayments = false;
+        this.error = null;
+        this.isAvailable = false;
+        this.isLoading = true;
+        this.isProcessing = false;
+        this.buttonSizeMode = GooglePayButtonSizeMode.FILL;
+        this.buttonStyle = GooglePayButtonStyle.BLACK;
+        this.buttonType = GooglePayButtonType.PLAIN;
+        this.countryCode = "US";
+        this.disabled = false;
+        this.environment = GooglePayEnvironment.PRODUCTION;
+        this.merchantId = "gateway:justifi";
+        this.merchantName = "justifi";
+        this.showSkeleton = true;
+        this.handleGooglePayClick = async () => {
+            var _a;
+            if (this.isProcessing ||
+                this.disabled ||
+                !this.isAvailable ||
+                !this.canMakePayments) {
+                return;
+            }
+            try {
+                this.isProcessing = true;
+                this.error = null;
+                this.googlePayStarted.emit();
+                const paymentDataRequest = this.createPaymentDataRequest();
+                const result = await this.googlePayService.startPaymentSession(paymentDataRequest, checkoutStore.authToken, checkoutStore.accountId);
+                if (result.success) {
+                    this.googlePayCompleted.emit({
+                        success: true,
+                        paymentData: result.paymentData,
+                        paymentMethodId: result.paymentMethodId,
+                    });
+                }
+                else {
+                    this.googlePayCompleted.emit({
+                        success: false,
+                        error: result.error,
+                    });
+                    if (((_a = result.error) === null || _a === void 0 ? void 0 : _a.code) === "USER_CANCELLED") {
+                        this.googlePayCancelled.emit();
+                    }
+                    else {
+                        // Error will be conveyed via googlePayCompleted with success:false
+                    }
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : "Payment failed";
+                this.error = errorMessage;
+                this.googlePayCompleted.emit({
+                    success: false,
+                    error: errorMessage,
+                });
+            }
+            finally {
+                this.isProcessing = false;
+            }
+        };
+    }
+    watchConfigChange() {
+        this.initializeGooglePay();
+    }
+    componentWillLoad() {
+        this.googlePayService = new GooglePayService();
+    }
+    componentDidLoad() {
+        const unsub = onChange("paymentAmount", () => {
+            this.prefetchPaymentData();
+        });
+        if (typeof unsub === 'function')
+            this.unsubscribes.push(unsub);
+        const unsubCurrency = onChange("paymentCurrency", () => {
+            this.prefetchPaymentData();
+        });
+        if (typeof unsubCurrency === 'function')
+            this.unsubscribes.push(unsubCurrency);
+        const unsubDesc = onChange("paymentDescription", () => {
+            this.prefetchPaymentData();
+        });
+        if (typeof unsubDesc === 'function')
+            this.unsubscribes.push(unsubDesc);
+    }
+    disconnectedCallback() {
+        this.unsubscribes.forEach((fn) => {
+            try {
+                fn();
+            }
+            catch (_a) { }
+        });
+        this.unsubscribes = [];
+    }
+    /**
+     * Returns supported authentication methods when Google Pay is available.
+     */
+    async getSupportedAuthMethods() {
+        if (!this.isAvailable) {
+            return [];
+        }
+        return GooglePayHelpers.getDefaultAuthMethods();
+    }
+    /**
+     * Returns supported card networks when Google Pay is available.
+     */
+    async getSupportedNetworks() {
+        if (!this.isAvailable) {
+            return [];
+        }
+        return GooglePayHelpers.getDefaultSupportedNetworks();
+    }
+    /**
+     * Select Google Pay in the modular checkout parent.
+     */
+    async handleSelectionClick() {
+        checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.GOOGLE_PAY };
+    }
+    /**
+     * Returns whether Google Pay is both available and can make payments.
+     */
+    async isSupported() {
+        return this.isAvailable && this.canMakePayments;
+    }
+    /**
+     * Prefetch payment data for faster load times of the Google Pay sheet.
+     */
+    async prefetchPaymentData() {
+        if (!this.isAvailable || !this.canMakePayments) {
+            return;
+        }
+        const paymentDataRequest = this.createPaymentDataRequest();
+        this.googlePayService.prefetchPaymentData(paymentDataRequest);
+    }
+    async initializeGooglePay() {
+        try {
+            this.isLoading = true;
+            this.error = null;
+            if (!checkoutStore.paymentAmount) {
+                this.error = "Missing required Google Pay configuration";
+                this.isLoading = false;
+                return;
+            }
+            const googlePayConfig = {
+                environment: this.environment,
+                merchantId: this.merchantId,
+                merchantName: this.merchantName,
+                buttonType: this.buttonType,
+                buttonStyle: this.buttonStyle,
+                buttonSizeMode: this.buttonSizeMode,
+            };
+            this.googlePayService.initialize(googlePayConfig);
+            this.isAvailable = this.googlePayService.isAvailable();
+            if (!this.isAvailable) {
+                this.error = "Google Pay is not supported on this device";
+                this.isLoading = false;
+                return;
+            }
+            this.canMakePayments = await this.googlePayService.canMakePayments();
+            if (!this.canMakePayments) {
+                this.error = "Google Pay is not available for payments";
+                this.isLoading = false;
+                return;
+            }
+            const paymentDataRequest = this.createPaymentDataRequest();
+            this.googlePayService.prefetchPaymentData(paymentDataRequest);
+        }
+        catch (error) {
+            this.error =
+                error instanceof Error
+                    ? error.message
+                    : "Failed to initialize Google Pay";
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    createPaymentDataRequest() {
+        return GooglePayService.createPaymentDataRequest(checkoutStore.paymentAmount, checkoutStore.paymentDescription, this.countryCode, checkoutStore.paymentCurrency, this.merchantName);
+    }
+    render() {
+        const showError = !this.isLoading && !!this.error;
+        const showDeviceUnavailable = !this.isLoading && !this.error && !this.isAvailable;
+        const showPaymentsUnavailable = !this.isLoading && !this.error && this.isAvailable && !this.canMakePayments;
+        const showButton = !this.isLoading && !this.error && this.isAvailable && this.canMakePayments;
+        return (h(StyledHost, { key: '1f0b34c9821cc3442d470ffe63abce283f81fa89' }, checkoutStore.checkoutLoaded && (h("script", { key: '0d5e5f405b50629e6dc80a545a06a4dafc341e64', async: true, src: 'https://pay.google.com/gp/p/js/pay.js', onLoad: () => {
+                this.initializeGooglePay();
+            } })), h("div", { key: '83a35cff20c0b1c4de521a845a6fb964c81dfcae', class: 'google-pay-container' }, h(GooglePaySkeleton, { key: '245833ba9f530d3e9e35373cd8b22dff00451561', isLoading: this.isLoading }), showError && (h("div", { key: 'e47b0aeffae5b749fe1da9b8bd00e2aafe9d6616', class: 'google-pay-error', role: 'alert', "data-testid": 'gp-error' }, h("span", { key: 'd1dd1d928868b0917be696deecac2db51a8b2356', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '132c4a4fe9f635752f2c831f9fac46bf44f9414c', class: 'error-message' }, this.error))), showDeviceUnavailable && (h("div", { key: 'c376807e7b7d4eecf739ce2b7665c18cd36b7d6c', class: 'google-pay-unavailable', "data-testid": 'gp-device-unavailable' }, h("span", { key: '515f96d8a7edae2654ca900d4c6bdc31c0569dba', class: 'unavailable-message' }, "Google Pay is not available on this device"))), showPaymentsUnavailable && (h("div", { key: '917571ced603e504034d155f1066b8a47ad7db5b', class: 'google-pay-unavailable', "data-testid": 'gp-payments-unavailable' }, h("span", { key: 'd5a25481c52b9c781e7602014d41502a37ef41fb', class: 'unavailable-message' }, "Google Pay is not available for payments"))), showButton && (h(GooglePayButton, { key: 'ac9f2d4cef0f9f5bab2042e327182edba310d6c8', "data-testid": 'gp-button', buttonType: this.buttonType, buttonStyle: this.buttonStyle, buttonSizeMode: this.buttonSizeMode, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleGooglePayClick }))), h("style", { key: 'ead06da7b7b599bd68829a95d2725339ec40f44d' }, `
+            .google-pay-container {
+              width: 100%;
+            }
+
+            .google-pay-error {
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              padding: 12px;
+              background: #fef2f2;
+              border: 1px solid #fecaca;
+              border-radius: 8px;
+              color: #dc2626;
+              font-size: 14px;
+            }
+
+            .google-pay-unavailable {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              padding: 12px;
+              background: #f9fafb;
+              border: 1px solid #e5e7eb;
+              border-radius: 8px;
+              color: #6b7280;
+              font-size: 14px;
+            }
+
+            .error-icon {
+              font-size: 16px;
+            }
+            
+          `)));
+    }
+    static get is() { return "justifi-google-pay"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "buttonSizeMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GooglePayButtonSizeMode",
+                    "resolved": "GooglePayButtonSizeMode.FILL | GooglePayButtonSizeMode.STATIC",
+                    "references": {
+                        "GooglePayButtonSizeMode": {
+                            "location": "import",
+                            "path": "../../../api/GooglePay",
+                            "id": "src/api/GooglePay.ts::GooglePayButtonSizeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-size-mode",
+                "defaultValue": "GooglePayButtonSizeMode.FILL"
+            },
+            "buttonStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GooglePayButtonStyle",
+                    "resolved": "GooglePayButtonStyle.BLACK | GooglePayButtonStyle.WHITE",
+                    "references": {
+                        "GooglePayButtonStyle": {
+                            "location": "import",
+                            "path": "../../../api/GooglePay",
+                            "id": "src/api/GooglePay.ts::GooglePayButtonStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-style",
+                "defaultValue": "GooglePayButtonStyle.BLACK"
+            },
+            "buttonType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GooglePayButtonType",
+                    "resolved": "GooglePayButtonType.BOOK | GooglePayButtonType.BUY | GooglePayButtonType.CHECKOUT | GooglePayButtonType.DONATE | GooglePayButtonType.ORDER | GooglePayButtonType.PAY | GooglePayButtonType.PLAIN | GooglePayButtonType.SUBSCRIBE",
+                    "references": {
+                        "GooglePayButtonType": {
+                            "location": "import",
+                            "path": "../../../api/GooglePay",
+                            "id": "src/api/GooglePay.ts::GooglePayButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-type",
+                "defaultValue": "GooglePayButtonType.PLAIN"
+            },
+            "countryCode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country-code",
+                "defaultValue": "\"US\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "environment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GooglePayEnvironment",
+                    "resolved": "GooglePayEnvironment.PRODUCTION | GooglePayEnvironment.TEST",
+                    "references": {
+                        "GooglePayEnvironment": {
+                            "location": "import",
+                            "path": "../../../api/GooglePay",
+                            "id": "src/api/GooglePay.ts::GooglePayEnvironment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "environment",
+                "defaultValue": "GooglePayEnvironment.PRODUCTION"
+            },
+            "merchantId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "merchant-id",
+                "defaultValue": "\"gateway:justifi\""
+            },
+            "merchantName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "merchant-name",
+                "defaultValue": "\"justifi\""
+            },
+            "showSkeleton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-skeleton",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "canMakePayments": {},
+            "error": {},
+            "isAvailable": {},
+            "isLoading": {},
+            "isProcessing": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "googlePayCancelled",
+                "name": "googlePayCancelled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "googlePayCompleted",
+                "name": "googlePayCompleted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when Google Pay flow completes. On failure, `success=false` and `error` is populated."
+                },
+                "complexType": {
+                    "original": "{\n    success: boolean;\n    paymentData?: IGooglePayPaymentData;\n    paymentMethodId?: string;\n    error?: IGooglePayError | string;\n  }",
+                    "resolved": "{ success: boolean; paymentData?: IGooglePayPaymentData; paymentMethodId?: string; error?: string | IGooglePayError; }",
+                    "references": {
+                        "IGooglePayPaymentData": {
+                            "location": "import",
+                            "path": "../../../api/GooglePay",
+                            "id": "src/api/GooglePay.ts::IGooglePayPaymentData"
+                        },
+                        "IGooglePayError": {
+                            "location": "import",
+                            "path": "../../../api/GooglePay",
+                            "id": "src/api/GooglePay.ts::IGooglePayError"
+                        }
+                    }
+                }
+            }, {
+                "method": "googlePayStarted",
+                "name": "googlePayStarted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getSupportedAuthMethods": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "Returns supported authentication methods when Google Pay is available.",
+                    "tags": []
+                }
+            },
+            "getSupportedNetworks": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "Returns supported card networks when Google Pay is available.",
+                    "tags": []
+                }
+            },
+            "handleSelectionClick": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Select Google Pay in the modular checkout parent.",
+                    "tags": []
+                }
+            },
+            "isSupported": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether Google Pay is both available and can make payments.",
+                    "tags": []
+                }
+            },
+            "prefetchPaymentData": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Prefetch payment data for faster load times of the Google Pay sheet.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "merchantId",
+                "methodName": "watchConfigChange"
+            }, {
+                "propName": "environment",
+                "methodName": "watchConfigChange"
+            }];
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/payment-method-option.js

@@ -3,7 +3,7 @@ import { radioListItem } from "../../../styles/parts";
 import { StyledHost } from "../../../ui-components";
 export class PaymentMethodOption {
     render() {
-        return (h(StyledHost, { key: '8885a071427ab2d9e6ae371f7706ada2e4f5e5bc', class: "payment-method" }, h("div", { key: '1ccfb0f7ffa2f357117e749f6a80c203406718b5', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: '785ee47041948799fedd4a49ce8982db04002f89', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+        return (h(StyledHost, { key: 'def03655a2fec491cdcf915e86ce076fbce3fe2c', class: "payment-method" }, h("div", { key: '774b1eddeb552374158a085152d78f03345a56a0', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: '24dbc2f35760401d64eeb252b178ede3fb0631fe', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
     }
     static get is() { return "payment-method-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modular-checkout/sub-components/summary.js

@@ -5,7 +5,7 @@ import { checkoutStore } from "../../../store/checkout.store";
 import { StyledHost } from "../../../ui-components";
 export class Summary {
     render() {
-        return (h(StyledHost, { key: 'fd2c61dcafdc800d0064c19d29c6e007aed5adb5' }, h("section", { key: 'f2abef1233f3ccad3982d10c61ec5765e13e27a5' }, h("div", { key: '713d66ef6f7e2fc73135e765069baba6df976f52' }, h("div", { key: 'b8dd28f257948aa317366fe3ea6d2bc4911ef164', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: '675676b40de7dc27d07bfafc0eee77eb855a3d26' }, h("span", { key: 'cbd47994d9c3f1518741a298de3f5d62a0ad5313', part: text }, "Total"), "\u00A0", h("span", { key: '614748853f666f1b072d4fa9b14ee15ef5717112', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
+        return (h(StyledHost, { key: '38b0a855a7ad68b4c979d045a41efa20937cf476' }, h("section", { key: 'bbe4a0d26a95b0abd108370070fb861311724df8' }, h("div", { key: 'f322ecda85700c1e232b3f620b672f4eef103e97' }, h("div", { key: 'e59c6b19e0f27f7ab99380ead3f734a7e45cc1f1', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: '2fae7125889051d87571d9fb7c42ad3646e3ce07' }, h("span", { key: '757941148dccea14941f6216f90af8721fbe6cb9', part: text }, "Total"), "\u00A0", h("span", { key: 'ee50f026f64df4f73e0f6b087470a2154f4d0b4b', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
     }
     static get is() { return "justifi-checkout-summary"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/order-terminals/order-terminals.js

@@ -126,7 +126,7 @@ export class OrderTerminals {
         return (h("div", { class: "mt-3" }, h("div", { class: "text-end" }, "Order limit: ", this.orderLimit), h("div", { class: "d-flex justify-content-end mt-3" }, h("button", { class: "btn btn-primary submit-btn", onClick: this.submitOrder.bind(this), disabled: this.order.totalQuantity === 0 || this.submitting, part: buttonPrimary }, this.submitting ? 'Submitting...' : this.submitButtonText))));
     }
     render() {
-        return (h(StyledHost, { key: 'f9c515ea3cf3dd616d894cef2cc64789663608e8' }, h("div", { key: '6b3d49555fe21563c251896300d313bed336f9fd', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
+        return (h(StyledHost, { key: 'aa60b46b6f455a6e925a835f1b558c88966b2a90' }, h("div", { key: '33361446b5b2848a0d7d4af36ff54a3be76a5779', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
     }
     static get is() { return "justifi-order-terminals"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/order-terminals/terminal-quantity-selector/terminal-quantity-selector.js

@@ -18,7 +18,7 @@ export class TerminalQuantitySelector {
         };
     }
     render() {
-        return (h("div", { key: 'e7a0bf077aca5a2ff095caf70457a5353995998e', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: '3ad7ac7493b73da04b071756fd4ad38be0afae9e', class: "d-flex gap-3" }, h("div", { key: '568ed695946d70b84309772cbdb7b3647d227208', class: "d-flex align-items-center" }, h("img", { key: '1b93058757c815f862ab0cb2640b7c2eb7bc216f', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '014671ad4644fdd1cb92f07ca0c642a6138033ad', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: '5d1bd75fb2c730dee13979d1811bdac2ced8ea6a', class: "row" }, h("div", { key: '0dcc849ccfade11b1421a3c04b845b8d60f6061f', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '5e93951b101ea98e55b232b798d94de226146ff2', helpText: this.description })), h("div", { key: '4df172c04c7d8d7d7de5dda392824d3af005f60d', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '0e449f9467334d2470f835ec72f3e28f1dfc835d', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: 'ca1947fcb27d320063a682220f7c592361d21c02', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: 'f2119205d7ad524730ddf429083dc65b86d46251', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
+        return (h("div", { key: '97a2cdecf25e0a8a53b9d174eca5292769dc97bf', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: 'db71faf86a5e5d98fa143ecfafcfd7e1dd9e8f3d', class: "d-flex gap-3" }, h("div", { key: 'efe24d41d83d5b14c7787d2b06d6d3609782ef93', class: "d-flex align-items-center" }, h("img", { key: '89a439a1e1e3403a426c8e332aa0a730d5edc388', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: 'a1222547e632526b51c11a10060b2b94e5ee639b', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: '69739f6543cfa8bc2379a8e5af56f8ecc700dcb1', class: "row" }, h("div", { key: 'e818b1b291c077366a6232c40ecf0d0a71cd9ba8', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '8c036e4d31940065825aac9af9110bdcf32d5e0c', helpText: this.description })), h("div", { key: 'b9d3301e3eb2421ea0a19b57ec47e0699a36e68b', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '5d476f607ef2ae79ba406ab9415055aa26da1d2e', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '6931fcc7bbe5e57bc44d8e1582896c2d3e676a7b', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: 'b7d25687f5faf10bbeac701f70fe7078f5c3b71b', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
     }
     static get is() { return "terminal-quantity-selector"; }
     static get properties() {