generate qr code

2026-07-27 10:08:49 +03:30
parent f30ee4f6e3
commit e283d4a5c4
7 changed files with 182 additions and 1 deletions
@@ -0,0 +1,115 @@
+import Button from "@/components/Button";
+import { MENU_SITE_ORIGIN } from "@/config/menuPreview";
+import { DocumentDownload } from "iconsax-react";
+import { QRCodeCanvas } from "qrcode.react";
+import { useMemo, useRef, type FC } from "react";
+import { toast } from "react-toastify";
+import { useGetRestaurant } from "../hooks/useSettingData";
+
+const normalizeMenuUrl = (domain?: string | null, slug?: string | null): string => {
+  const trimmedDomain = domain?.trim();
+
+  if (trimmedDomain) {
+    if (/^https?:\/\//i.test(trimmedDomain)) {
+      return trimmedDomain.replace(/\/+$/, "");
+    }
+    return `https://${trimmedDomain.replace(/\/+$/, "")}`;
+  }
+
+  if (slug) {
+    return `${MENU_SITE_ORIGIN}/${slug}`;
+  }
+
+  return "";
+};
+
+const QrCodeSettings: FC = () => {
+  const { data: restaurant, isLoading } = useGetRestaurant();
+  const canvasWrapperRef = useRef<HTMLDivElement>(null);
+
+  const menuUrl = useMemo(
+    () => normalizeMenuUrl(restaurant?.data?.domain, restaurant?.data?.slug),
+    [restaurant?.data?.domain, restaurant?.data?.slug],
+  );
+
+  const handleDownload = () => {
+    const canvas = canvasWrapperRef.current?.querySelector("canvas");
+    if (!canvas) {
+      toast.error("QR کد آماده نیست");
+      return;
+    }
+
+    const link = document.createElement("a");
+    const fileName = restaurant?.data?.slug || restaurant?.data?.name || "menu";
+    link.download = `qr-${fileName}.png`;
+    link.href = canvas.toDataURL("image/png");
+    link.click();
+    toast.success("QR کد با موفقیت دانلود شد");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="bg-white rounded-4xl p-8">
+        <div className="text-sm text-gray-500">در حال بارگذاری...</div>
+      </div>
+    );
+  }
+
+  if (!menuUrl) {
+    return (
+      <div className="bg-white rounded-4xl p-8">
+        <div className="text-lg font-light">QR کد منو</div>
+        <p className="mt-4 text-sm text-gray-500">
+          برای ساخت QR کد، ابتدا دامنه وب‌سایت را در تنظیمات عمومی وارد کنید یا از اسلاگ رستوران استفاده شود.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-4xl p-8">
+      <div className="text-lg font-light">QR کد منو</div>
+      <p className="mt-2 text-sm text-gray-500">
+        این QR کد به آدرس منوی دیجیتال رستوران شما لینک می‌شود. می‌توانید آن را دانلود و چاپ کنید.
+      </p>
+
+      <div className="mt-8 flex flex-col items-center gap-6">
+        <div
+          ref={canvasWrapperRef}
+          className="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm"
+        >
+          <QRCodeCanvas
+            value={menuUrl}
+            size={256}
+            level="H"
+            includeMargin
+            bgColor="#FFFFFF"
+            fgColor="#000000"
+          />
+        </div>
+
+        <div className="w-full max-w-md text-center">
+          <div className="text-xs text-gray-400 mb-1">آدرس منو</div>
+          <a
+            href={menuUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-primary break-all hover:underline"
+            dir="ltr"
+          >
+            {menuUrl}
+          </a>
+        </div>
+
+        <Button type="button" className="w-fit px-6" onClick={handleDownload}>
+          <div className="flex gap-2 items-center">
+            <DocumentDownload size={20} color="#fff" />
+            <span>دانلود QR کد</span>
+          </div>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default QrCodeSettings;