bgType

src/components/background/PatternBackgroundProvider.tsx

@@ -8,10 +8,9 @@ import {
   clearPatternCssVariables,
   colorizeSvg,
   hexToRgba,
-  isCustomImageBackground,
-  isPatternBackground,
   normalizeBgNumber,
   PATTERN_BACKGROUND_OPACITY,
+  resolveBgType,
 } from "@/lib/helpers/backgroundUtils";
 import {
   applyCachedThemeToDom,
@@ -65,13 +64,14 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode })
   const [hydratedCache, setHydratedCache] = useState<CachedRestaurantTheme | null>(null);
   const [patternImageUrl, setPatternImageUrl] = useState<string | null>(null);
 
-  const isPattern = restaurant
-    ? isPatternBackground(restaurant)
-    : (hydratedCache?.isPattern ?? false);
+  const bgType = restaurant
+    ? resolveBgType(restaurant)
+    : hydratedCache
+      ? resolveBgType(hydratedCache)
+      : "color";
 
-  const isCustomImage = restaurant
-    ? isCustomImageBackground(restaurant)
-    : (!hydratedCache?.isPattern && !!hydratedCache?.bgUrl);
+  const isPattern = bgType === "pattern";
+  const isCustomImage = bgType === "custom";
   const menuColor =
     restaurant?.menuColor || hydratedCache?.menuColor || DEFAULT_MENU_COLOR;
   const baseTint = hexToRgba(menuColor, PATTERN_BACKGROUND_OPACITY);
@@ -93,6 +93,7 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode })
   useEffect(() => {
     if (!restaurantSlug) {
       clearPatternCssVariables();
+      clearCustomImageCssVariables();
       removeCachedThemeBackground();
       setPatternImageUrl(null);
       return;
@@ -101,19 +102,22 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode })
     if (!restaurant) return;
 
     const themeBase = buildThemeCacheFromRestaurant(restaurant);
+    const currentBgType = themeBase.bgType;
 
-    if (!themeBase.isPattern) {
+    if (currentBgType === "color") {
+      clearPatternCssVariables();
+      clearCustomImageCssVariables();
+      removeCachedThemeBackground();
+      setPatternImageUrl(null);
+      setThemeCache(restaurantSlug, { ...themeBase, patternDataUrl: null });
+      return;
+    }
+
+    if (currentBgType === "custom") {
       clearPatternCssVariables();
       setPatternImageUrl(null);
-
-      if (isCustomImageBackground(restaurant)) {
-        applyCustomImageCssVariables();
-        setThemeCache(restaurantSlug, { ...themeBase, patternDataUrl: null });
-      } else {
-        clearCustomImageCssVariables();
-        removeCachedThemeBackground();
-        setThemeCache(restaurantSlug, { ...themeBase, patternDataUrl: null });
-      }
+      applyCustomImageCssVariables();
+      setThemeCache(restaurantSlug, { ...themeBase, patternDataUrl: null });
       return;
     }
 

src/components/wrapper/PreferenceWrapper.tsx

@@ -134,6 +134,7 @@ function PreferenceWrapper({ children }: Props) {
         const themeBase = buildThemeCacheFromRestaurant(restaurant);
         setThemeCache(restaurantSlug, {
             menuColor,
+            bgType: themeBase.bgType,
             bgUrl: restaurant.bgUrl,
             bgBlur: themeBase.bgBlur,
             bgOpacity: themeBase.bgOpacity,