feat(MED-121): use age+sex specific analysis package variants

packages/shared/src/components/select-analysis-package.tsx

@@ -5,9 +5,10 @@ import { useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
-import { StoreProduct, StoreProductVariant } from '@medusajs/types';
+import { StoreProduct } from '@medusajs/types';
 import { Button } from '@medusajs/ui';
 import { useTranslation } from 'react-i18next';
+import { handleAddToCart } from '../../../../lib/services/medusaCart.service';
 
 import {
   Card,
@@ -17,25 +18,24 @@ import {
   CardHeader,
 } from '@kit/ui/card';
 import { Trans } from '@kit/ui/trans';
-
-import { handleAddToCart } from '../../../../lib/services/medusaCart.service';
-import { getAnalysisElementMedusaProductIds } from '../../../../utils/medusa-product';
-import { PackageHeader } from './package-header';
 import { ButtonTooltip } from './ui/button-tooltip';
+import { PackageHeader } from './package-header';
 
-export interface IAnalysisPackage {
-  titleKey: string;
+export type AnalysisPackageWithVariant = Pick<StoreProduct, 'title' | 'description' | 'subtitle' | 'metadata'> & {
+  variantId: string;
+  nrOfAnalyses: number;
   price: number;
-  tagColor: string;
-  descriptionKey: string;
-}
+  isStandard: boolean;
+  isStandardPlus: boolean;
+  isPremium: boolean;
+};
 
 export default function SelectAnalysisPackage({
   analysisPackage,
   countryCode,
 }: {
-  analysisPackage: StoreProduct;
-  countryCode: string;
+  analysisPackage: AnalysisPackageWithVariant;
+  countryCode: string,
 }) {
   const router = useRouter();
   const {
@@ -44,35 +44,21 @@ export default function SelectAnalysisPackage({
   } = useTranslation();
 
   const [isAddingToCart, setIsAddingToCart] = useState(false);
-  const handleSelect = async (selectedVariant: StoreProductVariant) => {
-    if (!selectedVariant?.id) return null;
+  
+  const { nrOfAnalyses, variantId, title, subtitle = '', description = '', price } = analysisPackage;
 
+  const handleSelect = async () => {
     setIsAddingToCart(true);
     await handleAddToCart({
-      selectedVariant,
+      selectedVariant: { id: variantId },
       countryCode,
     });
     setIsAddingToCart(false);
     router.push('/home/cart');
   };
 
-  const titleKey = analysisPackage.title;
-  const analysisElementMedusaProductIds = getAnalysisElementMedusaProductIds([
-    analysisPackage,
-  ]);
-  const nrOfAnalyses = analysisElementMedusaProductIds.length;
-  const description = analysisPackage.description ?? '';
-  const subtitle = analysisPackage.subtitle ?? '';
-  const variant = analysisPackage.variants?.[0];
-
-  if (!variant) {
-    return null;
-  }
-
-  const price = variant.calculated_price?.calculated_amount ?? 0;
-
   return (
-    <Card key={titleKey}>
+    <Card key={title}>
       <CardHeader className="relative">
         {description && (
           <ButtonTooltip
@@ -90,8 +76,8 @@ export default function SelectAnalysisPackage({
       </CardHeader>
       <CardContent className="space-y-1 text-center">
         <PackageHeader
-          title={t(titleKey)}
-          tagColor="bg-cyan"
+          title={title}
+          tagColor='bg-cyan'
           analysesNr={t('product:nrOfAnalyses', { nr: nrOfAnalyses })}
           language={language}
           price={price}
@@ -99,14 +85,8 @@ export default function SelectAnalysisPackage({
         <CardDescription>{subtitle}</CardDescription>
       </CardContent>
       <CardFooter>
-        <Button
-          className="w-full text-[10px] sm:text-sm"
-          onClick={() => handleSelect(variant)}
-          isLoading={isAddingToCart}
-        >
-          {!isAddingToCart && (
-            <Trans i18nKey="order-analysis-package:selectThisPackage" />
-          )}
+        <Button className="w-full text-[10px] sm:text-sm" onClick={handleSelect} isLoading={isAddingToCart}>
+          {!isAddingToCart && <Trans i18nKey='order-analysis-package:selectThisPackage' />}
         </Button>
       </CardFooter>
     </Card>

packages/shared/src/components/select-analysis-packages.tsx

@@ -1,14 +1,19 @@
 import { Trans } from '@kit/ui/trans';
-import { StoreProduct } from '@medusajs/types';
 
-import SelectAnalysisPackage from './select-analysis-package';
+import SelectAnalysisPackage, { AnalysisPackageWithVariant } from './select-analysis-package';
 
-export default function SelectAnalysisPackages({ analysisPackages, countryCode }: { analysisPackages: StoreProduct[], countryCode: string }) {
+export default function SelectAnalysisPackages({
+  analysisPackages,
+  countryCode,
+}: {
+  analysisPackages: AnalysisPackageWithVariant[];
+  countryCode: string;
+}) {
   return (
     <div className="grid grid-cols-3 gap-6">
       {analysisPackages.length > 0 ? analysisPackages.map(
-        (product) => (
-          <SelectAnalysisPackage key={product.title} analysisPackage={product} countryCode={countryCode} />
+        (analysisPackage) => (
+          <SelectAnalysisPackage key={analysisPackage.title} analysisPackage={analysisPackage} countryCode={countryCode} />
         )) : (
         <h4>
           <Trans i18nKey="order-analysis-package:noPackagesAvailable" />