Merge pull request #34 from MR-medreport/MED-122

feat(MED-122): update analysis packages page, pageheader usage

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

@@ -0,0 +1,34 @@
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+import { HomeLayoutPageHeader } from '../../_components/home-page-header';
+import OrderCards from '../../_components/order-cards';
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('booking:title');
+
+  return {
+    title,
+  };
+};
+
+function BookingPage() {
+  return (
+    <>
+      <HomeLayoutPageHeader
+        title={<Trans i18nKey={'booking:title'} />}
+        description={<Trans i18nKey={'booking:description'} />}
+      />
+
+      <PageBody>
+        <OrderCards />
+      </PageBody>
+    </>
+  );
+}
+
+export default withI18n(BookingPage);

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

@@ -0,0 +1,42 @@
+import { Scale } from 'lucide-react';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+import { Button } from '@kit/ui/button';
+import SelectAnalysisPackages from '@/components/select-analysis-packages';
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import ComparePackagesModal from '../../_components/compare-packages-modal';
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('order-analysis-package:title');
+
+  return {
+    title,
+  };
+};
+
+async function OrderAnalysisPackagePage() {
+  return (
+    <PageBody>
+      <div className="space-y-3 text-center">
+        <h3>
+          <Trans i18nKey={'marketing:selectPackage'} />
+        </h3>
+        <ComparePackagesModal
+          triggerElement={
+            <Button variant="secondary" className="gap-2">
+              <Trans i18nKey={'marketing:comparePackages'} />
+              <Scale className="size-4 stroke-[1.5px]" />
+            </Button>
+          }
+        />
+      </div>
+      <SelectAnalysisPackages />
+    </PageBody>
+  );
+}
+
+export default withI18n(OrderAnalysisPackagePage);

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

@@ -1,15 +1,13 @@
-import { use } from 'react';
+import { redirect } from 'next/navigation';
-
-import { PageBody } from '@kit/ui/page';
-import { Trans } from '@kit/ui/trans';
 
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
+import { PageBody, PageHeader } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+import { toTitleCase } from '@/lib/utils';
 
 import Dashboard from '../_components/dashboard';
-// local imports
+import { loadCurrentUserAccount } from '../_lib/server/load-user-account';
-import { HomeLayoutPageHeader } from '../_components/home-page-header';
-import { loadUserWorkspace } from '../_lib/server/load-user-workspace';
 
 export const generateMetadata = async () => {
   const i18n = await createI18nServerInstance();
@@ -20,15 +18,24 @@ export const generateMetadata = async () => {
   };
 };
 
