feat: add Clear Cache button to Freemius block sidebar (0.5.0)

CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to Freemius for WordPress are documented in this file.
 
 ## [Unreleased]
 
+- improved: added a Clear Cache button in the Freemius block sidebar (mapping panel and parent scope settings) so you can refresh pricing data from the API without leaving the editor
 ## [0.4.2]
 
 - fixed: missing import for MappingSettings

src/blocks/modifier/edit.js

@@ -33,6 +33,7 @@ import './editor.scss';
 
 import { useData, useModifiers } from '../../hooks';
 import { ModifierButtons } from './ModifierButtons';
+import ClearCacheButton from '../../scope/ClearCacheButton';
 
 export default function Edit( props ) {
 	const { attributes, setAttributes, scopeData } = props;
@@ -175,12 +176,19 @@ export default function Edit( props ) {
 										'freemius'
 									) }
 								</h2>
-								<Button
-									onClick={ () => selectScope() }
-									variant="secondary"
+								<Flex
+									gap={ 2 }
+									justify="space-between"
+									align="center"
 								>
-									{ __( 'Select Scope', 'freemius' ) }
-								</Button>
+									<Button
+										onClick={ () => selectScope() }
+										variant="secondary"
+									>
+										{ __( 'Select Scope', 'freemius' ) }
+									</Button>
+									<ClearCacheButton />
+								</Flex>
 							</BaseControl>
 							<BaseControl __nextHasNoMarginBottom>
 								<TreeSelect

src/hooks/useApi.js

@@ -304,9 +304,10 @@ export function useApi( endpoint, options = {} ) {
 		[ refetch ]
 	);
 
-	// Set data from cache if available
+	// Keep local data in sync with the shared store (e.g. after cache clear + refetch).
 	useEffect( () => {
-		if ( cachedData && ! data ) setData( cachedData );
+		if ( cachedData ) setData( cachedData );
+		else if ( data ) setData( null );
 	}, [ cachedData, data ] );
 
 	// Immediate fetch on mount

src/scope/ClearCacheButton.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Tooltip } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { API_STORE } from '../stores';
+import { useData, usePlans } from '../hooks';
+
+const ClearCacheButton = ( { size } ) => {
+	const { clearServerCache } = useDispatch( API_STORE );
+	const { createNotice } = useDispatch( noticesStore );
+
+	const isClearing = useSelect( ( select ) =>
+		select( API_STORE ).isLoading( 'cache-clear' )
+	);
+
+	const { data } = useData();
+	const { refetch } = usePlans( data?.product_id );
+
+	const handleClearCache = async () => {
+		try {
+			await clearServerCache();
+			if ( data?.product_id ) await refetch( true );
+			createNotice(
+				'success',
+				__( 'Cache cleared. Data refreshed.', 'freemius' ),
+				{ type: 'snackbar' }
+			);
+		} catch {
+			createNotice( 'error', __( 'Could not clear cache.', 'freemius' ), {
+				type: 'snackbar',
+			} );
+		}
+	};
+
+	return (
+		<Tooltip
+			text={ __(
+				'Clear all cached data from the Freemius API. This will refresh the pricing data from the API.',
+				'freemius'
+			) }
+		>
+			<Button
+				variant="tertiary"
+				isDestructive
+				size={ size }
+				onClick={ handleClearCache }
+				isBusy={ isClearing }
+				disabled={ isClearing }
+			>
+				{ __( 'Clear Cache', 'freemius' ) }
+			</Button>
+		</Tooltip>
+	);
+};
+
+export default ClearCacheButton;

src/scope/MappingSettings.js

@@ -14,6 +14,7 @@ import {
 	TextControl,
 	Button,
 	SelectControl,
+	Flex,
 	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
 import { useContext, useEffect } from '@wordpress/element';
@@ -23,6 +24,7 @@ import { useContext, useEffect } from '@wordpress/element';
  */
 import { useData, useMapping } from '../hooks';
 import { FreemiusContext } from '../context';
+import ClearCacheButton from './ClearCacheButton';
 
 const MappingSettings = ( props ) => {
 	const { attributes } = props;
@@ -67,6 +69,9 @@ const MappingSettings = ( props ) => {
 				</h2>
 			) }
 
+			<Flex justify="flex-end">
+				<ClearCacheButton />
+			</Flex>
 			<Spacer />
 			{ isError && (
 				<>

src/scope/Settings.js

@@ -14,6 +14,7 @@ import {
 	PanelBody,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	Button,
+	Flex,
 	__experimentalSpacer as Spacer,
 	Notice,
 } from '@wordpress/components';
@@ -25,6 +26,7 @@ import EnableCheckbox from './EnableCheckbox';
 import { useSettings, useData } from '../hooks';
 import Property from './Property';
 import ButtonSettings from './ButtonSettings';
+import ClearCacheButton from './ClearCacheButton';
 
 const PanelDescription = styled.div`
 	grid-column: span 2;
@@ -106,17 +108,22 @@ const Settings = ( props ) => {
 					}
 					{ ...props }
 				/>
-				{ freemius_enabled && freemius_modifications && (
-					<Button
-						onClick={ () =>
-							setAttributes( {
-								freemius_modifications: undefined,
-							} )
-						}
-						variant="secondary"
-					>
-						{ __( 'Reset Modifications', 'freemius' ) }
-					</Button>
+				{ freemius_enabled && (
+					<Flex gap={ 2 }>
+						{ freemius_modifications && (
+							<Button
+								onClick={ () =>
+									setAttributes( {
+										freemius_modifications: undefined,
+									} )
+								}
+								variant="secondary"
+							>
+								{ __( 'Reset Modifications', 'freemius' ) }
+							</Button>
+						) }
+						<ClearCacheButton />
+					</Flex>
 				) }
 				<Spacer />
 				{ freemius_enabled && errorMessage && (