WIP: add lifestyle block

app/home/(user)/(dashboard)/order-analysis/page.tsx

@@ -37,8 +37,8 @@ async function OrderAnalysisPage() {
   return (
     <>
       <HomeLayoutPageHeader
-        title={<Trans i18nKey={'order-analysis:title'} />}
+        title={<Trans i18nKey="order-analysis:title" />}
-        description={<Trans i18nKey={'order-analysis:description'} />}
+        description={<Trans i18nKey="order-analysis:description" />}
       />
       <PageBody>
         <OrderAnalysesCards analyses={analyses} countryCode={countryCode} />

app/home/(user)/(dashboard)/page.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from 'react';
-
 import { redirect } from 'next/navigation';
 
 import { toTitleCase } from '@/lib/utils';
@@ -12,11 +10,9 @@ import { createUserAnalysesApi } from '@kit/user-analyses/api';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
+import AIBlocks from '../_components/ai/ai-blocks';
 import Dashboard from '../_components/dashboard';
 import DashboardCards from '../_components/dashboard-cards';
-import Recommendations from '../_components/recommendations';
-import RecommendationsSkeleton from '../_components/recommendations-skeleton';
-import { isValidOpenAiEnv } from '../_lib/server/is-valid-open-ai-env';
 import { loadCurrentUserAccount } from '../_lib/server/load-user-account';
 
 export const generateMetadata = async () => {
@@ -53,16 +49,13 @@ async function UserHomePage() {
       />
       <PageBody>
         <Dashboard account={account} bmiThresholds={bmiThresholds} />
-        {(await isValidOpenAiEnv()) && (
+
-          <>
+        <h4>
-            <h4>
+          <Trans i18nKey="dashboard:recommendations.title" />
-              <Trans i18nKey="dashboard:recommendations.title" />
+        </h4>
-            </h4>
+        <div className="mt-4 grid gap-6 sm:grid-cols-3">
-            <Suspense fallback={<RecommendationsSkeleton />}>
+          <AIBlocks account={account} />
-              <Recommendations account={account} />
+        </div>
-            </Suspense>
-          </>
-        )}
       </PageBody>
     </>
   );

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.tsx

@@ -4,9 +4,9 @@ import React from 'react';
 
 import { AccountWithParams } from '@/packages/features/accounts/src/types/accounts';
 
-import { loadAnalyses } from '../_lib/server/load-analyses';
+import { loadAnalyses } from '../../_lib/server/load-analyses';
-import { loadRecommendations } from '../_lib/server/load-recommendations';
+import { loadRecommendations } from '../../_lib/server/load-recommendations';
-import OrderAnalysesCards from './order-analyses-cards';
+import OrderAnalysesCards from '../order-analyses-cards';
 
 export default async function Recommendations({
   account,
@@ -25,6 +25,8 @@ export default async function Recommendations({
   }
 
   return (
-    <OrderAnalysesCards analyses={orderAnalyses} countryCode={countryCode} />
+    <>
+      <OrderAnalysesCards analyses={orderAnalyses} countryCode={countryCode} />
+    </>
   );
 }

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

@@ -57,72 +57,64 @@ export default function OrderAnalysesCards({
     }
   };
 
-  return (
+  return analyses.map(({ title, variant, description, subtitle, price }) => {
-    <div className="xs:grid-cols-3 mt-4 grid gap-6">
+    const formattedPrice =
-      {analyses.map(({ title, variant, description, subtitle, price }) => {
+      typeof price === 'number'
-        const formattedPrice =
+        ? formatCurrency({
-          typeof price === 'number'
+            currencyCode: 'eur',
-            ? formatCurrency({
+            locale: language,
-                currencyCode: 'eur',
+            value: price,
-                locale: language,
+          })
-                value: price,
+        : null;
-              })
+    return (
-            : null;
+      <Card
-        return (
+        key={title}
-          <Card
+        variant="gradient-success"
-            key={title}
+        className="flex flex-col justify-between"
-            variant="gradient-success"
+      >
-            className="flex flex-col justify-between"
+        <CardHeader className="flex-row">
-          >
+          <div className="bg-primary/10 mb-6 flex size-8 items-center-safe justify-center-safe rounded-full text-white">
-            <CardHeader className="flex-row">
+            <HeartPulse className="size-4 fill-green-500" />
-              <div
+          </div>
-                className={
+          <div className="bg-warning ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white">
-                  'bg-primary/10 mb-6 flex size-8 items-center-safe justify-center-safe rounded-full text-white'
+            <Button
-                }
+              size="icon"
-              >
+              variant="outline"
-                <HeartPulse className="size-4 fill-green-500" />
+              className="px-2 text-black"
-              </div>
+              onClick={() => handleSelect(variant.id)}
-              <div className="bg-warning ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white">
+            >
-                <Button
+              {variantAddingToCart === variant.id ? (
-                  size="icon"
+                <Loader2 className="size-4 animate-spin stroke-2" />
-                  variant="outline"
+              ) : (
-                  className="px-2 text-black"
+                <ShoppingCart className="size-4 stroke-2" />
-                  onClick={() => handleSelect(variant.id)}
+              )}
-                >
+            </Button>
-                  {variantAddingToCart === variant.id ? (
+          </div>
-                    <Loader2 className="size-4 animate-spin stroke-2" />
+        </CardHeader>
-                  ) : (
+        <CardFooter className="flex gap-2">
-                    <ShoppingCart className="size-4 stroke-2" />
+          <div className="flex flex-1 flex-col items-start gap-2">
-                  )}
+            <h5>
-                </Button>
+              {title}
-              </div>
+              {description && (
-            </CardHeader>
+                <>
-            <CardFooter className="flex gap-2">
+                  <InfoTooltip
-              <div className="flex flex-1 flex-col items-start gap-2">
+                    content={
-                <h5>
+                      <div className="flex flex-col gap-2">
-                  {title}
+                        <span>{formattedPrice}</span>
-                  {description && (
+                        <span>{description}</span>
-                    <>
+                      </div>
-                      <InfoTooltip
+                    }
-                        content={
+                  />
-                          <div className="flex flex-col gap-2">
+                </>
-                            <span>{formattedPrice}</span>
+              )}
-                            <span>{description}</span>
+            </h5>
-                          </div>
+            {subtitle && <CardDescription>{subtitle}</CardDescription>}
-                        }
+          </div>
-                      />
+          <div className="flex flex-col items-end gap-2 self-end text-sm">
-                    </>
+            <span>{formattedPrice}</span>
-                  )}
+          </div>
-                </h5>
+        </CardFooter>
-                {subtitle && <CardDescription>{subtitle}</CardDescription>}
+      </Card>
-              </div>
+    );
-              <div className="flex flex-col items-end gap-2 self-end text-sm">
+  });
-                <span>{formattedPrice}</span>
-              </div>
-            </CardFooter>
-          </Card>
-        );
-      })}
-    </div>
-  );
 }

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

@@ -0,0 +1,41 @@
+import { cache } from 'react';
+
+import { AccountWithParams } from '@/packages/features/accounts/src/types/accounts';
+import OpenAI from 'openai';
+
+import PersonalCode from '~/lib/utils';
+
+const failedResponse = {
+  lifeStyle: null,
+  summary: null,
+};
+
+async function lifeStyleLoader(account: AccountWithParams) {
+  if (!account?.personal_code) {
+    return failedResponse;
+  }
+
+  const openAIClient = new OpenAI();
+  const { gender, age } = PersonalCode.parsePersonalCode(account.personal_code);
+  try {
+    const response = await openAIClient.responses.create({
+      store: false,
+      prompt: {
+        id: analysesRecommendationsPromptId,
+        variables: {
+          analyses: JSON.stringify(formattedAnalyses),
+          results: JSON.stringify(formattedAnalysisResponses),
+          gender: gender.value,
+          age: age.toString(),
+          weight: weight.toString(),
+        },
+      },
+    });
+
+    return response;
+  } catch (error) {
+    console.error('Error calling OpenAI: ', error);
+    return failedResponse;
+  }
+}
+export const loadLifeStyle = cache(lifeStyleLoader);

public/locales/et/dashboard.json

@@ -21,6 +21,10 @@
     "benefits": {
       "title": "Sinu Medreport konto seis",
       "validUntil": "Kehtiv kuni {{date}}"
+    },
+    "orderPackage": {
+      "title": "Telli analüüside pakett",
+      "description": "Võrdle erinevate pakettide vahel ja vali endale sobiv"
     }
   },
   "recommendations": {