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

156 lines
4.3 KiB
TypeScript
Raw Normal View History

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import {
EXPERIMENTAL_PRODUCT_FORM_STORE_NAME,
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 './add-edit-product-page.scss';
import './fills';
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 { hasFinishedResolution: hasProductFormFinishedResolution } =
select( EXPERIMENTAL_PRODUCT_FORM_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 ) ]
)
) ||
! hasProductFormFinishedResolution( 'getProductForm' ),
isPendingAction:
isPending( 'createProduct' ) ||
isPending(
'deleteProduct',
parseInt( productId, 10 )
) ||
isPending( 'updateProduct', parseInt( productId, 10 ) ),
};
}
return {
isLoading: false,
isPendingAction: false,
};
}
);
useEffect( () => {
Fix/37502: Correct spelling errors. (#37887) * change reference of Catpure to Capture Co-Authored-By: Vikram <93216400+vikrampm1@users.noreply.github.com> * change reference of expicitly to explicitly Co-Authored-By: Vikram <93216400+vikrampm1@users.noreply.github.com> * change reference 'cutted' to 'cut' * change reference 'determening' to 'determining' * change reference 'retreive' to 'retrieve' * change reference 'neccessary' to 'necessary' * change reference 'Fitler' to 'Filter' * change reference of "seperate" to "separate" Co-Authored-By: Ankit K Gupta <ankit.himcs@gmail.com> * change reference of "wether" to "whether" Co-Authored-By: Sumit Bagthariya <67687255+qasumitbagthariya@users.noreply.github.com> * change reference of "staus" to "status" * change reference of "retrive" to "retrieve" * change references of "gatways" to "gateways" * change references of "existant" to "existent" * change reference of "requries" to "requires" * change reference of "configuation" to "configuration" * change reference of "processsing" to "processing" * change reference of "represenation" to "representation" * change reference of "dimentions" to "dimensions" * change references of "reigster" to "register" * change reference of "colum" to "column" * change reference of "transtions" to "transitions" * change references of "intially" to "initially" * change references of "orignal" to "original" * change references of "deprected" to "deprecated" * change references of "paramter" to "parameter" * change reference of "intance" to "instance" * change reference of "elemets" to "elements" * change references of "funcitons" to "functions" * change reference of "specificed" to "specified" * change references of "atributes" to "attributes" * change reference of "tast" to "task" * change reference of "chaning" to "changing" * change reference of "retreiving" to "retrieving" * change reference of "caluclation" to "calculation" * change references of "Invaid" to "Invalid" * change references of "paramaters" to "parameters" * change reference of "Additonal" to "Additional" * change reference of "teh" to "the" * change reference of "evalutes" to "evaluates" * change reference of "addedd" to "added" * change reference of "excempt" to "exempt" * change reference of "sequencially" to "sequentially" * change reference of "previos" to "previous" * change reference of "elegible" to "eligible" * change references of "Boostrap" to "Bootstrap" * change references of "compability" to "compatibility" * change reference of "heirarchy" to "hierarchy" * change references of "visibilty" to "visibility" * change reference of "comparsion" to "comparison" * change reference of "capabilties" to "capabilities" * change reference of "datatores" to "datastores" * change reference of "occured" to "occurred" * change reference of "coresponding" to "corresponding" * change references of "thier" to "their" * change reference of "sucessfully" to "successfully" * change reference of "insde" to "inside" * change reference of "nagivation" to "navigation" * change references of "visiblity" to "visibility" * change reference of "documentaiton" to "documentation" * change reference of "anayltics" to "analytics" * change reference of "intalling" to "installing" * change reference of "mininum" to "minimum" * change references of "intial" to "initial" * change reference of "Feld" to "Field" * change reference of "taks" to "task" * change reference of "trasnfer" to "transfer" * change reference of "respone" to "response" * change reference of "Extenstions" to "Extensions" * change reference of "detault" to "default" * change reference of "simultanious" to "simultaneous" * change reference of "overides" to "overrides" * change references of "Indvidual" to "Individual" * change reference of "refering" to "referring" * change reference of "aginst" to "against" * change reference of "execuatable" to "executable" * change reference of "repsonse" to "response" * change reference of "documention" to "documentation" * change reference of "asumed" to "assumed" * change reference of "Minium" to "Minimum" * change reference of "unqiue" to "unique" * change references of "existance" to "existence" * change reference of "compatability" to "compatibility" * change reference of "Taxnomy" to "Taxonomy" * change reference of "quering" to "querying" * change reference of "retrun" to "return" * change reference of "informations" to "information" Co-Authored-By: Viktor Szépe <viktor@szepe.net> * Add changelog * Add changelog * Fix typo --------- Co-authored-by: Vikram <93216400+vikrampm1@users.noreply.github.com> Co-authored-by: Ankit K Gupta <ankit.himcs@gmail.com> Co-authored-by: Sumit Bagthariya <67687255+qasumitbagthariya@users.noreply.github.com> Co-authored-by: Viktor Szépe <viktor@szepe.net> Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
2023-05-08 07:55:09 +00:00
// used for determining 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 id="error">
<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>
) }
{ window.wcAdminFeatures[ 'product-variation-management' ] &&
productVariation &&
product && (
<ProductVariationForm
product={ product }
productVariation={ productVariation }
/>
) }
{ ! isProductVariation &&
product &&
( product.status !== 'trash' || wasDeletedUsingAction ) && (
<ProductForm formRef={ formRef } product={ product } />
) }
</div>
);
};
export default EditProductPage;