@zonos/elements 1.2.3 → 1.2.4-alpha.10

package/dist/esm/zonos-component.entry.js

@@ -1,24 +1,24 @@
-import { r as registerInstance, h } from './index-d1aa9293.js';
+import { r as registerInstance, h } from './index-36ff6342.js';
 
 function format(first, middle, last) {
-  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+    return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
 }
 
-const zonosComponentCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}div{color:red;font-size:large}";
+const zonosComponentCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}div{color:red;font-size:large}";
 
 const ZonosComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.first = '';
-    this.middle = '';
-    this.last = '';
-  }
-  getText() {
-    return format(this.first, this.middle, this.last);
-  }
-  render() {
-    return h("div", null, "Hello, World! I'm ", this.getText());
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.first = '';
+        this.middle = '';
+        this.last = '';
+    }
+    getText() {
+        return format(this.first, this.middle, this.last);
+    }
+    render() {
+        return h("div", null, "Hello, World! I'm ", this.getText());
+    }
 };
 ZonosComponent.style = zonosComponentCss;
 

package/dist/esm/zonos-controller.entry.js

@@ -1,215 +1,253 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-d1aa9293.js';
-import { s as stripeStore } from './cart-17650017.js';
-import { h as handleFetch, b as logError, i as isValidSelector, l as log, c as initLocalizationStore, d as localizationStoreUpdateSelectedCountryCode } from './localization-f3828793.js';
-import { z as zonosStore, d as zonosStoreInitSetting } from './zonosStore-05a62104.js';
-import './isDarkColor-6fbb9b14.js';
-import './getBorderRadius-45764ad7.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-36ff6342.js';
+import { s as stripeStore } from './cart-b439be00.js';
+import { h as handleFetch, b as logError, i as isValidSelector, l as log, c as initLocalizationStore, d as localizationStoreUpdateSelectedCountryCode } from './localization-a51ccbc2.js';
+import { z as zonosStore, d as zonosStoreInitSetting, e as zonosStoreFontFamily } from './zonosStore-61e74f58.js';
+import './isDarkColor-416d6047.js';
+import './getBorderRadius-178a0a05.js';
 
