PD-242 Update text and structure of upgrade dialog.

Author: sheabunge

css/edit/_upgrade-dialog.scss

@@ -36,6 +36,7 @@
 		text-align: center;
 		display: grid;
 		grid-template-columns: 1fr 1fr 1fr;
+		margin: 2em 0;
 	}
 
 	.action-buttons {
@@ -49,4 +50,10 @@
 	.current-plan-cost {
 		font-size: 13px;
 	}
+
+	.button .dashicons,
+	.button svg {
+		vertical-align: middle;
+		margin-left: 1ch;
+	}
 }

js/Edit/components/UpgradeDialog.tsx

@@ -17,30 +17,13 @@ const upgradePlanCosts: Record<string, number> = {
 	[LARGE_PLAN_SITES]: 119
 }
 
-export const UpgradeDialog: React.FC<UpgradeDialogProps> = ({ isOpen, setIsOpen }) => {
+const UpgradeDialogPlans = () => {
 	const [currentPlan, setCurrentPlan] = useState(MID_PLAN_SITES)
 
-	return isOpen ?
-		<Modal
-			title=""
-			onRequestClose={() => setIsOpen(false)}
-			className="code-snippets-upgrade-dialog"
-		>
-			<h1 className="logo">
-				<img src={`${window.CODE_SNIPPETS?.pluginUrl}/assets/icon.svg`} alt="" />
-				{__('Code Snippets Pro', 'code-snippets')}
-			</h1>
-			<p>{__('You are using the free version of Code Snippets.', 'code-snippets')}</p>
-			<p>{__('Upgrade to Code Snippets Pro to unlock amazing features, including:', 'code-snippets')}
-				<ul>
-					<li>{__('CSS stylesheet snippets', 'code-snippets')}</li>
-					<li>{__('JavaScript snippets', 'code-snippets')}</li>
-					<li>{__('Specialised Elementor widgets', 'code-snippets')}</li>
-					<li>{__('Integration with block editor', 'code-snippets')}</li>
-					<li>{__('WP-CLI snippet commands', 'code-snippets')}</li>
-				</ul>
-				{__('… and more!', 'code-snippets')}
-			</p>
+	return (
+		<>
+			<p><strong>{__('How many websites do you plan to use Code Snippets on?', 'code-snippets')}</strong></p>
+			<p>{__('We offer three distinct plans, each tailored to meet your needs.', 'code-snippets')}</p>
 
 			<p className="upgrade-plans">
 				{Object.keys(upgradePlanCosts).map(planSites =>
@@ -68,6 +51,87 @@ export const UpgradeDialog: React.FC<UpgradeDialogProps> = ({ isOpen, setIsOpen
 					{__('Upgrade Now', 'code-snippets')}
 				</ExternalLink>
 			</p>
+		</>
+	)
+}
+
+interface UpgradeInfoProps {
+	nextTab: VoidFunction
+}
+
+const UpgradeInfo: React.FC<UpgradeInfoProps> = ({ nextTab }) =>
+	<>
+		<p>{__('You are using the free version of Code Snippets.', 'code-snippets')}</p>
+		<p>{__('Upgrade to Code Snippets Pro to unleash its full potential:', 'code-snippets')}
+			<ul>
+				<li>
+					<strong>{__('CSS stylesheet snippets: ', 'code-snippets')}</strong>
+					{__('Craft impeccable websites with advanced CSS snippets.', 'code-snippets')}
+				</li>
+				<li>
+					<strong>{__('JavaScript snippets: ', 'code-snippets')}</strong>
+					{__('Enhance user interaction with the power of JavaScript.', 'code-snippets')}
+				</li>
+				<li>
+					<strong>{__('Specialized Elementor widgets: ', 'code-snippets')}</strong>
+					{__('Easily customize your site with Elementor widgets.', 'code-snippets')}
+				</li>
+				<li>
+					<strong>{__('Integration with block editor: ', 'code-snippets')}</strong>
+					{__('Seamlessly incorporate your snippets within the block editor.', 'code-snippets')}
+				</li>
+				<li>
+					<strong>{__('WP-CLI snippet commands: ', 'code-snippets')}</strong>
+					{__('Access and control your snippets directly from the command line.', 'code-snippets')}
+				</li>
+				<li>
+					<strong>{__('Premium support: ', 'code-snippets')}</strong>
+					{__("Direct access to our team. We're happy to help!", 'code-snippets')}
+				</li>
+			</ul>
+
+			{__('… and more!', 'code-snippets')}
+		</p>
+
+		<p className="action-buttons">
+			<ExternalLink
+				className="button button-secondary"
+				href="https://codesnippets.pro/pricing/"
+			>
+				{__('Learn More', 'code-snippets')}
+			</ExternalLink>
+
+			<button
+				className="button button-primary button-large"
+				onClick={nextTab}
+			>
+				{__('See Plans', 'code-snippets')}
+				<span className="dashicons dashicons-arrow-right"></span>
+			</button>
+		</p>
+	</>
+
+export const UpgradeDialog: React.FC<UpgradeDialogProps> = ({ isOpen, setIsOpen }) => {
+	const [currentTab, setCurrentTab] = useState(0)
+
+	return isOpen ?
+		<Modal
+			title=""
+			className="code-snippets-upgrade-dialog"
+			onRequestClose={() => {
+				setIsOpen(false)
+				setCurrentTab(0)
+			}}
+		>
+			<h1 className="logo">
+				<img src={`${window.CODE_SNIPPETS?.pluginUrl}/assets/icon.svg`} alt="" />
+				{__('Code Snippets Pro', 'code-snippets')}
+			</h1>
+
+			{0 === currentTab ?
+				<UpgradeInfo nextTab={() => setCurrentTab(1)} /> :
+				<UpgradeDialogPlans />
+			}
 
 		</Modal> :
 		null