feat(MED-100): update cart checkout flow and views

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

@@ -22,6 +22,7 @@ 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';
+import { StoreProduct } from '@medusajs/types';
 
 const dummyCards = [
   {
@@ -105,8 +106,10 @@ const CheckWithBackground = () => {
 };
 
 const ComparePackagesModal = async ({
+  analysisPackages,
   triggerElement,
 }: {
+  analysisPackages: StoreProduct[];
   triggerElement: JSX.Element;
 }) => {
   const { t, language } = await createI18nServerInstance();
@@ -140,21 +143,25 @@ const ComparePackagesModal = async ({
                 <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>
-                      ),
-                    )}
+                    {analysisPackages.map(
+                      (product) => {
+                        const variant = product.variants?.[0];
+                        const titleKey = product.title;
+                        const price = variant?.calculated_price?.calculated_amount ?? 0;
+                        return (
+                          <TableHead key={titleKey} className="py-2">
+                            <PackageHeader
+                              title={t(titleKey)}
+                              tagColor='bg-cyan'
+                              analysesNr={t('product:nrOfAnalyses', {
+                                nr: product?.metadata?.nrOfAnalyses ?? 0,
+                              })}
+                              language={language}
+                              price={price}
+                            />
+                          </TableHead>
+                        )
+                      })}
                   </TableRow>
                 </TableHeader>
                 <TableBody>