@zonos/elements 1.3.289 → 1.3.291

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

@@ -67,19 +67,21 @@
 @media screen and (min-width: 769px) {
   :host .zonos--hello-wrapper .zonos--hello-dialog-wrapper.zonos--hello-widget-float {
     position: fixed;
-    bottom: 72px;
-    right: 32px;
-    width: auto;
-    height: auto;
-    z-index: 1001;
+    bottom: var(--zonos-elements-hello-float-inset-y, 72px);
+    right: var(--zonos-elements-hello-float-inset-x, 32px);
   }
   :host .zonos--hello-wrapper .zonos--hello-dialog-wrapper.zonos--hello-widget-float.zonos--hello-widget-left {
-    left: 32px;
+    left: var(--zonos-elements-hello-float-inset-x, 32px);
     right: auto;
   }
   :host .zonos--hello-wrapper .zonos--hello-dialog-wrapper.zonos--hello-widget-float.zonos--hello-widget-top {
     bottom: auto;
-    top: 32px;
+    top: var(--zonos-elements-hello-float-inset-y, 32px);
+  }
+  :host .zonos--hello-wrapper .zonos--hello-dialog-wrapper.zonos--hello-widget-float {
+    width: auto;
+    height: auto;
+    z-index: 1001;
   }
 }
 :host .zonos--hello-widget {
@@ -175,16 +177,16 @@
 }
 :host .zonos--hello-widget.zonos--hello-widget-float {
   position: fixed;
-  bottom: 72px;
-  right: 32px;
+  bottom: var(--zonos-elements-hello-float-inset-y, 72px);
+  right: var(--zonos-elements-hello-float-inset-x, 32px);
 }
 :host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-left {
-  left: 32px;
+  left: var(--zonos-elements-hello-float-inset-x, 32px);
   right: auto;
 }
 :host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-top {
   bottom: auto;
-  top: 32px;
+  top: var(--zonos-elements-hello-float-inset-y, 32px);
 }
 :host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-has-restrictions.zonos--hello-show-peek-message > .zonos--hello-message {
   border: none;
@@ -219,16 +221,16 @@
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float {
   position: fixed;
-  bottom: 72px;
-  right: 32px;
+  bottom: var(--zonos-elements-hello-float-inset-y, 72px);
+  right: var(--zonos-elements-hello-float-inset-x, 32px);
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-left {
-  left: 32px;
+  left: var(--zonos-elements-hello-float-inset-x, 32px);
   right: auto;
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-top {
   bottom: auto;
-  top: 32px;
+  top: var(--zonos-elements-hello-float-inset-y, 32px);
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-has-restrictions.zonos--hello-show-peek-message > .zonos--hello-message {
   border: none;

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

@@ -14,6 +14,7 @@ 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 { resolveHelloFloatPlacement } from "../../utils/hello/resolveHelloFloatPlacement";
 import { setZCountryUrlParam } from "../../utils/hello/setZCountryUrlParam";
 import { shouldShowHelloWidget } from "../../utils/hello/shouldShowHelloWidget";
 import { log } from "../../utils/logging/log";
@@ -224,6 +225,8 @@ export class ZonosHello {
         return localizationStore.helloCountryList;
     }
     componentWillLoad() {
+        // Set before first paint so mobile uses mobile placement, not desktop.
+        this.isMobile = window.innerWidth <= 768;
         const initInterval = setInterval(async () => {
             if (!this.helloRef) {
                 return;
@@ -309,50 +312,19 @@ export class ZonosHello {
         }
     }
     getHelloLocation() {
-        const mobileLocation = this.mobileLocationOverride || zonosStore.helloSettings.mobileLocation;
-        const desktopLocation = this.desktopLocationOverride || zonosStore.helloSettings.desktopLocation;
-        const isMobileWindow = this.isMobile;
-        switch (true) {
-            // Mobile
-            case isMobileWindow: {
-                const isOnLeft = this.animateFromLeftOverride || (mobileLocation === null || mobileLocation === void 0 ? void 0 : mobileLocation.includes('LEFT'));
-                const isOnTop = mobileLocation === null || mobileLocation === void 0 ? void 0 : mobileLocation.includes('TOP');
-                return {
-                    isMobileWindow,
-                    isOnLeft,
-                    isOnTop,
-                    shouldFloat: !!mobileLocation,
-                };
-            }
-            // Desktop
-            default:
-            case !isMobileWindow: {
-                /**
-                 * 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 ||
-                    (shouldFloat && desktopLocation
-                        ? desktopLocation.includes('LEFT')
-                        : this.shouldAnimateLeftDesktop());
-                const isOnTop = desktopLocation === null || desktopLocation === void 0 ? void 0 : desktopLocation.includes('TOP');
-                return {
-                    isMobileWindow,
-                    isOnLeft,
-                    isOnTop,
-                    shouldFloat,
-                };
-            }
-        }
+        // Enum @Prop `*LocationOverride` → component*; settings HelloPlacement object → settings*.
+        return resolveHelloFloatPlacement({
+            anchorElementSelector: zonosStore.helloSettings.anchorElementSelector,
+            animateFromLeftOverride: this.animateFromLeftOverride,
+            componentDesktopLocation: this.desktopLocationOverride,
+            componentMobileLocation: this.mobileLocationOverride,
+            desktopLocation: zonosStore.helloSettings.desktopLocation,
+            isMobileWindow: this.isMobile,
+            mobileLocation: zonosStore.helloSettings.mobileLocation,
+            settingsDesktopPlacement: zonosStore.helloSettings.desktopLocationOverride,
+            settingsMobilePlacement: zonosStore.helloSettings.mobileLocationOverride,
+            shouldAnimateLeftDesktop: () => Boolean(this.shouldAnimateLeftDesktop()),
+        });
     }
     handleAppearanceSettingsOverrideChange() {
         var _a;
@@ -372,7 +344,7 @@ export class ZonosHello {
             return null;
         }
         const { selectedCountryCode, targetCurrency } = localizationStore;
-        const { isOnLeft, isOnTop, shouldFloat } = this.getHelloLocation();
+        const { horizontalOffset, isOnLeft, isOnTop, shouldFloat, verticalOffset } = this.getHelloLocation();
         const appearanceSettings = mergeConfig(zonosStore.appearance, this.appearanceSettingsOverride || null);
         const { theme } = appearanceSettings;
         const restrictedItemsOnPage = (_b = this.allRestrictedItems) === null || _b === void 0 ? void 0 : _b.filter(product => this.productsOnPage.some(restriction => restriction.description === product.itemDescription));
@@ -388,7 +360,15 @@ export class ZonosHello {
             });
         }
         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([
+        const hostStyle = {
+            '--zonos-elements-hello-widget-size': `${widgetSize}px`,
+        };
+        if (horizontalOffset != null && verticalOffset != null) {
+            hostStyle['--zonos-elements-hello-float-inset-x'] =
+                `${horizontalOffset}px`;
+            hostStyle['--zonos-elements-hello-float-inset-y'] = `${verticalOffset}px`;
+        }
+        return (h(Host, { class: "zonos--hello zonos--elements", "data-theme": theme, style: hostStyle }, showHello && (h("div", { class: classes([
                 'zonos--hello-wrapper',
                 shouldFloat && 'zonos--hello-widget-float',
             ]) }, h("button", { class: classes([
@@ -445,11 +425,8 @@ export class ZonosHello {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Force mobile styling instead of media query and use the passed location value"
+                    "tags": [],
+                    "text": "Override the configured mobile floating location (enum). Takes precedence over\n`helloSettings.mobileLocationOverride` (HelloPlacement) and\n`helloSettings.mobileLocation`."
                 },
                 "getter": false,
                 "setter": false,
@@ -475,7 +452,7 @@ export class ZonosHello {
                 "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."
+                    "text": "Override the configured desktop floating location. Takes precedence over\n`helloSettings.desktopLocationOverride` (HelloPlacement) and\n`helloSettings.desktopLocation`, and also drives the peek-message animation\ndirection, so consumers no longer need `animateFromLeftOverride` for\ndesktop positioning."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/store/hello/localization.js

@@ -357,7 +357,6 @@ const localizationStoreUpdateSelectedLocale = (requestedLocale) => {
 };
 const initLocalizationStore = async () => {
     var _a;
-    migrateCountryOverrideStorage();
     const urlCountryAtLoad = getZCountryUrlParam();
     const storedCountryAtLoad = getCountryOverrideStorage();
     const shouldPrefetchGeo = !!storedCountryAtLoad && !urlCountryAtLoad;
@@ -420,6 +419,10 @@ const initLocalizationStore = async () => {
             newSelectedCountryCode: fallbackCountry,
         });
     }
+    // After reconcile + fallback: only then is selectedCountryCode the
+    // country Hello kept. Mirroring earlier (or without this match) can
+    // publish a discarded localStorage leftover into sessionStorage.
+    migrateCountryOverrideStorage(localizationStore.selectedCountryCode);
     if (localizationStore.selectedCountryCode) {
         syncSelectedCountryToPage(localizationStore.selectedCountryCode);
     }

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

@@ -71,9 +71,11 @@ const { dispose: zonosStoreDispose, onChange: zonosStoreOnChange, reset, state:
          * Default to bottom right so hello would float if anchorElementSelector is not set. Otherwise, this will be ignored
          */
         desktopLocation: 'BOTTOM_RIGHT',
+        desktopLocationOverride: null,
         excludedUrlPatterns: [],
         homepageUrlPattern: '',
         mobileLocation: 'BOTTOM_RIGHT',
+        mobileLocationOverride: null,
         mode: 'LIVE',
         notFoundElementFallback: null,
         organization: '',

package/dist/collection/components/utils/hello/countryOverrideStorage.js

@@ -9,9 +9,6 @@ const withBlockedStorage = (run) => {
         // (Safari private mode, cross-origin iframes).
     }
 };
-const clearSessionOverride = () => {
-    window.sessionStorage.removeItem(COUNTRY_OVERRIDE_KEY);
-};
 const readStoredCountry = (storage) => {
     try {
         const value = storage.getItem(COUNTRY_OVERRIDE_KEY);
@@ -24,26 +21,35 @@ const readStoredCountry = (storage) => {
         return null;
     }
 };
+const writeOverride = (storage, countryCode) => {
+    storage.setItem(COUNTRY_OVERRIDE_KEY, countryCode);
+};
+const withEachStorage = (run) => {
+    withBlockedStorage(() => run(window.localStorage));
+    withBlockedStorage(() => run(window.sessionStorage));
+};
 export const getCountryOverrideStorage = () => {
     var _a;
     return (_a = readStoredCountry(window.localStorage)) !== null && _a !== void 0 ? _a : readStoredCountry(window.sessionStorage);
 };
-export const migrateCountryOverrideStorage = () => {
+export const migrateCountryOverrideStorage = (selectedCountryCode) => {
+    if (!selectedCountryCode) {
+        return;
+    }
     withBlockedStorage(() => {
-        if (readStoredCountry(window.localStorage)) {
-            clearSessionOverride();
+        const localCountry = readStoredCountry(window.localStorage);
+        // Only mirror the country Hello actually kept. A failed localStorage
+        // clear can leave a discarded country in local; never copy that to
+        // session for older Elements. Never copy session → local.
+        if (localCountry === selectedCountryCode) {
+            writeOverride(window.sessionStorage, localCountry);
         }
     });
 };
 export const setCountryOverrideStorage = (countryCode) => {
-    withBlockedStorage(() => {
-        window.localStorage.setItem(COUNTRY_OVERRIDE_KEY, countryCode);
-        clearSessionOverride();
-    });
+    // Dual-write so older Elements that only read sessionStorage see the pick.
+    withEachStorage(storage => writeOverride(storage, countryCode));
 };
 export const clearCountryOverrideStorage = () => {
-    withBlockedStorage(() => {
-        window.localStorage.removeItem(COUNTRY_OVERRIDE_KEY);
-        clearSessionOverride();
-    });
+    withEachStorage(storage => storage.removeItem(COUNTRY_OVERRIDE_KEY));
 };

package/dist/collection/components/utils/hello/resolveHelloFloatPlacement.js

@@ -0,0 +1,98 @@
+const isValidHelloPlacement = (value) => {
+    if (value == null || typeof value !== 'object') {
+        return false;
+    }
+    const { anchor, horizontalOffset, verticalOffset } = value;
+    return (typeof anchor === 'string' &&
+        anchor.length > 0 &&
+        typeof horizontalOffset === 'number' &&
+        Number.isFinite(horizontalOffset) &&
+        typeof verticalOffset === 'number' &&
+        Number.isFinite(verticalOffset));
+};
+const includesLeft = (location) => Boolean(location === null || location === void 0 ? void 0 : location.includes('LEFT'));
+const includesTop = (location) => Boolean(location === null || location === void 0 ? void 0 : location.includes('TOP'));
+const buildResolved = ({ anchor, animateFromLeftOverride, horizontalOffset, isMobileWindow, isOnLeft, shouldFloat, verticalOffset, }) => ({
+    anchor,
+    horizontalOffset,
+    isMobileWindow,
+    isOnLeft: isOnLeft !== null && isOnLeft !== void 0 ? isOnLeft : (Boolean(animateFromLeftOverride) || includesLeft(anchor)),
+    isOnTop: includesTop(anchor),
+    shouldFloat,
+    verticalOffset,
+});
+/**
+ * Resolve active Hello float placement per viewport.
+ * Precedence: component enum prop → settings HelloPlacement → settings location enum.
+ *
+ * When the winning source is a component enum prop or settings `HelloPlacement`,
+ * `shouldFloat` is always true — including when `anchorElementSelector` is set.
+ * That matches existing prop-forced float behavior and FR-006 / data-model rules
+ * (placement implies floating; enum fallback still respects the anchor selector).
+ */
+export const resolveHelloFloatPlacement = (params) => {
+    const { anchorElementSelector, animateFromLeftOverride, componentDesktopLocation, componentMobileLocation, desktopLocation, isMobileWindow, mobileLocation, settingsDesktopPlacement, settingsMobilePlacement, shouldAnimateLeftDesktop, } = params;
+    if (isMobileWindow) {
+        if (componentMobileLocation) {
+            return buildResolved({
+                anchor: componentMobileLocation,
+                animateFromLeftOverride,
+                horizontalOffset: null,
+                isMobileWindow: true,
+                shouldFloat: true,
+                verticalOffset: null,
+            });
+        }
+        if (isValidHelloPlacement(settingsMobilePlacement)) {
+            return buildResolved({
+                anchor: settingsMobilePlacement.anchor,
+                animateFromLeftOverride,
+                horizontalOffset: settingsMobilePlacement.horizontalOffset,
+                isMobileWindow: true,
+                shouldFloat: true,
+                verticalOffset: settingsMobilePlacement.verticalOffset,
+            });
+        }
+        return buildResolved({
+            anchor: mobileLocation,
+            animateFromLeftOverride,
+            horizontalOffset: null,
+            isMobileWindow: true,
+            shouldFloat: Boolean(mobileLocation),
+            verticalOffset: null,
+        });
+    }
+    if (componentDesktopLocation) {
+        return buildResolved({
+            anchor: componentDesktopLocation,
+            animateFromLeftOverride,
+            horizontalOffset: null,
+            isMobileWindow: false,
+            shouldFloat: true,
+            verticalOffset: null,
+        });
+    }
+    if (isValidHelloPlacement(settingsDesktopPlacement)) {
+        return buildResolved({
+            anchor: settingsDesktopPlacement.anchor,
+            animateFromLeftOverride,
+            horizontalOffset: settingsDesktopPlacement.horizontalOffset,
+            isMobileWindow: false,
+            shouldFloat: true,
+            verticalOffset: settingsDesktopPlacement.verticalOffset,
+        });
+    }
+    const shouldFloat = !anchorElementSelector && Boolean(desktopLocation);
+    const isOnLeft = Boolean(animateFromLeftOverride) ||
+        (shouldFloat && desktopLocation
+            ? includesLeft(desktopLocation)
+            : Boolean(shouldAnimateLeftDesktop === null || shouldAnimateLeftDesktop === void 0 ? void 0 : shouldAnimateLeftDesktop()));
+    return buildResolved({
+        anchor: desktopLocation,
+        horizontalOffset: null,
+        isMobileWindow: false,
+        isOnLeft,
+        shouldFloat,
+        verticalOffset: null,
+    });
+};