MED-197: improve analysis compare page

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>