overleaf/services/web/frontend/js/features/subscription/components/group-invite/group-invite.tsx
Antoine Clausse d4bf47932e [web] Migrate /subscription/invites/:token to BS5 (#20640)
* [web] Wiring work for `/subscription/invites/:token` BS5 migration

* [web] Add SCSS for .enrollment-invite

* [web] Update invite_logged_out PUG file for BS5

* [web] Update `GroupInviteViews` (and children) to BS5

* [web] Update `InviteManaged` to BS5

* [web] Update Logout button

* [web] Update subtitles

This removes the `text-overflow:ellipsis`. I think it's better without it, because it can be an accessibility issue.

* [web] Add margin on inner-card

* [web] Style action buttons in InviteManaged

* [web] Add missing container around Row

This was causing the row to overflow the body.

Increased the col width to compensate.

* [web] Fixup lint

* [web] Fix `ManagedUserCannotJoin` title in BS3 (!)

I checked all the other `OLNotification`: we don't use `title` anywhere else

* [web] Put title in OLNotification content

See https://github.com/overleaf/internal/pull/20640#discussion_r1777551257

* [web] Use translations for "aria-label="Email address""

* [web] Handle OLButton `isLoading` in `bs3Props`

* [web] Remove duplicated `btn` class

* [web] Add margin-bottom to InviteManaged title and fix logout button CSS in BS3

* [web] Adjust col class in Pug file for BS3 and BS5

* [web] Revert migration to OLNotification

Revert back to `@/shared/components/notification`

* [web] Add note to remove .team-invite-name after BS5 migration

* [web] Set `btn-link-logout` in BS3 only

* [web] Update OLButton so other classNames automatically get passed to the BS3 implementation

* [web] Revert OLButton changes for BS3 classnames

Co-authored-by: Rebeka <rebeka.dekany@overleaf.com>

* [web] Update services/web/modules/group-settings/frontend/js/components/invite-managed.tsx

Co-authored-by: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>

* [web] Use OLFormGroup `controlId`

---------

Co-authored-by: Rebeka <rebeka.dekany@overleaf.com>
Co-authored-by: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
GitOrigin-RevId: 64b3f79c83002a9c9585bfb8e344e80b2e8eac5c
2024-10-01 08:05:09 +00:00

98 lines
3 KiB
TypeScript

import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
import getMeta from '@/utils/meta'
import HasIndividualRecurlySubscription from './has-individual-recurly-subscription'
import { useEffect, useState } from 'react'
import { useTranslation, Trans } from 'react-i18next'
import ManagedUserCannotJoin from './managed-user-cannot-join'
import Notification from '@/shared/components/notification'
import JoinGroup from './join-group'
import AcceptedInvite from './accepted-invite'
import OLRow from '@/features/ui/components/ol/ol-row'
import OLCol from '@/features/ui/components/ol/ol-col'
import OLCard from '@/features/ui/components/ol/ol-card'
export type InviteViewTypes =
| 'invite'
| 'invite-accepted'
| 'cancel-personal-subscription'
| 'managed-user-cannot-join'
| undefined
function GroupInviteViews() {
const hasIndividualRecurlySubscription = getMeta(
'ol-hasIndividualRecurlySubscription'
)
const cannotJoinSubscription = getMeta('ol-cannot-join-subscription')
useEffect(() => {
if (cannotJoinSubscription) {
setView('managed-user-cannot-join')
} else if (hasIndividualRecurlySubscription) {
setView('cancel-personal-subscription')
} else {
setView('invite')
}
}, [cannotJoinSubscription, hasIndividualRecurlySubscription])
const [view, setView] = useState<InviteViewTypes>(undefined)
if (!view) {
return null
}
if (view === 'managed-user-cannot-join') {
return <ManagedUserCannotJoin />
} else if (view === 'cancel-personal-subscription') {
return <HasIndividualRecurlySubscription setView={setView} />
} else if (view === 'invite') {
return <JoinGroup setView={setView} />
} else if (view === 'invite-accepted') {
return <AcceptedInvite />
}
return null
}
export default function GroupInvite() {
const inviterName = getMeta('ol-inviterName')
const expired = getMeta('ol-expired')
const { isReady } = useWaitForI18n()
const { t } = useTranslation()
if (!isReady) {
return null
}
return (
<div className="container" id="main-content">
{expired && (
<OLRow>
<OLCol lg={{ span: 8, offset: 2 }}>
<Notification type="error" content={t('email_link_expired')} />
</OLCol>
</OLRow>
)}
<OLRow className="row row-spaced">
<OLCol lg={{ span: 8, offset: 2 }}>
<OLCard>
<div className="page-header">
<h1 className="text-center">
<Trans
i18nKey="invited_to_group"
values={{ inviterName }}
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
components={
/* eslint-disable-next-line react/jsx-key */
[<span className="team-invite-name" />]
}
/>
</h1>
</div>
<GroupInviteViews />
</OLCard>
</OLCol>
</OLRow>
</div>
)
}