From 63b16135f6f4b923fd4f1b31fd420bb684bbb9c0 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 23 Nov 2022 18:32:21 -0800
Subject: [PATCH 1/3] Add upgrade prompt when WAF enabled but no rules access

---
 .../js/components/firewall-header/index.jsx   | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/projects/plugins/protect/src/js/components/firewall-header/index.jsx b/projects/plugins/protect/src/js/components/firewall-header/index.jsx
index ef9e9f63cd046..ffa4db9f473bf 100644
--- a/projects/plugins/protect/src/js/components/firewall-header/index.jsx
+++ b/projects/plugins/protect/src/js/components/firewall-header/index.jsx
@@ -49,6 +49,39 @@ const FirewallHeader = ( { status, hasRequiredPlan } ) => {
 							<H3 className={ styles[ 'firewall-heading' ] } mb={ 1 } mt={ 2 }>
 								{ __( 'Automatic firewall is on', 'jetpack-protect' ) }
 							</H3>
+							{ ! hasRequiredPlan && (
+								<>
+									<div className={ styles[ 'manual-rules-notice' ] }>
+										<Text weight={ 600 }>
+											{ __( 'Only manual rules will be applied', 'jetpack-protect' ) }
+										</Text>
+										<div
+											className={ styles[ 'icon-popover' ] }
+											onMouseLeave={ handleOut }
+											onMouseEnter={ handleEnter }
+											onClick={ handleEnter }
+											onFocus={ handleEnter }
+											onBlur={ handleOut }
+											role="presentation"
+										>
+											<Icon icon={ help } />
+											{ showPopover && (
+												<Popover noArrow={ false } offset={ 5 }>
+													<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
+														{ __(
+															'The free version of the firewall only allows for use of manual rules.',
+															'jetpack-protect'
+														) }
+													</Text>
+												</Popover>
+											) }
+										</div>
+									</div>
+									<Button onClick={ getScan }>
+										{ __( 'Upgrade to enable automatic rules', 'jetpack-protect' ) }
+									</Button>
+								</>
+							) }
 						</>
 					) }
 					{ 'off' === status && (

From 6df6a87ae4be7f0d066f313f60acfb65ed7e1e21 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 23 Nov 2022 18:44:14 -0800
Subject: [PATCH 2/3] Create separate internal component for upgrade prompt

---
 .../js/components/firewall-header/index.jsx   | 104 +++++++-----------
 1 file changed, 37 insertions(+), 67 deletions(-)

diff --git a/projects/plugins/protect/src/js/components/firewall-header/index.jsx b/projects/plugins/protect/src/js/components/firewall-header/index.jsx
index ffa4db9f473bf..6147dac2c503c 100644
--- a/projects/plugins/protect/src/js/components/firewall-header/index.jsx
+++ b/projects/plugins/protect/src/js/components/firewall-header/index.jsx
@@ -11,7 +11,7 @@ import useWafData from '../../hooks/use-waf-data';
 import { JETPACK_SCAN } from '../admin-page';
 import styles from './styles.module.scss';
 
-const FirewallHeader = ( { status, hasRequiredPlan } ) => {
+const UpgradePrompt = () => {
 	const { adminUrl } = window.jetpackProtectInitialState || {};
 	const firewallUrl = adminUrl + '#/firewall';
 
@@ -33,6 +33,40 @@ const FirewallHeader = ( { status, hasRequiredPlan } ) => {
 		setShowPopover( false );
 	}, [] );
 
+	return (
+		<>
+			<div className={ styles[ 'manual-rules-notice' ] }>
+				<Text weight={ 600 }>{ __( 'Only manual rules will be applied', 'jetpack-protect' ) }</Text>
+				<div
+					className={ styles[ 'icon-popover' ] }
+					onMouseLeave={ handleOut }
+					onMouseEnter={ handleEnter }
+					onClick={ handleEnter }
+					onFocus={ handleEnter }
+					onBlur={ handleOut }
+					role="presentation"
+				>
+					<Icon icon={ help } />
+					{ showPopover && (
+						<Popover noArrow={ false } offset={ 5 }>
+							<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
+								{ __(
+									'The free version of the firewall only allows for use of manual rules.',
+									'jetpack-protect'
+								) }
+							</Text>
+						</Popover>
+					) }
+				</div>
+			</div>
+			<Button onClick={ getScan }>
+				{ __( 'Upgrade to enable automatic rules', 'jetpack-protect' ) }
+			</Button>
+		</>
+	);
+};
+
+const FirewallHeader = ( { status, hasRequiredPlan } ) => {
 	return (
 		<AdminSectionHero>
 			<Container
@@ -49,39 +83,7 @@ const FirewallHeader = ( { status, hasRequiredPlan } ) => {
 							<H3 className={ styles[ 'firewall-heading' ] } mb={ 1 } mt={ 2 }>
 								{ __( 'Automatic firewall is on', 'jetpack-protect' ) }
 							</H3>
-							{ ! hasRequiredPlan && (
-								<>
-									<div className={ styles[ 'manual-rules-notice' ] }>
-										<Text weight={ 600 }>
-											{ __( 'Only manual rules will be applied', 'jetpack-protect' ) }
-										</Text>
-										<div
-											className={ styles[ 'icon-popover' ] }
-											onMouseLeave={ handleOut }
-											onMouseEnter={ handleEnter }
-											onClick={ handleEnter }
-											onFocus={ handleEnter }
-											onBlur={ handleOut }
-											role="presentation"
-										>
-											<Icon icon={ help } />
-											{ showPopover && (
-												<Popover noArrow={ false } offset={ 5 }>
-													<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
-														{ __(
-															'The free version of the firewall only allows for use of manual rules.',
-															'jetpack-protect'
-														) }
-													</Text>
-												</Popover>
-											) }
-										</div>
-									</div>
-									<Button onClick={ getScan }>
-										{ __( 'Upgrade to enable automatic rules', 'jetpack-protect' ) }
-									</Button>
-								</>
-							) }
+							{ ! hasRequiredPlan && <UpgradePrompt /> }
 						</>
 					) }
 					{ 'off' === status && (
@@ -92,39 +94,7 @@ const FirewallHeader = ( { status, hasRequiredPlan } ) => {
 							<H3 className={ styles[ 'firewall-heading' ] } mb={ 2 } mt={ 2 }>
 								{ __( 'Automatic firewall is off', 'jetpack-protect' ) }
 							</H3>
-							{ ! hasRequiredPlan && (
-								<>
-									<div className={ styles[ 'manual-rules-notice' ] }>
-										<Text weight={ 600 }>
-											{ __( 'Only manual rules will be applied', 'jetpack-protect' ) }
-										</Text>
-										<div
-											className={ styles[ 'icon-popover' ] }
-											onMouseLeave={ handleOut }
-											onMouseEnter={ handleEnter }
-											onClick={ handleEnter }
-											onFocus={ handleEnter }
-											onBlur={ handleOut }
-											role="presentation"
-										>
-											<Icon icon={ help } />
-											{ showPopover && (
-												<Popover noArrow={ false } offset={ 5 }>
-													<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
-														{ __(
-															'The free version of the firewall only allows for use of manual rules.',
-															'jetpack-protect'
-														) }
-													</Text>
-												</Popover>
-											) }
-										</div>
-									</div>
-									<Button onClick={ getScan }>
-										{ __( 'Upgrade to enable automatic rules', 'jetpack-protect' ) }
-									</Button>
-								</>
-							) }
+							{ ! hasRequiredPlan && <UpgradePrompt /> }
 						</>
 					) }
 					{ 'loading' === status && (

From 1c318a1e2fa7cf315fe6a3b0d4616fd686697876 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 23 Nov 2022 18:51:24 -0800
Subject: [PATCH 3/3] Add story for on with no plan

---
 .../src/js/components/firewall-header/stories/index.jsx       | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/projects/plugins/protect/src/js/components/firewall-header/stories/index.jsx b/projects/plugins/protect/src/js/components/firewall-header/stories/index.jsx
index 86149b68848c6..dcb14dbdefd44 100644
--- a/projects/plugins/protect/src/js/components/firewall-header/stories/index.jsx
+++ b/projects/plugins/protect/src/js/components/firewall-header/stories/index.jsx
@@ -7,6 +7,10 @@ export default {
 };
 
 export const FirewallOn = () => {
+	return <FirewallHeader status={ 'on' } hasRequiredPlan={ false } />;
+};
+
+export const FirewallOnPaid = () => {
 	return <FirewallHeader status={ 'on' } hasRequiredPlan={ true } />;
 };