refactor(onboarding-ui): Rewrite AwaitingConfirmationPage page (#1183)

.changeset/stupid-mayflies-look.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/onboarding-ui": patch
+---
+
+refactor(onboarding-ui): Rewrite `AwaitingConfirmationPage` page

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

@@ -12,7 +12,7 @@
       },
       "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>",
+    "emailCodeFallback": "Didn’t receive email? <1>Resend</1> or <3>Change email</3>.",
     "manageWorkspaceFallback": "Already have an account? <1>Manage your workspaces.</1>",
     "createNewAccountPage": "Already registered? <1>Go to login</1>",
     "wantToLogin": "Want to log in? <1>Go to login</1>"
@@ -21,10 +21,6 @@
     "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."
-    },
     "emailConfirmed": {
       "title": "Email Confirmed!",
       "subtitle": "You can return to your Rocket.Chat application – we have launched your workspace already."
@@ -247,6 +243,13 @@
         "description": "Please use the email address associated with your cloud account"
       }
     },
+    "awaitConfirmationForm": {
+      "title": "Awaiting confirmation",
+      "content": {
+        "securityCode": "Security code",
+        "sentEmail": "Email sent to <1>{{email}}</1> with a confirmation link.Please verify that the security code below matches the one in the email."
+      }
+    },
     "loginForm": {
       "content": {
         "default": "Enter your password to continue.",

packages/onboarding-ui/src/flows/SelfHostedRegistration/stories.tsx

@@ -159,6 +159,8 @@ export const SelfHostedRegistration: Story = ({ offline }) => {
 
     return (
       <AwaitingConfirmationPage
+        currentStep={4}
+        stepCount={4}
         emailAddress={serverRegistration.cloudAccountEmail}
         securityCode={serverRegistration.securityCode}
         onChangeEmailRequest={() => navigateTo('/admin-info')}

packages/onboarding-ui/src/forms/AwaitConfirmationForm/AwaitConfirmationForm.spec.tsx

@@ -0,0 +1,19 @@
+import ReactDOM from 'react-dom';
+
+import AwaitConfirmationForm from './AwaitConfirmationForm';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(
+    <AwaitConfirmationForm
+      currentStep={4}
+      stepCount={4}
+      securityCode='Funny Tortoise In The Hat'
+      emailAddress='[email protected]'
+      onResendEmailRequest={() => true}
+      onChangeEmailRequest={() => true}
+    />,
+    div
+  );
+  ReactDOM.unmountComponentAtNode(div);
+});

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

@@ -0,0 +1,30 @@
+import type { Story, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import AwaitConfirmationForm from './AwaitConfirmationForm';
+
+type Args = ComponentProps<typeof AwaitConfirmationForm>;
+
+export default {
+  title: 'forms/AwaitConfirmationForm',
+  component: AwaitConfirmationForm,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    layout: 'centered',
+  },
+  argTypes: {
+    onResendEmailRequest: { action: 'resetEmailRequest' },
+    onChangeEmailRequest: { action: 'changeEmailRequest' },
+  },
+  args: {
+    currentStep: 4,
+    stepCount: 4,
+    securityCode: 'Funny Tortoise In The Hat',
+    emailAddress: '[email protected]',
+  },
+} as Meta<Args>;
+
+export const _AwaitConfirmationForm: Story<Args> = (args) => (
+  <AwaitConfirmationForm {...args} />
+);
+_AwaitConfirmationForm.storyName = 'AwaitConfirmationForm';

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

@@ -0,0 +1,65 @@
+import { Box, Label } from '@rocket.chat/fuselage';
+import { Form } from '@rocket.chat/layout';
+import type { ReactElement } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import EmailCodeFallback from '../../common/EmailCodeFallback';
+
+type AwaitingConfirmationFormProps = {
+  currentStep: number;
+  stepCount: number;
+  securityCode: string;
+  emailAddress: string;
+  onResendEmailRequest: () => void;
+  onChangeEmailRequest: () => void;
+};
+
+const AwaitingConfirmationForm = ({
+  currentStep,
+  stepCount,
+  securityCode,
+  emailAddress,
+  onResendEmailRequest,
+  onChangeEmailRequest,
+}: AwaitingConfirmationFormProps): ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <Form>
+      <Form.Header>
+        <Form.Steps currentStep={currentStep} stepCount={stepCount} />
+        <Form.Title>{t('form.awaitConfirmationForm.title')}</Form.Title>
+      </Form.Header>
+      <Form.Container>
+        <Box fontScale='c1' mbe={24}>
+          <Trans i18nKey='form.awaitConfirmationForm.content.sentEmail'>
+            Email sent to <strong>{{ emailAddress }}</strong> with a
+            confirmation link.Please verify that the security code below matches
+            the one in the email.
+          </Trans>
+        </Box>
+        <Label>
+          {t('form.awaitConfirmationForm.content.securityCode')}
+          <Box
+            padding='12px'
+            width='full'
+            fontScale='p2b'
+            lineHeight='20px'
+            backgroundColor='tint'
+            elevation='1'
+          >
+            {securityCode}
+          </Box>
+        </Label>
+      </Form.Container>
+      <Form.Footer>
+        <EmailCodeFallback
+          onResendEmailRequest={onResendEmailRequest}
+          onChangeEmailRequest={onChangeEmailRequest}
+        />
+      </Form.Footer>
+    </Form>
+  );
+};
+
+export default AwaitingConfirmationForm;

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

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

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

