@zonos/elements 1.0.16

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

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9542d2e7.js');
+const cart = require('./cart-e27fd17c.js');
+const localization = require('./localization-f6a1b679.js');
+const zonosStore = require('./zonosStore-960e5542.js');
+require('./isDarkColor-a86b8a05.js');
+require('./getBorderRadius-2904800c.js');
+
+const getZonosSetting = async () => {
+  const url = `${"https://route.js.zonos.com"}/api/zonos-setting`;
+  const { errors, json } = await localization.handleFetch(url);
+  if (errors.length) {
+    localization.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 = (triggerAnchorElement) => {
+  // append checkout component if doesn't exist
+  const checkoutElement = document.querySelector('zonos-checkout');
+  if (!checkoutElement) {
+    const newCheckoutElement = document.createElement('zonos-checkout');
+    newCheckoutElement.buttonAnchorElements = triggerAnchorElement;
+    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 (!localization.isValidSelector(config.placeOrderButtonSelector)) {
+    localization.logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
+    return;
+  }
+  const triggerElement = document.querySelectorAll(config.placeOrderButtonSelector);
+  injectCheckoutElement(triggerElement);
+};
+
+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);
+  }
+};
+const initHello = async (helloSettings) => {
+  const { anchorElementSelector } = helloSettings;
+  // check if checkout button anchor selector user pass in is valid to setup hello
+  if (!anchorElementSelector || !localization.isValidSelector(anchorElementSelector)) {
+    localization.logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
+    return;
+  }
+  const triggerElement = document.querySelector(anchorElementSelector);
+  localization.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 ZonosController = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stripeInitEvent = index.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
+      localization.log('Stripe is not loaded yet - cannot init checkout element', 'warn');
+      return;
+    }
+    cart.stripeStore.stripe = stripe;
+    void initCheckout(zonosStore.zonosStore.checkoutSettings);
+    localization.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.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') {
+        localization.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
+      zonosStore.zonosStoreInitSetting({
+        overrideSettings: this.config,
+        zonosSettings: json,
+      });
+      if (zonosStore.zonosStore.helloSettings) {
+        void initHello(zonosStore.zonosStore.helloSettings);
+      }
+      // init localization store
+      await localization.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) {
+        localization.log('Checkout failed to load -- missing publishable key', 'warn');
+        return;
+      }
+      // send publishable key out to load stripe
+      this.stripeInitEvent.emit({
+        publishableKey: publishableKey.token,
+      });
+      // eslint-disable-next-line no-console
+      localization.log('zonos controller loaded');
+    })();
+  }
+  /**
+   * Show notification
+   */
+  async showNotification(notification) {
+    const notificationElement = document.querySelector('zonos-notification');
+    if (!notificationElement) {
+      localization.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) {
+    zonosStore.zonosStoreInitSetting({
+      overrideSettings: config,
+      zonosSettings: null,
+    });
+  }
+  /**
+   * Override country code for storybook
+   */
+  async overrideCountry(countryCode) {
+    void localization.localizationStoreUpdateSelectedCountryCode(countryCode);
+  }
+  render() {
+    return index.h(index.Host, { class: "zonos--elements" });
+  }
+};
+ZonosController.style = zonosControllerCss;
+
+exports.zonos_controller = ZonosController;
+
+//# sourceMappingURL=zonos-controller.cjs.entry.js.map

