feat(onboarding-ui): Request trial page

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

@@ -35,7 +35,7 @@
       "tryGold": "Try our best Gold plan for 14 days for free",
       "availability": "High availability",
       "auditing": "Message audit panel / Audit logs",
-      "integrations": "1,000 integrations",
+      "engagement": "Engagement Dashboard",
       "ldap": "LDAP enhanced sync",
       "omnichannel": "Omnichannel premium",
       "sla": "SLA: Premium",
@@ -49,6 +49,10 @@
       "button": {
         "text": "Request new link"
       }
+    },
+    "requestTrial": {
+      "title": "Request a 30-\u2060day Trial",
+      "subtitle": "Try our enterprise solution for free"
     }
   },
   "form": {

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

@@ -1,4 +1,5 @@
 import type { Meta, Story } from '@storybook/react';
+import { countries } from 'countries-list';
 import type { ComponentProps } from 'react';
 
 import RequestTrialForm from './RequestTrialForm';
@@ -15,6 +16,22 @@ export default {
   args: {
     validateEmail: (email) =>
       email === '[email protected]' ? 'invalid email' : true,
+    organizationSizeOptions: [
+      ['0', '1-10 people'],
+      ['1', '11-50 people'],
+      ['2', '51-100 people'],
+      ['3', '101-250 people'],
+      ['4', '251-500 people'],
+      ['5', '501-1000 people'],
+      ['6', '1001-4000 people'],
+      ['7', '4000 or more people'],
+    ],
+    countryOptions: [
+      ...Object.entries(countries).map<readonly [string, string]>(
+        ([code, { name }]) => [code, name]
+      ),
+      ['worldwide', 'Worldwide'],
+    ],
   },
 } as Meta<Args>;
 

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

@@ -1,20 +1,33 @@
-import { Button, Field, FieldGroup, EmailInput } from '@rocket.chat/fuselage';
+import {
+  Button,
+  Field,
+  FieldGroup,
+  EmailInput,
+  Select,
+  SelectOptions,
+} from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
-import { useForm, SubmitHandler, Validate } from 'react-hook-form';
+import { useForm, SubmitHandler, Validate, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import Form from '../../common/Form';
 
 type RequestTrialPayload = {
   email: string;
+  organizationSize: string;
+  country: string;
 };
 
 type RequestTrialFormProps = {
+  organizationSizeOptions: SelectOptions;
+  countryOptions: SelectOptions;
   onSubmit: SubmitHandler<RequestTrialPayload>;
   validateEmail: Validate<string>;
 };
 
 const RequestTrialForm = ({
+  organizationSizeOptions,
+  countryOptions,
   onSubmit,
   validateEmail,
 }: RequestTrialFormProps): ReactElement => {
@@ -23,6 +36,7 @@ const RequestTrialForm = ({
   const {
     handleSubmit,
     register,
+    control,
     formState: { isValidating, isSubmitting, isValid, errors },
   } = useForm<RequestTrialPayload>({ mode: 'onChange' });
 
@@ -45,6 +59,49 @@ const RequestTrialForm = ({
           </Field.Row>
           {errors?.email && <Field.Error>{errors.email.message}</Field.Error>}
         </Field>
+        <Field>
+          <Field.Label>
+            {t('form.organizationInfoForm.fields.organizationSize.label')}
+          </Field.Label>
+          <Field.Row>
+            <Controller
+              name='organizationSize'
+              control={control}
+              rules={{ required: true }}
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  options={organizationSizeOptions}
+                  placeholder={t(
+                    'form.organizationInfoForm.fields.organizationSize.placeholder'
+                  )}
+                  error={errors?.email?.message || undefined}
+                />
+              )}
+            />
+          </Field.Row>
+        </Field>
+        <Field>
+          <Field.Label>
+            {t('form.organizationInfoForm.fields.country.label')}
+          </Field.Label>
+          <Field.Row>
+            <Controller
+              name='country'
+              control={control}
+              rules={{ required: true }}
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  options={countryOptions}
+                  placeholder={t(
+                    'form.organizationInfoForm.fields.country.placeholder'
+                  )}
+                />
+              )}
+            />
+          </Field.Row>
+        </Field>
         <Field>
           <Field.Label>
             {t('form.requestTrialForm.hasWorkspace.label')}

packages/onboarding-ui/src/pages/CreateCloudWorkspacePage/Description.tsx

@@ -4,13 +4,13 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { useTranslation } from 'react-i18next';
 
 import List from '../../common/List';
-import DescriptionIcon from './DescriptionIcon';
+import PlanFeatureIcon from '../../common/PlanFeatureIcon';
 
 const Description = (): ReactElement => {
   const { t } = useTranslation();
 
   const icon = useMemo(
-    () => encodeURIComponent(renderToStaticMarkup(<DescriptionIcon />)),
+    () => encodeURIComponent(renderToStaticMarkup(<PlanFeatureIcon />)),
     []
   );
 
@@ -20,7 +20,7 @@ const Description = (): ReactElement => {
         <List color='alternative' spacing='x16' icon={icon}>
           <List.Item>{t('page.cloudDescription.availability')}</List.Item>
           <List.Item>{t('page.cloudDescription.auditing')}</List.Item>
-          <List.Item>{t('page.cloudDescription.integrations')}</List.Item>
+          <List.Item>{t('page.cloudDescription.engagement')}</List.Item>
           <List.Item>{t('page.cloudDescription.ldap')}</List.Item>
           <List.Item>{t('page.cloudDescription.omnichannel')}</List.Item>
           <List.Item>{t('page.cloudDescription.sla')}</List.Item>

packages/onboarding-ui/src/pages/RequestTrialPage/Description.tsx

@@ -0,0 +1,28 @@
+import { ReactElement, useMemo } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { useTranslation } from 'react-i18next';
+
+import List from '../../common/List';
+import PlanFeatureIcon from '../../common/PlanFeatureIcon';
+
+const Description = (): ReactElement => {
+  const { t } = useTranslation();
+
+  const icon = useMemo(
+    () => encodeURIComponent(renderToStaticMarkup(<PlanFeatureIcon />)),
+    []
+  );
+
+  return (
+    <List color='alternative' spacing='x16' icon={icon}>
+      <List.Item>{t('page.cloudDescription.availability')}</List.Item>
+      <List.Item>{t('page.cloudDescription.auditing')}</List.Item>
+      <List.Item>{t('page.cloudDescription.engagement')}</List.Item>
+      <List.Item>{t('page.cloudDescription.ldap')}</List.Item>
+      <List.Item>{t('page.cloudDescription.omnichannel')}</List.Item>
+      <List.Item>{t('page.cloudDescription.push')}</List.Item>
+    </List>
+  );
+};
+
+export default Description;

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

@@ -0,0 +1,41 @@
+import type { Story, Meta } from '@storybook/react';
+import { countries } from 'countries-list';
+import type { ComponentProps } from 'react';
+
+import RequestTrialPage from './RequestTrialPage';
+
+type Args = ComponentProps<typeof RequestTrialPage>;
+
+export default {
+  title: 'pages/RequestTrialPage',
+  component: RequestTrialPage,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    layout: 'fullscreen',
+  },
+  args: {
+    validateEmail: (email) =>
+      email === '[email protected]' ? 'invalid email' : true,
+    organizationSizeOptions: [
+      ['0', '1-10 people'],
+      ['1', '11-50 people'],
+      ['2', '51-100 people'],
+      ['3', '101-250 people'],
+      ['4', '251-500 people'],
+      ['5', '501-1000 people'],
+      ['6', '1001-4000 people'],
+      ['7', '4000 or more people'],
+    ],
+    countryOptions: [
+      ...Object.entries(countries).map<readonly [string, string]>(
+        ([code, { name }]) => [code, name]
+      ),
+      ['worldwide', 'Worldwide'],
+    ],
+  },
+} as Meta<Args>;
+
+export const _RequestTrialPage: Story<Args> = (args) => (
+  <RequestTrialPage {...args} />
+);
+_RequestTrialPage.storyName = 'RequestTrialPage';

packages/onboarding-ui/src/pages/RequestTrialPage/RequestTrialPage.tsx

@@ -0,0 +1,43 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactElement } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+
+import BackgroundLayer from '../../common/BackgroundLayer';
+import FormPageLayout from '../../common/FormPageLayout';
+import RequestTrialForm from '../../forms/RequestTrialForm';
+import Description from './Description';
+
+type RequestTrialPageProps = ComponentProps<typeof RequestTrialForm>;
+
+const RequestTrialPage = (props: RequestTrialPageProps): ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <BackgroundLayer>
+      <FormPageLayout
+        description={<Description />}
+        title={t('page.requestTrial.title')}
+        subtitle={t('page.requestTrial.subtitle')}
+      >
+        <RequestTrialForm {...props} />
+        <Box mbs='x28' color='alternative' display='inline' textAlign='center'>
+          <Trans i18nKey='page.alreadyHaveAccount'>
+            Already have an account?
+            <Box
+              is='a'
+              color='primary-400'
+              textDecorationLine='none'
+              href='https://cloud.rocket.chat/login'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              Manage your workspaces.
+            </Box>
+          </Trans>
+        </Box>
+      </FormPageLayout>
+    </BackgroundLayer>
+  );
+};
+
+export default RequestTrialPage;

packages/onboarding-ui/src/pages/RequestTrialPage/index.ts

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