new: CloudOrganizationInfoPage Story

RocketChat · Jul 15, 2021 · faae684 · faae684
1 parent be3185f
commit faae684
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git 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
@@ -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<OrganizationInfoFormInputs>;
   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')}
           </Button>
+
+          {onClickSkip && (
+            <Box flexGrow={1}>
+              <ButtonGroup flexGrow={1} align='end'>
+                <Button nude info onClick={onClickSkip}>
+                  {t('component.form.action.skip')}
+                </Button>
+              </ButtonGroup>
+            </Box>
+          )}
         </ButtonGroup>
       </Form.Footer>
     </Form>

diff --git 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> = (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',
+  onConfirmText: 'Go to workspace',
+};
diff --git 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 => (
   <BackgroundLayer>
-    <FormPageLayout>
+    <FormPageLayout title={props.title} description={props.description}>
       <OrganizationInfoForm {...props} />
     </FormPageLayout>
   </BackgroundLayer>