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 (
> - 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 ( + + ); +}; 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 && } ) } + { ! values.manage_stock && } 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