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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 1x 1x | import { selectTotalPrice } from "@/redux/features/cartSlice";
import { useAppSelector } from "@/redux/store";
import React from "react";
import { useSelector } from "react-redux";
import { Button } from "@/components/ui";
import { formatCurrency } from "@/lib/core";
import { useRouter } from "next/navigation";
const OrderSummary = () => {
const router = useRouter();
const cartItems = useAppSelector((state) => state.cartReducer.items);
const totalPrice = useSelector(selectTotalPrice);
const handleCheckout = () => {
router.push("/checkout");
};
return (
<div className="lg:max-w-[455px] w-full">
{/* <!-- order list box --> */}
<div className="bg-white dark:bg-gray-800 shadow-1 rounded-[10px]">
<div className="border-b border-gray-3 dark:border-gray-700 py-5 px-4 sm:px-8.5">
<h3 className="font-medium text-xl text-dark dark:text-gray-100">Order Summary</h3>
</div>
<div className="pt-2.5 pb-8.5 px-4 sm:px-8.5">
{/* <!-- title --> */}
<div className="flex items-center justify-between py-5 border-b border-gray-3 dark:border-gray-700">
<div>
<h4 className="font-medium text-dark dark:text-gray-200">Product</h4>
</div>
<div>
<h4 className="font-medium text-dark dark:text-gray-200 text-right">Subtotal</h4>
</div>
</div>
{/* <!-- product item --> */}
{cartItems.map((item, key) => (
<div key={key} className="flex items-center justify-between py-5 border-b border-gray-3 dark:border-gray-700">
<div>
<p className="text-dark dark:text-gray-300">{item.title}</p>
</div>
<div>
<p className="text-dark dark:text-gray-300 text-right">
{formatCurrency(item.discountedPrice * item.quantity)}
</p>
</div>
</div>
))}
{/* <!-- total --> */}
<div className="flex items-center justify-between pt-5">
<div>
<p className="font-medium text-lg text-dark dark:text-gray-100">Total</p>
</div>
<div>
<p className="font-medium text-lg text-dark dark:text-gray-100 text-right">
{formatCurrency(totalPrice)}
</p>
</div>
</div>
{/* <!-- checkout button --> */}
<Button
type="button"
variant="primary"
size="md"
fullWidth
className="mt-7.5"
onClick={handleCheckout}
>
Process to Checkout
</Button>
</div>
</div>
</div>
);
};
export default OrderSummary;
|