✏️ Editing: Notification.js Writable

import {
	createElement,
	Component,
	createRef,
	useState,
	useEffect,
	useRef,
} from '@wordpress/element'
import { __, sprintf } from 'ct-i18n'
import $ from 'jquery'

const Notification = ({ initialStatus, url, pluginUrl, pluginLink }) => {
	const [pluginStatus, setPluginStatus] = useState('installed')

const [isLoading, setIsLoading] = useState(false)

const containerEl = useRef(null)

useEffect(() => {
		setPluginStatus(initialStatus)
	}, [])

const hasDownloadLink =
		pluginStatus === 'uninstalled' &&
		ct_localizations.can_install_plugins !== 'yes'

return (
		<div className="ct-blocksy-plugin-inner" ref={containerEl}>
			<button
				onClick={() => {
					containerEl.current
						.closest('.notice-blocksy-plugin')
						.parentNode.removeChild(
							containerEl.current.closest(
								'.notice-blocksy-plugin'
							)
						)

$.ajax(ajaxurl, {
						type: 'POST',
						data: {
							action: 'blocksy_dismissed_notice_handler',
						},
					})
				}}
				type="button"
				className="notice-dismiss">
				<span className="screen-reader-text">
					{__('Dismiss this notice.', 'blocksy')}
				</span>
			</button>

<div className="ct-notification-content">
				<h2>
					{__('Thanks for installing Blocksy, you rock!', 'blocksy')}
				</h2>

<p
					dangerouslySetInnerHTML={{
						__html: __(
							'We strongly recommend you to activate the <b>Blocksy Companion</b> plugin.<br>This way you will have access to custom extensions, demo templates and many other awesome features.',
							'blocksy'
						),
					}}
				/>

<div className="notice-actions">
					{hasDownloadLink && (
						<a
							className="button button-primary"
							href={
								'https://wordpress.org/plugins/blocksy-companion/'
							}
							target="_blank">
							{__('Download Blocksy Companion', 'blocksy')}
						</a>
					)}

{!hasDownloadLink && (
						<button
							className="button button-primary"
							disabled={isLoading || pluginStatus === 'active'}
							onClick={() => {
								setIsLoading(true)

$.ajax(ajaxurl, {
									type: 'POST',
									data: {
										action: 'blocksy_notice_button_click',
										nonce: ct_localizations.nonce,
									},
								}).then(({ success, data }) => {
									if (success) {
										setPluginStatus(data.status)

if (data.status === 'active') {
											location.assign(pluginUrl)
										}
									}

setIsLoading(false)
								})
							}}>
							{isLoading
								? __('Installing & activating...', 'blocksy')
								: pluginStatus === 'uninstalled'
								? __('Install Blocksy Companion', 'blocksy')
								: pluginStatus === 'installed'
								? __('Activate Blocksy Companion', 'blocksy')
								: __('Blocksy Companion active!', 'blocksy')}
							{isLoading && (
								<i className="dashicons dashicons-update" />
							)}
						</button>
					)}

<a
						className="ct-why-button button"
						href={'https://creativethemes.com/blocksy/companion/'}>
						{__('Why you need Blocksy Companion?', 'blocksy')}
					</a>
				</div>
			</div>
		</div>
	)
}

export default Notification

🔐 Sid Gifari File Manager Pro