improve order analyses cards

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

@@ -21,7 +21,6 @@ import { formatCurrency } from '@/packages/shared/src/utils';
 export type OrderAnalysisCard = Pick<
   StoreProduct, 'title' | 'description' | 'subtitle'
 > & {
-  isAvailable: boolean;
   variant: { id: string };
   price: number | null;
 };
@@ -64,7 +63,6 @@ export default function OrderAnalysesCards({
         variant,
         description,
         subtitle,
-        isAvailable,
         price,
       }) => {
         const formattedPrice = typeof price === 'number'
@@ -77,7 +75,7 @@ export default function OrderAnalysesCards({
         return (
           <Card
             key={title}
-            variant={isAvailable ? "gradient-success" : "gradient-warning"}
+            variant="gradient-success"
             className="flex flex-col justify-between"
           >
             <CardHeader className="flex-row">
@@ -86,46 +84,44 @@ export default function OrderAnalysesCards({
               >
                 <HeartPulse className="size-4 fill-green-500" />
               </div>
-              {isAvailable && (
-                <div className='ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-warning'>
-                  <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" />}
-                  </Button>
-                </div>
-              )}
+              <div className='ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-warning'>
+                <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" />}
+                </Button>
+              </div>
             </CardHeader>
-            <CardFooter className="flex flex-col items-start gap-2">
-              <h5>
-                {title}
-                {description && (
-                  <>
-                    {'  '}
-                    <InfoTooltip
-                      content={
-                        <div className='flex flex-col gap-2'>
-                          <span>{formattedPrice}</span>
-                          <span>{description}</span>
-                        </div>
-                      }
-                    />
-                  </>
+            <CardFooter className="flex gap-2">
+              <div className="flex flex-col items-start gap-2 flex-1">
+                <h5>
+                  {title}
+                  {description && (
+                    <>
+                      {'  '}
+                      <InfoTooltip
+                        content={
+                          <div className='flex flex-col gap-2'>
+                            <span>{formattedPrice}</span>
+                            <span>{description}</span>
+                          </div>
+                        }
+                      />
+                    </>
+                  )}
+                </h5>
+                {subtitle && (
+                  <CardDescription>
+                    {subtitle}
+                  </CardDescription>
                 )}
-              </h5>
-              {isAvailable && subtitle && (
-                <CardDescription>
-                  {subtitle}
-                </CardDescription>
-              )}
-              {!isAvailable && (
-                <CardDescription>
-                  <Trans i18nKey={'order-analysis:analysisNotAvailable'} />
-                </CardDescription>
-              )}
+              </div>
+              <div className="flex flex-col items-end gap-2 self-end text-sm">
+                <span>{formattedPrice}</span>
+              </div>
             </CardFooter>
           </Card>
         );

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

@@ -41,7 +41,7 @@ async function analysesLoader() {
   const categoryProducts = category
     ? await listProducts({
       countryCode,
-      queryParams: { limit: 100, category_id: category.id },
+      queryParams: { limit: 100, category_id: category.id, order: 'title' },
     })
     : null;
 
@@ -51,8 +51,10 @@ async function analysesLoader() {
 
   return {
     analyses:
-      categoryProducts?.response.products.map<OrderAnalysisCard>(
-        ({ title, description, subtitle, variants, status, metadata }) => {
+      categoryProducts?.response.products
+      .filter(({ status, metadata }) => status === 'published' && !!metadata?.analysisIdOriginal)
+      .map<OrderAnalysisCard>(
+        ({ title, description, subtitle, variants }) => {
           const variant = variants![0]!;
           return {
             title,
@@ -61,8 +63,6 @@ async function analysesLoader() {
             variant: {
               id: variant.id,
             },
-            isAvailable:
-              status === 'published' && !!metadata?.analysisIdOriginal,
             price: variant.calculated_price?.calculated_amount ?? null,
           };
         },