Update refresh button to use API (#41397)

* Add refresh to subscription context

* Add refresh button

* Prevent multiple clicks

* Add changefile(s) from automation for the following project(s): woocommerce

* Fix notices

* Refresh notices

* Trigger Build

* Add spacing and fix class name

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss

@@ -6,9 +6,26 @@
 	justify-content: space-between;
 }
 
-a.woocommerce-marketplace__refresh-subscriptions {
+.woocommerce-marketplace__refresh-subscriptions {
 	text-decoration: none;
 	color: #007cba;
+	.woocommerce-marketplace__refresh-subscriptions-icon {
+		margin-right: $grid-unit-05;
+	}
+
+	&.is-busy {
+		@keyframes spin {
+			0% {
+				transform: rotate(0deg);
+			}
+			100% {
+				transform: rotate(360deg);
+			}
+		}
+		.woocommerce-marketplace__refresh-subscriptions-icon {
+			animation: spin 2s linear infinite;
+		}
+	}
 }
 
 .woocommerce-marketplace__my-subscriptions__available {
@@ -23,6 +40,12 @@ a.woocommerce-marketplace__refresh-subscriptions {
 	line-height: 28px;
 }
 
+.woocommerce-marketplace__notice--error {
+	&:last-child {
+		margin-bottom: $grid-unit-50;
+	}
+}
+
 .woocommerce-marketplace__my-subscriptions__table-description {
 	font-size: 13px;
 	margin-top: $grid-unit-05;

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/my-subscriptions.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { getNewPath } from '@woocommerce/navigation';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useContext } from '@wordpress/element';
@@ -22,24 +21,13 @@ import {
 	installedSubscriptionRow,
 } from './table/table-rows';
 import { Subscription } from './types';
-import RefreshIcon from '../../assets/images/refresh.svg';
+import { RefreshButton } from './table/actions/refresh-button';
+import Notices from './notices';
 
 export default function MySubscriptions(): JSX.Element {
 	const { subscriptions, isLoading } = useContext( SubscriptionsContext );
 	const wccomSettings = getAdminSetting( 'wccomHelper', {} );
 
-	const updateConnectionUrl = getNewPath(
-		{
-			page: 'wc-addons',
-			section: 'helper',
-			filter: 'all',
-			'wc-helper-refresh': 1,
-			'wc-helper-nonce': getAdminSetting( 'wc_helper_nonces' ).refresh,
-			'redirect-to-wc-admin': 1,
-		},
-		''
-	);
-
 	const installedTableDescription = createInterpolateElement(
 		__(
 			'Woo.com extensions and themes installed on this store. To see all your subscriptions go to <a>your account<custom_icon /></a> on Woo.com.',
@@ -89,6 +77,9 @@ export default function MySubscriptions(): JSX.Element {
 
 	return (
 		<div className="woocommerce-marketplace__my-subscriptions">
+			<section className="woocommerce-marketplace__my-subscriptions__notices">
+				<Notices />
+			</section>
 			<section className="woocommerce-marketplace__my-subscriptions__installed">
 				<header className="woocommerce-marketplace__my-subscriptions__header">
 					<div>
@@ -100,19 +91,7 @@ export default function MySubscriptions(): JSX.Element {
 						</span>
 					</div>
 					<div>
-						<Button
-							href={ updateConnectionUrl }
-							className="woocommerce-marketplace__refresh-subscriptions"
-						>
-							<img
-								src={ RefreshIcon }
-								alt={ __(
-									'Refresh subscriptions',
-									'woocommerce'
-								) }
-							/>
-							{ __( 'Refresh', 'woocommerce' ) }
-						</Button>
+						<RefreshButton />
 					</div>
 				</header>
 				<InstalledSubscriptionsTable

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/notices.tsx

@@ -35,6 +35,7 @@ export default function Notices() {
 	for ( const notice of notices ) {
 		errorNotices.push(
 			<Notice
+				className="woocommerce-marketplace__notice--error"
 				status={ notice.status }
 				onRemove={ () => removeNotice( notice.productKey ) }
 				key={ notice.productKey }

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/actions/refresh-button.tsx

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useContext, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import RefreshIcon from '../../../../assets/images/refresh.svg';
+import { SubscriptionsContext } from '../../../../contexts/subscriptions-context';
+import { addNotice, removeNotice } from '../../../../utils/functions';
+import { NoticeStatus } from '../../../../contexts/types';
+
+const NOTICE_ID = 'woocommerce-marketplace-refresh-subscriptions';
+
+export function RefreshButton() {
+	const { refreshSubscriptions } = useContext( SubscriptionsContext );
+	const [ isLoading, setIsLoading ] = useState( false );
+
+	const refresh = () => {
+		if ( isLoading ) {
+			return;
+		}
+
+		removeNotice( NOTICE_ID );
+		setIsLoading( true );
+
+		refreshSubscriptions()
+			.then( () => {
+				addNotice(
+					NOTICE_ID,
+					__( 'Subscriptions refreshed.', 'woocommerce' ),
+					NoticeStatus.Success
+				);
+			} )
+			.catch( ( error ) => {
+				addNotice(
+					NOTICE_ID,
+					sprintf(
+						// translators: %s is the error message.
+						__(
+							'Error refreshing subscriptions: %s',
+							'woocommerce'
+						),
+						error.message
+					),
+					NoticeStatus.Error,
+					{
+						actions: [
+							{
+								label: __( 'Try again', 'woocommerce' ),
+								onClick: refresh,
+							},
+						],
+					}
+				);
+			} )
+			.finally( () => {
+				setIsLoading( false );
+			} );
+	};
+
+	return (
+		<Button
+			className="woocommerce-marketplace__refresh-subscriptions"
+			onClick={ refresh }
+			isBusy={ isLoading }
+		>
+			<img
+				src={ RefreshIcon }
+				alt={ __( 'Refresh subscriptions', 'woocommerce' ) }
+				className="woocommerce-marketplace__refresh-subscriptions-icon"
+			/>
+			{ __( 'Refresh', 'woocommerce' ) }
+		</Button>
+	);
+}

plugins/woocommerce-admin/client/marketplace/contexts/subscriptions-context.tsx

@@ -8,12 +8,16 @@ import { useState, createContext, useEffect } from '@wordpress/element';
  */
 import { SubscriptionsContextType } from './types';
 import { Subscription } from '../components/my-subscriptions/types';
-import { fetchSubscriptions } from '../utils/functions';
+import {
+	fetchSubscriptions,
+	refreshSubscriptions as fetchSubscriptionsFromWooCom,
+} from '../utils/functions';
 
 export const SubscriptionsContext = createContext< SubscriptionsContextType >( {
 	subscriptions: [],
 	setSubscriptions: () => {},
 	loadSubscriptions: () => new Promise( () => {} ),
+	refreshSubscriptions: () => new Promise( () => {} ),
 	isLoading: true,
 	setIsLoading: () => {},
 } );
@@ -41,6 +45,15 @@ export function SubscriptionsContextProvider( props: {
 				}
 			} );
 	};
+
+	const refreshSubscriptions = () => {
+		return fetchSubscriptionsFromWooCom().then(
+			( subscriptionResponse ) => {
+				setSubscriptions( subscriptionResponse );
+			}
+		);
+	};
+
 	useEffect( () => {
 		loadSubscriptions( true );
 	}, [] );
@@ -49,6 +62,7 @@ export function SubscriptionsContextProvider( props: {
 		subscriptions,
 		setSubscriptions,
 		loadSubscriptions,
+		refreshSubscriptions,
 		isLoading,
 		setIsLoading,
 	};

plugins/woocommerce-admin/client/marketplace/contexts/types.ts

@@ -19,6 +19,7 @@ export type SubscriptionsContextType = {
 	subscriptions: Subscription[];
 	setSubscriptions: ( subscriptions: Subscription[] ) => void;
 	loadSubscriptions: ( toggleLoading?: boolean ) => Promise< void >;
+	refreshSubscriptions: () => Promise< void >;
 	isLoading: boolean;
 	setIsLoading: ( isLoading: boolean ) => void;
 };

plugins/woocommerce-admin/client/marketplace/utils/functions.tsx

@@ -189,6 +189,14 @@ async function fetchSubscriptions(): Promise< Array< Subscription > > {
 	return await apiFetch( { path: url.toString() } );
 }
 
+async function refreshSubscriptions(): Promise< Array< Subscription > > {
+	const url = '/wc/v3/marketplace/refresh';
+	return await apiFetch( {
+		path: url.toString(),
+		method: 'POST',
+	} );
+}
+
 function connectProduct( subscription: Subscription ): Promise< void > {
 	if ( subscription.active === true ) {
 		return Promise.resolve();
@@ -373,6 +381,7 @@ export {
 	fetchDiscoverPageData,
 	fetchSearchResults,
 	fetchSubscriptions,
+	refreshSubscriptions,
 	installProduct,
 	updateProduct,
 	addNotice,

plugins/woocommerce/changelog/41397-add-refres-button-busy

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+Comment: Subscriptions refresh button uses the API instead of redirect.
+