From 3a2a22905ba12df5ee05ba244ef1a7d042e543d0 Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Thu, 20 Oct 2022 14:14:54 -0700
Subject: [PATCH] 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
---
 .../client/products/add-product-page.tsx      |  2 +-
 .../products/layout/product-form-layout.scss  |  4 +-
 .../layout/product-section-layout.scss        |  6 ++-
 .../manual-stock-section.tsx                  | 39 +++++++++++++++++++
 .../product-inventory-section.tsx             |  2 +
 plugins/woocommerce/changelog/add-34388       |  4 ++
 6 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/products/sections/product-inventory-section/manual-stock-section.tsx
 create mode 100644 plugins/woocommerce/changelog/add-34388

diff --git a/plugins/woocommerce-admin/client/products/add-product-page.tsx b/plugins/woocommerce-admin/client/products/add-product-page.tsx
index e594bbf2bfd..353de8e3165 100644
--- a/plugins/woocommerce-admin/client/products/add-product-page.tsx
+++ b/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 }
 			>
diff --git a/plugins/woocommerce-admin/client/products/layout/product-form-layout.scss b/plugins/woocommerce-admin/client/products/layout/product-form-layout.scss
index 2e49589b949..06772f0b89b 100644
--- a/plugins/woocommerce-admin/client/products/layout/product-form-layout.scss
+++ b/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 {
diff --git a/plugins/woocommerce-admin/client/products/layout/product-section-layout.scss b/plugins/woocommerce-admin/client/products/layout/product-section-layout.scss
index 82fa017706b..3558a817a3c 100644
--- a/plugins/woocommerce-admin/client/products/layout/product-section-layout.scss
+++ b/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 {
diff --git a/plugins/woocommerce-admin/client/products/sections/product-inventory-section/manual-stock-section.tsx b/plugins/woocommerce-admin/client/products/sections/product-inventory-section/manual-stock-section.tsx
new file mode 100644
index 00000000000..f815f8ef5c3
--- /dev/null
+++ b/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 }
+		/>
+	);
+};
diff --git a/plugins/woocommerce-admin/client/products/sections/product-inventory-section/product-inventory-section.tsx b/plugins/woocommerce-admin/client/products/sections/product-inventory-section/product-inventory-section.tsx
index 1ab01f095c2..f8950dcbc38 100644
--- a/plugins/woocommerce-admin/client/products/sections/product-inventory-section/product-inventory-section.tsx
+++ b/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>
diff --git a/plugins/woocommerce/changelog/add-34388 b/plugins/woocommerce/changelog/add-34388
new file mode 100644
index 00000000000..7330ad35258
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-34388
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add manual stock management section to product management experience