diff --git a/packages/onboarding-ui/.i18n/en.i18n.json b/packages/onboarding-ui/.i18n/en.i18n.json index 2ae766a920..b695fce30a 100644 --- a/packages/onboarding-ui/.i18n/en.i18n.json +++ b/packages/onboarding-ui/.i18n/en.i18n.json @@ -4,7 +4,8 @@ "steps": "Step {{currentStep}} of {{stepCount}}", "action": { "back": "Back", - "next": "Next" + "next": "Next", + "skip": "Skip this step" }, "requiredField": "This field is required" } diff --git a/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx b/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx index 8b10bca76b..7f892f5118 100644 --- a/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx +++ b/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx @@ -6,6 +6,7 @@ import { TextInput, Select, SelectOptions, + Box, } from '@rocket.chat/fuselage'; import type { ReactElement } from 'react'; import { useForm, SubmitHandler, Controller } from 'react-hook-form'; @@ -28,8 +29,10 @@ type OrganizationInfoFormProps = { organizationIndustryOptions: SelectOptions; organizationSizeOptions: SelectOptions; countryOptions: SelectOptions; + onConfirmText?: string; onSubmit: SubmitHandler; onBackButtonClick: () => void; + onClickSkip?: () => void; }; const OrganizationInfoForm = ({ @@ -39,8 +42,10 @@ const OrganizationInfoForm = ({ organizationIndustryOptions, organizationSizeOptions, countryOptions, + onConfirmText, onSubmit, onBackButtonClick, + onClickSkip, }: OrganizationInfoFormProps): ReactElement => { const { t } = useTranslation(); @@ -166,8 +171,18 @@ const OrganizationInfoForm = ({ primary disabled={!isDirty || isValidating || isSubmitting} > - {t('component.form.action.next')} + {onConfirmText || t('component.form.action.next')} + + {onClickSkip && ( + + + + + + )} diff --git a/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.stories.tsx b/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.stories.tsx index 8a22573258..4dc4de2612 100644 --- a/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.stories.tsx +++ b/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.stories.tsx @@ -72,4 +72,16 @@ export default { export const _OrganizationInfoPage: Story = (args) => ( ); + _OrganizationInfoPage.storyName = 'OrganizationInfoPage'; + +export const _CloudOrganizationInfoPage: Story = (args) => ( + +); + +_CloudOrganizationInfoPage.storyName = 'CloudOrganizationInfoPage'; +_CloudOrganizationInfoPage.args = { + title: 'Your Workspace is Ready!', + description: 'Organization info will help us personalize your workspace', + onConfirmText: 'Go to workspace', +}; diff --git a/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx b/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx index 4df7192d5c..c30745c969 100644 --- a/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx +++ b/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx @@ -6,6 +6,8 @@ import FormPageLayout from '../../common/FormPageLayout'; import OrganizationInfoForm from '../../forms/OrganizationInfoForm'; type OrganizationInfoPageProps = { + title?: string; + description?: string; currentStep: number; stepCount: number; organizationTypeOptions: (readonly [string, string])[]; @@ -20,13 +22,15 @@ type OrganizationInfoPageProps = { country: string; }>; onBackButtonClick: () => void; + onConfirmText?: string; + onClickSkip?: () => void; }; const OrganizationInfoPage = ( props: OrganizationInfoPageProps ): ReactElement => ( - +