feat(onboarding-ui): create redirect page (#667)

Author: PedroRorato

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

@@ -113,6 +113,10 @@
       "sla": "SLA: Premium",
       "push": "Unlimited push notifications",
       "engagement": "Engagement Dashboard"
+    },
+    "redirect": {
+      "subtitle": "Redirecting in {{seconds}} seconds",
+      "redirectNotWorking": "Redirect not working? <1>Open workspace</1>"
     }
   },
   "form": {

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

@@ -0,0 +1,14 @@
+import ReactDOM from 'react-dom';
+
+import RedirectPage from './RedirectPage';
+
+const onRedirect = jest.fn();
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(
+    <RedirectPage title='Ready' countDownSeconds={5} onRedirect={onRedirect} />,
+    div
+  );
+  ReactDOM.unmountComponentAtNode(div);
+});

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

@@ -0,0 +1,24 @@
+import { action } from '@storybook/addon-actions';
+import type { Story, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import RedirectPage from './RedirectPage';
+
+type Args = ComponentProps<typeof RedirectPage>;
+
+export default {
+  title: 'pages/RedirectPage',
+  component: RedirectPage,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Kapai workspace is ready! 🚀',
+    countDownSeconds: 5,
+    onRedirect: action('onRedirect'),
+  },
+} as Meta<Args>;
+
+export const _RedirectPage: Story<Args> = (args) => <RedirectPage {...args} />;
+_RedirectPage.storyName = 'RedirectPage';

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

@@ -0,0 +1,70 @@
+import { Box, Margins } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+import { useEffect, useState } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+
+import ActionLink from '../../common/ActionLink';
+import BackgroundLayer from '../../common/BackgroundLayer';
+import { OnboardingLogo } from '../../common/OnboardingLogo';
+
+type RedirectPageProps = {
+  title: string;
+  countDownSeconds: number;
+  onRedirect: () => void;
+};
+
+const RedirectPage = ({
+  title,
+  countDownSeconds,
+  onRedirect,
+}: RedirectPageProps): ReactElement => {
+  const { t } = useTranslation();
+
+  const [seconds, setSeconds] = useState(countDownSeconds);
+
+  const countDown = () => {
+    setInterval(() => {
+      setSeconds((prev) => (prev === 0 ? 0 : prev - 1));
+    }, 1000);
+  };
+
+  useEffect(() => {
+    countDown();
+  }, []);
+
+  useEffect(() => {
+    if (seconds === 0) onRedirect();
+  }, [seconds]);
+
+  return (
+    <BackgroundLayer>
+      <Box
+        display='flex'
+        flexDirection='column'
+        alignItems='center'
+        textAlign='center'
+        width='100%'
+        maxWidth={768}
+        paddingBlock={32}
+        paddingInline={16}
+      >
+        <Margins blockEnd={32}>
+          <OnboardingLogo />
+
+          <Box fontScale='hero'>{title}</Box>
+
+          <Box fontScale='p1b'>{t('page.redirect.subtitle', { seconds })}</Box>
+
+          <Box fontScale='c1'>
+            <Trans i18nKey='page.redirect.redirectNotWorking'>
+              Redirect not working?
+              <ActionLink onClick={onRedirect}>Open workspace</ActionLink>
+            </Trans>
+          </Box>
+        </Margins>
+      </Box>
+    </BackgroundLayer>
+  );
+};
+
+export default RedirectPage;

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

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