mirror of
https://github.com/logto-io/logto.git
synced 2025-01-06 20:40:08 -05:00
chore(phrases): apply title-cased plan name for tenant plan selection button (#4276)
This commit is contained in:
parent
40560b7a62
commit
7ce014d033
4 changed files with 19 additions and 7 deletions
|
@ -114,6 +114,7 @@
|
|||
"remark-gfm": "^3.0.1",
|
||||
"stylelint": "^15.0.0",
|
||||
"swr": "^2.2.0",
|
||||
"titleize": "^3.0.0",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"zod": "^3.20.2"
|
||||
|
|
|
@ -109,7 +109,9 @@ function PlanCardItem({ plan, onSelect }: Props) {
|
|||
<Button
|
||||
title={
|
||||
<DangerousRaw>
|
||||
<Trans components={{ name: <PlanName name={planName} /> }}>{t('select_plan')}</Trans>
|
||||
<Trans components={{ name: <PlanName isTitleCase name={planName} /> }}>
|
||||
{t('select_plan')}
|
||||
</Trans>
|
||||
</DangerousRaw>
|
||||
}
|
||||
disabled={isFreePlan && isFreeTenantExceeded}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { type TFuncKey } from 'i18next';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import titleize from 'titleize';
|
||||
|
||||
import DynamicT from '@/ds-components/DynamicT';
|
||||
import { ReservedPlanName } from '@/types/subscriptions';
|
||||
|
||||
const registeredPlanNamePhraseMap: Record<
|
||||
|
@ -16,19 +17,19 @@ const registeredPlanNamePhraseMap: Record<
|
|||
|
||||
type Props = {
|
||||
name: string;
|
||||
isTitleCase?: boolean;
|
||||
};
|
||||
|
||||
function PlanName({ name }: Props) {
|
||||
function PlanName({ name, isTitleCase = false }: Props) {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.subscription' });
|
||||
const planNamePhrase = registeredPlanNamePhraseMap[name];
|
||||
|
||||
/**
|
||||
* Note: fallback to the plan name if the phrase is not registered.
|
||||
*/
|
||||
if (!planNamePhrase) {
|
||||
return <span>{name}</span>;
|
||||
}
|
||||
const planName = planNamePhrase ? String(t(planNamePhrase)) : name;
|
||||
|
||||
return <DynamicT forKey={`subscription.${planNamePhrase}`} />;
|
||||
return <span>{isTitleCase ? titleize(planName) : planName}</span>;
|
||||
}
|
||||
|
||||
export default PlanName;
|
||||
|
|
|
@ -3018,6 +3018,9 @@ importers:
|
|||
swr:
|
||||
specifier: ^2.2.0
|
||||
version: 2.2.0(react@18.2.0)
|
||||
titleize:
|
||||
specifier: ^3.0.0
|
||||
version: 3.0.0
|
||||
tslib:
|
||||
specifier: ^2.4.1
|
||||
version: 2.4.1
|
||||
|
@ -19723,6 +19726,11 @@ packages:
|
|||
resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
|
||||
dev: true
|
||||
|
||||
/titleize@3.0.0:
|
||||
resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
|
||||
engines: {node: '>=12'}
|
||||
dev: true
|
||||
|
||||
/tmp@0.0.33:
|
||||
resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
|
||||
engines: {node: '>=0.6.0'}
|
||||
|
|
Loading…
Reference in a new issue