hngx-org · Mhiracul · Oct 22, 2023 · Oct 22, 2023 · Oct 22, 2023 · Oct 22, 2023
diff --git a/@types/index.d.ts b/@types/index.d.ts
@@ -181,9 +181,20 @@ export interface Data {
   updatedAt: string;
   products: Product;
 }
-export interface ShopData {
-  products: Product;
-  data?: Data;
+interface PaginationData {
+  totalItems: number;
+  totalPages: number;
+  currentPage: number;
+  pageSize: number;
+}
+interface ShopData {
+  code: string;
+  message: string;
+  data: ShopResponse;
+}
+export interface ShopResponse {
+  shop: Data;
+  pagination: PaginationData;
 }
 
 export interface SEOProps {

diff --git a/components/Navbars/TopBar.tsx b/components/Navbars/TopBar.tsx
@@ -544,14 +544,17 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
             height={24}
             alt="Cart Icon"
           />
-        </div>
+
+
+    </div>
+
 
         <div className="auth flex items-center gap-3 cursor-pointer" onClick={handleAuthMenu}>
           <p className=" font-bold font-manropeEB">
             {globalAuth?.user?.firstName} {globalAuth?.user?.lastName}
           </p>
-
-          <div className="w-10 h-10 relative bg-gray-400 rounded-[100px]" />
+          {/* </div> */}
+          <UserSquare size="32" color="#555555" />{' '}
         </div>
 
         {/* {notificationMenu && 

diff --git a/modules/shop/ZuriLandingPage.tsx b/modules/shop/ZuriLandingPage.tsx
@@ -39,9 +39,12 @@ const ZuriLandingPage = () => {
       setShowLoader(true);
       if (shop_id) {
         try {
-          const response = await axios.get(`https://zuriportfolio-shop-internal-api.onrender.com/api/shop/${shop_id}`);
+          const response = await axios.get(
+            `https://zuriportfolio-shop-internal-api.onrender.com/api/v1/shop/${shop_id}`,
+          );
 
           setShop(response.data);
+          console.log('Shop Data:', response.data);
 
           setTimeout(() => {
             setShowLoader(false);
@@ -66,20 +69,23 @@ const ZuriLandingPage = () => {
   }, [router.query.shop_id, shop_id]);
 
   if (shop && shop.data) {
-    const shopName = shop.data?.name;
+    const shopName = shop.data?.shop.name;
+    console.log('Shop Name:', shopName);
   }
 
   if (shop && shop.data) {
-    const shopP = shop.data?.products;
+    const shopP = shop.data?.shop.products;
   }
 
   useEffect(() => {
     if (shop) {
-      const shopProducts = shop.data?.products || [];
+      const shopProducts = shop.data?.shop.products || [];
       setProducts(shopProducts);
     }
   }, [shop]);
-  const totalPageCount = Math.ceil(products.length / productsPerPage);
+
+  const paginationData = shop?.data?.pagination;
+  const totalPageCount = paginationData ? Math.ceil(paginationData.totalItems / paginationData.pageSize) : 0;
 
   const handlePageChange = (newPage: number) => {
     setCurrentPage(newPage);
@@ -89,16 +95,16 @@ const ZuriLandingPage = () => {
     <div className="flex flex-col h-screen">
       <Head>
         <link rel="icon" href="/assets/zuriLogo.svg" />
-        <title>{shop ? `${shop.data?.name} Shop - Discover, Buy, and Sell` : ''}</title>
+        <title>{shop ? `${shop.data?.shop.name} Shop - Discover, Buy, and Sell` : ''}</title>
         <meta
           name="description"
           content="Discover a versatile online marketplace where sellers can showcase their products, and buyers can find a wide range of goods. Shop for unique handcrafted items, everyday essentials, and more."
         />
-        <meta property="og:title" content={shop ? `${shop.data?.name} Shop - Discover, Buy, and Sell` : ''} />
+        <meta property="og:title" content={shop ? `${shop.data.shop.name} Shop - Discover, Buy, and Sell` : ''} />
         <meta
           property="og:description"
           content={`Experience the magic of ${
-            shop ? shop.data?.name : 'Shop'
+            shop ? shop.data?.shop.name : 'Shop'
           } Shop, a place where you can discover, shop, and thrive. Our exceptional products cater to all your needs. Join us today!`}
         />
 
@@ -118,7 +124,7 @@ const ZuriLandingPage = () => {
       <div className=" flex-grow px-4 sm:px-6 md:px-6 lg:px-10 py-5 container mx-auto">
         {shop ? (
           <div className="space-y-12 py-10">
-            <h1 className="mb-4 md:text-3xl text-xl font-manropeEB">Hello, Welcome to {shop.data?.name}.</h1>
+            <h1 className="mb-4 md:text-3xl text-xl font-manropeEB">Hello, Welcome to {shop.data?.shop.name}.</h1>
           </div>
         ) : loading ? (
           <div className="flex items-center justify-center h-screen py-10">
@@ -144,15 +150,15 @@ const ZuriLandingPage = () => {
           {totalPageCount > 1 && (
             <Pagination
               visiblePaginatedBtn={5}
-              activePage={currentPage}
-              pages={totalPageCount}
-              page={currentPage}
+              activePage={paginationData?.currentPage || 0}
+              pages={paginationData?.totalPages || 1}
+              page={paginationData?.currentPage || 0}
               setPage={handlePageChange}
             />
           )}
         </a>
       </div>
-      <Footer shopName={shop ? shop.data?.name : ''} />
+      <Footer shopName={shop ? shop.data?.shop.name : ''} />
     </div>
   );
 };

diff --git a/modules/shop/component/productPage/ProductCard/ProductCard.tsx b/modules/shop/component/productPage/ProductCard/ProductCard.tsx
@@ -52,7 +52,7 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, shopName, searchQuer
     } else {
       try {
         const response = await axios.post(
-          'https://zuri-cart-checkout.onrender.com/api/checkout_cart/carts',
+          'https://zuriportfolio-shop-internal-api.onrender.com/api/v1/checkout_cart/carts',
           {
             product_ids: [product.id],
           },
@@ -132,7 +132,9 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, shopName, searchQuer
             className="md:text-sm text-xs  text-black  font-manropeB capitalize"
             dangerouslySetInnerHTML={{ __html: highlightSearchQuery(product.name, searchQuery) }}
           ></h3>{' '}
-          <p className="text-[#052011] md:text-lg text-base font-manropeB ">₦{product.price.toLocaleString()}</p>
+          <p className="text-[#052011] md:text-lg text-base font-manropeB ">
+            ₦{product.discount_price.toLocaleString()}
+          </p>
           {shopName && (
             <div>
               <p className="md:text-sm text-xs text-custom-color15 font-manropeL">

diff --git a/modules/shop/component/productPage/ShopProduct/ShopProductList.tsx b/modules/shop/component/productPage/ShopProduct/ShopProductList.tsx
@@ -13,11 +13,15 @@ interface ShopProductListProps {
 const ShopProductList: React.FC<ShopProductListProps> = ({ shop, currentPage, productsPerPage, searchQuery }) => {
   const shopData = shop?.data;
 
-  if (!shopData) {
-    return null;
+  if (!shopData || !Array.isArray(shopData.shop.products)) {
+    return (
+      <div>
+        <p>No products available.</p>
+      </div>
+    );
   }
 
-  const filteredProducts = shopData.products.filter((product: Products) =>
+  const filteredProducts = shopData.shop.products.filter((product: Products) =>
     product.name.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
@@ -26,7 +30,6 @@ const ShopProductList: React.FC<ShopProductListProps> = ({ shop, currentPage, pr
       position: 'top-right',
     });
   }
-
   const startIndex = (currentPage - 1) * productsPerPage;
   const endIndex = startIndex + productsPerPage;
   const productsToDisplay = filteredProducts.slice(startIndex, endIndex);
@@ -35,7 +38,12 @@ const ShopProductList: React.FC<ShopProductListProps> = ({ shop, currentPage, pr
     <div className="h-full">
       <div className="grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 grid-cols-1 md:gap-4 gap-2">
         {productsToDisplay.map((product: Products) => (
-          <ProductCard key={product.id} product={product} shopName={shopData.name || ''} searchQuery={searchQuery} />
+          <ProductCard
+            key={product.id}
+            product={product}
+            shopName={shopData.shop.name || ''}
+            searchQuery={searchQuery}
+          />
         ))}
       </div>
     </div>

diff --git a/modules/shop/productDetails.tsx b/modules/shop/productDetails.tsx
@@ -43,7 +43,7 @@ export default function ProductDetails() {
     const { id } = router.query;
     if (id) {
       setLoading(true);
-      fetch(`https://zuriportfolio-shop-internal-api.onrender.com/api/product/${id}`)
+      fetch(`https://zuriportfolio-shop-internal-api.onrender.com/api/v1/product/${id}`)
         .then((response) => response.json())
         .then((response) => {
           setProduct(response.data);
@@ -66,7 +66,7 @@ export default function ProductDetails() {
 
   useEffect(() => {
     if (shopID) {
-      fetch(`https://zuriportfolio-shop-internal-api.onrender.com/api/shop/${shopID}`)
+      fetch(`https://zuriportfolio-shop-internal-api.onrender.com/api/v1/shop/${shopID}`)
         .then((response) => response.json())
         .then((response) => {
           setOtherProducts(response.data.products);
@@ -178,7 +178,7 @@ export default function ProductDetails() {
     } else {
       try {
         const response = await axios.post(
-          'https://zuri-cart-checkout.onrender.com/api/checkout_cart/carts',
+          'https://zuriportfolio-shop-internal-api.onrender.com/api/v1/checkout_cart/carts',
           {
             product_ids: [product.id],
           },
@@ -375,7 +375,7 @@ export default function ProductDetails() {
               Other Products By {shopName}{' '}
             </h3>
           </div>
-          {otherProducts.length > 0 ? (
+          {otherProducts && otherProducts.length > 0 ? (
             <>
               <div className="md:mx-[0.66rem] mx-0 hidden lg:block">
                 <ShopProductList products={otherProducts.slice(0, 8)} productId={product.id} shopName={shopName} />