Ensure cart changes remain after using back button to get back to the cart (#3960)

* Add cartUpdate middleware

* Include timestamp for when cart data was generated

* Add getCartFromApi action

* Check whether cart can be hydrated or needs to be fetched from API

* Add cartDataIsStale action and remove getCartFromApi action

* Add isCartDataStale selector

* Don't load cart until staleness check is complete

* Add comment to ease worry about locaStorage execution

* Correct doc block and fix typographical error

* Cater for lastCartUpdate or the timestamp being undefined

* Include @woocommerce/api and @woocommerce/e2e-utils

* Add getNormalPagePermalink test utility

This will allow us to get the permalink of a "normal" page, i.e. one that is not using the block editor.

* Add getBlockPagePermalink test utility

This will get the permalink for a page using the Block editor.

* Emit action to update cart staleness in all execution paths

* Add visitPostOfType function

This will allow us to visit the editor page for a post based on its name and post type.

* Add functions to get permalinks from editor pages

* Add front-end tests for cart

* Update package-lock.json

* Create local function to ensure the page permalink is visible

* Change functions for getting permalinks
They were often failing for unknown reasons, these _somehow_ make them more stable.

* Add logging for GitHub actions

* Add more logging for tests

* Add more logging for tests

* Add more logging for tests

* Wait for networkidle on back

* Remove logging except timestamp

* Wait for timestamp to be added to localStorage

* Split tests to make runs slightly shorter

* Wait for add to cart request before continuing test

* Fix formatting in cart.test.js

* Rename cartDataStale to setIsCartDataStale

* Create constant for localStorage timestamp name

* Rename cartDataIsStale to isCartDataStale

This is for consistency, the action to change this is called setIsCartDataStale - I think this reads better.

* Use cleaner logic when determining if the cart should render or fetch

* Change docblock for isCartDataStale selector

* Remove boolean cast from SET_IS_CART_DATA_STALE reducer

* Set longer timeouts for frontend cart tests

* Enclose cart staleness checks in condition/prevent unnecessary execution

* Remove unnecessary boolean cast from selector

* Use constant for local storage key in tests

* Use new localstorage key in tests. cant access constants in page context

Author: opr

assets/js/data/cart/action-types.ts

@@ -6,6 +6,7 @@ export const ACTION_TYPES = {
 	REMOVING_COUPON: 'REMOVING_COUPON',
 	RECEIVE_CART_ITEM: 'RECEIVE_CART_ITEM',
 	ITEM_PENDING_QUANTITY: 'ITEM_PENDING_QUANTITY',
+	SET_IS_CART_DATA_STALE: 'SET_IS_CART_DATA_STALE',
 	RECEIVE_REMOVED_ITEM: 'RECEIVE_REMOVED_ITEM',
 	UPDATING_CUSTOMER_DATA: 'UPDATING_CUSTOMER_DATA',
 	UPDATING_SELECTED_SHIPPING_RATE: 'UPDATING_SELECTED_SHIPPING_RATE',

assets/js/data/cart/actions.ts

@@ -122,6 +122,18 @@ export const itemIsPendingDelete = (
 		cartItemKey,
 		isPendingDelete,
 	} as const );
+/**
+ * Returns an action object to mark the cart data in the store as stale.
+ *
+ * @param   {boolean} [isCartDataStale=true] Flag to mark cart data as stale; true if
+ * 											 lastCartUpdate timestamp is newer than the
+ * 											 one in wcSettings.
+ */
+export const setIsCartDataStale = ( isCartDataStale = true ) =>
+	( {
+		type: types.SET_IS_CART_DATA_STALE,
+		isCartDataStale,
+	} as const );
 
 /**
  * Returns an action object used to track when customer data is being updated
@@ -435,6 +447,7 @@ export type CartAction = ReturnOrGeneratorYieldUnion<
 	| typeof itemIsPendingDelete
 	| typeof updatingCustomerData
 	| typeof shippingRatesBeingSelected
+	| typeof cartDataIsStale
 	| typeof updateCustomerData
 	| typeof removeItemFromCart
 	| typeof changeCartItemQuantity

assets/js/data/cart/constants.ts

@@ -14,3 +14,4 @@ export const CART_API_ERROR = {
 		status: 500,
 	},
 };
+export const LAST_CART_UPDATE_TIMESTAMP_KEY = 'wc-blocks_cart_update_timestamp';

assets/js/data/cart/reducers.ts

@@ -149,6 +149,16 @@ const reducer: Reducer< CartState > = (
 					updatingSelectedRate: !! action.isResolving,
 				},
 			};
+			break;
+		case types.SET_IS_CART_DATA_STALE:
+			state = {
+				...state,
+				metaData: {
+					...state.metaData,
+					isCartDataStale: action.isCartDataStale,
+				},
+			};
+			break;
 	}
 	return state;
 };

assets/js/data/cart/selectors.ts

@@ -59,6 +59,16 @@ export const isApplyingCoupon = ( state: CartState ): boolean => {
 	return !! state.metaData.applyingCoupon;
 };
 
+/**
+ * Returns true if cart is stale, false if it is not.
+ *
+ * @param {CartState} state The current state.
+ * @return {boolean} True if the cart data is stale.
+ */
+export const isCartDataStale = ( state: CartState ): boolean => {
+	return state.metaData.isCartDataStale;
+};
+
 /**
  * Retrieves the coupon code currently being applied.
  *

assets/js/data/default-states.ts

@@ -82,6 +82,7 @@ export const defaultCartState: CartState = {
 		updatingSelectedRate: false,
 		applyingCoupon: '',
 		removingCoupon: '',
+		isCartDataStale: false,
 	},
 	errors: [],
 };

assets/js/hocs/with-store-cart-api-hydration.js

@@ -4,7 +4,12 @@
 import { useRef } from '@wordpress/element';
 import { getSetting } from '@woocommerce/settings';
 import { CART_STORE_KEY } from '@woocommerce/block-data';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { LAST_CART_UPDATE_TIMESTAMP_KEY } from '../data/cart/constants';
 
 /**
  * Hydrate Cart API data.
@@ -13,13 +18,47 @@ import { useSelect } from '@wordpress/data';
  */
 const useStoreCartApiHydration = () => {
 	const cartData = useRef( getSetting( 'cartData' ) );
+	const { setIsCartDataStale } = useDispatch( CART_STORE_KEY );
 
 	useSelect( ( select, registry ) => {
 		if ( ! cartData.current ) {
 			return;
 		}
+		const { isResolving, hasFinishedResolution, isCartDataStale } = select(
+			CART_STORE_KEY
+		);
 
-		const { isResolving, hasFinishedResolution } = select( CART_STORE_KEY );
+		/**
+		 * This should only execute once. When the code further down the file executes
+		 * then the condition directly below this comment should never evaluate to true
+		 * on subsequent executions. Because of this localStorage.getItem won't be
+		 * called multiple times.
+		 */
+		if (
+			! isCartDataStale() &&
+			! isResolving( 'getCartData' ) &&
+			! hasFinishedResolution( 'getCartData', [] )
+		) {
+			const lastCartUpdateRaw = window.localStorage.getItem(
+				LAST_CART_UPDATE_TIMESTAMP_KEY
+			);
+
+			if ( lastCartUpdateRaw ) {
+				const lastCartUpdate = parseFloat( lastCartUpdateRaw );
+				const cartGeneratedTimestamp = parseFloat(
+					cartData.current.generated_timestamp
+				);
+
+				const needsUpdateFromAPI =
+					! isNaN( cartGeneratedTimestamp ) &&
+					! isNaN( lastCartUpdate ) &&
+					lastCartUpdate > cartGeneratedTimestamp;
+
+				if ( needsUpdateFromAPI ) {
+					setIsCartDataStale();
+				}
+			}
+		}
 		const {
 			receiveCart,
 			receiveError,
@@ -28,6 +67,7 @@ const useStoreCartApiHydration = () => {
 		} = registry.dispatch( CART_STORE_KEY );
 
 		if (
+			! isCartDataStale() &&
 			! isResolving( 'getCartData', [] ) &&
 			! hasFinishedResolution( 'getCartData', [] )
 		) {

assets/js/middleware/cart-update.ts

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import apiFetch, { APIFetchOptions } from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import { LAST_CART_UPDATE_TIMESTAMP_KEY } from '../data/cart/constants';
+
+/**
+ * Checks if this request is a POST to the wc/store/cart endpoint.
+ */
+const isCartUpdatePostRequest = ( options: APIFetchOptions ) => {
+	const url = options.url || options.path;
+	if ( ! url || ! options.method || options.method !== 'POST' ) {
+		return false;
+	}
+	return /wc\/store\/cart\//.exec( url ) !== null;
+};
+
+/**
+ * Middleware which saves the time that the cart was last modified in
+ * the browser's Local Storage
+ *
+ * @param {Object}   options Fetch options.
+ * @param {Function} next    The next middleware or fetchHandler to call.
+ *
+ * @return {*} The evaluated result of the remaining middleware chain.
+ */
+const cartUpdateMiddleware = (
+	options: APIFetchOptions,
+	/* eslint-disable @typescript-eslint/no-explicit-any */
+	next: ( arg0: APIFetchOptions, arg1: any ) => any
+) => {
+	if ( isCartUpdatePostRequest( options ) ) {
+		window.localStorage.setItem(
+			LAST_CART_UPDATE_TIMESTAMP_KEY,
+			( Date.now() / 1000 ).toString()
+		);
+	}
+	return next( options, next );
+};
+
+apiFetch.use( cartUpdateMiddleware );

assets/js/middleware/index.js

@@ -2,3 +2,4 @@
  * Internal dependencies
  */
 import './store-api-nonce';
+import './cart-update';

assets/js/type-defs/cart.ts

@@ -185,6 +185,7 @@ export interface Cart {
 export interface CartMeta {
 	updatingCustomerData: boolean;
 	updatingSelectedRate: boolean;
+	isCartDataStale: boolean;
 	applyingCoupon: string;
 	removingCoupon: string;
 }