@@ -52,7 +49,7 @@ const Modal = () => {
aria-label={ __( 'Close Modal Window', 'jetpack-protect' ) }
/>
-
+
);
diff --git a/projects/plugins/protect/src/js/components/notice/index.jsx b/projects/plugins/protect/src/js/components/notice/index.jsx
index 911b116da9d4d..cf779386bb35c 100644
--- a/projects/plugins/protect/src/js/components/notice/index.jsx
+++ b/projects/plugins/protect/src/js/components/notice/index.jsx
@@ -1,8 +1,7 @@
-import { useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { check, close, info, warning, Icon } from '@wordpress/icons';
import { useCallback, useEffect } from 'react';
-import { STORE_ID } from '../../state/store';
+import useNotices from '../../hooks/use-notices';
import styles from './styles.module.scss';
const Notice = ( {
@@ -12,7 +11,7 @@ const Notice = ( {
message,
type = 'success',
} ) => {
- const { clearNotice } = useDispatch( STORE_ID );
+ const { clearNotice } = useNotices();
let icon;
switch ( type ) {
diff --git a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx b/projects/plugins/protect/src/js/components/paid-accordion/index.jsx
index 5264208ed34e8..9b6507137db5e 100644
--- a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx
+++ b/projects/plugins/protect/src/js/components/paid-accordion/index.jsx
@@ -1,11 +1,10 @@
import { Spinner, Text, useBreakpointMatch } from '@automattic/jetpack-components';
-import { useSelect } from '@wordpress/data';
import { dateI18n } from '@wordpress/date';
import { sprintf, __ } from '@wordpress/i18n';
import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
import clsx from 'clsx';
import React, { useState, useCallback, useContext } from 'react';
-import { STORE_ID } from '../../state/store';
+import useFixers from '../../hooks/use-fixers';
import ThreatSeverityBadge from '../severity';
import styles from './styles.module.scss';
@@ -75,13 +74,14 @@ export const PaidAccordionItem = ( {
const accordionData = useContext( PaidAccordionContext );
const open = accordionData?.open === id;
const setOpen = accordionData?.setOpen;
- const threatsAreFixing = useSelect( select => select( STORE_ID ).getThreatsAreFixing() );
const bodyClassNames = clsx( styles[ 'accordion-body' ], {
[ styles[ 'accordion-body-open' ] ]: open,
[ styles[ 'accordion-body-close' ] ]: ! open,
} );
+ const { fixersStatus } = useFixers();
+
const handleClick = useCallback( () => {
if ( ! open ) {
onOpen?.();
@@ -122,7 +122,7 @@ export const PaidAccordionItem = ( {
{ fixable && (
<>
- { threatsAreFixing.indexOf( id ) >= 0 ? (
+ { fixersStatus?.[ id ]?.status === 'in_progress' ? (
) : (
diff --git a/projects/plugins/protect/src/js/components/pricing-table/index.jsx b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
index 3b2b4bc4c8ac1..1914b78511a3a 100644
--- a/projects/plugins/protect/src/js/components/pricing-table/index.jsx
+++ b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
import {
Button,
ProductPrice,
@@ -10,34 +7,28 @@ import {
PricingTableItem,
} from '@automattic/jetpack-components';
import { useConnection } from '@automattic/jetpack-connection';
-import { useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
+import useConnectSiteMutation from '../../data/use-connection-mutation';
+import useUpgradePlanMutation from '../../data/use-upgrade-plan-mutation';
import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
import useProtectData from '../../hooks/use-protect-data';
-import useWafData from '../../hooks/use-waf-data';
-import { STORE_ID } from '../../state/store';
/**
* Product Detail component.
*
- * @param {object} props - Component props
- * @param {Function} props.onScanAdd - Callback when adding paid protect product successfully
* @return {object} ConnectedPricingTable react component.
*/
-const ConnectedPricingTable = ( { onScanAdd } ) => {
- const { handleRegisterSite, registrationError } = useConnection( {
+const ConnectedPricingTable = () => {
+ const { recordEvent } = useAnalyticsTracks();
+ const connectSiteMutation = useConnectSiteMutation();
+ const upgradePlanMutation = useUpgradePlanMutation();
+ const { registrationError } = useConnection( {
skipUserConnection: true,
} );
- const { refreshPlan, refreshStatus, startScanOptimistically } = useDispatch( STORE_ID );
-
- const [ getProtectFreeButtonIsLoading, setGetProtectFreeButtonIsLoading ] = useState( false );
- const [ getScanButtonIsLoading, setGetScanButtonIsLoading ] = useState( false );
-
// Access paid protect product data
const { jetpackScan } = useProtectData();
- const { refreshWaf } = useWafData();
const { pricingForUi } = jetpackScan;
const { introductoryOffer, currencyCode: currency = 'USD' } = pricingForUi;
@@ -47,33 +38,15 @@ const ConnectedPricingTable = ( { onScanAdd } ) => {
? Math.ceil( ( introductoryOffer.costPerInterval / 12 ) * 100 ) / 100
: null;
- // Track free and paid click events
- const { recordEvent, recordEventHandler } = useAnalyticsTracks();
- const getScan = recordEventHandler( 'jetpack_protect_pricing_table_get_scan_link_click', () => {
- setGetScanButtonIsLoading( true );
- onScanAdd();
- } );
+ const getScan = useCallback( () => {
+ recordEvent( 'jetpack_protect_pricing_table_get_scan_link_click' );
+ upgradePlanMutation.mutate();
+ }, [ recordEvent, upgradePlanMutation ] );
const getProtectFree = useCallback( async () => {
recordEvent( 'jetpack_protect_connected_product_activated' );
- setGetProtectFreeButtonIsLoading( true );
- try {
- await handleRegisterSite();
- startScanOptimistically();
- await refreshPlan();
- await refreshWaf();
- await refreshStatus( true );
- } finally {
- setGetProtectFreeButtonIsLoading( false );
- }
- }, [
- handleRegisterSite,
- recordEvent,
- refreshWaf,
- refreshPlan,
- refreshStatus,
- startScanOptimistically,
- ] );
+ connectSiteMutation.mutate();
+ }, [ connectSiteMutation, recordEvent ] );
const args = {
title: __( 'Stay one step ahead of threats', 'jetpack-protect' ),
@@ -120,8 +93,8 @@ const ConnectedPricingTable = ( { onScanAdd } ) => {
@@ -158,8 +131,8 @@ const ConnectedPricingTable = ( { onScanAdd } ) => {
fullWidth
variant="secondary"
onClick={ getProtectFree }
- isLoading={ getProtectFreeButtonIsLoading }
- disabled={ getProtectFreeButtonIsLoading || getScanButtonIsLoading }
+ isLoading={ connectSiteMutation.isPending }
+ disabled={ connectSiteMutation.isPending || upgradePlanMutation.isPending }
error={
registrationError
? __( 'An error occurred. Please try again.', 'jetpack-protect' )
diff --git a/projects/plugins/protect/src/js/components/scan-button/index.jsx b/projects/plugins/protect/src/js/components/scan-button/index.jsx
index 91554cdaf4b93..4844d9e4c060c 100644
--- a/projects/plugins/protect/src/js/components/scan-button/index.jsx
+++ b/projects/plugins/protect/src/js/components/scan-button/index.jsx
@@ -1,28 +1,20 @@
import { Button } from '@automattic/jetpack-components';
-import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import React, { forwardRef } from 'react';
-import { STORE_ID } from '../../state/store';
+import useStartScanMutator from '../../data/scan/use-start-scan-mutation';
const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props }, ref ) => {
- const { scan } = useDispatch( STORE_ID );
- const scanIsEnqueuing = useSelect( select => select( STORE_ID ).getScanIsEnqueuing(), [] );
+ const startScanMutation = useStartScanMutator();
const handleScanClick = () => {
return event => {
event.preventDefault();
- scan();
+ startScanMutation.mutate();
};
};
return (
-