feat(rr): misc modals

package.json

@@ -127,7 +127,6 @@
     "@types/invariant": "^2.2.35",
     "@types/react-color": "^3.0.6",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-select": "^5.0.1",
     "@types/turndown": "^5.0.1",
     "auto-changelog": "^2.4.0",
     "btoa": "^1.2.1",

src/assets/images/index.ts

@@ -5,3 +5,5 @@ export * from "./IsomerLogo"
 export * from "./EmptyBlueBoxImage"
 export * from "./EmptyWhiteBoxImage"
 export * from "./SiteDashboardHumanImage"
+export * from "./ToastImage"
+export * from "./RocketBlastOffImage"

src/layouts/ReviewRequest/components/ApprovedModal/ApprovedModal.stories.tsx

@@ -0,0 +1,24 @@
+import { useDisclosure } from "@chakra-ui/react"
+import { Button } from "@opengovsg/design-system-react"
+import { ComponentMeta, Story } from "@storybook/react"
+
+import { ApprovedModal } from "./ApprovedModal"
+
+const modalMeta = {
+  title: "Components/ReviewRequest/Request Approved Modal",
+  component: ApprovedModal,
+} as ComponentMeta<typeof ApprovedModal>
+
+const Template: Story<never> = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure({ defaultIsOpen: true })
+  return (
+    <>
+      <Button onClick={onOpen}>Open Modal</Button>
+      <ApprovedModal isOpen={isOpen} onClose={onClose} />
+    </>
+  )
+}
+
+export const Playground = Template.bind({})
+
+export default modalMeta

src/layouts/ReviewRequest/components/ApprovedModal/ApprovedModal.tsx

