fix update settings

src/pages/settings/components/DesignSettings.tsx

@@ -5,8 +5,8 @@ import { extractErrorMessage } from "@/config/func";
 import type { ErrorType } from "@/helpers/types";
 import { clx } from "@/helpers/utils";
 import DesignSlider from "@/pages/settings/components/DesignSlider";
-import { PATTERN_BACKGROUND_OPACITY, useBackgroundPatterns } from "@/pages/settings/hooks/usePatterns";
+import { getBackgroundPatternUrl, PATTERN_BACKGROUND_OPACITY, useBackgroundPatterns } from "@/pages/settings/hooks/usePatterns";
-import { useGetBackgrounds, useSetBackground } from "@/pages/settings/hooks/useSettingData";
+import { useGetBackgrounds, useGetRestaurant, useSetBackground, useUpdateRestaurant } from "@/pages/settings/hooks/useSettingData";
 import type { BackgroundItemType, SetBackgroundType } from "@/pages/settings/types/Types";
 import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
 import { DocumentUpload, Gallery, TickCircle, Trash } from "iconsax-react";
@@ -21,6 +21,12 @@ const UPLOAD_BOX_CLASS = "w-[200px] h-[362px] rounded-2xl border border-dashed b
 
 const getPatternBgUrl = (item: BackgroundItemType) => item.url ?? item.bgUrl ?? "";
 
