WIP: add lifestyle block

2025-10-21 09:36:29 +03:00
parent fbdfdaf0c1
commit 6dcc91a206
10 changed files with 233 additions and 89 deletions
--- a/app/home/(user)/_components/ai/ai-blocks.tsx
+++ b/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;
--- a/app/home/(user)/_components/ai/life-style-card.tsx
+++ b/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;
--- a/app/home/(user)/_components/ai/order-analyses-package-card.tsx
+++ b/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;
--- a/app/home/(user)/_components/ai/recommendations-skeleton.tsx
+++ b/app/home/(user)/_components/ai/recommendations-skeleton.tsx
--- a/app/home/(user)/_components/ai/recommendations.tsx
+++ b/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 { loadRecommendations } from '../_lib/server/load-recommendations';
-import OrderAnalysesCards from './order-analyses-cards';
+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,
@@ -25,6 +25,8 @@ export default async function Recommendations({
  }

  return (
-    <OrderAnalysesCards analyses={orderAnalyses} countryCode={countryCode} />
+    <>
+      <OrderAnalysesCards analyses={orderAnalyses} countryCode={countryCode} />
+    </>
  );
 }
--- a/app/home/(user)/_components/order-analyses-cards.tsx
+++ b/app/home/(user)/_components/order-analyses-cards.tsx
@@ -57,72 +57,64 @@ export default function OrderAnalysesCards({
    }
  };

-  return (
-    <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}
-            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'
-                }
-              >
-                <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">
-                <Button
-                  size="icon"
-                  variant="outline"
-                  className="px-2 text-black"
-                  onClick={() => handleSelect(variant.id)}
-                >
-                  {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-1 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>
-                        }
-                      />
-                    </>
-                  )}
-                </h5>
-                {subtitle && <CardDescription>{subtitle}</CardDescription>}
-              </div>
-              <div className="flex flex-col items-end gap-2 self-end text-sm">
-                <span>{formattedPrice}</span>
-              </div>
-            </CardFooter>
-          </Card>
-        );
-      })}
-    </div>
-  );
+  return analyses.map(({ title, variant, description, subtitle, price }) => {
+    const formattedPrice =
+      typeof price === 'number'
+        ? formatCurrency({
+            currencyCode: 'eur',
+            locale: language,
+            value: price,
+          })
+        : null;
+    return (
+      <Card
+        key={title}
+        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">
+            <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">
+            <Button
+              size="icon"
+              variant="outline"
+              className="px-2 text-black"
+              onClick={() => handleSelect(variant.id)}
+            >
+              {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-1 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>
+                    }
+                  />
+                </>
+              )}
+            </h5>
+            {subtitle && <CardDescription>{subtitle}</CardDescription>}
+          </div>
+          <div className="flex flex-col items-end gap-2 self-end text-sm">
+            <span>{formattedPrice}</span>
+          </div>
+        </CardFooter>
+      </Card>
+    );
+  });
 }