Shopping cart: Update StaleCartItemsNotice to use useShoppingCart

client/my-sites/current-site/index.jsx

@@ -22,6 +22,7 @@ import { getCurrentUserSiteCount } from 'calypso/state/current-user/selectors';
 import { recordGoogleEvent } from 'calypso/state/analytics/actions';
 import { hasAllSitesList } from 'calypso/state/sites/selectors';
 import { expandSidebar } from 'calypso/state/ui/actions';
+import CalypsoShoppingCartProvider from 'calypso/my-sites/checkout/calypso-shopping-cart-provider';
 
 /**
  * Style dependencies
@@ -112,10 +113,12 @@ class CurrentSite extends Component {
 						/>
 					) }
 					{ selectedSite && isEnabled( 'current-site/stale-cart-notice' ) && (
-						<AsyncLoad
-							require="calypso/my-sites/current-site/stale-cart-items-notice"
-							placeholder={ null }
-						/>
+						<CalypsoShoppingCartProvider>
+							<AsyncLoad
+								require="calypso/my-sites/current-site/stale-cart-items-notice"
+								placeholder={ null }
+							/>
+						</CalypsoShoppingCartProvider>
 					) }
 					{ selectedSite && isEnabled( 'current-site/notice' ) && (
 						<AsyncLoad

client/my-sites/current-site/stale-cart-items-notice.js

@@ -1,79 +1,76 @@
 /**
  * External dependencies
  */
-import React from 'react';
-import { connect } from 'react-redux';
-import { localize } from 'i18n-calypso';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslate } from 'i18n-calypso';
+import { useShoppingCart } from '@automattic/shopping-cart';
 
 /**
  * Internal dependencies
  */
-import CartStore from 'calypso/lib/cart/store';
 import { hasStaleItem } from 'calypso/lib/cart-values/cart-items';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { infoNotice, removeNotice } from 'calypso/state/notices/actions';
 import { getNoticeLastTimeShown } from 'calypso/state/notices/selectors';
 import { getSectionName, getSelectedSiteSlug } from 'calypso/state/ui/selectors';
-import { reloadCart } from 'calypso/lib/cart/actions';
 
 const staleCartItemNoticeId = 'stale-cart-item-notice';
 
-class StaleCartItemsNotice extends React.Component {
-	showStaleCartItemsNotice = () => {
+export default function StaleCartItemsNotice() {
+	useShowStaleCartNotice();
+	return null;
+}
+
+function useShowStaleCartNotice() {
+	const selectedSiteSlug = useSelector( getSelectedSiteSlug );
+	const staleCartItemNoticeLastTimeShown = useSelector( ( state ) =>
+		getNoticeLastTimeShown( state, staleCartItemNoticeId )
+	);
+	const sectionName = useSelector( getSectionName );
+	const reduxDispatch = useDispatch();
+	const { responseCart, isPendingUpdate } = useShoppingCart();
+	const translate = useTranslate();
+
+	useEffect( () => {
 		// Don't show on the checkout page?
-		if ( this.props.sectionName === 'upgrades' ) {
+		if ( sectionName === 'upgrades' ) {
 			// Remove any existing stale cart notice
-			this.props.removeNotice( staleCartItemNoticeId );
-			return null;
+			reduxDispatch( removeNotice( staleCartItemNoticeId ) );
+			return;
 		}
 
 		// Show a notice if there are stale items in the cart and it hasn't been shown
 		// in the last 10 minutes (cart abandonment)
-		const cart = CartStore.get();
 		if (
-			this.props.selectedSiteSlug &&
-			hasStaleItem( cart ) &&
-			this.props.staleCartItemNoticeLastTimeShown < Date.now() - 10 * 60 * 1000 &&
-			cart.hasLoadedFromServer &&
-			! cart.hasPendingServerUpdates
+			selectedSiteSlug &&
+			hasStaleItem( responseCart ) &&
+			staleCartItemNoticeLastTimeShown < Date.now() - 10 * 60 * 1000 &&
+			! isPendingUpdate
 		) {
-			this.props.recordTracksEvent( 'calypso_cart_abandonment_notice_view' );
+			reduxDispatch( recordTracksEvent( 'calypso_cart_abandonment_notice_view' ) );
 
 			// Remove any existing stale cart notice
-			this.props.removeNotice( staleCartItemNoticeId );
+			reduxDispatch( removeNotice( staleCartItemNoticeId ) );
 
-			this.props.infoNotice( this.props.translate( 'Your cart is awaiting payment.' ), {
-				id: staleCartItemNoticeId,
-				button: this.props.translate( 'View your cart' ),
-				href: '/checkout/' + this.props.selectedSiteSlug,
-				onClick: this.clickStaleCartItemsNotice,
-			} );
+			reduxDispatch(
+				infoNotice( translate( 'Your cart is awaiting payment.' ), {
+					id: staleCartItemNoticeId,
+					button: translate( 'View your cart' ),
+					href: '/checkout/' + selectedSiteSlug,
+					onClick: () => {
+						reduxDispatch( recordTracksEvent( 'calypso_cart_abandonment_notice_click' ) );
+					},
+				} )
+			);
 		}
-	};
-
-	clickStaleCartItemsNotice = () => {
-		this.props.recordTracksEvent( 'calypso_cart_abandonment_notice_click' );
-	};
-
-	componentDidMount() {
-		reloadCart();
-		CartStore.on( 'change', this.showStaleCartItemsNotice );
-	}
-
-	componentWillUnmount() {
-		CartStore.off( 'change', this.showStaleCartItemsNotice );
-	}
-
-	render() {
-		return null;
-	}
+	}, [
+		isPendingUpdate,
+		sectionName,
+		selectedSiteSlug,
+		responseCart,
+		reduxDispatch,
+		translate,
+		staleCartItemNoticeLastTimeShown,
+	] );
 }
-
-export default connect(
-	( state ) => ( {
-		selectedSiteSlug: getSelectedSiteSlug( state ),
-		staleCartItemNoticeLastTimeShown: getNoticeLastTimeShown( state, staleCartItemNoticeId ),
-		sectionName: getSectionName( state ),
-	} ),
-	{ infoNotice, removeNotice, recordTracksEvent }
-)( localize( StaleCartItemsNotice ) );