From 6ce72a25baa91abc015e7830d0a9ff8f6548ef72 Mon Sep 17 00:00:00 2001
From: Mahesh Bohara <maheshbohara0101@gmail.com>
Date: Wed, 20 Mar 2024 00:30:27 +0545
Subject: [PATCH] Add loading state functionality to Schedule button in the
 calendar (#45645)

* Add loading state functionality to Schedule button in the calendar

* Add changelog

* Updated changelog file
---
 .../changelog/feature-add-loading-state-to-schedule-button    | 4 ++++
 .../publish-button-menu/publish-button-menu.tsx               | 3 ++-
 .../schedule-publish-modal/schedule-publish-modal.tsx         | 3 +++
 .../src/components/schedule-publish-modal/types.ts            | 1 +
 4 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 packages/js/product-editor/changelog/feature-add-loading-state-to-schedule-button

diff --git a/packages/js/product-editor/changelog/feature-add-loading-state-to-schedule-button b/packages/js/product-editor/changelog/feature-add-loading-state-to-schedule-button
new file mode 100644
index 00000000000..9641c721bf3
--- /dev/null
+++ b/packages/js/product-editor/changelog/feature-add-loading-state-to-schedule-button
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Product Editor: Add loading state functionality to Schedule Product modal
diff --git a/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/publish-button-menu.tsx b/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/publish-button-menu.tsx
index 4a08bb1ab25..12c5fba4bc9 100644
--- a/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/publish-button-menu.tsx
+++ b/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/publish-button-menu.tsx
@@ -26,7 +26,7 @@ export function PublishButtonMenu( {
 	postType,
 	...props
 }: PublishButtonMenuProps ) {
-	const { isScheduled, schedule, date, formattedDate } =
+	const { isScheduling, isScheduled, schedule, date, formattedDate } =
 		useProductScheduled( postType );
 	const [ showScheduleModal, setShowScheduleModal ] = useState<
 		'schedule' | 'edit' | undefined
@@ -62,6 +62,7 @@ export function PublishButtonMenu( {
 				<SchedulePublishModal
 					postType={ postType }
 					value={ showScheduleModal === 'edit' ? date : undefined }
+					isScheduling={ isScheduling }
 					onCancel={ () => setShowScheduleModal( undefined ) }
 					onSchedule={ scheduleProduct }
 				/>
diff --git a/packages/js/product-editor/src/components/schedule-publish-modal/schedule-publish-modal.tsx b/packages/js/product-editor/src/components/schedule-publish-modal/schedule-publish-modal.tsx
index d0f8d9f2b48..ed5d7af5c1d 100644
--- a/packages/js/product-editor/src/components/schedule-publish-modal/schedule-publish-modal.tsx
+++ b/packages/js/product-editor/src/components/schedule-publish-modal/schedule-publish-modal.tsx
@@ -26,6 +26,7 @@ export function SchedulePublishModal( {
 	className,
 	onCancel,
 	onSchedule,
+	isScheduling,
 	...props
 }: SchedulePublishModalProps ) {
 	const [ date, setDate ] = useState< string | undefined >(
@@ -77,6 +78,8 @@ export function SchedulePublishModal( {
 				</Button>
 				<Button
 					variant="primary"
+					isBusy={ isScheduling }
+					disabled={ isScheduling }
 					onClick={ () => onSchedule?.( date ) }
 				>
 					{ __( 'Schedule', 'woocommerce' ) }
diff --git a/packages/js/product-editor/src/components/schedule-publish-modal/types.ts b/packages/js/product-editor/src/components/schedule-publish-modal/types.ts
index 814405abe27..1bf93ca972e 100644
--- a/packages/js/product-editor/src/components/schedule-publish-modal/types.ts
+++ b/packages/js/product-editor/src/components/schedule-publish-modal/types.ts
@@ -13,4 +13,5 @@ export type SchedulePublishModalProps = Omit<
 	value?: string;
 	onCancel?(): void;
 	onSchedule?( value?: string ): void;
+	isScheduling?: boolean;
 };