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>

app/home/(user)/_components/compare-packages-modal.tsx

@@ -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);

app/select-package/page.tsx

@@ -20,6 +20,7 @@ import { MedReportLogo } from '../../components/med-report-logo';
 import { PackageHeader } from '../../components/package-header';
 import { ButtonTooltip } from '../../components/ui/button-tooltip';
 import pathsConfig from '../../config/paths.config';
+import ComparePackagesModal from '../home/(user)/_components/compare-packages-modal';
 
 export const generateMetadata = async () => {
   const { t } = await createI18nServerInstance();
@@ -63,10 +64,14 @@ async function SelectPackagePage() {
       <MedReportLogo />
       <div className="space-y-3 text-center">
         <h3>{t('marketing:selectPackage')}</h3>
-        <Button variant="secondary" className="gap-2">
-          {t('marketing:comparePackages')}
-          <Scale className="size-4 stroke-[1.5px]" />
-        </Button>
+        <ComparePackagesModal
+          triggerElement={
+            <Button variant="secondary" className="gap-2">
+              {t('marketing:comparePackages')}
+              <Scale className="size-4 stroke-[1.5px]" />
+            </Button>
+          }
+        />
       </div>
       <div className="grid grid-cols-3 gap-6">
         {dummyCards.map(