feat(onboarding-ui): allow title and subtitle editing (#665)

RocketChat · Mar 21, 2022 · fc7974e · fc7974e
1 parent c53d685
commit fc7974e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/packages/onboarding-ui/src/pages/CheckYourEmailPage/CheckYourEmailPage.stories.tsx b/packages/onboarding-ui/src/pages/CheckYourEmailPage/CheckYourEmailPage.stories.tsx
@@ -1,3 +1,4 @@
+import { action } from '@storybook/addon-actions';
 import type { Story, Meta } from '@storybook/react';
 import type { ComponentProps } from 'react';
 
@@ -12,6 +13,12 @@ export default {
     actions: { argTypesRegex: '^on.*' },
     layout: 'fullscreen',
   },
+  args: {
+    title: '',
+    children: '',
+    onResendEmailRequest: action('onResendEmailRequest'),
+    onChangeEmailRequest: action('onChangeEmailRequest'),
+  },
 } as Meta<Args>;
 
 export const _CheckYourEmailPage: Story<Args> = (args) => (

diff --git a/packages/onboarding-ui/src/pages/CheckYourEmailPage/CheckYourEmailPage.tsx b/packages/onboarding-ui/src/pages/CheckYourEmailPage/CheckYourEmailPage.tsx
@@ -1,22 +1,37 @@
 import { Box, Margins } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
 import BackgroundLayer from '../../common/BackgroundLayer';
 import EmailCodeFallback from '../../common/EmailCodeFallback';
 import { OnboardingLogo } from '../../common/OnboardingLogo';
 
 type CheckYourEmailPageProps = {
+  title?: string;
+  children?: ReactNode;
   onResendEmailRequest: () => void;
   onChangeEmailRequest: () => void;
 };
 
 const CheckYourEmailPage = ({
+  title,
+  children,
   onResendEmailRequest,
   onChangeEmailRequest,
 }: CheckYourEmailPageProps): ReactElement => {
   const { t } = useTranslation();
 
+  const defaultSubtitleComponent = (
+    <Trans i18nKey='page.checkYourEmail.subtitle'>
+      Your request has been sent successfully.
+      <br />
+      Check your email inbox to launch your Enterprise trial.
+    </Trans>
+  );
+
+  title = title || t('page.checkYourEmail.title');
+  children = children || defaultSubtitleComponent;
+
   return (
     <BackgroundLayer>
       <Box
@@ -38,16 +53,10 @@ const CheckYourEmailPage = ({
             lineHeight='x62'
             fontFamily='sans'
           >
-            {t('page.checkYourEmail.title')}
+            {title}
           </Box>
 
-          <Box fontScale='p1'>
-            <Trans i18nKey='page.checkYourEmail.subtitle'>
-              Your request has been sent successfully.
-              <br />
-              Check your email inbox to launch your Enterprise trial.
-            </Trans>
-          </Box>
+          <Box fontScale='p1'>{children}</Box>
 
           <EmailCodeFallback
             onResendEmailRequest={onResendEmailRequest}