diff --git a/.changeset/stupid-mayflies-look.md b/.changeset/stupid-mayflies-look.md new file mode 100644 index 0000000000..edc22cc156 --- /dev/null +++ b/.changeset/stupid-mayflies-look.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/onboarding-ui": patch +--- + +refactor(onboarding-ui): Rewrite `AwaitingConfirmationPage` page diff --git a/packages/onboarding-ui/.i18n/en.i18n.json b/packages/onboarding-ui/.i18n/en.i18n.json index 40587cdfb6..f5ebc0e616 100644 --- a/packages/onboarding-ui/.i18n/en.i18n.json +++ b/packages/onboarding-ui/.i18n/en.i18n.json @@ -12,7 +12,7 @@ }, "termsAndConditions": "I agree with <1>Terms and Conditions and <3>Privacy Policy" }, - "emailCodeFallback": "Didn’t receive email? <1>Resend or <3>Change email", + "emailCodeFallback": "Didn’t receive email? <1>Resend or <3>Change email.", "manageWorkspaceFallback": "Already have an account? <1>Manage your workspaces.", "createNewAccountPage": "Already registered? <1>Go to login", "wantToLogin": "Want to log in? <1>Go to login" @@ -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}} 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.", diff --git a/packages/onboarding-ui/src/flows/SelfHostedRegistration/stories.tsx b/packages/onboarding-ui/src/flows/SelfHostedRegistration/stories.tsx index 8c91dc5994..9f6487b2e5 100644 --- a/packages/onboarding-ui/src/flows/SelfHostedRegistration/stories.tsx +++ b/packages/onboarding-ui/src/flows/SelfHostedRegistration/stories.tsx @@ -159,6 +159,8 @@ export const SelfHostedRegistration: Story = ({ offline }) => { return ( navigateTo('/admin-info')} diff --git a/packages/onboarding-ui/src/forms/AwaitConfirmationForm/AwaitConfirmationForm.spec.tsx b/packages/onboarding-ui/src/forms/AwaitConfirmationForm/AwaitConfirmationForm.spec.tsx new file mode 100644 index 0000000000..db691391c4 --- /dev/null +++ b/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( + true} + onChangeEmailRequest={() => true} + />, + div + ); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/packages/onboarding-ui/src/forms/AwaitConfirmationForm/AwaitConfirmationForm.stories.tsx b/packages/onboarding-ui/src/forms/AwaitConfirmationForm/AwaitConfirmationForm.stories.tsx new file mode 100644 index 0000000000..4d8926a555 --- /dev/null +++ b/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; + +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: 'emailname@email.com', + }, +} as Meta; + +export const _AwaitConfirmationForm: Story = (args) => ( + +); +_AwaitConfirmationForm.storyName = 'AwaitConfirmationForm'; diff --git a/packages/onboarding-ui/src/forms/AwaitConfirmationForm/AwaitConfirmationForm.tsx b/packages/onboarding-ui/src/forms/AwaitConfirmationForm/AwaitConfirmationForm.tsx new file mode 100644 index 0000000000..383c984546 --- /dev/null +++ b/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 ( +
+ + + {t('form.awaitConfirmationForm.title')} + + + + + Email sent to {{ emailAddress }} with a + confirmation link.Please verify that the security code below matches + the one in the email. + + + + + + + +
+ ); +}; + +export default AwaitingConfirmationForm; diff --git a/packages/onboarding-ui/src/forms/AwaitConfirmationForm/index.ts b/packages/onboarding-ui/src/forms/AwaitConfirmationForm/index.ts new file mode 100644 index 0000000000..b3169b4026 --- /dev/null +++ b/packages/onboarding-ui/src/forms/AwaitConfirmationForm/index.ts @@ -0,0 +1 @@ +export { default } from './AwaitConfirmationForm'; diff --git a/packages/onboarding-ui/src/pages/AwaitingConfirmationPage/AwaitingConfirmationPage.spec.tsx b/packages/onboarding-ui/src/pages/AwaitingConfirmationPage/AwaitingConfirmationPage.spec.tsx index bbfd05f838..fd2a1d9c6a 100644 --- a/packages/onboarding-ui/src/pages/AwaitingConfirmationPage/AwaitingConfirmationPage.spec.tsx +++ b/packages/onboarding-ui/src/pages/AwaitingConfirmationPage/AwaitingConfirmationPage.spec.tsx @@ -6,6 +6,8 @@ it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render( undefined} diff --git a/packages/onboarding-ui/src/pages/AwaitingConfirmationPage/AwaitingConfirmationPage.stories.tsx b/packages/onboarding-ui/src/pages/AwaitingConfirmationPage/AwaitingConfirmationPage.stories.tsx index 2909221ae3..f9bf1b424e 100644 --- a/packages/onboarding-ui/src/pages/AwaitingConfirmationPage/AwaitingConfirmationPage.stories.tsx +++ b/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: 'emailname@email.com', + }, } as Meta; export const _AwaitingConfirmationPage: Story = (args) => ( ); _AwaitingConfirmationPage.storyName = 'AwaitingConfirmationPage'; -_AwaitingConfirmationPage.args = { - securityCode: 'Funny Tortoise In The Hat', - emailAddress: 'emailname@email.com', -}; diff --git a/packages/onboarding-ui/src/pages/AwaitingConfirmationPage/AwaitingConfirmationPage.tsx b/packages/onboarding-ui/src/pages/AwaitingConfirmationPage/AwaitingConfirmationPage.tsx index dbcdb8d8bf..7b4e48e895 100644 --- a/packages/onboarding-ui/src/pages/AwaitingConfirmationPage/AwaitingConfirmationPage.tsx +++ b/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 ( - - {t('page.awaitingConfirmation.title')} - - {t('page.awaitingConfirmation.subtitle', { emailAddress })} - - - - {securityCode} - - - ( + + + - - ); -}; - + + +); export default AwaitingConfirmationPage;