feat(onboarding-ui): Check your email page

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

@@ -9,21 +9,25 @@
       },
       "requiredField": "This field is required",
       "termsAndConditions": "I agree with <1>Terms and Conditions</1> and <3>Privacy Policy</3>"
-    }
+    },
+    "emailCodeFallback": "Didn’t receive email? <1>Resend</1> or <3>Change email</3>"
   },
   "page": {
     "form": {
       "title": "Let's Launch Your Workspace"
     },
     "awaitingConfirmation": {
       "title": "Awaiting confirmation",
-      "subtitle": "We have sent you an email to {{emailAddress}} with a confirmation link. Please verify that the security code below matches the one in the email.",
-      "codeFallback": "Didn’t receive email? <1>Resend</1> or <3>Change email</3>"
+      "subtitle": "We have sent you an email to {{emailAddress}} with a confirmation link. Please verify that the security code below matches the one in the email."
     },
     "emailConfirmed": {
       "title": "Email Confirmed!",
       "subtitle": "You can return to your Rocket.Chat application – we have launched your workspace already."
     },
+    "checkYourEmail": {
+      "title": "Check your email",
+      "subtitle": "Your request has been sent successfully.<1></1>Check your email inbox to launch your Enterprise trial."
+    },
     "confirmationProcess": {
       "title": "Confirmation in Process"
     },

packages/onboarding-ui/src/common/EmailCodeFallback.tsx

@@ -0,0 +1,26 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+import { Trans } from 'react-i18next';
+
+import ActionLink from './ActionLink';
+
+type EmailCodeFallbackProps = {
+  onResendEmailRequest: () => void;
+  onChangeEmailRequest: () => void;
+};
+
+const EmailCodeFallback = ({
+  onResendEmailRequest,
+  onChangeEmailRequest,
+}: EmailCodeFallbackProps): ReactElement => (
+  <Box fontScale='c1'>
+    <Trans i18nKey='component.emailCodeFallback'>
+      Didn’t receive email?
+      <ActionLink onClick={onResendEmailRequest}>Resend</ActionLink>
+      or
+      <ActionLink onClick={onChangeEmailRequest}>Change email</ActionLink>
+    </Trans>
+  </Box>
+);
+
+export default EmailCodeFallback;

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

@@ -1,12 +1,12 @@
 import { Box, Margins } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors.json';
 import type { ReactElement } from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import BackgroundLayer from '../../common/BackgroundLayer';
 import { useDarkMode } from '../../common/DarkModeProvider';
+import EmailCodeFallback from '../../common/EmailCodeFallback';
 import RocketChatLogo from '../../common/RocketChatLogo';
-import ActionLink from './ActionLink';
 
 type AwaitingConfirmationPageProps = {
   emailAddress: string;
@@ -67,16 +67,10 @@ const AwaitingConfirmationPage = ({
             {securityCode}
           </Box>
 
-          <Box fontScale='c1'>
-            <Trans i18nKey='page.awaitingConfirmation.codeFallback'>
-              Didn’t receive email?
-              <ActionLink onClick={onResendEmailRequest}>Resend</ActionLink>
-              or
-              <ActionLink onClick={onChangeEmailRequest}>
-                Change email
-              </ActionLink>
-            </Trans>
-          </Box>
+          <EmailCodeFallback
+            onResendEmailRequest={onResendEmailRequest}
+            onChangeEmailRequest={onChangeEmailRequest}
+          />
         </Margins>
       </Box>
     </BackgroundLayer>

packages/onboarding-ui/src/pages/CheckYourEmailPage/CheckYourEmailPage.spec.tsx

@@ -0,0 +1,15 @@
+import ReactDOM from 'react-dom';
+
+import CheckYourEmailPage from './CheckYourEmailPage';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(
+    <CheckYourEmailPage
+      onResendEmailRequest={() => undefined}
+      onChangeEmailRequest={() => undefined}
+    />,
+    div
+  );
+  ReactDOM.unmountComponentAtNode(div);
+});

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

@@ -0,0 +1,20 @@
+import type { Story, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import CheckYourEmailPage from './CheckYourEmailPage';
+
+type Args = ComponentProps<typeof CheckYourEmailPage>;
+
+export default {
+  title: 'pages/CheckYourEmailPage',
+  component: CheckYourEmailPage,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    layout: 'fullscreen',
+  },
+} as Meta<Args>;
+
+export const _CheckYourEmailPage: Story<Args> = (args) => (
+  <CheckYourEmailPage {...args} />
+);
+_CheckYourEmailPage.storyName = 'CheckYourEmailPage';

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

@@ -0,0 +1,68 @@
+import { Box, Margins } from '@rocket.chat/fuselage';
+import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import type { ReactElement } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+
+import BackgroundLayer from '../../common/BackgroundLayer';
+import { useDarkMode } from '../../common/DarkModeProvider';
+import EmailCodeFallback from '../../common/EmailCodeFallback';
+import RocketChatLogo from '../../common/RocketChatLogo';
+
+type CheckYourEmailPageProps = {
+  onResendEmailRequest: () => void;
+  onChangeEmailRequest: () => void;
+};
+
+const CheckYourEmailPage = ({
+  onResendEmailRequest,
+  onChangeEmailRequest,
+}: CheckYourEmailPageProps): ReactElement => {
+  const darkMode = useDarkMode();
+  const { t } = useTranslation();
+
+  return (
+    <BackgroundLayer>
+      <Box
+        display='flex'
+        flexDirection='column'
+        alignItems='center'
+        textAlign='center'
+        width='100%'
+        maxWidth={576}
+        paddingBlock={32}
+        paddingInline={16}
+        color={darkMode ? colors.white : colors.n900}
+      >
+        <Margins blockEnd={32}>
+          <Box width='100%' maxWidth={180}>
+            <RocketChatLogo />
+          </Box>
+
+          <Box
+            fontWeight={800}
+            fontSize='x52'
+            lineHeight='x62'
+            fontFamily='sans'
+          >
+            {t('page.checkYourEmail.title')}
+          </Box>
+
+          <Box fontScale='s1'>
+            <Trans i18nKey='page.checkYourEmail.subtitle'>
+              Your request has been sent successfully.
+              <br />
+              Check your email inbox to launch your Enterprise trial.
+            </Trans>
+          </Box>
+
+          <EmailCodeFallback
+            onResendEmailRequest={onResendEmailRequest}
+            onChangeEmailRequest={onChangeEmailRequest}
+          />
+        </Margins>
+      </Box>
+    </BackgroundLayer>
+  );
+};
+
+export default CheckYourEmailPage;

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

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