49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { recordEvent } from '@woocommerce/tracks';
|
|
import { useSelect } from '@wordpress/data';
|
|
import { useEffect } from '@wordpress/element';
|
|
import { Spinner } from '@wordpress/components';
|
|
import {
|
|
EXPERIMENTAL_PRODUCT_FORM_STORE_NAME,
|
|
WCDataSelector,
|
|
} from '@woocommerce/data';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { ProductForm } from './product-form';
|
|
import { ProductTourContainer } from './tour';
|
|
import './add-edit-product-page.scss';
|
|
|
|
const AddProductPage: React.FC = () => {
|
|
const { isLoading } = useSelect( ( select: WCDataSelector ) => {
|
|
const { hasFinishedResolution: hasProductFormFinishedResolution } =
|
|
select( EXPERIMENTAL_PRODUCT_FORM_STORE_NAME );
|
|
return {
|
|
isLoading: ! hasProductFormFinishedResolution( 'getProductForm' ),
|
|
};
|
|
} );
|
|
useEffect( () => {
|
|
recordEvent( 'view_new_product_management_experience' );
|
|
}, [] );
|
|
|
|
return (
|
|
<div className="woocommerce-add-product">
|
|
{ isLoading ? (
|
|
<div className="woocommerce-edit-product__spinner">
|
|
<Spinner />
|
|
</div>
|
|
) : (
|
|
<>
|
|
<ProductForm />
|
|
<ProductTourContainer />
|
|
</>
|
|
) }
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddProductPage;
|