Add manual stock management section to product management experience (#35047)

* Add manual stock management section to product management experience

* Add changelog entry

* Add default value for stock status

* Fix up lint issues

* Handle PR feedback

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

@@ -28,7 +28,7 @@ const AddProductPage: React.FC = () => {
 	return (
 		<div className="woocommerce-add-product">
 			<Form< Partial< Product > >
-				initialValues={ { stock_quantity: 0 } }
+				initialValues={ { stock_quantity: 0, stock_status: 'instock' } }
 				errors={ {} }
 				validate={ validate }
 			>

plugins/woocommerce-admin/client/products/layout/product-form-layout.scss

@@ -2,11 +2,13 @@
 	max-width: 1032px;
 	margin: 0 auto;
 
-	h4 {
+	h4,
+	.components-radio-control .components-base-control__label {
 		font-size: 14px;
 		font-weight: 600;
 		margin-bottom: 18px;
 		margin-top: 26px;
+		text-transform: none;
 	}
 
 	.components-card__body h4:first-child {

plugins/woocommerce-admin/client/products/layout/product-section-layout.scss

@@ -15,11 +15,15 @@
 
 		.components-base-control,
 		.woocommerce-rich-text-editor {
-			&:not(:first-child) {
+			&:not(:first-child):not(.components-radio-control) {
 				margin-top: $gap-large - $gap-smaller;
 				margin-bottom: 0;
 			}
 		}
+
+		.components-radio-control .components-v-stack {
+			gap: $gap-small;
+		}
 	}
 
 	&__header {

plugins/woocommerce-admin/client/products/sections/product-inventory-section/manual-stock-section.tsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RadioControl } from '@wordpress/components';
+import { useFormContext } from '@woocommerce/components';
+import { Product } from '@woocommerce/data';
+
+export const ManualStockSection: React.FC = () => {
+	const { getInputProps } = useFormContext< Product >();
+	const inputProps = getInputProps( 'stock_status' );
+	// These properties cause issues with the RadioControl component.
+	// A fix to form upstream would help if we can identify what type of input is used.
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore
+	delete inputProps.checked;
+	delete inputProps.value;
+
+	return (
+		<RadioControl
+			label={ __( 'Stock status', 'woocommerce' ) }
+			options={ [
+				{
+					label: __( 'In stock', 'woocommerce' ),
+					value: 'instock',
+				},
+				{
+					label: __( 'Out of stock', 'woocommerce' ),
+					value: 'outofstock',
+				},
+				{
+					label: __( 'On backorder', 'woocommerce' ),
+					value: 'onbackorder',
+				},
+			] }
+			{ ...inputProps }
+		/>
+	);
+};

plugins/woocommerce-admin/client/products/sections/product-inventory-section/product-inventory-section.tsx

@@ -20,6 +20,7 @@ import { getCheckboxProps, getTextControlProps } from '../utils';
 import { getAdminSetting } from '~/utils/admin-settings';
 import { ProductSectionLayout } from '../../layout/product-section-layout';
 import { ManageStockSection } from './manage-stock-section';
+import { ManualStockSection } from './manual-stock-section';
 
 export const ProductInventorySection: React.FC = () => {
 	const { getInputProps, values } = useFormContext< Product >();
@@ -82,6 +83,7 @@ export const ProductInventorySection: React.FC = () => {
 							{ values.manage_stock && <ManageStockSection /> }
 						</>
 					) }
+					{ ! values.manage_stock && <ManualStockSection /> }
 				</CardBody>
 			</Card>
 		</ProductSectionLayout>

plugins/woocommerce/changelog/add-34388

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add manual stock management section to product management experience