95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
import Image from 'next/image';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
import { StoreProduct } from '@medusajs/types';
|
|
import { Button } from '@medusajs/ui';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { handleAddToCart } from '../../../../lib/services/medusaCart.service';
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
} from '@kit/ui/card';
|
|
import { Trans } from '@kit/ui/trans';
|
|
import { ButtonTooltip } from './ui/button-tooltip';
|
|
import { PackageHeader } from './package-header';
|
|
|
|
export type AnalysisPackageWithVariant = Pick<StoreProduct, 'title' | 'description' | 'subtitle' | 'metadata'> & {
|
|
variantId: string;
|
|
nrOfAnalyses: number;
|
|
price: number;
|
|
isStandard: boolean;
|
|
isStandardPlus: boolean;
|
|
isPremium: boolean;
|
|
};
|
|
|
|
export default function SelectAnalysisPackage({
|
|
analysisPackage,
|
|
countryCode,
|
|
}: {
|
|
analysisPackage: AnalysisPackageWithVariant;
|
|
countryCode: string,
|
|
}) {
|
|
const router = useRouter();
|
|
const {
|
|
t,
|
|
i18n: { language },
|
|
} = useTranslation();
|
|
|
|
const [isAddingToCart, setIsAddingToCart] = useState(false);
|
|
|
|
const { nrOfAnalyses, variantId, title, subtitle = '', description = '', price } = analysisPackage;
|
|
|
|
const handleSelect = async () => {
|
|
setIsAddingToCart(true);
|
|
await handleAddToCart({
|
|
selectedVariant: { id: variantId },
|
|
countryCode,
|
|
});
|
|
setIsAddingToCart(false);
|
|
router.push('/home/cart');
|
|
};
|
|
|
|
return (
|
|
<Card key={title}>
|
|
<CardHeader className="relative">
|
|
{description && (
|
|
<ButtonTooltip
|
|
content={description}
|
|
className="absolute top-5 right-5 z-10"
|
|
/>
|
|
)}
|
|
<Image
|
|
src="/assets/card-image.png"
|
|
alt="background"
|
|
width={326}
|
|
height={195}
|
|
className="max-h-48 w-full opacity-10"
|
|
/>
|
|
</CardHeader>
|
|
<CardContent className="space-y-1 text-center">
|
|
<PackageHeader
|
|
title={title}
|
|
tagColor='bg-cyan'
|
|
analysesNr={t('product:nrOfAnalyses', { nr: nrOfAnalyses })}
|
|
language={language}
|
|
price={price}
|
|
/>
|
|
<CardDescription>{subtitle}</CardDescription>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className="w-full text-[10px] sm:text-sm" onClick={handleSelect} isLoading={isAddingToCart}>
|
|
{!isAddingToCart && <Trans i18nKey='order-analysis-package:selectThisPackage' />}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|