feat(scheduled-publishing): add cancel schedule frontend (#1568)

## Problem

Implement cancel schedule flow for an already-scheduled page:
1. Add CancelScheduleModal to confirm cancellation of a scheduled page
2. Add CancelSchedulePublishIndicator, which includes the scheduled date & time and the 'Cancel schedule' button
3. Update disableBlocks to include the case when the page is scheduled, so users won't be able to make any edits to the page until the schedule is cancelled

**Breaking Changes**

<!-- Does this PR contain any backward incompatible changes? If so, what are they and should there be special considerations for release? -->

- [ ] Yes - this PR contains breaking changes
  - Details ...
- [x] No - this PR is backwards compatible

Feature flag ENABLE_SCHEDULED_PUBLISHING_FEATURE_KEY enabled for dev, but NOT enabled for other environments. This PR does not add any functionality visible for a non-scheduled page

## Video recordings

With feature flag enabled:

https://github.com/user-attachments/assets/10959018-41b7-4ad4-aa1e-1509ccb1507d

## Tests

Chromatic tests to be added in a follow-up PR

Author: gautammmanek

apps/studio/src/features/editing-experience/components/PublishButton.tsx

@@ -13,6 +13,7 @@ import { withSuspense } from "~/hocs/withSuspense"
 import { ENABLE_SCHEDULED_PUBLISHING_FEATURE_KEY } from "~/lib/growthbook"
 import { trpc } from "~/utils/trpc"
 import { ScheduledPublishingModal } from "./ScheduledPublishingModal"
+import { CancelSchedulePublishIndicator } from "./ScheduledPublishingModal/CancelSchedulePublishIndicator"
 
 interface PublishButtonProps extends ButtonProps {
   pageId: number
@@ -84,23 +85,31 @@ const SuspendablePublishButton = ({
                   isPublishingNow={isPending}
                 />
               )}
-              <Button
-                isDisabled={!isChangesPendingPublish || isDisabled}
-                variant="solid"
-                size="sm"
-                onClick={(e) => {
-                  if (enableScheduledPublishing) {
-                    scheduledPublishingDisclosure.onOpen()
-                  } else {
-                    mutate({ pageId, siteId })
-                    onClick?.(e)
-                  }
-                }}
-                isLoading={isPending}
-                {...rest}
-              >
-                Publish
-              </Button>
+              {currPage.scheduledAt ? (
+                <CancelSchedulePublishIndicator
+                  siteId={siteId}
+                  pageId={pageId}
+                  scheduledAt={currPage.scheduledAt}
+                />
+              ) : (
+                <Button
+                  isDisabled={!isChangesPendingPublish || isDisabled}
+                  variant="solid"
+                  size="sm"
+                  onClick={(e) => {
+                    if (enableScheduledPublishing) {
+                      scheduledPublishingDisclosure.onOpen()
+                    } else {
+                      mutate({ pageId, siteId })
+                      onClick?.(e)
+                    }
+                  }}
+                  isLoading={isPending}
+                  {...rest}
+                >
+                  Publish
+                </Button>
+              )}
             </>
           )}
         </TouchableTooltip>

apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx

@@ -69,12 +69,16 @@ export default function RootStateDrawer() {
     onClose: onConfirmConvertIndexPageModalClose,
   } = useDisclosure()
   const { pageId, siteId } = useQueryParse(pageSchema)
+  const [{ scheduledAt }] = trpc.page.readPage.useSuspenseQuery({
+    pageId,
+    siteId,
+  })
+  const disableBlocks = isPreviewingIndexPage || !!scheduledAt
   const utils = trpc.useUtils()
   const isUserIsomerAdmin = useIsUserIsomerAdmin({
     roles: [ADMIN_ROLE.CORE, ADMIN_ROLE.MIGRATORS],
   })
   const toast = useToast()
