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
 
 
 
 
 
 
 
 
 
 
 
 
5x
5x
 
5x
 
5x
 
5x
5x
5x
 
 
 
 
5x
5x
 
 
5x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5x
 
 
 
 
 
 
 
 
 
 
 
 
5x
 
 
import { JetpackLogo } from '@automattic/jetpack-components';
import { Button } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useId } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { lock } from '@wordpress/icons';
import { Tooltip, VisuallyHidden } from '@wordpress/ui';
import { useAllSectionsEmpty } from '../hooks/use-drafts';
import useGenerateAll from '../hooks/use-generate-all';
import { AI_STORE_NAME } from '../store';
 
export default function SuggestAllButton() {
	const { generate, loading, hasFeature } = useGenerateAll();
	const descriptionId = useId();
 
	const bannerDismissed = useSelect( select => select( AI_STORE_NAME ).isBannerDismissed(), [] );
 
	const allEmpty = useAllSectionsEmpty();
 
	const generateLabel = __( 'Generate guidelines', 'jetpack' );
	const improveLabel = __( 'Improve guidelines', 'jetpack' );
	const label = allEmpty ? generateLabel : improveLabel;
 
	// Hide only while the welcome banner is on screen — it carries its own
	// "Get started" CTA. Without an AI plan the button renders locked and
	// clicking it opens the upgrade notice (see useGenerateAll).
	const hidden = ! bannerDismissed && hasFeature;
	const hiddenProps = hidden ? { style: { display: 'none' }, 'aria-hidden': true } : {};
 
	const button = (
		<Button
			{ ...hiddenProps }
			variant="primary"
			icon={ hasFeature ? <JetpackLogo showText={ false } height={ 18 } logoColor="#fff" /> : lock }
			onClick={ generate }
			disabled={ loading }
			accessibleWhenDisabled
			aria-describedby={ hasFeature ? undefined : descriptionId }
			isBusy={ loading }
			className="jetpack-content-guidelines-ai__suggest-all-button"
		>
			{ label }
		</Button>
	);
 
	Iif ( ! hasFeature && ! hidden ) {
		return (
			<Tooltip.Root>
				<Tooltip.Trigger render={ button } />
				{ /* The popup is visual-only, so this carries the sentence to screen readers. */ }
				<VisuallyHidden id={ descriptionId } render={ <span /> }>
					{ __( 'Upgrade to unlock the AI assistant', 'jetpack' ) }
				</VisuallyHidden>
				<Tooltip.Popup>{ __( 'Upgrade to unlock the AI assistant', 'jetpack' ) }</Tooltip.Popup>
			</Tooltip.Root>
		);
	}
 
	return button;
}