add cart functionality for tto services
This commit is contained in:
Helena
@@ -1,22 +1,23 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
import { handleNavigateToPayment } from '@/lib/services/medusaCart.service';
|
||||
import { formatCurrency } from '@/packages/shared/src/utils';
|
||||
import { initiatePaymentSession } from '@lib/data/cart';
|
||||
import { StoreCart, StoreCartLineItem } from '@medusajs/types';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { useState } from "react";
|
||||
import { Loader2 } from "lucide-react";
|
||||
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 { initiatePaymentSession } from "@lib/data/cart";
|
||||
import { formatCurrency } from "@/packages/shared/src/utils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { handleNavigateToPayment } from "@/lib/services/medusaCart.service";
|
||||
import AnalysisLocation from "./analysis-location";
|
||||
import { Card, CardContent, CardHeader } from '@kit/ui/card';
|
||||
import { Trans } from '@kit/ui/trans';
|
||||
|
||||
import AnalysisLocation from './analysis-location';
|
||||
import CartItems from './cart-items';
|
||||
import CartServiceItems from './cart-service-items';
|
||||
import DiscountCode from './discount-code';
|
||||
import { EnrichedCartItem } from './types';
|
||||
|
||||
const IS_DISCOUNT_SHOWN = true as boolean;
|
||||
|
||||
@@ -25,13 +26,16 @@ export default function Cart({
|
||||
synlabAnalyses,
|
||||
ttoServiceItems,
|
||||
}: {
|
||||
cart: StoreCart | null
|
||||
cart: StoreCart | null;
|
||||
synlabAnalyses: StoreCartLineItem[];
|
||||
ttoServiceItems: StoreCartLineItem[];
|
||||
ttoServiceItems: EnrichedCartItem[];
|
||||
}) {
|
||||
const { i18n: { language } } = useTranslation();
|
||||
const {
|
||||
i18n: { language },
|
||||
} = useTranslation();
|
||||
|
||||
const [isInitiatingSession, setIsInitiatingSession] = useState(false);
|
||||
const [unavailableLineItemIds, setUnavailableLineItemIds] = useState<string[]>()
|
||||
|
||||
const items = cart?.items ?? [];
|
||||
|
||||
@@ -39,7 +43,10 @@ export default function Cart({
|
||||
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">
|
||||
<div
|
||||
className="flex flex-col items-center justify-center"
|
||||
data-testid="empty-cart-message"
|
||||
>
|
||||
<h4 className="text-center">
|
||||
<Trans i18nKey="cart:emptyCartMessage" />
|
||||
</h4>
|
||||
@@ -60,8 +67,13 @@ export default function Cart({
|
||||
if (response.payment_collection) {
|
||||
const { payment_sessions } = response.payment_collection;
|
||||
const paymentSessionId = payment_sessions![0]!.id;
|
||||
const url = await handleNavigateToPayment({ language, paymentSessionId });
|
||||
window.location.href = url;
|
||||
const result = await handleNavigateToPayment({ language, paymentSessionId });
|
||||
if (result.url) {
|
||||
window.location.href = result.url;
|
||||
}
|
||||
if (result.unavailableLineItemIds) {
|
||||
setUnavailableLineItemIds(result.unavailableLineItemIds)
|
||||
}
|
||||
} else {
|
||||
setIsInitiatingSession(false);
|
||||
}
|
||||
@@ -71,21 +83,30 @@ export default function Cart({
|
||||
const isLocationsShown = synlabAnalyses.length > 0;
|
||||
|
||||
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={synlabAnalyses} productColumnLabelKey="cart:items.synlabAnalyses.productColumnLabel" />
|
||||
<CartItems cart={cart} items={ttoServiceItems} productColumnLabelKey="cart:items.ttoServices.productColumnLabel" />
|
||||
<div className="small:grid-cols-[1fr_360px] grid grid-cols-1 gap-x-40 lg:px-4">
|
||||
<div className="flex flex-col gap-y-6 bg-white">
|
||||
<CartItems
|
||||
cart={cart}
|
||||
items={synlabAnalyses}
|
||||
productColumnLabelKey="cart:items.synlabAnalyses.productColumnLabel"
|
||||
/>
|
||||
<CartServiceItems
|
||||
cart={cart}
|
||||
items={ttoServiceItems}
|
||||
productColumnLabelKey="cart:items.ttoServices.productColumnLabel"
|
||||
unavailableLineItemIds={unavailableLineItemIds}
|
||||
/>
|
||||
</div>
|
||||
{hasCartItems && (
|
||||
<>
|
||||
<div className="flex sm:justify-end gap-x-4 px-4 sm:px-6 pt-2 sm:pt-4">
|
||||
<div className="w-full sm:w-auto sm:mr-[42px]">
|
||||
<p className="ml-0 font-bold text-sm text-muted-foreground">
|
||||
<div className="flex gap-x-4 px-4 pt-2 sm:justify-end sm:px-6 sm:pt-4">
|
||||
<div className="w-full sm:mr-[42px] sm:w-auto">
|
||||
<p className="text-muted-foreground ml-0 text-sm font-bold">
|
||||
<Trans i18nKey="cart:order.subtotal" />
|
||||
</p>
|
||||
</div>
|
||||
<div className={`sm:mr-[112px] sm:w-[50px]`}>
|
||||
<p className="text-sm text-right">
|
||||
<p className="text-right text-sm">
|
||||
{formatCurrency({
|
||||
value: cart.subtotal,
|
||||
currencyCode: cart.currency_code,
|
||||
@@ -94,14 +115,14 @@ export default function Cart({
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex sm:justify-end gap-x-4 px-4 sm:px-6 py-2 sm:py-4">
|
||||
<div className="w-full sm:w-auto sm:mr-[42px]">
|
||||
<p className="ml-0 font-bold text-sm text-muted-foreground">
|
||||
<div className="flex gap-x-4 px-4 py-2 sm:justify-end sm:px-6 sm:py-4">
|
||||
<div className="w-full sm:mr-[42px] sm:w-auto">
|
||||
<p className="text-muted-foreground ml-0 text-sm font-bold">
|
||||
<Trans i18nKey="cart:order.promotionsTotal" />
|
||||
</p>
|
||||
</div>
|
||||
<div className={`sm:mr-[112px] sm:w-[50px]`}>
|
||||
<p className="text-sm text-right">
|
||||
<p className="text-right text-sm">
|
||||
{formatCurrency({
|
||||
value: cart.discount_total,
|
||||
currencyCode: cart.currency_code,
|
||||
@@ -110,14 +131,14 @@ export default function Cart({
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex sm:justify-end gap-x-4 px-4 sm:px-6">
|
||||
<div className="w-full sm:w-auto sm:mr-[42px]">
|
||||
<p className="ml-0 font-bold text-sm">
|
||||
<div className="flex gap-x-4 px-4 sm:justify-end sm:px-6">
|
||||
<div className="w-full sm:mr-[42px] sm:w-auto">
|
||||
<p className="ml-0 text-sm font-bold">
|
||||
<Trans i18nKey="cart:order.total" />
|
||||
</p>
|
||||
</div>
|
||||
<div className={`sm:mr-[112px] sm:w-[50px]`}>
|
||||
<p className="text-sm text-right">
|
||||
<p className="text-right text-sm">
|
||||
{formatCurrency({
|
||||
value: cart.total,
|
||||
currencyCode: cart.currency_code,
|
||||
@@ -129,11 +150,9 @@ export default function Cart({
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex sm:flex-row flex-col gap-y-6 py-4 sm:py-8 gap-x-4">
|
||||
<div className="flex flex-col gap-x-4 gap-y-6 py-4 sm:flex-row sm:py-8">
|
||||
{IS_DISCOUNT_SHOWN && (
|
||||
<Card
|
||||
className="flex flex-col justify-between w-full sm:w-1/2"
|
||||
>
|
||||
<Card className="flex w-full flex-col justify-between sm:w-1/2">
|
||||
<CardHeader className="pb-4">
|
||||
<h5>
|
||||
<Trans i18nKey="cart:discountCode.title" />
|
||||
@@ -146,24 +165,31 @@ export default function Cart({
|
||||
)}
|
||||
|
||||
{isLocationsShown && (
|
||||
<Card
|
||||
className="flex flex-col justify-between w-full sm:w-1/2"
|
||||
>
|
||||
<Card className="flex w-full flex-col justify-between sm:w-1/2">
|
||||
<CardHeader className="pb-4">
|
||||
<h5>
|
||||
<Trans i18nKey="cart:locations.title" />
|
||||
</h5>
|
||||
</CardHeader>
|
||||
<CardContent className="h-full">
|
||||
<AnalysisLocation cart={{ ...cart }} synlabAnalyses={synlabAnalyses} />
|
||||
<AnalysisLocation
|
||||
cart={{ ...cart }}
|
||||
synlabAnalyses={synlabAnalyses}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button className="h-10" onClick={initiatePayment} disabled={isInitiatingSession}>
|
||||
{isInitiatingSession && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
<Button
|
||||
className="h-10"
|
||||
onClick={initiatePayment}
|
||||
disabled={isInitiatingSession}
|
||||
>
|
||||
{isInitiatingSession && (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
)}
|
||||
<Trans i18nKey="cart:checkout.goToCheckout" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user