@@ -6,6 +6,8 @@ it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(
     <AwaitingConfirmationPage
+      currentStep={4}
+      stepCount={4}
       securityCode=''
       emailAddress=''
       onResendEmailRequest={() => undefined}

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

@@ -12,13 +12,19 @@ export default {
     actions: { argTypesRegex: '^on.*' },
     layout: 'fullscreen',
   },
+  argTypes: {
+    onResendEmailRequest: { action: 'resetEmailRequest' },
+    onChangeEmailRequest: { action: 'changeEmailRequest' },
+  },
+  args: {
+    currentStep: 4,
+    stepCount: 4,
+    securityCode: 'Funny Tortoise In The Hat',
+    emailAddress: '[email protected]',
+  },
 } as Meta<Args>;
 
 export const _AwaitingConfirmationPage: Story<Args> = (args) => (
   <AwaitingConfirmationPage {...args} />
 );
 _AwaitingConfirmationPage.storyName = 'AwaitingConfirmationPage';
-_AwaitingConfirmationPage.args = {
-  securityCode: 'Funny Tortoise In The Hat',
-  emailAddress: '[email protected]',
-};

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

@@ -1,55 +1,50 @@
-import { Box } from '@rocket.chat/fuselage';
-import colors from '@rocket.chat/fuselage-tokens/colors.json';
-import {
-  HeroLayout,
-  HeroLayoutTitle,
-  HeroLayoutSubtitle,
-} from '@rocket.chat/layout';
-import type { ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
+import { BackgroundLayer } from '@rocket.chat/layout';
+import type { ReactElement, ReactNode } from 'react';
 
-import EmailCodeFallback from '../../common/EmailCodeFallback';
+import type { FormPageLayoutStyleProps } from '../../Types';
+import FormPageLayout from '../../common/FormPageLayout';
+import AwaitingConfirmationForm from '../../forms/AwaitConfirmationForm';
 
 type AwaitingConfirmationPageProps = {
+  title?: ReactNode;
+  description?: ReactNode;
+  currentStep: number;
+  stepCount: number;
   emailAddress: string;
   securityCode: string;
   onResendEmailRequest: () => void;
   onChangeEmailRequest: () => void;
 };
 
+const pageLayoutStyleProps: FormPageLayoutStyleProps = {
+  justifyContent: 'center',
+};
+
 const AwaitingConfirmationPage = ({
+  title,
+  description,
+  currentStep,
+  stepCount,
   securityCode,
   emailAddress,
   onResendEmailRequest,
   onChangeEmailRequest,
-}: AwaitingConfirmationPageProps): ReactElement => {
-  const { t } = useTranslation();
-
-  return (
-    <HeroLayout>
-      <HeroLayoutTitle>{t('page.awaitingConfirmation.title')}</HeroLayoutTitle>
-      <HeroLayoutSubtitle>
-        {t('page.awaitingConfirmation.subtitle', { emailAddress })}
-      </HeroLayoutSubtitle>
-
-      <Box
-        maxWidth={498}
-        padding={18}
-        width='full'
-        fontSize='x22'
-        lineHeight='x32'
-        backgroundColor={colors.n700}
-        borderRadius='x3'
-      >
-        {securityCode}
-      </Box>
-
-      <EmailCodeFallback
+}: AwaitingConfirmationPageProps): ReactElement => (
+  <BackgroundLayer>
+    <FormPageLayout
+      title={title}
+      styleProps={pageLayoutStyleProps}
+      description={description}
+    >
+      <AwaitingConfirmationForm
+        currentStep={currentStep}
+        stepCount={stepCount}
+        securityCode={securityCode}
+        emailAddress={emailAddress}
         onResendEmailRequest={onResendEmailRequest}
         onChangeEmailRequest={onChangeEmailRequest}
       />
-    </HeroLayout>
-  );
-};
-
+    </FormPageLayout>
+  </BackgroundLayer>
+);
 export default AwaitingConfirmationPage;