96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { HeartPulse, Loader2, ShoppingCart } from 'lucide-react';
|
|
|
|
import { Button } from '@kit/ui/button';
|
|
import {
|
|
Card,
|
|
CardHeader,
|
|
CardFooter,
|
|
CardDescription,
|
|
} from '@kit/ui/card';
|
|
import { StoreProduct, StoreProductVariant } from '@medusajs/types';
|
|
import { useState } from 'react';
|
|
import { handleAddToCart } from '~/lib/services/medusaCart.service';
|
|
import { useRouter } from 'next/navigation';
|
|
import { InfoTooltip } from '~/components/ui/info-tooltip';
|
|
|
|
export default function OrderAnalysesCards({
|
|
analyses,
|
|
countryCode,
|
|
}: {
|
|
analyses: StoreProduct[];
|
|
countryCode: string;
|
|
}) {
|
|
const router = useRouter();
|
|
|
|
const [isAddingToCart, setIsAddingToCart] = useState(false);
|
|
const handleSelect = async (selectedVariant: StoreProductVariant) => {
|
|
if (!selectedVariant?.id || isAddingToCart) return null
|
|
|
|
setIsAddingToCart(true);
|
|
try {
|
|
await handleAddToCart({
|
|
selectedVariant,
|
|
countryCode,
|
|
});
|
|
setIsAddingToCart(false);
|
|
router.push('/home/cart');
|
|
} catch (e) {
|
|
setIsAddingToCart(false);
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-3 gap-6 mt-4">
|
|
{analyses.map(({
|
|
title,
|
|
variants,
|
|
description,
|
|
subtitle,
|
|
}) => (
|
|
<Card
|
|
key={title}
|
|
variant="gradient-success"
|
|
className="flex flex-col justify-between"
|
|
>
|
|
<CardHeader className="flex-row">
|
|
<div
|
|
className={'flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-primary\/10 mb-6'}
|
|
>
|
|
<HeartPulse className="size-4 fill-green-500" />
|
|
</div>
|
|
<div className='ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-warning'>
|
|
<Button
|
|
size="icon"
|
|
variant="outline"
|
|
className="px-2 text-black"
|
|
onClick={() => handleSelect(variants![0]!)}
|
|
>
|
|
{isAddingToCart ? <Loader2 className="size-4 stroke-2 animate-spin" /> : <ShoppingCart className="size-4 stroke-2" />}
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardFooter className="flex flex-col items-start gap-2">
|
|
<h5>
|
|
{title}
|
|
{description && (
|
|
<>
|
|
{' '}
|
|
<InfoTooltip content={`${description}`} />
|
|
</>
|
|
)}
|
|
</h5>
|
|
{subtitle && (
|
|
<CardDescription>
|
|
{subtitle}
|
|
</CardDescription>
|
|
)}
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|