try to display price before adding to cart

app/home/(user)/_components/order-analyses-cards.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { HeartPulse, Loader2, ShoppingCart } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 import { Button } from '@kit/ui/button';
 import {
@@ -15,12 +16,14 @@ import { handleAddToCart } from '~/lib/services/medusaCart.service';
 import { InfoTooltip } from '@kit/shared/components/ui/info-tooltip';
 import { Trans } from '@kit/ui/trans';
 import { toast } from '@kit/ui/sonner';
+import { formatCurrency } from '@/packages/shared/src/utils';
 
 export type OrderAnalysisCard = Pick<
   StoreProduct, 'title' | 'description' | 'subtitle'
 > & {
   isAvailable: boolean;
   variant: { id: string };
+  price: number | null;
 };
 
 export default function OrderAnalysesCards({
@@ -30,6 +33,9 @@ export default function OrderAnalysesCards({
   analyses: OrderAnalysisCard[];
   countryCode: string;
 }) {
+
+  const { i18n: { language } } = useTranslation()
+
   const [variantAddingToCart, setVariantAddingToCart] = useState<string | null>(null);
   const handleSelect = async (variantId: string) => {
     if (variantAddingToCart) {
@@ -59,7 +65,15 @@ export default function OrderAnalysesCards({
         description,
         subtitle,
         isAvailable,
+        price,
       }) => {
+        const formattedPrice = typeof price === 'number'
+          ? formatCurrency({
+            currencyCode: 'eur',
+            locale: language,
+            value: price,
+          })
+          : null;
         return (
           <Card
             key={title}
@@ -91,7 +105,14 @@ export default function OrderAnalysesCards({
                 {description && (
                   <>
                     {'  '}
-                    <InfoTooltip content={`${description}`} />
+                    <InfoTooltip
+                      content={
+                        <div className='flex flex-col gap-2'>
+                          <span>{formattedPrice}</span>
+                          <span>{description}</span>
+                        </div>
+                      }
+                    />
                   </>
                 )}
               </h5>

app/home/(user)/_lib/server/load-analyses.ts

@@ -1,11 +1,10 @@
 import { cache } from 'react';
 
 import { getProductCategories } from '@lib/data/categories';
-import { listProductTypes } from '@lib/data/products';
+import { listProducts, listProductTypes } from '@lib/data/products';
 import { listRegions } from '@lib/data/regions';
 
 import { OrderAnalysisCard } from '../../_components/order-analyses-cards';
-import { ServiceCategory } from '../../_components/service-categories';
 
 async function countryCodesLoader() {
   const countryCodes = await listRegions().then((regions) =>
@@ -39,13 +38,20 @@ async function analysesLoader() {
   const category = productCategories.find(
     ({ metadata }) => metadata?.page === 'order-analysis',
   );
+  const categoryProducts = category
+    ? await listProducts({
+      countryCode,
+      queryParams: { limit: 100, category_id: category.id },
+    })
+    : null;
+
   const serviceCategories = productCategories.filter(
     ({ parent_category }) => parent_category?.handle === 'tto-categories',
   );
 
   return {
     analyses:
-      category?.products?.map<OrderAnalysisCard>(
+      categoryProducts?.response.products.map<OrderAnalysisCard>(
         ({ title, description, subtitle, variants, status, metadata }) => {
           const variant = variants![0]!;
           return {
@@ -57,6 +63,7 @@ async function analysesLoader() {
             },
             isAvailable:
               status === 'published' && !!metadata?.analysisIdOriginal,
+            price: variant.calculated_price?.calculated_amount ?? null,
           };
         },
       ) ?? [],