Merge branch 'develop' into feature/MED-129

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

@@ -1,25 +1,23 @@
-"use client";
+'use client';
 
+import { useState } from 'react';
+
+import { formatCurrency } from '@/packages/shared/src/utils';
+import { StoreProduct } from '@medusajs/types';
 import { HeartPulse, Loader2, ShoppingCart } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-import { Button } from '@kit/ui/button';
-import {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardDescription,
-} from '@kit/ui/card';
-import { StoreProduct } from '@medusajs/types';
-import { useState } from 'react';
-import { handleAddToCart } from '~/lib/services/medusaCart.service';
 import { InfoTooltip } from '@kit/shared/components/ui/info-tooltip';
-import { Trans } from '@kit/ui/trans';
+import { Button } from '@kit/ui/button';
+import { Card, CardDescription, CardFooter, CardHeader } from '@kit/ui/card';
 import { toast } from '@kit/ui/sonner';
-import { formatCurrency } from '@/packages/shared/src/utils';
+import { Trans } from '@kit/ui/trans';
+
+import { handleAddToCart } from '~/lib/services/medusaCart.service';
 
 export type OrderAnalysisCard = Pick<
-  StoreProduct, 'title' | 'description' | 'subtitle'
+  StoreProduct,
+  'title' | 'description' | 'subtitle'
 > & {
   variant: { id: string };
   price: number | null;
@@ -32,10 +30,13 @@ export default function OrderAnalysesCards({
   analyses: OrderAnalysisCard[];
   countryCode: string;
 }) {
+  const {
+    i18n: { language },
+  } = useTranslation();
 
-  const { i18n: { language } } = useTranslation()
-
-  const [variantAddingToCart, setVariantAddingToCart] = useState<string | null>(null);
+  const [variantAddingToCart, setVariantAddingToCart] = useState<string | null>(
+    null,
+  );
   const handleSelect = async (variantId: string) => {
     if (variantAddingToCart) {
       return null;
@@ -54,24 +55,19 @@ export default function OrderAnalysesCards({
       setVariantAddingToCart(null);
       console.error(e);
     }
-  }
+  };
 
   return (
-    <div className="grid xs:grid-cols-3 gap-6 mt-4">
-      {analyses.map(({
-        title,
-        variant,
-        description,
-        subtitle,
-        price,
-      }) => {
-        const formattedPrice = typeof price === 'number'
-          ? formatCurrency({
-            currencyCode: 'eur',
-            locale: language,
-            value: price,
-          })
-          : null;
+    <div className="xs:grid-cols-3 mt-4 grid gap-6">
+      {analyses.map(({ title, variant, description, subtitle, price }) => {
+        const formattedPrice =
+          typeof price === 'number'
+            ? formatCurrency({
+                currencyCode: 'eur',
+                locale: language,
+                value: price,
+              })
+            : null;
         return (
           <Card
             key={title}
@@ -80,30 +76,36 @@ export default function OrderAnalysesCards({
           >
             <CardHeader className="flex-row">
               <div
-                className={'flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-primary\/10 mb-6'}
+                className={
+                  'bg-primary/10 mb-6 flex size-8 items-center-safe justify-center-safe rounded-full text-white'
+                }
               >
                 <HeartPulse className="size-4 fill-green-500" />
               </div>
-              <div className='ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-warning'>
+              <div className="bg-warning ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white">
                 <Button
                   size="icon"
                   variant="outline"
                   className="px-2 text-black"
                   onClick={() => handleSelect(variant.id)}
                 >
-                  {variantAddingToCart === variant.id ? <Loader2 className="size-4 stroke-2 animate-spin" /> : <ShoppingCart className="size-4 stroke-2" />}
+                  {variantAddingToCart === variant.id ? (
+                    <Loader2 className="size-4 animate-spin stroke-2" />
+                  ) : (
+                    <ShoppingCart className="size-4 stroke-2" />
+                  )}
                 </Button>
               </div>
             </CardHeader>
             <CardFooter className="flex gap-2">
-              <div className="flex flex-col items-start gap-2 flex-1">
+              <div className="flex flex-1 flex-col items-start gap-2">
                 <h5>
                   {title}
                   {description && (
                     <>
                       <InfoTooltip
                         content={
-                          <div className='flex flex-col gap-2'>
+                          <div className="flex flex-col gap-2">
                             <span>{formattedPrice}</span>
                             <span>{description}</span>
                           </div>
@@ -112,11 +114,7 @@ export default function OrderAnalysesCards({
                     </>
                   )}
                 </h5>
-                {subtitle && (
-                  <CardDescription>
-                    {subtitle}
-                  </CardDescription>
-                )}
+                {subtitle && <CardDescription>{subtitle}</CardDescription>}
               </div>
               <div className="flex flex-col items-end gap-2 self-end text-sm">
                 <span>{formattedPrice}</span>