| 1 |
import { Button } from '@wordpress/components' |
| 2 |
import { render, useEffect, useRef } from '@wordpress/element' |
| 3 |
import { useState } from '@wordpress/element' |
| 4 |
import { __ } from '@wordpress/i18n' |
| 5 |
import { Icon, close } from '@wordpress/icons' |
| 6 |
import { Dialog } from '@headlessui/react' |
| 7 |
import { SiteSettings } from '@library/api/SiteSettings' |
| 8 |
|
| 9 |
const extendify = Object.assign(document.createElement('div'), { |
| 10 |
id: 'extendify-deactivation-prompt', |
| 11 |
}) |
| 12 |
document.body.append(extendify) |
| 13 |
render(<DeactivationPrompt />, extendify) |
| 14 |
|
| 15 |
export default function DeactivationPrompt() { |
| 16 |
const [isOpen, setIsOpen] = useState(false) |
| 17 |
const shouldDeactivate = useRef(false) |
| 18 |
const initialFocusRef = useRef(null) |
| 19 |
const selector = '#deactivate-extendify' |
| 20 |
|
| 21 |
const closeAndDeactivate = () => { |
| 22 |
shouldDeactivate.current = true |
| 23 |
setIsOpen(false) |
| 24 |
document.querySelector(selector).click() |
| 25 |
} |
| 26 |
|
| 27 |
useEffect(() => { |
| 28 |
const element = document.querySelector(selector) |
| 29 |
if (!element) return |
| 30 |
const handle = (event) => { |
| 31 |
if (shouldDeactivate.current) return |
| 32 |
event.preventDefault() |
| 33 |
setIsOpen(true) |
| 34 |
} |
| 35 |
element.addEventListener('click', handle) |
| 36 |
return () => { |
| 37 |
element.removeEventListener('click', handle) |
| 38 |
} |
| 39 |
}, [setIsOpen]) |
| 40 |
|
| 41 |
return ( |
| 42 |
<Dialog |
| 43 |
as="div" |
| 44 |
className="extendify extendify-deactivation-prompt-modal" |
| 45 |
open={isOpen} |
| 46 |
initialFocus={initialFocusRef} |
| 47 |
onClose={() => setIsOpen(false)}> |
| 48 |
<div className="fixed top-0 mx-auto w-full h-full overflow-hidden p-2 md:p-6 md:flex justify-center items-center z-high"> |
| 49 |
<div |
| 50 |
className="fixed inset-0 bg-black bg-opacity-40 transition-opacity" |
| 51 |
aria-hidden="true" |
| 52 |
/> |
| 53 |
<div className="sm:flex relative shadow-2xl sm:overflow-hidden mx-auto bg-white flex flex-col sm:min-w-md rounded-sm"> |
| 54 |
<div className="flex items-center justify-between"> |
| 55 |
<Dialog.Title className="m-0 px-6 text-base text-gray-900"> |
| 56 |
{__('Keep styles?', 'extendify')} |
| 57 |
</Dialog.Title> |
| 58 |
<Button |
| 59 |
className="border-0 cursor-pointer m-4" |
| 60 |
onClick={() => setIsOpen(false)} |
| 61 |
icon={<Icon icon={close} size={24} />} |
| 62 |
label={__('Close Modal', 'extendify')} |
| 63 |
showTooltip={false} |
| 64 |
/> |
| 65 |
</div> |
| 66 |
<div className="m-0 p-6 pt-0 text-left relative max-w-lg"> |
| 67 |
<p className="mt-0"> |
| 68 |
{__( |
| 69 |
'We detected that you have added some designs from the Site Launcher or Design Library. Click "yes" below to add the styles to your theme (as Additional CSS) so they continue to display properly on your site.', |
| 70 |
'extendify', |
| 71 |
)} |
| 72 |
</p> |
| 73 |
|
| 74 |
<div className="flex justify-end gap-4"> |
| 75 |
<Button |
| 76 |
className="components-button is-secondary" |
| 77 |
onClick={closeAndDeactivate} |
| 78 |
showTooltip={false}> |
| 79 |
{__('Deactivate only', 'extendify')} |
| 80 |
</Button> |
| 81 |
<Button |
| 82 |
ref={initialFocusRef} |
| 83 |
className="components-button is-primary" |
| 84 |
onClick={() => { |
| 85 |
SiteSettings.addUtilsToGlobalStyles().finally( |
| 86 |
closeAndDeactivate, |
| 87 |
) |
| 88 |
}} |
| 89 |
showTooltip={false}> |
| 90 |
{__('Yes, add styles', 'extendify')} |
| 91 |
</Button> |
| 92 |
</div> |
| 93 |
</div> |
| 94 |
</div> |
| 95 |
</div> |
| 96 |
</Dialog> |
| 97 |
) |
| 98 |
} |
| 99 |
|
