feat(onboarding-ui): CloudOrganizationInfo Page

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</1> and <3>Privacy Policy</3>"

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;

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<OrganizationInfoPayload>;
   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 = ({
         </FieldGroup>
       </Form.Container>
       <Form.Footer>
-        <ButtonGroup flexGrow={1}>
+        <ButtonGroup vertical={isMobile} flexGrow={1}>
           <Button onClick={onBackButtonClick}>
             {t('component.form.action.back')}
           </Button>
+
           <Button type='submit' primary disabled={isValidating || isSubmitting}>
-            {t('component.form.action.next')}
+            {confirmText ?? t('component.form.action.next')}
           </Button>
+
+          {onClickSkip && (
+            <Box withTruncatedText flexGrow={1}>
+              <ButtonGroup flexGrow={1} align='end'>
+                <Button nude info onClick={onClickSkip}>
+                  {t('component.form.action.skip')}
+                </Button>
+              </ButtonGroup>
+            </Box>
+          )}
         </ButtonGroup>
       </Form.Footer>
     </Form>

packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.stories.tsx

@@ -72,4 +72,16 @@ export default {
 export const _OrganizationInfoPage: Story<Args> = (args) => (
   <OrganizationInfoPage {...args} />
 );
+
 _OrganizationInfoPage.storyName = 'OrganizationInfoPage';
+
+export const _CloudOrganizationInfoPage: Story<Args> = (args) => (
+  <OrganizationInfoPage {...args} />
+);
+
+_CloudOrganizationInfoPage.storyName = 'CloudOrganizationInfoPage';
+_CloudOrganizationInfoPage.args = {
+  title: 'Your Workspace is Ready!',
+  description: 'Organization info will help us personalize your workspace',
+  confirmText: 'Go to workspace',
+};

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,22 +7,26 @@ 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])[];
   organizationIndustryOptions: (readonly [string, string])[];
   organizationSizeOptions: (readonly [string, string])[];
   countryOptions: (readonly [string, string])[];
   initialValues?: OrganizationInfoPayload;
+  confirmText?: ReactNode;
   onSubmit: SubmitHandler<OrganizationInfoPayload>;
   onBackButtonClick: () => void;
+  onClickSkip?: () => void;
 };
 
 const OrganizationInfoPage = (
   props: OrganizationInfoPageProps
 ): ReactElement => (
   <BackgroundLayer>
-    <FormPageLayout>
+    <FormPageLayout title={props.title} description={props.description}>
       <OrganizationInfoForm {...props} />
     </FormPageLayout>
   </BackgroundLayer>