-function UserHomePage() {
+async function UserHomePage() {
-  const { tempVisibleAccounts } = use(loadUserWorkspace());
+  const account = await loadCurrentUserAccount();
+  if (!account) {
+    redirect('/');
+  }
+
   return (
     <>
-      <HomeLayoutPageHeader
+      <PageHeader title={
-        title={<Trans i18nKey={'common:routes.home'} />}
+        <>
-        description={<></>}
+          <Trans i18nKey={'common:welcome'} />
+          {account.name ? `, ${toTitleCase(account.name)}` : ''}
+        </>
+      }
+        description={
+          <Trans i18nKey={'dashboard:recentlyCheckedDescription'} />
+        }
       />
-
       <PageBody>
         <Dashboard />
       </PageBody>

app/home/(user)/_components/compare-packages-modal.tsx

@@ -18,12 +18,10 @@ import {
   TableHeader,
   TableRow,
 } from '@kit/ui/table';
-
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
-
+import { PackageHeader } from '@/components/package-header';
-import { PackageHeader } from '../../../../components/package-header';
+import { InfoTooltip } from '@/components/ui/info-tooltip';
-import { InfoTooltip } from '../../../../components/ui/info-tooltip';
 
 const dummyCards = [
   {

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

@@ -1,7 +1,7 @@
 'use client';
 
+import Link from 'next/link';
 import { InfoTooltip } from '@/components/ui/info-tooltip';
-import { toTitleCase } from '@/lib/utils';
 import { BlendingModeIcon, RulerHorizontalIcon } from '@radix-ui/react-icons';
 import {
   Activity,
@@ -15,8 +15,6 @@ import {
   User,
 } from 'lucide-react';
 
-import { usePersonalAccountData } from '@kit/accounts/hooks/use-personal-account-data';
-import { useUserWorkspace } from '@kit/accounts/hooks/use-user-workspace';
 import { Button } from '@kit/ui/button';
 import {
   Card,
@@ -26,7 +24,6 @@ import {
   CardHeader,
   CardProps,
 } from '@kit/ui/card';
-import { PageDescription } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
@@ -107,6 +104,7 @@ const dummyRecommendations = [
     tooltipContent: 'Selgitus',
     price: '20,00 €',
     buttonText: 'Telli',
+    href: '/home/booking',
   },
   {
     icon: <BlendingModeIcon className="size-4" />,
@@ -115,6 +113,7 @@ const dummyRecommendations = [
     tooltipContent: 'Selgitus',
     description: 'LDL-Kolesterool',
     buttonText: 'Broneeri',
+    href: '/home/booking',
   },
   {
     icon: <Droplets />,
@@ -124,24 +123,13 @@ const dummyRecommendations = [
     description: 'Score-Risk 2',
     price: '20,00 €',
     buttonText: 'Telli',
+    href: '/home/booking',
   },
 ];
 
 export default function Dashboard() {
-  const userWorkspace = useUserWorkspace();
-  const account = usePersonalAccountData(userWorkspace.user.id);
-
   return (
     <>
-      <div>
-        <h4>
-          <Trans i18nKey={'common:welcome'} />
-          {account?.data?.name ? `, ${toTitleCase(account.data.name)}` : ''}
-        </h4>
-        <PageDescription>
-          <Trans i18nKey={'dashboard:recentlyCheckedDescription'} />:
-        </PageDescription>
-      </div>
       <div className="grid auto-rows-fr grid-cols-5 gap-3">
         {dummyCards.map(
           ({
@@ -196,6 +184,7 @@ export default function Dashboard() {
                 tooltipContent,
                 price,
                 buttonText,
+                href,
               },
               index,
             ) => {
@@ -222,9 +211,17 @@ export default function Dashboard() {
                   </div>
                   <div className="grid w-36 auto-rows-fr grid-cols-2 items-center gap-4">
                     <p className="text-sm font-medium"> {price}</p>
-                    <Button size="sm" variant="secondary">
+                    {href ? (
-                      {buttonText}
+                      <Link href={href}>
-                    </Button>
+                        <Button size="sm" variant="secondary">
+                          {buttonText}
+                        </Button>
+                      </Link>
+                    ) : (
+                      <Button size="sm" variant="secondary">
+                        {buttonText}
+                      </Button>
+                    )}
                   </div>
                 </div>
               );

app/home/(user)/_components/home-page-header.tsx

@@ -7,6 +7,6 @@ export function HomeLayoutPageHeader(
   }>,
 ) {
   return (
-    <PageHeader description={props.description}>{props.children}</PageHeader>
+    <PageHeader description={props.description} title={props.title}>{props.children}</PageHeader>
   );
 }

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

@@ -0,0 +1,77 @@
+"use client";
+
+import { ChevronRight, HeartPulse } from 'lucide-react';
+import Link from 'next/link';
+
+import { Button } from '@kit/ui/button';
+import {
+  Card,
+  CardHeader,
+  CardDescription,
+  CardProps,
+  CardFooter,
+} from '@kit/ui/card';
+import { Trans } from '@kit/ui/trans';
+import { cn } from '@/lib/utils';
+
+const dummyCards = [
+  {
+    title: 'booking:analysisPackages.title',
+    description: 'booking:analysisPackages.description',
+    descriptionColor: 'text-primary',
+    icon: (
+      <Link href={'/home/order-analysis-package'}>
+        <Button size="icon" variant="outline" className="px-2 text-black">
+          <ChevronRight className="size-4 stroke-2" />
+        </Button>
+      </Link>
+    ),
+    cardVariant: 'gradient-success' as CardProps['variant'],
+    iconBg: 'bg-warning',
+  },
+];
+
+export default function OrderCards() {
+  return (
+    <div className="grid grid-cols-3 gap-6 mt-4">
+      {dummyCards.map(({
+        title,
+        description,
+        icon,
+        cardVariant,
+        descriptionColor,
+        iconBg,
+      }) => (
+        <Card
+          key={title}
+          variant={cardVariant}
+          className="flex flex-col justify-between"
+        >
+          <CardHeader className="items-end-safe">
+            <div
+              className={cn(
+                'flex size-8 items-center-safe justify-center-safe rounded-full text-white',
+                iconBg,
+              )}
+            >
+              {icon}
+            </div>
+          </CardHeader>
+          <CardFooter className="flex flex-col items-start gap-2">
+            <div
+              className={'flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-primary\/10 mb-6'}
+            >
+              <HeartPulse className="size-4 fill-green-500" />
+            </div>
+            <h5>
+              <Trans i18nKey={title} />
+            </h5>
+            <CardDescription className={descriptionColor}>
+              <Trans i18nKey={description} />
+            </CardDescription>
+          </CardFooter>
+        </Card>
+      ))}
+    </div>
+  );
+}

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

@@ -2,6 +2,7 @@ import { cache } from 'react';
 
 import { createAccountsApi } from '@kit/accounts/api';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { requireUserInServerComponent } from '@/lib/server/require-user-in-server-component';
 
 export type UserAccount = Awaited<ReturnType<typeof loadUserAccount>>;
 
@@ -13,6 +14,13 @@ export type UserAccount = Awaited<ReturnType<typeof loadUserAccount>>;
  */
 export const loadUserAccount = cache(accountLoader);
 
+export async function loadCurrentUserAccount() {
+  const user = await requireUserInServerComponent();
+  return user?.identities?.[0]?.id
+    ? await loadUserAccount(user?.identities?.[0]?.id)
+    : null;
+}
+
 async function accountLoader(accountId: string) {
   const client = getSupabaseServerClient();
   const api = createAccountsApi(client);

app/home/layout.tsx

@@ -1,6 +1,6 @@
-import { requireUserInServerComponent } from '../../lib/server/require-user-in-server-component';
+import { requireUserInServerComponent } from '@/lib/server/require-user-in-server-component';
 import ConsentDialog from './(user)/_components/consent-dialog';
-import { loadUserAccount } from './(user)/_lib/server/load-user-account';
+import { loadCurrentUserAccount } from './(user)/_lib/server/load-user-account';
 
 export default async function HomeLayout({
   children,
@@ -8,9 +8,7 @@ export default async function HomeLayout({
   children: React.ReactNode;
 }) {
   const user = await requireUserInServerComponent();
-  const account = user?.identities?.[0]?.id
+  const account = await loadCurrentUserAccount()
-    ? await loadUserAccount(user?.identities?.[0]?.id)
-    : null;
 
   if (account && account?.has_consent_anonymized_company_statistics === null) {
     return (

app/select-package/page.tsx

@@ -1,24 +1,16 @@
-import Image from 'next/image';
 import Link from 'next/link';
 
 import { CaretRightIcon } from '@radix-ui/react-icons';
 import { Scale } from 'lucide-react';
+import { Trans } from '@kit/ui/trans';
 
 import { Button } from '@kit/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-} from '@kit/ui/card';
 
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
+import SelectAnalysisPackages from '@/components/select-analysis-packages';
 
 import { MedReportLogo } from '../../components/med-report-logo';
-import { PackageHeader } from '../../components/package-header';
-import { ButtonTooltip } from '../../components/ui/button-tooltip';
 import pathsConfig from '../../config/paths.config';
 import ComparePackagesModal from '../home/(user)/_components/compare-packages-modal';
 
@@ -30,100 +22,30 @@ export const generateMetadata = async () => {
   };
 };
 
-const dummyCards = [
-  {
-    titleKey: 'product:standard.label',
-    price: 40,
-    nrOfAnalyses: 4,
-    tagColor: 'bg-cyan',
-    descriptionKey: 'marketing:standard.description',
-  },
-  {
-    titleKey: 'product:standardPlus.label',
-    price: 85,
-    nrOfAnalyses: 10,
-
-    tagColor: 'bg-warning',
-    descriptionKey: 'product:standardPlus.description',
-  },
-  {
-    titleKey: 'product:premium.label',
-    price: 140,
-    nrOfAnalyses: '12+',
-
-    tagColor: 'bg-purple',
-    descriptionKey: 'product:premium.description',
-  },
-];
-
 async function SelectPackagePage() {
-  const { t, language } = await createI18nServerInstance();
-
   return (
     <div className="container mx-auto my-24 flex flex-col items-center space-y-12">
       <MedReportLogo />
       <div className="space-y-3 text-center">
-        <h3>{t('marketing:selectPackage')}</h3>
+        <h3>
+          <Trans i18nKey={'marketing:selectPackage'} />
+        </h3>
         <ComparePackagesModal
           triggerElement={
             <Button variant="secondary" className="gap-2">
-              {t('marketing:comparePackages')}
+              <Trans i18nKey={'marketing:comparePackages'} />
               <Scale className="size-4 stroke-[1.5px]" />
             </Button>
           }
         />
       </div>
-      <div className="grid grid-cols-3 gap-6">
+      <SelectAnalysisPackages />
-        {dummyCards.map(
+      <Link href={pathsConfig.app.home}>
-          (
+        <Button variant="secondary" className="align-center">
-            { titleKey, price, nrOfAnalyses, tagColor, descriptionKey },
+          <Trans i18nKey={'marketing:notInterestedInAudit'} />{' '}
-            index,
+          <CaretRightIcon className="size-4" />
-          ) => {
+        </Button>
-            return (
+      </Link>
-              <Card key={index}>
-                <CardHeader className="relative">
-                  <ButtonTooltip
-                    content="Content pending"
-                    className="absolute top-5 right-5 z-10"
-                  />
-                  <Image
-                    src="/assets/card-image.png"
-                    alt="background"
-                    width={326}
-                    height={195}
-                    className="max-h-48 w-full opacity-10"
-                  />
-                </CardHeader>
-                <CardContent className="space-y-1 text-center">
-                  <PackageHeader
-                    title={t(titleKey)}
-                    tagColor={tagColor}
-                    analysesNr={t('product:nrOfAnalyses', { nr: nrOfAnalyses })}
-                    language={language}
-                    price={price}
-                  />
-                  <CardDescription>{t(descriptionKey)}</CardDescription>
-                </CardContent>
-                <CardFooter>
-                  <Button className="w-full">
-                    {t('marketing:selectThisPackage')}
-                  </Button>
-                </CardFooter>
-              </Card>
-            );
-          },
-        )}
-        <div className="col-span-3 grid grid-cols-subgrid">
-          <div className="col-start-2 justify-self-center-safe">
-            <Link href={pathsConfig.app.home}>
-              <Button variant="secondary" className="align-center">
-                {t('marketing:notInterestedInAudit')}{' '}
-                <CaretRightIcon className="size-4" />
-              </Button>
-            </Link>
-          </div>
-        </div>
-      </div>
     </div>
   );
 }

components/select-analysis-packages.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import Image from 'next/image';
+import { useTranslation } from 'react-i18next';
+
+import { Button } from '@kit/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+} from '@kit/ui/card';
+import { Trans } from '@kit/ui/trans';
+
+import { PackageHeader } from './package-header';
+import { ButtonTooltip } from './ui/button-tooltip';
+
+export interface IAnalysisPackage {
+  titleKey: string;
+  price: number;
+  nrOfAnalyses: number | string;
+  tagColor: string;
+  descriptionKey: string;
+}
+
+const analysisPackages = [
+  {
+    titleKey: 'product:standard.label',
+    price: 40,
+    nrOfAnalyses: 4,
+    tagColor: 'bg-cyan',
+    descriptionKey: 'marketing:standard.description',
+  },
+  {
+    titleKey: 'product:standardPlus.label',
+    price: 85,
+    nrOfAnalyses: 10,
+
+    tagColor: 'bg-warning',
+    descriptionKey: 'product:standardPlus.description',
+  },
+  {
+    titleKey: 'product:premium.label',
+    price: 140,
+    nrOfAnalyses: '12+',
+
+    tagColor: 'bg-purple',
+    descriptionKey: 'product:premium.description',
+  },
+] satisfies IAnalysisPackage[];
+
+export default function SelectAnalysisPackages() {
+  const {
+    t,
+    i18n: { language },
+  } = useTranslation();
+
+  return (
+    <div className="grid grid-cols-3 gap-6">
+      {analysisPackages.length > 0 ? analysisPackages.map(
+        (
+          { titleKey, price, nrOfAnalyses, tagColor, descriptionKey },
+          index,
+        ) => {
+          return (
+            <Card key={index}>
+              <CardHeader className="relative">
+                <ButtonTooltip
+                  content="Content pending"
+                  className="absolute top-5 right-5 z-10"
+                />
+                <Image
+                  src="/assets/card-image.png"
+                  alt="background"
+                  width={326}
+                  height={195}
+                  className="max-h-48 w-full opacity-10"
+                />
+              </CardHeader>
+              <CardContent className="space-y-1 text-center">
+                <PackageHeader
+                  title={t(titleKey)}
+                  tagColor={tagColor}
+                  analysesNr={t('product:nrOfAnalyses', { nr: nrOfAnalyses })}
+                  language={language}
+                  price={price}
+                />
+                <CardDescription>
+                  <Trans i18nKey={descriptionKey} />
+                </CardDescription>
+              </CardContent>
+              <CardFooter>
+                <Button className="w-full">
+                  <Trans i18nKey='order-analysis-package:selectThisPackage' />
+                </Button>
+              </CardFooter>
+            </Card>
+          );
+        },
+      ) : (
+        <h4>
+          <Trans i18nKey='order-analysis-package:noPackagesAvailable' />
+        </h4>
+      )}
+    </div>
+  );
+}

config/paths.config.ts

@@ -57,11 +57,11 @@ const pathsConfig = PathsSchema.parse({
     accountBillingReturn: `/home/[account]/billing/return`,
     joinTeam: '/join',
     selectPackage: '/select-package',
+    booking: '/home/booking',
+    orderAnalysisPackage: '/home/order-analysis-package',
     // these routes are added as placeholders and can be changed when the pages are added
-    booking: '/booking',
     myOrders: '/my-orders',
     analysisResults: '/home/analysis-results',
-    orderAnalysisPackage: '/order-analysis-package',
     orderAnalysis: '/order-analysis',
     orderHealthAnalysis: '/order-health-analysis',
   },

lib/i18n/i18n.settings.ts

@@ -34,6 +34,8 @@ export const defaultI18nNamespaces = [
   'marketing',
   'dashboard',
   'product',
+  'booking',
+  'order-analysis-package',
 ];
 
 /**

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -26,9 +26,10 @@ import { SubMenuModeToggle } from '@kit/ui/mode-toggle';
 import { ProfileAvatar } from '@kit/ui/profile-avatar';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
-
+  
 import { usePersonalAccountData } from '../hooks/use-personal-account-data';
 import { Avatar, AvatarFallback, AvatarImage } from '@kit/ui/avatar';
+import { toTitleCase } from '~/lib/utils';
 
 const PERSONAL_ACCOUNT_SLUG = 'personal';
 
@@ -124,7 +125,7 @@ export function PersonalAccountDropdown({
               data-test={'account-dropdown-display-name'}
               className={'truncate text-sm'}
             >
-              {displayName}
+              {toTitleCase(displayName)}
             </span>
 
           </div>

packages/features/accounts/tsconfig.json

@@ -1,7 +1,10 @@
 {
   "extends": "@kit/tsconfig/base.json",
   "compilerOptions": {
-    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json",
+    "paths": {
+      "~/lib/utils": ["../../../lib/utils.ts"]
+    }
   },
   "include": ["*.ts", "*.tsx", "src"],
   "exclude": ["node_modules"]

packages/features/auth/src/components/password-sign-up-form.tsx

@@ -76,7 +76,6 @@ export function PasswordSignUpForm({
                   data-test={'personal-code-input'}
                   required
                   type="text"
-                  placeholder={t('personalCodePlaceholder')}
                   {...field}
                 />
               </FormControl>

packages/ui/src/makerkit/page.tsx

@@ -129,13 +129,13 @@ export function PageDescription(props: React.PropsWithChildren) {
 
 export function PageTitle(props: React.PropsWithChildren) {
   return (
-    <h1
+    <h4
       className={
-        'font-heading text-base leading-none font-bold tracking-tight dark:text-white'
+        'font-heading leading-none font-bold tracking-tight dark:text-white'
       }
     >
       {props.children}
-    </h1>
+    </h4>
   );
 }
 
@@ -163,6 +163,10 @@ export function PageHeader({
       )}
     >
       <div className={'flex flex-col gap-y-2'}>
+        <If condition={title}>
+          <PageTitle>{title}</PageTitle>
+        </If>
+
         <div className="flex items-center gap-x-2.5">
           {displaySidebarTrigger ? (
             <SidebarTrigger className="text-muted-foreground hover:text-secondary-foreground hidden h-4.5 w-4.5 cursor-pointer lg:inline-flex" />
@@ -179,10 +183,6 @@ export function PageHeader({
             <PageDescription>{description}</PageDescription>
           </If>
         </div>
-
-        <If condition={title}>
-          <PageTitle>{title}</PageTitle>
-        </If>
       </div>
 
       {children}

public/locales/en/booking.json

@@ -0,0 +1,8 @@
+{
+    "title": "Select service",
+    "description": "Select the appropriate service or package according to your health needs or goals.",
+    "analysisPackages": {
+        "title": "Analysis packages",
+        "description": "Get to know the personal analysis packages and order"
+    }
+}

public/locales/en/marketing.json

@@ -37,8 +37,5 @@
   "footerDescription": "Here you can add a description about your company or product",
   "copyright": "© Copyright {{year}} {{product}}. All Rights Reserved.",
   "heroSubtitle": "A simple, convenient, and quick overview of your health condition",
-  "selectPackage": "Select package",
-  "selectThisPackage": "Select this package",
-  "comparePackages": "Compare packages",
   "notInterestedInAudit": "Currently not interested in a health audit"
 }

public/locales/en/order-analysis-package.json

@@ -0,0 +1,7 @@
+{
+    "title": "Select analysis package",
+    "noPackagesAvailable": "No packages available",
+    "selectThisPackage": "Select this package",
+    "selectPackage": "Select package",
+    "comparePackages": "Compare packages"
+}

public/locales/et/booking.json

@@ -0,0 +1,8 @@
+{
+    "title": "Vali teenus",
+    "description": "Vali sobiv teenus või pakett vastavalt oma tervisemurele või -eesmärgile.",
+    "analysisPackages": {
+        "title": "Analüüside paketid",
+        "description": "Tutvu personaalsete analüüsi pakettidega ja telli"
+    }
+}

public/locales/et/common.json

@@ -61,7 +61,7 @@
   "search": "Otsi{{end}}",
   "myActions": "Minu toimingud",
   "healthPackageComparison": {
-    "label": "Tervisepakketide võrdlus",
+    "label": "Tervisepakettide võrdlus",
     "description": "Alljärgnevalt on antud eelinfo (sugu, vanus ja kehamassiindeksi) põhjal tehtud personalne terviseauditi valik. Tabelis on võimalik soovitatud terviseuuringute paketile lisada üksikuid uuringuid juurde."
   },
   "routes": {

public/locales/et/marketing.json

@@ -37,8 +37,5 @@
   "footerDescription": "Here you can add a description about your company or product",
   "copyright": "© Copyright {{year}} {{product}}. All Rights Reserved.",
   "heroSubtitle": "Lihtne, mugav ja kiire ülevaade oma tervisest",
-  "selectPackage": "Vali pakett",
-  "selectThisPackage": "Vali see pakett",
-  "comparePackages": "Võrdle pakette",
   "notInterestedInAudit": "Ei soovi hetkel terviseauditit"
 }

public/locales/et/order-analysis-package.json

@@ -0,0 +1,7 @@
+{
+    "title": "Vali analüüsi pakett",
+    "noPackagesAvailable": "Teenuste loetelu ei leitud, proovi hiljem uuesti",
+    "selectThisPackage": "Vali see pakett",
+    "selectPackage": "Vali pakett",
+    "comparePackages": "Võrdle pakette"
+}

public/locales/ru/booking.json

@@ -0,0 +1,8 @@
+{
+    "title": "Select service",
+    "description": "Select the appropriate service or package according to your health needs or goals.",
+    "analysisPackages": {
+        "title": "Analysis packages",
+        "description": "Get to know the personal analysis packages and order"
+    }
+}

public/locales/ru/marketing.json

@@ -37,8 +37,5 @@
   "footerDescription": "Here you can add a description about your company or product",
   "copyright": "© Copyright {{year}} {{product}}. All Rights Reserved.",
   "heroSubtitle": "A simple, convenient, and quick overview of your health condition",
-  "selectPackage": "Select package",
-  "selectThisPackage": "Select this package",
-  "comparePackages": "Compare packages",
   "notInterestedInAudit": "Currently not interested in a health audit"
 }

public/locales/ru/order-analysis-package.json

@@ -0,0 +1,7 @@
+{
+    "title": "Select analysis package",
+    "noPackagesAvailable": "No packages available",
+    "selectThisPackage": "Select this package",
+    "selectPackage": "Select package",
+    "comparePackages": "Compare packages"
+}

styles/globals.css

@@ -89,4 +89,8 @@
   .lucide {
     @apply size-4;
   }
+
+  button {
+    cursor: pointer;
+  }
 }