Merge branch 'trunk' of github.com:woocommerce/woocommerce into update/31217

package.json

@@ -38,7 +38,7 @@
   "dependencies": {
     "@babel/core": "7.12.9",
     "@wordpress/babel-plugin-import-jsx-pragma": "^3.1.0",
-    "@wordpress/babel-preset-default": "^6.3.4",
+    "@wordpress/babel-preset-default": "^6.4.1",
     "lodash": "^4.17.21",
     "wp-textdomain": "1.0.1"
   }

packages/js/api/package.json

@@ -47,7 +47,7 @@
     "axios-mock-adapter": "^1.20.0",
     "eslint": "^8.2.0",
     "jest": "^27.3.1",
-    "ts-jest": "^27.0.7",
+    "ts-jest": "25.5.0",
     "typescript": "^4.4.4"
   },
   "publishConfig": {

packages/js/api/src/http/axios/axios-oauth-interceptor.ts

@@ -1,6 +1,6 @@
 import type { AxiosRequestConfig } from 'axios';
-import createHmac from 'create-hmac';
-import OAuth from 'oauth-1.0a';
+import * as createHmac from 'create-hmac';
+import * as OAuth from 'oauth-1.0a';
 import { AxiosInterceptor } from './axios-interceptor';
 import { buildURLWithParams } from './utils';
 

packages/js/e2e-core-tests/specs/api/coupon.test.js

@@ -7,23 +7,19 @@ const { HTTPClientFactory, Coupon } = require( '@woocommerce/api' );
  * External dependencies
  */
 const config = require( 'config' );
-const {
-	it,
-	describe,
-	beforeAll,
-} = require( '@jest/globals' );
+const { it, describe, beforeAll } = require( '@jest/globals' );
 
 /**
  * Create the default coupon and tests interactions with it via the API.
  */
 const runCouponApiTest = () => {
-	describe('REST API > Coupon', () => {
+	describe( 'REST API > Coupon', () => {
 		let client;
 		let percentageCoupon;
 		let coupon;
 		let repository;
 
-		beforeAll(async () => {
+		beforeAll( async () => {
 			percentageCoupon = config.get( 'coupons.percentage' );
 			const admin = config.get( 'users.admin' );
 			const url = config.get( 'url' );
@@ -34,15 +30,17 @@ const runCouponApiTest = () => {
 				.create();
 		} );
 
-		it('can create a coupon', async () => {
+		it( 'can create a coupon', async () => {
 			repository = Coupon.restRepository( client );
 
 			// Check properties of the coupon in the create coupon response.
 			coupon = await repository.create( percentageCoupon );
-			expect( coupon ).toEqual( expect.objectContaining( percentageCoupon ) );
-		});
+			expect( coupon ).toEqual(
+				expect.objectContaining( percentageCoupon )
+			);
+		} );
 
-		it('can retrieve a coupon', async () => {
+		it( 'can retrieve a coupon', async () => {
 			const couponProperties = {
 				id: coupon.id,
 				code: percentageCoupon.code,
@@ -51,12 +49,16 @@ const runCouponApiTest = () => {
 			};
 
 			// Read coupon directly from API to compare.
-			const response = await client.get( `/wc/v3/coupons/${coupon.id}` );
-			expect( response.status ).toBe( 200 );
-			expect( response.data ).toEqual( expect.objectContaining( couponProperties ) );
-		});
+			const response = await client.get(
+				`/wc/v3/coupons/${ coupon.id }`
+			);
+			expect( response.statusCode ).toBe( 200 );
+			expect( response.data ).toEqual(
+				expect.objectContaining( couponProperties )
+			);
+		} );
 
-		it('can update a coupon', async () => {
+		it( 'can update a coupon', async () => {
 			const updatedCouponProperties = {
 				amount: '75.00',
 				discount_type: 'fixed_cart',
@@ -66,19 +68,23 @@ const runCouponApiTest = () => {
 			await repository.update( coupon.id, updatedCouponProperties );
 
 			// Check the coupon response for the updated values.
-			const response = await client.get( `/wc/v3/coupons/${coupon.id}` );
-			expect( response.status ).toBe( 200 );
-			expect( response.data ).toEqual( expect.objectContaining( updatedCouponProperties ) );
-		});
+			const response = await client.get(
+				`/wc/v3/coupons/${ coupon.id }`
+			);
+			expect( response.statusCode ).toBe( 200 );
+			expect( response.data ).toEqual(
+				expect.objectContaining( updatedCouponProperties )
+			);
+		} );
 
-		it('can delete a coupon', async () => {
+		it( 'can delete a coupon', async () => {
 			// Delete the coupon
 			const status = await repository.delete( coupon.id );
 
 			// If the delete is successful, the response comes back truthy
 			expect( status ).toBeTruthy();
-		});
-	});
+		} );
+	} );
 };
 
 module.exports = runCouponApiTest;

packages/js/e2e-core-tests/specs/api/external-product.test.js

@@ -7,24 +7,20 @@ const { HTTPClientFactory, ExternalProduct } = require( '@woocommerce/api' );
  * External dependencies
  */
 const config = require( 'config' );
-const {
-	it,
-	describe,
-	beforeAll,
-} = require( '@jest/globals' );
+const { it, describe, beforeAll } = require( '@jest/globals' );
 
 /**
  * Create an external product and retrieve via the API.
  */
 const runExternalProductAPITest = () => {
 	// @todo: add a call to ensure pretty permalinks are enabled once settings api is in use.
-	describe('REST API > External Product', () => {
+	describe( 'REST API > External Product', () => {
 		let client;
 		let defaultExternalProduct;
 		let product;
 		let repository;
 
-		beforeAll(async () => {
+		beforeAll( async () => {
 			defaultExternalProduct = config.get( 'products.external' );
 			const admin = config.get( 'users.admin' );
 			const url = config.get( 'url' );
@@ -35,15 +31,17 @@ const runExternalProductAPITest = () => {
 				.create();
 		} );
 
-		it('can create an external product', async () => {
+		it( 'can create an external product', async () => {
 			repository = ExternalProduct.restRepository( client );
 
 			// Check properties of product in the create product response.
 			product = await repository.create( defaultExternalProduct );
-			expect( product ).toEqual( expect.objectContaining( defaultExternalProduct ) );
-		});
+			expect( product ).toEqual(
+				expect.objectContaining( defaultExternalProduct )
+			);
+		} );
 
-		it('can retrieve a raw external product', async () => {
+		it( 'can retrieve a raw external product', async () => {
 			const rawProperties = {
 				id: product.id,
 				button_text: defaultExternalProduct.buttonText,
@@ -52,12 +50,16 @@ const runExternalProductAPITest = () => {
 			};
 
 			// Read product directly from api.
-			const response = await client.get( `/wc/v3/products/${product.id}` );
-			expect( response.status ).toBe( 200 );
-			expect( response.data ).toEqual( expect.objectContaining( rawProperties ) );
-		});
+			const response = await client.get(
+				`/wc/v3/products/${ product.id }`
+			);
+			expect( response.statusCode ).toBe( 200 );
+			expect( response.data ).toEqual(
+				expect.objectContaining( rawProperties )
+			);
+		} );
 
-		it('can retrieve a transformed external product', async () => {
+		it( 'can retrieve a transformed external product', async () => {
 			const transformedProperties = {
 				...defaultExternalProduct,
 				id: product.id,
@@ -66,14 +68,16 @@ const runExternalProductAPITest = () => {
 
 			// Read product via the repository.
 			const transformed = await repository.read( product.id );
-			expect( transformed ).toEqual( expect.objectContaining( transformedProperties ) );
-		});
+			expect( transformed ).toEqual(
+				expect.objectContaining( transformedProperties )
+			);
+		} );
 
-		it('can delete an external product', async () => {
+		it( 'can delete an external product', async () => {
 			const status = repository.delete( product.id );
 			expect( status ).toBeTruthy();
-		});
-	});
+		} );
+	} );
 };
 
 module.exports = runExternalProductAPITest;

packages/js/e2e-core-tests/specs/api/grouped-product.test.js

@@ -1,32 +1,32 @@
 /**
  * Internal dependencies
  */
-const { HTTPClientFactory, GroupedProduct, SimpleProduct } = require( '@woocommerce/api' );
+const {
+	HTTPClientFactory,
+	GroupedProduct,
+	SimpleProduct,
+} = require( '@woocommerce/api' );
 
 /**
  * External dependencies
  */
 const config = require( 'config' );
-const {
-	it,
-	describe,
-	beforeAll,
-} = require( '@jest/globals' );
+const { it, describe, beforeAll } = require( '@jest/globals' );
 
 /**
  * Create an external product and retrieve via the API.
  */
 const runGroupedProductAPITest = () => {
 	// @todo: add a call to ensure pretty permalinks are enabled once settings api is in use.
-	describe('REST API > Grouped Product', () => {
+	describe( 'REST API > Grouped Product', () => {
 		let client;
 		let defaultGroupedProduct;
 		let baseGroupedProduct;
 		let product;
-		let groupedProducts = [];
+		const groupedProducts = [];
 		let repository;
 
-		beforeAll(async () => {
+		beforeAll( async () => {
 			defaultGroupedProduct = config.get( 'products.grouped' );
 			const admin = config.get( 'users.admin' );
 			const url = config.get( 'url' );
@@ -38,13 +38,19 @@ const runGroupedProductAPITest = () => {
 
 			// Create the simple products to be grouped first.
 			repository = SimpleProduct.restRepository( client );
-			for ( let c = 0; c < defaultGroupedProduct.groupedProducts.length; c++ ) {
-				product = await repository.create( defaultGroupedProduct.groupedProducts[ c ] );
+			for (
+				let c = 0;
+				c < defaultGroupedProduct.groupedProducts.length;
+				c++
+			) {
+				product = await repository.create(
+					defaultGroupedProduct.groupedProducts[ c ]
+				);
 				groupedProducts.push( product.id );
 			}
-		});
+		} );
 
-		it('can create a grouped product', async () => {
+		it( 'can create a grouped product', async () => {
 			baseGroupedProduct = {
 				...defaultGroupedProduct,
 				groupedProducts,
@@ -53,38 +59,46 @@ const runGroupedProductAPITest = () => {
 
 			// Check properties of product in the create product response.
 			product = await repository.create( baseGroupedProduct );
-			expect( product ).toEqual( expect.objectContaining( baseGroupedProduct ) );
-		});
+			expect( product ).toEqual(
+				expect.objectContaining( baseGroupedProduct )
+			);
+		} );
 
-		it('can retrieve a raw grouped product', async () => {
-			let rawProperties = {
+		it( 'can retrieve a raw grouped product', async () => {
+			const rawProperties = {
 				id: product.id,
 				grouped_products: baseGroupedProduct.groupedProducts,
 				...defaultGroupedProduct,
 			};
-			delete rawProperties['groupedProducts'];
+			delete rawProperties.groupedProducts;
 
 			// Read product directly from api.
-			const response = await client.get( `/wc/v3/products/${product.id}` );
-			expect( response.status ).toBe( 200 );
-			expect( response.data ).toEqual( expect.objectContaining( rawProperties ) );
-		});
+			const response = await client.get(
+				`/wc/v3/products/${ product.id }`
+			);
+			expect( response.statusCode ).toBe( 200 );
+			expect( response.data ).toEqual(
+				expect.objectContaining( rawProperties )
+			);
+		} );
 
-		it('can retrieve a transformed grouped product', async () => {
+		it( 'can retrieve a transformed grouped product', async () => {
 			// Read product via the repository.
 			const transformed = await repository.read( product.id );
-			expect( transformed ).toEqual( expect.objectContaining( baseGroupedProduct ) );
-		});
+			expect( transformed ).toEqual(
+				expect.objectContaining( baseGroupedProduct )
+			);
+		} );
 
-		it('can delete a grouped product', async () => {
+		it( 'can delete a grouped product', async () => {
 			const status = repository.delete( product.id );
 			expect( status ).toBeTruthy();
 			// Delete the simple "child" products.
 			groupedProducts.forEach( ( productId ) => {
 				repository.delete( productId );
-			});
-		});
-	});
+			} );
+		} );
+	} );
 };
 
 module.exports = runGroupedProductAPITest;

packages/js/e2e-core-tests/specs/api/order.test.js

@@ -1,28 +1,24 @@
 /**
  * Internal dependencies
  */
- const { HTTPClientFactory, Order } = require( '@woocommerce/api' );
+const { HTTPClientFactory, Order } = require( '@woocommerce/api' );
 
- /**
-  * External dependencies
-  */
- const config = require( 'config' );
- const {
-	 it,
-	 describe,
-	 beforeAll,
- } = require( '@jest/globals' );
+/**
+ * External dependencies
+ */
+const config = require( 'config' );
+const { it, describe, beforeAll } = require( '@jest/globals' );
 
- /**
+/**
  * Creates an order and tests interactions with it via the API.
  */
 const runOrderApiTest = () => {
-	describe('REST API > Order', () => {
+	describe( 'REST API > Order', () => {
 		let client;
 		let order;
 		let repository;
 
-		beforeAll(async () => {
+		beforeAll( async () => {
 			order = config.get( 'orders.basicPaidOrder' );
 			const admin = config.get( 'users.admin' );
 			const url = config.get( 'url' );
@@ -33,15 +29,15 @@ const runOrderApiTest = () => {
 				.create();
 		} );
 
-		it('can create an order', async () => {
+		it( 'can create an order', async () => {
 			repository = Order.restRepository( client );
 
 			// Check properties of the order in the create order response.
 			order = await repository.create( order );
 			expect( order ).toEqual( expect.objectContaining( order ) );
-		});
+		} );
 
-		it('can retrieve an order', async () => {
+		it( 'can retrieve an order', async () => {
 			const orderProperties = {
 				id: order.id,
 				payment_method: order.paymentMethod,
@@ -49,12 +45,14 @@ const runOrderApiTest = () => {
 			};
 
 			// Read order directly from API to compare.
-			const response = await client.get( `/wc/v3/orders/${order.id}` );
-			expect( response.status ).toBe( 200 );
-			expect( response.data ).toEqual( expect.objectContaining( orderProperties ) );
-		});
+			const response = await client.get( `/wc/v3/orders/${ order.id }` );
+			expect( response.statusCode ).toBe( 200 );
+			expect( response.data ).toEqual(
+				expect.objectContaining( orderProperties )
+			);
+		} );
 
-		it('can update an order', async () => {
+		it( 'can update an order', async () => {
 			const updatedOrderProperties = {
 				payment_method: 'bacs',
 				status: 'completed',
@@ -63,19 +61,21 @@ const runOrderApiTest = () => {
 			await repository.update( order.id, updatedOrderProperties );
 
 			// Check the order response for the updated values.
-			const response = await client.get( `/wc/v3/orders/${order.id}` );
-			expect( response.status ).toBe( 200 );
-			expect( response.data ).toEqual( expect.objectContaining( updatedOrderProperties ) );
-		});
+			const response = await client.get( `/wc/v3/orders/${ order.id }` );
+			expect( response.statusCode ).toBe( 200 );
+			expect( response.data ).toEqual(
+				expect.objectContaining( updatedOrderProperties )
+			);
+		} );
 
-		it('can delete an order', async () => {
+		it( 'can delete an order', async () => {
 			// Delete the order
 			const status = await repository.delete( order.id );
 
 			// If the delete is successful, the response comes back truthy
 			expect( status ).toBeTruthy();
-		});
-	});
+		} );
+	} );
 };
 
 module.exports = runOrderApiTest;

packages/js/e2e-core-tests/specs/api/telemetry.test.js

@@ -7,11 +7,7 @@ const { HTTPClientFactory } = require( '@woocommerce/api' );
  * External dependencies
  */
 const config = require( 'config' );
-const {
-	it,
-	describe,
-	beforeAll,
-} = require( '@jest/globals' );
+const { it, describe, beforeAll } = require( '@jest/globals' );
 
 /**
  * Create the default coupon and tests interactions with it via the API.
@@ -20,7 +16,7 @@ const runTelemetryAPITest = () => {
 	describe( 'REST API > Telemetry', () => {
 		let client;
 
-		beforeAll(async () => {
+		beforeAll( async () => {
 			const admin = config.get( 'users.admin' );
 			const url = config.get( 'url' );
 
@@ -30,29 +26,26 @@ const runTelemetryAPITest = () => {
 				.create();
 		} );
 
-		it.each([
-			null,
-			{},
-			{ platform: 'ios' },
-			{ version: '1.1' },
-		])( 'errors for invalid request body - %p', async data => {
-			const response = await client
-				.post( `/wc-telemetry/tracker`, data )
-				.catch( err => {
-					expect( err.response.status ).toBe( 400 );
-				} );
+		it.each( [ null, {}, { platform: 'ios' }, { version: '1.1' } ] )(
+			'errors for invalid request body - %p',
+			async ( data ) => {
+				const response = await client
+					.post( `/wc-telemetry/tracker`, data )
+					.catch( ( err ) => {
+						expect( err.statusCode ).toBe( 400 );
+					} );
 
-			expect( response ).toBeUndefined();
-		} );
+				expect( response ).toBeUndefined();
+			}
+		);
 
 		it( 'returns 200 with correct fields', async () => {
-			const response = await client
-				.post( `/wc-telemetry/tracker`, {
-					platform: 'ios',
-					version: '1.0',
-				})
+			const response = await client.post( `/wc-telemetry/tracker`, {
+				platform: 'ios',
+				version: '1.0',
+			} );
 
-			expect( response.status ).toBe( 200 );
+			expect( response.statusCode ).toBe( 200 );
 		} );
 	} );
 };

plugins/woocommerce/includes/admin/class-wc-admin-notices.php

@@ -51,7 +51,7 @@ class WC_Admin_Notices {
 		add_action( 'switch_theme', array( __CLASS__, 'reset_admin_notices' ) );
 		add_action( 'woocommerce_installed', array( __CLASS__, 'reset_admin_notices' ) );
 		add_action( 'wp_loaded', array( __CLASS__, 'add_redirect_download_method_notice' ) );
-		add_action( 'wp_loaded', array( __CLASS__, 'hide_notices' ) );
+		add_action( 'admin_init', array( __CLASS__, 'hide_notices' ), 20 );
 		// @TODO: This prevents Action Scheduler async jobs from storing empty list of notices during WC installation.
 		// That could lead to OBW not starting and 'Run setup wizard' notice not appearing in WP admin, which we want
 		// to avoid.

plugins/woocommerce/includes/class-wc-post-types.php

@@ -299,14 +299,14 @@ class WC_Post_Types {
 
 		$shop_page_id = wc_get_page_id( 'shop' );
 
-		if ( current_theme_supports( 'woocommerce' ) ) {
+		if ( wc_current_theme_supports_woocommerce_or_fse() ) {
 			$has_archive = $shop_page_id && get_post( $shop_page_id ) ? urldecode( get_page_uri( $shop_page_id ) ) : 'shop';
 		} else {
 			$has_archive = false;
 		}
 
 		// If theme support changes, we may need to flush permalinks since some are changed based on this flag.
-		$theme_support = current_theme_supports( 'woocommerce' ) ? 'yes' : 'no';
+		$theme_support =  wc_current_theme_supports_woocommerce_or_fse() ? 'yes' : 'no';
 		if ( get_option( 'current_theme_supports_woocommerce' ) !== $theme_support && update_option( 'current_theme_supports_woocommerce', $theme_support ) ) {
 			update_option( 'woocommerce_queue_flush_rewrite_rules', 'yes' );
 		}

plugins/woocommerce/includes/class-wc-template-loader.php

@@ -37,13 +37,18 @@ class WC_Template_Loader {
 	 * Hook in methods.
 	 */
 	public static function init() {
-		self::$theme_support = current_theme_supports( 'woocommerce' );
+		self::$theme_support = wc_current_theme_supports_woocommerce_or_fse();
 		self::$shop_page_id  = wc_get_page_id( 'shop' );
 
 		// Supported themes.
 		if ( self::$theme_support ) {
 			add_filter( 'template_include', array( __CLASS__, 'template_loader' ) );
 			add_filter( 'comments_template', array( __CLASS__, 'comments_template_loader' ) );
+
+			// Loads gallery scripts on Product page for FSE themes.
+			if ( wc_current_theme_is_fse_theme() ) {
+				self::add_support_for_product_page_gallery();
+			}
 		} else {
 			// Unsupported themes.
 			add_action( 'template_redirect', array( __CLASS__, 'unsupported_theme_init' ) );
@@ -292,6 +297,15 @@ class WC_Template_Loader {
 		add_filter( 'woocommerce_product_tabs', array( __CLASS__, 'unsupported_theme_remove_review_tab' ) );
 		remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
 		remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
+		self::add_support_for_product_page_gallery();
+	}
+
+	/**
+	 * Add theme support for Product page gallery.
+	 *
+	 * @since x.x.x
+	 */
+	private static function add_support_for_product_page_gallery() {
 		add_theme_support( 'wc-product-gallery-zoom' );
 		add_theme_support( 'wc-product-gallery-lightbox' );
 		add_theme_support( 'wc-product-gallery-slider' );

plugins/woocommerce/includes/wc-conditional-functions.php

@@ -494,3 +494,28 @@ function wc_is_file_valid_csv( $file, $check_path = true ) {
 
 	return false;
 }
+
+/**
+ * Check if the current theme is an FSE theme.
+ *
+ * @since x.x.x
+ * @return bool
+ */
+function wc_current_theme_is_fse_theme() {
+	if ( function_exists( 'gutenberg_is_fse_theme' ) ) {
+		return (bool) gutenberg_is_fse_theme();
+	}
+
+	return false;
+}
+
+/**
+ * Check if the current theme has WooCommerce support or is a FSE theme.
+ *
+ * @since x.x.x
+ * @return bool
+ */
+function wc_current_theme_supports_woocommerce_or_fse() {
+	return (bool) current_theme_supports( 'woocommerce' ) || wc_current_theme_is_fse_theme();
+}
+