Merge branch 'main' into B2B-30
This commit is contained in:
devmc-ee
@@ -1,39 +0,0 @@
|
||||
import { PricingTable } from '@kit/billing-gateway/marketing';
|
||||
|
||||
import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
|
||||
import billingConfig from '~/config/billing.config';
|
||||
import pathsConfig from '~/config/paths.config';
|
||||
import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
|
||||
import { withI18n } from '~/lib/i18n/with-i18n';
|
||||
|
||||
export const generateMetadata = async () => {
|
||||
const { t } = await createI18nServerInstance();
|
||||
|
||||
return {
|
||||
title: t('marketing:pricing'),
|
||||
};
|
||||
};
|
||||
|
||||
const paths = {
|
||||
signUp: pathsConfig.auth.signUp,
|
||||
return: pathsConfig.app.home,
|
||||
};
|
||||
|
||||
async function PricingPage() {
|
||||
const { t } = await createI18nServerInstance();
|
||||
|
||||
return (
|
||||
<div className={'flex flex-col space-y-12'}>
|
||||
<SitePageHeader
|
||||
title={t('marketing:pricing')}
|
||||
subtitle={t('marketing:pricingSubtitle')}
|
||||
/>
|
||||
|
||||
<div className={'container mx-auto pb-8 xl:pb-16'}>
|
||||
<PricingTable paths={paths} config={billingConfig} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n(PricingPage);
|
||||
204
app/home/(user)/_components/compare-packages-modal.tsx
Normal file
204
app/home/(user)/_components/compare-packages-modal.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
import { JSX } from 'react';
|
||||
|
||||
import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';
|
||||
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
|
||||
import { Check, X } from 'lucide-react';
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@kit/ui/dialog';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
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';
|
||||
|
||||
const dummyCards = [
|
||||
{
|
||||
titleKey: 'product:standard.label',
|
||||
price: 40,
|
||||
nrOfAnalyses: 4,
|
||||
tagColor: 'bg-cyan',
|
||||
},
|
||||
{
|
||||
titleKey: 'product:standardPlus.label',
|
||||
price: 85,
|
||||
nrOfAnalyses: 10,
|
||||
tagColor: 'bg-warning',
|
||||
},
|
||||
{
|
||||
titleKey: 'product:premium.label',
|
||||
price: 140,
|
||||
nrOfAnalyses: '12+',
|
||||
tagColor: 'bg-purple',
|
||||
},
|
||||
];
|
||||
|
||||
const dummyRows = [
|
||||
{
|
||||
analysisNameKey: 'product:clinicalBloodDraw.label',
|
||||
tooltipContentKey: 'product:clinicalBloodDraw.description',
|
||||
includedInStandard: 1,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
{
|
||||
analysisNameKey: 'product:crp.label',
|
||||
tooltipContentKey: 'product:crp.description',
|
||||
includedInStandard: 1,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
{
|
||||
analysisNameKey: 'product:ferritin.label',
|
||||
tooltipContentKey: 'product:ferritin.description',
|
||||
includedInStandard: 0,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
{
|
||||
analysisNameKey: 'product:vitaminD.label',
|
||||
tooltipContentKey: 'product:vitaminD.description',
|
||||
includedInStandard: 0,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
{
|
||||
analysisNameKey: 'product:glucose.label',
|
||||
tooltipContentKey: 'product:glucose.description',
|
||||
includedInStandard: 1,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
{
|
||||
analysisNameKey: 'product:alat.label',
|
||||
tooltipContentKey: 'product:alat.description',
|
||||
includedInStandard: 1,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
{
|
||||
analysisNameKey: 'product:ast.label',
|
||||
tooltipContentKey: 'product:ast.description',
|
||||
includedInStandard: 1,
|
||||
includedInStandardPlus: 1,
|
||||
includedInPremium: 1,
|
||||
},
|
||||
];
|
||||
|
||||
const CheckWithBackground = () => {
|
||||
return (
|
||||
<div className="bg-primary w-min rounded-full p-1 text-white">
|
||||
<Check className="size-3 stroke-2" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ComparePackagesModal = async ({
|
||||
triggerElement,
|
||||
}: {
|
||||
triggerElement: JSX.Element;
|
||||
}) => {
|
||||
const { t, language } = await createI18nServerInstance();
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>{triggerElement}</DialogTrigger>
|
||||
<DialogContent
|
||||
className="min-h-screen max-w-fit min-w-screen"
|
||||
customClose={
|
||||
<div className="inline-flex place-items-center-safe gap-1 align-middle">
|
||||
<p className="text-sm font-medium text-black">
|
||||
{t('common:close')}
|
||||
</p>
|
||||
<X className="text-black" />
|
||||
</div>
|
||||
}
|
||||
preventAutoFocus
|
||||
>
|
||||
<VisuallyHidden>
|
||||
<DialogTitle>{t('common:comparePackages')}</DialogTitle>
|
||||
</VisuallyHidden>
|
||||
<div className="m-auto">
|
||||
<div className="space-y-6 text-center">
|
||||
<h3>{t('product:healthPackageComparison.label')}</h3>
|
||||
<p className="text-muted-foreground mx-auto w-3/5 text-sm">
|
||||
{t('product:healthPackageComparison.description')}
|
||||
</p>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead></TableHead>
|
||||
{dummyCards.map(
|
||||
({ titleKey, price, nrOfAnalyses, tagColor }) => (
|
||||
<TableHead key={titleKey} className="py-2">
|
||||
<PackageHeader
|
||||
title={t(titleKey)}
|
||||
tagColor={tagColor}
|
||||
analysesNr={t('product:nrOfAnalyses', {
|
||||
nr: nrOfAnalyses,
|
||||
})}
|
||||
language={language}
|
||||
price={price}
|
||||
/>
|
||||
</TableHead>
|
||||
),
|
||||
)}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{dummyRows.map(
|
||||
(
|
||||
{
|
||||
analysisNameKey,
|
||||
tooltipContentKey,
|
||||
includedInStandard,
|
||||
includedInStandardPlus,
|
||||
includedInPremium,
|
||||
},
|
||||
index,
|
||||
) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell className="py-6">
|
||||
{t(analysisNameKey)}{' '}
|
||||
<InfoTooltip
|
||||
content={t(tooltipContentKey)}
|
||||
icon={<QuestionMarkCircledIcon />}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="center" className="py-6">
|
||||
{!!includedInStandard && <CheckWithBackground />}
|
||||
</TableCell>
|
||||
<TableCell align="center" className="py-6">
|
||||
{!!includedInStandardPlus && <CheckWithBackground />}
|
||||
</TableCell>
|
||||
<TableCell align="center" className="py-6">
|
||||
{!!includedInPremium && <CheckWithBackground />}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
),
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default withI18n(ComparePackagesModal);
|
||||
@@ -1,6 +1,5 @@
|
||||
|
||||
import { Trans } from '@kit/ui/trans';
|
||||
import { cn } from '@kit/ui/utils';
|
||||
|
||||
import { AppLogo } from '~/components/app-logo';
|
||||
import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
|
||||
@@ -18,7 +17,7 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
|
||||
|
||||
return (
|
||||
<div className={'flex w-full flex-1 items-center justify-between gap-3'}>
|
||||
<div className={cn('flex items-center', `w-[${SIDEBAR_WIDTH}]`)}>
|
||||
<div className={`flex items-center w-[${SIDEBAR_WIDTH}]`}>
|
||||
<AppLogo />
|
||||
|
||||
</div>
|
||||
|
||||
131
app/select-package/page.tsx
Normal file
131
app/select-package/page.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { CaretRightIcon } from '@radix-ui/react-icons';
|
||||
import { Scale } from 'lucide-react';
|
||||
|
||||
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 { 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';
|
||||
|
||||
export const generateMetadata = async () => {
|
||||
const { t } = await createI18nServerInstance();
|
||||
|
||||
return {
|
||||
title: t('marketing:pricing'),
|
||||
};
|
||||
};
|
||||
|
||||
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>
|
||||
<ComparePackagesModal
|
||||
triggerElement={
|
||||
<Button variant="secondary" className="gap-2">
|
||||
{t('marketing:comparePackages')}
|
||||
<Scale className="size-4 stroke-[1.5px]" />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{dummyCards.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>{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>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n(SelectPackagePage);
|
||||
31
components/package-header.tsx
Normal file
31
components/package-header.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { formatCurrency } from '@kit/shared/utils';
|
||||
import { Badge } from '@kit/ui/badge';
|
||||
import { cn } from '@kit/ui/utils';
|
||||
|
||||
export const PackageHeader = ({
|
||||
title,
|
||||
tagColor,
|
||||
analysesNr,
|
||||
language,
|
||||
price,
|
||||
}: {
|
||||
title: string;
|
||||
tagColor: string;
|
||||
analysesNr: string;
|
||||
language: string;
|
||||
price: string | number;
|
||||
}) => {
|
||||
return (
|
||||
<div className="space-y-1 text-center">
|
||||
<p className="font-medium">{title}</p>
|
||||
<h2>
|
||||
{formatCurrency({
|
||||
currencyCode: 'eur',
|
||||
locale: language,
|
||||
value: price,
|
||||
})}
|
||||
</h2>
|
||||
<Badge className={cn('text-xs', tagColor)}>{analysesNr}</Badge>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
31
components/ui/button-tooltip.tsx
Normal file
31
components/ui/button-tooltip.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Info } from 'lucide-react';
|
||||
|
||||
import { Button } from '@kit/ui/button';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@kit/ui/tooltip';
|
||||
|
||||
export function ButtonTooltip({
|
||||
content,
|
||||
className,
|
||||
}: {
|
||||
content?: string;
|
||||
className?: string;
|
||||
}) {
|
||||
if (!content) return null;
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button className={className} variant="outline" size="icon">
|
||||
<Info className="size-4 cursor-pointer" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{content}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,27 @@
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@kit/ui/tooltip";
|
||||
import { Info } from "lucide-react";
|
||||
import { JSX } from 'react';
|
||||
|
||||
export function InfoTooltip({ content }: { content?: string }) {
|
||||
import { Info } from 'lucide-react';
|
||||
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@kit/ui/tooltip';
|
||||
|
||||
export function InfoTooltip({
|
||||
content,
|
||||
icon,
|
||||
}: {
|
||||
content?: string;
|
||||
icon?: JSX.Element;
|
||||
}) {
|
||||
if (!content) return null;
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Info className="size-4 cursor-pointer" />
|
||||
{icon || <Info className="size-4 cursor-pointer" />}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{content}</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
@@ -13,6 +13,7 @@ const PathsSchema = z.object({
|
||||
}),
|
||||
app: z.object({
|
||||
home: z.string().min(1),
|
||||
selectPackage: z.string().min(1),
|
||||
booking: z.string().min(1),
|
||||
myOrders: z.string().min(1),
|
||||
analysisResults: z.string().min(1),
|
||||
@@ -53,13 +54,14 @@ const pathsConfig = PathsSchema.parse({
|
||||
accountMembers: `/home/[account]/members`,
|
||||
accountBillingReturn: `/home/[account]/billing/return`,
|
||||
joinTeam: '/join',
|
||||
selectPackage: '/select-package',
|
||||
// these routes are added as placeholders and can be changed when the pages are added
|
||||
booking: '/booking',
|
||||
myOrders: '/my-orders',
|
||||
analysisResults: '/analysis-results',
|
||||
orderAnalysisPackage: '/order-analysis-package',
|
||||
orderAnalysis: '/order-analysis',
|
||||
orderHealthAnalysis: '/order-health-analysis'
|
||||
orderHealthAnalysis: '/order-health-analysis',
|
||||
},
|
||||
} satisfies z.infer<typeof PathsSchema>);
|
||||
|
||||
|
||||
@@ -33,6 +33,7 @@ export const defaultI18nNamespaces = [
|
||||
'billing',
|
||||
'marketing',
|
||||
'dashboard',
|
||||
'product',
|
||||
];
|
||||
|
||||
/**
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
"@marsidev/react-turnstile": "^1.1.0",
|
||||
"@nosecone/next": "1.0.0-beta.7",
|
||||
"@radix-ui/react-icons": "^1.3.2",
|
||||
"@radix-ui/react-visually-hidden": "^1.2.3",
|
||||
"@supabase/ssr": "^0.6.1",
|
||||
"@supabase/supabase-js": "2.49.4",
|
||||
"@tanstack/react-query": "5.76.1",
|
||||
|
||||
@@ -1,519 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
import { ArrowRight, CheckCircle } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { z } from 'zod';
|
||||
|
||||
import {
|
||||
BillingConfig,
|
||||
type LineItemSchema,
|
||||
getPlanIntervals,
|
||||
getPrimaryLineItem,
|
||||
} from '@kit/billing';
|
||||
import { Badge } from '@kit/ui/badge';
|
||||
import { Button } from '@kit/ui/button';
|
||||
import { If } from '@kit/ui/if';
|
||||
import { Trans } from '@kit/ui/trans';
|
||||
import { cn } from '@kit/ui/utils';
|
||||
|
||||
import { LineItemDetails } from './line-item-details';
|
||||
import { PlanCostDisplay } from './plan-cost-display';
|
||||
|
||||
interface Paths {
|
||||
signUp: string;
|
||||
return: string;
|
||||
}
|
||||
|
||||
type Interval = 'month' | 'year';
|
||||
|
||||
export function PricingTable({
|
||||
config,
|
||||
paths,
|
||||
CheckoutButtonRenderer,
|
||||
redirectToCheckout = true,
|
||||
displayPlanDetails = true,
|
||||
alwaysDisplayMonthlyPrice = true,
|
||||
}: {
|
||||
config: BillingConfig;
|
||||
paths: Paths;
|
||||
displayPlanDetails?: boolean;
|
||||
alwaysDisplayMonthlyPrice?: boolean;
|
||||
redirectToCheckout?: boolean;
|
||||
|
||||
CheckoutButtonRenderer?: React.ComponentType<{
|
||||
planId: string;
|
||||
productId: string;
|
||||
highlighted?: boolean;
|
||||
}>;
|
||||
}) {
|
||||
const intervals = getPlanIntervals(config).filter(Boolean) as Interval[];
|
||||
const [interval, setInterval] = useState(intervals[0]!);
|
||||
|
||||
// Always filter out hidden products
|
||||
const visibleProducts = config.products.filter((product) => !product.hidden);
|
||||
|
||||
return (
|
||||
<div className={'flex flex-col space-y-8 xl:space-y-12'}>
|
||||
<div className={'flex justify-center'}>
|
||||
{intervals.length > 1 ? (
|
||||
<PlanIntervalSwitcher
|
||||
intervals={intervals}
|
||||
interval={interval}
|
||||
setInterval={setInterval}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
'flex flex-col items-start space-y-6 lg:space-y-0' +
|
||||
' justify-center lg:flex-row lg:space-x-4'
|
||||
}
|
||||
>
|
||||
{visibleProducts.map((product) => {
|
||||
const plan = product.plans.find((plan) => {
|
||||
if (plan.paymentType === 'recurring') {
|
||||
return plan.interval === interval;
|
||||
}
|
||||
|
||||
return plan;
|
||||
});
|
||||
|
||||
if (!plan) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const primaryLineItem = getPrimaryLineItem(config, plan.id);
|
||||
|
||||
if (!plan.custom && !primaryLineItem) {
|
||||
throw new Error(`Primary line item not found for plan ${plan.id}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<PricingItem
|
||||
selectable
|
||||
key={plan.id}
|
||||
plan={plan}
|
||||
redirectToCheckout={redirectToCheckout}
|
||||
primaryLineItem={primaryLineItem}
|
||||
product={product}
|
||||
paths={paths}
|
||||
displayPlanDetails={displayPlanDetails}
|
||||
alwaysDisplayMonthlyPrice={alwaysDisplayMonthlyPrice}
|
||||
CheckoutButton={CheckoutButtonRenderer}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PricingItem(
|
||||
props: React.PropsWithChildren<{
|
||||
className?: string;
|
||||
displayPlanDetails: boolean;
|
||||
|
||||
paths: Paths;
|
||||
|
||||
selectable: boolean;
|
||||
|
||||
primaryLineItem: z.infer<typeof LineItemSchema> | undefined;
|
||||
|
||||
redirectToCheckout?: boolean;
|
||||
alwaysDisplayMonthlyPrice?: boolean;
|
||||
|
||||
plan: {
|
||||
id: string;
|
||||
lineItems: z.infer<typeof LineItemSchema>[];
|
||||
interval?: Interval;
|
||||
name?: string;
|
||||
href?: string;
|
||||
label?: string;
|
||||
custom?: boolean;
|
||||
};
|
||||
|
||||
CheckoutButton?: React.ComponentType<{
|
||||
planId: string;
|
||||
productId: string;
|
||||
highlighted?: boolean;
|
||||
}>;
|
||||
|
||||
product: {
|
||||
id: string;
|
||||
name: string;
|
||||
currency: string;
|
||||
description: string;
|
||||
badge?: string;
|
||||
highlighted?: boolean;
|
||||
features: string[];
|
||||
};
|
||||
}>,
|
||||
) {
|
||||
const highlighted = props.product.highlighted ?? false;
|
||||
const lineItem = props.primaryLineItem!;
|
||||
const isCustom = props.plan.custom ?? false;
|
||||
|
||||
// we exclude flat line items from the details since
|
||||
// it doesn't need further explanation
|
||||
const lineItemsToDisplay = props.plan.lineItems.filter((item) => {
|
||||
return item.type !== 'flat';
|
||||
});
|
||||
|
||||
const interval = props.plan.interval as Interval;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-cy={'subscription-plan'}
|
||||
className={cn(
|
||||
props.className,
|
||||
`s-full relative flex flex-1 grow flex-col items-stretch justify-between self-stretch rounded-lg border px-6 py-5 lg:w-4/12 xl:max-w-[20rem]`,
|
||||
{
|
||||
['border-primary']: highlighted,
|
||||
['border-border']: !highlighted,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<If condition={props.product.badge}>
|
||||
<div className={'absolute -top-2.5 left-0 flex w-full justify-center'}>
|
||||
<Badge
|
||||
className={highlighted ? '' : 'bg-background'}
|
||||
variant={highlighted ? 'default' : 'outline'}
|
||||
>
|
||||
<span>
|
||||
<Trans
|
||||
i18nKey={props.product.badge}
|
||||
defaults={props.product.badge}
|
||||
/>
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</If>
|
||||
|
||||
<div className={'flex flex-col gap-y-5'}>
|
||||
<div className={'flex flex-col gap-y-1'}>
|
||||
<div className={'flex items-center space-x-6'}>
|
||||
<b
|
||||
className={
|
||||
'text-secondary-foreground font-heading text-xl font-medium tracking-tight'
|
||||
}
|
||||
>
|
||||
<Trans
|
||||
i18nKey={props.product.name}
|
||||
defaults={props.product.name}
|
||||
/>
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={'mt-6 flex flex-col gap-y-1'}>
|
||||
<Price
|
||||
isMonthlyPrice={props.alwaysDisplayMonthlyPrice}
|
||||
displayBillingPeriod={!props.plan.label}
|
||||
>
|
||||
<If
|
||||
condition={!isCustom}
|
||||
fallback={
|
||||
<Trans i18nKey={props.plan.label} defaults={props.plan.label} />
|
||||
}
|
||||
>
|
||||
<PlanCostDisplay
|
||||
primaryLineItem={lineItem}
|
||||
currencyCode={props.product.currency}
|
||||
interval={interval}
|
||||
alwaysDisplayMonthlyPrice={props.alwaysDisplayMonthlyPrice}
|
||||
/>
|
||||
</If>
|
||||
</Price>
|
||||
|
||||
<If condition={props.plan.name}>
|
||||
<span
|
||||
className={cn(
|
||||
`animate-in slide-in-from-left-4 fade-in text-muted-foreground flex items-center gap-x-1 text-xs capitalize`,
|
||||
)}
|
||||
>
|
||||
<span>
|
||||
<If
|
||||
condition={props.plan.interval}
|
||||
fallback={<Trans i18nKey={'billing:lifetime'} />}
|
||||
>
|
||||
{(interval) => (
|
||||
<Trans i18nKey={`billing:billingInterval.${interval}`} />
|
||||
)}
|
||||
</If>
|
||||
</span>
|
||||
|
||||
<If condition={lineItem && lineItem?.type !== 'flat'}>
|
||||
<span>/</span>
|
||||
|
||||
<span
|
||||
className={cn(
|
||||
`animate-in slide-in-from-left-4 fade-in text-sm capitalize`,
|
||||
)}
|
||||
>
|
||||
<If condition={lineItem?.type === 'per_seat'}>
|
||||
<Trans i18nKey={'billing:perTeamMember'} />
|
||||
</If>
|
||||
|
||||
<If condition={lineItem?.unit}>
|
||||
<Trans
|
||||
i18nKey={'billing:perUnit'}
|
||||
values={{
|
||||
unit: lineItem?.unit,
|
||||
}}
|
||||
/>
|
||||
</If>
|
||||
</span>
|
||||
</If>
|
||||
</span>
|
||||
</If>
|
||||
</div>
|
||||
|
||||
<If condition={props.selectable}>
|
||||
<If
|
||||
condition={props.plan.id && props.CheckoutButton}
|
||||
fallback={
|
||||
<DefaultCheckoutButton
|
||||
paths={props.paths}
|
||||
product={props.product}
|
||||
highlighted={highlighted}
|
||||
plan={props.plan}
|
||||
redirectToCheckout={props.redirectToCheckout}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{(CheckoutButton) => (
|
||||
<CheckoutButton
|
||||
highlighted={highlighted}
|
||||
planId={props.plan.id}
|
||||
productId={props.product.id}
|
||||
/>
|
||||
)}
|
||||
</If>
|
||||
</If>
|
||||
|
||||
<span className={cn(`text-muted-foreground text-base tracking-tight`)}>
|
||||
<Trans
|
||||
i18nKey={props.product.description}
|
||||
defaults={props.product.description}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<div className={'h-px w-full border border-dashed'} />
|
||||
|
||||
<div className={'flex flex-col'}>
|
||||
<FeaturesList
|
||||
highlighted={highlighted}
|
||||
features={props.product.features}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<If condition={props.displayPlanDetails && lineItemsToDisplay.length}>
|
||||
<div className={'h-px w-full border border-dashed'} />
|
||||
|
||||
<div className={'flex flex-col space-y-2'}>
|
||||
<h6 className={'text-sm font-semibold'}>
|
||||
<Trans i18nKey={'billing:detailsLabel'} />
|
||||
</h6>
|
||||
|
||||
<LineItemDetails
|
||||
selectedInterval={props.plan.interval}
|
||||
currency={props.product.currency}
|
||||
lineItems={lineItemsToDisplay}
|
||||
/>
|
||||
</div>
|
||||
</If>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeaturesList(
|
||||
props: React.PropsWithChildren<{
|
||||
features: string[];
|
||||
highlighted: boolean;
|
||||
}>,
|
||||
) {
|
||||
return (
|
||||
<ul className={'flex flex-col gap-1'}>
|
||||
{props.features.map((feature) => {
|
||||
return (
|
||||
<ListItem highlighted={props.highlighted} key={feature}>
|
||||
<Trans i18nKey={feature} defaults={feature} />
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
function Price({
|
||||
children,
|
||||
isMonthlyPrice = true,
|
||||
displayBillingPeriod = true,
|
||||
}: React.PropsWithChildren<{
|
||||
isMonthlyPrice?: boolean;
|
||||
displayBillingPeriod?: boolean;
|
||||
}>) {
|
||||
return (
|
||||
<div
|
||||
className={`animate-in slide-in-from-left-4 fade-in flex items-end gap-1 duration-500`}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
'font-heading flex items-center text-4xl font-medium tracking-tighter'
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
|
||||
<If condition={isMonthlyPrice && displayBillingPeriod}>
|
||||
<span className={'text-muted-foreground text-sm leading-loose'}>
|
||||
<span>/</span>
|
||||
|
||||
<Trans i18nKey={'billing:perMonth'} />
|
||||
</span>
|
||||
</If>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ListItem({
|
||||
children,
|
||||
highlighted,
|
||||
}: React.PropsWithChildren<{
|
||||
highlighted: boolean;
|
||||
}>) {
|
||||
return (
|
||||
<li className={'flex items-center gap-x-2.5'}>
|
||||
<CheckCircle
|
||||
className={cn('h-4 min-h-4 w-4 min-w-4', {
|
||||
'text-secondary-foreground': highlighted,
|
||||
'text-muted-foreground': !highlighted,
|
||||
})}
|
||||
/>
|
||||
|
||||
<span
|
||||
className={cn('text-sm', {
|
||||
'text-muted-foreground': !highlighted,
|
||||
'text-secondary-foreground': highlighted,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function PlanIntervalSwitcher(
|
||||
props: React.PropsWithChildren<{
|
||||
intervals: Interval[];
|
||||
interval: Interval;
|
||||
setInterval: (interval: Interval) => void;
|
||||
}>,
|
||||
) {
|
||||
return (
|
||||
<div className={'flex gap-x-1 rounded-full border p-1.5'}>
|
||||
{props.intervals.map((plan, index) => {
|
||||
const selected = plan === props.interval;
|
||||
|
||||
const className = cn(
|
||||
'animate-in fade-in !outline-hidden rounded-full transition-all focus:!ring-0',
|
||||
{
|
||||
'border-r-transparent': index === 0,
|
||||
['hover:text-primary text-muted-foreground']: !selected,
|
||||
['cursor-default font-semibold']: selected,
|
||||
['hover:bg-initial']: !selected,
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={plan}
|
||||
size={'sm'}
|
||||
variant={selected ? 'default' : 'ghost'}
|
||||
className={className}
|
||||
onClick={() => props.setInterval(plan)}
|
||||
>
|
||||
<span className={'flex items-center'}>
|
||||
<CheckCircle
|
||||
className={cn('animate-in fade-in zoom-in-95 h-3.5', {
|
||||
hidden: !selected,
|
||||
'slide-in-from-left-4': index === 0,
|
||||
'slide-in-from-right-4': index === props.intervals.length - 1,
|
||||
})}
|
||||
/>
|
||||
|
||||
<span className={'capitalize'}>
|
||||
<Trans i18nKey={`common:billingInterval.${plan}`} />
|
||||
</span>
|
||||
</span>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DefaultCheckoutButton(
|
||||
props: React.PropsWithChildren<{
|
||||
plan: {
|
||||
id: string;
|
||||
name?: string | undefined;
|
||||
href?: string;
|
||||
buttonLabel?: string;
|
||||
};
|
||||
|
||||
product: {
|
||||
name: string;
|
||||
};
|
||||
|
||||
paths: Paths;
|
||||
redirectToCheckout?: boolean;
|
||||
|
||||
highlighted?: boolean;
|
||||
}>,
|
||||
) {
|
||||
const { t } = useTranslation('billing');
|
||||
|
||||
const signUpPath = props.paths.signUp;
|
||||
|
||||
const searchParams = new URLSearchParams({
|
||||
next: props.paths.return,
|
||||
plan: props.plan.id,
|
||||
redirectToCheckout: props.redirectToCheckout ? 'true' : 'false',
|
||||
});
|
||||
|
||||
const linkHref =
|
||||
props.plan.href ?? `${signUpPath}?${searchParams.toString()}`;
|
||||
|
||||
const label = props.plan.buttonLabel ?? 'common:getStartedWithPlan';
|
||||
|
||||
return (
|
||||
<Link className={'w-full'} href={linkHref}>
|
||||
<Button
|
||||
size={'lg'}
|
||||
className={'h-12 w-full rounded-lg'}
|
||||
variant={props.highlighted ? 'default' : 'secondary'}
|
||||
>
|
||||
<span className={'text-base font-medium tracking-tight'}>
|
||||
<Trans
|
||||
i18nKey={label}
|
||||
defaults={label}
|
||||
values={{
|
||||
plan: t(props.product.name, {
|
||||
defaultValue: props.product.name,
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<ArrowRight className={'ml-2 h-4'} />
|
||||
</Button>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -32,7 +32,7 @@ export const UpdateAccountSuccessNotification = ({
|
||||
descriptionKey="account:updateAccount:successDescription"
|
||||
buttonProps={{
|
||||
buttonTitleKey: 'account:updateAccount:successButton',
|
||||
href: pathsConfig.app.home,
|
||||
href: pathsConfig.app.selectPackage,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -75,7 +75,7 @@ function PageWithHeader(props: PageProps) {
|
||||
const { Navigation, Children, MobileNavigation } = getSlotsFromPage(props);
|
||||
|
||||
return (
|
||||
<div className={cn('flex h-screen flex-1 flex-col z-1000', props.className)}>
|
||||
<div className={cn('flex h-screen flex-1 flex-col z-900', props.className)}>
|
||||
<div
|
||||
className={
|
||||
props.contentContainerClassName ?? 'flex flex-1 flex-col space-y-4'
|
||||
|
||||
@@ -7,12 +7,12 @@ import type { VariantProps } from 'class-variance-authority';
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
const buttonVariants = cva(
|
||||
'focus-visible:ring-ring gap-1 inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
|
||||
'inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
'bg-primary text-primary-foreground font-medium hover:bg-primary/90 shadow-xs',
|
||||
'bg-primary text-primary-foreground hover:bg-primary/90 font-medium shadow-xs',
|
||||
destructive:
|
||||
'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-xs',
|
||||
outline:
|
||||
@@ -23,7 +23,7 @@ const buttonVariants = cva(
|
||||
link: 'decoration-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: 'h-10 mt-0 py-2 px-8',
|
||||
default: 'mt-0 h-10 px-8 py-2',
|
||||
sm: 'h-8 rounded-md px-3 text-xs',
|
||||
lg: 'h-10 rounded-md px-8',
|
||||
icon: 'h-9 w-9',
|
||||
|
||||
@@ -20,7 +20,7 @@ const DialogOverlay: React.FC<
|
||||
> = ({ className, ...props }) => (
|
||||
<DialogPrimitive.Overlay
|
||||
className={cn(
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/30',
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-1000 bg-black/30',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -29,25 +29,39 @@ const DialogOverlay: React.FC<
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||
|
||||
const DialogContent: React.FC<
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
> = ({ className, children, ...props }) => (
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
|
||||
customClose?: React.JSX.Element;
|
||||
preventAutoFocus?: boolean;
|
||||
}
|
||||
> = ({ className, children, customClose, preventAutoFocus, ...props }) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
className={cn(
|
||||
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
|
||||
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-1000 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
|
||||
className,
|
||||
)}
|
||||
onOpenAutoFocus={
|
||||
preventAutoFocus ? (e) => e.preventDefault() : props.onOpenAutoFocus
|
||||
}
|
||||
onCloseAutoFocus={
|
||||
preventAutoFocus ? (e) => e.preventDefault() : props.onOpenAutoFocus
|
||||
}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||
<Cross2Icon className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs transition-opacity hover:opacity-70 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||
{customClose || (
|
||||
<>
|
||||
<Cross2Icon className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</>
|
||||
)}
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
);
|
||||
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||
|
||||
const DialogHeader = ({
|
||||
|
||||
@@ -6,8 +6,18 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
||||
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider;
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delayDuration={delayDuration}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const Tooltip = TooltipPrimitive.Root;
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger;
|
||||
|
||||
5
pnpm-lock.yaml
generated
5
pnpm-lock.yaml
generated
@@ -83,6 +83,9 @@ importers:
|
||||
'@radix-ui/react-icons':
|
||||
specifier: ^1.3.2
|
||||
version: 1.3.2(react@19.1.0)
|
||||
'@radix-ui/react-visually-hidden':
|
||||
specifier: ^1.2.3
|
||||
version: 1.2.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@supabase/ssr':
|
||||
specifier: ^0.6.1
|
||||
version: 0.6.1(@supabase/supabase-js@2.49.4)
|
||||
@@ -13116,7 +13119,7 @@ snapshots:
|
||||
|
||||
jest-worker@27.5.1:
|
||||
dependencies:
|
||||
'@types/node': 24.0.3
|
||||
'@types/node': 22.15.32
|
||||
merge-stream: 2.0.0
|
||||
supports-color: 8.1.1
|
||||
|
||||
|
||||
BIN
public/assets/card-image.png
Normal file
BIN
public/assets/card-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
@@ -17,6 +17,7 @@
|
||||
"imageInputLabel": "Click here to upload an image",
|
||||
"cancel": "Cancel",
|
||||
"clear": "Clear",
|
||||
"close": "Close",
|
||||
"notFound": "Not Found",
|
||||
"backToHomePage": "Back to Home Page",
|
||||
"goBack": "Go Back",
|
||||
@@ -59,6 +60,10 @@
|
||||
"shoppingCart": "Shopping cart",
|
||||
"search": "Search{{end}}",
|
||||
"myActions": "My actions",
|
||||
"healthPackageComparison": {
|
||||
"label": "Health package comparison",
|
||||
"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": {
|
||||
"home": "Home",
|
||||
"overview": "Overview",
|
||||
|
||||
@@ -36,5 +36,9 @@
|
||||
"contactErrorDescription": "An error occurred while sending your message. Please try again later",
|
||||
"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"
|
||||
}
|
||||
"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"
|
||||
}
|
||||
43
public/locales/en/product.json
Normal file
43
public/locales/en/product.json
Normal file
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"standard": {
|
||||
"label": "Standard",
|
||||
"description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
|
||||
},
|
||||
"standardPlus": {
|
||||
"label": "Standard +",
|
||||
"description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
|
||||
},
|
||||
"premium": {
|
||||
"label": "Premium",
|
||||
"description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
|
||||
},
|
||||
"nrOfAnalyses": "{{nr}} analyses",
|
||||
"clinicalBloodDraw": {
|
||||
"label": "Kliiniline vereanalüüs",
|
||||
"description": "Pending"
|
||||
},
|
||||
"crp": {
|
||||
"label": "C-reaktiivne valk (CRP)",
|
||||
"description": "Pending"
|
||||
},
|
||||
"ferritin": {
|
||||
"label": "Ferritiin",
|
||||
"description": "Pending"
|
||||
},
|
||||
"vitaminD": {
|
||||
"label": "D-vitamiin",
|
||||
"description": "Pending"
|
||||
},
|
||||
"glucose": {
|
||||
"label": "Glükoos",
|
||||
"description": "Pending"
|
||||
},
|
||||
"alat": {
|
||||
"label": "Alaniini aminotransferaas",
|
||||
"description": "Pending"
|
||||
},
|
||||
"ast": {
|
||||
"label": "Aspartaadi aminotransferaas",
|
||||
"description": "Pending"
|
||||
}
|
||||
}
|
||||
@@ -17,6 +17,7 @@
|
||||
"imageInputLabel": "Click here to upload an image",
|
||||
"cancel": "Cancel",
|
||||
"clear": "Clear",
|
||||
"close": "Sulge",
|
||||
"notFound": "Not Found",
|
||||
"backToHomePage": "Back to Home Page",
|
||||
"goBack": "Tagasi",
|
||||
@@ -59,6 +60,10 @@
|
||||
"shoppingCart": "Ostukorv",
|
||||
"search": "Otsi{{end}}",
|
||||
"myActions": "Minu toimingud",
|
||||
"healthPackageComparison": {
|
||||
"label": "Tervisepakketide 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": {
|
||||
"home": "Home",
|
||||
"overview": "Ülevaade",
|
||||
|
||||
@@ -36,5 +36,9 @@
|
||||
"contactErrorDescription": "An error occurred while sending your message. Please try again later",
|
||||
"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"
|
||||
}
|
||||
"heroSubtitle": "Lihtne, mugav ja kiire ülevaade oma tervisest",
|
||||
"selectPackage": "Vali pakett",
|
||||
"selectThisPackage": "Vali see pakett",
|
||||
"comparePackages": "Võrdle pakette",
|
||||
"notInterestedInAudit": "Ei soovi hetkel terviseauditit"
|
||||
}
|
||||
43
public/locales/et/product.json
Normal file
43
public/locales/et/product.json
Normal file
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"standard": {
|
||||
"label": "Standard",
|
||||
"description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
|
||||
},
|
||||
"standardPlus": {
|
||||
"label": "Standard +",
|
||||
"description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
|
||||
},
|
||||
"premium": {
|
||||
"label": "Premium",
|
||||
"description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
|
||||
},
|
||||
"nrOfAnalyses": "{{nr}} analüüsi",
|
||||
"clinicalBloodDraw": {
|
||||
"label": "Kliiniline vereanalüüs",
|
||||
"description": "Pending"
|
||||
},
|
||||
"crp": {
|
||||
"label": "C-reaktiivne valk (CRP)",
|
||||
"description": "Pending"
|
||||
},
|
||||
"ferritin": {
|
||||
"label": "Ferritiin",
|
||||
"description": "Pending"
|
||||
},
|
||||
"vitaminD": {
|
||||
"label": "D-vitamiin",
|
||||
"description": "Pending"
|
||||
},
|
||||
"glucose": {
|
||||
"label": "Glükoos",
|
||||
"description": "Pending"
|
||||
},
|
||||
"alat": {
|
||||
"label": "Alaniini aminotransferaas",
|
||||
"description": "Pending"
|
||||
},
|
||||
"ast": {
|
||||
"label": "Aspartaadi aminotransferaas",
|
||||
"description": "Pending"
|
||||
}
|
||||
}
|
||||
@@ -17,6 +17,7 @@
|
||||
"imageInputLabel": "Click here to upload an image",
|
||||
"cancel": "Cancel",
|
||||
"clear": "Clear",
|
||||
"close": "Close",
|
||||
"notFound": "Not Found",
|
||||
"backToHomePage": "Back to Home Page",
|
||||
"goBack": "Go Back",
|
||||
@@ -59,6 +60,10 @@
|
||||
"shoppingCart": "Shopping cart",
|
||||
"search": "Search{{end}}",
|
||||
"myActions": "My actions",
|
||||
"healthPackageComparison": {
|
||||
"label": "Health package comparison",
|
||||
"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": {
|
||||
"home": "Home",
|
||||
"overview": "Overview",
|
||||
|
||||
@@ -36,5 +36,9 @@
|
||||
"contactErrorDescription": "An error occurred while sending your message. Please try again later",
|
||||
"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"
|
||||
}
|
||||
"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"
|
||||
}
|
||||
43
public/locales/ru/product.json
Normal file
43
public/locales/ru/product.json
Normal file
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"standard": {
|
||||
"label": "Standard",
|
||||
"description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
|
||||
},
|
||||
"standardPlus": {
|
||||
"label": "Standard +",
|
||||
"description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
|
||||
},
|
||||
"premium": {
|
||||
"label": "Premium",
|
||||
"description": "Sobib, kui soovid lisaks peamistele tervisenäitajatele ülevaadet, kas organismis on olulisemaid vitamiine ja mineraalaineid piisavalt."
|
||||
},
|
||||
"nrOfAnalyses": "{{nr}} analyses",
|
||||
"clinicalBloodDraw": {
|
||||
"label": "Kliiniline vereanalüüs",
|
||||
"description": "Pending"
|
||||
},
|
||||
"crp": {
|
||||
"label": "C-reaktiivne valk (CRP)",
|
||||
"description": "Pending"
|
||||
},
|
||||
"ferritin": {
|
||||
"label": "Ferritiin",
|
||||
"description": "Pending"
|
||||
},
|
||||
"vitaminD": {
|
||||
"label": "D-vitamiin",
|
||||
"description": "Pending"
|
||||
},
|
||||
"glucose": {
|
||||
"label": "Glükoos",
|
||||
"description": "Pending"
|
||||
},
|
||||
"alat": {
|
||||
"label": "Alaniini aminotransferaas",
|
||||
"description": "Pending"
|
||||
},
|
||||
"ast": {
|
||||
"label": "Aspartaadi aminotransferaas",
|
||||
"description": "Pending"
|
||||
}
|
||||
}
|
||||
@@ -52,6 +52,9 @@
|
||||
--cyan: hsla(189, 94%, 43%, 1);
|
||||
--color-cyan: var(--cyan);
|
||||
|
||||
--purple: hsla(292, 84%, 61%, 1);
|
||||
--color-purple: var(--purple);
|
||||
|
||||
/* text colors */
|
||||
--color-text-foreground: var(--foreground);
|
||||
--color-text-primary: var(--primary);
|
||||
|
||||
Reference in New Issue
Block a user