@zonos/elements 1.2.3 → 1.2.4-alpha.10

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

@@ -12,463 +12,467 @@ import { detectItemRestrictions } from "../../utils/hello/detectItemRestrictions
 import { getCurrentHelloLocalePage } from "../../utils/hello/getCurrentHelloLocalePage";
 import { getHasMoreSpaceOnRight } from "../../utils/hello/getHasMoreSpaceOnRight";
 import { getProductsOnPage } from "../../utils/hello/getProductsOnPage";
-import { setZonosCountryUrlParam } from "../../utils/hello/setZonosCountryUrlParam";
+import { getZCountryUrlParam } from "../../utils/hello/getZCountryUrlParam";
+import { setZCountryUrlParam } from "../../utils/hello/setZCountryUrlParam";
 import { log } from "../../utils/logging/log";
 import { mergeConfig } from "../../utils/mergeConfig";
 const PEEK_MESSAGE_CLOSE_DELAY_MS = 3000;
 const RESIZE_DEBOUNCE_DELAY_MS = 500;
 export class ZonosHello {
-  constructor() {
-    this.getHelloPeekMessage = () => {
-      const isRestrictionPage = zonosStore.currentHelloPage === 'productDetail' ||
-        zonosStore.currentHelloPage === 'productList';
-      if (isRestrictionPage && this.allRestrictedItems.length) {
-        const clickMessage = translate('click to learn more');
-        const restrictMessage = zonosStore.currentHelloPage === 'productDetail'
-          ? translate('Restricted item')
-          : translate('Restricted items found');
-        return `${restrictMessage} - ${clickMessage}`;
-      }
-      switch (zonosStore.currentHelloPage) {
-        case 'cart':
-          return translate(`Prepay duties and taxes at checkout`);
-        case 'productList':
-        case 'productDetail':
-          return translate(`See duty and tax thresholds`);
-        default:
-          return `${translate('Welcome to')} ${zonosStore.organizationName}`;
-      }
-    };
-    this.enableShowPeekMessage = () => {
-      if (this.peekMessage) {
-        this.showPeekMessage = true;
-      }
-    };
-    this.getNewItemRestrictions = async (newProducts) => {
-      const isRestrictionPage = zonosStore.currentHelloPage === 'productDetail' ||
-        zonosStore.currentHelloPage === 'productList';
-      // Only run detectItemRestrictions on product pages if the restrictionBehavior is not DISABLED
-      if (!isRestrictionPage ||
-        zonosStore.helloSettings.restrictionBehavior === 'DISABLED') {
-        return [];
-      }
-      const newRestrictions = await detectItemRestrictions(newProducts);
-      return newRestrictions;
-    };
-    this.triggerShowPeekMessage = () => {
-      this.peekMessage = this.getHelloPeekMessage();
-      const { peekMessageBehavior, peekMessageDelay } = zonosStore.helloSettings;
-      // peek message delay is passed in seconds, but setTimeout expects milliseconds
-      const peekMessageDelayToUse = peekMessageDelay * 1000;
-      if (peekMessageBehavior === 'ENABLED') {
-        setTimeout(() => {
-          this.enableShowPeekMessage();
-          const hasRestrictions = this.allRestrictedItems.some(item => this.productsOnPage.some(product => product.description === item.itemDescription));
-          if (!hasRestrictions) {
-            // If restrictions, persist the message until they hover over the hello widget
-            setTimeout(() => {
-              this.showPeekMessage = false;
-            }, PEEK_MESSAGE_CLOSE_DELAY_MS);
-          }
-        }, peekMessageDelayToUse);
-      }
-    };
-    this.disableAddToCartButtons = () => {
-      // Remove disabled attribute from all "add to cart" buttons
-      if (this.productsOnPage.length) {
-        this.productsOnPage.forEach(product => {
-          var _a, _b;
-          const isRestricted = this.allRestrictedItems.some(item => item.itemDescription === product.description);
-          // if a product description matches a restrictedItems itemDescription, then disable the add to cart button. Otherwise, enable it.
-          if (isRestricted) {
-            (_a = product.cartButtonNode) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'disabled');
-          }
-          else {
-            (_b = product.cartButtonNode) === null || _b === void 0 ? void 0 : _b.removeAttribute('disabled');
-          }
-        });
-      }
-    };
-    this.handleItemRestrictions = async () => {
-      this.productsOnPage = getProductsOnPage();
-      const newProducts = this.productsOnPage.filter(product => !this.allFoundProducts.some(foundProduct => foundProduct.title === product.title));
-      const newRestrictions = await this.getNewItemRestrictions(newProducts);
-      this.allRestrictedItems.push(...newRestrictions);
-      this.allFoundProducts.push(...newProducts);
-      this.disableAddToCartButtons();
-    };
-    this.reloadHelloData = async () => {
-      await this.handleItemRestrictions();
-      this.triggerShowPeekMessage();
-      void this.displayCurrency();
-    };
-    this.handleProductCountChange = debounce(() => {
-      const { productTitleElementSelector } = zonosStore.helloSettings;
-      if (productTitleElementSelector) {
-        const allProductsOnPage = getProductsOnPage();
-        if (this.allFoundProducts.length !== allProductsOnPage.length &&
-          window.location.href === this.initialUrl) {
-          // if allFoundProducts length is 0 (first render or no products), kill item restriction process as initial restrictions are handled in updateHelloOnPageChange
-          if (!this.allFoundProducts.length) {
-            return;
-          }
-          void this.reloadHelloData();
-        }
-      }
-    }, 1000);
-    this.watchProductCountChange = () => {
-      const observer = new MutationObserver(this.handleProductCountChange);
-      observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-      });
-    };
-    this.updateHelloOnPageChange = () => {
-      // If the product count changes on the same url (loading more products), update the peek message and item restrictions
-      this.watchProductCountChange();
-      // Check url change on interval. If changed, update the peek message and item restrictions
-      setInterval(() => {
-        if (window.location.href !== this.initialUrl) {
-          const prevUrl = this.initialUrl && new URL(this.initialUrl);
-          const initialZonosCountry = prevUrl && prevUrl.searchParams.get('zonosCountry');
-          // If the zonosCountry url param changes, reset current item restriction tracking
-          if (initialZonosCountry !== localizationStore.selectedCountryCode) {
-            this.allFoundProducts = [];
-            this.allRestrictedItems = [];
-            this.productsOnPage = [];
-          }
-          this.initialUrl = window.location.href;
-          zonosStore.currentHelloPage = getCurrentHelloLocalePage();
-          const currentUrl = new URL(window.location.href);
-          const zonosCountry = currentUrl.searchParams.get('zonosCountry');
-          if (!zonosCountry) {
-            setZonosCountryUrlParam(localizationStore.selectedCountryCode);
+    constructor() {
+        this.getHelloPeekMessage = () => {
+            const isRestrictionPage = zonosStore.currentHelloPage === 'productDetail' ||
+                zonosStore.currentHelloPage === 'productList';
+            if (isRestrictionPage && this.allRestrictedItems.length) {
+                const clickMessage = translate('click to learn more');
+                const restrictMessage = zonosStore.currentHelloPage === 'productDetail'
+                    ? translate('Restricted item')
+                    : translate('Restricted items found');
+                return `${restrictMessage} - ${clickMessage}`;
+            }
+            switch (zonosStore.currentHelloPage) {
+                case 'cart':
+                    return translate(`Prepay duties and taxes at checkout`);
+                case 'productList':
+                case 'productDetail':
+                    return translate(`See duty and tax thresholds`);
+                default:
+                    return `${translate('Welcome to')} ${zonosStore.organizationName}`;
+            }
+        };
+        this.enableShowPeekMessage = () => {
+            if (this.peekMessage) {
+                this.showPeekMessage = true;
+            }
+        };
+        this.getNewItemRestrictions = async (newProducts) => {
+            const isRestrictionPage = zonosStore.currentHelloPage === 'productDetail' ||
+                zonosStore.currentHelloPage === 'productList';
+            // Only run detectItemRestrictions on product pages if the restrictionBehavior is not DISABLED
+            if (!isRestrictionPage ||
+                zonosStore.helloSettings.restrictionBehavior === 'DISABLED') {
+                return [];
+            }
+            const newRestrictions = await detectItemRestrictions(newProducts);
+            return newRestrictions;
+        };
+        this.triggerShowPeekMessage = () => {
+            this.peekMessage = this.getHelloPeekMessage();
+            const { peekMessageBehavior, peekMessageDelay } = zonosStore.helloSettings;
+            // peek message delay is passed in seconds, but setTimeout expects milliseconds
+            const peekMessageDelayToUse = peekMessageDelay * 1000;
+            if (peekMessageBehavior === 'ENABLED') {
+                setTimeout(() => {
+                    this.enableShowPeekMessage();
+                    const hasRestrictions = this.allRestrictedItems.some(item => this.productsOnPage.some(product => product.description === item.itemDescription));
+                    if (!hasRestrictions) {
+                        // If restrictions, persist the message until they hover over the hello widget
+                        setTimeout(() => {
+                            this.showPeekMessage = false;
+                        }, PEEK_MESSAGE_CLOSE_DELAY_MS);
+                    }
+                }, peekMessageDelayToUse);
+            }
+        };
+        this.disableAddToCartButtons = () => {
+            // Remove disabled attribute from all "add to cart" buttons
+            if (this.productsOnPage.length) {
+                this.productsOnPage.forEach(product => {
+                    var _a, _b;
+                    const isRestricted = this.allRestrictedItems.some(item => item.itemDescription === product.description);
+                    // if a product description matches a restrictedItems itemDescription, then disable the add to cart button. Otherwise, enable it.
+                    if (isRestricted) {
+                        (_a = product.cartButtonNode) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'disabled');
+                    }
+                    else {
+                        (_b = product.cartButtonNode) === null || _b === void 0 ? void 0 : _b.removeAttribute('disabled');
+                    }
+                });
+            }
+        };
+        this.handleItemRestrictions = async () => {
+            this.productsOnPage = getProductsOnPage();
+            const newProducts = this.productsOnPage.filter(product => !this.allFoundProducts.some(foundProduct => foundProduct.title === product.title));
+            const newRestrictions = await this.getNewItemRestrictions(newProducts);
+            this.allRestrictedItems.push(...newRestrictions);
+            this.allFoundProducts.push(...newProducts);
+            this.disableAddToCartButtons();
+        };
+        this.reloadHelloData = async () => {
+            await this.handleItemRestrictions();
+            this.triggerShowPeekMessage();
+            void this.displayCurrency();
+        };
+        this.handleProductCountChange = debounce(() => {
+            const { productTitleElementSelector } = zonosStore.helloSettings;
+            if (productTitleElementSelector) {
+                const allProductsOnPage = getProductsOnPage();
+                if (this.allFoundProducts.length !== allProductsOnPage.length &&
+                    window.location.href === this.initialUrl) {
+                    // if allFoundProducts length is 0 (first render or no products), kill item restriction process as initial restrictions are handled in updateHelloOnPageChange
+                    if (!this.allFoundProducts.length) {
+                        return;
+                    }
+                    void this.reloadHelloData();
+                }
+            }
+        }, 1000);
+        this.watchProductCountChange = () => {
+            const observer = new MutationObserver(this.handleProductCountChange);
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        };
+        this.updateHelloOnPageChange = () => {
+            // If the product count changes on the same url (loading more products), update the peek message and item restrictions
+            this.watchProductCountChange();
+            // Check url change on interval. If changed, update the peek message and item restrictions
+            setInterval(() => {
+                if (window.location.href !== this.initialUrl) {
+                    const prevUrl = this.initialUrl && new URL(this.initialUrl);
+                    const initialZonosCountry = prevUrl && getZCountryUrlParam(prevUrl.searchParams);
+                    // If the zCountry url param changes, reset current item restriction tracking
+                    if (initialZonosCountry !== localizationStore.selectedCountryCode) {
+                        this.allFoundProducts = [];
+                        this.allRestrictedItems = [];
+                        this.productsOnPage = [];
+                    }
+                    this.initialUrl = window.location.href;
+                    zonosStore.currentHelloPage = getCurrentHelloLocalePage();
+                    const currentUrl = new URL(window.location.href);
+                    const zCountry = getZCountryUrlParam(currentUrl.searchParams);
+                    if (!zCountry) {
+                        setZCountryUrlParam(localizationStore.selectedCountryCode);
+                        return;
+                    }
+                    void this.reloadHelloData();
+                }
+            }, 1000);
+        };
+        this.changeShowDialog = (value) => {
+            this.showDialog = value;
+        };
+        this.shouldAnimateLeftDesktop = () => {
+            // Get Hello position (relative = desktop, fixed = mobile)
+            const elPosition = this.helloRef && getComputedStyle(this.helloRef).position;
+            // If relative position, determine if peek message should animate left or right. Mobile is pre-determined.
+            if (this.helloRef && elPosition === 'relative') {
+                const hasMoreSpaceOnRight = getHasMoreSpaceOnRight(this.helloRef);
+                return hasMoreSpaceOnRight;
+            }
+        };
+        this.isShippableCountry = (showLog = true) => {
+            if (!localizationStore.localizationLoaded) {
+                return false;
+            }
+            // if localization is loaded and the localization is not a shippable country, keep the original click event
+            if (!localizationStore.isShippableCountry) {
+                if (showLog) {
+                    log(`Hello: not shippable country`);
+                }
+                return false;
+            }
+            return true;
+        };
+        this.mobileLocationOverride = undefined;
+        this.animateFromLeftOverride = undefined;
+        this.appearanceSettingsOverride = undefined;
+        this.showPeekMessage = false;
+        this.zonosStoreHelloSettings = zonosStore.helloSettings;
+        this.showDialog = false;
+        this.peekMessage = '';
+        this.initialUrl = '';
+        this.allRestrictedItems = [];
+        this.allFoundProducts = [];
+        this.productsOnPage = [];
+    }
+    componentWillLoad() {
+        const initInterval = setInterval(async () => {
+            if (!this.helloRef) {
+                return;
+            }
+            if (zonosStore.loadedConfig) {
+                this.helloRef.setAttribute('data-zonos-hello-loaded', '');
+                this.updateHelloOnPageChange();
+                clearInterval(initInterval);
+            }
+        }, 100);
+    }
+    /**
+     * This method will trigger the currency conversion and display the converted value
+     * @returns void
+     */
+    async displayCurrency() {
+        if (!localizationStore.exchangeRate) {
+            // eslint-disable-next-line no-console
+            console.error('Could not display currency. Exchange rate and format data is not available.');
             return;
-          }
-          void this.reloadHelloData();
         }
-      }, 1000);
-    };
-    this.changeShowDialog = (value) => {
-      this.showDialog = value;
-    };
-    this.shouldAnimateLeftDesktop = () => {
-      // Get Hello position (relative = desktop, fixed = mobile)
-      const elPosition = this.helloRef && getComputedStyle(this.helloRef).position;
-      // If relative position, determine if peek message should animate left or right. Mobile is pre-determined.
-      if (this.helloRef && elPosition === 'relative') {
-        const hasMoreSpaceOnRight = getHasMoreSpaceOnRight(this.helloRef);
-        return hasMoreSpaceOnRight;
-      }
-    };
-    this.isShippableCountry = (showLog = true) => {
-      if (!localizationStore.localizationLoaded) {
-        return false;
-      }
-      // if localization is loaded and the localization is not a shippable country, keep the original click event
-      if (!localizationStore.isShippableCountry) {
-        if (showLog) {
-          log(`Hello: not shippable country`);
+        currencyDisplay();
+    }
+    /**
+     * This method will call convert and format, and return the converted and formatted string
+     * @returns string
+     */
+    async convertAndFormat(value) {
+        currencyConvertAndFormat(value);
+    }
+    /**
+     * This method will convert the currency and return the converted value
+     * @returns number
+     */
+    async convert(value) {
+        currencyConvert(value);
+    }
+    /**
+     * This method will format the currency and return the formatted string
+     * @returns number
+     */
+    async format(value) {
+        currencyFormat(value);
+    }
+    handleResize() {
+        debounce(this.render.bind(this), RESIZE_DEBOUNCE_DELAY_MS);
+    }
+    render() {
+        var _a, _b;
+        const isExcludedUrl = (_a = zonosStore.helloSettings.excludedUrlPatterns) === null || _a === void 0 ? void 0 : _a.some(pattern => new RegExp(pattern).test(window.location.href));
+        if (isExcludedUrl) {
+            log('Hello is excluded on this url', 'warn');
+            return null;
         }
-        return false;
-      }
-      return true;
-    };
-    this.mobileLocationOverride = undefined;
-    this.animateFromLeftOverride = undefined;
-    this.appearanceSettingsOverride = undefined;
-    this.showPeekMessage = false;
-    this.zonosStoreHelloSettings = zonosStore.helloSettings;
-    this.showDialog = false;
-    this.peekMessage = '';
-    this.initialUrl = '';
-    this.allRestrictedItems = [];
-    this.allFoundProducts = [];
-    this.productsOnPage = [];
-  }
-  componentWillLoad() {
-    const initInterval = setInterval(async () => {
-      if (!this.helloRef) {
-        return;
-      }
-      if (zonosStore.loadedConfig) {
-        this.helloRef.setAttribute('data-zonos-hello-loaded', '');
-        this.updateHelloOnPageChange();
-        clearInterval(initInterval);
-      }
-    }, 100);
-  }
-  /**
-   * This method will trigger the currency conversion and display the converted value
-   * @returns void
-   */
-  async displayCurrency() {
-    if (!localizationStore.exchangeRate) {
-      // eslint-disable-next-line no-console
-      console.error('Could not display currency. Exchange rate and format data is not available.');
-      return;
+        const { selectedCountryCode } = localizationStore;
+        const mobileLocation = this.mobileLocationOverride || zonosStore.helloSettings.mobileLocation;
+        const isMobileWindow = window.innerWidth < 768;
+        const isOnLeft = this.animateFromLeftOverride ||
+            (isMobileWindow && mobileLocation.includes('LEFT')) ||
+            this.shouldAnimateLeftDesktop() ||
+            false;
+        const isOnTop = mobileLocation.includes('TOP');
+        const appearanceSettings = mergeConfig(zonosStore.appearance, this.appearanceSettingsOverride);
+        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));
+        const showHello = this.isShippableCountry() && !!selectedCountryCode;
+        return (h(Host, { class: "zonos--hello zonos--elements", "data-theme": theme }, showHello && (h("div", { class: "zonos--hello-wrapper" }, h("button", { class: classes([
+                'zonos--hello-widget',
+                this.showPeekMessage && 'zonos--hello-show-peek-message',
+                this.mobileLocationOverride && 'zonos--hello-mobile-override',
+                isOnLeft &&
+                    'zonos--hello-widget-left zonos--hello-widget-animate-from-left',
+                isOnTop && 'zonos--hello-widget-top',
+                !!this.allRestrictedItems.length &&
+                    'zonos--hello-has-restrictions',
+            ]), onClick: () => {
+                this.changeShowDialog(!this.showDialog);
+            }, onMouseEnter: () => this.enableShowPeekMessage(), onMouseLeave: () => (this.showPeekMessage = false), ref: el => el && (this.helloRef = el) }, h("zonos-text", { class: "zonos--hello-message" }, this.peekMessage), selectedCountryCode && (h("div", { class: "zonos--hello-country-flag-wrapper" }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode })))), h("div", { class: classes([
+                'zonos--hello-dialog-wrapper',
+                this.mobileLocationOverride &&
+                    'zonos--hello-dialog-wrapper-mobile-override',
+            ]), 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 }))))));
     }
