@justifi/webcomponents 6.4.3 → 6.5.0-rc.1

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.TEST;
+        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: 'f4cf31bbc6ea32eab1f2b09de9074fa10afce596' }, checkoutStore.checkoutLoaded && (h("script", { key: '2a425b9181cacdcb9dfcfcb42f71ea3c95d8f9c2', async: true, src: 'https://pay.google.com/gp/p/js/pay.js', onLoad: () => {
+                this.initializeGooglePay();
+            } })), h("div", { key: 'c64ef59f1db3ded1ba50088283a893a71125b01d', class: 'google-pay-container' }, h(GooglePaySkeleton, { key: '26ee48338d84dca3f6f96b9eef1efd5044de2717', isLoading: this.isLoading }), showError && (h("div", { key: 'bd9b26a2c42a9a9635c5aec77fee4a8b54a45aad', class: 'google-pay-error', role: 'alert', "data-testid": 'gp-error' }, h("span", { key: '4ccddf69edae7f1f9bf65ad243e01284d39621e1', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '7c6adf975cdfc62126feb784ba07081eef3c8c2a', class: 'error-message' }, this.error))), showDeviceUnavailable && (h("div", { key: 'c5a390895ae1d0490a2666d6632895fbb5b62c47', class: 'google-pay-unavailable', "data-testid": 'gp-device-unavailable' }, h("span", { key: 'cd0e1b12be794f3e4d6a6efda7a94827b602caa6', class: 'unavailable-message' }, "Google Pay is not available on this device"))), showPaymentsUnavailable && (h("div", { key: '4bd15c7b5a140f3632241b669008c789e847b815', class: 'google-pay-unavailable', "data-testid": 'gp-payments-unavailable' }, h("span", { key: 'b87029a460e53cb10dfe8321afae844e93c0b48d', class: 'unavailable-message' }, "Google Pay is not available for payments"))), showButton && (h(GooglePayButton, { key: '84f36f038b1bf8f472f4eccdf519f1cf4fd1ca5a', "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: '56cf24d22755a83ea556406cd438a868b61da3f4' }, `
+            .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.TEST"
+            },
+            "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: '14d6ac8af5445b9ac19b860d124a607fba0bc962', class: "payment-method" }, h("div", { key: '5d046e75298cf90ad4a9377f1796b192b26cac28', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'c70540030eb38833b854ca55b3b2f9c42fa2cb05', 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: '3ebaf90f9085614d44043d9b5ba7de3f926bf6f1' }, h("section", { key: '888ea6f17ece8e78b7ddf9302be5b1b355cd54c6' }, h("div", { key: 'bb7db155a31ceb9e824c5290b8fb8d8713622bdd' }, h("div", { key: 'dc954f18e824dabfb09fc727aeb87685020e2d1e', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: 'e7f6b12c142655fc967bd6a37e00193b9f743f84' }, h("span", { key: '25996f66626d428385422d72f5e2bba1a8301628', part: text }, "Total"), "\u00A0", h("span", { key: '958bd1242ac23e13e66b73563d2c6f73499d2574', 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: 'a1150bcd6c262e867e396e4ad2fa3d76cd0f1667' }, h("div", { key: '23ae303b22f1999b29a76a5f55652f0c111057c6', 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: '92efdff96f60d512cb55ab42bf58c147ad401048', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: 'c8e0f4b183edbad94d156ab0f5d6541410a3c0e7', class: "d-flex gap-3" }, h("div", { key: '1dd62bb5e2fbb3569fbd946a328468354530d103', class: "d-flex align-items-center" }, h("img", { key: '0f59bb5d35a7f00f216732a2e72e895b6fa53285', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '83ae22d90dfa5153210021ce2bd755ab645a9ea1', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: 'bc28e1f2d18378e6d21a7f3101e62acda6a1265f', class: "row" }, h("div", { key: 'f6700b615935ec7331a9672267e11a876780f255', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: 'deb77216bb14a69cefbec0365ab6828229566b69', helpText: this.description })), h("div", { key: '5a7ee6f8e67673d5c8062fdfcb5db99fb3389e6c', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '4ce40da430bff61ab70970c06b987a336494e26c', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '8e75894d5b0df2b283758841a68b65402403aebf', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: 'acaf3f3688e37ffaf41eb31d1fec7e01c3bc319f', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
     }
     static get is() { return "terminal-quantity-selector"; }
     static get properties() {