feat(onboarding-ui): Invalid Link page (#496)

* new: invalid link page

* chore: loki

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

@@ -24,6 +24,13 @@
     },
     "confirmationProcess": {
       "title": "Confirmation in Process"
+    },
+    "invalidLink": {
+      "title": "Your Link is no Longer Valid",
+      "content": "Seems like you have already used invite link. It’s generated for a single sign in. Request a new one to join your workspace.",
+      "button": {
+        "text": "Request new link"
+      }
     }
   },
   "form": {

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

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

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

@@ -0,0 +1,20 @@
+import type { Story, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import InvalidLinkPage from './InvalidLinkPage';
+
+type Args = ComponentProps<typeof InvalidLinkPage>;
+
+export default {
+  title: 'pages/InvalidLinkPage',
+  component: InvalidLinkPage,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    layout: 'fullscreen',
+  },
+} as Meta<Args>;
+
+export const _InvalidLinkPage: Story<Args> = (args) => (
+  <InvalidLinkPage {...args} />
+);
+_InvalidLinkPage.storyName = 'InvalidLinkPage';

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

@@ -0,0 +1,58 @@
+import { Box, Margins, Button } from '@rocket.chat/fuselage';
+import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import BackgroundLayer from '../../common/BackgroundLayer';
+import { useDarkMode } from '../../common/DarkModeProvider';
+import RocketChatLogo from '../../common/RocketChatLogo';
+
+type InvalidLinkPageProps = {
+  onRequestNewLink: () => void;
+};
+
+const InvalidLinkPage = ({
+  onRequestNewLink,
+}: InvalidLinkPageProps): ReactElement => {
+  const darkMode = useDarkMode();
+  const { t } = useTranslation();
+
+  return (
+    <BackgroundLayer>
+      <Box
+        display='flex'
+        flexDirection='column'
+        alignItems='center'
+        textAlign='center'
+        width='100%'
+        maxWidth={576}
+        paddingBlock={32}
+        paddingInline={16}
+        color={darkMode ? colors.white : colors.n900}
+      >
+        <Margins blockEnd={32}>
+          <Box width='100%' maxWidth={180}>
+            <RocketChatLogo />
+          </Box>
+
+          <Box
+            fontWeight={800}
+            fontSize='x52'
+            lineHeight='x62'
+            fontFamily='sans'
+          >
+            {t('page.invalidLink.title')}
+          </Box>
+
+          <Box fontScale='s1'>{t('page.invalidLink.content')}</Box>
+
+          <Button onClick={onRequestNewLink} primary>
+            {t('page.invalidLink.button.text')}
+          </Button>
+        </Margins>
+      </Box>
+    </BackgroundLayer>
+  );
+};
+
+export default InvalidLinkPage;

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

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