mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-10 11:04:50 -05:00
d4bf47932e
* [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
98 lines
3 KiB
TypeScript
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>
|
|
)
|
|
}
|