Back

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useAICheckout, useAiFeature } from '@automattic/jetpack-ai-client';
import { Button, Notice } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { useCallback, useEffect, useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { recordAiEvent } from '../lib/tracks';
import { AI_STORE_NAME } from '../store';
 
export default function UpgradeNotice() {
	const { hasFeature } = useAiFeature();
	const { checkoutUrl } = useAICheckout();
	const { dismissBanner, hideUpgradeNotice } = useDispatch( AI_STORE_NAME );
	const dismissed = useSelect( select => select( AI_STORE_NAME ).isBannerDismissed(), [] );
	const forced = useSelect( select => select( AI_STORE_NAME ).isUpgradeNoticeForced(), [] );
	const containerRef = useRef( null );
 
	// When a Generate click resurfaces the notice, scroll it into view — the
	// per-section buttons live far down the page while the notice mounts above
	// the list, and an off-viewport response to a click reads as a dead button.
	useEffect( () => {
		if ( forced ) {
			containerRef.current?.scrollIntoView( { behavior: 'smooth', block: 'center' } );
		}
	}, [ forced ] );
 
	const handleUpgradeClick = useCallback( () => {
		// Record the click only. Dismissal is persisted by the close button
		// ( onRemove ), so the nudge returns if checkout is opened and abandoned.
		recordAiEvent( 'jetpack_ai_upgrade_button', {
			placement: 'content-guidelines',
		} );
	}, [] );
 
	const handleDismiss = useCallback( () => {
		// hideUpgradeNotice clears the session flag even when the persisted
		// dismissal already happened (dismissBanner early-returns in that case).
		hideUpgradeNotice();
		dismissBanner();
	}, [ hideUpgradeNotice, dismissBanner ] );
 
	if ( hasFeature || ( dismissed && ! forced ) ) {
		return null;
	}
 
	return (
		<div ref={ containerRef }>
			<Notice
				status="success"
				isDismissible
				onRemove={ handleDismiss }
				className="jetpack-content-guidelines-ai__upgrade-notice"
			>
				<p>
					{ __(
						'Not sure where to start? Jetpack can read your site and suggest guidelines tailored to your content. Upgrade to get started.',
						'jetpack'
					) }
				</p>
				{ checkoutUrl && (
					<Button
						variant="primary"
						href={ checkoutUrl }
						target="_blank"
						onClick={ handleUpgradeClick }
					>
						{ __( 'Upgrade', 'jetpack' ) }
					</Button>
				) }
			</Notice>
		</div>
	);
}