diff --git a/src/pages/settings/components/DesignSettings.tsx b/src/pages/settings/components/DesignSettings.tsx index fd9e6f8..4f26bcd 100644 --- a/src/pages/settings/components/DesignSettings.tsx +++ b/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 { useGetBackgrounds, useSetBackground } from "@/pages/settings/hooks/useSettingData"; +import { getBackgroundPatternUrl, PATTERN_BACKGROUND_OPACITY, useBackgroundPatterns } from "@/pages/settings/hooks/usePatterns"; +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("pattern"); const [customImage, setCustomImage] = useState(null); const [customImagePreview, setCustomImagePreview] = useState(null); + const [existingBgUrl, setExistingBgUrl] = useState(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) { - setSelectedPatternId((current) => current ?? patterns[0].id); + if (!restaurant?.data || isInitialized) return; + + 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); + } + } else if (backgroundItems[0]?.id) { + setSelectedPatternId(backgroundItems[0].id); } - }, [patterns]); + + 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) { - setCustomImagePreview(null); - return; - } + if (!customImage) return; const previewUrl = URL.createObjectURL(customImage); setCustomImagePreview(previewUrl); @@ -75,76 +111,98 @@ const DesignSettings: FC = () => { const handleRemoveImage = () => { setCustomImage(null); + setExistingBgUrl(null); + setCustomImagePreview(null); setImageOpacity(100); setImageBlur(0); setOverlayDarkness(0); }; - const handleApplyChanges = () => { - if (backgroundType === "pattern") { - const selectedItem = backgroundItems.find((item) => item.id === selectedPatternId); - const bgUrl = selectedItem ? getPatternBgUrl(selectedItem) : ""; + const saveCustomBackground = (bgUrl: string) => { + const backgroundPayload: SetBackgroundType = { + bgUrl, + bgBlur: String(imageBlur ?? 0), + bgOverlay: String(overlayDarkness ?? 0), + }; - if (!bgUrl) { - toast.error("لطفاً یک پترن انتخاب کنید"); - return; - } - - setBackground( - { bgUrl }, - { - onSuccess: () => toast.success("تنظیمات طراحی با موفقیت ذخیره شد"), - onError: (error: unknown) => { - toast.error(extractErrorMessage(error as ErrorType, "خطا در ذخیره تنظیمات طراحی")); - }, - }, - ); - return; + if (imageOpacity) { + backgroundPayload.bgOpacity = String(imageOpacity); } - if (!customImage) { - toast.error("لطفاً تصویر پس‌زمینه را آپلود کنید"); - return; - } - - singleUpload(customImage, { - onSuccess: (response) => { - const bgUrl = response?.data?.url ?? ""; - - if (!bgUrl) { - toast.error("خطا در آپلود تصویر"); - return; - } - - const backgroundPayload: SetBackgroundType = { 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, "خطا در ذخیره تنظیمات طراحی")); - }, - }, - ); + setBackground(backgroundPayload, { + onSuccess: () => { + toast.success("تنظیمات طراحی با موفقیت ذخیره شد"); + refetch(); }, - onError: (error: ErrorType) => { - toast.error(extractErrorMessage(error, "خطا در آپلود تصویر")); + onError: (error: unknown) => { + toast.error(extractErrorMessage(error as ErrorType, "خطا در ذخیره تنظیمات طراحی")); }, }); }; - const isApplyDisabled = isSaving || (backgroundType === "pattern" ? !selectedPatternId : !customImage); + const handleApplyChanges = () => { + updateRestaurant( + { menuColor }, + { + onSuccess: () => { + if (backgroundType === "pattern") { + const selectedItem = backgroundItems.find((item) => item.id === selectedPatternId); + const bgUrl = selectedItem ? getPatternBgUrl(selectedItem) : ""; + + if (!bgUrl) { + toast.error("لطفاً یک پترن انتخاب کنید"); + return; + } + + setBackground( + { bgUrl }, + { + onSuccess: () => { + toast.success("تنظیمات طراحی با موفقیت ذخیره شد"); + refetch(); + }, + onError: (error: unknown) => { + toast.error(extractErrorMessage(error as ErrorType, "خطا در ذخیره تنظیمات طراحی")); + }, + }, + ); + return; + } + + if (customImage) { + singleUpload(customImage, { + onSuccess: (response) => { + const bgUrl = response?.data?.url ?? ""; + + if (!bgUrl) { + toast.error("خطا در آپلود تصویر"); + return; + } + + saveCustomBackground(bgUrl); + }, + 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 && !existingBgUrl); return (
diff --git a/src/pages/settings/types/Types.ts b/src/pages/settings/types/Types.ts index 591bcf6..7ec43b7 100644 --- a/src/pages/settings/types/Types.ts +++ b/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;