-
   const { mutate } = trpc.page.reorderBlock.useMutation({
     onSuccess: async () => {
       await utils.page.readPage.invalidate({ pageId, siteId })
@@ -269,7 +273,19 @@ export default function RootStateDrawer() {
               </VStack>
             </Infobox>
           )}
-
+          {!!scheduledAt && (
+            <Infobox
+              size="sm"
+              border="1px solid"
+              borderColor="utility.feedback.info"
+              borderRadius="0.25rem"
+            >
+              <Text textStyle="body-2">
+                This page is scheduled for publishing. To make changes, cancel
+                the schedule first.
+              </Text>
+            </Infobox>
+          )}
           {isPreviewingIndexPage && (
             <Infobox
               size="sm"
@@ -285,7 +301,7 @@ export default function RootStateDrawer() {
           )}
 
           {/* Fixed Blocks Section */}
-          <Disable when={isPreviewingIndexPage}>
+          <Disable when={disableBlocks}>
             <VStack gap="1.5rem" flex={1} w="full">
               <VStack gap="1rem" w="100%" align="start">
                 <VStack gap="0.25rem" align="start">

apps/studio/src/features/editing-experience/components/ScheduledPublishingModal/CancelScheduleModal.tsx

@@ -0,0 +1,83 @@
+import type { UseDisclosureReturn } from "@chakra-ui/react"
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from "@chakra-ui/react"
+import { useToast } from "@opengovsg/design-system-react"
+
+import { BRIEF_TOAST_SETTINGS } from "~/constants/toast"
+import { trpc } from "~/utils/trpc"
+
+interface CancelScheduleModalProps extends UseDisclosureReturn {
+  pageId: number
+  siteId: number
+}
+
+export const CancelScheduleModal = ({
+  pageId,
+  siteId,
+  onClose,
+  ...rest
+}: CancelScheduleModalProps): JSX.Element => {
+  const utils = trpc.useUtils()
+  const toast = useToast()
+  const { mutate, isPending } = trpc.page.cancelSchedulePage.useMutation({
+    onSettled: async () => {
+      await utils.page.readPage.refetch({ pageId, siteId })
+      onClose()
+    },
+    onSuccess: () => {
+      toast({
+        status: "success",
+        title: "Schedule cancelled successfully",
+        ...BRIEF_TOAST_SETTINGS,
+      })
+    },
+    onError: (error) => {
+      console.error(`Error occurred when cancelling schedule: ${error.message}`)
+      toast({
+        status: "error",
+        title: "Failed to cancel schedule. Please contact Isomer support.",
+        ...BRIEF_TOAST_SETTINGS,
+      })
+    },
+  })
+  return (
+    <Modal onClose={onClose} {...rest}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader mr="3.5rem">
+          Are you sure you want to cancel the schedule to publish?
+        </ModalHeader>
+        <ModalCloseButton size="lg" />
+        <ModalBody>
+          <Text textStyle="body-2">This page will go back to draft mode.</Text>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            mr={3}
+            onClick={onClose}
+            variant="clear"
+            color="base.content.strong"
+          >
+            No, leave it
+          </Button>
+          <Button
+            onClick={() => mutate({ pageId, siteId })}
+            isLoading={isPending}
+            colorScheme="critical"
+          >
+            Yes, cancel the schedule
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

apps/studio/src/features/editing-experience/components/ScheduledPublishingModal/CancelSchedulePublishIndicator.tsx

@@ -0,0 +1,47 @@
+import { Button, HStack, Icon, Text, useDisclosure } from "@chakra-ui/react"
+import { TouchableTooltip } from "@opengovsg/design-system-react"
+import { BiTimeFive } from "react-icons/bi"
+
+import { CancelScheduleModal } from "."
+import { formatScheduledAtDate } from "./utils"
+
+interface CancelSchedulePublishIndicatorProps {
+  pageId: number
+  siteId: number
+  scheduledAt: Date
+}
+
+export const CancelSchedulePublishIndicator = ({
+  pageId,
+  siteId,
+  scheduledAt,
+}: CancelSchedulePublishIndicatorProps) => {
+  const cancelScheduleDisclosure = useDisclosure()
+  return (
+    <>
+      {cancelScheduleDisclosure.isOpen && (
+        <CancelScheduleModal
+          {...cancelScheduleDisclosure}
+          siteId={siteId}
+          pageId={pageId}
+        />
+      )}
+      <HStack alignItems="center" spacing="1rem">
+        <TouchableTooltip label="This page is scheduled to publish. To make changes, cancel the schedule or wait until the page is published.">
+          <HStack spacing="0.25rem">
+            <Icon as={BiTimeFive} boxSize="1rem" />
+            <Text textStyle="caption-1">
+              {formatScheduledAtDate(scheduledAt)}
+            </Text>
+          </HStack>
+        </TouchableTooltip>
+        <Button
+          colorScheme="critical"
+          onClick={cancelScheduleDisclosure.onOpen}
+        >
+          Cancel schedule
+        </Button>
+      </HStack>
+    </>
+  )
+}

apps/studio/src/features/editing-experience/components/ScheduledPublishingModal/index.ts

@@ -1 +1,3 @@
 export * from "./ScheduledPublishingModal"
+export * from "./CancelScheduleModal"
+export * from "./utils"

apps/studio/src/features/editing-experience/components/ScheduledPublishingModal/utils.ts

@@ -1,4 +1,4 @@
-import { isSameDay } from "date-fns"
+import { format, isSameDay } from "date-fns"
 
 /**
  * if the date provided is equal to the earliestSchedule's date, the earliest allowable time should be set to the FIRST
@@ -19,3 +19,6 @@ export const getEarliestAllowableTime = (
   }
   return null
 }
+
+export const formatScheduledAtDate = (d: Date) =>
+  format(d, "hh:mma, dd/MM/yyyy")