2025-04-24 13:11:28 +08:00

74 lines
2.2 KiB
TypeScript

import { useEffect, useState } from 'react'
import EditorOverLimitModalContent from './editor-over-limit-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'
import OLModal from '@/features/ui/components/ol/ol-modal'
const EditorOverLimitModal = () => {
const [show, setShow] = useState(false)
const { isProjectOwner, permissionsLevel } = useEditorContext()
const { members, features, _id: projectId } = useProjectContext()
const handleHide = () => {
setShow(false)
}
// show the over-limit warning if user
// is editor on a project over
// collaborator limit (once every 24 hours)
useEffect(() => {
const showModalCooldownHours = 24
const hasExceededCollaboratorLimit = () => {
if (isProjectOwner || !features || permissionsLevel === 'readOnly') {
return false
}
if (features.collaborators === -1) {
return false
}
return (
members.filter(member => member.privileges === 'readAndWrite').length >
(features.collaborators ?? 1)
)
}
if (hasExceededCollaboratorLimit()) {
const localStorageKey = `last-shown-need-edit-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, members, permissionsLevel, projectId])
return show ? (
<OLModal
animation
show={show}
onHide={() => {
sendMB('notification-dismiss', {
name: 'link-sharing-collaborator-limit',
})
handleHide()
}}
id="editor-over-limit-modal"
>
<EditorOverLimitModalContent handleHide={handleHide} />
</OLModal>
) : null
}
export default EditorOverLimitModal