B2B-99: add package comparison modal (#27)
* B2B-99: add pacakge comparison modal * B2B-99: add package comparison modal --------- Co-authored-by: Helena <helena@Helenas-MacBook-Pro.local>
This commit is contained in:
Helena
204
app/home/(user)/_components/compare-packages-modal.tsx
Normal file
204
app/home/(user)/_components/compare-packages-modal.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
import { JSX } from 'react';
|
||||
|
||||
import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';
|
||||
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
|
||||
import { Check, X } from 'lucide-react';
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@kit/ui/dialog';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@kit/ui/table';
|
||||
|
||||
import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
|
||||
import { withI18n } from '~/lib/i18n/with-i18n';
|
||||
|
||||
import { PackageHeader } from '../../../../components/package-header';
|
||||
import { InfoTooltip } from '../../../../components/ui/info-tooltip';
|
||||
|
||||
const dummyCards = [
|
||||
{
|
||||
titleKey: 'product:standard.label',
|
||||
price: 40,
|
||||
nrOfAnalyses: 4,
|
||||
tagColor: 'bg-cyan',
|
||||
},
|
||||
{
|
||||
titleKey: 'product:standardPlus.label',
|
||||
price: 85,
|
||||
nrOfAnalyses: 10,
|
||||
tagColor: 'bg-warning',
|
||||
},
|
||||
{
|
||||
titleKey: 'product:premium.label',
|
||||
price: 140,
|
||||
nrOfAnalyses: '12+',
|
||||
tagColor: 'bg-purple',
|
||||
},
|
||||
];
|
||||
|
||||
const dummyRows = [
|
||||
{
|
||||
analysisNameKey: 'product:clinicalBloodDraw.label',
|
||||
tooltipContentKey: 'product:clinicalBloodDraw.description',
|
||||
includedInStandard: 1,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
{
|
||||
analysisNameKey: 'product:crp.label',
|
||||
tooltipContentKey: 'product:crp.description',
|
||||
includedInStandard: 1,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
{
|
||||
analysisNameKey: 'product:ferritin.label',
|
||||
tooltipContentKey: 'product:ferritin.description',
|
||||
includedInStandard: 0,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
{
|
||||
analysisNameKey: 'product:vitaminD.label',
|
||||
tooltipContentKey: 'product:vitaminD.description',
|
||||
includedInStandard: 0,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
{
|
||||
analysisNameKey: 'product:glucose.label',
|
||||
tooltipContentKey: 'product:glucose.description',
|
||||
includedInStandard: 1,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
{
|
||||
analysisNameKey: 'product:alat.label',
|
||||
tooltipContentKey: 'product:alat.description',
|
||||
includedInStandard: 1,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
{
|
||||
analysisNameKey: 'product:ast.label',
|
||||
tooltipContentKey: 'product:ast.description',
|
||||
includedInStandard: 1,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
];
|
||||
|
||||
const CheckWithBackground = () => {
|
||||
return (
|
||||
<div className="bg-primary w-min rounded-full p-1 text-white">
|
||||
<Check className="size-3 stroke-2" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ComparePackagesModal = async ({
|
||||
triggerElement,
|
||||
}: {
|
||||
triggerElement: JSX.Element;
|
||||
}) => {
|
||||
const { t, language } = await createI18nServerInstance();
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>{triggerElement}</DialogTrigger>
|
||||
<DialogContent
|
||||
className="min-h-screen max-w-fit min-w-screen"
|
||||
customClose={
|
||||
<div className="inline-flex place-items-center-safe gap-1 align-middle">
|
||||
<p className="text-sm font-medium text-black">
|
||||
{t('common:close')}
|
||||
</p>
|
||||
<X className="text-black" />
|
||||
</div>
|
||||
}
|
||||
preventAutoFocus
|
||||
>
|
||||
<VisuallyHidden>
|
||||
<DialogTitle>{t('common:comparePackages')}</DialogTitle>
|
||||
</VisuallyHidden>
|
||||
<div className="m-auto">
|
||||
<div className="space-y-6 text-center">
|
||||
<h3>{t('product:healthPackageComparison.label')}</h3>
|
||||
<p className="text-muted-foreground mx-auto w-3/5 text-sm">
|
||||
{t('product:healthPackageComparison.description')}
|
||||
</p>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead></TableHead>
|
||||
{dummyCards.map(
|
||||
({ titleKey, price, nrOfAnalyses, tagColor }) => (
|
||||
<TableHead key={titleKey} className="py-2">
|
||||
<PackageHeader
|
||||
title={t(titleKey)}
|
||||
tagColor={tagColor}
|
||||
analysesNr={t('product:nrOfAnalyses', {
|
||||
nr: nrOfAnalyses,
|
||||
})}
|
||||
language={language}
|
||||
price={price}
|
||||
/>
|
||||
</TableHead>
|
||||
),
|
||||
)}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{dummyRows.map(
|
||||
(
|
||||
{
|
||||
analysisNameKey,
|
||||
tooltipContentKey,
|
||||
includedInStandard,
|
||||
includedInStandardPlus,
|
||||
includedInPremium,
|
||||
},
|
||||
index,
|
||||
) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell className="py-6">
|
||||
{t(analysisNameKey)}{' '}
|
||||
<InfoTooltip
|
||||
content={t(tooltipContentKey)}
|
||||
icon={<QuestionMarkCircledIcon />}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="center" className="py-6">
|
||||
{!!includedInStandard && <CheckWithBackground />}
|
||||
</TableCell>
|
||||
<TableCell align="center" className="py-6">
|
||||
{!!includedInStandardPlus && <CheckWithBackground />}
|
||||
</TableCell>
|
||||
<TableCell align="center" className="py-6">
|
||||
{!!includedInPremium && <CheckWithBackground />}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
),
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default withI18n(ComparePackagesModal);
|
||||
Reference in New Issue
Block a user