without preview text center

.env

@@ -3,6 +3,7 @@ VITE_API_URL=https://dpage-api.danakcorp.com
 VITE_TOKEN_NAME=dpage-editor-t
 VITE_REFRESH_TOKEN_NAME=dpage-editor-refresh-t
 VITE_INVOICE_URL=https://console.danakcorp.com/receipts/
+VITE_LOGIN_URL=https://console.danakcorp.com/auth/login
 VITE_DESIGN_TIER_1_MAX=10
 VITE_DESIGN_PRICE_TIER_1=700000
 VITE_DESIGN_TIER_2_MAX=30

src/pages/catalogue/components/CatalogPreview.tsx

@@ -1,24 +1,24 @@
-import { type FC, useMemo } from 'react'
+import { getPaperDimensions } from "@/config/paperSizes";
-import BookPage from '@/pages/viewer/components/BookPage'
+import { clx } from "@/helpers/utils";
-import { transformViewerDataToPages } from '@/pages/viewer/utils/dataTransformer'
+import type { Page } from "@/pages/editor/store/editorStore.types";
-import { getPaperDimensions } from '@/config/paperSizes'
+import BookPage from "@/pages/viewer/components/BookPage";
-import type { CatalogItemType } from '../types/Types'
+import type { PageData } from "@/pages/viewer/types";
-import type { PageData } from '@/pages/viewer/types'
+import { transformViewerDataToPages } from "@/pages/viewer/utils/dataTransformer";
-import type { Page } from '@/pages/editor/store/editorStore.types'
+import { type FC, useMemo } from "react";
-import { clx } from '@/helpers/utils'
+import type { CatalogItemType } from "../types/Types";
 
-const PREVIEW_WIDTH = 64
+const PREVIEW_WIDTH = 64;
-const PREVIEW_HEIGHT = 89
+const PREVIEW_HEIGHT = 89;
 
 function getFirstPageFromContent(content: string | undefined): PageData | null {
-  if (!content) return null
+  if (!content) return null;
   try {
-    const parsed = JSON.parse(content)
+    const parsed = JSON.parse(content);
-    const pagesArray = Array.isArray(parsed) ? parsed : (parsed?.pages ?? [])
+    const pagesArray = Array.isArray(parsed) ? parsed : (parsed?.pages ?? []);
-    const transformed = transformViewerDataToPages({ pages: pagesArray })
+    const transformed = transformViewerDataToPages({ pages: pagesArray });
-    return transformed[0] ?? null
+    return transformed[0] ?? null;
   } catch {
-    return null
+    return null;
   }
 }
 
@@ -35,83 +35,65 @@ function getPageDataFromEditorPage(page: Page): PageData | null {
         objects: page.objects,
       },
     ],
-  })
+  });
-  return transformed[0] ?? null
+  return transformed[0] ?? null;
 }
 
 type Props = {
-  item?: CatalogItemType
+  item?: CatalogItemType;
-  page?: Page
+  page?: Page;
-  size?: string
+  size?: string;
-  className?: string
+  className?: string;
-  selected?: boolean
+  selected?: boolean;
-}
+};
 
 const CatalogPreview: FC<Props> = ({ item, page, size, className, selected }) => {
-  const catalogSize = item?.size ?? size ?? 'a4'
+  const catalogSize = item?.size ?? size ?? "a4";
 
   const firstPage = useMemo(() => {
-    if (page) return getPageDataFromEditorPage(page)
+    if (page) return getPageDataFromEditorPage(page);
-    return getFirstPageFromContent(item?.content)
+    return getFirstPageFromContent(item?.content);
-  }, [item?.content, page])
+  }, [item?.content, page]);
 
   const { pageWidth, pageHeight, previewScale } = useMemo(() => {
-    const { width, height } = getPaperDimensions(catalogSize)
+    const { width, height } = getPaperDimensions(catalogSize);
-    const scale = Math.min(PREVIEW_WIDTH / width, PREVIEW_HEIGHT / height)
+    const scale = Math.min(PREVIEW_WIDTH / width, PREVIEW_HEIGHT / height);
     return {
       pageWidth: width,
       pageHeight: height,
       previewScale: scale,
-    }
+    };
-  }, [catalogSize])
+  }, [catalogSize]);
 
   if (!firstPage) {
     return (
-      <div
+      <div className={clx("bg-gray-200 rounded-lg flex items-center justify-center shrink-0", selected && "border border-black", className)} style={{ width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }}>
-        className={clx(
+        <span className="text-[10px] text-gray-400 text-center">بدون پیش‌نمایش</span>
-          'bg-gray-200 rounded-lg flex items-center justify-center shrink-0',
-          selected && 'border border-black',
-          className,
-        )}
-        style={{ width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }}
-      >
-        <span className='text-[10px] text-gray-400'>بدون پیش‌نمایش</span>
       </div>
-    )
+    );
   }
 
   return (
     <div
-      className={clx(
+      className={clx("rounded-lg overflow-hidden shrink-0 bg-white border border-gray-200 relative", selected && "border-black", className)}
-        'rounded-lg overflow-hidden shrink-0 bg-white border border-gray-200 relative',
-        selected && 'border-black',
-        className,
-      )}
       style={{ width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }}
-      dir='rtl'
+      dir="rtl"
     >
       <div
-        className='absolute'
+        className="absolute"
         style={{
           top: 0,
           right: 0,
           transform: `scale(${previewScale})`,
-          transformOrigin: 'top right',
+          transformOrigin: "top right",
           width: pageWidth,
           height: pageHeight,
         }}
       >
-        <BookPage
+        <BookPage page={firstPage} scale={1} pageWidth={pageWidth} pageHeight={pageHeight} disableEntranceAnimations showPaperShadow={false} />
-          page={firstPage}
-          scale={1}
-          pageWidth={pageWidth}
-          pageHeight={pageHeight}
-          disableEntranceAnimations
-          showPaperShadow={false}
-        />
       </div>
     </div>
-  )
+  );
-}
+};
 
