112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { StoreCart, StoreCartLineItem } from "@medusajs/types"
|
|
import CartItems from "./cart-items"
|
|
import { Trans } from '@kit/ui/trans';
|
|
import { Button } from '@kit/ui/button';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
} from '@kit/ui/card';
|
|
import DiscountCode from "./discount-code";
|
|
import { useRouter } from "next/navigation";
|
|
import { initiatePaymentSession } from "@lib/data/cart";
|
|
import { formatCurrency } from "@/packages/shared/src/utils";
|
|
import { useTranslation } from "react-i18next";
|
|
import { handleNavigateToPayment } from "@/lib/services/medusaCart.service";
|
|
|
|
const IS_DISCOUNT_SHOWN = false as boolean;
|
|
|
|
export default function Cart({
|
|
cart,
|
|
analysisPackages,
|
|
otherItems,
|
|
}: {
|
|
cart: StoreCart | null
|
|
analysisPackages: StoreCartLineItem[];
|
|
otherItems: StoreCartLineItem[];
|
|
}) {
|
|
const router = useRouter();
|
|
const { i18n: { language } } = useTranslation();
|
|
|
|
const items = cart?.items ?? [];
|
|
|
|
if (!cart || items.length === 0) {
|
|
return (
|
|
<div className="content-container py-5 lg:px-4">
|
|
<div>
|
|
<div className="flex flex-col justify-center items-center" data-testid="empty-cart-message">
|
|
<h4 className="text-center">
|
|
<Trans i18nKey="cart:emptyCartMessage" />
|
|
</h4>
|
|
<p className="text-center">
|
|
<Trans i18nKey="cart:emptyCartMessageDescription" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
async function handlePayment() {
|
|
const response = await initiatePaymentSession(cart!, {
|
|
provider_id: 'pp_system_default',
|
|
});
|
|
if (response.payment_collection) {
|
|
const url = await handleNavigateToPayment({ language });
|
|
router.push(url);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 small:grid-cols-[1fr_360px] gap-x-40 lg:px-4">
|
|
<div className="flex flex-col bg-white gap-y-6">
|
|
<CartItems cart={cart} items={analysisPackages} productColumnLabelKey="cart:items.analysisPackages.productColumnLabel" />
|
|
<CartItems cart={cart} items={otherItems} productColumnLabelKey="cart:items.services.productColumnLabel" />
|
|
</div>
|
|
{Array.isArray(cart.items) && cart.items.length > 0 && (
|
|
<div className="flex justify-end gap-x-4 px-6 py-4">
|
|
<div className="mr-[36px]">
|
|
<p className="ml-0 font-bold text-sm">
|
|
<Trans i18nKey="cart:total" />
|
|
</p>
|
|
</div>
|
|
<div className="mr-[116px]">
|
|
<p className="text-sm">
|
|
{formatCurrency({
|
|
value: cart.total,
|
|
currencyCode: cart.currency_code,
|
|
locale: language,
|
|
})}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex gap-y-6 py-8">
|
|
{IS_DISCOUNT_SHOWN && (
|
|
<Card
|
|
className="flex flex-col justify-between w-1/2"
|
|
>
|
|
<CardHeader className="pb-4">
|
|
<h5>
|
|
<Trans i18nKey="cart:discountCode.title" />
|
|
</h5>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<DiscountCode cart={{ ...cart }} />
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<Button className="h-10" onClick={handlePayment}>
|
|
<Trans i18nKey="cart:checkout.goToCheckout" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|