business slug

src/pages/catalogue/hooks/useCatalogueData.ts

@@ -38,18 +38,24 @@ export const useGetCatalogById = (id: string) => {
 };
 
 /** Route param may be Mongo id (editor/admin) or slug (public viewer-style URLs). */
-export const useGetCatalogByIdOrSlug = (param: string) => {
+export const useGetCatalogByIdOrSlug = (
+  param: string,
+  businessSlug = "",
+) => {
   const isId = isCatalogMongoId(param);
   const byId = useGetCatalogById(isId ? param : "");
-  const bySlug = useGetCatalogBySlug(isId ? "" : param);
+  const bySlug = useGetCatalogBySlug(
+    isId ? "" : businessSlug,
+    isId ? "" : param,
+  );
   return isId ? byId : bySlug;
 };
 
-export const useGetCatalogBySlug = (slug: string) => {
+export const useGetCatalogBySlug = (businessSlug: string, slug: string) => {
   return useQuery({
-    queryKey: ["catalog", slug],
+    queryKey: ["catalog", businessSlug, slug],
-    queryFn: () => api.getCatalogBySlug(slug),
+    queryFn: () => api.getCatalogBySlug(businessSlug, slug),
-    enabled: !!slug,
+    enabled: !!businessSlug && !!slug,
     // جلوگیری از بازنویسی state محلی با refetch هنگام فوکوس پنجره (مثلاً دو کاربر همزمان)
     refetchOnWindowFocus: false,
     staleTime: 5 * 60 * 1000,

src/pages/catalogue/service/CatalogueService.ts

@@ -24,9 +24,9 @@ export const getCatalogById = async (id: string) => {
   return data;
 };
 
-export const getCatalogBySlug = async (slug: string) => {
+export const getCatalogBySlug = async (businessSlug: string, slug: string) => {
   const { data } = await axios.get<CatalogByIdResponseType>(
-    `/public/catalogue/slug/${slug}`,
+    `/public/catalogue/${businessSlug}/${slug}`,
   );
   return data;
 };

src/pages/viewer/Viewer.tsx

@@ -17,12 +17,19 @@ type ViewerProps = {
   bySlug?: boolean;
 };
 const Viewer: FC<ViewerProps> = ({ bySlug = false }) => {
-  const { id } = useParams<{ id: string }>();
+  const { id, businessSlug, slug } = useParams<{
+    id?: string;
+    businessSlug?: string;
+    slug?: string;
+  }>();
+  const catalogKey = bySlug ? slug : id;
   const {
     data,
     isLoading,
     error: queryError,
-  } = bySlug ? useGetCatalogBySlug(id ?? "") : useGetCatalogById(id ?? "");
+  } = bySlug
+    ? useGetCatalogBySlug(businessSlug ?? "", slug ?? "")
+    : useGetCatalogById(id ?? "");
   usePageTitle(`کاتالوگ ${data?.data?.name}`);
   const [pages, setPages] = useState<PageData[]>([]);
   const [documentSettings, setDocumentSettings] = useState<
@@ -30,7 +37,7 @@ const Viewer: FC<ViewerProps> = ({ bySlug = false }) => {
   >(undefined);
 
   useEffect(() => {
-    if (!data?.data?.content || !id) return;
+    if (!data?.data?.content || !catalogKey) return;
     try {
       const parsed = JSON.parse(data.data.content);
       const pagesArray = Array.isArray(parsed) ? parsed : (parsed.pages ?? []);
@@ -47,13 +54,13 @@ const Viewer: FC<ViewerProps> = ({ bySlug = false }) => {
     } catch (err) {
       console.error("خطا در پردازش محتوای کاتالوگ:", err);
     }
-  }, [data?.data?.content, id]);
+  }, [data?.data?.content, catalogKey]);
 
-  useBrowserFullscreen({ enabled: Boolean(id) });
+  useBrowserFullscreen({ enabled: Boolean(catalogKey) });
   const { isReady: areInitialPagesReady, progress: preloadProgress } =
     useInitialPagesPreload(pages, documentSettings);
 
-  if (!id) {
+  if (!catalogKey || (bySlug && !businessSlug)) {
     return (
       <div className="w-full h-full flex items-center justify-center">
         <div className="text-gray-600">شناسه کاتالوگ مشخص نیست</div>

src/router/MainRouter.tsx

@@ -86,7 +86,7 @@ const MainRouter = () => {
                 }
               />
               <Route
-                path={Paths.viewerBySlug + "/:id"}
+                path={Paths.viewerBySlug + "/:businessSlug/:slug"}
                 element={
                   <PrivateRoute requireAuth={false}>
                     <Viewer bySlug={true} />