show demo

src/pages/settings/components/DesignSettings.tsx

@@ -1,3 +1,6 @@
+import { buildMenuPreviewUrl } from "@/config/menuPreview";
+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";
@@ -19,6 +22,28 @@ type BackgroundType = "pattern" | "custom";
 
 const UPLOAD_BOX_CLASS = "w-[200px] h-[362px] rounded-2xl border border-dashed border-description";
 
+const PHONE_FRAME_WIDTH = 375;
+
+/** 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) => {
@@ -45,6 +70,7 @@ const DesignSettings: FC = () => {
   const [imageBlur, setImageBlur] = useState(0);
   const [overlayDarkness, setOverlayDarkness] = useState(0);
   const [isInitialized, setIsInitialized] = useState(false);
+  const [previewReloadKey, setPreviewReloadKey] = useState(0);
   const { data: backgrounds } = useGetBackgrounds();
   const { mutate: setBackground, isPending: isSavingBackground } = useSetBackground();
   const { mutate: updateRestaurant, isPending: isUpdatingRestaurant } = useUpdateRestaurant();
@@ -52,6 +78,11 @@ const DesignSettings: FC = () => {
   const { patterns, isLoading: isPatternsLoading, isError: isPatternsError } = useBackgroundPatterns(appliedColor);
   const { data: restaurant, refetch } = useGetRestaurant();
   const backgroundItems = useMemo(() => backgrounds?.data ?? [], [backgrounds]);
+  const menuPreviewUrl = useMemo(() => {
+    const slug = restaurant?.data?.slug;
+    if (!slug) return "";
+    return buildMenuPreviewUrl(slug, previewReloadKey);
+  }, [restaurant?.data?.slug, previewReloadKey]);
   const isSaving = isSavingBackground || isUploadingImage || isUpdatingRestaurant;
 
   useEffect(() => {
@@ -127,6 +158,12 @@ const DesignSettings: FC = () => {
     setOverlayDarkness(0);
   };
 
+  const handleSaveSuccess = useCallback(() => {
+    toast.success("تنظیمات طراحی با موفقیت ذخیره شد");
+    refetch();
+    setPreviewReloadKey(Date.now());
+  }, [refetch]);
+
   const saveCustomBackground = (bgUrl: string) => {
     const backgroundPayload: SetBackgroundType = {
       bgUrl,
@@ -140,10 +177,7 @@ const DesignSettings: FC = () => {
     }
 
     setBackground(backgroundPayload, {
-      onSuccess: () => {
-        toast.success("تنظیمات طراحی با موفقیت ذخیره شد");
-        refetch();
-      },
+      onSuccess: handleSaveSuccess,
       onError: (error: unknown) => {
         toast.error(extractErrorMessage(error as ErrorType, "خطا در ذخیره تنظیمات طراحی"));
       },
@@ -174,10 +208,7 @@ const DesignSettings: FC = () => {
                 bgType: resolveBgType(backgroundType, selectedPatternId),
               },
               {
-                onSuccess: () => {
-                  toast.success("تنظیمات طراحی با موفقیت ذخیره شد");
-                  refetch();
-                },
+                onSuccess: handleSaveSuccess,
                 onError: (error: unknown) => {
                   toast.error(extractErrorMessage(error as ErrorType, "خطا در ذخیره تنظیمات طراحی"));
                 },
@@ -225,8 +256,8 @@ const DesignSettings: FC = () => {
     <div className="bg-white rounded-4xl p-8">
       <div className="text-lg font-light">تنظیمات طراحی</div>
 
-      <div className="flex mt-5">
-        <div className="max-w-[506px] w-full">
+      <div className="flex mt-5 gap-10">
+        <div className="max-w-[506px] w-full shrink-0">
           <ColorPicker label="رنگ منو" value={menuColor} onChange={setMenuColor} />
 
           <div className="mt-7">
@@ -322,6 +353,40 @@ const DesignSettings: FC = () => {
             </Button>
           </div>
         </div>
+
+        <div className="flex-1 flex justify-center items-start min-w-0 sticky top-4">
+          <div className="relative shrink-0 select-none overflow-hidden" style={{ width: PHONE_FRAME_WIDTH }}>
+            <img src={iphoneFrame} alt="" className="relative z-0 w-full h-auto block pointer-events-none" draggable={false} />
+            <div
+              className="absolute z-10 overflow-hidden"
+              style={{
+                top: PHONE_SCREEN_STYLE.top,
+                left: PHONE_SCREEN_STYLE.left,
+                right: PHONE_SCREEN_STYLE.right,
+                bottom: PHONE_SCREEN_STYLE.bottom,
+                borderRadius: PHONE_SCREEN_STYLE.borderRadius,
+              }}
+            >
+              {menuPreviewUrl ? (
+                <iframe
+                  key={previewReloadKey}
+                  src={menuPreviewUrl}
+                  title="پیش‌نمایش منو"
+                  className="block h-full w-full border-0 bg-white"
+                />
+              ) : (
+                <div className="flex h-full w-full items-center justify-center bg-white text-description text-xs">در حال بارگذاری...</div>
+              )}
+            </div>
+            <img
+              src={iphoneCamera}
+              alt=""
+              className="pointer-events-none absolute left-1/2 z-20 -translate-x-1/2"
+              style={{ top: PHONE_CAMERA_STYLE.top, width: PHONE_CAMERA_STYLE.width }}
+              draggable={false}
+            />
+          </div>
+        </div>
       </div>
     </div>
   );