← All changes | js/components/common/UpsellDialog.tsx +46 -36 3.9.6 → trunk View file →

		@@ -11,10 +11,10 @@
11	11
12	12	export const UpsellDialog: React.FC<UpsellDialogProps> = ({ isOpen, setIsOpen }) =>
13	13	isOpen
14	14	? <Modal
15		- title=""
16		- className="code-snippets-upsell-dialog"
	15	+ aria-labelledby="code-snippets-upsell-dialog-title"
	16	+ className="code-snippets-upsell code-snippets-upsell-dialog"
17	17	onRequestClose={() => {
18	18	setIsOpen(false)
19	19	}}
20	20	>
		@@ -22,41 +22,51 @@
22	22	src={`${window.CODE_SNIPPETS?.urls.plugin}/assets/icon.svg`}
23	23	alt={__('Code Snippets logo', 'code-snippets')}
24	24	/>
25	25
26		- <h1>
27		- {createInterpolateElement(
28		- __('Unlock all cloud sync features and many more, with <span>Code Snippets Pro</span>', 'code-snippets'),
29		- { span: <span /> }
30		- )}
31		- </h1>
	26	+ <UpsellContent />
	27	+ </Modal>
	28	+ : null
32	29
33		- <p>
34		- {createInterpolateElement(
35		- __('With Code Snippets Pro you can connect your WordPress sites to the code snippets cloud platform and be able to <strong>backup, synchronise, collaborate, and deploy</strong> your snippets from one central location.', 'code-snippets'),
36		- { strong: <strong /> }
37		- )}
38		- </p>
	30	+const UpsellContent = () =>
	31	+ <>
	32	+ <h1 id="code-snippets-upsell-dialog-title">
	33	+ {createInterpolateElement(
	34	+ __('Unlock all cloud sync features and many more, with <span>Code Snippets Pro</span>', 'code-snippets'),
	35	+ { span: <span /> }
	36	+ )}
	37	+ </h1>
39	38
40		- <a
41		- href="https://codesnippets.pro/pricing/"
42		- className="button button-primary button-large"
43		- rel="noreferrer" target="_blank"
44		- >
45		- {__('Explore Code Snippets Pro', 'code-snippets')}
46		- </a>
	39	+ <p>
	40	+ {createInterpolateElement(
	41	+ __('With Code Snippets Pro you can connect your WordPress sites to the code snippets cloud platform and be able to <strong>backup, synchronise, collaborate, and deploy</strong> your snippets from one central location.', 'code-snippets'),
	42	+ { strong: <strong /> }
	43	+ )}
	44	+ </p>
47	45
48		- <h2>{__("Here's what else you get with Pro:", 'code-snippets')}</h2>
49		- <ul>
50		- <li>{__('Create, explain and verify snippets with AI', 'code-snippets')}</li>
51		- <li>{__('Control when snippets run with Conditions', 'code-snippets')}</li>
52		- <li>{__('CSS stylesheet snippets', 'code-snippets')}</li>
53		- <li>{__('Minified JavaScript snippets', 'code-snippets')}</li>
54		- <li>{__('Editor blocks and Elementor widgets', 'code-snippets')}</li>
55		- <li>{__('Cloud sync and backup', 'code-snippets')}</li>
56		- <li>{__('Cloud share and deploy', 'code-snippets')}</li>
57		- <li>{__('Cloud bundles and teams', 'code-snippets')}</li>
58		- <li>{__('WP-CLI commands', 'code-snippets')}</li>
59		- <li>{__('And much more!', 'code-snippets')}</li>
60		- </ul>
61		- </Modal>
62		- : null
	46	+ <a
	47	+ href="https://codesnippets.pro/pricing/"
	48	+ className="button button-primary button-large"
	49	+ rel="noreferrer" target="_blank"
	50	+ >
	51	+ {__('Explore Code Snippets Pro', 'code-snippets')}
	52	+ </a>
	53	+
	54	+ <p>{__("Here's what else you get with Pro:", 'code-snippets')}</p>
	55	+ <ul>
	56	+ <li>{__('Create, explain and verify snippets with AI', 'code-snippets')}</li>
	57	+ <li>{__('Control when snippets run with Conditions', 'code-snippets')}</li>
	58	+ <li>{__('CSS stylesheet snippets', 'code-snippets')}</li>
	59	+ <li>{__('Minified JavaScript snippets', 'code-snippets')}</li>
	60	+ <li>{__('Editor blocks and Elementor widgets', 'code-snippets')}</li>
	61	+ <li>{__('Cloud sync and backup', 'code-snippets')}</li>
	62	+ <li>{__('Cloud share and deploy', 'code-snippets')}</li>
	63	+ <li>{__('Cloud bundles and teams', 'code-snippets')}</li>
	64	+ <li>{__('WP-CLI commands', 'code-snippets')}</li>
	65	+ <li>{__('And much more!', 'code-snippets')}</li>
	66	+ </ul>
	67	+ </>
	68	+
	69	+export const UpsellPage = () =>
	70	+ <div className="code-snippets-upsell code-snippets-upsell-page">
	71	+ <UpsellContent />
	72	+ </div>