feat(MED-122): use <Trans> instead of t()

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

@@ -3,8 +3,9 @@ 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, { IAnalysisPackage } from '@/components/select-analysis-packages';
+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';
 
@@ -17,49 +18,23 @@ 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',
-  },
-] satisfies IAnalysisPackage[];
-
 async function OrderAnalysisPackagePage() {
-  const { t } = await createI18nServerInstance();
-
   return (
     <PageBody>
       <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>
-      <SelectAnalysisPackages analysisPackages={dummyCards} />
+      <SelectAnalysisPackages />
     </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 { InfoTooltip } from '../../../../components/ui/info-tooltip';
+import { PackageHeader } from '@/components/package-header';
+import { InfoTooltip } from '@/components/ui/info-tooltip';
 
 const dummyCards = [
   {

app/select-package/page.tsx

@@ -2,6 +2,7 @@ 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';
 
@@ -22,17 +23,17 @@ export const generateMetadata = async () => {
 };
 
 async function SelectPackagePage() {
-  const { t } = 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>
           }
@@ -41,7 +42,7 @@ async function SelectPackagePage() {
       <SelectAnalysisPackages />
       <Link href={pathsConfig.app.home}>
         <Button variant="secondary" className="align-center">
-          {t('marketing:notInterestedInAudit')}{' '}
+          <Trans i18nKey={'marketing:notInterestedInAudit'} />{' '}
           <CaretRightIcon className="size-4" />
         </Button>
       </Link>

components/select-analysis-packages.tsx

@@ -24,7 +24,33 @@ export interface IAnalysisPackage {
   descriptionKey: string;
 }
 
-export default function SelectAnalysisPackages({ analysisPackages }: { analysisPackages: IAnalysisPackage[] }) {
+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 },
@@ -60,7 +86,9 @@ export default function SelectAnalysisPackages({ analysisPackages }: { analysisP
                   language={language}
                   price={price}
                 />
-                <CardDescription>{t(descriptionKey)}</CardDescription>
+                <CardDescription>
+                  <Trans i18nKey={descriptionKey} />
+                </CardDescription>
               </CardContent>
               <CardFooter>
                 <Button className="w-full">