mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-24 21:12:38 -04:00
80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
|
import { useEffect, useState } from 'react'
|
||
|
import AccessibleModal from '@/shared/components/accessible-modal'
|
||
|
import ViewOnlyAccessModalContent from './view-only-access-modal-content'
|
||
|
import customLocalStorage from '@/infrastructure/local-storage'
|
||
|
import { useProjectContext } from '@/shared/context/project-context'
|
||
|
import { useEditorContext } from '@/shared/context/editor-context'
|
||
|
import { sendMB } from '@/infrastructure/event-tracking'
|
||
|
|
||
|
const ViewOnlyAccessModal = () => {
|
||
|
const [show, setShow] = useState(false)
|
||
|
|
||
|
const { isProjectOwner, isPendingEditor, permissionsLevel } =
|
||
|
useEditorContext()
|
||
|
const { members, features, _id: projectId } = useProjectContext()
|
||
|
|
||
|
const handleHide = () => {
|
||
|
setShow(false)
|
||
|
}
|
||
|
|
||
|
// split test: link-sharing-enforcement
|
||
|
// show the view-only access modal if
|
||
|
// is editor on a project over
|
||
|
// collaborator limit (once every week)
|
||
|
useEffect(() => {
|
||
|
const showModalCooldownHours = 24 * 7 // 7 days
|
||
|
const shouldShowToPendingEditor = () => {
|
||
|
if (isProjectOwner || !features) {
|
||
|
return false
|
||
|
}
|
||
|
|
||
|
if (features.collaborators === -1) {
|
||
|
return false
|
||
|
}
|
||
|
return isPendingEditor
|
||
|
}
|
||
|
|
||
|
if (shouldShowToPendingEditor()) {
|
||
|
const localStorageKey = `last-shown-view-only-access-modal.${projectId}`
|
||
|
const lastShownNeedEditModalTime =
|
||
|
customLocalStorage.getItem(localStorageKey)
|
||
|
if (
|
||
|
!lastShownNeedEditModalTime ||
|
||
|
lastShownNeedEditModalTime + showModalCooldownHours * 60 * 60 * 1000 <
|
||
|
Date.now()
|
||
|
) {
|
||
|
setShow(true)
|
||
|
customLocalStorage.setItem(localStorageKey, Date.now())
|
||
|
sendMB('notification-prompt', {
|
||
|
name: 'link-sharing-collaborator-limit',
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
}, [
|
||
|
features,
|
||
|
isProjectOwner,
|
||
|
isPendingEditor,
|
||
|
members,
|
||
|
permissionsLevel,
|
||
|
projectId,
|
||
|
])
|
||
|
|
||
|
return show ? (
|
||
|
<AccessibleModal
|
||
|
animation
|
||
|
show={show}
|
||
|
onHide={() => {
|
||
|
sendMB('notification-dismiss', {
|
||
|
name: 'link-sharing-collaborator-limit',
|
||
|
})
|
||
|
handleHide()
|
||
|
}}
|
||
|
id="editor-over-limit-modal"
|
||
|
>
|
||
|
<ViewOnlyAccessModalContent handleHide={handleHide} />
|
||
|
</AccessibleModal>
|
||
|
) : null
|
||
|
}
|
||
|
|
||
|
export default ViewOnlyAccessModal
|