background image

src/components/background/PatternBackgroundProvider.tsx

@@ -2,11 +2,15 @@
 
 import { useGetAbout } from "@/app/[name]/(Main)/about/hooks/useAboutData";
 import {
+  applyCustomImageCssVariables,
   applyPatternCssVariables,
+  clearCustomImageCssVariables,
   clearPatternCssVariables,
   colorizeSvg,
   hexToRgba,
+  isCustomImageBackground,
   isPatternBackground,
+  normalizeBgNumber,
   PATTERN_BACKGROUND_OPACITY,
 } from "@/lib/helpers/backgroundUtils";
 import {
@@ -16,6 +20,7 @@ import {
   removeCachedThemeBackground,
   setThemeCache,
   svgToDataUrl,
+  themeBackgroundMatches,
   type CachedRestaurantTheme,
 } from "@/lib/helpers/themeCache";
 import { useParams } from "next/navigation";
@@ -32,14 +37,25 @@ import {
 
 const DEFAULT_MENU_COLOR = "#1E3A8A";
 
+export type CustomImageSettings = {
+  bgUrl: string;
+  bgBlur: number | null;
+  bgOpacity: number | null;
+  bgOverlay: string | null;
+};
+
 type PatternBackgroundContextValue = {
   isPattern: boolean;
+  isCustomImage: boolean;
   backgroundStyle: CSSProperties;
+  customImageSettings: CustomImageSettings | null;
 };
 
 const PatternBackgroundContext = createContext<PatternBackgroundContextValue>({
   isPattern: false,
+  isCustomImage: false,
   backgroundStyle: {},
+  customImageSettings: null,
 });
 
 export function PatternBackgroundProvider({ children }: { children: ReactNode }) {
@@ -52,6 +68,10 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode })
   const isPattern = restaurant
     ? isPatternBackground(restaurant)
     : (hydratedCache?.isPattern ?? false);
+
+  const isCustomImage = restaurant
+    ? isCustomImageBackground(restaurant)
+    : (!hydratedCache?.isPattern && !!hydratedCache?.bgUrl);
   const menuColor =
     restaurant?.menuColor || hydratedCache?.menuColor || DEFAULT_MENU_COLOR;
   const baseTint = hexToRgba(menuColor, PATTERN_BACKGROUND_OPACITY);
@@ -84,15 +104,21 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode })
 
     if (!themeBase.isPattern) {
       clearPatternCssVariables();
-      removeCachedThemeBackground();
       setPatternImageUrl(null);
-      setThemeCache(restaurantSlug, {
-        ...themeBase,
-        patternDataUrl: null,
-      });
+
+      if (isCustomImageBackground(restaurant)) {
+        applyCustomImageCssVariables();
+        setThemeCache(restaurantSlug, { ...themeBase, patternDataUrl: null });
+      } else {
+        clearCustomImageCssVariables();
+        removeCachedThemeBackground();
+        setThemeCache(restaurantSlug, { ...themeBase, patternDataUrl: null });
+      }
       return;
     }
 
+    clearCustomImageCssVariables();
+
     applyPatternCssVariables(menuColor);
 
     if (!themeBase.bgUrl) {
@@ -110,9 +136,9 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode })
 
     const cached = getThemeCache(restaurantSlug);
     const cacheHit =
-      cached?.isPattern &&
-      cached.bgUrl === themeBase.bgUrl &&
-      cached.menuColor === menuColor &&
+      cached &&
+      themeBackgroundMatches(cached, restaurant) &&
+      cached.isPattern &&
       cached.patternDataUrl;
 
     if (cacheHit) {
@@ -178,9 +204,20 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode })
     [baseTint, patternImageUrl],
   );
 
+  const customImageSettings = useMemo<CustomImageSettings | null>(() => {
+    const src = restaurant?.bgUrl || hydratedCache?.bgUrl;
+    if (!isCustomImage || !src) return null;
+    return {
+      bgUrl: src,
+      bgBlur: normalizeBgNumber(restaurant?.bgBlur ?? hydratedCache?.bgBlur),
+      bgOpacity: normalizeBgNumber(restaurant?.bgOpacity ?? hydratedCache?.bgOpacity),
+      bgOverlay: restaurant?.bgOverlay ?? hydratedCache?.bgOverlay ?? null,
+    };
+  }, [isCustomImage, restaurant, hydratedCache]);
+
   const value = useMemo(
-    () => ({ isPattern, backgroundStyle }),
-    [backgroundStyle, isPattern],
+    () => ({ isPattern, isCustomImage, backgroundStyle, customImageSettings }),
+    [backgroundStyle, isPattern, isCustomImage, customImageSettings],
   );
 
   return (