overleaf/services/web/frontend/js/features/subscription/components/group-invite/join-group.tsx
Jessica Lawshe c6b88085d5 Merge pull request #18188 from overleaf/jel-react-group-invite
[web] Migrate team invite to React

GitOrigin-RevId: 32e968c3b512020aef9a396808c73a7b4859e6d1
2024-05-09 08:05:03 +00:00

73 lines
1.8 KiB
TypeScript

import { Dispatch, SetStateAction, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { InviteViewTypes } from './group-invite'
import getMeta from '@/utils/meta'
import { FetchError, putJSON } from '@/infrastructure/fetch-json'
import useAsync from '@/shared/hooks/use-async'
import classNames from 'classnames'
import { debugConsole } from '@/utils/debugging'
import Notification from '@/shared/components/notification'
export default function JoinGroup({
setView,
}: {
setView: Dispatch<SetStateAction<InviteViewTypes>>
}) {
const { t } = useTranslation()
const expired = getMeta('ol-expired') as boolean
const inviteToken = getMeta('ol-inviteToken') as string
const {
runAsync,
isLoading: isJoining,
isError,
} = useAsync<never, FetchError>()
const notNowBtnClasses = classNames(
'btn',
'btn-secondary',
isJoining ? 'disabled' : ''
)
const joinTeam = useCallback(() => {
runAsync(putJSON(`/subscription/invites/${inviteToken}`))
.then(() => {
setView('invite-accepted')
})
.catch(debugConsole.error)
}, [inviteToken, runAsync, setView])
if (!inviteToken) {
return null
}
return (
<>
{isError && (
<Notification
type="error"
content={t('generic_something_went_wrong')}
className="my-3"
/>
)}
<div className="text-center">
<p>{t('join_team_explanation')}</p>
{!expired && (
<p>
<a className={notNowBtnClasses} href="/project">
{t('not_now')}
</a>
&nbsp;&nbsp;
<button
className="btn btn-primary"
onClick={() => joinTeam()}
disabled={isJoining}
>
{t('accept_invitation')}
</button>
</p>
)}
</div>
</>
)
}