Protect: Fix overwritten FirewallSubheading updates (#39571)

* Reapply overwritten changes

* changelog

* Fix import

* Move stories to broken directory

projects/plugins/protect/changelog/fix-protect-overwritten-waf-subheading-updates

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Reapplies overwritten FirewallSubheading component updates

projects/plugins/protect/src/js/components/firewall-header/firewall-subheading.jsx

@@ -1,24 +1,27 @@
 import { Text, Button } from '@automattic/jetpack-components';
-import { useProductCheckoutWorkflow } from '@automattic/jetpack-connection';
 import { __ } from '@wordpress/i18n';
 import { help } from '@wordpress/icons';
-import { JETPACK_SCAN_SLUG } from '../../constants';
+import { useCallback } from 'react';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
+import usePlan from '../../hooks/use-plan';
+import useWafData from '../../hooks/use-waf-data';
 import IconTooltip from '../icon-tooltip';
 import styles from './styles.module.scss';
 
-const UpgradePrompt = ( { automaticRulesAvailable } ) => {
+const UpgradePrompt = () => {
+	const { recordEvent } = useAnalyticsTracks();
 	const { adminUrl } = window.jetpackProtectInitialState || {};
 	const firewallUrl = adminUrl + '#/firewall';
+	const { upgradePlan } = usePlan( { redirectUrl: firewallUrl } );
 
-	const { run } = useProductCheckoutWorkflow( {
-		productSlug: JETPACK_SCAN_SLUG,
-		redirectUrl: firewallUrl,
-		useBlogIdSuffix: true,
-	} );
+	const {
+		config: { automaticRulesAvailable },
+	} = useWafData();
 
-	const { recordEventHandler } = useAnalyticsTracks();
-	const getScan = recordEventHandler( 'jetpack_protect_waf_header_get_scan_link_click', run );
+	const getScan = useCallback( () => {
+		recordEvent( 'jetpack_protect_waf_header_get_scan_link_click' );
+		upgradePlan();
+	}, [ recordEvent, upgradePlan ] );
 
 	return (
 		<Button className={ styles[ 'upgrade-button' ] } onClick={ getScan }>
@@ -53,17 +56,19 @@ const FirewallSubheadingContent = ( { className, text = '', popover = false } )
 };
 
 const FirewallSubheading = ( {
+	jetpackWafIpBlockListEnabled,
+	jetpackWafIpAllowListEnabled,
 	hasPlan,
 	automaticRulesAvailable,
-	jetpackWafIpList,
 	jetpackWafAutomaticRules,
 	bruteForceProtectionIsEnabled,
 	wafSupported,
 } ) => {
-	const allRules = wafSupported && jetpackWafAutomaticRules && jetpackWafIpList;
-	const automaticRules = wafSupported && jetpackWafAutomaticRules && ! jetpackWafIpList;
-	const manualRules = wafSupported && ! jetpackWafAutomaticRules && jetpackWafIpList;
-	const noRules = wafSupported && ! jetpackWafAutomaticRules && ! jetpackWafIpList;
+	const allowOrBlockListEnabled = jetpackWafIpBlockListEnabled || jetpackWafIpAllowListEnabled;
+	const allRules = wafSupported && jetpackWafAutomaticRules && allowOrBlockListEnabled;
+	const automaticRules = wafSupported && jetpackWafAutomaticRules && ! allowOrBlockListEnabled;
+	const manualRules = wafSupported && ! jetpackWafAutomaticRules && allowOrBlockListEnabled;
+	const noRules = wafSupported && ! jetpackWafAutomaticRules && ! allowOrBlockListEnabled;
 
 	return (
 		<>
@@ -102,7 +107,7 @@ const FirewallSubheading = ( {
 					/>
 				) }
 			</div>
-			{ ! hasPlan && <UpgradePrompt automaticRulesAvailable={ automaticRulesAvailable } /> }
+			{ ! hasPlan && wafSupported && <UpgradePrompt /> }
 		</>
 	);
 };

projects/plugins/protect/src/js/components/firewall-header/stories/broken/index.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FirewallHeader } from '../index.jsx';
+import { FirewallHeader } from '../../index.jsx';
 
 export default {
 	title: 'Plugins/Protect/Firewall Header',
@@ -8,32 +8,86 @@ export default {
 
 const Template = args => <FirewallHeader { ...args } />;
 
-export const FirewallOn = Template.bind( {} );
-FirewallOn.args = {
+export const FirewallOnFree = Template.bind( {} );
+FirewallOnFree.args = {
 	status: 'on',
 	hasPlan: false,
+	automaticRulesAvailable: false,
+	jetpackWafIpList: true,
+	jetpackWafAutomaticRules: false,
+	bruteForceProtectionIsEnabled: true,
+	wafSupported: true,
+	currentDayStats: 0,
+	thirtyDaysStats: 0,
+	standaloneMode: false,
+};
+
+export const FirewallOffFree = Template.bind( {} );
+FirewallOffFree.args = {
+	status: 'off',
+	hasPlan: false,
+	automaticRulesAvailable: false,
+	jetpackWafIpList: false,
+	jetpackWafAutomaticRules: false,
+	bruteForceProtectionIsEnabled: false,
+	wafSupported: true,
+	currentDayStats: 0,
+	thirtyDaysStats: 0,
+	standaloneMode: false,
 };
 
 export const FirewallOnPaid = Template.bind( {} );
 FirewallOnPaid.args = {
 	status: 'on',
 	hasPlan: true,
-};
-
-export const FirewallOff = Template.bind( {} );
-FirewallOff.args = {
-	status: 'off',
-	hasPlan: false,
+	automaticRulesAvailable: true,
+	jetpackWafIpList: true,
+	jetpackWafAutomaticRules: true,
+	bruteForceProtectionIsEnabled: true,
+	wafSupported: true,
+	currentDayStats: 100,
+	thirtyDaysStats: 30000,
+	standaloneMode: false,
 };
 
 export const FirewallOffPaid = Template.bind( {} );
 FirewallOffPaid.args = {
 	status: 'off',
 	hasPlan: true,
+	automaticRulesAvailable: true,
+	jetpackWafIpList: false,
+	jetpackWafAutomaticRules: false,
+	bruteForceProtectionIsEnabled: false,
+	wafSupported: true,
+	currentDayStats: 0,
+	thirtyDaysStats: 0,
+	standaloneMode: false,
+};
+
+export const FirewallOnStandalone = Template.bind( {} );
+FirewallOnStandalone.args = {
+	status: 'on',
+	hasPlan: true,
+	automaticRulesAvailable: true,
+	jetpackWafIpList: true,
+	jetpackWafAutomaticRules: true,
+	bruteForceProtectionIsEnabled: true,
+	wafSupported: true,
+	currentDayStats: 100,
+	thirtyDaysStats: 30000,
+	standaloneMode: true,
 };
 
 export const FirewallLoading = Template.bind( {} );
 FirewallLoading.args = {
 	status: 'loading',
 	hasPlan: true,
+	automaticRulesAvailable: true,
+	jetpackWafIpList: false,
+	jetpackWafAutomaticRules: false,
+	bruteForceProtectionIsEnabled: false,
+	wafSupported: true,
+	currentDayStats: 0,
+	thirtyDaysStats: 0,
+	standaloneMode: false,
 };