show demo

menuPreviewProxy.ts

@@ -0,0 +1,75 @@
+import type { IncomingMessage, ServerResponse } from "node:http";
+import type { ClientRequest, IncomingMessage as ProxyIncomingMessage } from "node:http";
+import type { ProxyOptions } from "vite";
+import { MENU_SITE_ORIGIN, isMenuSlugProxyPath, stripMenuPreviewCacheParam, toMenuSitePath } from "./src/config/menuPreview";
+
+const stripFrameHeaders = (_proxyRes: ProxyIncomingMessage, _req: IncomingMessage, res: ServerResponse) => {
+  res.removeHeader("x-frame-options");
+  res.removeHeader("content-security-policy");
+};
+
+const stripPreviewPageHeaders = (_proxyRes: ProxyIncomingMessage, _req: IncomingMessage, res: ServerResponse) => {
+  stripFrameHeaders(_proxyRes, _req, res);
+  res.removeHeader("cache-control");
+  res.removeHeader("etag");
+  res.removeHeader("last-modified");
+  res.setHeader("cache-control", "no-store, no-cache, must-revalidate");
+  res.setHeader("pragma", "no-cache");
+  res.setHeader("expires", "0");
+};
+
+const menuAssetProxy = (): ProxyOptions => ({
+  target: MENU_SITE_ORIGIN,
+  changeOrigin: true,
+  secure: true,
+  configure: (proxy) => {
+    proxy.on("proxyRes", stripFrameHeaders);
+  },
+});
+
+export const createMenuPreviewProxy = (): Record<string, ProxyOptions> => ({
+  "/assets/fonts": menuAssetProxy(),
+  "/assets/images": menuAssetProxy(),
+  "/_next": menuAssetProxy(),
+  "/icons": menuAssetProxy(),
+});
+
+export const shouldProxyMenuSlugRequest = (url: string | undefined) => {
+  if (!url) return false;
+
+  const pathname = url.split("?")[0] ?? "";
+  if (pathname.startsWith("/@") || pathname.startsWith("/src/") || pathname.startsWith("/node_modules/")) {
+    return false;
+  }
+
+  if (
+    pathname.startsWith("/assets/fonts/") ||
+    pathname.startsWith("/assets/images/") ||
+    pathname.startsWith("/_next/") ||
+    pathname.startsWith("/icons/")
+  ) {
+    return false;
+  }
+
+  if (pathname.startsWith("/assets/")) {
+    return false;
+  }
+
+  return isMenuSlugProxyPath(pathname);
+};
+
+export const getMenuSiteTargetUrl = (url: string) => {
+  const [pathname, search = ""] = url.split("?");
+  const menuPath = toMenuSitePath(pathname ?? "");
+  if (!menuPath) return null;
+  return `${MENU_SITE_ORIGIN}${menuPath}${stripMenuPreviewCacheParam(search)}`;
+};
+
+export const createMenuSlugProxyAgent = () => ({
+  configure: (proxy: { on: (event: string, handler: (...args: unknown[]) => void) => void }) => {
+    proxy.on("proxyReq", (proxyReq: ClientRequest) => {
+      proxyReq.removeHeader("origin");
+    });
+    proxy.on("proxyRes", stripPreviewPageHeaders);
+  },
+});

nginx.conf

@@ -5,17 +5,92 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
-    # SPA fallback
-    location / {
+    # Public menu site assets (Next.js)
+    location ^~ /_next/ {
+        proxy_pass https://dmenu.danakcorp.com/_next/;
+        proxy_ssl_server_name on;
+        proxy_set_header Host dmenu.danakcorp.com;
+        proxy_hide_header X-Frame-Options;
+        proxy_hide_header Content-Security-Policy;
+    }
+
+    location ^~ /icons/ {
+        proxy_pass https://dmenu.danakcorp.com/icons/;
+        proxy_ssl_server_name on;
+        proxy_set_header Host dmenu.danakcorp.com;
+        proxy_hide_header X-Frame-Options;
+        proxy_hide_header Content-Security-Policy;
+    }
+
+    location ^~ /assets/fonts/ {
+        proxy_pass https://dmenu.danakcorp.com/assets/fonts/;
+        proxy_ssl_server_name on;
+        proxy_set_header Host dmenu.danakcorp.com;
+        proxy_hide_header X-Frame-Options;
+        proxy_hide_header Content-Security-Policy;
+    }
+
+    location ^~ /assets/images/ {
+        proxy_pass https://dmenu.danakcorp.com/assets/images/;
+        proxy_ssl_server_name on;
+        proxy_set_header Host dmenu.danakcorp.com;
+        proxy_hide_header X-Frame-Options;
+        proxy_hide_header Content-Security-Policy;
+    }
+
+    # Vite build outputs to /assets by default
+    location ^~ /assets/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        try_files $uri =404;
+    }
+
+    # Admin SPA routes
+    location ^~ /auth/ {
         try_files $uri $uri/ /index.html;
         add_header Cache-Control "no-store, no-cache, must-revalidate";
     }
 
