#1008 User identity verification flow (#1231)

* Update lint commands and eslint ignore

* Run lints and refactor privacy cards

* Refactor modal

* Finish verification flow

* get config from server

* Update changelong

* Fix test failures

* Format file

* Mock out route

* Format file

* Add code resending

* Update test to use hostUrl

* Add headers util function and PrivacyRequestStatus status enum

CHANGELOG.md

@@ -49,6 +49,7 @@ The types of changes are:
 * Adds users and owners configuration for Hubspot connector [#1091](https://github.com/ethyca/fidesops/pull/1091)
 * Foundations for a new email connector type [#1142](https://github.com/ethyca/fidesops/pull/1142)
 * Adds endpoint for GET identity verification config [#1221](https://github.com/ethyca/fidesops/pull/1221)
+* Add user identification flow to privacy center [#1231](https://github.com/ethyca/fidesops/pull/1231)
 * Access support for Shopify [#1220](https://github.com/ethyca/fidesops/pull/1220)
 
 ## [1.7.1](https://github.com/ethyca/fidesops/compare/1.7.0...1.7.1)

clients/ops/privacy-center/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.eslintrc.json
+next.config.js
+jest.config.js

clients/ops/privacy-center/__tests__/RequestModal.test.tsx

@@ -11,23 +11,42 @@ import { act } from "react-dom/test-utils";
 import { rest } from "msw";
 import { setupServer } from "msw/node";
 
-import { RequestModal } from "../components/RequestModal";
+import {
+  RequestModal,
+  RequestModalProps,
+} from "../components/modals/RequestModal";
 import IndexPage from "../pages/index";
 
 import mockConfig from "../config/__mocks__/config.json";
+import { hostUrl } from "../constants";
+import { ModalViews } from "../components/modals/types";
 
 jest.mock("../config/config.json");
 
-const server = setupServer();
+const server = setupServer(
+  rest.get(`${hostUrl}/id-verification/config`, (req, res, ctx) =>
+    res(
+      ctx.json({
+        identity_verification_required: false,
+        valid_email_config_exists: false,
+      })
+    )
+  )
+);
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
-const defaultModalProperties = {
+const defaultModalProperties: RequestModalProps = {
   isOpen: true,
   onClose: () => {},
   openAction: mockConfig.actions[0].policy_key,
   setAlert: () => {},
+  currentView: ModalViews.PrivacyRequest,
+  setCurrentView: () => {},
+  privacyRequestId: "",
+  setPrivacyRequestId: () => {},
+  isVerificationRequired: false,
 };
 
 describe("RequestModal", () => {

clients/ops/privacy-center/common/CommonHeaders.ts

@@ -0,0 +1,17 @@
+/* eslint-disable import/prefer-default-export */
+
+/**
+ * Adds common headers to all api calls to fidesops
+ */
+export function addCommonHeaders(headers: Headers, token: string | null) {
+  headers.set("Access-Control-Allow-Origin", "*");
+  headers.set("X-Fides-Source", "fidesops-privacy-center");
+  headers.set("Accept", "application/json");
+  headers.set("Content-Type", "application/json");
+  if (token) {
+    headers.set("authorization", `Bearer ${token}`);
+  }
+  return headers;
+}
+
+

clients/ops/privacy-center/components/PrivacyCard.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Heading, Text, Stack, Box, Image, HStack } from "@fidesui/react";
+
+type PrivacyCardProps = {
+  title: string;
+  policyKey: string;
+  iconPath: string;
+  description: string;
+  onOpen: (policyKey: string) => void;
+};
+
+const PrivacyCard: React.FC<PrivacyCardProps> = ({
+  title,
+  policyKey,
+  iconPath,
+  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",
+    }}
+    _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;