feat(onboarding-ui): AdminInfoPage for Cloud Registration wizard (#497)

* new: CloudAdminInfo Story

* fix: review

Author: dougfabris

packages/onboarding-ui/.i18n/en.i18n.json

@@ -53,6 +53,9 @@
         "password": {
           "label": "Password",
           "placeholder": "Create password"
+        },
+        "keepPosted": {
+          "label": "Keep me posted about Rocket.Chat updates"
         }
       }
     },

packages/onboarding-ui/.loki/reference/desktop_pages_AdminInfoPage_CloudAdminInfoPage.png

@@ -73,6 +73,7 @@ export const Title = styled('div')`
 
 export const Subtitle = styled('div')`
   font-size: ${String(40 / 16)}rem;
+  font-family: ${sans};
   line-height: ${String(42 / 16)}rem;
   text-align: center;
 
@@ -84,6 +85,7 @@ export const Subtitle = styled('div')`
 
 export const Description = styled('div')`
   display: none;
+  font-family: ${sans};
 
   @media (min-width: 1440px) {
     display: unset;

packages/onboarding-ui/.loki/reference/mobile_pages_AdminInfoPage_CloudAdminInfoPage.png

@@ -6,6 +6,8 @@ import {
   Button,
   PasswordInput,
   TextInput,
+  Box,
+  CheckBox,
 } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import { useForm, SubmitHandler, Validate } from 'react-hook-form';
@@ -18,12 +20,14 @@ export type AdminInfoPayload = {
   username: string;
   companyEmail: string;
   password: string;
+  keepPosted: boolean;
 };
 
 type AdminInfoFormProps = {
   currentStep: number;
   stepCount: number;
   passwordRulesHint: string;
+  keepPosted?: boolean;
   initialValues?: Omit<AdminInfoPayload, 'password'>;
   validateUsername: Validate<string>;
   validateEmail: Validate<string>;
@@ -39,6 +43,7 @@ const AdminInfoForm = ({
   validateUsername,
   validateEmail,
   validatePassword,
+  keepPosted = false,
   onSubmit,
 }: AdminInfoFormProps): ReactElement => {
   const { t } = useTranslation();
@@ -137,6 +142,14 @@ const AdminInfoForm = ({
               <Field.Error>{errors.password.message}</Field.Error>
             )}
           </Field>
+          {keepPosted && (
+            <Box mbe='x8' display='block' color='info' fontScale='c1'>
+              <CheckBox id='keepPosted' mie='x8' {...register('keepPosted')} />
+              <label htmlFor='keepPosted'>
+                {t('form.adminInfoForm.fields.keepPosted.label')}
+              </label>
+            </Box>
+          )}
         </FieldGroup>
       </Form.Container>
       <Form.Footer>

packages/onboarding-ui/.loki/reference/tablet_pages_AdminInfoPage_CloudAdminInfoPage.png

@@ -27,4 +27,16 @@ export default {
 export const _AdminInfoPage: Story<Args> = (args) => (
   <AdminInfoPage {...args} />
 );
+
+export const _CloudAdminInfoPage: Story<Args> = (args) => (
+  <AdminInfoPage {...args} />
+);
+
 _AdminInfoPage.storyName = 'AdminInfoPage';
+_CloudAdminInfoPage.storyName = 'CloudAdminInfoPage';
+
+_CloudAdminInfoPage.args = {
+  title: 'Your Workspace is Ready!',
+  description: 'Time to create your first admin user',
+  keepPosted: true,
+};

packages/onboarding-ui/src/common/FormPageLayout.styles.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import type { SubmitHandler, Validate } from 'react-hook-form';
 
 import BackgroundLayer from '../../common/BackgroundLayer';
@@ -7,9 +7,12 @@ import AdminInfoForm from '../../forms/AdminInfoForm';
 import type { AdminInfoPayload } from '../../forms/AdminInfoForm/AdminInfoForm';
 
 type AdminInfoPageProps = {
+  title?: ReactNode;
+  description?: ReactNode;
   currentStep: number;
   stepCount: number;
   passwordRulesHint: string;
+  keepPosted?: boolean;
   initialValues?: Omit<AdminInfoPayload, 'password'>;
   validateUsername: Validate<string>;
   validateEmail: Validate<string>;
@@ -19,7 +22,7 @@ type AdminInfoPageProps = {
 
 const AdminInfoPage = (props: AdminInfoPageProps): ReactElement => (
   <BackgroundLayer>
-    <FormPageLayout>
+    <FormPageLayout title={props.title} description={props.description}>
       <AdminInfoForm {...props} />
     </FormPageLayout>
   </BackgroundLayer>