-    # Vite build outputs to /assets by default
-    location /assets/ {
-        expires 1y;
-        add_header Cache-Control "public, immutable";
-        try_files $uri =404;
+    location = /dashboard {
+        try_files $uri /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+
+    location = /setting {
+        try_files $uri /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+
+    location = /statistics {
+        try_files $uri /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+
+    location ~ ^/(foods|orders|customers|schedule|payment_methods|discounts|announcements|reports|comments|roles|admins|shipment_methods|coupons|reviews|pagers|notifications)/ {
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+
+    # Restaurant menu preview (same-origin iframe; strips X-Frame-Options from upstream)
+    location ~ ^/(?!auth|dashboard|setting|statistics|foods|orders|customers|schedule|payment_methods|discounts|announcements|reports|comments|roles|admins|shipment_methods|coupons|reviews|pagers|notifications|assets|icons|_next)([a-zA-Z0-9][a-zA-Z0-9_-]*)(/.*)?$ {
+        proxy_pass https://dmenu.danakcorp.com/$1$2$is_args$args;
+        proxy_ssl_server_name on;
+        proxy_set_header Host dmenu.danakcorp.com;
+        proxy_hide_header X-Frame-Options;
+        proxy_hide_header Content-Security-Policy;
+        proxy_hide_header Cache-Control;
+        proxy_hide_header ETag;
+        proxy_hide_header Last-Modified;
+        proxy_hide_header Expires;
+        add_header Cache-Control "no-store, no-cache, must-revalidate" always;
+        add_header Pragma "no-cache" always;
+        add_header Expires "0" always;
+    }
+
+    # SPA fallback
+    location / {
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
     }
 
     # optional: favicon (avoid noisy logs if missing)

src/config/menuPreview.ts

@@ -0,0 +1,65 @@
+export const MENU_SITE_ORIGIN = "https://dmenu.danakcorp.com";
+
+/** Admin routes whose first segment must not be proxied to the public menu site. */
+export const MENU_PREVIEW_RESERVED_SEGMENTS = new Set([
+  "auth",
+  "dashboard",
+  "setting",
+  "statistics",
+  "schedule",
+  "payment_methods",
+  "foods",
+  "orders",
+  "customers",
+  "discounts",
+  "announcements",
+  "reports",
+  "comments",
+  "roles",
+  "admins",
+  "shipment_methods",
+  "coupons",
+  "reviews",
+  "pagers",
+  "notifications",
+  "assets",
+  "menu-preview",
+]);
+
+export const isMenuPreviewProxyPath = (pathname: string) => {
+  if (!pathname.startsWith("/menu-preview/")) return false;
+  const rest = pathname.slice("/menu-preview".length);
+  return rest.length > 0;
+};
+
+export const isMenuSlugProxyPath = (pathname: string) => {
+  const [firstSegment] = pathname.split("/").filter(Boolean);
+  if (!firstSegment) return false;
+  return !MENU_PREVIEW_RESERVED_SEGMENTS.has(firstSegment);
+};
+
+export const toMenuPreviewProxyPath = (slug: string) => `/${slug}`;
+
+export const MENU_PREVIEW_CACHE_PARAM = "_preview";
+
+export const buildMenuPreviewUrl = (slug: string, cacheKey: number) =>
+  `${toMenuPreviewProxyPath(slug)}?${MENU_PREVIEW_CACHE_PARAM}=${cacheKey}`;
+
+export const stripMenuPreviewCacheParam = (search: string) => {
+  const params = new URLSearchParams(search.startsWith("?") ? search.slice(1) : search);
+  params.delete(MENU_PREVIEW_CACHE_PARAM);
+  const query = params.toString();
+  return query ? `?${query}` : "";
+};
+
+export const toMenuSitePath = (pathname: string) => {
+  if (isMenuPreviewProxyPath(pathname)) {
+    return pathname.replace(/^\/menu-preview/, "") || "/";
+  }
+
+  if (isMenuSlugProxyPath(pathname)) {
+    return pathname;
+  }
+
+  return null;
+};

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>
   );

vite.config.ts

@@ -1,14 +1,81 @@
-import { defineConfig } from "vite";
+import { defineConfig, type Plugin } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import path from "path";
+import type { IncomingMessage, ServerResponse } from "node:http";
+import { createMenuPreviewProxy, getMenuSiteTargetUrl, shouldProxyMenuSlugRequest } from "./menuPreviewProxy";
+
+const PREVIEW_NO_CACHE_HEADERS = {
+  "cache-control": "no-store, no-cache, must-revalidate",
+  pragma: "no-cache",
+  expires: "0",
+} as const;
+
+const menuSlugPreviewPlugin = (): Plugin => ({
+  name: "menu-slug-preview",
+  configureServer(server) {
+    server.middlewares.use(async (req: IncomingMessage, res: ServerResponse, next) => {
+      if (!shouldProxyMenuSlugRequest(req.url)) {
+        next();
+        return;
+      }
+
+      const targetUrl = getMenuSiteTargetUrl(req.url ?? "");
+      if (!targetUrl) {
+        next();
+        return;
+      }
+
+      try {
+        const response = await fetch(targetUrl, {
+          cache: "no-store",
+          headers: {
+            accept: req.headers.accept ?? "*/*",
+            "accept-language": req.headers["accept-language"] ?? "fa",
+            "cache-control": "no-cache",
+            pragma: "no-cache",
+          },
+        });
+
+        res.statusCode = response.status;
+        Object.entries(PREVIEW_NO_CACHE_HEADERS).forEach(([key, value]) => {
+          res.setHeader(key, value);
+        });
+        response.headers.forEach((value, key) => {
+          const lowerKey = key.toLowerCase();
+          if (
+            lowerKey === "x-frame-options" ||
+            lowerKey === "content-security-policy" ||
+            lowerKey === "content-encoding" ||
+            lowerKey === "cache-control" ||
+            lowerKey === "etag" ||
+            lowerKey === "last-modified" ||
+            lowerKey === "expires" ||
+            lowerKey === "pragma"
+          ) {
+            return;
+          }
+          res.setHeader(key, value);
+        });
+
+        const body = Buffer.from(await response.arrayBuffer());
+        res.end(body);
+      } catch {
+        next();
+      }
+    });
+  },
+});
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [react(), tailwindcss(), menuSlugPreviewPlugin()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  server: {
+    proxy: createMenuPreviewProxy(),
+  },
 });