Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 26x 26x 26x 26x 26x 26x 26x 19x 19x 19x 19x 19x 19x 19x 19x 19x 26x 26x 26x 26x 26x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 72x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 26x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 26x 26x 26x 26x 1x 1x | "use client";
import React, { useEffect, useRef } from "react";
import Discount from "./Discount";
import OrderSummary from "./OrderSummary";
import { useAppSelector } from "@/redux/store";
import SingleItem from "./SingleItem";
import Link from "next/link";
import { Icon } from "@/components/ui/icons";
import { Button } from "@/components/ui";
import { useFunnelSteps } from "@/hooks/useFunnelTracking";
const Cart = () => {
const cartItems = useAppSelector((state) => state.cartReducer.items);
const { trackStep } = useFunnelSteps();
const hasTrackedRef = useRef(false);
// Track view_cart funnel step when cart page is viewed with items
useEffect(() => {
if (cartItems.length > 0 && !hasTrackedRef.current) {
const cartTotal = cartItems.reduce(
(sum, item) => sum + item.discountedPrice * item.quantity,
0
);
trackStep('checkout', 'view_cart', {
cart_value: cartTotal,
item_count: cartItems.length});
hasTrackedRef.current = true;
}
}, [cartItems, trackStep]);
return (
<>
{cartItems.length > 0 ? (
<section className="overflow-hidden pt-[140px] pb-20 bg-gray-2 dark:bg-gray-900">
<div className="max-w-[1170px] w-full mx-auto px-4 sm:px-8 xl:px-0">
<div className="flex flex-wrap items-center justify-between gap-5 mb-7.5">
<h2 className="font-medium text-dark dark:text-gray-100 text-2xl">Your Cart</h2>
<Button variant="ghost" size="sm" className="text-blue">Clear Shopping Cart</Button>
</div>
<div className="bg-white dark:bg-gray-800 rounded-[10px] shadow-1">
<div className="w-full overflow-x-auto">
<div className="min-w-[1170px]">
{/* <!-- table header --> */}
<div className="flex items-center py-5.5 px-7.5">
<div className="min-w-[400px]">
<p className="text-dark dark:text-gray-200">Product</p>
</div>
<div className="min-w-[180px]">
<p className="text-dark dark:text-gray-200">Price</p>
</div>
<div className="min-w-[275px]">
<p className="text-dark dark:text-gray-200">Quantity</p>
</div>
<div className="min-w-[200px]">
<p className="text-dark dark:text-gray-200">Subtotal</p>
</div>
<div className="min-w-[50px]">
<p className="text-dark dark:text-gray-200 text-right">Action</p>
</div>
</div>
{/* <!-- cart item --> */}
{cartItems.length > 0 &&
cartItems.map((item, key) => (
<SingleItem item={item} key={key} />
))}
</div>
</div>
</div>
<div className="flex flex-col lg:flex-row gap-7.5 xl:gap-11 mt-9">
<Discount />
<OrderSummary />
</div>
</div>
</section>
) : (
<>
<div className="text-center pt-[140px] pb-20 dark:bg-gray-900">
<div className="mx-auto pb-7.5">
<Icon name="empty-cart" className="mx-auto dark:text-gray-400" width={100} height={100} />
</div>
<p className="pb-6 dark:text-gray-300">Your cart is empty!</p>
<Link
href="/shop"
className="w-96 mx-auto flex justify-center font-medium text-white bg-dark py-[13px] px-6 rounded-md ease-out duration-200 hover:bg-opacity-95"
>
Continue Shopping
</Link>
</div>
</>
)}
</>
);
};
export default Cart;
|