+const normalizeBgUrl = (url: string) => {
+  if (!url) return "";
+  if (url.startsWith("http")) return url;
+  return `${import.meta.env.VITE_BASE_URL}${url.startsWith("/") ? url : `/${url}`}`;
+};
+
 const DesignSettings: FC = () => {
   const [menuColor, setMenuColor] = useState("#000000");
   const [appliedColor, setAppliedColor] = useState("#000000");
@@ -28,21 +34,54 @@ const DesignSettings: FC = () => {
   const [backgroundType, setBackgroundType] = useState<BackgroundType>("pattern");
   const [customImage, setCustomImage] = useState<File | null>(null);
   const [customImagePreview, setCustomImagePreview] = useState<string | null>(null);
+  const [existingBgUrl, setExistingBgUrl] = useState<string | null>(null);
   const [imageOpacity, setImageOpacity] = useState(100);
   const [imageBlur, setImageBlur] = useState(0);
   const [overlayDarkness, setOverlayDarkness] = useState(0);
+  const [isInitialized, setIsInitialized] = useState(false);
   const { data: backgrounds } = useGetBackgrounds();
   const { mutate: setBackground, isPending: isSavingBackground } = useSetBackground();
+  const { mutate: updateRestaurant, isPending: isUpdatingRestaurant } = useUpdateRestaurant();
   const { mutate: singleUpload, isPending: isUploadingImage } = useSingleUpload();
   const { patterns, isLoading: isPatternsLoading, isError: isPatternsError } = useBackgroundPatterns(appliedColor);
+  const { data: restaurant, refetch } = useGetRestaurant();
   const backgroundItems = useMemo(() => backgrounds?.data ?? [], [backgrounds]);
-  const isSaving = isSavingBackground || isUploadingImage;
+  const isSaving = isSavingBackground || isUploadingImage || isUpdatingRestaurant;
 
   useEffect(() => {
-    if (patterns[0]?.id) {
+    if (!restaurant?.data || isInitialized) return;
-      setSelectedPatternId((current) => current ?? patterns[0].id);
+
+    const restaurantData = restaurant.data;
+    const savedBgUrl = restaurantData.bgUrl;
+
+    if (savedBgUrl && backgroundItems.length === 0) return;
+
+    const color = restaurantData.menuColor || "#000000";
+    setMenuColor(color);
+    setAppliedColor(color);
+
+    if (savedBgUrl) {
+      const matchingPattern = backgroundItems.find(
+        (item) => getBackgroundPatternUrl(item) === normalizeBgUrl(savedBgUrl) || getPatternBgUrl(item) === savedBgUrl,
+      );
+
+      if (matchingPattern) {
+        setBackgroundType("pattern");
+        setSelectedPatternId(matchingPattern.id);
+      } else {
+        setBackgroundType("custom");
+        setExistingBgUrl(savedBgUrl);
+        setCustomImagePreview(normalizeBgUrl(savedBgUrl));
+        setImageOpacity(Number(restaurantData.bgOpacity) || 100);
+        setImageBlur(Number(restaurantData.bgBlur) || 0);
+        setOverlayDarkness(Number(restaurantData.bgOverlay) || 0);
       }
-  }, [patterns]);
+    } else if (backgroundItems[0]?.id) {
+      setSelectedPatternId(backgroundItems[0].id);
+    }
+
+    setIsInitialized(true);
+  }, [restaurant, backgroundItems, isInitialized]);
 
   useEffect(() => {
     const timer = setTimeout(() => setAppliedColor(menuColor), COLOR_APPLY_DELAY_MS);
@@ -50,10 +89,7 @@ const DesignSettings: FC = () => {
   }, [menuColor]);
 
   useEffect(() => {
-    if (!customImage) {
+    if (!customImage) return;
-      setCustomImagePreview(null);
-      return;
-    }
 
     const previewUrl = URL.createObjectURL(customImage);
     setCustomImagePreview(previewUrl);
@@ -75,12 +111,40 @@ const DesignSettings: FC = () => {
 
   const handleRemoveImage = () => {
     setCustomImage(null);
+    setExistingBgUrl(null);
+    setCustomImagePreview(null);
     setImageOpacity(100);
     setImageBlur(0);
     setOverlayDarkness(0);
   };
 
+  const saveCustomBackground = (bgUrl: string) => {
+    const backgroundPayload: SetBackgroundType = {
+      bgUrl,
+      bgBlur: String(imageBlur ?? 0),
+      bgOverlay: String(overlayDarkness ?? 0),
+    };
+
+    if (imageOpacity) {
+      backgroundPayload.bgOpacity = String(imageOpacity);
+    }
+
+    setBackground(backgroundPayload, {
+      onSuccess: () => {
+        toast.success("تنظیمات طراحی با موفقیت ذخیره شد");
+        refetch();
+      },
+      onError: (error: unknown) => {
+        toast.error(extractErrorMessage(error as ErrorType, "خطا در ذخیره تنظیمات طراحی"));
+      },
+    });
+  };
+
   const handleApplyChanges = () => {
+    updateRestaurant(
+      { menuColor },
+      {
+        onSuccess: () => {
           if (backgroundType === "pattern") {
             const selectedItem = backgroundItems.find((item) => item.id === selectedPatternId);
             const bgUrl = selectedItem ? getPatternBgUrl(selectedItem) : "";
@@ -93,7 +157,10 @@ const DesignSettings: FC = () => {
             setBackground(
               { bgUrl },
               {
-          onSuccess: () => toast.success("تنظیمات طراحی با موفقیت ذخیره شد"),
+                onSuccess: () => {
+                  toast.success("تنظیمات طراحی با موفقیت ذخیره شد");
+                  refetch();
+                },
                 onError: (error: unknown) => {
                   toast.error(extractErrorMessage(error as ErrorType, "خطا در ذخیره تنظیمات طراحی"));
                 },
@@ -102,11 +169,7 @@ const DesignSettings: FC = () => {
             return;
           }
 
-    if (!customImage) {
+          if (customImage) {
-      toast.error("لطفاً تصویر پس‌زمینه را آپلود کنید");
-      return;
-    }
-
             singleUpload(customImage, {
               onSuccess: (response) => {
                 const bgUrl = response?.data?.url ?? "";
@@ -116,35 +179,30 @@ const DesignSettings: FC = () => {
                   return;
                 }
 
-        const backgroundPayload: SetBackgroundType = { bgUrl };
+                saveCustomBackground(bgUrl);
-
-        if (imageOpacity) {
-          backgroundPayload.bgOpacity = String(imageOpacity);
-        }
-        if (imageBlur) {
-          backgroundPayload.bgBlur = String(imageBlur);
-        }
-        if (overlayDarkness) {
-          backgroundPayload.bgOverlay = String(overlayDarkness);
-        }
-
-        setBackground(
-          backgroundPayload,
-          {
-            onSuccess: () => toast.success("تنظیمات طراحی با موفقیت ذخیره شد"),
-            onError: (error: unknown) => {
-              toast.error(extractErrorMessage(error as ErrorType, "خطا در ذخیره تنظیمات طراحی"));
-            },
-          },
-        );
               },
               onError: (error: ErrorType) => {
                 toast.error(extractErrorMessage(error, "خطا در آپلود تصویر"));
               },
             });
+            return;
+          }
+
+          if (existingBgUrl) {
+            saveCustomBackground(existingBgUrl);
+            return;
+          }
+
+          toast.error("لطفاً تصویر پس‌زمینه را آپلود کنید");
+        },
+        onError: (error: unknown) => {
+          toast.error(extractErrorMessage(error as ErrorType, "خطا در ذخیره تنظیمات طراحی"));
+        },
+      },
+    );
   };
 
-  const isApplyDisabled = isSaving || (backgroundType === "pattern" ? !selectedPatternId : !customImage);
+  const isApplyDisabled = isSaving || (backgroundType === "pattern" ? !selectedPatternId : !customImage && !existingBgUrl);
 
   return (
     <div className="bg-white rounded-4xl p-8">

src/pages/settings/types/Types.ts

@@ -40,6 +40,10 @@ export type Restaurant = {
   logo: string | null;
   address: string | null;
   menuColor: string | null;
+  bgUrl?: string | null;
+  bgOpacity?: string | null;
+  bgBlur?: string | null;
+  bgOverlay?: string | null;
   latitude: number | null;
   longitude: number | null;
   serviceArea: GeoJSONPolygon;