woocommerce/plugins/woocommerce-admin/client/products/edit-product-page.tsx

149 lines
4.0 KiB
TypeScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import {
EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME,
PartialProduct,
Product,
PRODUCTS_STORE_NAME,
WCDataSelector,
} from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { useEffect, useRef } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { Spinner, FormRef } from '@woocommerce/components';
import { useParams } from 'react-router-dom';
/**
* Internal dependencies
*/
import { ProductForm } from './product-form';
import { ProductFormLayout } from './layout/product-form-layout';
import { ProductVariationForm } from './product-variation-form';
import './product-page.scss';
const EditProductPage: React.FC = () => {
const { productId, variationId } = useParams();
const isProductVariation = !! variationId;
const previousProductRef = useRef< PartialProduct >();
const formRef = useRef< FormRef< Partial< Product > > >( null );
const { product, isLoading, isPendingAction, productVariation } = useSelect(
( select: WCDataSelector ) => {
const {
getProduct,
hasFinishedResolution: hasProductFinishedResolution,
isPending,
getPermalinkParts,
} = select( PRODUCTS_STORE_NAME );
const {
getProductVariation,
hasFinishedResolution: hasProductVariationFinishedResolution,
} = select( EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME );
if ( productId ) {
const retrievedProduct = getProduct(
parseInt( productId, 10 ),
undefined
);
const permalinkParts = getPermalinkParts(
parseInt( productId, 10 )
);
return {
product:
permalinkParts && retrievedProduct
? retrievedProduct
: undefined,
productVariation:
isProductVariation &&
getProductVariation( {
id: parseInt( variationId, 10 ),
product_id: parseInt( productId, 10 ),
} ),
isLoading:
! hasProductFinishedResolution( 'getProduct', [
parseInt( productId, 10 ),
] ) ||
! hasProductFinishedResolution( 'getPermalinkParts', [
parseInt( productId, 10 ),
] ) ||
! (
isProductVariation &&
hasProductVariationFinishedResolution(
'getProductVariation',
[ parseInt( variationId, 10 ) ]
)
),
isPendingAction:
isPending( 'createProduct' ) ||
isPending(
'deleteProduct',
parseInt( productId, 10 )
) ||
isPending( 'updateProduct', parseInt( productId, 10 ) ),
};
}
return {
isLoading: false,
isPendingAction: false,
};
}
);
useEffect( () => {
// used for determening the wasDeletedUsingAction condition.
if (
previousProductRef.current &&
product &&
previousProductRef.current.id !== product.id &&
formRef.current
) {
formRef.current.resetForm( product );
}
previousProductRef.current = product;
}, [ product ] );
useEffect( () => {
recordEvent( 'view_new_product_management_experience' );
}, [] );
const wasDeletedUsingAction =
previousProductRef.current?.id === product?.id &&
previousProductRef.current?.status !== 'trash' &&
product?.status === 'trash';
return (
<div className="woocommerce-edit-product">
{ isLoading && ! product ? (
<div className="woocommerce-edit-product__spinner">
<Spinner />
</div>
) : null }
{ product &&
product.status === 'trash' &&
! isPendingAction &&
! wasDeletedUsingAction && (
<ProductFormLayout>
<div className="woocommerce-edit-product__error">
{ __(
'You cannot edit this item because it is in the Trash. Please restore it and try again.',
'woocommerce'
) }
</div>
</ProductFormLayout>
) }
{ productVariation && product && (
<ProductVariationForm
product={ product }
productVariation={ productVariation }
/>
) }
{ ! isProductVariation &&
product &&
( product.status !== 'trash' || wasDeletedUsingAction ) && (
<ProductForm formRef={ formRef } product={ product } />
) }
</div>
);
};
export default EditProductPage;