Replace the Draft tag with a Scheduled tag in the product header (#45685)

* Show Scheduled product header tag when the product is been scheduled

* Fix the pre publish modal header message when to say scheduled when the product has a date in the future

* Add changelog file

packages/js/product-editor/changelog/fix-45667

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Replace the Draft tag with a Scheduled tag in the product header

packages/js/product-editor/src/components/header/header.tsx

@@ -125,7 +125,7 @@ export function Header( {
 
 	function getVisibilityTags() {
 		const tags = [];
-		if ( productStatus === 'draft' || productStatus === 'future' ) {
+		if ( productStatus === 'draft' ) {
 			tags.push(
 				<Tag
 					key={ 'draft-tag' }
@@ -133,6 +133,14 @@ export function Header( {
 				/>
 			);
 		}
+		if ( productStatus === 'future' ) {
+			tags.push(
+				<Tag
+					key={ 'scheduled-tag' }
+					label={ __( 'Scheduled', 'woocommerce' ) }
+				/>
+			);
+		}
 		if (
 			( productStatus !== 'future' && catalogVisibility !== 'visible' ) ||
 			( isVariation && productStatus === 'private' )

packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx

@@ -4,6 +4,7 @@
 import { MouseEvent } from 'react';
 import { Button } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
+import { isInTheFuture } from '@wordpress/date';
 import { __ } from '@wordpress/i18n';
 import type { Product } from '@woocommerce/data';
 
@@ -28,12 +29,18 @@ export function usePublish< T = Product >( {
 	const { isValidating, isDirty, isPublishing, publish } =
 		useProductManager( productType );
 
-	const [ status, , prevStatus ] = useEntityProp< Product[ 'status' ] >(
+	const [ , , prevStatus ] = useEntityProp< Product[ 'status' ] >(
 		'postType',
 		productType,
 		'status'
 	);
 
+	const [ editedDate ] = useEntityProp< string >(
+		'postType',
+		productType,
+		'date_created_gmt'
+	);
+
 	const isBusy = isPublishing || isValidating;
 	const isDisabled = disabled || isBusy || ! isDirty;
 
@@ -53,7 +60,7 @@ export function usePublish< T = Product >( {
 	function getButtonText() {
 		if (
 			window.wcAdminFeatures[ 'product-pre-publish-modal' ] &&
-			status === 'future'
+			isInTheFuture( editedDate )
 		) {
 			return __( 'Schedule', 'woocommerce' );
 		}

packages/js/product-editor/src/components/prepublish-panel/prepublish-panel.tsx

@@ -10,6 +10,7 @@ import { useEntityProp } from '@wordpress/core-data';
 import { closeSmall } from '@wordpress/icons';
 import classnames from 'classnames';
 import type { Product } from '@woocommerce/data';
+import { isInTheFuture } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -30,10 +31,10 @@ export function PrepublishPanel( {
 		'woocommerce'
 	),
 }: PrepublishPanelProps ) {
-	const [ editedDate, , date ] = useEntityProp< string >(
+	const [ editedDate ] = useEntityProp< string >(
 		'postType',
 		productType,
-		'date_created'
+		'date_created_gmt'
 	);
 
 	const [ productStatus, , prevStatus ] = useEntityProp<
@@ -47,7 +48,7 @@ export function PrepublishPanel( {
 			? productStatus === 'publish'
 			: true;
 
-	if ( editedDate !== date ) {
+	if ( isInTheFuture( editedDate ) ) {
 		title = __( 'Are you ready to schedule this product?', 'woocommerce' );
 		description = __(
 			'Your product will be published at the specified date and time.',