zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update UI and translations in billing component

Browse Source 
The pricing-table.tsx and plan-picker.tsx components under billing have been updated to improve UI spacing, layout, and text translations. The revisions allow for better localization through the use of the useTranslation hook from react-i18next. Layout changes include adjustment in spacing and removal of Sparkles icon. Certain product details are refactored to use translation keys for easier language support.
This commit is contained in:
giancarlo
2024-04-22 13:52:40 +08:00
parent 7020e21193
commit 0796aaeb81
2 changed files with 44 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
packages/billing/gateway/src/components/plan-picker.tsx
View File

@@ -265,16 +265,38 @@ export function PlanPicker(
'flex flex-col justify-center space-y-2'
}
>
<span className="font-semibold">
<Trans
i18nKey={`billing:products.${product.id}.name`}
defaults={product.name}
/>
</span>
<div className={'flex items-center space-x-2.5'}>
<span className="font-semibold">
<Trans
i18nKey={`billing:plans.${product.id}.name`}
defaults={product.name}
/>
</span>
<If
condition={
plan.trialDays && props.canStartTrial
}
>
<div>
<Badge
className={'px-1 py-0.5 text-xs'}
variant={'success'}
>
<Trans
i18nKey={`billing:trialPeriod`}
values={{
period: plan.trialDays,
}}
/>
</Badge>
</div>
</If>
</div>
<span className={'text-muted-foreground'}>
<Trans
i18nKey={`billing:products.${product.id}.description`}
i18nKey={`billing:plans.${product.id}.description`}
defaults={product.description}
/>
</span>
@@ -285,23 +307,6 @@ export function PlanPicker(
'flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0 lg:text-right'
}
>
<If
condition={
plan.trialDays && props.canStartTrial
}
>
<div>
<Badge variant={'success'}>
<Trans
i18nKey={`billing:trialPeriod`}
values={{
period: plan.trialDays,
}}
/>
</Badge>
</div>
</If>
<div>
<Price key={plan.id}>
<span>
@@ -416,7 +421,7 @@ function PlanDetails({
<Heading level={5}>
<b>
<Trans
i18nKey={`billing:products.${selectedProduct.id}.name`}
i18nKey={`billing:plans.${selectedProduct.id}.name`}
defaults={selectedProduct.name}
/>
</b>{' '}
@@ -428,7 +433,7 @@ function PlanDetails({
<p>
<span className={'text-muted-foreground'}>
<Trans
i18nKey={`billing:products.${selectedProduct.id}.description`}
i18nKey={`billing:plans.${selectedProduct.id}.description`}
defaults={selectedProduct.description}
/>
</span>
@@ -464,7 +469,7 @@ function PlanDetails({
<CheckCircle className={'h-4 text-green-500'} />
<span className={'text-secondary-foreground'}>
<Trans i18nKey={`billing:features.${item}`} defaults={item} />
<Trans i18nKey={item} defaults={item} />
</span>
</div>
);