overleaf/services/web/frontend/js/features/ide-react/components/modals/project-converted-from-document-modal.tsx

import { useTranslation } from 'react-i18next'
import {
  OLModal,
  OLModalBody,
  OLModalFooter,
  OLModalHeader,
  OLModalTitle,
} from '@/shared/components/ol/ol-modal'
import OLButton from '@/shared/components/ol/ol-button'
import { useEffect, useState } from 'react'
import { showImportDocumentFeedbackToast } from '@/features/project-list/components/new-project-button/import-document-feedback-toast'

function ProjectConvertedFromDocumentModal() {
  const [convertedFrom, setConvertedFrom] = useState<string | null>(null)

  useEffect(() => {
    const queryString = new URLSearchParams(window.location.search)
    const from = queryString.get('converted-from')

    if (from) {
      setConvertedFrom(from)

      // Clean the URL immediately so a refresh doesn't trigger the modal again,
      // but preserve other search params and the hash.
      const url = new URL(window.location.href)
      url.searchParams.delete('converted-from')
      window.history.replaceState(window.history.state, '', url.toString())
    }
  }, [])

  return (
    <>
      {convertedFrom && (
        <ProjectConvertedFromImportModalContent
          onHide={() => {
            setConvertedFrom(null)
            if (convertedFrom === 'docx' || convertedFrom === 'markdown') {
              showImportDocumentFeedbackToast(convertedFrom)
            }
          }}
        />
      )}
    </>
  )
}

function ProjectConvertedFromImportModalContent({
  onHide,
}: {
  onHide: () => void
}) {
  const { t } = useTranslation()

  return (
    <OLModal
      show
      animation
      onHide={onHide}
      id="converted-from-document-modal"
      backdrop="static"
    >
      <OLModalHeader>
        <OLModalTitle as="h3">{t('document_ready_for_editing')}</OLModalTitle>
      </OLModalHeader>
      <OLModalBody>{t('weve_converted_your_content_to_latex')}</OLModalBody>
      <OLModalFooter>
        <OLButton variant="primary" onClick={onHide}>
          {t('start_editing')}
        </OLButton>
      </OLModalFooter>
    </OLModal>
  )
}

export default ProjectConvertedFromDocumentModal