feat(MED-100): update cart checkout flow and views

2025-07-17 10:16:52 +03:00
parent ea3fb22f1d
commit 6426e2a79b
33 changed files with 1505 additions and 138 deletions
--- a/app/home/(user)/_components/cart/index.tsx
+++ b/app/home/(user)/_components/cart/index.tsx
@@ -0,0 +1,111 @@
+"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>
+  );
+}