get business catalog

.env

@@ -1,4 +1,4 @@
-VITE_API_URL=https://dpage-api.danakcorp.com
+# VITE_API_URL=https://dpage-api.danakcorp.com
-# VITE_API_URL=http://192.168.99.131:4000
+VITE_API_URL=http://192.168.99.131:4000
 VITE_TOKEN_NAME=dpage-editor-t
 VITE_REFRESH_TOKEN_NAME=dpage-editor-refresh-t

src/config/Paths.ts

@@ -5,6 +5,7 @@ export const Paths = {
   viewerBySlug: "/catalogue",
   catalog: {
     list: "/catalogue",
+    business: "/business/",
   },
   designer: {
     request: "/designer/request",
@@ -14,6 +15,16 @@ export const Paths = {
 const viewerPathPrefix = `${Paths.viewer}/`;
 const viewerBySlugPathPrefix = `${Paths.viewerBySlug}/`;
 
+const businessCatalogPathPrefix = Paths.catalog.business;
+
+/** Public business catalogue grid: /business/:slug */
+export const isBusinessCatalogPath = (pathname: string): boolean => {
+  return (
+    pathname.startsWith(businessCatalogPathPrefix) &&
+    pathname.length > businessCatalogPathPrefix.length
+  );
+};
+
 /** Full-screen viewer: /viewer/:id or /catalogue/:slug (not the list at /catalogue). */
 export const isViewerPath = (pathname: string): boolean => {
   const isViewerById =

src/pages/catalogue/Business.tsx

@@ -0,0 +1,26 @@
+import GridWrapper from "@/components/GridWrapper";
+import { type FC } from "react";
+import { useParams } from "react-router-dom";
+import ButtonAddCatalogue from "./components/ButtonAddCatalogue";
+import CatalogueItem from "./components/CatalogueItem";
+import { useGetBusinessCatalog } from "./hooks/useCatalogueData";
+
+const Business: FC = () => {
+  const { slug } = useParams<{ slug: string }>();
+  const { data, isPending, refetch } = useGetBusinessCatalog(slug ?? "");
+  //   const { data: businessData, isLoading: businessLoading } =
+  //     useGetBusinessBySlug(slug ?? "");
+
+  return (
+    <div className="w-full mt-5">
+      <GridWrapper desktop={4} gapDesktop={40} mobile={1}>
+        {data?.data?.map((item) => {
+          return <CatalogueItem refetch={refetch} key={item.id} item={item} />;
+        })}
+        <ButtonAddCatalogue isFirst={data?.data?.length === 0} />
+      </GridWrapper>
+    </div>
+  );
+};
+
+export default Business;

src/pages/catalogue/hooks/useCatalogueData.ts

@@ -1,4 +1,4 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/CatalogueService";
 
 export const usePurchaseInitate = () => {
@@ -6,3 +6,19 @@ export const usePurchaseInitate = () => {
     mutationFn: api.purchaseInitate,
   });
 };
+
+export const useGetBusinessCatalog = (slug: string) => {
+  return useQuery({
+    queryKey: ["businessCatalog", slug],
+    queryFn: () => api.getBusinessCatalog(slug),
+    enabled: !!slug,
+  });
+};
+
+export const useGetBusinessBySlug = (slug: string) => {
+  return useQuery({
+    queryKey: ["business", slug],
+    queryFn: () => api.getBusinessBySlug(slug),
+    enabled: !!slug,
+  });
+};

src/pages/catalogue/service/CatalogueService.ts

@@ -1,5 +1,5 @@
 import axios from "@/config/axios";
-import type { PurchaseInitiate } from "../types/Types";
+import type { CatalogResponseType, PurchaseInitiate } from "../types/Types";
 
 export const purchaseInitate = async (params: PurchaseInitiate) => {
   const { data } = await axios.post(
@@ -8,3 +8,15 @@ export const purchaseInitate = async (params: PurchaseInitiate) => {
   );
   return data;
 };
+
+export const getBusinessCatalog = async (slug: string) => {
+  const { data } = await axios.get<CatalogResponseType>(
+    `/public/catalogue/business/slug/${slug}`,
+  );
+  return data;
+};
+
+export const getBusinessBySlug = async (slug: string) => {
+  const { data } = await axios.get(`/public/business/${slug}`);
+  return data;
+};

src/router/MainRouter.tsx

@@ -1,5 +1,6 @@
-import { isViewerPath, Paths } from "@/config/Paths";
+import { isBusinessCatalogPath, isViewerPath, Paths } from "@/config/Paths";
 import { clx } from "@/helpers/utils";
+import Business from "@/pages/catalogue/Business";
 import CatalogueList from "@/pages/catalogue/List";
 import DesignerRequest from "@/pages/designer/Request";
 import Editor from "@/pages/editor/Editor";
@@ -15,9 +16,11 @@ const MainRouter = () => {
   const { hasSubMenu } = useSharedStore();
   const location = useLocation();
   const isViewerRoute = isViewerPath(location.pathname);
+  const isBusinessCatalogRoute = isBusinessCatalogPath(location.pathname);
+  const hideAppChrome = isViewerRoute || isBusinessCatalogRoute;
   const hiddenSideBarRoutes = [Paths.editor];
   const shouldRenderSideBar =
-    !hiddenSideBarRoutes.includes(location.pathname) && !isViewerRoute;
+    !hiddenSideBarRoutes.includes(location.pathname) && !hideAppChrome;
   const routeHasLocalSidebar = location.pathname.includes("editor");
   const hasSidebarSpace = shouldRenderSideBar || routeHasLocalSidebar;
   const headerSidebarSize = routeHasLocalSidebar ? "wide" : "default";
@@ -29,8 +32,8 @@ const MainRouter = () => {
         isViewerRoute ? "fixed inset-0 z-50 bg-neutral-100" : "p-4",
       )}
     >
-      {!isViewerRoute && shouldRenderSideBar ? <SideBar /> : null}
+      {!hideAppChrome && shouldRenderSideBar ? <SideBar /> : null}
-      {!isViewerRoute ? (
+      {!hideAppChrome ? (
         <Header
           hasMainSidebar={hasSidebarSpace}
           sidebarSize={headerSidebarSize}
@@ -39,13 +42,13 @@ const MainRouter = () => {
       <div
         className={clx(
           "flex flex-1 flex-col min-h-0",
-          !isViewerRoute && "mt-[68px] xl:mt-[81px]",
+          !hideAppChrome && "mt-[68px] xl:mt-[81px]",
-          !isViewerRoute && shouldRenderSideBar && "xl:ms-[269px]",
+          !hideAppChrome && shouldRenderSideBar && "xl:ms-[269px]",
-          !isViewerRoute &&
+          !hideAppChrome &&
             shouldRenderSideBar &&
             hasSubMenu &&
             "xl:ms-[305px]",
-          !isViewerRoute && routeHasLocalSidebar && "xl:mr-[374px]",
+          !hideAppChrome && routeHasLocalSidebar && "xl:mr-[374px]",
         )}
       >
         <div
@@ -90,6 +93,12 @@ const MainRouter = () => {
                   </PrivateRoute>
                 }
               />
+
+              <Route
+                path={Paths.catalog.business + ":slug"}
+                element={<Business />}
+              />
+
               <Route
                 path={Paths.catalog.list}
                 element={