Inject JS in templates with correct domains

Signed-off-by: Egor Savkin <es@m-labs.hk>

README.md

@@ -12,12 +12,14 @@ Clone the project:
 
 Install Zola.
 
-Start:
+Start with targeting `m-labs.hk` domain:
 
   ```
   DOMAINNAME=m-labs.hk zola serve
   ```
 
+`DOMAINNAME=m-labs.hk` can be omitted, since it defaults to `m-labs.hk`. For any other domains it needs to be set explicitly.
+
 To build the .bundle.js from .jsx files:
 
   ```
@@ -25,3 +27,11 @@ To build the .bundle.js from .jsx files:
   npm install
   npm run build
   ```
+
+## Domain handling
+
+Environmental variable `DOMAINNAME` controls only the following links on the website:
+* email `mailto:` links
+* hook for the RFQ server (`window.API_RFQ`) variable
+
+If absent, `DOMAINNAME` defaults to `m-labs.hk`.

config.toml

@@ -11,4 +11,3 @@ highlight_code = true
 
 [extra]
 author = "M-Labs"
-domain = "m-labs.hk"

static/js/shop/Domained.jsx

@@ -1,8 +1,13 @@
 import React from "react";
-import {DomainedEmail} from "./DomainedEmail";
+import {DOMAIN} from "./utils";
 
 
-export const RFQMessages = {
+export function DomainedEmail({address}) {
+    const target = `${address}@${DOMAIN}`;
+    return <a href={"mailto:" + target}>{target}</a>
+}
+
+export const DomainedRFQMessages = {
     OK: <>We've received your request and will be in contact soon.</>,
     ERROR: <>We cannot receive your request. Try using the export by coping the configuration and send it to us at <DomainedEmail address="sales"/></>
-}
+}

static/js/shop/DomainedEmail.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import {DEFAULT_DOMAIN, INTL_DOMAIN, USE_INTL_DOMAIN} from "./utils";
-
-
-export function DomainedEmail({address}) {
-    const target = `${address}@${USE_INTL_DOMAIN ? INTL_DOMAIN : DEFAULT_DOMAIN}`;
-    return <a href={"mailto:" + target}>{target}</a>
-}

static/js/shop/Shop.jsx

@@ -9,7 +9,7 @@ import {Layout} from "./Layout";
 import {Catalog} from "./Catalog";
 import {OrderPanel} from "./OrderPanel";
 import {useShopStore} from "./shop_store";
-import {DomainedEmail} from "./DomainedEmail";
+import {DomainedEmail} from "./Domained";
 
 /**
  * Component that renders the entire shop

static/js/shop/shop_store.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import {createWithEqualityFn} from "zustand/traditional";
-import {data as shared_data, itemsUnfoldedList, USE_INTL_DOMAIN} from "./utils";
+import {DATA as shared_data, itemsUnfoldedList, API_RFQ} from "./utils";
 import {FillExtCrateData, FillExtOrderData, true_type_of} from "./options/utils";
 import {v4 as uuidv4} from "uuid";
 import {FillResources} from "./count_resources";
@@ -10,7 +10,7 @@ import {TriggerCrateWarnings, TriggerWarnings} from "./warnings";
 import {Validation, validateEmail, validateNote, validateJSONInput} from "./validate";
 import {CratesToJSON, JSONToCrates} from "./json_porter";
 import {ProcessOptionsToData} from "./options/Options";
-import {RFQMessages} from "./RFQMessages";
+import {DomainedRFQMessages} from "./Domained";
 
 
 const cards_to_pn_map = (cards) => {
@@ -229,7 +229,7 @@ const useSubmitForm = ((set, get) => ({
         status: Validation.OK,
         message: ""
     },
-    API_RFQ: USE_INTL_DOMAIN ? shared_data.INTL_API_RFQ : shared_data.API_RFQ,
+    API_RFQ: API_RFQ,
     email: {
         value: "",
         error: null
@@ -307,18 +307,18 @@ const useSubmitForm = ((set, get) => ({
             if (response.status !== 200) {
                 throw Error("Response status is not OK: " + response.status + ".\n" + response);
             }
-            get().finishSubmitForm({status: Validation.OK, message: RFQMessages.OK})
+            get().finishSubmitForm({status: Validation.OK, message: DomainedRFQMessages.OK})
         }, reason => {
             console.error("Request rejected, reason:", reason)
             get().finishSubmitForm({
                 status: Validation.Invalid,
-                message: RFQMessages.ERROR
+                message: DomainedRFQMessages.ERROR
             })
         }).catch(err => {
             console.error("Request failed, reason:", err)
             get().finishSubmitForm({
                 status: Validation.Invalid,
-                message: RFQMessages.ERROR
+                message: DomainedRFQMessages.ERROR
             })
         })
     },

static/js/shop/utils.js

@@ -1,7 +1,9 @@
 'use strict';
 
-export const data = window.shop_data;
-export const itemsUnfoldedList = Array.from(data.columns.catalog.categories.map(groupId => groupId.itemIds).flat());
+export const DATA = window.shop_data;
+export const DOMAIN = window.DOMAIN;
+export const API_RFQ = window.API_RFQ;
+export const itemsUnfoldedList = Array.from(DATA.columns.catalog.categories.map(groupId => groupId.itemIds).flat());
 
 export const productStyle = (style, snapshot, removeAnim, hovered, selected, cart=false) => {
     const custom = {
@@ -92,12 +94,3 @@ export function compareObjectsEmptiness(a, b) {
     return (!a && !b) || (!(!a !== !b) && Object.getPrototypeOf(a) === Object.getPrototypeOf(b) &&
         (Object.getPrototypeOf(a) !== Object.getPrototypeOf([]) || !!Object.keys(a).length === !!Object.keys(b).length))
 }
-
-export const INTL_DOMAIN = "m-labs-intl.com";
-export const DEFAULT_DOMAIN = "m-labs.hk";
-
-// #!if intl_domain
-export const USE_INTL_DOMAIN = true;
-// #!else
-export const USE_INTL_DOMAIN = window.location.hostname === INTL_DOMAIN;
-// #!endif

static/js/shop_data.js

@@ -1,7 +1,4 @@
 const shop_data = {
-
-  API_RFQ: 'https://hooks.m-labs.hk/rfq',
-  INTL_API_RFQ: 'https://m-labs-intl.com/api/rfq',
   currency: 'USD',
 
   crateModes: {

templates/page-place-order.html

@@ -46,6 +46,11 @@
   <!-- Load Data -->
   <script src="{{ get_url(path='js/shop_data.js', cachebust=true) }}"></script>
 
+  <script>
+    window.DOMAIN = "{{get_env(name="DOMAINNAME", default="m-labs.hk")}}";
+    window.API_RFQ = `https://hooks.${window.DOMAIN}/rfq`;
+  </script>
+
   <!-- Load our React component. -->
   <!-- <script type="text/babel" src="{{ get_url(path='js/shop.jsx', cachebust=true) }}"></script> -->
   <script src="{{ get_url(path='js/shop.bundle.js', cachebust=true) }}"></script>

webpack.config.js

@@ -25,8 +25,7 @@ module.exports = {
                             },
                             params: {
                                 ENV: process.env.NODE_ENV,
-                                disable_card_highlight: false,
-                                intl_domain: false
+                                disable_card_highlight: false
                             },
                             verbose: false,
                         }