Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

refactor(console): fix onboarding about page (#3381)

Browse source
This commit is contained in:
Xiao Yijun 2023-03-13 19:20:43 +08:00 committed by GitHub
parent d2769823da
commit 8e12abea4f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 63 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
packages/console/src/onboarding/pages/About/index.tsx
View file

@ -15,7 +15,7 @@ import * as pageLayout from '@/onboarding/scss/layout.module.scss';
import ActionBar from '../../components/ActionBar';
import { CardSelector, MultiCardSelector } from '../../components/CardSelector';
import type { Questionnaire } from '../../types';
import { OnboardingPage } from '../../types';
import { Project, OnboardingPage } from '../../types';
import { getOnboardingPage } from '../../utils';
import * as styles from './index.module.scss';
import { titleOptions, companySizeOptions, reasonOptions } from './options';
@ -29,6 +29,8 @@ const About = () => {
update,
} = useUserOnboardingData();
const isCompanyProject = questionnaire?.project === Project.Company;
const { control, register, handleSubmit, reset } = useForm<Questionnaire>({
mode: 'onChange',
});
@ -58,50 +60,59 @@ const About = () => {
<div className={styles.title}>{t('cloud.about.title')}</div>
<div className={styles.description}>{t('cloud.about.description')}</div>
<form className={styles.form}>
<FormField title="cloud.about.title_field" headlineClassName={styles.cardFieldHeadline}>
<Controller
control={control}
name="titles"
render={({ field: { onChange, value } }) => (
<MultiCardSelector
className={styles.titleSelector}
optionClassName={styles.option}
value={value ?? []}
options={titleOptions}
onChange={(value) => {
onChange(value.length === 0 ? undefined : value);
}}
{isCompanyProject && (
<>
<FormField
isMultiple
title="cloud.about.title_field"
headlineClassName={styles.cardFieldHeadline}
>
<Controller
control={control}
name="titles"
render={({ field: { onChange, value } }) => (
<MultiCardSelector
className={styles.titleSelector}
optionClassName={styles.option}
value={value ?? []}
options={titleOptions}
onChange={(value) => {
onChange(value.length === 0 ? undefined : value);
}}
/>
)}
/>
)}
/>
</FormField>
<FormField title="cloud.about.company_name_field">
<TextInput
placeholder={t('cloud.about.company_name_placeholder')}
{...register('companyName')}
/>
</FormField>
<FormField
title="cloud.about.company_size_field"
headlineClassName={styles.cardFieldHeadline}
>
<Controller
control={control}
name="companySize"
render={({ field: { onChange, value, name } }) => (
<CardSelector
name={name}
value={value ?? ''}
options={companySizeOptions}
optionClassName={styles.option}
onChange={(value) => {
onChange(conditional(value && value));
}}
</FormField>
<FormField title="cloud.about.company_name_field">
<TextInput
placeholder={t('cloud.about.company_name_placeholder')}
{...register('companyName')}
/>
)}
/>
</FormField>
</FormField>
<FormField
title="cloud.about.company_size_field"
headlineClassName={styles.cardFieldHeadline}
>
<Controller
control={control}
name="companySize"
render={({ field: { onChange, value, name } }) => (
<CardSelector
name={name}
value={value ?? ''}
options={companySizeOptions}
optionClassName={styles.option}
onChange={(value) => {
onChange(conditional(value && value));
}}
/>
)}
/>
</FormField>
</>
)}
<FormField
isMultiple
title="cloud.about.reason_field"
headlineClassName={styles.cardFieldHeadline}
>

2
packages/console/src/onboarding/pages/About/options.tsx
View file

@ -16,7 +16,7 @@ export const titleOptions: MultiCardSelectorOption[] = [
export const companySizeOptions: CardSelectorOption[] = [
{ title: 'cloud.about.company_options.size_1', value: CompanySize.Scale1 },
{ title: 'cloud.about.company_options.size_1_49', value: CompanySize.Scale2 },
{ title: 'cloud.about.company_options.size_2_49', value: CompanySize.Scale2 },
{ title: 'cloud.about.company_options.size_50_199', value: CompanySize.Scale3 },
{ title: 'cloud.about.company_options.size_200_999', value: CompanySize.Scale4 },
{ title: 'cloud.about.company_options.size_1000_plus', value: CompanySize.Scale5 },

2
packages/console/src/onboarding/types.ts
View file

@ -33,7 +33,7 @@ export enum Title {
export enum CompanySize {
Scale1 = '1',
Scale2 = '1-49',
Scale2 = '2-49',
Scale3 = '50-199',
Scale4 = '200-999',
Scale5 = '1000+',

2
packages/phrases/src/locales/de/translation/admin-console/cloud.ts
View file

@ -32,7 +32,7 @@ const cloud = {
company_size_field: 'How’s your company size?', // UNTRANSLATED
company_options: {
size_1: '1', // UNTRANSLATED
size_1_49: '1-49', // UNTRANSLATED
size_2_49: '2-49', // UNTRANSLATED
size_50_199: '50-199', // UNTRANSLATED
size_200_999: '200-999', // UNTRANSLATED
size_1000_plus: '1000+', // UNTRANSLATED

2
packages/phrases/src/locales/en/translation/admin-console/cloud.ts
View file

@ -32,7 +32,7 @@ const cloud = {
company_size_field: 'How’s your company size?',
company_options: {
size_1: '1',
size_1_49: '1-49',
size_2_49: '2-49',
size_50_199: '50-199',
size_200_999: '200-999',
size_1000_plus: '1000+',

2
packages/phrases/src/locales/fr/translation/admin-console/cloud.ts
View file

@ -32,7 +32,7 @@ const cloud = {
company_size_field: 'How’s your company size?', // UNTRANSLATED
company_options: {
size_1: '1', // UNTRANSLATED
size_1_49: '1-49', // UNTRANSLATED
size_2_49: '2-49', // UNTRANSLATED
size_50_199: '50-199', // UNTRANSLATED
size_200_999: '200-999', // UNTRANSLATED
size_1000_plus: '1000+', // UNTRANSLATED

2
packages/phrases/src/locales/ko/translation/admin-console/cloud.ts
View file

@ -32,7 +32,7 @@ const cloud = {
company_size_field: 'How’s your company size?', // UNTRANSLATED
company_options: {
size_1: '1', // UNTRANSLATED
size_1_49: '1-49', // UNTRANSLATED
size_2_49: '2-49', // UNTRANSLATED
size_50_199: '50-199', // UNTRANSLATED
size_200_999: '200-999', // UNTRANSLATED
size_1000_plus: '1000+', // UNTRANSLATED

2
packages/phrases/src/locales/pt-br/translation/admin-console/cloud.ts
View file

@ -32,7 +32,7 @@ const cloud = {
company_size_field: 'How’s your company size?', // UNTRANSLATED
company_options: {
size_1: '1', // UNTRANSLATED
size_1_49: '1-49', // UNTRANSLATED
size_2_49: '2-49', // UNTRANSLATED
size_50_199: '50-199', // UNTRANSLATED
size_200_999: '200-999', // UNTRANSLATED
size_1000_plus: '1000+', // UNTRANSLATED

2
packages/phrases/src/locales/pt-pt/translation/admin-console/cloud.ts
View file

@ -32,7 +32,7 @@ const cloud = {
company_size_field: 'How’s your company size?', // UNTRANSLATED
company_options: {
size_1: '1', // UNTRANSLATED
size_1_49: '1-49', // UNTRANSLATED
size_2_49: '2-49', // UNTRANSLATED
size_50_199: '50-199', // UNTRANSLATED
size_200_999: '200-999', // UNTRANSLATED
size_1000_plus: '1000+', // UNTRANSLATED

2
packages/phrases/src/locales/tr-tr/translation/admin-console/cloud.ts
View file

@ -32,7 +32,7 @@ const cloud = {
company_size_field: 'How’s your company size?', // UNTRANSLATED
company_options: {
size_1: '1', // UNTRANSLATED
size_1_49: '1-49', // UNTRANSLATED
size_2_49: '2-49', // UNTRANSLATED
size_50_199: '50-199', // UNTRANSLATED
size_200_999: '200-999', // UNTRANSLATED
size_1000_plus: '1000+', // UNTRANSLATED

2
packages/phrases/src/locales/zh-cn/translation/admin-console/cloud.ts
View file

@ -32,7 +32,7 @@ const cloud = {
company_size_field: 'How’s your company size?', // UNTRANSLATED
company_options: {
size_1: '1', // UNTRANSLATED
size_1_49: '1-49', // UNTRANSLATED
size_2_49: '2-49', // UNTRANSLATED
size_50_199: '50-199', // UNTRANSLATED
size_200_999: '200-999', // UNTRANSLATED
size_1000_plus: '1000+', // UNTRANSLATED