first commit

services/web/frontend/js/features/subscription/components/group-invites/group-invites-item-footer.tsx

@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next'
+import type { TeamInvite } from '../../../../../../types/team-invite'
+
+type GroupInvitesItemFooterProps = {
+  teamInvite: TeamInvite
+}
+
+export default function GroupInvitesItemFooter({
+  teamInvite,
+}: GroupInvitesItemFooterProps) {
+  const { t } = useTranslation()
+
+  return (
+    <div>
+      <p data-cy="group-invites-item-footer-text">
+        {t('join_team_explanation')}
+      </p>
+      <div data-cy="group-invites-item-footer-link">
+        <a
+          className="btn btn-primary"
+          href={`/subscription/invites/${teamInvite.token}`}
+        >
+          {t('view_invitation')}
+        </a>
+      </div>
+    </div>
+  )
+}

services/web/frontend/js/features/subscription/components/group-invites/group-invites-item.tsx

@@ -0,0 +1,38 @@
+import { Trans } from 'react-i18next'
+import GroupInvitesItemFooter from './group-invites-item-footer'
+import type { TeamInvite } from '../../../../../../types/team-invite'
+import OLPageContentCard from '@/features/ui/components/ol/ol-page-content-card'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLCol from '@/features/ui/components/ol/ol-col'
+
+type GroupInvitesItemProps = {
+  teamInvite: TeamInvite
+}
+
+export default function GroupInvitesItem({
+  teamInvite,
+}: GroupInvitesItemProps) {
+  return (
+    <OLRow className="row-spaced">
+      <OLCol lg={{ span: 8, offset: 2 }} className="text-center">
+        <OLPageContentCard>
+          <div className="page-header">
+            <h2>
+              <Trans
+                i18nKey="invited_to_group"
+                values={{ inviterName: teamInvite.inviterName }}
+                shouldUnescape
+                tOptions={{ interpolation: { escapeValue: true } }}
+                components={
+                  /* eslint-disable-next-line react/jsx-key */
+                  [<span className="team-invite-name" />]
+                }
+              />
+            </h2>
+          </div>
+          <GroupInvitesItemFooter teamInvite={teamInvite} />
+        </OLPageContentCard>
+      </OLCol>
+    </OLRow>
+  )
+}

services/web/frontend/js/features/subscription/components/group-invites/group-invites-root.tsx

@@ -0,0 +1,14 @@
+import useWaitForI18n from '../../../../shared/hooks/use-wait-for-i18n'
+import GroupInvites from './group-invites'
+
+function GroupInvitesRoot() {
+  const { isReady } = useWaitForI18n()
+
+  if (!isReady) {
+    return null
+  }
+
+  return <GroupInvites />
+}
+
+export default GroupInvitesRoot

services/web/frontend/js/features/subscription/components/group-invites/group-invites.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import getMeta from '@/utils/meta'
+import { useLocation } from '@/shared/hooks/use-location'
+import GroupInvitesItem from './group-invites-item'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLCol from '@/features/ui/components/ol/ol-col'
+
+function GroupInvites() {
+  const { t } = useTranslation()
+  const teamInvites = getMeta('ol-teamInvites')
+  const location = useLocation()
+
+  useEffect(() => {
+    if (teamInvites.length === 0) {
+      location.assign('/project')
+    }
+  }, [teamInvites, location])
+
+  return (
+    <div className="container">
+      <OLRow>
+        <OLCol lg={{ span: 8, offset: 2 }}>
+          <h1>{t('group_invitations')}</h1>
+        </OLCol>
+      </OLRow>
+      {teamInvites.map(teamInvite => (
+        <GroupInvitesItem teamInvite={teamInvite} key={teamInvite._id} />
+      ))}
+    </div>
+  )
+}
+
+export default GroupInvites