131 lines
3.1 KiB
TypeScript
131 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
import Image from 'next/image';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
import type { AdminProductVariant, StoreProduct } from '@medusajs/types';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { Button } from '@kit/ui/button';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
} from '@kit/ui/card';
|
|
import { toast } from '@kit/ui/sonner';
|
|
import { Spinner } from '@kit/ui/spinner';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import { handleAddToCart } from '~/lib/services/medusaCart.service';
|
|
|
|
import { pathsConfig } from '../config';
|
|
import { PackageHeader } from './package-header';
|
|
import { ButtonTooltip } from './ui/button-tooltip';
|
|
|
|
export type AnalysisPackageWithVariant = Pick<
|
|
StoreProduct,
|
|
'title' | 'description' | 'subtitle' | 'metadata'
|
|
> & {
|
|
variantId: string;
|
|
nrOfAnalyses: number;
|
|
price: number;
|
|
isStandard: boolean;
|
|
isStandardPlus: boolean;
|
|
isPremium: boolean;
|
|
variant: Pick<AdminProductVariant, 'metadata'>;
|
|
};
|
|
|
|
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);
|
|
try {
|
|
await handleAddToCart({
|
|
selectedVariant: { id: variantId },
|
|
countryCode,
|
|
});
|
|
setIsAddingToCart(false);
|
|
toast.success(
|
|
<Trans i18nKey={'order-analysis-package:analysisPackageAddedToCart'} />,
|
|
);
|
|
router.push(pathsConfig.app.cart);
|
|
} catch (e) {
|
|
toast.error(
|
|
<Trans
|
|
i18nKey={'order-analysis-package:analysisPackageAddToCartError'}
|
|
/>,
|
|
);
|
|
setIsAddingToCart(false);
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
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}
|
|
>
|
|
{isAddingToCart ? (
|
|
<Spinner />
|
|
) : (
|
|
<Trans i18nKey="order-analysis-package:selectThisPackage" />
|
|
)}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|