0
Fork 0
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 ()

This commit is contained in:
Xiao Yijun 2023-08-02 20:51:25 +08:00 committed by GitHub
parent 40560b7a62
commit 7ce014d033
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 7 deletions
packages/console
package.json
src/components
CreateTenantModal/SelectTenantPlanModal/PlanCardItem
PlanName
pnpm-lock.yaml

View file

@ -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"

View file

@ -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}

View file

@ -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;

View file

@ -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'}