Import hook from onboarding

plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx

@@ -2,7 +2,10 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { WooOnboardingTask } from '@woocommerce/onboarding';
+import {
+	WooOnboardingTask,
+	useLayoutExperiment,
+} from '@woocommerce/onboarding';
 import { Text } from '@woocommerce/experimental';
 import { registerPlugin } from '@wordpress/plugins';
 import { useMemo, useState } from '@wordpress/element';
@@ -17,7 +20,6 @@ import './index.scss';
 import { getAdminSetting } from '~/utils/admin-settings';
 import { getSurfacedProductTypeKeys, getProductTypes } from './utils';
 import useProductTypeListItems from './use-product-types-list-items';
-import useLayoutExperiment from '../use-product-layout-experiment';
 import Stack from './stack';
 import Footer from './footer';
 import CardLayout from './card-layout';

plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx

@@ -3,6 +3,7 @@
  */
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useLayoutExperiment } from '@woocommerce/onboarding';
 
 /**
  * Internal dependencies
@@ -10,7 +11,6 @@ import userEvent from '@testing-library/user-event';
 import { Products } from '../';
 import { defaultSurfacedProductTypes, productTypes } from '../constants';
 import { getAdminSetting } from '~/utils/admin-settings';
-import useLayoutExperiment from '../../use-product-layout-experiment';
 
 jest.mock( '@wordpress/data', () => ( {
 	...jest.requireActual( '@wordpress/data' ),
@@ -21,9 +21,8 @@ jest.mock( '~/utils/admin-settings', () => ( {
 	getAdminSetting: jest.fn(),
 } ) );
 
-jest.mock( '../../use-product-layout-experiment', () => ( {
-	default: jest.fn().mockReturnValue( [ false, 'stacked' ] ),
-	__esModule: true,
+jest.mock( '@woocommerce/onboarding', () => ( {
+	useLayoutExperiment: jest.fn().mockReturnValue( [ false, 'stacked' ] ),
 } ) );
 
 global.fetch = jest.fn().mockImplementation( () =>

plugins/woocommerce-admin/client/tasks/fills/index.js

@@ -1,8 +1,12 @@
+/**
+ * External dependencies
+ */
+import { isExperimentProductTask } from '@woocommerce/onboarding';
+
 /**
  * Internal dependencies
  */
 import { getAdminSetting } from '~/utils/admin-settings';
-import { isExperimentProductTask } from './use-product-layout-experiment';
 
 import './PaymentGatewaySuggestions';
 import './shipping';

plugins/woocommerce-admin/client/tasks/fills/use-product-layout-experiment.ts

@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
-import { loadExperimentAssignment } from '@woocommerce/explat';
-
-type Layout = 'control' | 'card' | 'stacked';
-
-export const getProductLayoutExperiment = async (): Promise< Layout > => {
-	const [ cardAssignment, stackedAssignment ] = await Promise.all( [
-		loadExperimentAssignment( `woocommerce_products_task_layout_card` ),
-		loadExperimentAssignment( `woocommerce_products_task_layout_stacked` ),
-	] );
-	// This logic may look flawed as in both looks like they can be assigned treatment at the same time,
-	// but in backend we segment the experiments by store country, so it will never be.
-	if ( cardAssignment?.variationName === 'treatment' ) {
-		return 'card';
-	} else if ( stackedAssignment?.variationName === 'treatment' ) {
-		return 'stacked';
-	}
-	return 'control';
-};
-
-export const isExperimentProductTask = async (): Promise< boolean > => {
-	return ( await getProductLayoutExperiment() ) !== 'control';
-};
-
-export const useLayoutExperiment = () => {
-	const [ isLoading, setIsLoading ] = useState< boolean >( true );
-	const [ experimentLayout, setExperimentLayout ] = useState< Layout >(
-		'control'
-	);
-
-	useEffect( () => {
-		getProductLayoutExperiment().then( ( layout ) => {
-			setExperimentLayout( layout );
-			setIsLoading( false );
-		} );
-	}, [ setExperimentLayout ] );
-
-	return [ isLoading, experimentLayout ];
-};
-
-export default useLayoutExperiment;