overleaf/services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/access-levels-changed.tsx
roo hutton 2dcf87e3f6 [web] Share modal shows downgraded editors (#20015)
* add hasBeenDowngraded prop for EditMember

* reduce padding on share modal collab row, add prompt to hasBeenDowngraded Select

* share modal select styling tweaks to allow for inline warning icon

* always show editor limit subtitle when in downgraded state

* add AccessLevelsChanged warning, tweak owner row styling

* conditionally set hasBeenDowngraded prop. make invited member row styling more consistent between warning/enforcement

* add an info state for access level changed notification

* add notification for lost edit access on collaborator share modal, TSify SendInvitesNotice

* fix member privilege alignment in collaborator share modal

* show blue upgrade CTA when some pending editors have been resolved

* automatically show share modal to owners when has pending editors or is over collab limit

* only show lost edit access warning in read-only share modal to pending editors

---------

Co-authored-by: Thomas <thomas-@users.noreply.github.com>
GitOrigin-RevId: e3b88052a48b8f598299ffc55b7c24cb793da151
2024-08-27 08:04:49 +00:00

84 lines
2.6 KiB
TypeScript

import { useTranslation } from 'react-i18next'
import { Button } from 'react-bootstrap'
import Notification from '@/shared/components/notification'
import { upgradePlan } from '../../../../main/account-upgrade'
import { useProjectContext } from '@/shared/context/project-context'
import { useUserContext } from '@/shared/context/user-context'
import { sendMB } from '@/infrastructure/event-tracking'
import StartFreeTrialButton from '@/shared/components/start-free-trial-button'
type AccessLevelsChangedProps = {
somePendingEditorsResolved: boolean
}
export default function AccessLevelsChanged({
somePendingEditorsResolved,
}: AccessLevelsChangedProps) {
const { t } = useTranslation()
const { features } = useProjectContext()
const user = useUserContext()
return (
<div className="add-collaborators-upgrade">
<Notification
isActionBelowContent
type={somePendingEditorsResolved ? 'info' : 'warning'}
title={
somePendingEditorsResolved
? t('select_access_levels')
: t('access_levels_changed')
}
content={
somePendingEditorsResolved ? (
<p>{t('your_project_exceeded_editor_limit')}</p>
) : (
<p>
{t('this_project_exceeded_editor_limit')}{' '}
{t('you_can_select_or_invite', {
count: features.collaborators,
})}
</p>
)
}
action={
<div className="upgrade-actions">
{user.allowedFreeTrial ? (
<StartFreeTrialButton
buttonProps={{ variant: 'secondary', size: 'small' }}
source="project-sharing"
variant="exceeds"
>
{t('upgrade')}
</StartFreeTrialButton>
) : (
<Button
bsSize="sm"
className="btn-secondary"
onClick={() => {
upgradePlan('project-sharing')
}}
>
{t('upgrade')}
</Button>
)}
<Button
href="https://www.overleaf.com/blog/changes-to-project-sharing"
bsSize="sm"
className="btn-link"
target="_blank"
rel="noreferrer"
onClick={() => {
sendMB('paywall-info-click', {
'paywall-type': 'project-sharing',
content: 'blog',
variant: 'exceeds',
})
}}
>
{t('read_more')}
</Button>
</div>
}
/>
</div>
)
}