@zonos/elements 1.2.2 → 1.2.4-alpha.1

package/dist/collection/components/main/zonos-controller.js

@@ -1,295 +1,422 @@
 import { h, Host, } from "@stencil/core";
 import { stripeStore } from "../store/checkout/stripe";
 import { initLocalizationStore, localizationStoreUpdateSelectedCountryCode, } from "../store/hello/localization";
-import { zonosStore, zonosStoreInitSetting, } from "../store/zonosStore";
+import { zonosStore, zonosStoreFontFamily, zonosStoreInitSetting, } from "../store/zonosStore";
 import { getZonosSetting } from "../utils/api/getZonosSetting";
 import { initCheckout } from "../utils/checkout/initCheckout";
+import { handleFetch } from "../utils/handleFetch";
 import { initHello } from "../utils/hello/initHello";
 import { log } from "../utils/logging/log";
 export class ZonosController {
-  constructor() {
-    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;
+    constructor() {
+        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;
     }
-    stripeStore.stripe = stripe;
-    void initCheckout(zonosStore.checkoutSettings);
-    log('init checkout element');
-  }
-  /**
-   * Init zonos notification
-   */
-  initZonosNotification() {
-    const existingNotification = document.querySelector('zonos-notification');
-    if (existingNotification) {
-      return;
+    /**
+     * 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,
+        });
     }
-    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;
+    /**
+     * Init zonos notification
+     */
+    initZonosNotification() {
+        const existingNotification = document.querySelector('zonos-notification');
+        if (existingNotification) {
+            return;
+        }
+        const zonosNotification = document.createElement('zonos-notification');
+        document.body.appendChild(zonosNotification);
     }
-    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 is() { return "zonos-controller"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-controller.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-controller.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "config": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "LoadZonosParamsConfig",
-          "resolved": "{ appearance?: Partial<AppearanceConfig> | undefined; checkoutSettings?: Partial<CheckoutConfig> | undefined; currencyConverter?: CurrencyConverter | undefined; helloSettings?: Partial<HelloConfig> | undefined; onlineStoreSettings?: Partial<OnlineStoreConfig> | undefined; }",
-          "references": {
-            "LoadZonosParamsConfig": {
-              "location": "import",
-              "path": "src/scripts/zonos",
-              "id": "src/scripts/zonos.ts::LoadZonosParamsConfig"
+    /**
+     * 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;
             }
-          }
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The zonos config object"
+            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 });
         }
-      },
-      "zonosApiKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The zonos api key"
-        },
-        "attribute": "zonos-api-key",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "stripeInitEvent",
-        "name": "stripeInitEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted when stripe is initialized"
-        },
-        "complexType": {
-          "original": "{ publishableKey: string }",
-          "resolved": "{ publishableKey: string; }",
-          "references": {}
+        const routeUrl = process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL;
+        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;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "initCheckoutElement": {
-        "complexType": {
-          "signature": "(stripe: Stripe) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "Stripe": {
-              "location": "import",
-              "path": "@stripe/stripe-js",
-              "id": ""
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Method to initialize checkout element",
-          "tags": []
+        const fontUrl = json.fontUrl;
+        (_b = (_a = window.Zonos).injectSupportGoogleFont) === null || _b === void 0 ? void 0 : _b.call(_a, fontUrl);
+        if (!overrideFont) {
+            return;
         }
-      },
-      "showNotification": {
-        "complexType": {
-          "signature": "(notification: NotificationInit) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "NotificationInit": {
-              "location": "import",
-              "path": "src/components/common/zonos-notification/zonos-notification",
-              "id": "src/components/common/zonos-notification/zonos-notification.tsx::NotificationInit"
+        // 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;
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Show notification",
-          "tags": []
+            // 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;
         }
-      },
-      "overrideConfig": {
-        "complexType": {
-          "signature": "(config: LoadZonosParamsConfig) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "config config that need to override the default setting"
-                }],
-              "text": "config that need to override the default setting"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        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 is() { return "zonos-controller"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-controller.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-controller.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadZonosParamsConfig",
+                    "resolved": "{ appearance?: Partial<AppearanceConfig> | undefined; checkoutSettings?: Partial<CheckoutConfig> | undefined; currencyConverter?: CurrencyConverter | undefined; helloSettings?: Partial<HelloConfig> | undefined; onlineStoreSettings?: Partial<OnlineStoreConfig> | undefined; }",
+                    "references": {
+                        "LoadZonosParamsConfig": {
+                            "location": "import",
+                            "path": "src/scripts/zonos",
+                            "id": "src/scripts/zonos.ts::LoadZonosParamsConfig"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The zonos config object"
+                }
             },
-            "LoadZonosParamsConfig": {
-              "location": "import",
-              "path": "src/scripts/zonos",
-              "id": "src/scripts/zonos.ts::LoadZonosParamsConfig"
+            "zonosApiKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The zonos api key"
+                },
+                "attribute": "zonos-api-key",
+                "reflect": false
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Override the setting",
-          "tags": [{
-              "name": "param",
-              "text": "config config that need to override the default setting"
-            }]
-        }
-      },
-      "overrideCountry": {
-        "complexType": {
-          "signature": "(countryCode: CountryCode) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get events() {
+        return [{
+                "method": "stripeInitEvent",
+                "name": "stripeInitEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when stripe is initialized"
+                },
+                "complexType": {
+                    "original": "{ publishableKey: string }",
+                    "resolved": "{ publishableKey: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "initCheckoutElement": {
+                "complexType": {
+                    "signature": "(stripe: Stripe) => Promise<void>",
+                    "parameters": [{
+                            "tags": [],
+                            "text": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Stripe": {
+                            "location": "import",
+                            "path": "@stripe/stripe-js",
+                            "id": ""
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to initialize checkout element",
+                    "tags": []
+                }
+            },
+            "setupGoogleFont": {
+                "complexType": {
+                    "signature": "(overrideFont?: string) => Promise<void>",
+                    "parameters": [{
+                            "tags": [],
+                            "text": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Setup google font",
+                    "tags": []
+                }
+            },
+            "showNotification": {
+                "complexType": {
+                    "signature": "(notification: NotificationInit) => Promise<void>",
+                    "parameters": [{
+                            "tags": [],
+                            "text": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NotificationInit": {
+                            "location": "import",
+                            "path": "src/components/common/zonos-notification/zonos-notification",
+                            "id": "src/components/common/zonos-notification/zonos-notification.tsx::NotificationInit"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Show notification",
+                    "tags": []
+                }
+            },
+            "overrideConfig": {
+                "complexType": {
+                    "signature": "(config: LoadZonosParamsConfig) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "config config that need to override the default setting"
+                                }],
+                            "text": "config that need to override the default setting"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "LoadZonosParamsConfig": {
+                            "location": "import",
+                            "path": "src/scripts/zonos",
+                            "id": "src/scripts/zonos.ts::LoadZonosParamsConfig"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Override the setting",
+                    "tags": [{
+                            "name": "param",
+                            "text": "config config that need to override the default setting"
+                        }]
+                }
             },
-            "CountryCode": {
-              "location": "import",
-              "path": "src/types/generated/graphql.customer.types",
-              "id": "src/types/generated/graphql.customer.types.ts::CountryCode"
+            "overrideCountry": {
+                "complexType": {
+                    "signature": "(countryCode: CountryCode) => Promise<void>",
+                    "parameters": [{
+                            "tags": [],
+                            "text": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.customer.types",
+                            "id": "src/types/generated/graphql.customer.types.ts::CountryCode"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Override country code for storybook",
+                    "tags": []
+                }
+            },
+            "getAppearanceSetting": {
+                "complexType": {
+                    "signature": "() => Promise<AppearanceConfig>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "AppearanceConfig": {
+                            "location": "import",
+                            "path": "src/components/store/zonosStore",
+                            "id": "src/components/store/zonosStore.ts::AppearanceConfig"
+                        }
+                    },
+                    "return": "Promise<AppearanceConfig>"
+                },
+                "docs": {
+                    "text": "Get appearance from setting",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Override country code for storybook",
-          "tags": []
-        }
-      }
-    };
-  }
+        };
+    }
 }