-export default CatalogPreview
+export default CatalogPreview;

src/pages/home/Home.tsx

@@ -51,17 +51,12 @@ const Home: FC = () => {
   return (
     <div className="mt-4 w-full">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <h1 className="text-base font-light sm:text-lg">
+        <h1 className="text-base font-light sm:text-lg">ساخت کاتالوگ به کمک ویرایشگر داناک</h1>
-          ساخت کاتالوگ به کمک ویرایشگر داناک
+        {import.meta.env.DEV && <DirectLogin />}
-        </h1>
-        <DirectLogin />
       </div>
 
       <div className="mt-8 rounded-2xl bg-white p-4 sm:mt-12 sm:rounded-3xl sm:p-6 lg:mt-20 lg:rounded-4xl lg:p-10">
-        <div className="mx-auto max-w-xl px-1 text-center text-sm leading-relaxed sm:text-base">
+        <div className="mx-auto max-w-xl px-1 text-center text-sm leading-relaxed sm:text-base">سایز و نام مورد نظر را انتخاب کنبد و یک کاتالوگ زیبا با ویرایشگر داناک بسازید</div>
-          سایز و نام مورد نظر را انتخاب کنبد و یک کاتالوگ زیبا با ویرایشگر داناک
-          بسازید
-        </div>
 
         <div>
           <div className="mt-6 flex flex-wrap justify-center gap-4 sm:mt-8 sm:gap-6 lg:gap-8">
@@ -86,24 +81,12 @@ const Home: FC = () => {
           </div>
 
           <div className="mx-auto mt-5 flex w-full max-w-md flex-col gap-4 px-1 sm:px-0">
-            <Input
+            <Input label="نام کاتالوگ" value={name} onChange={(e) => setName(e.target.value)} />
-              label="نام کاتالوگ"
+            <Input label="اسلاگ" value={slug} onChange={(e) => setSlug(e.target.value)} />
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-            />
-            <Input
-              label="اسلاگ"
-              value={slug}
-              onChange={(e) => setSlug(e.target.value)}
-            />
           </div>
 
           <div className="flex justify-center">
-            <Button
+            <Button disabled={isPending} onClick={handleSubmit} className="mt-6 w-full max-w-md rounded-xl sm:mt-8 sm:w-auto">
-              disabled={isPending}
-              onClick={handleSubmit}
-              className="mt-6 w-full max-w-md rounded-xl sm:mt-8 sm:w-auto"
-            >
               <div className="flex items-center justify-center gap-2">
                 ادامه
                 <ArrowLeft size={16} color="white" />
@@ -119,9 +102,7 @@ const Home: FC = () => {
             <img src={PdfIcon} alt="upload" className="w-10 sm:w-12" />
             <div className="mt-3 text-sm">آپلود PDF</div>
 
-            <div className="mt-3 flex h-5 items-center rounded-full bg-[#D4EDDE] px-5 text-[10px] text-[#01973D]">
+            <div className="mt-3 flex h-5 items-center rounded-full bg-[#D4EDDE] px-5 text-[10px] text-[#01973D]">رایگان</div>
-              رایگان
-            </div>
           </div>
         </div>
       </div>

src/router/MainRouter.tsx

@@ -44,7 +44,7 @@ const MainRouter = () => {
               <Route
                 path={Paths.home}
                 element={
-                  <PrivateRoute requireAuth={false}>
+                  <PrivateRoute requireAuth={true}>
                     <Home />
                   </PrivateRoute>
                 }
@@ -52,7 +52,7 @@ const MainRouter = () => {
               <Route
                 path={Paths.editor + "/:id"}
                 element={
-                  <PrivateRoute>
+                  <PrivateRoute requireAuth={true}>
                     <Editor />
                   </PrivateRoute>
                 }
@@ -87,7 +87,7 @@ const MainRouter = () => {
               <Route
                 path={Paths.designer.request}
                 element={
-                  <PrivateRoute>
+                  <PrivateRoute requireAuth={true}>
                     <DesignerRequest />
                   </PrivateRoute>
                 }
@@ -95,7 +95,7 @@ const MainRouter = () => {
               <Route
                 path={Paths.designer.list}
                 element={
-                  <PrivateRoute>
+                  <PrivateRoute requireAuth={true}>
                     <RequestDesignList />
                   </PrivateRoute>
                 }

src/router/PrivateRoute.tsx

@@ -1,29 +1,29 @@
 import { useAuth } from '@/context/AuthContext'
-import { Paths } from '@/config/Paths'
+import { type FC, type ReactNode, useEffect } from 'react'
-import { type FC, type ReactNode } from 'react'
-import { Navigate, useLocation } from 'react-router-dom'
 
 type PrivateRouteProps = {
     children: ReactNode
     /** When true (default), user must be logged in to access the route */
     requireAuth?: boolean
-    /** Redirect target when auth is required but user is not logged in */
-    redirectTo?: string
 }
 
 const PrivateRoute: FC<PrivateRouteProps> = ({
     children,
     requireAuth = true,
-    redirectTo = Paths.home,
 }) => {
     const { isAuthenticated, isChecking } = useAuth()
-    const location = useLocation()
+
+    useEffect(() => {
+        if (requireAuth && !isChecking && !isAuthenticated) {
+            window.location.href = import.meta.env.VITE_LOGIN_URL
+        }
+    }, [requireAuth, isChecking, isAuthenticated])
 
     if (!requireAuth) {
         return children
     }
 
-    if (isChecking) {
+    if (isChecking || !isAuthenticated) {
         return (
             <div className="flex flex-1 items-center justify-center">
                 <div className="text-gray-600">در حال بارگذاری...</div>
@@ -31,10 +31,6 @@ const PrivateRoute: FC<PrivateRouteProps> = ({
         )
     }
 
-    if (!isAuthenticated) {
-        return <Navigate to={redirectTo} replace state={{ from: location }} />
-    }
-
     return children
 }
 

src/shared/components/BuyCatalog.tsx

@@ -2,10 +2,13 @@ import Button from "@/components/Button";
 import DefaulModal from "@/components/DefaulModal";
 import Input from "@/components/Input";
 import { toast } from "@/components/Toast";
-import { extractErrorMessage } from "@/helpers/utils";
+import { clx, extractErrorMessage } from "@/helpers/utils";
 import { usePurchaseInitate } from "@/pages/catalogue/hooks/useCatalogueData";
+import { Receipt1 } from "iconsax-react";
 import { useState, type FC } from "react";
 
+const CATALOG_COUNTS = [1, 2, 3, 5, 10];
+
 const BuyCatalog: FC = () => {
   const [showModal, setShowModal] = useState<boolean>(false);
   const [count, setCount] = useState<number>(0);
@@ -44,23 +47,47 @@ const BuyCatalog: FC = () => {
         isHeader
         title_header="خرید کاتالوگ"
       >
-        <div className="mt-4">
+        <div>
+          <div className="mt-8 text-sm">تعداد کاتالوگ مورد نظر را انتخاب کنید</div>
+          <div className="mt-4 flex flex-wrap gap-4">
+            {CATALOG_COUNTS.map((item) => (
+              <div
+                key={item}
+                onClick={() => setCount(item)}
+                className={clx(
+                  "flex h-10 cursor-pointer items-center rounded-lg border border-[#EBEDF5] bg-[#EBEDF5] px-6 text-xs",
+                  count === item && "border-black",
+                )}
+              >
+                {item} عدد
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-8">
             <Input
               label="تعداد"
+              className="bg-white/50"
               type="number"
               value={count}
               onChange={(e) => setCount(+e.target.value)}
             />
           </div>
-        <div className="mt-6 flex justify-end">
+
+          <div className="mt-24 flex justify-end">
             <Button
               disabled={isPending}
               onClick={handlePurchaseInitate}
-            className="w-fit px-5"
+              className="w-auto px-8"
+              variant="secondary"
             >
+              <div className="flex items-center gap-2">
+                <Receipt1 size={18} color="black" />
                 صدور صورتحساب
+              </div>
             </Button>
           </div>
+        </div>
       </DefaulModal>
     </div>
   );

src/vite-env.d.ts

@@ -5,6 +5,7 @@ interface ImportMetaEnv {
   readonly VITE_TOKEN_NAME: string;
   readonly VITE_REFRESH_TOKEN_NAME: string;
   readonly VITE_INVOICE_URL: string;
+  readonly VITE_LOGIN_URL: string;
   readonly VITE_DESIGN_TIER_1_MAX: string;
   readonly VITE_DESIGN_PRICE_TIER_1: string;
   readonly VITE_DESIGN_TIER_2_MAX: string;