feat(onboarding-ui): Create Cloud Workspace Simplified Page (#660)

* feat(onboarding-ui): Create Cloud Workspace Simplified Page * feat(onboarding-ui): Create Cloud Workspace Simplified Page * refactored files * fix: select option bug * refactor description list and i18n strings * refactor: update older folder instead of creating a new one * feat: update form * fix: build error * refactor: WorkspaceUrlInput * feat: update CreateCloudWorkspaceForm * feat: translations and small refactor * feat: update stories args * fix remove TODO comments
RocketChat · Mar 16, 2022 · e746cfb · e746cfb
1 parent ded82c9
commit e746cfb
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 126 deletions.
diff --git a/packages/onboarding-ui/.i18n/en.i18n.json b/packages/onboarding-ui/.i18n/en.i18n.json
@@ -102,6 +102,17 @@
       "title": "Something went wrong",
       "subtitle": "Please, contact support.",
       "requestId": "Request ID: {{requestId}}"
+    },
+    "createCloudWorkspace": {
+      "title": "Launch new workspace and <1>30-day trial</1>",
+      "tryGold": "Try Rocket.Chat Gold Edition for 30 days. No credit card required.",
+      "auditing": "Message audit panel / Audit logs",
+      "numberOfIntegrations": "Apps and integrations",
+      "ldap": "LDAP enhanced sync",
+      "omnichannel": "Enhanced Omnichannel",
+      "sla": "SLA: Premium",
+      "push": "Unlimited push notifications",
+      "engagement": "Engagement Dashboard"
     }
   },
   "form": {
@@ -181,29 +192,29 @@
       "manuallyIntegrate": "Need to manually integrate with external services"
     },
     "createCloudWorkspace": {
-      "title": "Create Cloud Workspace",
+      "title": "New Cloud Workspace",
       "fields": {
-        "orgName": "Organization name",
         "orgEmail": {
           "label": "Organization email",
-          "placeholder": "Email",
-          "invalid": "Invalid email"
+          "invalid": "Organization email required"
         },
         "workspaceName": {
-          "label": "Workspace name",
-          "tooltip": "How should be a good Workspace name"
+          "label": "Workspace name"
         },
         "workspaceUrl": {
           "label": "Workspace URL",
-          "placeholder": "workspaceurl",
-          "tooltip": "URL of your Workspace",
+          "placeholder": "https://",
           "exists": "Workspace already exists"
         },
         "serverRegion": {
           "label": "Server region",
           "tooltip": "Where is your server located"
         },
-        "keepMePosted": "Keep me posted about Rocket.Chat updates"
+        "language": {
+          "label": "Language",
+          "tooltip": "The language used on your workspace's interface"
+        },
+        "keepMeInformed": "Keep me informed about news and events"
       }
     },
     "requestTrialForm": {

diff --git a/...ges/onboarding-ui/src/forms/CreateCloudWorkspaceForm/CreateCloudWorkspaceForm.stories.tsx b/...ges/onboarding-ui/src/forms/CreateCloudWorkspaceForm/CreateCloudWorkspaceForm.stories.tsx
@@ -14,15 +14,18 @@ export default {
     actions: { argTypesRegex: '^on.*' },
   },
   args: {
-    currentStep: 1,
-    stepCount: 2,
     serverRegionOptions: [
       ['us', 'US'],
       ['br', 'BR'],
     ],
+    languageOptions: [
+      ['en', 'English'],
+      ['pt', 'Português'],
+    ],
     domain: 'rocket.chat',
     validateUrl: async (url) => url !== 'rocket',
-    validateEmail: async (email) => email !== 'rocket',
+    validateEmail: async (email) =>
+      email === 'rocket@rocket.chat' ? 'invalid email' : true,
   },
 } as Meta<Args>;
 

diff --git a/packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/CreateCloudWorkspaceForm.tsx b/packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/CreateCloudWorkspaceForm.tsx
@@ -5,9 +5,11 @@ import {
   ButtonGroup,
   Button,
   Box,
+  EmailInput,
   TextInput,
   Select,
   CheckBox,
+  Grid,
 } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
