@zonos/elements 1.3.261 → 1.3.263

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

@@ -41,7 +41,7 @@ import { sendLoadCheckoutFacadeLog } from "../../utils/logging/sendLoadCheckoutF
 import { sendLoadNativeCheckoutLog } from "../../utils/logging/sendLoadNativeCheckoutLog";
 import { mergeConfig } from "../../utils/mergeConfig";
 import { styles } from "../../utils/styles";
-import { submitGtag } from "../../utils/submitGtag";
+import { submitAnalytics } from "../../utils/submitAnalytics";
 import { validateCheckoutSession } from "../../utils/validateCheckoutSession";
 import { filterExpiredTests } from "../../utils/varianceTest/filterExpiredTests";
 import { getSelectedTestVariant } from "../../utils/varianceTest/getSelectedTestVariant";
@@ -504,7 +504,7 @@ export class ZonosCheckout {
         }
         // Close the confirm dialog
         this.confirmDialogOpen = false;
-        submitGtag({
+        submitAnalytics({
             event: 'zonos-checkout-close',
             metadata: {
                 checkoutSessionId: storageStore.checkoutSessionId,
@@ -831,7 +831,7 @@ export class ZonosCheckout {
                         isPreview: this.preview,
                         sessionTimeout: CHECKOUT_SESSION_TIMEOUT,
                     });
-                    submitGtag({
+                    submitAnalytics({
                         event: 'zonos-checkout-start',
                         metadata: {
                             checkoutSessionId: storageStore.checkoutSessionId,
@@ -1230,7 +1230,7 @@ export class ZonosCheckout {
     async handleCustomerInfoContinue() {
         var _a, _b, _c, _d;
         // submit google tag when the form is complete
-        submitGtag({
+        submitAnalytics({
             event: 'zonos-checkout-customer-info',
             metadata: {
                 checkoutSessionId: storageStore.checkoutSessionId,
@@ -1404,7 +1404,7 @@ export class ZonosCheckout {
             }
             catch (err) {
                 logError(err);
-                submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-payment-fail',
                     metadata: {
                         checkoutSessionId: storageStore.checkoutSessionId,
@@ -1423,7 +1423,7 @@ export class ZonosCheckout {
         }
         catch (err) {
             logError(err);
-            submitGtag({
+            submitAnalytics({
                 event: 'zonos-checkout-payment-fail',
                 metadata: {
                     checkoutSessionId: storageStore.checkoutSessionId,

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.css

@@ -99,4 +99,11 @@
 }
 :host .zonos--group-btn zonos-button {
   width: 100%;
+}
+
+:host(.mobile.mobile) {
+  overscroll-behavior: auto;
+}
+:host(.mobile.mobile) .zonos--group {
+  overscroll-behavior: auto;
 }

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.js

@@ -6,6 +6,7 @@ import { storageStore } from "../../../store/storageStore";
 import { translate } from "../../../store/translationStore";
 import { getZonosStoreTheme, zonosStore, zonosStoreOnChange, } from "../../../store/zonosStore";
 import { updateCheckoutSessionAttributes } from "../../../utils/api/updateCheckoutSessionAttributes";
+import { classes } from "../../../utils/classes";
 import { containsNonLatinChars } from "../../../utils/containsNonLatinChars";
 import { extractName } from "../../../utils/extractName";
 import { log } from "../../../utils/logging/log";
@@ -503,7 +504,10 @@ export class ZonosCustomerInfo {
         const defaultEmail = ((_b = this.defaultAddress.find(Boolean)) === null || _b === void 0 ? void 0 : _b.email) ||
             ((_e = (_d = (_c = stripeStore.customerProfile) === null || _c === void 0 ? void 0 : _c.locations) === null || _d === void 0 ? void 0 : _d.find(Boolean)) === null || _e === void 0 ? void 0 : _e.email) ||
             ((_f = stripeStore.customerProfile) === null || _f === void 0 ? void 0 : _f.email);
-        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: defaultEmail, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), this.renderAddressComponent('shipping'), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        return (h(Host, { class: classes([
+                'zonos--customer-info zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: defaultEmail, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), this.renderAddressComponent('shipping'), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 stripeStore.stripeShippingSameAsBilling = e.detail;
             } }), h("zonos-collapse", { collapsed: !showBilling }, this.renderAddressComponent('billing')), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.css

@@ -132,4 +132,11 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
+}
+
+:host(.mobile.mobile) {
+  overscroll-behavior: auto;
+}
+:host(.mobile.mobile) .zonos--group {
+  overscroll-behavior: auto;
 }

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js

@@ -8,7 +8,7 @@ import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
 import { sortServiceLevelOptionsByAmount } from "../../../utils/checkout/sortServiceLevelOptionsByAmount";
 import { classes } from "../../../utils/classes";
-import { submitGtag } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
 export class ZonosShipping {
@@ -81,7 +81,7 @@ export class ZonosShipping {
                 return;
             }
             // submit google tag when the form is complete
-            submitGtag({
+            submitAnalytics({
                 event: 'zonos-checkout-shipping-info',
                 metadata: {
                     checkoutSessionId: storageStore.checkoutSessionId,
@@ -237,7 +237,10 @@ export class ZonosShipping {
                     this.collapsedDAPOptions = !this.collapsedDAPOptions;
                 } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { isMobile: this.isMobile, items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod })))));
         };
-        return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !this.serviceLevelsAll.length ? (h("zonos-banner", { bannerTitle: cartStore.customQuotingError
+        return (h(Host, { class: classes([
+                'zonos--shipping zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !this.serviceLevelsAll.length ? (h("zonos-banner", { bannerTitle: cartStore.customQuotingError
                 ? cartStore.customQuotingError
                 : translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), class: "zonos--shipping-method-error", intent: "error" })) : (h("div", { class: "zonos--shipping-options-wrapper" }, renderServiceLevels())), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode

package/dist/collection/components/checkout/zonos-collect/zonos-collect-finish/zonos-collect-finish.js

@@ -12,7 +12,7 @@ import { getBorderRadius } from "../../../utils/getBorderRadius";
 import { handleFetch } from "../../../utils/handleFetch";
 import { allLogs, log } from "../../../utils/logging/log";
 import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
-import { submitGtag } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import RemoveIcon from "./assets/RemoveIcon.svg";
 /* Need to use relative import because inline-svg-stencil couldn't resolve absolute path */
@@ -146,7 +146,7 @@ export class ZonosCollectFinish {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    submitGtag({ event: 'zonos-checkout-payment-fail' });
+                    submitAnalytics({ event: 'zonos-checkout-payment-fail' });
                     void sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -159,7 +159,7 @@ export class ZonosCollectFinish {
                     });
                 }
                 else {
-                    submitGtag({ event: 'zonos-checkout-success' });
+                    submitAnalytics({ event: 'zonos-checkout-success' });
                     const checkoutSessionId = storageStore.checkoutSessionId;
                     void trackConversionEvent({
                         checkoutSessionId,
@@ -204,7 +204,7 @@ export class ZonosCollectFinish {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypalStore.orderIdCreated) {
-                submitGtag({ event: 'zonos-checkout-success' });
+                submitAnalytics({ event: 'zonos-checkout-success' });
                 const checkoutSessionId = storageStore.checkoutSessionId;
                 void trackConversionEvent({
                     checkoutSessionId,
@@ -260,11 +260,11 @@ export class ZonosCollectFinish {
     }
     render() {
         const cartId = window.Zonos.cartId;
-        return (h(Host, { key: 'ece5aa1dae1e8e7bb99c0904adeaf6541fbf3ea6', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '89331d23e3b6b57ce708f091fb4c9cdaae84f838', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: 'd48c2384fb55b7b318143f933775c35e29abbe38', class: "zonos--finish-details" }, h("div", { key: '85e03a288ee29bc1f664d03b9c99a164acc51b92', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '7fcd228d5144d4f523d15870cdf18491278f0ee6', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: '219365d86b8aef904adffb1fab5e045db174a724', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: '4b2b41bdf35eb2d79b32fa5f7538798e3fd028f5', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '52431496f81706a720406843309646b4fd9b2413', class: "zonos--button-container" }, h("zonos-button", { key: '4ccdbba8da9591c6207a472df29515fec8c0c56f', onClick: () => {
+            } }, !this.isLoading && (h("div", { key: '7539e73d3e88c6a486ded338d35ec55398a1f3f4', class: "zonos--finish-details" }, h("div", { key: '4a61f515eff3cf0ce77fc88526424c1e63e5d66a', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '6a44ceadf42398e95b3bef73888583cca2d4d076', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: 'aa83de37eaaa4e8a349d6752f11d933584d56c81', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: '26ff76617b31f1726bdc3b7d024a29841692f7b9', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '721ce7b4561f9d82c2a251ac3f595e36567aaac7', class: "zonos--button-container" }, h("zonos-button", { key: '77db63afae505f5472f089e4e5ed9e9c52e48157', onClick: () => {
                 window.open(this.getReceiptUrl({ cartId }), '_blank');
             }, size: "lg", variant: "primary" }, translate('View receipt')))))))));
     }

package/dist/collection/components/checkout/zonos-collect/zonos-collect-payment/zonos-collect-payment.js

@@ -10,7 +10,7 @@ import { getIsStagingMode } from "../../../utils/checkout/getIsStagingMode";
 import { getIsTestMode } from "../../../utils/checkout/getIsTestMode";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
 import { log } from "../../../utils/logging/log";
-import { submitGtag } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import CheckmarkLineIcon from "./assets/CheckmarkLineIcon.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
@@ -64,7 +64,7 @@ export class ZonosCollectPayment {
             }
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag({ event: 'zonos-checkout-payment-info' });
+            submitAnalytics({ event: 'zonos-checkout-payment-info' });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice-finish/zonos-invoice-finish.js

@@ -12,7 +12,7 @@ import { getBorderRadius } from "../../../utils/getBorderRadius";
 import { handleFetch } from "../../../utils/handleFetch";
 import { allLogs, log } from "../../../utils/logging/log";
 import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
-import { submitGtag } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import RemoveIcon from "./assets/RemoveIcon.svg";
 /* Need to use relative import because inline-svg-stencil couldn't resolve absolute path */
@@ -146,7 +146,7 @@ export class ZonosInvoiceFinish {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    submitGtag({ event: 'zonos-checkout-payment-fail' });
+                    submitAnalytics({ event: 'zonos-checkout-payment-fail' });
                     void sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -159,7 +159,7 @@ export class ZonosInvoiceFinish {
                     });
                 }
                 else {
-                    submitGtag({ event: 'zonos-checkout-success' });
+                    submitAnalytics({ event: 'zonos-checkout-success' });
                     const checkoutSessionId = storageStore.checkoutSessionId;
                     void trackConversionEvent({
                         checkoutSessionId,
@@ -204,7 +204,7 @@ export class ZonosInvoiceFinish {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypalStore.orderIdCreated) {
-                submitGtag({ event: 'zonos-checkout-success' });
+                submitAnalytics({ event: 'zonos-checkout-success' });
                 const checkoutSessionId = storageStore.checkoutSessionId;
                 void trackConversionEvent({
                     checkoutSessionId,
@@ -260,11 +260,11 @@ export class ZonosInvoiceFinish {
     }
     render() {
         const cartId = window.Zonos.cartId;
-        return (h(Host, { key: '4b4f83358419134c8455c4407f91adf8c1ff37ca', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '6c0363334a9e6602b93e83a0dfeb733285db7683', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: 'fab4606540bf759d9241432f58580b10f1c12b03', class: "zonos--finish-details" }, h("div", { key: 'b619eee9fda1e183b4d761f3576ae28cee2a9619', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '30fa51dba81331c9aa7ff4f64c274982d36d8a23', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: 'f10389b65e7910c7b3bd1e0d576afde74bc28e27', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: '5033c51a90cdbccb8b0a333f7b63f3383b70c264', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '83350cb42d4165ec874a8b18dc29e851ca4ae4c8', class: "zonos--button-container" }, h("zonos-button", { key: 'fa05f016f520f65660270c906b7a5940b808cb4b', onClick: () => {
+            } }, !this.isLoading && (h("div", { key: '299a9afc37f5e1bbe828f2b68569a686b82baff1', class: "zonos--finish-details" }, h("div", { key: '24a827b96c4a74066b7701c70f6cdf980ff060f5', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '74bfa9e0126ea8b0a693fdc2e034cdd6ef352dcb', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: '5cc0089225fac166cfa13cc11e72efeb34ad8567', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: 'fb101b1058adeafe38a03d2a915b6b7f80c44061', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '2ecc8d45967ccd720f0ec4d532aa266ac42acc14', class: "zonos--button-container" }, h("zonos-button", { key: '3f04711341f273a767d5109274f92eec424b1675', onClick: () => {
                 window.open(this.getReceiptUrl({ cartId }), '_blank');
             }, size: "lg", variant: "primary" }, translate('View receipt')))))))));
     }

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice-payment/zonos-invoice-payment.js

@@ -10,7 +10,7 @@ import { getIsStagingMode } from "../../../utils/checkout/getIsStagingMode";
 import { getIsTestMode } from "../../../utils/checkout/getIsTestMode";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
 import { log } from "../../../utils/logging/log";
-import { submitGtag } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import CheckmarkLineIcon from "./assets/CheckmarkLineIcon.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
@@ -64,7 +64,7 @@ export class ZonosInvoicePayment {
             }
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag({ event: 'zonos-checkout-payment-info' });
+            submitAnalytics({ event: 'zonos-checkout-payment-info' });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {

package/dist/collection/components/hello/zonos-hello/zonos-hello.css

@@ -33,6 +33,15 @@
 
 :host {
   display: inline-block;
+  --zonos-elements-hello-widget-size: 18px;
+  --zonos-elements-hello-bubble-padding: max(
+    6px,
+    calc(var(--zonos-elements-hello-widget-size) * 0.22)
+  );
+  --zonos-elements-hello-bubble-size: calc(
+    var(--zonos-elements-hello-widget-size) +
+      var(--zonos-elements-hello-bubble-padding) * 2 + 2px
+  );
 }
 :host .zonos--hello-wrapper {
   position: relative;
@@ -75,14 +84,16 @@
 }
 :host .zonos--hello-widget {
   transition: all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);
-  padding: 6px;
-  border-radius: 30px;
+  padding: var(--zonos-elements-hello-bubble-padding);
+  border-radius: 9999px;
   background: var(--zonos-elements-page-background);
   font-size: var(--zonos-elements-font-size-s);
   border: var(--zonos-elements-border);
   display: flex;
   align-items: center;
+  justify-content: center;
   cursor: pointer;
+  box-sizing: border-box;
   height: fit-content;
   width: fit-content;
   position: relative;
@@ -100,10 +111,10 @@
   background: var(--zonos-elements-page-background);
   display: flex;
   align-items: center;
-  border-top-left-radius: 30px;
-  border-bottom-left-radius: 30px;
+  border-top-left-radius: calc(var(--zonos-elements-hello-bubble-size) / 2);
+  border-bottom-left-radius: calc(var(--zonos-elements-hello-bubble-size) / 2);
   left: 0;
-  transform: translateX(calc(-100% + 16px));
+  transform: translateX(calc(-100% + var(--zonos-elements-hello-bubble-size) / 2));
   width: fit-content;
   border-top: var(--zonos-elements-border);
   border-bottom: var(--zonos-elements-border);
@@ -126,28 +137,23 @@
 }
 :host .zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
   max-width: 100vw;
-  padding: 0 6px;
-  padding-right: 16px;
+  padding: 0 calc(var(--zonos-elements-hello-bubble-size) / 2);
   border: var(--zonos-elements-border);
 }
 :host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left) > .zonos--hello-message {
   border-right: none;
 }
 :host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
-  border-left: 0;
-}
-:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
-  padding-left: 16px;
-  padding-right: 6px;
+  padding-left: calc(var(--zonos-elements-hello-bubble-size) / 2);
   border-left: none;
 }
 :host .zonos--hello-widget.zonos--hello-widget-animate-from-left > .zonos--hello-message {
   order: 1;
-  transform: translateX(calc(100% - 16px));
+  transform: translateX(calc(100% - var(--zonos-elements-hello-bubble-size) / 2));
   right: 0;
   left: auto;
-  border-top-right-radius: 30px;
-  border-bottom-right-radius: 30px;
+  border-top-right-radius: calc(var(--zonos-elements-hello-bubble-size) / 2);
+  border-bottom-right-radius: calc(var(--zonos-elements-hello-bubble-size) / 2);
 }
 :host .zonos--hello-widget .zonos--hello-country-flag-wrapper {
   display: flex;
@@ -162,6 +168,8 @@
   box-shadow: var(--zonos-elements-v3-shadow-medium);
   z-index: 10;
   justify-self: center;
+  height: var(--zonos-elements-hello-widget-size);
+  width: var(--zonos-elements-hello-widget-size);
 }
 :host .zonos--hello-widget.zonos--hello-widget-float {
   position: fixed;

package/dist/collection/components/hello/zonos-hello/zonos-hello.js

@@ -11,6 +11,7 @@ import { currencyFormat } from "../../utils/hello/currencyConversion/currencyFor
 import { detectItemRestrictions } from "../../utils/hello/detectItemRestrictions";
 import { getCurrentHelloLocalePage } from "../../utils/hello/getCurrentHelloLocalePage";
 import { getHasMoreSpaceOnRight } from "../../utils/hello/getHasMoreSpaceOnRight";
+import { getHelloWidgetSize } from "../../utils/hello/getHelloWidgetSize";
 import { getProductsOnPage } from "../../utils/hello/getProductsOnPage";
 import { getZCountryUrlParam } from "../../utils/hello/getZCountryUrlParam";
 import { setZCountryUrlParam } from "../../utils/hello/setZCountryUrlParam";
@@ -351,7 +352,7 @@ export class ZonosHello {
     }
     getHelloLocation() {
         const mobileLocation = this.mobileLocationOverride || zonosStore.helloSettings.mobileLocation;
-        const desktopLocation = zonosStore.helloSettings.desktopLocation;
+        const desktopLocation = this.desktopLocationOverride || zonosStore.helloSettings.desktopLocation;
         const isMobileWindow = this.isMobile;
         switch (true) {
             // Mobile
@@ -369,19 +370,27 @@ export class ZonosHello {
             default:
             case !isMobileWindow: {
                 /**
-                 * Only float on desktop if there is no anchor specified and desktopLocation is set
-                 * This is to keep the same behavior as it is now (display at anchor if set on desktop, float on mobile).
-                 **/
-                const shouldFloat = !zonosStore.helloSettings.anchorElementSelector && !!desktopLocation;
+                 * Float on desktop when `desktopLocationOverride` is set (explicit
+                 * consumer request) OR when no anchor is specified and a
+                 * `desktopLocation` is configured in the store. With an anchor and no
+                 * override, the widget renders inline at the anchor.
+                 */
+                const shouldFloat = !!this.desktopLocationOverride ||
+                    (!zonosStore.helloSettings.anchorElementSelector &&
+                        !!desktopLocation);
+                // When a desktopLocation is set, derive the side deterministically
+                // from it so RIGHT positions resolve to `false` (not `undefined`).
+                // Spatial detection only runs as a fallback when no location is set
+                // (e.g. inline / anchored placement).
                 const isOnLeft = this.animateFromLeftOverride ||
-                    (desktopLocation === null || desktopLocation === void 0 ? void 0 : desktopLocation.includes('LEFT')) ||
-                    this.shouldAnimateLeftDesktop();
+                    (desktopLocation
+                        ? desktopLocation.includes('LEFT')
+                        : this.shouldAnimateLeftDesktop());
                 const isOnTop = desktopLocation === null || desktopLocation === void 0 ? void 0 : desktopLocation.includes('TOP');
                 return {
                     isMobileWindow,
                     isOnLeft,
                     isOnTop,
-                    // Only float if
                     shouldFloat,
                 };
             }
@@ -420,7 +429,8 @@ export class ZonosHello {
                 currencyCode: targetCurrency,
             });
         }
-        return (h(Host, { class: "zonos--hello zonos--elements", "data-theme": theme }, showHello && (h("div", { class: classes([
+        const widgetSize = getHelloWidgetSize(zonosStore.helloSettings.widgetSize);
+        return (h(Host, { class: "zonos--hello zonos--elements", "data-theme": theme, style: { '--zonos-elements-hello-widget-size': `${widgetSize}px` } }, showHello && (h("div", { class: classes([
                 'zonos--hello-wrapper',
                 shouldFloat && 'zonos--hello-widget-float',
             ]) }, h("button", { class: classes([
@@ -443,7 +453,7 @@ export class ZonosHello {
                     'zonos--hello-widget-left zonos--hello-widget-animate-from-left',
                 isOnTop && 'zonos--hello-widget-top',
                 shouldFloat && 'zonos--hello-widget-float',
-            ]), style: { height: this.showDialog ? 'fit-content' : '0px' } }, h("zonos-hello-dialog", { animateFromLeftOverride: this.animateFromLeftOverride, appearanceSettings: appearanceSettings, isOpen: this.showDialog, mobileLocationOverride: this.mobileLocationOverride, restrictedItems: restrictedItemsOnPage, setIsOpen: this.changeShowDialog }))))));
+            ]), style: { height: this.showDialog ? 'fit-content' : '0px' } }, h("zonos-hello-dialog", { animateFromLeftOverride: isOnLeft, appearanceSettings: appearanceSettings, isOpen: this.showDialog, mobileLocationOverride: this.mobileLocationOverride, restrictedItems: restrictedItemsOnPage, setIsOpen: this.changeShowDialog }))))));
     }
     static get is() { return "zonos-hello"; }
     static get encapsulation() { return "shadow"; }
@@ -487,6 +497,31 @@ export class ZonosHello {
                 "attribute": "mobile-location-override",
                 "reflect": false
             },
+            "desktopLocationOverride": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HelloDesktopLocation",
+                    "resolved": "\"BOTTOM_LEFT\" | \"BOTTOM_RIGHT\" | \"TOP_LEFT\" | \"TOP_RIGHT\" | undefined",
+                    "references": {
+                        "HelloDesktopLocation": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.internal.types",
+                            "id": "src/types/generated/graphql.internal.types.ts::HelloDesktopLocation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the configured desktop floating location. Takes precedence over\n`helloSettings.desktopLocation` and also drives the peek-message animation\ndirection, so consumers no longer need `animateFromLeftOverride` for\ndesktop positioning."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "desktop-location-override",
+                "reflect": false
+            },
             "animateFromLeftOverride": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js

@@ -324,18 +324,20 @@ export class ZonosHelloDialog {
         }
     }
     render() {
-        var _a;
+        var _a, _b;
         const { selectedCountryCode } = localizationStore;
         // Show additional information if selected country has tax id
         const additionalInformation = this.getAdditionalDutyTaxMessage();
-        const animateLeft = this.animateFromLeftOverride ||
-            (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));
+        // Honor an explicit boolean from the parent (computed from
+        // desktop/mobile location overrides) so dialog direction always matches
+        // the widget button. Fall back to spatial detection only when undefined.
+        const animateLeft = (_a = this.animateFromLeftOverride) !== null && _a !== void 0 ? _a : (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));
         const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
         const { customMessages } = localizationStore;
         const welcomeMessage = translate('Welcome to [storeName]', {
             storeName: zonosStore.organizationName,
         });
-        const defaultMessageStr = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
+        const defaultMessageStr = ((_b = customMessages.find(x => x.pageName === 'hello_default')) === null || _b === void 0 ? void 0 : _b.message) ||
             translate('Know about duties and taxes before you buy. Shop with confidence!');
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
@@ -345,25 +347,25 @@ export class ZonosHelloDialog {
         // If deminimis is undefined or null, assume it's $0
         const taxDeMinimisMessage = this.getTaxMessage();
         const inclusivePriceMessage = this.getInclusivePriceMessage();
-        return (h(Host, { key: 'f6e7f88e0ff05246bb9313f5a7572b74b538c513', class: "zonos--elements" }, h("div", { key: '8438913f6265d619d0e58714b3fb3c8a4ebe6201', class: classes([
+        return (h(Host, { key: 'af2f34c21db4c521efe77a61bb779790741effba', class: "zonos--elements" }, h("div", { key: '4544ff7c5773d8cfccd6e4d866a07ee50c912a06', class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: 'ac944a1672251941e3c31660172b73cc5ad8fc6e' }, h("div", { key: 'd615ab55edeb0db000166a72df09ee6f3f945d5b', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'f2526b46a1f4a94c1b43647d8ffb35d6c247f24e', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '2de560ae8b81bb97602abd72112b1d4b903b0ec6', spacing: 24 }, h("zonos-country-flag", { key: '4d0ea1596b825305ffff08f1991fdc8be49b52de', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '50c6b033195cffaa2b0dee4dbc4766e488237b59', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '8850a76a1a6faf8c18c6a0502fa8951ea823dec9', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '37f9bc0c4047564d01d977871f12c40dfadee286', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '0d3d262b8a0e4d11112e19fcc7271e9e38c64ef4', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '4ba3dd6d5cccda0350a47b5cf2d3dc1c74853d81' }, h("div", { key: 'd5d5990a0d66d5d8b871c595f6cc08ad6077fa79', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '51a79a23bd6ea5e632e12a73591a142a341ce4a1', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: 'a505bcd3b78b81811dcd60d16971ceeb4c1a3aa7', spacing: 24 }, h("zonos-country-flag", { key: 'b82428ef373bc174e00255e8e0491466cd0fc177', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '10d8e5a46961a02e7159ad57854835f115eb0d76', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '030655d2e3ae3bf770ace2b6bffe96b1423a8aee', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'ce954ae42f9fe90f49980d954522a2e30be23d5b', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '82de2ff11aaa0505737664757f698d9ddd199af1', spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
         }), (dutyDeMinimisMessage ||
             taxDeMinimisMessage ||
             inclusivePriceMessage ||
-            !!(additionalInformation === null || additionalInformation === void 0 ? void 0 : additionalInformation.length)) && (h("zonos-card", { key: 'cd82f35a21820876e0080c8402c93445210b45ca', spacing: "12px" }, h("zonos-v-stack", { key: 'c25d69802e048e3068c67931aed385cf95d5469c', spacing: 12 }, this.renderHelloMessage({
+            !!(additionalInformation === null || additionalInformation === void 0 ? void 0 : additionalInformation.length)) && (h("zonos-card", { key: 'b9134233fce6f248576b7b894b4be313aacdbf3f', spacing: "12px" }, h("zonos-v-stack", { key: 'e427aaf3dc1e4bba952511528aad5ff66a4950bb', spacing: 12 }, this.renderHelloMessage({
             dutyDeMinimisMessage,
             inclusivePriceMessage,
             taxDeMinimisMessage,
         }), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country icon", content: BagIcon }), h("zonos-text", { "aria-label": `Additional information for buying goods from selected country message`, innerHTML: info }))))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '9ae0e6deb5e29ce37f485f19b1ac1073fc7fe19f', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '96cd8a1c6c0bb29d4c1a9fe81bd8ed4a80449253' }, h("zonos-country-select", { key: '433ec94d70db0c5405048d497fb5aab766cc18e9', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'e32b3047ac04d4daf8adaa7238b61a7b1dbe8210' }, h("zonos-language-select", { key: '2a1ae723e0600bb3193de7d0a1438dc08269e95e', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country icon", content: BagIcon }), h("zonos-text", { "aria-label": `Additional information for buying goods from selected country message`, innerHTML: info }))))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '343956e04ee86fe6f9bcaa13f7e69c47d7d68c6e', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '99cd990b4df0ea4d5a8f1e81db99d23e6ebd3475' }, h("zonos-country-select", { key: 'd29ce0c79fb371c63b8b0630fd3d99892744179a', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '6a417d593d5644939f1ffbbbef3af6546e44b712' }, h("zonos-language-select", { key: '29c17d83f162a7237e9824d9f60c0cffdbdd1ae7', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/main/zonos-controller.js

@@ -143,7 +143,7 @@ export class ZonosController {
             }
             document.body.appendChild(scriptToInject);
         });
-        // Custom HTML may set window.Zonos.googleAnalyticId; trigger relay ping so parent configures GA
+        // Custom HTML may set window.Zonos.googleAnalyticId / window.Zonos.facebookPixelId; trigger relay ping so parent configures GA / FB Pixel
         ensureAnalyticsRelayPing();
     }
     async initGooglePlacesService(settings) {
@@ -331,7 +331,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '4355afb5d8b739bf114a898803287d948fa4539e', class: "zonos--elements" });
+        return h(Host, { key: 'd500743a0ed7dc7615e696aaf958216374e7c33b', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ import { isContrastColor } from "../../utils/isContrastColor";
 import { jsonParse } from "../../utils/jsonParse";
 import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
-import { submitGtag } from "../../utils/submitGtag";
+import { submitAnalytics } from "../../utils/submitAnalytics";
 import { validateCheckoutSession } from "../../utils/validateCheckoutSession";
 const { onChange: paypalStoreOnChange, reset: paypalStoreReset, state: paypalStore, } = createStore(() => ({
     intent: 'capture',
@@ -95,7 +95,7 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset stripe error message
                 stripeStore.hasPaymentError = false;
                 stripeStore.customErrorMessage = null;
-                submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-payment-fail',
                     metadata: {
                         checkoutSessionId,
@@ -160,7 +160,7 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset stripe error message
                 stripeStore.hasPaymentError = false;
                 stripeStore.customErrorMessage = null;
-                submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-payment-fail',
                     metadata: {
                         checkoutSessionId,
@@ -176,7 +176,7 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset paypal error banner
                 paypalStore.paypalErrorMessage = null;
                 // submit google tag when the form is complete
-                submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-payment-info',
                     metadata: {
                         checkoutSessionId,

package/dist/collection/components/store/zonosStore.js

@@ -82,6 +82,7 @@ const { dispose: zonosStoreDispose, onChange: zonosStoreOnChange, reset, state:
         productTitleElementSelector: '',
         restrictionBehavior: 'DISABLED',
         visibilityStatus: 'ENABLED',
+        widgetSize: null,
     },
     loadedConfig: false,
     onlineStoreSettings: {