package/dist/cjs/zonos-controller.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"zonos-controller.entry.cjs.js","mappings":"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","names":["handleFetch","logError","isValidSelector","log","stripeStore","zonosStore","zonosStoreInitSetting","initLocalizationStore","localizationStoreUpdateSelectedCountryCode","h","Host"],"sources":["src/components/utils/api/getZonosSetting.ts","src/components/utils/checkout/initCheckout.ts","src/components/utils/hello/initHello.ts","src/components/main/zonos-controller.scss?tag=zonos-controller&encapsulation=shadow","src/components/main/zonos-controller.tsx"],"sourcesContent":["import { handleFetch } from 'src/components/utils/handleFetch';\nimport { logError } from 'src/components/utils/logging/logError';\nimport type { ZonosSettingsQuery } from 'src/types/generated/graphql.customer.types';\n\nexport const getZonosSetting = async () => {\n  const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-setting`;\n  const { errors, json } = await handleFetch<ZonosSettingsQuery>(url);\n  if (errors.length) {\n    logError(\n      `Error occurs when getting zonos settings. If this is not an unauthorized error, it will use user setting or default setting`,\n    );\n    return { errors, json: null };\n  }\n  return { errors: [], json };\n};\n","import { isValidSelector } from 'src/components/utils/isValidSelector';\nimport { logError } from 'src/components/utils/logging/logError';\nimport type { CheckoutConfig } from 'src/types/checkout/CheckoutConfig';\n\nconst injectCheckoutElement = (triggerAnchorElement: HTMLElement[] | null) => {\n  // append checkout component if doesn't exist\n  const checkoutElement = document.querySelector('zonos-checkout');\n\n  if (!checkoutElement) {\n    const newCheckoutElement = document.createElement('zonos-checkout');\n    newCheckoutElement.buttonAnchorElements = triggerAnchorElement;\n\n    document.body.appendChild(newCheckoutElement);\n  }\n};\n\nexport const initCheckout = async (config: Partial<CheckoutConfig>) => {\n  if (!config.placeOrderButtonSelector) {\n    // do nothing if checkout button anchor is not set\n    return;\n  }\n\n  // check if checkout button anchor selector user pass in is valid\n  if (!isValidSelector(config.placeOrderButtonSelector)) {\n    logError(\n      `Selector checkoutButtonAnchor \"${config.placeOrderButtonSelector}\" is not a valid selector`,\n    );\n    return;\n  }\n\n  const triggerElement = document.querySelectorAll(\n    config.placeOrderButtonSelector,\n  );\n  injectCheckoutElement(triggerElement as unknown as HTMLElement[]);\n};\n","import { isValidSelector } from 'src/components/utils/isValidSelector';\nimport { log } from 'src/components/utils/logging/log';\nimport { logError } from 'src/components/utils/logging/logError';\nimport type { HelloSettingFragment } from 'src/types/generated/graphql.customer.types';\n\nconst injectHelloComponent = (triggerAnchorElement: HTMLElement | null) => {\n  // append checkout component if doesn't exist\n  const helloElement = document.querySelector('zonos-hello');\n\n  if (!helloElement && triggerAnchorElement) {\n    const newHelloElement = document.createElement('zonos-hello');\n    triggerAnchorElement.appendChild(newHelloElement);\n  }\n};\n\nexport const initHello = async (\n  helloSettings: Partial<HelloSettingFragment>,\n) => {\n  const { anchorElementSelector } = helloSettings;\n  // check if checkout button anchor selector user pass in is valid to setup hello\n  if (!anchorElementSelector || !isValidSelector(anchorElementSelector)) {\n    logError(\n      `Selector anchorElementSelector \"${helloSettings.anchorElementSelector}\" is not a valid selector.`,\n    );\n    return;\n  }\n\n  const triggerElement = document.querySelector<HTMLElement>(\n    anchorElementSelector,\n  );\n\n  log('Hello init complete');\n  injectHelloComponent(triggerElement);\n};\n",":host {\n  visibility: hidden;\n  opacity: 0;\n  height: 0;\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport type { Stripe } from '@stripe/stripe-js';\n\nimport type { NotificationInit } from 'src/components/common/zonos-notification/zonos-notification';\nimport { stripeStore } from 'src/components/store/checkout/stripe';\nimport {\n  initLocalizationStore,\n  localizationStoreUpdateSelectedCountryCode,\n} from 'src/components/store/hello/localization';\nimport {\n  zonosStore,\n  zonosStoreInitSetting,\n} from 'src/components/store/zonosStore';\nimport { getZonosSetting } from 'src/components/utils/api/getZonosSetting';\nimport { initCheckout } from 'src/components/utils/checkout/initCheckout';\nimport { initHello } from 'src/components/utils/hello/initHello';\nimport { log } from 'src/components/utils/logging/log';\nimport type { LoadZonosParamsConfig } from 'src/scripts/zonos';\nimport type { CountryCode } from 'src/types/generated/graphql.customer.types';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-controller.scss',\n  tag: 'zonos-controller',\n})\nexport class ZonosController {\n  /**\n   * The zonos config object\n   */\n  @Prop() config!: LoadZonosParamsConfig;\n\n  /**\n   * The zonos api key\n   */\n  @Prop() zonosApiKey!: string;\n\n  /**\n   * Event emitted when stripe is initialized\n   */\n  @Event() stripeInitEvent?: EventEmitter<{ publishableKey: string }>;\n\n  /**\n   * Method to initialize checkout element\n   */\n  @Method()\n  public async initCheckoutElement(stripe: Stripe) {\n    if (!stripe) {\n      // eslint-disable-next-line no-console\n      log('Stripe is not loaded yet - cannot init checkout element', 'warn');\n      return;\n    }\n    stripeStore.stripe = stripe;\n    void initCheckout(zonosStore.checkoutSettings);\n    log('init checkout element');\n  }\n\n  /**\n   * Init zonos notification\n   */\n  private initZonosNotification() {\n    const existingNotification = document.querySelector('zonos-notification');\n    if (existingNotification) {\n      return;\n    }\n    const zonosNotification = document.createElement('zonos-notification');\n    document.body.appendChild(zonosNotification);\n  }\n\n  async componentWillLoad() {\n    zonosStore.zonosApiKey = this.zonosApiKey;\n    // running with scope async function to avoid blocking the main thread\n    (async () => {\n      const { errors, json } = await getZonosSetting();\n      if (errors[0]?.type.toString() === '403') {\n        log(\n          'Failed to load zonos settings. This domain may not have access',\n          'warn',\n        );\n        return;\n      }\n\n      // init zonos notification\n      this.initZonosNotification();\n\n      // load default setting if fail to load user setting\n      zonosStoreInitSetting({\n        overrideSettings: this.config,\n        zonosSettings: json,\n      });\n\n      if (zonosStore.helloSettings) {\n        void initHello(zonosStore.helloSettings);\n      }\n      // init localization store\n      await initLocalizationStore();\n\n      // checkout init\n      const publishableKey =\n        json?.checkoutSettings?.externalServiceTokens.find(\n          item => item.type === 'STRIPE_PUBLISHABLE_TOKEN',\n        ) || null;\n\n      if (!publishableKey || !this.stripeInitEvent) {\n        log('Checkout failed to load -- missing publishable key', 'warn');\n        return;\n      }\n\n      // send publishable key out to load stripe\n      this.stripeInitEvent.emit({\n        publishableKey: publishableKey.token,\n      });\n\n      // eslint-disable-next-line no-console\n      log('zonos controller loaded');\n    })();\n  }\n\n  /**\n   * Show notification\n   */\n  @Method()\n  public async showNotification(notification: NotificationInit) {\n    const notificationElement = document.querySelector('zonos-notification');\n    if (!notificationElement) {\n      log('Failed to show notification - zonos-notification not found', 'warn');\n      return;\n    }\n    void notificationElement.showNotification(notification);\n  }\n\n  /**\n   * Override the setting\n   * @param config config that need to override the default setting\n   */\n  @Method()\n  public async overrideConfig(config: LoadZonosParamsConfig) {\n    zonosStoreInitSetting({\n      overrideSettings: config,\n      zonosSettings: null,\n    });\n  }\n\n  /**\n   * Override country code for storybook\n   */\n  @Method()\n  public async overrideCountry(countryCode: CountryCode) {\n    void localizationStoreUpdateSelectedCountryCode(countryCode);\n  }\n\n  render() {\n    return <Host class=\"zonos--elements\"></Host>;\n  }\n}\n"],"version":3}