-const getZonosSetting = async () => {
-  const url = `${"https://v1.route.js.zonos.com"}/api/zonos-setting`;
-  const { errors, json } = await handleFetch(url);
-  if (errors.length) {
-    logError(`Error occurs when getting zonos settings. If this is not an unauthorized error, it will use user setting or default setting`);
-    return { errors, json: null };
-  }
-  return { errors: [], json };
+const getZonosSettings = async () => {
+    const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/zonos-settings`;
+    const { errors, json } = await handleFetch(url);
+    if (errors.length) {
+        logError(`Error occurred when getting zonos settings. If this is not an unauthorized error, it will use user settings or default settings`);
+        return { errors, json: null };
+    }
+    return { errors: [], json };
 };
 
 const injectCheckoutElement = () => {
-  // append checkout component if doesn't exist
-  const checkoutElement = document.querySelector('zonos-checkout');
-  if (!checkoutElement) {
-    const newCheckoutElement = document.createElement('zonos-checkout');
-    document.body.appendChild(newCheckoutElement);
-  }
+    // append checkout component if doesn't exist
+    const checkoutElement = document.querySelector('zonos-checkout');
+    if (!checkoutElement) {
+        const newCheckoutElement = document.createElement('zonos-checkout');
+        document.body.appendChild(newCheckoutElement);
+    }
 };
 const initCheckout = (config) => {
-  if (!config.placeOrderButtonSelector) {
-    // do nothing if checkout button anchor is not set
-    return;
-  }
-  // check if checkout button anchor selector user pass in is valid
-  if (!isValidSelector(config.placeOrderButtonSelector)) {
-    logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
-    return;
-  }
-  injectCheckoutElement();
+    if (!config.placeOrderButtonSelector) {
+        // do nothing if checkout button anchor is not set
+        return;
+    }
+    // check if checkout button anchor selector user pass in is valid
+    if (!isValidSelector(config.placeOrderButtonSelector)) {
+        logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
+        return;
+    }
+    injectCheckoutElement();
 };
 
 const injectHelloComponent = (triggerAnchorElement) => {
-  // append checkout component if doesn't exist
-  const helloElement = document.querySelector('zonos-hello');
-  if (!helloElement && triggerAnchorElement) {
-    const newHelloElement = document.createElement('zonos-hello');
-    triggerAnchorElement.appendChild(newHelloElement);
-  }
+    // append checkout component if doesn't exist
+    const helloElement = document.querySelector('zonos-hello');
+    if (!helloElement && triggerAnchorElement) {
+        const newHelloElement = document.createElement('zonos-hello');
+        triggerAnchorElement.appendChild(newHelloElement);
+    }
 };
 const initHello = async (helloSettings) => {
-  const { anchorElementSelector } = helloSettings;
-  // check if checkout button anchor selector user pass in is valid to setup hello
-  if (!anchorElementSelector || !isValidSelector(anchorElementSelector)) {
-    logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
-    return;
-  }
-  const triggerElement = document.querySelector(anchorElementSelector);
-  log('Hello init complete');
-  injectHelloComponent(triggerElement);
+    const { anchorElementSelector } = helloSettings;
+    // check if checkout button anchor selector user pass in is valid to setup hello
+    if (!anchorElementSelector || !isValidSelector(anchorElementSelector)) {
+        logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
+        return;
+    }
+    const triggerElement = document.querySelector(anchorElementSelector);
+    log('Hello init complete');
+    injectHelloComponent(triggerElement);
 };
 
-const zonosControllerCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{visibility:hidden;opacity:0;height:0}";
+const zonosControllerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{visibility:hidden;opacity:0;height:0}";
 
 const ZonosController = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.stripeInitEvent = createEvent(this, "stripeInitEvent", 7);
-    this.disablePlaceOrderButtons = ({ disable }) => {
-      const placeOrderButtonSelector = zonosStore.checkoutSettings.placeOrderButtonSelector;
-      if (!placeOrderButtonSelector) {
-        return;
-      }
-      const disableEvent = (e) => {
-        const target = e.target;
-        // prevent default and propagation when the item has disabled attribute
-        if (target.getAttribute('disabled')) {
-          e.preventDefault();
-          e.stopPropagation();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stripeInitEvent = createEvent(this, "stripeInitEvent", 7);
+        this.disablePlaceOrderButtons = ({ disable }) => {
+            const placeOrderButtonSelector = zonosStore.checkoutSettings.placeOrderButtonSelector;
+            if (!placeOrderButtonSelector) {
+                return;
+            }
+            const disableEvent = (e) => {
+                const target = e.target;
+                // prevent default and propagation when the item has disabled attribute
+                if (target.getAttribute('disabled')) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            };
+            const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
+            placeOrderButton.forEach(button => {
+                if (disable) {
+                    button.setAttribute('disabled', 'true');
+                    // prevent the selector to perform default action when it's disabled
+                    button.addEventListener('click', disableEvent);
+                }
+                else {
+                    button.removeAttribute('disabled');
+                    // clean up the event listener
+                    button.removeEventListener('click', disableEvent);
+                }
+            });
+            // only auto enable if autoEnable is true and the state is enable
+            if (disable) {
+                setTimeout(() => {
+                    // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
+                    placeOrderButton.forEach(button => {
+                        button.removeAttribute('disabled');
+                        // clean up the event listener if exists
+                        button.removeEventListener('click', disableEvent);
+                    });
+                }, 5000);
+            }
+        };
+        this.config = undefined;
+        this.zonosApiKey = undefined;
+    }
+    /**
+     * Method to initialize checkout element
+     */
+    async initCheckoutElement(stripe) {
+        if (!stripe) {
+            // eslint-disable-next-line no-console
+            log('Stripe is not loaded yet - cannot init checkout element', 'warn');
+            return;
         }
-      };
-      const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
-      placeOrderButton.forEach(button => {
-        if (disable) {
-          button.setAttribute('disabled', 'true');
-          // prevent the selector to perform default action when it's disabled
-          button.addEventListener('click', disableEvent);
+        stripeStore.stripe = stripe;
+        void initCheckout(zonosStore.checkoutSettings);
+        log('init checkout element');
+        // enable place order button after checkout is loaded
+        this.disablePlaceOrderButtons({
+            disable: false,
+        });
+    }
+    /**
+     * Init zonos notification
+     */
+    initZonosNotification() {
+        const existingNotification = document.querySelector('zonos-notification');
+        if (existingNotification) {
+            return;
         }
-        else {
-          button.removeAttribute('disabled');
-          // clean up the event listener
-          button.removeEventListener('click', disableEvent);
+        const zonosNotification = document.createElement('zonos-notification');
+        document.body.appendChild(zonosNotification);
+    }
+    /**
+     * Setup google font
+     */
+    async setupGoogleFont(overrideFont) {
+        var _a, _b;
+        // use override font if it exists, otherwise use font from setting
+        const fontSelected = overrideFont || zonosStoreFontFamily();
+        if (fontSelected === 'Inter') {
+            if (!overrideFont) {
+                // Do nothing if font is Inter, since we already inject it on start
+                return;
+            }
+            log(`[FONT] Just applied Inter , but no need to inject since we already inject Inter on start`, 'warn');
+            zonosStore.appearance = Object.assign(Object.assign({}, zonosStore.appearance), { fontFamily: overrideFont });
         }
-      });
-      // only auto enable if autoEnable is true and the state is enable
-      if (disable) {
-        setTimeout(() => {
-          // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
-          placeOrderButton.forEach(button => {
-            button.removeAttribute('disabled');
-            // clean up the event listener if exists
-            button.removeEventListener('click', disableEvent);
-          });
-        }, 5000);
-      }
-    };
-    this.config = undefined;
-    this.zonosApiKey = undefined;
-  }
-  /**
-   * Method to initialize checkout element
-   */
-  async initCheckoutElement(stripe) {
-    if (!stripe) {
-      // eslint-disable-next-line no-console
-      log('Stripe is not loaded yet - cannot init checkout element', 'warn');
-      return;
-    }
-    stripeStore.stripe = stripe;
-    void initCheckout(zonosStore.checkoutSettings);
-    log('init checkout element');
-    // enable place order button after checkout is loaded
-    this.disablePlaceOrderButtons({
-      disable: false,
-    });
-  }
-  /**
-   * Init zonos notification
-   */
-  initZonosNotification() {
-    const existingNotification = document.querySelector('zonos-notification');
-    if (existingNotification) {
-      return;
-    }
-    const zonosNotification = document.createElement('zonos-notification');
-    document.body.appendChild(zonosNotification);
-  }
-  async componentWillLoad() {
-    zonosStore.zonosApiKey = this.zonosApiKey;
-    // running with scope async function to avoid blocking the main thread
-    (async () => {
-      var _a, _b;
-      const { errors, json } = await getZonosSetting();
-      if (((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type.toString()) === '403') {
-        log('Failed to load zonos settings. This domain may not have access', 'warn');
-        return;
-      }
-      // disable place order button until checkout is loaded
-      this.disablePlaceOrderButtons({
-        disable: true,
-      });
-      // init zonos notification
-      this.initZonosNotification();
-      // load default setting if fail to load user setting
-      zonosStoreInitSetting({
-        overrideSettings: this.config,
-        zonosSettings: json,
-      });
-      if (zonosStore.helloSettings) {
-        void initHello(zonosStore.helloSettings);
-      }
-      // init localization store
-      await initLocalizationStore();
-      // checkout init
-      const publishableKey = ((_b = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _b === void 0 ? void 0 : _b.externalServiceTokens.find(item => item.type === 'STRIPE_PUBLISHABLE_TOKEN')) || null;
-      if (!publishableKey || !this.stripeInitEvent) {
-        log('Checkout failed to load -- missing publishable key', 'warn');
-        return;
-      }
-      if (zonosStore.checkoutSettings.subscriptionStatus === 'INACTIVE') {
-        log('=== Checkout subscription is "INACTIVE" - Cancel initializing for Checkout ===', 'warn');
-        log('zonos controller loaded');
-        return;
-      }
-      if (zonosStore.checkoutSettings.visibilityStatus === 'DISABLED') {
-        log('=== Checkout is disabled by store owner ===', 'warn');
-        log('zonos controller loaded');
-        return;
-      }
-      // send publishable key out to load stripe
-      this.stripeInitEvent.emit({
-        publishableKey: publishableKey.token,
-      });
-      log('zonos controller loaded');
-    })();
-  }
-  /**
-   * Show notification
-   */
-  async showNotification(notification) {
-    const notificationElement = document.querySelector('zonos-notification');
-    if (!notificationElement) {
-      log('Failed to show notification - zonos-notification not found', 'warn');
-      return;
-    }
-    void notificationElement.showNotification(notification);
-  }
-  /**
-   * Override the setting
-   * @param config config that need to override the default setting
-   */
-  async overrideConfig(config) {
-    zonosStoreInitSetting({
-      overrideSettings: config,
-      zonosSettings: null,
-    });
-  }
-  /**
-   * Override country code for storybook
-   */
-  async overrideCountry(countryCode) {
-    void localizationStoreUpdateSelectedCountryCode(countryCode);
-  }
-  render() {
-    return h(Host, { class: "zonos--elements" });
-  }
+        const routeUrl = "https://v1.route.js.zonos.com";
+        const { errors, json } = await handleFetch(`${routeUrl}/api/zonos-elements/get-font-detail?family=${fontSelected}`);
+        if (errors.length > 0 || !json) {
+            log(`Failed to load font ${fontSelected}`, 'warn');
+            return;
+        }
+        const fontUrl = json.fontUrl;
+        (_b = (_a = window.Zonos).injectSupportGoogleFont) === null || _b === void 0 ? void 0 : _b.call(_a, fontUrl);
+        if (!overrideFont) {
+            return;
+        }
+        // apply override font
+        log(`[FONT] ${overrideFont} font override applied`);
+        zonosStore.appearance = Object.assign(Object.assign({}, zonosStore.appearance), { fontFamily: overrideFont });
+    }
+    async componentWillLoad() {
+        zonosStore.zonosApiKey = this.zonosApiKey;
+        // running with scope async function to avoid blocking the main thread
+        (async () => {
+            var _a, _b;
+            const { errors, json } = await getZonosSettings();
+            if (((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type.toString()) === '403') {
+                log('Failed to load zonos settings. This domain may not have access', 'warn');
+                return;
+            }
+            // disable place order button until checkout is loaded
+            this.disablePlaceOrderButtons({
+                disable: true,
+            });
+            // init zonos notification
+            this.initZonosNotification();
+            // load default setting if fail to load user setting
+            zonosStoreInitSetting({
+                overrideSettings: this.config,
+                zonosSettings: json,
+            });
+            // setup google font after store loaded
+            void this.setupGoogleFont();
+            if (zonosStore.helloSettings) {
+                void initHello(zonosStore.helloSettings);
+            }
+            // init localization store
+            await initLocalizationStore();
+            // checkout init
+            const publishableKey = ((_b = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _b === void 0 ? void 0 : _b.externalServiceTokens.find(item => item.type === 'STRIPE_PUBLISHABLE_TOKEN')) || null;
+            if (!publishableKey || !this.stripeInitEvent) {
+                log('Checkout failed to load -- missing publishable key', 'warn');
+                return;
+            }
+            if (zonosStore.checkoutSettings.subscriptionStatus === 'INACTIVE') {
+                log('=== Checkout subscription is "INACTIVE" - Cancel initializing for Checkout ===', 'warn');
+                log('zonos controller loaded');
+                return;
+            }
+            if (zonosStore.checkoutSettings.visibilityStatus === 'DISABLED') {
+                log('=== Checkout is disabled by store owner ===', 'warn');
+                log('zonos controller loaded');
+                return;
+            }
+            // send publishable key out to load stripe
+            this.stripeInitEvent.emit({
+                publishableKey: publishableKey.token,
+            });
+            log('zonos controller loaded');
+        })();
+    }
+    /**
+     * Show notification
+     */
+    async showNotification(notification) {
+        const notificationElement = document.querySelector('zonos-notification');
+        if (!notificationElement) {
+            log('Failed to show notification - zonos-notification not found', 'warn');
+            return;
+        }
+        void notificationElement.showNotification(notification);
+    }
+    /**
+     * Override the setting
+     * @param config config that need to override the default setting
+     */
+    async overrideConfig(config) {
+        zonosStoreInitSetting({
+            overrideSettings: config,
+            zonosSettings: null,
+        });
+    }
+    /**
+     * Override country code for storybook
+     */
+    async overrideCountry(countryCode) {
+        void localizationStoreUpdateSelectedCountryCode(countryCode);
+    }
+    /**
+     * Get appearance from setting
+     */
+    async getAppearanceSetting() {
+        return zonosStore.appearance;
+    }
+    render() {
+        return h(Host, { class: "zonos--elements" });
+    }
 };
 ZonosController.style = zonosControllerCss;