feat(onboarding-ui): Add SomethingWentWrongPage Component (#624)

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

@@ -97,6 +97,10 @@
     },
     "createPasswordPage": {
       "title": "Create new password"
+    },
+    "somethingWentWrongPage": {
+      "title": "Something went wrong",
+      "subtitle": "Please, contact support."
     }
   },
   "form": {

packages/onboarding-ui/src/index.ts

@@ -17,3 +17,4 @@ export { default as ResetPasswordPage } from './pages/ResetPasswordPage';
 export { default as CreateNewPasswordPage } from './pages/CreateNewPasswordPage';
 export { default as ResetPasswordConfirmationPage } from './pages/ResetPasswordConfirmationPage';
 export { default as OauthAuthorizationPage } from './pages/OauthAuthorizationPage';
+export { default as SomethingWentWrongPage } from './pages/SomethingWentWrongPage';

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

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

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

@@ -0,0 +1,16 @@
+import type { Story, Meta } from '@storybook/react';
+
+import SomethingWentWrongPage from './SomethingWentWrongPage';
+
+export default {
+  title: 'pages/SomethingWentWrongPage',
+  component: SomethingWentWrongPage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+export const _SomethingWentWrongPage: Story = (args) => (
+  <SomethingWentWrongPage {...args} />
+);
+_SomethingWentWrongPage.storyName = 'SomethingWentWrongPage';

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

@@ -0,0 +1,42 @@
+import { Box, Margins } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import BackgroundLayer from '../../common/BackgroundLayer';
+import { OnboardingLogo } from '../../common/OnboardingLogo';
+
+const SomethingWentWrongPage = (): ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <BackgroundLayer>
+      <Box
+        display='flex'
+        flexDirection='column'
+        alignItems='center'
+        textAlign='center'
+        width='100%'
+        maxWidth={624}
+        paddingBlock={32}
+        paddingInline={16}
+      >
+        <Margins blockEnd={32}>
+          <OnboardingLogo />
+
+          <Box
+            fontWeight={800}
+            fontSize='x52'
+            lineHeight='x62'
+            fontFamily='sans'
+          >
+            {t('page.somethingWentWrongPage.title')}
+          </Box>
+
+          <Box fontScale='p1'>{t('page.somethingWentWrongPage.subtitle')}</Box>
+        </Margins>
+      </Box>
+    </BackgroundLayer>
+  );
+};
+
+export default SomethingWentWrongPage;

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

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