feat(onboarding-ui): Request trial form

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

@@ -114,6 +114,17 @@
           "mobile": "and recompile mobile apps with your certificates"
         }
       }
+    },
+    "requestTrialForm": {
+      "request": "Request Trial",
+      "emailAddr": {
+        "label": "Email address",
+        "placeholder": "Enter email address"
+      },
+      "hasWorkspace": {
+        "label": "Already registered a workspace?",
+        "description": "Use the same email address to continue"
+      }
     }
   }
 }

packages/onboarding-ui/src/forms/RequestTrialForm/RequestTrialForm.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, Story } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import RequestTrialForm from './RequestTrialForm';
+
+type Args = ComponentProps<typeof RequestTrialForm>;
+
+export default {
+  title: 'forms/RequestTrialForm',
+  component: RequestTrialForm,
+  parameters: {
+    layout: 'centered',
+    actions: { argTypesRegex: '^on.*' },
+  },
+  args: {
+    onSubmit: (data) => console.log(data),
+  },
+} as Meta<Args>;
+
+export const _RequestTrialForm: Story<Args> = (args) => (
+  <RequestTrialForm {...args} />
+);
+_RequestTrialForm.storyName = 'RequestTrialForm';

packages/onboarding-ui/src/forms/RequestTrialForm/RequestTrialForm.tsx

@@ -0,0 +1,66 @@
+import { Button, Field, FieldGroup, TextInput } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import Form from '../../common/Form';
+
+type RequestTrialPayload = {
+  email: string;
+};
+
+type RequestTrialFormProps = {
+  onSubmit: SubmitHandler<RequestTrialPayload>;
+};
+
+const RequestTrialForm = ({
+  onSubmit,
+}: RequestTrialFormProps): ReactElement => {
+  const { t } = useTranslation();
+
+  const {
+    handleSubmit,
+    register,
+    formState: { isValidating, isSubmitting, isValid },
+    watch,
+  } = useForm<RequestTrialPayload>({ mode: 'onChange' });
+
+  watch('email');
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      <FieldGroup>
+        <Field>
+          <Field.Label>
+            {t('form.requestTrialForm.emailAddr.label')}
+          </Field.Label>
+          <Field.Row>
+            <TextInput
+              {...register('email', { required: true })}
+              placeholder={t('form.requestTrialForm.emailAddr.placeholder')}
+            />
+          </Field.Row>
+        </Field>
+        <Field>
+          <Field.Label>
+            {t('form.requestTrialForm.hasWorkspace.label')}
+          </Field.Label>
+          <Field.Description>
+            {t('form.requestTrialForm.hasWorkspace.description')}
+          </Field.Description>
+        </Field>
+      </FieldGroup>
+      <Form.Footer>
+        <Button
+          type='submit'
+          primary
+          disabled={isValidating || isSubmitting || !isValid}
+        >
+          {t('form.requestTrialForm.request')}
+        </Button>
+      </Form.Footer>
+    </Form>
+  );
+};
+
+export default RequestTrialForm;

packages/onboarding-ui/src/forms/RequestTrialForm/index.ts

@@ -0,0 +1 @@
+export { default } from './RequestTrialForm';