@zonos/elements 1.2.2 → 1.2.4-alpha.1

package/dist/components/zonos-controller.js

@@ -1,202 +1,288 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as stripeStore } from './cart.js';
 import { h as handleFetch, l as logError, i as isValidSelector, a as log, c as initLocalizationStore, d as localizationStoreUpdateSelectedCountryCode } from './localization.js';
-import { z as zonosStore, d as zonosStoreInitSetting } from './zonosStore.js';
+import { z as zonosStore, e as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore.js';
 import { d as defineCustomElement$3 } from './zonos-notification2.js';
 import { d as defineCustomElement$2 } from './zonos-text2.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 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 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 = async (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();
+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();
 };
 
 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}: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$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.stripeInitEvent = createEvent(this, "stripeInitEvent", 7);
-    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');
-  }
-  /**
-   * 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;
-      }
-      // 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" });
-  }
-  static get style() { return zonosControllerCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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;
+        }
+        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);
+    }
+    /**
+     * 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 });
+        }
+        const routeUrl = "https://v1.route.js.zonos.com";
+        const { errors, json } = await handleFetch(`${routeUrl}/api/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 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,
+            });
+            // 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" });
+    }
+    static get style() { return zonosControllerCss; }
 }, [1, "zonos-controller", {
-    "config": [16],
-    "zonosApiKey": [1, "zonos-api-key"],
-    "initCheckoutElement": [64],
-    "showNotification": [64],
-    "overrideConfig": [64],
-    "overrideCountry": [64]
-  }]);
+        "config": [16],
+        "zonosApiKey": [1, "zonos-api-key"],
+        "initCheckoutElement": [64],
+        "setupGoogleFont": [64],
+        "showNotification": [64],
+        "overrideConfig": [64],
+        "overrideCountry": [64],
+        "getAppearanceSetting": [64]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-controller", "zonos-notification", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-controller":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosController$1);
-      }
-      break;
-    case "zonos-notification":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-controller", "zonos-notification", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-controller":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosController$1);
+            }
+            break;
+        case "zonos-notification":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const ZonosController = ZonosController$1;

package/dist/components/zonos-country-flag.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosCountryFlag extends Components.ZonosCountryFlag, HTMLElement {}
 export const ZonosCountryFlag: {
-  prototype: ZonosCountryFlag;
-  new (): ZonosCountryFlag;
+    prototype: ZonosCountryFlag;
+    new (): ZonosCountryFlag;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/zonos-country-flag2.js

@@ -1,50 +1,55 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { b as localizationStore } from './localization.js';
+import { d as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 
-const zonosCountryFlagCss = ":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{display:-ms-inline-flexbox;display:inline-flex}:host .flag-container{position:relative;overflow:hidden;width:100%;height:100%}:host .flag-icon{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}";
+const zonosCountryFlagCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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{display:-ms-inline-flexbox;display:inline-flex}:host .flag-container{position:relative;overflow:hidden;width:100%;height:100%}:host .flag-icon{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}";
 
 const FLAG_URL = "https://zonos-store-assets.s3.amazonaws.com/images/elements-flags";
 const ZonosCountryFlag = /*@__PURE__*/ proxyCustomElement(class ZonosCountryFlag extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.class = '';
-    this.countryCode = localizationStore.selectedCountryCode;
-    this.size = undefined;
-  }
-  render() {
-    if (!this.el.shadowRoot || !this.countryCode) {
-      return null;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.class = '';
+        this.countryCode = localizationStore.selectedCountryCode;
+        this.size = undefined;
     }
-    const flagUrl = `${FLAG_URL}/${this.countryCode}.svg`;
-    return (h(Host, { class: "zonos--elements", style: this.size
-        ? {
-          height: `${this.size}px`,
-          width: `${this.size}px`,
+    render() {
+        if (!this.el.shadowRoot || !this.countryCode) {
+            return null;
         }
-        : {} }, h("div", { class: classes([`flag-container`, this.class]) }, h("div", { class: "flag-icon", style: { backgroundImage: `url(${flagUrl})` } }))));
-  }
-  get el() { return this; }
-  static get style() { return zonosCountryFlagCss; }
+        const flagUrl = `${FLAG_URL}/${this.countryCode}.svg`;
+        const font = zonosStoreFontFamily();
+        return (h(Host, { class: "zonos--elements", style: this.size
+                ? {
+                    '--font-family': font,
+                    height: `${this.size}px`,
+                    width: `${this.size}px`,
+                }
+                : {
+                    '--font-family': font,
+                } }, h("div", { class: classes([`flag-container`, this.class]) }, h("div", { class: "flag-icon", style: { backgroundImage: `url(${flagUrl})` } }))));
+    }
+    get el() { return this; }
+    static get style() { return zonosCountryFlagCss; }
 }, [1, "zonos-country-flag", {
-    "class": [1],
-    "countryCode": [1, "country-code"],
-    "size": [2]
-  }]);
+        "class": [1],
+        "countryCode": [1, "country-code"],
+        "size": [2]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-country-flag"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-country-flag":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosCountryFlag);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-country-flag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-country-flag":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCountryFlag);
+            }
+            break;
+    } });
 }
 
 export { ZonosCountryFlag as Z, defineCustomElement as d };

package/dist/components/zonos-country-select.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosCountrySelect extends Components.ZonosCountrySelect, HTMLElement {}
 export const ZonosCountrySelect: {
-  prototype: ZonosCountrySelect;
-  new (): ZonosCountrySelect;
+    prototype: ZonosCountrySelect;
+    new (): ZonosCountrySelect;
 };
 /**
  * Used to define this component and all nested components recursively.