MED-197: improve analysis compare page

app/home/(user)/(dashboard)/order-analysis-package/page.tsx

@@ -28,17 +28,18 @@ async function OrderAnalysisPackagePage() {
     <PageBody>
       <div className="space-y-3 text-center">
         <h3>
-          <Trans i18nKey={'marketing:selectPackage'} />
+          <Trans i18nKey="order-analysis-package:selectPackage" />
         </h3>
         <ComparePackagesModal
           analysisPackages={analysisPackages}
           analysisPackageElements={analysisPackageElements}
           triggerElement={
             <Button variant="secondary" className="gap-2">
-              <Trans i18nKey={'marketing:comparePackages'} />
+              <Trans i18nKey="order-analysis-package:comparePackages" />
               <Scale className="size-4 stroke-[1.5px]" />
             </Button>
           }
+          countryCode={countryCode}
         />
       </div>
       <SelectAnalysisPackages

app/home/(user)/_components/compare-packages-add-to-cart-buttons.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { AnalysisPackageWithVariant } from '@/packages/shared/src/components/select-analysis-package';
+import { pathsConfig } from '@/packages/shared/src/config';
+
+import { Spinner } from '@kit/ui/makerkit/spinner';
+import { Trans } from '@kit/ui/makerkit/trans';
+import { Button } from '@kit/ui/shadcn/button';
+import { toast } from '@kit/ui/shadcn/sonner';
+import { Table, TableBody, TableCell, TableRow } from '@kit/ui/shadcn/table';
+
+import { handleAddToCart } from '~/lib/services/medusaCart.service';
+import { cn } from '~/lib/utils';
+
+const AddToCartButton = ({
+  onClick,
+  disabled,
+  isLoading,
+}: {
+  onClick: () => void;
+  disabled: boolean;
+  isLoading: boolean;
+}) => {
+  return (
+    <TableCell align="center" className="xs:px-2 px-1 py-6">
+      <Button
+        onClick={onClick}
+        disabled={disabled}
+        className="xs:p-6 xs:text-sm relative p-2 text-[10px]"
+      >
+        {isLoading && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <Spinner />
+          </div>
+        )}
+        <div
+          className={cn({
+            invisible: isLoading,
+          })}
+        >
+          <Trans i18nKey="compare-packages-modal:selectThisPackage" />
+        </div>
+      </Button>
+    </TableCell>
+  );
+};
+
+const ComparePackagesAddToCartButtons = ({
+  countryCode,
+  standardPackage,
+  standardPlusPackage,
+  premiumPackage,
+}: {
+  countryCode: string;
+  standardPackage: AnalysisPackageWithVariant;
+  standardPlusPackage: AnalysisPackageWithVariant;
+  premiumPackage: AnalysisPackageWithVariant;
+}) => {
+  const [addedPackage, setAddedPackage] = useState<string | null>(null);
+  const router = useRouter();
+
+  const handleSelect = async ({ variantId }: AnalysisPackageWithVariant) => {
+    setAddedPackage(variantId);
+    try {
+      await handleAddToCart({
+        selectedVariant: { id: variantId },
+        countryCode,
+      });
+      setAddedPackage(null);
+      toast.success(
+        <Trans i18nKey={'order-analysis-package:analysisPackageAddedToCart'} />,
+      );
+      router.push(pathsConfig.app.cart);
+    } catch (e) {
+      toast.error(
+        <Trans
+          i18nKey={'order-analysis-package:analysisPackageAddToCartError'}
+        />,
+      );
+      setAddedPackage(null);
+      console.error(e);
+    }
+  };
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell className="w-[30vw] py-6" />
+          <AddToCartButton
+            onClick={() => handleSelect(standardPackage)}
+            disabled={!!addedPackage}
+            isLoading={addedPackage === standardPackage.variantId}
+          />
+          <AddToCartButton
+            onClick={() => handleSelect(standardPlusPackage)}
+            disabled={!!addedPackage}
+            isLoading={addedPackage === standardPlusPackage.variantId}
+          />
+          <AddToCartButton
+            onClick={() => handleSelect(premiumPackage)}
+            disabled={!!addedPackage}
+            isLoading={addedPackage === premiumPackage.variantId}
+          />
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+export default ComparePackagesAddToCartButtons;

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

@@ -26,6 +26,9 @@ import {
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
+import ComparePackagesAddToCartButtons from './compare-packages-add-to-cart-buttons';
+import DefaultPackageFeaturesRows from './default-package-features-rows';
+
 export type AnalysisPackageElement = Pick<
   StoreProduct,
   'title' | 'id' | 'description'
@@ -35,7 +38,7 @@ export type AnalysisPackageElement = Pick<
   isIncludedInPremium: boolean;
 };
 
-const CheckWithBackground = () => {
+export const CheckWithBackground = () => {
   return (
     <div className="bg-primary w-min rounded-full p-1 text-white">
       <Check className="size-3 stroke-2" />
@@ -53,7 +56,7 @@ const PackageTableHead = async ({
   const { title, price, nrOfAnalyses } = product;
 
   return (
-    <TableHead className="py-2">
+    <TableHead className="xs:content-normal content-start py-2">
       <PackageHeader
         title={t(title)}
         tagColor="bg-cyan"
@@ -69,10 +72,12 @@ const ComparePackagesModal = async ({
   analysisPackages,
   analysisPackageElements,
   triggerElement,
+  countryCode,
 }: {
   analysisPackages: AnalysisPackageWithVariant[];
   analysisPackageElements: AnalysisPackageElement[];
   triggerElement: JSX.Element;
+  countryCode: string;
 }) => {
   const { t } = await createI18nServerInstance();
 
@@ -110,7 +115,7 @@ const ComparePackagesModal = async ({
             <p className="text-muted-foreground mx-auto w-3/5 text-sm">
               {t('product:healthPackageComparison.description')}
             </p>
-            <div className="max-h-[80vh] overflow-y-auto rounded-md border">
+            <div className="max-h-[50vh] overflow-y-auto rounded-md border sm:max-h-[70vh]">
               <Table>
                 <TableHeader>
                   <TableRow>
@@ -121,6 +126,8 @@ const ComparePackagesModal = async ({
                   </TableRow>
                 </TableHeader>
                 <TableBody>
+                  <DefaultPackageFeaturesRows />
+
                   {analysisPackageElements.map(
                     ({
                       title,
@@ -136,7 +143,7 @@ const ComparePackagesModal = async ({
 
                       return (
                         <TableRow key={id}>
-                          <TableCell className="py-6 sm:max-w-[30vw]">
+                          <TableCell className="py-6 sm:w-[30vw]">
                             {title}{' '}
                             {description && (
                               <InfoTooltip
@@ -164,6 +171,12 @@ const ComparePackagesModal = async ({
               </Table>
             </div>
           </div>
+          <ComparePackagesAddToCartButtons
+            countryCode={countryCode}
+            standardPackage={standardPackage}
+            premiumPackage={premiumPackage}
+            standardPlusPackage={standardPlusPackage}
+          />
         </div>
       </DialogContent>
     </Dialog>

app/home/(user)/_components/default-package-features-rows.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Trans } from '@kit/ui/makerkit/trans';
+import { TableCell, TableRow } from '@kit/ui/shadcn/table';
+
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+import { CheckWithBackground } from './compare-packages-modal';
+
+const DefaultPackageFeaturesRows = () => {
+  return (
+    <>
+      <TableRow key="digital-doctor-feedback">
+        <TableCell className="max-w-[30vw] py-6">
+          <Trans i18nKey="order-analysis-package:digitalDoctorFeedback" />
+        </TableCell>
+        <TableCell align="center" className="py-6">
+          <CheckWithBackground />
+        </TableCell>
+        <TableCell align="center" className="py-6">
+          <CheckWithBackground />
+        </TableCell>
+        <TableCell align="center" className="py-6">
+          <CheckWithBackground />
+        </TableCell>
+      </TableRow>
+
+      <TableRow key="give-analyses">
+        <TableCell className="py-6 sm:max-w-[30vw]">
+          <Trans i18nKey="order-analysis-package:giveAnalyses" />
+        </TableCell>
+        <TableCell align="center" className="py-6">
+          <CheckWithBackground />
+        </TableCell>
+        <TableCell align="center" className="py-6">
+          <CheckWithBackground />
+        </TableCell>
+        <TableCell align="center" className="py-6">
+          <CheckWithBackground />
+        </TableCell>
+      </TableRow>
+    </>
+  );
+};
+
+export default withI18n(DefaultPackageFeaturesRows);