@@ -0,0 +1,63 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalProps,
+  Text,
+  Box,
+  VStack,
+} from "@chakra-ui/react"
+import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
+
+import { ToastImage } from "assets"
+
+export const ApprovedModal = (
+  props: Omit<ModalProps, "children">
+): JSX.Element => {
+  const { onClose } = props
+  return (
+    <Modal {...props}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader bg="primary.100" p={0}>
+          <Box pt="4.5rem">
+            <ToastImage />
+          </Box>
+        </ModalHeader>
+        <ModalCloseButton />
+
+        <ModalBody>
+          <VStack
+            spacing="0.625rem"
+            align="flex-start"
+            px="1rem"
+            pt="2.5rem"
+            pb="0.5rem"
+          >
+            <Text textStyle="h4">This Review request has been approved!</Text>
+            <Text textStyle="body-1" textColor="text.body">
+              Your changes are ready for your live site. You can publish them
+              right away, or at a later time from your site’s dashboard.
+            </Text>
+          </VStack>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            variant="clear"
+            mr="1rem"
+            onClick={onClose}
+            colorScheme="secondary"
+            textColor="text.title.brandSecondary"
+          >
+            Publish later
+          </Button>
+          <Button>Publish now</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

src/layouts/ReviewRequest/components/ApprovedModal/index.ts

@@ -0,0 +1 @@
+export * from "./ApprovedModal"

src/layouts/ReviewRequest/components/CancelRequestModal/CancelRequestModal.stories.tsx

@@ -0,0 +1,24 @@
+import { useDisclosure } from "@chakra-ui/react"
+import { Button } from "@opengovsg/design-system-react"
+import { ComponentMeta, Story } from "@storybook/react"
+
+import { CancelRequestModal } from "./CancelRequestModal"
+
+const modalMeta = {
+  title: "Components/ReviewRequest/Cancel Request Modal",
+  component: CancelRequestModal,
+} as ComponentMeta<typeof CancelRequestModal>
+
+const Template: Story<never> = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure({ defaultIsOpen: true })
+  return (
+    <>
+      <Button onClick={onOpen}>Open Modal</Button>
+      <CancelRequestModal isOpen={isOpen} onClose={onClose} />
+    </>
+  )
+}
+
+export const Playground = Template.bind({})
+
+export default modalMeta

src/layouts/ReviewRequest/components/CancelRequestModal/CancelRequestModal.tsx

@@ -0,0 +1,50 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalProps,
+  Text,
+} from "@chakra-ui/react"
+import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
+
+export const CancelRequestModal = (
+  props: Omit<ModalProps, "children">
+): JSX.Element => {
+  const { onClose } = props
+
+  return (
+    <Modal {...props}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <Text textStyle="h4" color="text.title.alt">
+            Cancel request?
+          </Text>
+        </ModalHeader>
+        <ModalCloseButton />
+
+        <ModalBody>
+          <Text textStyle="body-2">
+            The request to review will be cancelled but changes made will
+            remain.
+          </Text>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            textColor="text.body"
+            variant="clear"
+            mr="1rem"
+            onClick={onClose}
+          >
+            Go back
+          </Button>
+          <Button colorScheme="danger">Yes, cancel</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

src/layouts/ReviewRequest/components/CancelRequestModal/index.ts

@@ -0,0 +1 @@
+export * from "./CancelRequestModal"

src/layouts/ReviewRequest/components/EditingBlockedModal/EditingBlockedModal.stories.tsx

@@ -0,0 +1,24 @@
+import { useDisclosure } from "@chakra-ui/react"
+import { Button } from "@opengovsg/design-system-react"
+import { ComponentMeta, Story } from "@storybook/react"
+
+import { EditingBlockedModal } from "./EditingBlockedModal"
+
+const modalMeta = {
+  title: "Components/ReviewRequest/Editing Blocked Modal",
+  component: EditingBlockedModal,
+} as ComponentMeta<typeof EditingBlockedModal>
+
+const Template: Story<never> = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure({ defaultIsOpen: true })
+  return (
+    <>
+      <Button onClick={onOpen}>Open Modal</Button>
+      <EditingBlockedModal isOpen={isOpen} onClose={onClose} />
+    </>
+  )
+}
+
+export const Playground = Template.bind({})
+
+export default modalMeta

src/layouts/ReviewRequest/components/EditingBlockedModal/EditingBlockedModal.tsx

@@ -0,0 +1,52 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalProps,
+  Text,
+} from "@chakra-ui/react"
+import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
+
+export const EditingBlockedModal = (
+  props: Omit<ModalProps, "children">
+): JSX.Element => {
+  const { onClose } = props
+
+  return (
+    <Modal {...props}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <Text textStyle="h4" textColor="text.title.alt">
+            Changes can’t be made to approved requests
+          </Text>
+        </ModalHeader>
+        <ModalCloseButton />
+
+        <ModalBody>
+          <Text textStyle="body-1">
+            If you want to add changes to the approved request, ask a reviewer
+            to undo approval. To make other changes, publish the approved
+            changes first.
+          </Text>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            variant="clear"
+            mr="1rem"
+            onClick={onClose}
+            colorScheme="secondary"
+            textColor="text.title.brandSecondary"
+          >
+            Back to Site Dashboard
+          </Button>
+          <Button>Go to Review request</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

src/layouts/ReviewRequest/components/EditingBlockedModal/index.ts

@@ -0,0 +1 @@
+export * from "./EditingBlockedModal"

src/layouts/ReviewRequest/components/ManageReviewerModal/ManageReviewerModal.stories.tsx

@@ -0,0 +1,43 @@
+import { useDisclosure } from "@chakra-ui/react"
+import { Button } from "@opengovsg/design-system-react"
+import { ComponentMeta, Story } from "@storybook/react"
+
+import { MOCK_ADMINS } from "mocks/constants"
+
+import {
+  ManageReviewerModal,
+  ManageReviewerModalProps,
+} from "./ManageReviewerModal"
+
+const modalMeta = {
+  title: "Components/ReviewRequest/Manage Reviewer Modal",
+  component: ManageReviewerModal,
+} as ComponentMeta<typeof ManageReviewerModal>
+
+type TemplateProps = Pick<ManageReviewerModalProps, "selectedAdmins" | "admins">
+
+const Template: Story<TemplateProps> = ({
+  selectedAdmins,
+  admins,
+}: TemplateProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure({ defaultIsOpen: true })
+  return (
+    <>
+      <Button onClick={onOpen}>Open Modal</Button>
+      <ManageReviewerModal
+        selectedAdmins={selectedAdmins}
+        admins={admins}
+        isOpen={isOpen}
+        onClose={onClose}
+      />
+    </>
+  )
+}
+
+export const Playground = Template.bind({})
+Playground.args = {
+  admins: MOCK_ADMINS,
+  selectedAdmins: [MOCK_ADMINS[0]],
+}
+
+export default modalMeta