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/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,23 @@
+import type { Story, Meta } from '@storybook/react';
+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: async (email) => email !== 'rocket',
+  },
+} 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,46 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+import type { SubmitHandler, Validate } from 'react-hook-form';
+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 RequestTrialFormProps = {
+  onSubmit: SubmitHandler<{ email: string }>;
+  validateEmail: Validate<string>;
+};
+
+const RequestTrialPage = (props: RequestTrialFormProps): 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';