+
- )
-}
-
-export default Setting
\ No newline at end of file
+export default Setting;
diff --git a/src/pages/settings/components/DesignSettings.tsx b/src/pages/settings/components/DesignSettings.tsx
new file mode 100644
index 0000000..fba74b4
--- /dev/null
+++ b/src/pages/settings/components/DesignSettings.tsx
@@ -0,0 +1,392 @@
+import iphoneCamera from "@/assets/images/iphone_camera.png";
+import iphoneFrame from "@/assets/images/iphonr.png";
+import Button from "@/components/Button";
+import ColorPicker from "@/components/ColorPicker";
+import Radio from "@/components/Radio";
+import { extractErrorMessage } from "@/config/func";
+import { buildMenuPreviewUrl } from "@/config/menuPreview";
+import type { ErrorType } from "@/helpers/types";
+import { clx } from "@/helpers/utils";
+import DesignSlider from "@/pages/settings/components/DesignSlider";
+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";
+import { useCallback, useEffect, useMemo, useState, type FC } from "react";
+import { useDropzone } from "react-dropzone";
+import { toast } from "react-toastify";
+
+const COLOR_APPLY_DELAY_MS = 500;
+type BackgroundType = "pattern" | "custom";
+
+const UPLOAD_BOX_CLASS = "w-[200px] h-[362px] rounded-2xl border border-dashed border-description";
+
+const PHONE_FRAME_WIDTH = 375;
+const PHONE_PREVIEW_SCALE = 0.8;
+
+/** Measured from `iphonr.png` (839×1759) — white screen rect inside the bezel. */
+const PHONE_FRAME_IMAGE = { width: 839, height: 1759 } as const;
+const PHONE_SCREEN_RECT = { left: 33, top: 36, right: 806, bottom: 1756, radius: 89 } as const;
+
+const toFramePercent = (value: number, axis: "width" | "height") => `${(value / PHONE_FRAME_IMAGE[axis]) * 100}%`;
+
+const PHONE_SCREEN_STYLE = {
+ top: toFramePercent(PHONE_SCREEN_RECT.top, "height"),
+ left: toFramePercent(PHONE_SCREEN_RECT.left, "width"),
+ right: toFramePercent(PHONE_FRAME_IMAGE.width - 1 - PHONE_SCREEN_RECT.right, "width"),
+ bottom: toFramePercent(PHONE_FRAME_IMAGE.height - 1 - PHONE_SCREEN_RECT.bottom, "height"),
+ borderRadius: (PHONE_SCREEN_RECT.radius / PHONE_FRAME_IMAGE.width) * PHONE_FRAME_WIDTH,
+} as const;
+
+const PHONE_CAMERA_STYLE = {
+ top: toFramePercent(18, "height"),
+ width: toFramePercent(178, "width"),
+} as const;
+
+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 resolveBgType = (type: BackgroundType, selectedPatternId: string | null): SetBackgroundType["bgType"] => {
+ if (type === "custom") return "custom";
+ if (selectedPatternId === "0") return "color";
+ return "pattern";
+};
+
+const DesignSettings: FC = () => {
+ const [menuColor, setMenuColor] = useState("#000000");
+ const [appliedColor, setAppliedColor] = useState("#000000");
+ const [selectedPatternId, setSelectedPatternId] = useStateتنظیمات
- return ( -
-
+ );
+};
- تنظیمات
+
+
-
-
+
+ {activeTab === SettingTabEnum.GENERAL &&
+
- {
- activeTab === SettingTabEnum.GENERAL &&
-
+
+ );
+};
+
+export default DesignSettings;
diff --git a/src/pages/settings/components/DesignSlider.tsx b/src/pages/settings/components/DesignSlider.tsx
new file mode 100644
index 0000000..db1f533
--- /dev/null
+++ b/src/pages/settings/components/DesignSlider.tsx
@@ -0,0 +1,41 @@
+import { type FC } from "react";
+
+type Props = {
+ label: string;
+ value: number;
+ onChange: (value: number) => void;
+};
+
+const DesignSlider: FCتنظیمات طراحی
+
+
+
+
+
+
+
+
+
+
+ setBackgroundType(value as BackgroundType)} />
+
+
+ {backgroundType === "pattern" && (
+ انتخاب پس زمینه
+
+ {isPatternsLoading && Array.from({ length: 6 }).map((_, index) => )}
+ {!isPatternsLoading && isPatternsError &&
+ )}
+ خطا در بارگذاری پترنها
}
+ {!isPatternsLoading && !isPatternsError && patterns.length === 0 && پترنی یافت نشد
}
+
+ {patterns.map((pattern) => (
+
+ ))}
+
+
+
+ setBackgroundType(value as BackgroundType)} />
+
+
+ {backgroundType === "custom" && (
+ تصویر پس زمینه دلخواه
+
+ {!customImagePreview ? (
+
+ )}
+
+
+
+ ) : (
+ تصویر مورد نظر را آپلود کنید
+
+
+ آپلود
+
+
+ )}
+
+ 
+ {overlayDarkness > 0 && }
+
+
+
+
+
+ تنظیمات
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+ {menuPreviewUrl ? (
+
+ ) : (
+
+ در حال بارگذاری...
+ )}
+
+ => {
+ const url = getBackgroundPatternUrl(item);
+ if (!url) return null;
+
+ try {
+ const response = await fetch(url);
+ if (!response.ok) {
+ return { id: item.id, fallbackUrl: url };
+ }
+
+ const content = await response.text();
+ if (!content.includes(" {
+ const { data: backgrounds, isLoading, isError } = useGetBackgrounds();
+ const [sources, setSources] = useState([]);
+ const [isFetching, setIsFetching] = useState(false);
+ const backgroundItems = useMemo(() => backgrounds?.data ?? [], [backgrounds]);
+
+ useEffect(() => {
+ if (!backgroundItems.length) {
+ setSources([]);
+ setIsFetching(false);
+ return;
+ }
+
+ let cancelled = false;
+ setIsFetching(true);
+
+ Promise.all(backgroundItems.map(fetchPatternSource)).then((results) => {
+ if (cancelled) return;
+ setSources(results.filter((item): item is CachedPatternSource => item !== null));
+ setIsFetching(false);
+ });
+
+ return () => {
+ cancelled = true;
+ };
+ }, [backgroundItems]);
+
+ const patterns = useMemo(
+ () =>
+ sources.map((source) => ({
+ id: source.id,
+ image: source.svg ? svgToDataUrl(colorizeSvg(source.svg, color)) : (source.fallbackUrl ?? ""),
+ })),
+ [sources, color],
+ );
+
+ return {
+ patterns,
+ isLoading: isLoading || isFetching,
+ isError,
+ };
+};
+
+export const usePatterns = (color: string) => {
+ return useMemo(
+ () =>
+ PATTERNS.map((pattern) => ({
+ id: pattern.id,
+ name: pattern.name,
+ image: svgToDataUrl(colorizeSvg(pattern.svg, color)),
+ })),
+ [color],
+ );
+};
diff --git a/src/pages/settings/hooks/useSettingData.ts b/src/pages/settings/hooks/useSettingData.ts
index 8c1a2e5..eeb8853 100644
--- a/src/pages/settings/hooks/useSettingData.ts
+++ b/src/pages/settings/hooks/useSettingData.ts
@@ -13,3 +13,16 @@ export const useUpdateRestaurant = () => {
mutationFn: api.updateRestaurant,
});
};
+
+export const useGetBackgrounds = () => {
+ return useQuery({
+ queryKey: ["backgrounds"],
+ queryFn: api.getBackgrounds,
+ });
+};
+
+export const useSetBackground = () => {
+ return useMutation({
+ mutationFn: api.setBackground,
+ });
+};
diff --git a/src/pages/settings/service/SettingService.ts b/src/pages/settings/service/SettingService.ts
index 7d20820..882c99e 100644
--- a/src/pages/settings/service/SettingService.ts
+++ b/src/pages/settings/service/SettingService.ts
@@ -1,5 +1,5 @@
import axios from "@/config/axios";
-import type { GetRestaurantResponse, UpdateRestaurantType } from "../types/Types";
+import type { GetRestaurantResponse, SetBackgroundType, UpdateRestaurantType } from "../types/Types";
export const getRestaurant = async (): Promise => {
const { data } = await axios.get("/admin/shops/my-shop");
@@ -10,3 +10,13 @@ export const updateRestaurant = async (params: UpdateRestaurantType) => {
const { data } = await axios.patch("/admin/shops/my-shop", params);
return data;
};
+
+export const getBackgrounds = async () => {
+ const { data } = await axios.get("/admin/backgrounds");
+ return data;
+};
+
+export const setBackground = async (params: SetBackgroundType) => {
+ const { data } = await axios.patch(`/admin/shops/my-shop/background`, params);
+ return data;
+};
diff --git a/src/pages/settings/types/Types.ts b/src/pages/settings/types/Types.ts
index f7e9116..6f7b096 100644
--- a/src/pages/settings/types/Types.ts
+++ b/src/pages/settings/types/Types.ts
@@ -59,6 +59,11 @@ export type Restaurant = {
images: unknown | null;
vat: number;
domain: string;
+ bgType: string | null;
+ bgUrl: string | null;
+ bgOpacity: string | number | null;
+ bgBlur: string | number | null;
+ bgOverlay: string | number | null;
score: {
scoreAmount: string;
scoreCredit: string;
@@ -72,3 +77,17 @@ export type Restaurant = {
};
export type GetRestaurantResponse = IResponse;
+
+export type SetBackgroundType = {
+ bgType?: string;
+ bgUrl?: string;
+ bgOpacity?: string;
+ bgBlur?: string;
+ bgOverlay?: string;
+};
+
+export type BackgroundItemType = {
+ id: string;
+ url?: string;
+ bgUrl?: string;
+};
{label}
+
+
+ );
+};
+
+export default DesignSlider;
diff --git a/src/pages/settings/enum/Enum.ts b/src/pages/settings/enum/Enum.ts
index 3481435..b0d8066 100644
--- a/src/pages/settings/enum/Enum.ts
+++ b/src/pages/settings/enum/Enum.ts
@@ -4,4 +4,5 @@ export const enum SettingTabEnum {
FINANCIAL = "financial",
DELIVERY = "delivery",
NOTIFICATION = "notification",
+ BACKGROUND = "background",
}
diff --git a/src/pages/settings/hooks/usePatterns.ts b/src/pages/settings/hooks/usePatterns.ts
new file mode 100644
index 0000000..730bec3
--- /dev/null
+++ b/src/pages/settings/hooks/usePatterns.ts
@@ -0,0 +1,129 @@
+import type { BackgroundItemType } from "@/pages/settings/types/Types";
+import { useEffect, useMemo, useState } from "react";
+import { useGetBackgrounds } from "./useSettingData";
+import firstPattern from "@/assets/images/pattern/1.svg?raw";
+import secondPattern from "@/assets/images/pattern/2.svg?raw";
+import thirdPattern from "@/assets/images/pattern/3.svg?raw";
+import fourthPattern from "@/assets/images/pattern/4.svg?raw";
+import fifthPattern from "@/assets/images/pattern/5.svg?raw";
+import sixthPattern from "@/assets/images/pattern/6.svg?raw";
+
+const PATTERNS = [
+ { id: 1, name: "طرح 1", svg: firstPattern },
+ { id: 2, name: "طرح 2", svg: secondPattern },
+ { id: 3, name: "طرح 3", svg: thirdPattern },
+ { id: 4, name: "طرح 4", svg: fourthPattern },
+ { id: 5, name: "طرح 5", svg: fifthPattern },
+ { id: 6, name: "طرح 6", svg: sixthPattern },
+];
+
+export const PATTERN_BACKGROUND_OPACITY = 0.05;
+export const PATTERN_VECTOR_OPACITY = 0.1;
+
+export const getBackgroundPatternUrl = (item: BackgroundItemType) => {
+ const url = item.url ?? item.bgUrl ?? "";
+ if (!url) return "";
+ if (url.startsWith("http")) return url;
+ return `${import.meta.env.VITE_BASE_URL}${url.startsWith("/") ? url : `/${url}`}`;
+};
+
+export const colorizeSvg = (svg: string, color: string) => {
+ let result = svg.replace(/fill="(?!black|none)[^"]+"/g, `fill="${color}"`);
+ result = result.replace(/fill-opacity="[^"]+"/g, `fill-opacity="${PATTERN_VECTOR_OPACITY}"`);
+ result = result.replace(
+ /(<(?:path|circle|rect|ellipse|polygon)[^>]*fill="(?!black|none)[^"]+")(?![^>]*fill-opacity)/g,
+ `$1 fill-opacity="${PATTERN_VECTOR_OPACITY}"`,
+ );
+
+ return result;
+};
+
+export const svgToDataUrl = (svg: string) =>
+ `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+
+type CachedPatternSource = {
+ id: string;
+ svg?: string;
+ fallbackUrl?: string;
+};
+
+const fetchPatternSource = async (item: BackgroundItemType): Promise
+
+
+ 0 ? 2 : 1,
+ }}
+ />
+ onChange(Number(e.target.value))}
+ dir="rtl"
+ className="design-slider absolute inset-0 w-full h-full appearance-none bg-transparent cursor-pointer"
+ />
+
+
+ {value.toLocaleString("fa-IR")}%
+
+