@foxpixel/react 0.2.1 → 0.2.3

package/dist/index.mjs

@@ -124,7 +124,8 @@ function FoxPixelProvider({ children, config = {}, queryClient }) {
   const value = useMemo(() => ({
     client,
     config,
-    queryClient: queryClient ?? null
+    queryClient: queryClient ?? null,
+    locale: config?.locale
   }), [client, config, queryClient]);
   return /* @__PURE__ */ jsx(FoxPixelContext.Provider, { value, children });
 }
@@ -352,11 +353,33 @@ function withAuth(Component, options = {}) {
 }
 
 // src/components/Editable.tsx
-import { createElement, useCallback as useCallback3, useState as useState7 } from "react";
+import { createElement, useCallback as useCallback3, useState as useState7, useEffect as useEffect7 } from "react";
 
 // src/hooks/useEditMode.ts
 import { useEffect as useEffect5, useState as useState5, useCallback as useCallback2 } from "react";
 var SITE_CONTENT_QUERY_KEY = "siteContent";
+var contentKeysOnPage = /* @__PURE__ */ new Set();
+var flushTimer = null;
+function scheduleFlushContentKeys() {
+  if (flushTimer) return;
+  flushTimer = setTimeout(() => {
+    flushTimer = null;
+    if (typeof window !== "undefined" && window.parent !== window) {
+      window.parent.postMessage(
+        { type: "FOXPIXEL_READY", payload: { contentKeys: Array.from(contentKeysOnPage) } },
+        "*"
+      );
+    }
+  }, 150);
+}
+function registerContentKey(key) {
+  contentKeysOnPage.add(key);
+  scheduleFlushContentKeys();
+}
+function unregisterContentKey(key) {
+  contentKeysOnPage.delete(key);
+  scheduleFlushContentKeys();
+}
 function useEditMode() {
   const [isEditMode, setIsEditMode] = useState5(false);
   useEffect5(() => {
@@ -377,19 +400,18 @@ function useEditModeMessaging() {
       if (!queryClient) return;
       const { type, payload } = event.data || {};
       if (type !== "FOXPIXEL_CONTENT_UPDATED" || !payload?.contentKey) return;
-      const { contentKey, newValue } = payload;
+      const { contentKey, newValue, locale } = payload;
+      const cacheKey2 = locale != null && locale !== "" ? [SITE_CONTENT_QUERY_KEY, contentKey, locale] : [SITE_CONTENT_QUERY_KEY, contentKey];
       if (typeof newValue === "string") {
         queryClient.setQueryData(
-          [SITE_CONTENT_QUERY_KEY, contentKey],
+          cacheKey2,
           (prev) => ({
             value: newValue,
             contentType: prev?.contentType ?? "TEXT"
           })
         );
       }
-      queryClient.invalidateQueries({
-        queryKey: [SITE_CONTENT_QUERY_KEY, contentKey]
-      });
+      queryClient.invalidateQueries({ queryKey: cacheKey2 });
     };
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
@@ -399,20 +421,19 @@ function useEditModeMessaging() {
 function useSendEditRequest() {
   const isEditMode = useEditMode();
   return useCallback2(
-    (contentKey, currentValue, contentType = "text", section, description) => {
+    (contentKey, currentValue, contentType = "text", section, description, locale) => {
       if (!isEditMode) return;
       if (typeof window !== "undefined" && window.parent !== window) {
+        const payload = {
+          contentKey,
+          currentValue,
+          contentType,
+          section,
+          description
+        };
+        if (locale != null && locale !== "") payload.locale = locale;
         window.parent.postMessage(
-          {
-            type: "FOXPIXEL_EDIT_CONTENT",
-            payload: {
-              contentKey,
-              currentValue,
-              contentType,
-              section,
-              description
-            }
-          },
+          { type: "FOXPIXEL_EDIT_CONTENT", payload },
           "*"
         );
       }
@@ -423,20 +444,23 @@ function useSendEditRequest() {
 
 // src/hooks/useSiteContentQuery.ts
 import { useState as useState6, useEffect as useEffect6, useRef } from "react";
-function getCached(queryClient, contentKey) {
-  const data = queryClient.getQueryData([
-    SITE_CONTENT_QUERY_KEY,
-    contentKey
-  ]);
+function queryKey(contentKey, locale) {
+  return locale != null && locale !== "" ? [SITE_CONTENT_QUERY_KEY, contentKey, locale] : [SITE_CONTENT_QUERY_KEY, contentKey];
+}
+function getCached(queryClient, contentKey, locale) {
+  const data = queryClient.getQueryData(
+    queryKey(contentKey, locale)
+  );
   if (data == null) return void 0;
   return { value: data.value ?? "", contentType: data.contentType ?? "TEXT" };
 }
 function useSiteContentQuery(contentKey, options) {
-  const { defaultValue } = options;
+  const { defaultValue, locale } = options;
+  const loc = locale != null && locale !== "" ? locale : void 0;
   const { client, queryClient } = useFoxPixelContext();
   const [state, setState] = useState6(() => {
     if (queryClient) {
-      const cached = getCached(queryClient, contentKey);
+      const cached = getCached(queryClient, contentKey, loc);
       if (cached) {
         return { value: cached.value, isLoading: false, contentType: cached.contentType };
       }
@@ -445,18 +469,20 @@ function useSiteContentQuery(contentKey, options) {
   });
   const contentKeyRef = useRef(contentKey);
   contentKeyRef.current = contentKey;
+  const localeRef = useRef(loc);
+  localeRef.current = loc;
   useEffect6(() => {
     if (!queryClient) {
       setState((s) => ({ ...s, value: defaultValue, isLoading: false }));
       return;
     }
     const key = contentKeyRef.current;
-    const queryKey = [SITE_CONTENT_QUERY_KEY, key];
+    const locCurrent = localeRef.current;
+    const qKey = queryKey(key, locCurrent);
     const queryFn = async () => {
       try {
-        const content = await client.get(
-          `/api/site/content/${encodeURIComponent(key)}`
-        );
+        const url = `/api/site/content/${encodeURIComponent(key)}` + (locCurrent ? `?locale=${encodeURIComponent(locCurrent)}` : "");
+        const content = await client.get(url);
         if (!content) return null;
         return {
           value: content.value ?? "",
@@ -470,7 +496,7 @@ function useSiteContentQuery(contentKey, options) {
     };
     let cancelled = false;
     queryClient.fetchQuery({
-      queryKey,
+      queryKey: qKey,
       queryFn,
       staleTime: 1e3 * 60 * 5,
       retry: 1
@@ -486,8 +512,11 @@ function useSiteContentQuery(contentKey, options) {
       setState((s) => ({ ...s, value: defaultValue, isLoading: false }));
     });
     const unsub = queryClient.getQueryCache().subscribe((event) => {
-      if (event?.type === "updated" && event?.query?.queryKey[1] === key) {
-        const cached = getCached(queryClient, key);
+      const q = event?.query;
+      const keyMatch = q?.queryKey?.[1] === key;
+      const locMatch = (q?.queryKey?.[2] ?? void 0) === locCurrent;
+      if (event?.type === "updated" && q && keyMatch && locMatch) {
+        const cached = getCached(queryClient, key, locCurrent);
         if (cached && !cancelled) {
           setState({
             value: cached.value,
@@ -501,7 +530,7 @@ function useSiteContentQuery(contentKey, options) {
       cancelled = true;
       unsub();
     };
-  }, [queryClient, contentKey, defaultValue, client]);
+  }, [queryClient, contentKey, defaultValue, client, loc]);
   return state;
 }
 
@@ -579,15 +608,25 @@ function Editable({
   defaultValue,
   as = "span",
   multiline = false,
-  className
+  className,
+  locale: localeProp
 }) {
   const [isHovered, setIsHovered] = useState7(false);
+  const { locale: contextLocale } = useFoxPixelContext();
+  const locale = localeProp ?? contextLocale;
   const isEditMode = useEditModeMessaging();
   const sendEditRequest = useSendEditRequest();
   const { value, isLoading, contentType } = useSiteContentQuery(contentKey, {
-    defaultValue
+    defaultValue,
+    locale
   });
   const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
+  useEffect7(() => {
+    if (isEditMode) {
+      registerContentKey(contentKey);
+      return () => unregisterContentKey(contentKey);
+    }
+  }, [isEditMode, contentKey]);
   const handleClick = useCallback3(
     (e) => {
       if (isEditMode) {
@@ -597,11 +636,13 @@ function Editable({
           contentKey,
           value,
           contentType?.toLowerCase() || "text",
-          section
+          section,
+          void 0,
+          locale
         );
       }
     },
-    [isEditMode, contentKey, value, contentType, section, sendEditRequest]
+    [isEditMode, contentKey, value, contentType, section, sendEditRequest, locale]
   );
   if (isLoading) {
     return createElement(as, {
@@ -674,24 +715,34 @@ function EditableHTML({
   contentKey,
   defaultValue,
   as = "div",
-  className
+  className,
+  locale: localeProp
 }) {
   const [isHovered, setIsHovered] = useState7(false);
+  const { locale: contextLocale } = useFoxPixelContext();
+  const locale = localeProp ?? contextLocale;
   const isEditMode = useEditModeMessaging();
   const sendEditRequest = useSendEditRequest();
   const { value, isLoading } = useSiteContentQuery(contentKey, {
-    defaultValue
+    defaultValue,
+    locale
   });
   const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
+  useEffect7(() => {
+    if (isEditMode) {
+      registerContentKey(contentKey);
+      return () => unregisterContentKey(contentKey);
+    }
+  }, [isEditMode, contentKey]);
   const handleClick = useCallback3(
     (e) => {
       if (isEditMode) {
         e.preventDefault();
         e.stopPropagation();
-        sendEditRequest(contentKey, value, "html", section);
+        sendEditRequest(contentKey, value, "html", section, void 0, locale);
       }
     },
-    [isEditMode, contentKey, value, section, sendEditRequest]
+    [isEditMode, contentKey, value, section, sendEditRequest, locale]
   );
   if (isLoading) {
     return createElement(as, {
@@ -740,24 +791,34 @@ function EditableImage({
   className,
   width,
   height,
-  priority = false
+  priority = false,
+  locale: localeProp
 }) {
   const [isHovered, setIsHovered] = useState7(false);
+  const { locale: contextLocale } = useFoxPixelContext();
+  const locale = localeProp ?? contextLocale;
   const isEditMode = useEditModeMessaging();
   const sendEditRequest = useSendEditRequest();
   const { value: src, isLoading } = useSiteContentQuery(contentKey, {
-    defaultValue
+    defaultValue,
+    locale
   });
   const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
+  useEffect7(() => {
+    if (isEditMode) {
+      registerContentKey(contentKey);
+      return () => unregisterContentKey(contentKey);
+    }
+  }, [isEditMode, contentKey]);
   const handleClick = useCallback3(
     (e) => {
       if (isEditMode) {
         e.preventDefault();
         e.stopPropagation();
-        sendEditRequest(contentKey, src, "image", section);
+        sendEditRequest(contentKey, src, "image", section, void 0, locale);
       }
     },
-    [isEditMode, contentKey, src, section, sendEditRequest]
+    [isEditMode, contentKey, src, section, sendEditRequest, locale]
   );
   if (isLoading) {
     return /* @__PURE__ */ jsx6(
@@ -812,7 +873,7 @@ function EditableImage({
 }
 
 // src/hooks/useServices.ts
-import { useState as useState8, useEffect as useEffect7 } from "react";
+import { useState as useState8, useEffect as useEffect8 } from "react";
 function useServices(options = {}) {
   const { client } = useFoxPixelContext();
   const [services, setServices] = useState8(null);
@@ -835,7 +896,7 @@ function useServices(options = {}) {
       setIsLoading(false);
     }
   };
-  useEffect7(() => {
+  useEffect8(() => {
     fetchServices();
   }, [options.category, options.active]);
   return {
@@ -901,22 +962,22 @@ function useContactCapture() {
 }
 
 // src/hooks/useSiteContent.ts
-import { useState as useState11, useEffect as useEffect8, useCallback as useCallback4 } from "react";
+import { useState as useState11, useEffect as useEffect9, useCallback as useCallback4 } from "react";
 function useSiteContent(contentKey, options = {}) {
-  const { defaultValue = "", fetchOnMount = true } = options;
+  const { defaultValue = "", fetchOnMount = true, locale } = options;
   const { client } = useFoxPixelContext();
   const { user, hasPermission } = useAuth();
   const [data, setData] = useState11(null);
   const [isLoading, setIsLoading] = useState11(fetchOnMount);
   const [error, setError] = useState11(null);
   const canEdit = user !== null && hasPermission("site:content:update");
+  const queryLocale = locale != null && locale !== "" ? locale : void 0;
   const fetchContent = useCallback4(async () => {
     try {
       setIsLoading(true);
       setError(null);
-      const content = await client.get(
-        `/api/site/content/${encodeURIComponent(contentKey)}`
-      );
+      const url = `/api/site/content/${encodeURIComponent(contentKey)}` + (queryLocale ? `?locale=${encodeURIComponent(queryLocale)}` : "");
+      const content = await client.get(url);
       setData(content);
     } catch (err) {
       if (err?.status === 404) {
@@ -927,21 +988,23 @@ function useSiteContent(contentKey, options = {}) {
     } finally {
       setIsLoading(false);
     }
-  }, [client, contentKey]);
+  }, [client, contentKey, queryLocale]);
   const updateContent = useCallback4(async (newValue) => {
     try {
       setError(null);
+      const body = { value: newValue };
+      if (queryLocale) body.locale = queryLocale;
       const updated = await client.put(
         `/api/site/content/${encodeURIComponent(contentKey)}`,
-        { value: newValue }
+        body
       );
       setData(updated);
     } catch (err) {
       setError(err);
       throw err;
     }
-  }, [client, contentKey]);
-  useEffect8(() => {
+  }, [client, contentKey, queryLocale]);
+  useEffect9(() => {
     if (fetchOnMount) {
       fetchContent();
     }
@@ -958,11 +1021,12 @@ function useSiteContent(contentKey, options = {}) {
   };
 }
 function useSiteContents(contentKeys, options = {}) {
-  const { defaults = {} } = options;
+  const { defaults = {}, locale } = options;
   const { client } = useFoxPixelContext();
   const [data, setData] = useState11({});
   const [isLoading, setIsLoading] = useState11(true);
   const [error, setError] = useState11(null);
+  const body = locale != null && locale !== "" ? { keys: contentKeys, locale } : contentKeys;
   const fetchContents = useCallback4(async () => {
     if (contentKeys.length === 0) {
       setData({});
@@ -974,7 +1038,7 @@ function useSiteContents(contentKeys, options = {}) {
       setError(null);
       const contents = await client.post(
         "/api/site/content/batch",
-        contentKeys
+        body
       );
       setData(contents);
     } catch (err) {
@@ -982,8 +1046,8 @@ function useSiteContents(contentKeys, options = {}) {
     } finally {
       setIsLoading(false);
     }
-  }, [client, contentKeys.join(",")]);
-  useEffect8(() => {
+  }, [client, contentKeys.join(","), locale]);
+  useEffect9(() => {
     fetchContents();
   }, [fetchContents]);
   const getValue = useCallback4((key, defaultValue) => {
@@ -1001,26 +1065,26 @@ function useSiteContents(contentKeys, options = {}) {
     refetch: fetchContents
   };
 }
-function useSiteContentSection(section) {
+function useSiteContentSection(section, options = {}) {
+  const { locale } = options;
   const { client } = useFoxPixelContext();
   const [contents, setContents] = useState11([]);
   const [isLoading, setIsLoading] = useState11(true);
   const [error, setError] = useState11(null);
+  const url = `/api/site/content/section/${encodeURIComponent(section)}` + (locale != null && locale !== "" ? `?locale=${encodeURIComponent(locale)}` : "");
   const fetchContents = useCallback4(async () => {
     try {
       setIsLoading(true);
       setError(null);
-      const data = await client.get(
-        `/api/site/content/section/${encodeURIComponent(section)}`
-      );
+      const data = await client.get(url);
       setContents(data);
     } catch (err) {
       setError(err);
     } finally {
       setIsLoading(false);
     }
-  }, [client, section]);
-  useEffect8(() => {
+  }, [client, section, locale]);
+  useEffect9(() => {
     fetchContents();
   }, [fetchContents]);
   return {
@@ -1032,37 +1096,43 @@ function useSiteContentSection(section) {
 }
 
 // src/prefetchSiteContent.ts
+function cacheKey(contentKey, locale) {
+  return locale != null && locale !== "" ? [SITE_CONTENT_QUERY_KEY, contentKey, locale] : [SITE_CONTENT_QUERY_KEY, contentKey];
+}
 async function prefetchSiteContent(queryClient, options) {
-  const { apiUrl, apiKey, tenantId, contentKeys } = options;
+  const { apiUrl, apiKey, tenantId, contentKeys, locale } = options;
   const client = new FoxPixelHttpClient({ apiUrl, apiKey, tenantId });
-  await Promise.all(
-    contentKeys.map(async (contentKey) => {
-      try {
-        const content = await client.get(
-          `/api/site/content/${encodeURIComponent(contentKey)}`
-        );
-        queryClient.setQueryData(
-          [SITE_CONTENT_QUERY_KEY, contentKey],
-          {
-            value: content?.value ?? "",
-            contentType: content?.contentType ?? "TEXT"
+  const locales = locale == null ? [void 0] : Array.isArray(locale) ? locale : [locale];
+  const tasks = [];
+  for (const contentKey of contentKeys) {
+    for (const loc of locales) {
+      tasks.push(
+        (async () => {
+          try {
+            const url = `/api/site/content/${encodeURIComponent(contentKey)}` + (loc != null && loc !== "" ? `?locale=${encodeURIComponent(loc)}` : "");
+            const content = await client.get(url);
+            queryClient.setQueryData(cacheKey(contentKey, loc), {
+              value: content?.value ?? "",
+              contentType: content?.contentType ?? "TEXT"
+            });
+          } catch (err) {
+            const status = err?.response?.status;
+            if (status === 404) {
+              queryClient.setQueryData(cacheKey(contentKey, loc), {
+                value: "",
+                contentType: "TEXT"
+              });
+            }
           }
-        );
-      } catch (err) {
-        const status = err?.response?.status;
-        if (status === 404) {
-          queryClient.setQueryData([SITE_CONTENT_QUERY_KEY, contentKey], {
-            value: "",
-            contentType: "TEXT"
-          });
-        }
-      }
-    })
-  );
+        })()
+      );
+    }
+  }
+  await Promise.all(tasks);
 }
 
 // src/blog/hooks.ts
-import { useState as useState12, useEffect as useEffect9 } from "react";
+import { useState as useState12, useEffect as useEffect10 } from "react";
 function useBlogPosts(options = {}) {
   const { client } = useFoxPixelContext();
   const [data, setData] = useState12(null);
@@ -1087,7 +1157,7 @@ function useBlogPosts(options = {}) {
       setIsLoading(false);
     }
   };
-  useEffect9(() => {
+  useEffect10(() => {
     fetchPosts();
   }, [page, limit]);
   return {
@@ -1120,7 +1190,7 @@ function useBlogPost(slug) {
       setIsLoading(false);
     }
   };
-  useEffect9(() => {
+  useEffect10(() => {
     fetchPost();
   }, [slug]);
   return {
@@ -1148,7 +1218,7 @@ function useBlogCategories() {
       setIsLoading(false);
     }
   };
-  useEffect9(() => {
+  useEffect10(() => {
     fetchCategories();
   }, []);
   return {
@@ -1176,7 +1246,7 @@ function useBlogTags() {
       setIsLoading(false);
     }
   };
-  useEffect9(() => {
+  useEffect10(() => {
     fetchTags();
   }, []);
   return {
@@ -1211,7 +1281,7 @@ function useBlogComments(slug) {
       setIsLoading(false);
     }
   };
-  useEffect9(() => {
+  useEffect10(() => {
     fetchComments();
   }, [slug]);
   return {
@@ -1272,7 +1342,7 @@ function useBlogFeaturedPosts(limit = 6) {
       setIsLoading(false);
     }
   };
-  useEffect9(() => {
+  useEffect10(() => {
     fetchFeatured();
   }, [limit]);
   return {
@@ -1366,7 +1436,7 @@ function useNewsletterUnsubscribe() {
 }
 
 // src/blog/admin-hooks.ts
-import { useState as useState13, useEffect as useEffect10, useCallback as useCallback5 } from "react";
+import { useState as useState13, useEffect as useEffect11, useCallback as useCallback5 } from "react";
 function useAdminBlogPosts(options = {}) {
   const { client } = useFoxPixelContext();
   const [data, setData] = useState13(null);
@@ -1389,7 +1459,7 @@ function useAdminBlogPosts(options = {}) {
       setIsLoading(false);
     }
   }, [client, page, size]);
-  useEffect10(() => {
+  useEffect11(() => {
     fetchPosts();
   }, [fetchPosts]);
   return { data, isLoading, error, refetch: fetchPosts };
@@ -1416,7 +1486,7 @@ function useAdminBlogPost(id) {
       setIsLoading(false);
     }
   }, [client, id]);
-  useEffect10(() => {
+  useEffect11(() => {
     fetchPost();
   }, [fetchPost]);
   return { data, isLoading, error, refetch: fetchPost };
@@ -1483,7 +1553,7 @@ function useAdminBlogCategories() {
       setIsLoading(false);
     }
   }, [client]);
-  useEffect10(() => {
+  useEffect11(() => {
     fetchCategories();
   }, [fetchCategories]);
   const create = async (payload) => {
@@ -1535,7 +1605,7 @@ function useAdminBlogTags() {
       setIsLoading(false);
     }
   }, [client]);
-  useEffect10(() => {
+  useEffect11(() => {
     fetchTags();
   }, [fetchTags]);
   const create = async (payload) => {
@@ -1593,7 +1663,7 @@ function useAdminBlogComments(options = {}) {
       setIsLoading(false);
     }
   }, [client, status, postId, page, size]);
-  useEffect10(() => {
+  useEffect11(() => {
     fetchComments();
   }, [fetchComments]);
   const updateStatus = async (id, newStatus) => {
@@ -1640,7 +1710,7 @@ function useAdminNewsletterSubscribers(options = {}) {
       setIsLoading(false);
     }
   }, [client, status, page, size]);
-  useEffect10(() => {
+  useEffect11(() => {
     fetchSubscribers();
   }, [fetchSubscribers]);
   const remove = async (id) => {
@@ -1672,7 +1742,7 @@ function useAdminNewsletterStats() {
       setIsLoading(false);
     }
   }, [client]);
-  useEffect10(() => {
+  useEffect11(() => {
     fetchStats();
   }, [fetchStats]);
   return { data, isLoading, error, refetch: fetchStats };
@@ -1694,7 +1764,7 @@ function useAdminBlogSettings() {
       setIsLoading(false);
     }
   }, [client]);
-  useEffect10(() => {
+  useEffect11(() => {
     fetchSettings();
   }, [fetchSettings]);
   const update = async (settings) => {
@@ -1726,7 +1796,7 @@ function useAdminBlogAnalytics() {
       setIsLoading(false);
     }
   }, [client]);
-  useEffect10(() => {
+  useEffect11(() => {
     fetchAnalytics();
   }, [fetchAnalytics]);
   return { data, isLoading, error, refetch: fetchAnalytics };