@weaverse/hydrogen 5.9.4 → 5.10.0

package/dist/index.mjs

@@ -4,8 +4,8 @@ export { isBrowser, isIframe, useChildInstances, useItemInstance, useParentInsta
 import { createSchema, isValidSchema } from '@weaverse/schema';
 export * from '@weaverse/schema';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, memo, useMemo, Suspense, useEffect, useContext } from 'react';
 import { useMatches, Await, useRevalidator, useNavigation, useLocation, useNavigate, useRouteLoaderData } from 'react-router';
-import { memo, useMemo, Suspense, createContext, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 // src/index.ts
@@ -33,6 +33,59 @@ var defaultComponents = [
     schema
   }
 ];
+function getNestedKey(obj, path, fallback) {
+  const keys = path.split(".");
+  let current = obj;
+  for (const key of keys) {
+    if (current == null || typeof current !== "object") {
+      return fallback;
+    }
+    current = current[key];
+  }
+  if (typeof current === "string") {
+    return current;
+  }
+  return fallback;
+}
+function interpolate(template, variables) {
+  if (!variables || Object.keys(variables).length === 0) {
+    return template;
+  }
+  return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+    const value = variables[key];
+    return value !== void 0 ? String(value) : match;
+  });
+}
+var ThemeTextContext = createContext(null);
+ThemeTextContext.displayName = "WeaverseThemeTextContext";
+function ThemeTextProvider({
+  staticContent,
+  merchantOverrides,
+  t: externalT,
+  children
+}) {
+  const value = useMemo(() => {
+    const t = (key, variables) => {
+      if (externalT) {
+        const external = externalT(key, variables);
+        if (external && external !== key) {
+          return external;
+        }
+      }
+      const override = merchantOverrides ? getNestedKey(merchantOverrides, key) : void 0;
+      const staticValue = getNestedKey(staticContent, key);
+      const raw = override ?? staticValue ?? key;
+      return interpolate(raw, variables);
+    };
+    return { t };
+  }, [staticContent, merchantOverrides, externalT]);
+  return /* @__PURE__ */ jsx(ThemeTextContext.Provider, { value, children });
+}
+function useThemeText() {
+  const ctx = useContext(ThemeTextContext);
+  if (!ctx) throw new Error("useThemeText must be used within <ThemeTextProvider>. Wrap your app with withWeaverse().");
+  return ctx;
+}
 function createFlatDataContext(matches) {
   const context = {};
   for (const match of matches) {
@@ -562,10 +615,27 @@ var WeaverseHydrogenRoot = memo(
 );
 var ThemeSettingsProvider = createContext(null);
 ThemeSettingsProvider.displayName = "WeaverseThemeSettingsProvider";
-function withWeaverse(Component) {
+function withWeaverse(Component, options) {
   return (props) => {
-    const { settings } = useThemeSettingsStore();
-    return /* @__PURE__ */ jsx(ThemeSettingsProvider.Provider, { value: settings, children: /* @__PURE__ */ jsx(Component, { ...props }) });
+    const themeSettingsStore = useThemeSettingsStore();
+    const { settings } = themeSettingsStore;
+    const themeTextData = useThemeTextData();
+    return /* @__PURE__ */ jsx(ThemeSettingsProvider.Provider, { value: settings, children: /* @__PURE__ */ jsx(
+      ThemeTextProvider,
+      {
+        merchantOverrides: themeTextData.merchantOverrides,
+        staticContent: themeTextData.staticContent,
+        t: options?.t,
+        children: /* @__PURE__ */ jsx(Component, { ...props })
+      }
+    ) });
+  };
+}
+function useThemeTextData() {
+  const data = useRouteLoaderData("root");
+  return {
+    staticContent: data?.weaverseTheme?.staticContent ?? {},
+    merchantOverrides: data?.weaverseTheme?.merchantOverrides
   };
 }
 function useThemeSettings() {
@@ -981,41 +1051,52 @@ var WeaverseClient = class {
       }
       const url = this.getApiUrl("project_configs");
       const body = JSON.stringify({ isDesignMode, projectId });
-      let data = await this.fetchWithCache(url, {
-        method: "POST",
-        strategy,
-        body,
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-          "Accept-Encoding": "gzip, deflate, br"
-        }
-      });
-      if (typeof data !== "object" || data === null) {
+      const [data, merchantOverrides] = await Promise.all([
+        this.fetchWithCache(url, {
+          method: "POST",
+          strategy,
+          body,
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Accept-Encoding": "gzip, deflate, br"
+          }
+        }),
+        this.fetchMerchantOverrides(strategy)
+      ]);
+      let result = data;
+      if (typeof result !== "object" || result === null) {
         console.warn(
           "Invalid theme settings response format, using defaults:",
           {
-            type: typeof data,
-            isString: typeof data === "string",
-            length: typeof data === "string" ? data.length : "N/A",
-            preview: typeof data === "string" ? `${data.substring(0, 50)}...` : String(data)
+            type: typeof result,
+            isString: typeof result === "string",
+            length: typeof result === "string" ? result.length : "N/A",
+            preview: typeof result === "string" ? `${result.substring(0, 50)}...` : String(result)
           }
         );
-        data = { theme: defaultThemeSettings };
+        result = { theme: defaultThemeSettings };
       }
       if (this.themeSchema?.settings || this.themeSchema?.inspector) {
-        if (!data.theme || typeof data.theme !== "object") {
-          data.theme = defaultThemeSettings;
+        if (!result.theme || typeof result.theme !== "object") {
+          result.theme = defaultThemeSettings;
         } else {
-          data.theme = {
+          result.theme = {
             ...defaultThemeSettings,
-            ...data.theme
+            ...result.theme
           };
         }
       }
+      const staticContent = this.themeSchema?.i18n?.staticContent;
+      if (staticContent) {
+        result.staticContent = staticContent;
+      }
+      if (merchantOverrides) {
+        result.merchantOverrides = merchantOverrides;
+      }
       if (this.configs.isDesignMode) {
-        data = {
-          ...data,
+        result = {
+          ...result,
           schema: this.themeSchema && typeof this.themeSchema === "object" ? {
             ...this.themeSchema,
             settings: this.themeSchema?.settings?.map((group) => ({
@@ -1034,18 +1115,57 @@ var WeaverseClient = class {
           publicEnv: this.configs.publicEnv
         };
       }
-      return data;
+      return result;
     } catch (error) {
       const errorMessage = "Unable to load theme settings";
       const errorDetails = this.extractErrorMessage(error);
       console.error(errorMessage, errorDetails);
       return {
         theme: defaultThemeSettings,
+        staticContent: this.themeSchema?.i18n?.staticContent,
         _error: errorDetails,
         _loadFailed: true
       };
     }
   };
+  /**
+   * Fetch locale-specific merchant overrides from the translation API.
+   * Returns a nested JSON object with translated values.
+   * Falls back to empty object on error to avoid blocking theme rendering.
+   */
+  fetchMerchantOverrides = async (strategy) => {
+    try {
+      const { projectId, weaverseHost } = this.configs;
+      const i18n = this.storefront.i18n;
+      if (!(projectId && weaverseHost)) {
+        return void 0;
+      }
+      const language = (i18n?.language || "en").toLowerCase();
+      const country = (i18n?.country || "us").toLowerCase();
+      const locale = `${language}-${country}`;
+      const url = `${weaverseHost}/api/translation/static?projectId=${projectId}&locale=${locale}`;
+      const overrides = await this.fetchWithCache(
+        url,
+        {
+          method: "GET",
+          strategy,
+          headers: {
+            Accept: "application/json"
+          }
+        }
+      );
+      if (typeof overrides === "object" && overrides !== null) {
+        return overrides;
+      }
+      return void 0;
+    } catch (error) {
+      console.warn(
+        "Unable to load merchant overrides, using theme defaults:",
+        this.extractErrorMessage(error)
+      );
+      return void 0;
+    }
+  };
   /**
    * Generate fallback page with default structure when page data is unavailable.
    * Used internally when API returns no page or when page needs default content.
@@ -1141,7 +1261,8 @@ var WeaverseClient = class {
         headers: {
           "Content-Type": "application/json",
           Accept: "application/json",
-          "Accept-Encoding": "gzip, deflate, br"
+          "Accept-Encoding": "gzip, deflate, br",
+          "X-Visitor-UA": request.headers.get("user-agent") || ""
         }
       };
       const url = this.getApiUrl("project");
@@ -1296,6 +1417,6 @@ var IMAGES_PLACEHOLDERS = {
   product_18: "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-watch-2-1024x1024.svg"
 };
 
-export { IMAGES_PLACEHOLDERS, WeaverseClient, WeaverseError, WeaverseHydrogen, WeaverseHydrogenItem, WeaverseHydrogenRoot, createWeaverseDataContext, defaultComponents, generateDataFromSchema, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, hasError, hasWeaverseStudio, isFetchProjectPayload, isProjectIdFunction, isThemeSettingsResponse, isValidHydrogenSchema, isWithCacheFetchResponse, registerComponent, useThemeSettings, useWeaverseDataContext, withWeaverse };
+export { IMAGES_PLACEHOLDERS, ThemeTextProvider, WeaverseClient, WeaverseError, WeaverseHydrogen, WeaverseHydrogenItem, WeaverseHydrogenRoot, createWeaverseDataContext, defaultComponents, generateDataFromSchema, getNestedKey, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, hasError, hasWeaverseStudio, interpolate, isFetchProjectPayload, isProjectIdFunction, isThemeSettingsResponse, isValidHydrogenSchema, isWithCacheFetchResponse, registerComponent, useThemeSettings, useThemeText, useWeaverseDataContext, withWeaverse };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map