import {createRef, useEffect, useState} from "react"; import {__, CouponsPlus} from "./globals"; const urlsManager = { current: null } document.addEventListener('CouponURLsInit', ({detail: {manager}}) => { urlsManager.current = manager }) const CouponURLsPanel = () => { const ref = createRef() const [urlsDashboardManager, setUrlsDashboardManager] = useState(urlsManager.current); useEffect(() => { /* In case of race conditions */ document.addEventListener('CouponURLsInit', ({detail: {manager}}) => { setUrlsDashboardManager(manager) }) }, []) useEffect(() => { if (!CouponsPlus?.compatibility?.couponURLs?.isAvailable) { return } if (!urlsDashboardManager) { console.error('urlsDashboardManager is not available') return } const dashboard = urlsDashboardManager.getMainElement() ref.current.appendChild(dashboard) urlsDashboardManager.open() //will run on unmount return () => { urlsDashboardManager.close() document.body.appendChild(dashboard) } }, [ref, urlsDashboardManager]) if (!CouponsPlus?.compatibility?.couponURLs?.isAvailable) { return

{__('Coupon URLs extension needs to be installed!', window.CouponsPlus.textDomain)}

{__('Coupons+ works great with the free Coupon URLs extension. Click on the button bellow to install it.', window.CouponsPlus.textDomain)}

{ }}> {__('Install extension', window.CouponsPlus.textDomain)}
} return
; } CouponURLsPanel.label = __('URL', window.CouponsPlus.textDomain) CouponURLsPanel.getIcon = () => export default CouponURLsPanel;