From 19fc58d906a83a947c7bd6307fc827e932f1942a Mon Sep 17 00:00:00 2001
From: Pedro Rorato <pedroberorato@gmail.com>
Date: Wed, 16 Mar 2022 17:27:31 -0300
Subject: [PATCH] feat(onboarding-ui): allow title and subtitle editing

---
 .../CheckYourEmailPage.stories.tsx            |  7 +++++
 .../CheckYourEmailPage/CheckYourEmailPage.tsx | 27 ++++++++++++-------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/onboarding-ui/src/pages/CheckYourEmailPage/CheckYourEmailPage.stories.tsx b/packages/onboarding-ui/src/pages/CheckYourEmailPage/CheckYourEmailPage.stories.tsx
index ddc2ff2738..f774a118af 100644
--- 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
index a45b682d55..e3b3ceeb71 100644
--- a/packages/onboarding-ui/src/pages/CheckYourEmailPage/CheckYourEmailPage.tsx
+++ b/packages/onboarding-ui/src/pages/CheckYourEmailPage/CheckYourEmailPage.tsx
@@ -1,5 +1,5 @@
 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';
@@ -7,16 +7,31 @@ 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}