"use client";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
import { useProductCatalog } from "@/hooks/useProductCatalog";
import { useState } from "react";
import ProductCart from "@/components/ecommerce/cart/ProductCart";
import { useCart } from "@/hooks/useCart";
import { useCheckout } from "@/hooks/useCheckout";
export default function ShopPage() {
const {
products,
isLoading,
search,
setSearch,
filters,
} = useProductCatalog({ basePath: "/shop" });
const {
items: cartItems,
isOpen: cartOpen,
setIsOpen: setCartOpen,
updateQuantity,
removeItem,
total: cartTotal,
getCheckoutItems,
} = useCart();
const { checkout, isLoading: isCheckoutLoading } = useCheckout();
const handleCheckout = async () => {
if (cartItems.length === 0) return;
const currentUrl = new URL(window.location.href);
currentUrl.searchParams.set("success", "true");
await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
};
if (isLoading) {
return (
setCartOpen(true) }}
/>
Loading products...
);
}
return (
setCartOpen(true) }}
/>
setCartOpen(false)}
items={cartItems}
onQuantityChange={updateQuantity}
onRemove={removeItem}
total={`$${cartTotal}`}
buttons={[
{
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
},
]}
/>
);
}