@@ -19,20 +21,19 @@ import Tooltip from '../../common/InformationTooltipTrigger';
 import WorkspaceUrlInput from './WorkspaceUrlInput';
 
 type CreateCloudWorkspaceFormPayload = {
-  organizationName: string;
   organizationEmail: string;
   workspaceName: string;
   workspaceURL: string;
   serverRegion: string;
+  language: string;
   agreement: boolean;
   updates: boolean;
 };
 
 type CreateCloudWorkspaceFormProps = {
-  currentStep: number;
-  stepCount: number;
   onSubmit: SubmitHandler<CreateCloudWorkspaceFormPayload>;
   serverRegionOptions: SelectOption[];
+  languageOptions: SelectOption[];
   domain: string;
   onBackButtonClick: () => void;
   validateUrl: (url: string) => Promise<boolean>;
@@ -42,9 +43,8 @@ type CreateCloudWorkspaceFormProps = {
 const CreateCloudWorkspaceForm = ({
   onSubmit,
   domain,
-  currentStep,
-  stepCount,
   serverRegionOptions,
+  languageOptions,
   validateUrl,
   validateEmail,
 }: CreateCloudWorkspaceFormProps): ReactElement => {
@@ -54,41 +54,25 @@ const CreateCloudWorkspaceForm = ({
     register,
     control,
     handleSubmit,
-    formState: { isDirty, isValidating, isSubmitting, errors },
-  } = useForm<CreateCloudWorkspaceFormPayload, object>();
+    formState: { isValid, isValidating, isSubmitting, errors },
+  } = useForm<CreateCloudWorkspaceFormPayload>({ mode: 'onChange' });
 
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
-      <Form.Steps currentStep={currentStep} stepCount={stepCount} />
       <Form.Title>{t('form.createCloudWorkspace.title')}</Form.Title>
+
       <FieldGroup mbs='x16'>
-        <Field>
-          <Field.Label>
-            {t('form.createCloudWorkspace.fields.orgName')}
-          </Field.Label>
-          <Field.Row>
-            <TextInput
-              {...register('organizationName', { required: true })}
-              placeholder={t('form.createCloudWorkspace.fields.orgName')}
-            />
-          </Field.Row>
-          {errors.organizationName && (
-            <Field.Error>{t('component.form.requiredField')}</Field.Error>
-          )}
-        </Field>
         <Field>
           <Field.Label>
             {t('form.createCloudWorkspace.fields.orgEmail.label')}
           </Field.Label>
           <Field.Row>
-            <TextInput
+            <EmailInput
+              error={errors?.organizationEmail?.type || undefined}
               {...register('organizationEmail', {
                 required: true,
                 validate: validateEmail,
               })}
-              placeholder={t(
-                'form.createCloudWorkspace.fields.orgEmail.placeholder'
-              )}
             />
           </Field.Row>
           {errors.organizationEmail?.type === 'required' && (
@@ -100,35 +84,29 @@ const CreateCloudWorkspaceForm = ({
             </Field.Error>
           )}
         </Field>
+
         <Field>
           <Field.Label>
             <Box display='inline' mie='x8'>
               {t('form.createCloudWorkspace.fields.workspaceName.label')}
             </Box>
-            <Tooltip
-              text={t('form.createCloudWorkspace.fields.workspaceName.tooltip')}
-            />
           </Field.Label>
           <Field.Row>
             <TextInput
+              error={errors?.workspaceName?.type || undefined}
               {...register('workspaceName', { required: true })}
-              placeholder={t(
-                'form.createCloudWorkspace.fields.workspaceName.label'
-              )}
             />
           </Field.Row>
           {errors.workspaceName && (
             <Field.Error>{t('component.form.requiredField')}</Field.Error>
           )}
         </Field>
+
         <Field>
           <Field.Label>
             <Box display='inline' mie='x8'>
               {t('form.createCloudWorkspace.fields.workspaceUrl.label')}
             </Box>
-            <Tooltip
-              text={t('form.createCloudWorkspace.fields.workspaceUrl.tooltip')}
-            />
           </Field.Label>
           <Field.Row>
             <WorkspaceUrlInput
@@ -137,9 +115,6 @@ const CreateCloudWorkspaceForm = ({
                 required: true,
                 validate: validateUrl,
               })}
-              placeholder={t(
-                'form.createCloudWorkspace.fields.workspaceUrl.placeholder'
-              )}
             />
           </Field.Row>
           {errors.workspaceURL?.type === 'required' && (
@@ -151,31 +126,67 @@ const CreateCloudWorkspaceForm = ({
             </Field.Error>
           )}
         </Field>
-        <Field>
-          <Field.Label>
-            <Box display='inline' mie='x8'>
-              {t('form.createCloudWorkspace.fields.serverRegion.label')}
-            </Box>
-            <Tooltip
-              text={t('form.createCloudWorkspace.fields.serverRegion.tooltip')}
-            />
-          </Field.Label>
-          <Field.Row>
-            <Controller
-              name='serverRegion'
-              control={control}
-              render={({ field }) => (
-                <Select
-                  {...field}
-                  options={serverRegionOptions}
-                  placeholder={t(
-                    'form.createCloudWorkspace.fields.serverRegion.label'
+
+        <Grid mb='x16'>
+          <Grid.Item>
+            <Field>
+              <Field.Label>
+                <Box display='inline' mie='x8'>
+                  {t('form.createCloudWorkspace.fields.serverRegion.label')}
+                </Box>
+                <Tooltip
+                  text={t(
+                    'form.createCloudWorkspace.fields.serverRegion.tooltip'
                   )}
                 />
-              )}
-            />
-          </Field.Row>
-        </Field>
+              </Field.Label>
+              <Field.Row>
+                <Controller
+                  name='serverRegion'
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      options={serverRegionOptions}
+                      placeholder={t(
+                        'form.createCloudWorkspace.fields.serverRegion.label'
+                      )}
+                    />
+                  )}
+                />
+              </Field.Row>
+            </Field>
+          </Grid.Item>
+
+          <Grid.Item>
+            <Field>
+              <Field.Label>
+                <Box display='inline' mie='x8'>
+                  {t('form.createCloudWorkspace.fields.language.label')}
+                </Box>
+                <Tooltip
+                  text={t('form.createCloudWorkspace.fields.language.tooltip')}
+                />
+              </Field.Label>
+              <Field.Row>
+                <Controller
+                  name='language'
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      options={languageOptions}
+                      placeholder={t(
+                        'form.createCloudWorkspace.fields.language.label'
+                      )}
+                    />
+                  )}
+                />
+              </Field.Row>
+            </Field>
+          </Grid.Item>
+        </Grid>
+
         <Field>
           <Field.Row justifyContent='flex-start'>
             <CheckBox {...register('agreement', { required: true })} mie='x8' />
@@ -204,21 +215,23 @@ const CreateCloudWorkspaceForm = ({
             <Field.Error>{t('component.form.requiredField')}</Field.Error>
           )}
         </Field>
+
         <Field>
           <Field.Row justifyContent='flex-start'>
             <CheckBox {...register('updates')} mie='x8' />
             <Box fontScale='c1'>
-              {t('form.createCloudWorkspace.fields.keepMePosted')}
+              {t('form.createCloudWorkspace.fields.keepMeInformed')}
             </Box>
           </Field.Row>
         </Field>
       </FieldGroup>
+
       <Form.Footer>
         <ButtonGroup>
           <Button
             type='submit'
             primary
-            disabled={!isDirty || isValidating || isSubmitting}
+            disabled={isValidating || isSubmitting || !isValid}
           >
             {t('component.form.action.next')}
           </Button>

diff --git a/packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/WorkspaceUrlInput.tsx b/packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/WorkspaceUrlInput.tsx
@@ -1,18 +1,25 @@
-import { Box, TextInput } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import { Box, InputBox } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactNode, Ref } from 'react';
+import React, { forwardRef } from 'react';
 
-type WorkspaceUrlInputProps = { domain: string } & ComponentProps<
-  typeof TextInput
->;
+type WorkspaceUrlInputProps = Omit<ComponentProps<typeof InputBox>, 'type'> & {
+  addon?: ReactNode;
+  error?: string | undefined;
+  domain: string;
+};
 
-const WorkspaceUrlInput = ({
-  domain,
-  ...props
-}: WorkspaceUrlInputProps): ReactElement => (
-  <TextInput
-    {...props}
-    addon={
-      domain && (
+const WorkspaceUrlInput = forwardRef(function TextInput(
+  props: WorkspaceUrlInputProps,
+  ref: Ref<HTMLInputElement>
+) {
+  const { domain } = props;
+
+  return (
+    <InputBox
+      type='text'
+      ref={ref}
+      {...props}
+      addon={
         <Box
           borderInlineStart='2px solid'
           mb='neg-x8'
@@ -23,9 +30,9 @@ const WorkspaceUrlInput = ({
         >
           {domain}
         </Box>
-      )
-    }
-  />
-);
+      }
+    />
+  );
+});
 
 export default WorkspaceUrlInput;