Import hook from onboarding
This commit is contained in:
parent
d2dd8c5c01
commit
16c36e1f7d
|
@ -2,7 +2,10 @@
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
import { WooOnboardingTask } from '@woocommerce/onboarding';
|
import {
|
||||||
|
WooOnboardingTask,
|
||||||
|
useLayoutExperiment,
|
||||||
|
} from '@woocommerce/onboarding';
|
||||||
import { Text } from '@woocommerce/experimental';
|
import { Text } from '@woocommerce/experimental';
|
||||||
import { registerPlugin } from '@wordpress/plugins';
|
import { registerPlugin } from '@wordpress/plugins';
|
||||||
import { useMemo, useState } from '@wordpress/element';
|
import { useMemo, useState } from '@wordpress/element';
|
||||||
|
@ -17,7 +20,6 @@ import './index.scss';
|
||||||
import { getAdminSetting } from '~/utils/admin-settings';
|
import { getAdminSetting } from '~/utils/admin-settings';
|
||||||
import { getSurfacedProductTypeKeys, getProductTypes } from './utils';
|
import { getSurfacedProductTypeKeys, getProductTypes } from './utils';
|
||||||
import useProductTypeListItems from './use-product-types-list-items';
|
import useProductTypeListItems from './use-product-types-list-items';
|
||||||
import useLayoutExperiment from '../use-product-layout-experiment';
|
|
||||||
import Stack from './stack';
|
import Stack from './stack';
|
||||||
import Footer from './footer';
|
import Footer from './footer';
|
||||||
import CardLayout from './card-layout';
|
import CardLayout from './card-layout';
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
*/
|
*/
|
||||||
import { render, waitFor } from '@testing-library/react';
|
import { render, waitFor } from '@testing-library/react';
|
||||||
import userEvent from '@testing-library/user-event';
|
import userEvent from '@testing-library/user-event';
|
||||||
|
import { useLayoutExperiment } from '@woocommerce/onboarding';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
|
@ -10,7 +11,6 @@ import userEvent from '@testing-library/user-event';
|
||||||
import { Products } from '../';
|
import { Products } from '../';
|
||||||
import { defaultSurfacedProductTypes, productTypes } from '../constants';
|
import { defaultSurfacedProductTypes, productTypes } from '../constants';
|
||||||
import { getAdminSetting } from '~/utils/admin-settings';
|
import { getAdminSetting } from '~/utils/admin-settings';
|
||||||
import useLayoutExperiment from '../../use-product-layout-experiment';
|
|
||||||
|
|
||||||
jest.mock( '@wordpress/data', () => ( {
|
jest.mock( '@wordpress/data', () => ( {
|
||||||
...jest.requireActual( '@wordpress/data' ),
|
...jest.requireActual( '@wordpress/data' ),
|
||||||
|
@ -21,9 +21,8 @@ jest.mock( '~/utils/admin-settings', () => ( {
|
||||||
getAdminSetting: jest.fn(),
|
getAdminSetting: jest.fn(),
|
||||||
} ) );
|
} ) );
|
||||||
|
|
||||||
jest.mock( '../../use-product-layout-experiment', () => ( {
|
jest.mock( '@woocommerce/onboarding', () => ( {
|
||||||
default: jest.fn().mockReturnValue( [ false, 'stacked' ] ),
|
useLayoutExperiment: jest.fn().mockReturnValue( [ false, 'stacked' ] ),
|
||||||
__esModule: true,
|
|
||||||
} ) );
|
} ) );
|
||||||
|
|
||||||
global.fetch = jest.fn().mockImplementation( () =>
|
global.fetch = jest.fn().mockImplementation( () =>
|
||||||
|
|
|
@ -1,8 +1,12 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import { isExperimentProductTask } from '@woocommerce/onboarding';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import { getAdminSetting } from '~/utils/admin-settings';
|
import { getAdminSetting } from '~/utils/admin-settings';
|
||||||
import { isExperimentProductTask } from './use-product-layout-experiment';
|
|
||||||
|
|
||||||
import './PaymentGatewaySuggestions';
|
import './PaymentGatewaySuggestions';
|
||||||
import './shipping';
|
import './shipping';
|
||||||
|
|
|
@ -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;
|
|
Loading…
Reference in New Issue