WIP: add lifestyle block

app/home/(user)/_components/ai/ai-blocks.tsx

@@ -0,0 +1,42 @@
+'use server';
+
+import React, { Suspense } from 'react';
+
+import { AccountWithParams } from '@/packages/features/accounts/src/types/accounts';
+
+import { isValidOpenAiEnv } from '../../_lib/server/is-valid-open-ai-env';
+import { loadAnalyses } from '../../_lib/server/load-analyses';
+import LifeStyleCard from './life-style-card';
+import OrderAnalysesPackageCard from './order-analyses-package-card';
+import Recommendations from './recommendations';
+import RecommendationsSkeleton from './recommendations-skeleton';
+
+const AIBlocks = async ({ account }: { account: AccountWithParams }) => {
+  const isOpenAiAvailable = await isValidOpenAiEnv();
+
+  if (!isOpenAiAvailable) {
+    return <OrderAnalysesPackageCard />;
+  }
+
+  const { analyses, countryCode } = await loadAnalyses();
+
+  if (analyses.length === 0) {
+    return (
+      <>
+        <OrderAnalysesPackageCard />
+        <Suspense fallback={<RecommendationsSkeleton />}>
+          <LifeStyleCard />
+        </Suspense>
+      </>
+    );
+  }
+
+  return (
+    <Suspense fallback={<RecommendationsSkeleton />}>
+      <LifeStyleCard />
+      <Recommendations account={account} />
+    </Suspense>
+  );
+};
+
+export default AIBlocks;

app/home/(user)/_components/ai/life-style-card.tsx

@@ -0,0 +1,19 @@
+'use server';
+
+import React from 'react';
+
+import { Card } from '@kit/ui/shadcn/card';
+
+import { loadLifeStyle } from '../../_lib/server/load-life-style';
+
+const LifeStyleCard = async () => {
+  const data = await loadLifeStyle();
+
+  return (
+    <Card variant="gradient-success" className="flex flex-col justify-between">
+      Test
+    </Card>
+  );
+};
+
+export default LifeStyleCard;

app/home/(user)/_components/ai/order-analyses-package-card.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Link from 'next/link';
+
+import { pathsConfig } from '@/packages/shared/src/config';
+import { ChevronRight, HeartPulse } from 'lucide-react';
+
+import { Trans } from '@kit/ui/makerkit/trans';
+import { Button } from '@kit/ui/shadcn/button';
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+} from '@kit/ui/shadcn/card';
+
+const OrderAnalysesPackageCard = () => {
+  return (
+    <Card
+      variant="gradient-success"
+      className="xs:w-1/2 flex w-full flex-col justify-between sm:w-auto"
+    >
+      <CardHeader className="flex-row sm:pb-0">
+        <div
+          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="bg-warning ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white">
+          <Link href={pathsConfig.app.orderAnalysisPackage}>
+            <Button size="icon" variant="outline" className="px-2 text-black">
+              <ChevronRight className="size-4 stroke-2" />
+            </Button>
+          </Link>
+        </div>
+      </CardHeader>
+      <CardFooter className="flex flex-col items-start gap-2">
+        <h5>
+          <Trans i18nKey="dashboard:heroCard.orderPackage.title" />
+        </h5>
+        <CardDescription className="text-primary">
+          <Trans i18nKey="dashboard:heroCard.orderPackage.description" />
+        </CardDescription>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default OrderAnalysesPackageCard;

app/home/(user)/_components/ai/recommendations-skeleton.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { InfoTooltip } from '@/packages/shared/src/components/ui/info-tooltip';
+
+import { Button } from '@kit/ui/shadcn/button';
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+} from '@kit/ui/shadcn/card';
+import { Skeleton } from '@kit/ui/skeleton';
+
+const RecommendationsSkeleton = () => {
+  const emptyData = [
+    {
+      title: '1',
+      description: '',
+      subtitle: '',
+      variant: { id: '' },
+      price: 1,
+    },
+    {
+      title: '2',
+      description: '',
+      subtitle: '',
+      variant: { id: '' },
+      price: 1,
+    },
+  ];
+  return (
+    <div className="xs:grid-cols-3 mt-4 grid gap-6">
+      {emptyData.map(({ title, description, subtitle }) => (
+        <Skeleton key={title}>
+          <Card>
+            <CardHeader className="flex-row">
+              <div
+                className={
+                  'mb-6 flex size-8 items-center-safe justify-center-safe'
+                }
+              />
+              <div className="ml-auto flex size-8 items-center-safe justify-center-safe">
+                <Button size="icon" className="px-2" />
+              </div>
+            </CardHeader>
+            <CardFooter className="flex">
+              <div className="flex flex-1 flex-col items-start">
+                <h5>
+                  {title}
+                  {description && (
+                    <>
+                      {'  '}
+                      <InfoTooltip
+                        content={
+                          <div className="flex flex-col gap-2">
+                            <span>{description}</span>
+                          </div>
+                        }
+                      />
+                    </>
+                  )}
+                </h5>
+                {subtitle && <CardDescription>{subtitle}</CardDescription>}
+              </div>
+              <div className="flex flex-col items-end gap-2 self-end text-sm"></div>
+            </CardFooter>
+          </Card>
+        </Skeleton>
+      ))}
+    </div>
+  );
+};
+
+export default RecommendationsSkeleton;

app/home/(user)/_components/ai/recommendations.tsx

@@ -0,0 +1,32 @@
+'use server';
+
+import React from 'react';
+
+import { AccountWithParams } from '@/packages/features/accounts/src/types/accounts';
+
+import { loadAnalyses } from '../../_lib/server/load-analyses';
+import { loadRecommendations } from '../../_lib/server/load-recommendations';
+import OrderAnalysesCards from '../order-analyses-cards';
+
+export default async function Recommendations({
+  account,
+}: {
+  account: AccountWithParams;
+}) {
+  const { analyses, countryCode } = await loadAnalyses();
+
+  const analysisRecommendations = await loadRecommendations(analyses, account);
+  const orderAnalyses = analyses.filter((analysis) =>
+    analysisRecommendations.includes(analysis.title),
+  );
+
+  if (orderAnalyses.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <OrderAnalysesCards analyses={orderAnalyses} countryCode={countryCode} />
+    </>
+  );
+}