ethyca · eastandwestwind · Sep 21, 2022 · Sep 16, 2022 · Sep 19, 2022 · Sep 21, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,9 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fidesops/compare/1.7.2...main)
 
+### Changed
+* Refactor privacy center to be more modular [#1363](https://github.com/ethyca/fidesops/pull/1363)
+
 ### Fixed
 * Distinguish whether webhook has been visited and no fields were found, versus never visited [#1339](https://github.com/ethyca/fidesops/pull/1339)
 * Fix Redis Cache Early Expiration in Tests [#1358](https://github.com/ethyca/fidesops/pull/1358)

diff --git a/clients/ops/privacy-center/__tests__/RequestModal.test.tsx b/clients/ops/privacy-center/__tests__/RequestModal.test.tsx
@@ -12,9 +12,9 @@ import { rest } from "msw";
 import { setupServer } from "msw/node";
 
 import {
-  RequestModal,
+  PrivacyRequestModal,
   RequestModalProps,
-} from "../components/modals/RequestModal";
+} from "../components/modals/privacy-request-modal/PrivacyRequestModal";
 import IndexPage from "../pages/index";
 
 import mockConfig from "../config/__mocks__/config.json";
@@ -51,14 +51,16 @@ const defaultModalProperties: RequestModalProps = {
 
 describe("RequestModal", () => {
   it("renders a modal when isOpen is true", () => {
-    render(<RequestModal {...defaultModalProperties} />);
+    render(<PrivacyRequestModal {...defaultModalProperties} />);
 
     const modal = screen.getByRole("dialog");
     expect(modal).toBeInTheDocument();
   });
 
   it("renders the appropriate inputs", () => {
-    let { unmount } = render(<RequestModal {...defaultModalProperties} />);
+    let { unmount } = render(
+      <PrivacyRequestModal {...defaultModalProperties} />
+    );
 
     expect(screen.getByPlaceholderText("Name*")).toBeInTheDocument();
     expect(screen.getByPlaceholderText("Email*")).toBeInTheDocument();
@@ -67,7 +69,7 @@ describe("RequestModal", () => {
     unmount();
 
     ({ unmount } = render(
-      <RequestModal
+      <PrivacyRequestModal
         {...defaultModalProperties}
         openAction={mockConfig.actions[1].policy_key}
       />
@@ -80,7 +82,7 @@ describe("RequestModal", () => {
     unmount();
 
     ({ unmount } = render(
-      <RequestModal
+      <PrivacyRequestModal
         {...defaultModalProperties}
         openAction={mockConfig.actions[2].policy_key}
       />
@@ -94,13 +96,13 @@ describe("RequestModal", () => {
   });
 
   it("renders the button as disabled before inputs are filled", () => {
-    render(<RequestModal {...defaultModalProperties} />);
+    render(<PrivacyRequestModal {...defaultModalProperties} />);
     const submitButton = screen.getByText("Continue");
     expect(submitButton).toBeDisabled();
   });
 
   it("renders the button as enabled after inputs are filled correctly", async () => {
-    render(<RequestModal {...defaultModalProperties} />);
+    render(<PrivacyRequestModal {...defaultModalProperties} />);
     act(() => {
       fireEvent.change(screen.getByPlaceholderText("Name*"), {
         target: { value: "Ethyca" },

diff --git a/clients/ops/privacy-center/components/Card.tsx b/clients/ops/privacy-center/components/Card.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { Heading, Text, Stack, Box, Image, HStack } from "@fidesui/react";
+
+type CardProps = {
+  title: string;
+  iconPath: string;
+  description: string;
+  onClick: () => void;
+};
+
+const Card: React.FC<CardProps> = ({
+  title,
+  iconPath,
+  description,
+  onClick,
+}) => (
+  <Box
+    as="button"
+    key={title}
+    bg="white"
+    py={8}
+    px={6}
+    borderRadius={4}
+    boxShadow="base"
+    maxWidth={["100%", "100%", "100%", 304]}
+    transition="box-shadow 50ms"
+    cursor="pointer"
+    userSelect="none"
+    m={2}
+    _hover={{
+      boxShadow: "complimentary-2xl",
+    }}
+    _focus={{
+      outline: "none",
+      boxShadow: "complimentary-2xl",
+    }}
+    onClick={() => {
+      onClick();
+    }}
+  >
+    <Stack spacing={7}>
+      <HStack justifyContent="center">
+        <Image src={iconPath} alt={description} width="54px" height="54px" />
+      </HStack>
+
+      <Stack spacing={1} textAlign="center">
+        <Heading
+          fontSize="large"
+          fontWeight="semibold"
+          lineHeight="28px"
+          color="gray.600"
+        >
+          {title}
+        </Heading>
+        <Text fontSize="xs" color="gray.600">
+          {description}
+        </Text>
+      </Stack>
+    </Stack>
+  </Box>
+);
+
+export default Card;
diff --git a/clients/ops/privacy-center/components/PrivacyCard.tsx b/clients/ops/privacy-center/components/PrivacyCard.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Heading, Text, Stack, Box, Image, HStack } from "@fidesui/react";
+import Card from "./Card";
 
 type PrivacyCardProps = {
   title: string;
@@ -16,48 +16,14 @@ const PrivacyCard: React.FC<PrivacyCardProps> = ({
   description,
   onOpen,
 }) => (
-  <Box
-    as="button"
-    key={title}
-    bg="white"
-    py={8}
-    px={6}
-    borderRadius={4}
-    boxShadow="base"
-    maxWidth={["100%", "100%", "100%", 304]}
-    transition="box-shadow 50ms"
-    cursor="pointer"
-    userSelect="none"
-    m={2}
-    _hover={{
-      boxShadow: "complimentary-2xl",
+  <Card
+    title={title}
+    iconPath={iconPath}
+    description={description}
+    onClick={() => {
+      onOpen(policyKey);
     }}
-    _focus={{
-      outline: "none",
-      boxShadow: "complimentary-2xl",
-    }}
-    onClick={() => onOpen(policyKey)}
-  >
-    <Stack spacing={7}>
-      <HStack justifyContent="center">
-        <Image src={iconPath} alt={description} width="54px" height="54px" />
-      </HStack>
-
-      <Stack spacing={1} textAlign="center">
-        <Heading
-          fontSize="large"
-          fontWeight="semibold"
-          lineHeight="28px"
-          color="gray.600"
-        >
-          {title}
-        </Heading>
-        <Text fontSize="xs" color="gray.600">
-          {description}
-        </Text>
-      </Stack>
-    </Stack>
-  </Box>
+  />
 );
 
 export default PrivacyCard;
diff --git a/clients/ops/privacy-center/components/modals/RequestModal.tsx b/clients/ops/privacy-center/components/modals/RequestModal.tsx
@@ -1,115 +1,22 @@
-import React, { useState } from "react";
+import React from "react";
 import { Modal, ModalContent, ModalOverlay } from "@fidesui/react";
 
-import type { AlertState } from "../../types/AlertState";
-
-import config from "../../config/config.json";
-
-import { ModalViews } from "./types";
-import PrivacyRequestForm from "./PrivacyRequestForm";
-import VerificationForm from "./VerificationForm";
-import RequestSubmitted from "./RequestSubmitted";
-
-export const useRequestModal = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [openAction, setOpenAction] = useState<string | null>(null);
-  const [currentView, setCurrentView] = useState<ModalViews>(
-    ModalViews.PrivacyRequest
-  );
-  const [privacyRequestId, setPrivacyRequestId] = useState<string>("");
-
-  const onOpen = (action: string) => {
-    setOpenAction(action);
-    setIsOpen(true);
-  };
-
-  const onClose = () => {
-    setIsOpen(false);
-    setOpenAction(null);
-    setCurrentView(ModalViews.PrivacyRequest);
-    setPrivacyRequestId("");
-  };
-
-  return {
-    isOpen,
-    onClose,
-    onOpen,
-    openAction,
-    currentView,
-    setCurrentView,
-    privacyRequestId,
-    setPrivacyRequestId,
-  };
-};
-
-export type RequestModalProps = {
+type RequestModalProps = {
   isOpen: boolean;
   onClose: () => void;
-  openAction: string | null;
-  setAlert: (state: AlertState) => void;
-  currentView: ModalViews;
-  setCurrentView: (view: ModalViews) => void;
-  privacyRequestId: string;
-  setPrivacyRequestId: (id: string) => void;
-  isVerificationRequired: boolean;
 };
 
-export const RequestModal: React.FC<RequestModalProps> = ({
+const RequestModal: React.FC<RequestModalProps> = ({
   isOpen,
   onClose,
-  openAction,
-  setAlert,
-  currentView,
-  setCurrentView,
-  privacyRequestId,
-  setPrivacyRequestId,
-  isVerificationRequired,
-}) => {
-  const action = openAction
-    ? config.actions.filter(({ policy_key }) => policy_key === openAction)[0]
-    : null;
-
-  if (!action) return null;
-
-  let form = null;
-
-  if (currentView === ModalViews.PrivacyRequest) {
-    form = (
-      <PrivacyRequestForm
-        isOpen={isOpen}
-        onClose={onClose}
-        openAction={openAction}
-        setAlert={setAlert}
-        setCurrentView={setCurrentView}
-        setPrivacyRequestId={setPrivacyRequestId}
-        isVerificationRequired={isVerificationRequired}
-      />
-    );
-  }
-
-  if (currentView === ModalViews.IdentityVerification) {
-    form = (
-      <VerificationForm
-        isOpen={isOpen}
-        onClose={onClose}
-        openAction={openAction}
-        setAlert={setAlert}
-        privacyRequestId={privacyRequestId}
-        setCurrentView={setCurrentView}
-      />
-    );
-  }
-
-  if (currentView === ModalViews.RequestSubmitted) {
-    form = <RequestSubmitted onClose={onClose} action={action} />;
-  }
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent top={[0, "205px"]} maxWidth="464px" mx={5} my={3}>
-        {form}
-      </ModalContent>
-    </Modal>
-  );
-};
+  children,
+}) => (
+  <Modal isOpen={isOpen} onClose={onClose}>
+    <ModalOverlay />
+    <ModalContent top={[0, "205px"]} maxWidth="464px" mx={5} my={3}>
+      {children}
+    </ModalContent>
+  </Modal>
+);
+
+export default RequestModal;