diff --git a/packages/onboarding-ui/.i18n/en.i18n.json b/packages/onboarding-ui/.i18n/en.i18n.json index bd78381643..4db7be6f3b 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", "termsAndConditions": "I agree with <1>Terms and Conditions and <3>Privacy Policy" diff --git a/packages/onboarding-ui/.loki/reference/desktop_forms_OrganizationInfoForm_OrganizationInfoForm.png b/packages/onboarding-ui/.loki/reference/desktop_forms_OrganizationInfoForm_OrganizationInfoForm.png index 3f4175c8fe..e66dc0c889 100644 Binary files a/packages/onboarding-ui/.loki/reference/desktop_forms_OrganizationInfoForm_OrganizationInfoForm.png and b/packages/onboarding-ui/.loki/reference/desktop_forms_OrganizationInfoForm_OrganizationInfoForm.png differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_OrganizationInfoPage_CloudOrganizationInfoPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_OrganizationInfoPage_CloudOrganizationInfoPage.png new file mode 100644 index 0000000000..e7b7390f73 Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/desktop_pages_OrganizationInfoPage_CloudOrganizationInfoPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_OrganizationInfoPage_OrganizationInfoPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_OrganizationInfoPage_OrganizationInfoPage.png index f0c1d2c3f0..93979c675f 100644 Binary files a/packages/onboarding-ui/.loki/reference/desktop_pages_OrganizationInfoPage_OrganizationInfoPage.png and b/packages/onboarding-ui/.loki/reference/desktop_pages_OrganizationInfoPage_OrganizationInfoPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_forms_OrganizationInfoForm_OrganizationInfoForm.png b/packages/onboarding-ui/.loki/reference/mobile_forms_OrganizationInfoForm_OrganizationInfoForm.png index 8ad6ae1772..c04ab57032 100644 Binary files a/packages/onboarding-ui/.loki/reference/mobile_forms_OrganizationInfoForm_OrganizationInfoForm.png and b/packages/onboarding-ui/.loki/reference/mobile_forms_OrganizationInfoForm_OrganizationInfoForm.png differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_pages_OrganizationInfoPage_CloudOrganizationInfoPage.png b/packages/onboarding-ui/.loki/reference/mobile_pages_OrganizationInfoPage_CloudOrganizationInfoPage.png new file mode 100644 index 0000000000..e8098429ef Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/mobile_pages_OrganizationInfoPage_CloudOrganizationInfoPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_pages_OrganizationInfoPage_OrganizationInfoPage.png b/packages/onboarding-ui/.loki/reference/mobile_pages_OrganizationInfoPage_OrganizationInfoPage.png index 96264669a2..268dc70f29 100644 Binary files a/packages/onboarding-ui/.loki/reference/mobile_pages_OrganizationInfoPage_OrganizationInfoPage.png and b/packages/onboarding-ui/.loki/reference/mobile_pages_OrganizationInfoPage_OrganizationInfoPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_forms_OrganizationInfoForm_OrganizationInfoForm.png b/packages/onboarding-ui/.loki/reference/tablet_forms_OrganizationInfoForm_OrganizationInfoForm.png index 3f4175c8fe..e66dc0c889 100644 Binary files a/packages/onboarding-ui/.loki/reference/tablet_forms_OrganizationInfoForm_OrganizationInfoForm.png and b/packages/onboarding-ui/.loki/reference/tablet_forms_OrganizationInfoForm_OrganizationInfoForm.png differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_AdminInfoPage_CloudAdminInfoPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_AdminInfoPage_CloudAdminInfoPage.png index 4baf52dfd2..ebceb52777 100644 Binary files a/packages/onboarding-ui/.loki/reference/tablet_pages_AdminInfoPage_CloudAdminInfoPage.png and b/packages/onboarding-ui/.loki/reference/tablet_pages_AdminInfoPage_CloudAdminInfoPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_OrganizationInfoPage_CloudOrganizationInfoPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_OrganizationInfoPage_CloudOrganizationInfoPage.png new file mode 100644 index 0000000000..c4ff973249 Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/tablet_pages_OrganizationInfoPage_CloudOrganizationInfoPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_OrganizationInfoPage_OrganizationInfoPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_OrganizationInfoPage_OrganizationInfoPage.png index 138869c396..7ff58985cf 100644 Binary files a/packages/onboarding-ui/.loki/reference/tablet_pages_OrganizationInfoPage_OrganizationInfoPage.png and b/packages/onboarding-ui/.loki/reference/tablet_pages_OrganizationInfoPage_OrganizationInfoPage.png differ diff --git a/packages/onboarding-ui/src/common/FormPageLayout.styles.tsx b/packages/onboarding-ui/src/common/FormPageLayout.styles.tsx index 597201856f..87f88e3152 100644 --- a/packages/onboarding-ui/src/common/FormPageLayout.styles.tsx +++ b/packages/onboarding-ui/src/common/FormPageLayout.styles.tsx @@ -3,6 +3,7 @@ import styled from '@rocket.chat/styled'; import { sans } from '../helpers/tokenFontFamilies'; export const Wrapper = styled('div')` + width: 100%; box-sizing: border-box; padding: 56px 16px 28px; display: flex; diff --git a/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx b/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx index 3f1c835a0a..d42624ea50 100644 --- a/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx +++ b/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx @@ -6,8 +6,10 @@ import { TextInput, Select, SelectOptions, + Box, } from '@rocket.chat/fuselage'; -import type { ReactElement } from 'react'; +import { useBreakpoints } from '@rocket.chat/fuselage-hooks'; +import type { ReactElement, ReactNode } from 'react'; import { useForm, SubmitHandler, Controller } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; @@ -28,9 +30,11 @@ type OrganizationInfoFormProps = { organizationIndustryOptions: SelectOptions; organizationSizeOptions: SelectOptions; countryOptions: SelectOptions; + confirmText?: ReactNode; initialValues?: OrganizationInfoPayload; onSubmit: SubmitHandler; onBackButtonClick: () => void; + onClickSkip?: () => void; }; const OrganizationInfoForm = ({ @@ -40,11 +44,15 @@ const OrganizationInfoForm = ({ organizationIndustryOptions, organizationSizeOptions, countryOptions, + confirmText, initialValues, onSubmit, onBackButtonClick, + onClickSkip, }: OrganizationInfoFormProps): ReactElement => { const { t } = useTranslation(); + const breakpoints = useBreakpoints(); + const isMobile = !breakpoints.includes('md'); const { register, @@ -161,13 +169,24 @@ const OrganizationInfoForm = ({ - + + + + {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..27643885b9 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', + confirmText: 'Go to workspace', +}; diff --git a/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx b/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx index ad23b8a244..4951ca3899 100644 --- a/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx +++ b/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx @@ -1,4 +1,4 @@ -import type { ReactElement } from 'react'; +import type { ReactElement, ReactNode } from 'react'; import type { SubmitHandler } from 'react-hook-form'; import BackgroundLayer from '../../common/BackgroundLayer'; @@ -7,6 +7,8 @@ import OrganizationInfoForm from '../../forms/OrganizationInfoForm'; import type { OrganizationInfoPayload } from '../../forms/OrganizationInfoForm/OrganizationInfoForm'; type OrganizationInfoPageProps = { + title?: string; + description?: string; currentStep: number; stepCount: number; organizationTypeOptions: (readonly [string, string])[]; @@ -14,15 +16,17 @@ type OrganizationInfoPageProps = { organizationSizeOptions: (readonly [string, string])[]; countryOptions: (readonly [string, string])[]; initialValues?: OrganizationInfoPayload; + confirmText?: ReactNode; onSubmit: SubmitHandler; onBackButtonClick: () => void; + onClickSkip?: () => void; }; const OrganizationInfoPage = ( props: OrganizationInfoPageProps ): ReactElement => ( - +