Hotfix/minor fixes

__tests__/page.test.tsx

@@ -4,8 +4,8 @@ import Home from '@/app/(shop)/page';
 import { describe, it, expect } from 'vitest';
 
 describe('Home Page', () => {
-  it('displays the main heading', () => {
-    render(<Home />);
+  it('displays the main heading', async () => {
+    render(await Home());
     const heading = screen.getByText('Pharmatech');
     expect(heading).toBeTruthy(); // Check if the element exists
   });

package.json

@@ -20,7 +20,7 @@
     "@heroicons/react": "^2.2.0",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@next/third-parties": "^15.3.0",
-    "@pharmatech/sdk": "^0.4.19",
+    "@pharmatech/sdk": "^0.4.20",
     "@radix-ui/react-slider": "^1.2.4",
     "@react-google-maps/api": "^2.20.6",
     "@types/google.maps": "^3.58.1",

src/app/(shop)/layout.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { ReactNode } from 'react';
+import { ReactNode, Suspense } from 'react';
 import NavBar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import { useAuth } from '@/context/AuthContext';
+import Loading from '../loading';
 
 type ShopLayoutProps = {
   children: ReactNode;
@@ -18,10 +19,10 @@ export default function ShopLayout({ children }: ShopLayoutProps) {
     <div>
       <div className="relative bg-white">
         {/* Nav */}
-        <div className="relative z-50">
+        <div className="sticky top-0 z-50 bg-white">
           <NavBar />
         </div>
-        {children}
+        <Suspense fallback={<Loading />}>{children}</Suspense>
       </div>
       <Footer />
     </div>

src/app/(shop)/order/[id]/page.tsx

@@ -53,7 +53,7 @@
       socket.off('orderUpdated', onOrderUpdated);
       socket.disconnect();
     };
   }, []);
 
   useEffect(() => {
     if (id && token) {
@@ -139,19 +139,27 @@
       case OrderStatus.REQUESTED:
         return <WaitingApproval />;
       case OrderStatus.APPROVED:
-        return <PaymentProcess order={order} couponDiscount={0} />;
+        if (
+          [PaymentMethod.BANK_TRANSFER, PaymentMethod.MOBILE_PAYMENT].includes(
+            order.paymentMethod,
+          )
+        ) {
+          return <PaymentProcess order={order} couponDiscount={0} />;
+        } else {
+          return <ReviewOrder order={order} />;
+        }
       case OrderStatus.IN_PROGRESS:
         return order.type === OrderType.PICKUP ? (
           <ReviewOrder order={order} />
         ) : (
           <DeliveryInfo order={order} />
         );
+      case OrderStatus.READY_FOR_PICKUP:
+        return <ReviewOrder order={order} />;
       case OrderStatus.CANCELED:
         return <RejectedOrder deliveryMethod={order.type} />;
       case OrderStatus.COMPLETED:
         return <OrderCompleted order={order} />;
-      default:
-        return <div>Error</div>;
     }
   };
 

src/app/(shop)/page.tsx

@@ -1,127 +1,25 @@
-'use client';
-import { useEffect, useRef, useState } from 'react';
 import Carousel from '@/components/Carousel';
-import ProductCarousel from '@/components/Product/ProductCarousel';
-import { api } from '@/lib/sdkConfig';
 import Banner1 from '@/lib/utils/images/banner-v2.jpg';
 import Banner2 from '@/lib/utils/images/banner-v1.jpg';
 import Banner3 from '@/lib/utils/images/banner_final.jpg';
-import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import ProductDetailImg from '@/lib/utils/images/Antibioticos.png';
-
-import type {
-  Category as SDKCategory,
-  ProductPresentation,
-} from '@pharmatech/sdk';
-
-import CategoryCarousel from '@/components/CategoryCarousel';
-import EnterCodeFormModal from '@/components/EmailValidation';
-import { useAuth } from '@/context/AuthContext';
-
-type CategoryForCarousel = SDKCategory & {
-  id: string;
-  imageUrl?: string;
-};
-
-export default function Home() {
-  const { token, user } = useAuth();
-  const toastDisplayed = useRef(false);
-  const toastId = useRef<number | string | null>(null);
-
-  const [products, setProducts] = useState<ProductPresentation[]>([]);
-  const [recommendedProducts, setRecommendedProducts] = useState<
-    ProductPresentation[]
-  >([]);
-  const [categories, setCategories] = useState<CategoryForCarousel[]>([]);
-  const [showEmailModal, setShowEmailModal] = useState(false);
-
+import ProductCarouselSkeleton from '@/components/Product/ProductCarouselSkelete';
+import EmailConfirmation from '@/components/Home/EmailConfirmation';
+import { Suspense } from 'react';
+import ProductsRecommended from '@/components/Home/ProductsRecommended';
+import ProductsOffer from '@/components/Home/ProductsOffer';
+import Categories from '@/components/Home/Categories';
+
+export default async function Home() {
   const slides = [
     { id: 1, imageUrl: Banner1 },
     { id: 2, imageUrl: Banner2 },
     { id: 3, imageUrl: Banner3 },
   ];
 
-  useEffect(() => {
-    const checkUserValidation = async () => {
-      if (!token || !user?.sub) return;
-      try {
-        const profile = await api.user.getProfile(user.sub, token);
-        if (!profile.isValidated && !toastDisplayed.current) {
-          toastId.current = toast.info(
-            <div>
-              Verifica tu correo electrónico.{' '}
-              <button
-                onClick={() => {
-                  toast.dismiss(toastId.current!);
-                  setShowEmailModal(true);
-                }}
-                className="text-blue-300 underline hover:text-blue-500"
-              >
-                Verificar código
-              </button>
-            </div>,
-            {
-              autoClose: false,
-              closeOnClick: false,
-              draggable: true,
-              position: 'top-right',
-            },
-          );
-          toastDisplayed.current = true;
-        }
-      } catch (err) {
-        console.error('Error verificando validación del usuario:', err);
-      }
-    };
-    checkUserValidation();
-  }, [token, user]);
-
-  useEffect(() => {
-    const fetchProducts = async () => {
-      try {
-        const data = await api.product.getProducts({ page: 1, limit: 20 });
-        setProducts(data.results);
-      } catch (err) {
-        console.error('Error fetching products:', err);
-      }
-    };
-    fetchProducts();
-  }, []);
-
-  useEffect(() => {
-    const fetchCategories = async () => {
-      try {
-        const resp = await api.category.findAll({ page: 1, limit: 20 });
-        const formatted: CategoryForCarousel[] = resp.results.map((c) => ({
-          ...c,
-          id: String(c.id),
-          imageUrl: ProductDetailImg.src,
-        }));
-        setCategories(formatted);
-      } catch (err) {
-        console.error('Error fetching categories:', err);
-      }
-    };
-    fetchCategories();
-  }, []);
-
-  useEffect(() => {
-    const fetchRecommended = async () => {
-      if (!token || !user?.sub) return;
-      try {
-        const data = await api.product.getRecommendations(token);
-        setRecommendedProducts(data.results);
-      } catch (err) {
-        console.error('Error fetching recommended products:', err);
-      }
-    };
-    fetchRecommended();
-  }, [token, user]);
-
   return (
     <div className="px-4">
-      <h1 className="mb-12 text-2xl font-bold text-white">Pharmatech</h1>
+      <h1 className="text-2xl font-bold text-white">Pharmatech</h1>
 
       {/* Carrusel principal */}
       <div className="md:max-w-8xl mx-auto mb-12 max-w-[75vw] md:p-2">
@@ -131,38 +29,22 @@ export default function Home() {
         <h3 className="my-8 pt-4 text-[32px] text-[#1C2143]">
           Productos en Oferta Exclusiva
         </h3>
-        <div className="mt-8 cursor-pointer">
-          <ProductCarousel products={products} />
-        </div>
+        <Suspense fallback={<ProductCarouselSkeleton />}>
+          <ProductsOffer />
+        </Suspense>
 
         {/* Sección recomendados */}
-        {recommendedProducts.length > 0 && (
-          <>
-            <h3 className="my-8 pt-4 text-[32px] text-[#1C2143]">
-              Productos Recomendados para ti
-            </h3>
-            <div className="mt-8 cursor-pointer">
-              <ProductCarousel products={recommendedProducts} />
-            </div>
-          </>
-        )}
+        <ProductsRecommended />
 
         {/* Sección categorías */}
         <h3 className="my-8 pt-4 text-[32px] text-[#1C2143]">Categorías</h3>
-        <div className="mt-8 cursor-pointer">
-          <CategoryCarousel categories={categories} />
-        </div>
+        <Suspense fallback={<ProductCarouselSkeleton />}>
+          <Categories />
+        </Suspense>
       </div>
 
       {/* Modal de verificación de email */}
-      {token && user?.sub && (
-        <EnterCodeFormModal
-          show={showEmailModal}
-          onClose={() => setShowEmailModal(false)}
-          userId={user.sub}
-          jwt={token}
-        />
-      )}
+      <EmailConfirmation />
     </div>
   );
 }