-    currencyDisplay();
-  }
-  /**
-   * This method will call convert and format, and return the converted and formatted string
-   * @returns string
-   */
-  async convertAndFormat(value) {
-    currencyConvertAndFormat(value);
-  }
-  /**
-   * This method will convert the currency and return the converted value
-   * @returns number
-   */
-  async convert(value) {
-    currencyConvert(value);
-  }
-  /**
-   * This method will format the currency and return the formatted string
-   * @returns number
-   */
-  async format(value) {
-    currencyFormat(value);
-  }
-  handleResize() {
-    debounce(this.render.bind(this), RESIZE_DEBOUNCE_DELAY_MS);
-  }
-  render() {
-    var _a, _b;
-    const isExcludedUrl = (_a = zonosStore.helloSettings.excludedUrlPatterns) === null || _a === void 0 ? void 0 : _a.some(pattern => new RegExp(pattern).test(window.location.href));
-    if (isExcludedUrl) {
-      log('Hello is excluded on this url', 'warn');
-      return null;
+    static get is() { return "zonos-hello"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-hello.scss"]
+        };
     }
-    const { selectedCountryCode } = localizationStore;
-    const mobileLocation = this.mobileLocationOverride || zonosStore.helloSettings.mobileLocation;
-    const isMobileWindow = window.innerWidth < 768;
-    const isOnLeft = this.animateFromLeftOverride ||
-      (isMobileWindow && mobileLocation.includes('LEFT')) ||
-      this.shouldAnimateLeftDesktop() ||
-      false;
-    const isOnTop = mobileLocation.includes('TOP');
-    const appearanceSettings = mergeConfig(zonosStore.appearance, this.appearanceSettingsOverride);
-    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));
-    const showHello = this.isShippableCountry() && !!selectedCountryCode;
-    return (h(Host, { class: "zonos--hello zonos--elements", "data-theme": theme }, showHello && (h("div", { class: "zonos--hello-wrapper" }, h("button", { class: classes([
-        'zonos--hello-widget',
-        this.showPeekMessage && 'zonos--hello-show-peek-message',
-        this.mobileLocationOverride && 'zonos--hello-mobile-override',
-        isOnLeft &&
-          'zonos--hello-widget-left zonos--hello-widget-animate-from-left',
-        isOnTop && 'zonos--hello-widget-top',
-        !!this.allRestrictedItems.length &&
-          'zonos--hello-has-restrictions',
-      ]), onClick: () => {
-        this.changeShowDialog(!this.showDialog);
-      }, onMouseEnter: () => this.enableShowPeekMessage(), onMouseLeave: () => (this.showPeekMessage = false), ref: el => el && (this.helloRef = el) }, h("span", { class: "zonos--hello-message" }, this.peekMessage), selectedCountryCode && (h("div", { class: "zonos--hello-country-flag-wrapper" }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode })))), h("div", { class: classes([
-        'zonos--hello-dialog-wrapper',
-        this.mobileLocationOverride &&
-          'zonos--hello-dialog-wrapper-mobile-override',
-      ]), 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 }))))));
-  }
-  static get is() { return "zonos-hello"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-hello.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-hello.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "mobileLocationOverride": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "HelloMobileLocation",
-          "resolved": "\"BOTTOM_LEFT\" | \"BOTTOM_RIGHT\" | \"TOP_LEFT\" | \"TOP_RIGHT\" | undefined",
-          "references": {
-            "HelloMobileLocation": {
-              "location": "import",
-              "path": "src/types/generated/graphql.customer.types",
-              "id": "src/types/generated/graphql.customer.types.ts::HelloMobileLocation"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Force mobile styling instead of media query and use the passed location value"
-        },
-        "attribute": "mobile-location-override",
-        "reflect": false
-      },
-      "animateFromLeftOverride": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Force left animation instead of detecting which side has more space"
-        },
-        "attribute": "animate-from-left-override",
-        "reflect": false
-      },
-      "appearanceSettingsOverride": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Partial<AppearanceConfig>",
-          "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
-          "references": {
-            "Partial": {
-              "location": "global",
-              "id": "global::Partial"
+    static get styleUrls() {
+        return {
+            "$": ["zonos-hello.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mobileLocationOverride": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HelloMobileLocation",
+                    "resolved": "\"BOTTOM_LEFT\" | \"BOTTOM_RIGHT\" | \"TOP_LEFT\" | \"TOP_RIGHT\" | undefined",
+                    "references": {
+                        "HelloMobileLocation": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.customer.types",
+                            "id": "src/types/generated/graphql.customer.types.ts::HelloMobileLocation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Force mobile styling instead of media query and use the passed location value"
+                },
+                "attribute": "mobile-location-override",
+                "reflect": false
             },
-            "AppearanceConfig": {
-              "location": "import",
-              "path": "src/components/store/zonosStore",
-              "id": "src/components/store/zonosStore.ts::AppearanceConfig"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Override the appearance settings"
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "showPeekMessage": {},
-      "zonosStoreHelloSettings": {},
-      "showDialog": {},
-      "peekMessage": {},
-      "initialUrl": {},
-      "allRestrictedItems": {},
-      "allFoundProducts": {},
-      "productsOnPage": {}
-    };
-  }
-  static get methods() {
-    return {
-      "displayCurrency": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method will trigger the currency conversion and display the converted value",
-          "tags": [{
-              "name": "returns",
-              "text": "void"
-            }]
-        }
-      },
-      "convertAndFormat": {
-        "complexType": {
-          "signature": "(value: number) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method will call convert and format, and return the converted and formatted string",
-          "tags": [{
-              "name": "returns",
-              "text": "string"
-            }]
-        }
-      },
-      "convert": {
-        "complexType": {
-          "signature": "(value: number) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "animateFromLeftOverride": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Force left animation instead of detecting which side has more space"
+                },
+                "attribute": "animate-from-left-override",
+                "reflect": false
+            },
+            "appearanceSettingsOverride": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<AppearanceConfig>",
+                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "AppearanceConfig": {
+                            "location": "import",
+                            "path": "src/components/store/zonosStore",
+                            "id": "src/components/store/zonosStore.ts::AppearanceConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the appearance settings"
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method will convert the currency and return the converted value",
-          "tags": [{
-              "name": "returns",
-              "text": "number"
-            }]
-        }
-      },
-      "format": {
-        "complexType": {
-          "signature": "(value: number) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "showPeekMessage": {},
+            "zonosStoreHelloSettings": {},
+            "showDialog": {},
+            "peekMessage": {},
+            "initialUrl": {},
+            "allRestrictedItems": {},
+            "allFoundProducts": {},
+            "productsOnPage": {}
+        };
+    }
+    static get methods() {
+        return {
+            "displayCurrency": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method will trigger the currency conversion and display the converted value",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "void"
+                        }]
+                }
+            },
+            "convertAndFormat": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method will call convert and format, and return the converted and formatted string",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "string"
+                        }]
+                }
+            },
+            "convert": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method will convert the currency and return the converted value",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "number"
+                        }]
+                }
+            },
+            "format": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method will format the currency and return the formatted string",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "number"
+                        }]
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method will format the currency and return the formatted string",
-          "tags": [{
-              "name": "returns",
-              "text": "number"
-            }]
-        }
-      }
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }