Privacy center customisations (#3432)

ethyca · Jun 7, 2023 · 741bbce · 741bbce
1 parent 5545384
commit 741bbce
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,8 @@ The types of changes are:
 - Added the ability to use custom CAs with Redis via TLS [#3451](https://github.com/ethyca/fides/pull/3451)
 - Add default experience configs on startup [#3449](https://github.com/ethyca/fides/pull/3449)
 - Load default privacy notices on startup [#3401](https://github.com/ethyca/fides/pull/3401/files)
+- Add privacy centre button text customisations [#3432](https://github.com/ethyca/fides/pull/3432)
+- Add privacy centre favicon customisation [#3432](https://github.com/ethyca/fides/pull/3432)
 
 ### Fixed
 
@@ -42,6 +44,7 @@ The types of changes are:
 - Bump SlowAPI Version [#3456](https://github.com/ethyca/fides/pull/3456)
 - Bump Psycopg2-binary Version [#3473](https://github.com/ethyca/fides/pull/3473)
 - Reduced duplication between PrivacyExperience and PrivacyExperienceConfig [#3470](https://github.com/ethyca/fides/pull/3470)
+- Update privacy centre email and phone validation to allow for both to be blank [#3432](https://github.com/ethyca/fides/pull/3432)
 
 ### Developer Experience
 

diff --git a/clients/privacy-center/components/Layout.tsx b/clients/privacy-center/components/Layout.tsx
@@ -15,7 +15,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       <Head>
         <title>Privacy Center</title>
         <meta name="description" content="Privacy Center" />
-        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href={config.favicon_path || "/favicon.ico"} />
         {styles ? <style>{styles}</style> : null}
       </Head>
       <header>

diff --git a/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx b/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx
@@ -127,26 +127,20 @@ const useConsentRequestForm = ({
     validationSchema: Yup.object().shape({
       email: emailValidation(identityInputs?.email).test(
         "one of email or phone entered",
-        "You must enter either email or phone",
+        "You must enter an email",
         (value, context) => {
-          if (
-            identityInputs?.email === "optional" &&
-            identityInputs?.phone === "optional"
-          ) {
-            return Boolean(context.parent.phone || context.parent.email);
+          if (identityInputs?.email === "required") {
+            return Boolean(context.parent.email);
           }
           return true;
         }
       ),
       phone: phoneValidation(identityInputs?.phone).test(
         "one of email or phone entered",
-        "You must enter either email or phone",
+        "You must enter a phone number",
         (value, context) => {
-          if (
-            identityInputs?.email === "optional" &&
-            identityInputs?.phone === "optional"
-          ) {
-            return Boolean(context.parent.phone || context.parent.email);
+          if (identityInputs?.phone === "required") {
+            return Boolean(context.parent.phone);
           }
           return true;
         }
@@ -208,7 +202,7 @@ const ConsentRequestForm: React.FC<ConsentRequestFormProps> = ({
   return (
     <>
       <ModalHeader pt={6} pb={0}>
-        {config.consent?.button.title}
+        {config.consent?.button.modalTitle || config.consent?.button.title}
       </ModalHeader>
       <chakra.form onSubmit={handleSubmit} data-testid="consent-request-form">
         <ModalBody>
@@ -280,7 +274,7 @@ const ConsentRequestForm: React.FC<ConsentRequestFormProps> = ({
 
         <ModalFooter pb={6}>
           <Button variant="outline" flex="1" mr={3} size="sm" onClick={onClose}>
-            Cancel
+            {config.consent?.button.cancelButtonText || "Cancel"}
           </Button>
           <Button
             type="submit"
@@ -293,7 +287,7 @@ const ConsentRequestForm: React.FC<ConsentRequestFormProps> = ({
             isDisabled={isSubmitting || !(isValid && dirtyCheck)}
             size="sm"
           >
-            Continue
+            {config.consent?.button.confirmButtonText || "Continue"}
           </Button>
         </ModalFooter>
       </chakra.form>

diff --git a/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestModal.tsx b/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestModal.tsx
@@ -31,6 +31,7 @@ export const useConsentRequestModal = () => {
     setIsOpen(false);
     setCurrentView(ModalViews.ConsentRequest);
     setConsentRequestId("");
+    router.push("/", undefined, { shallow: true });
   };
 
   return {

diff --git a/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx b/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx
@@ -308,7 +308,7 @@ const PrivacyRequestForm: React.FC<PrivacyRequestFormProps> = ({
 
         <ModalFooter pb={6}>
           <Button variant="outline" flex="1" mr={3} size="sm" onClick={onClose}>
-            Cancel
+            {action.cancelButtonText || "Cancel"}
           </Button>
           <Button
             type="submit"
@@ -321,7 +321,7 @@ const PrivacyRequestForm: React.FC<PrivacyRequestFormProps> = ({
             isDisabled={isSubmitting || !(isValid && dirty)}
             size="sm"
           >
-            Continue
+            {action.confirmButtonText || "Continue"}
           </Button>
         </ModalFooter>
       </chakra.form>

diff --git a/clients/privacy-center/config/config.json b/clients/privacy-center/config/config.json
@@ -4,6 +4,7 @@
   "description_subtext": [],
   "addendum": [],
   "logo_path": "/logo.svg",
+  "favicon_path": "/favicon.ico",
   "actions": [
     {
       "policy_key": "default_access_policy",
@@ -13,7 +14,9 @@
       "description_subtext": [],
       "identity_inputs": {
         "email": "required"
-      }
+      },
+      "confirmButtonText": "Continue",
+      "cancelButtonText": "Cancel"
     },
     {
       "policy_key": "default_erasure_policy",
@@ -23,7 +26,9 @@
       "description_subtext": [],
       "identity_inputs": {
         "email": "required"
-      }
+      },
+      "confirmButtonText": "Continue",
+      "cancelButtonText": "Cancel"
     }
   ],
   "includeConsent": true,
@@ -37,7 +42,10 @@
       "identity_inputs": {
         "email": "optional"
       },
-      "title": "Manage your consent"
+      "title": "Manage your consent",
+      "modalTitle": "Manage your consent",
+      "confirmButtonText": "Continue",
+      "cancelButtonText": "Cancel"
     },
     "page": {
       "consentOptions": [

diff --git a/clients/privacy-center/cypress/e2e/consent.cy.ts b/clients/privacy-center/cypress/e2e/consent.cy.ts
@@ -3,6 +3,55 @@ import { GpcStatus } from "~/features/consent/types";
 import { ConsentPreferencesWithVerificationCode } from "~/types/api";
 import { API_URL } from "../support/constants";
 
+describe("Consent modal deeplink", () => {
+  beforeEach(() => {
+    cy.visit("/?showConsentModal=true");
+    cy.loadConfigFixture("config/config_consent.json").as("config");
+    cy.intercept("POST", `${API_URL}/consent-request`, {
+      body: {
+        consent_request_id: "consent-request-id",
+      },
+    }).as("postConsentRequest");
+    cy.intercept(
+      "POST",
+      `${API_URL}/consent-request/consent-request-id/verify`,
+      { fixture: "consent/verify" }
+    ).as("postConsentRequestVerify");
+  });
+
+  it("opens the consent modal", () => {
+    // This test does the same as below, without clicking the card
+    cy.getByTestId("consent-request-form").should("be.visible");
+    cy.getByTestId("consent-request-form").within(() => {
+      cy.get("input#email").type("test@example.com");
+      cy.get("button").contains("Continue").click();
+    });
+    cy.wait("@postConsentRequest");
+
+    cy.getByTestId("verification-form").within(() => {
+      cy.get("input").type("112358");
+      cy.get("button").contains("Submit code").click();
+    });
+    cy.wait("@postConsentRequestVerify");
+
+    cy.location("pathname").should("eq", "/consent");
+    cy.getByTestId("consent");
+  });
+
+  it("closes the modal and purges the query param", () => {
+    cy.getByTestId("consent-request-form").should("be.visible");
+
+    cy.getByTestId("consent-request-form").within(() => {
+      cy.get("input#email").type("test@example.com");
+      cy.get("button").contains("Cancel").click();
+    });
+
+    // assert the modal is closed and query_param removed
+    cy.url().should("not.contain", "showConsentModal=true");
+    cy.getByTestId("consent-request-form").should("not.exist");
+  });
+});
+
 describe("Consent settings", () => {
   beforeEach(() => {
     cy.visit("/");

diff --git a/clients/privacy-center/pages/index.tsx b/clients/privacy-center/pages/index.tsx
@@ -1,6 +1,7 @@
 import { Flex, Heading, Text, Stack, useToast } from "@fidesui/react";
 import React, { useEffect, useState } from "react";
 import type { NextPage } from "next";
+import { useRouter } from "next/router";
 import { ConfigErrorToastOptions } from "~/common/toast-options";
 
 import {
@@ -17,6 +18,7 @@ import ConsentCard from "~/components/ConsentCard";
 import { useConfig } from "~/features/common/config.slice";
 
 const Home: NextPage = () => {
+  const router = useRouter();
   const config = useConfig();
   const [isVerificationRequired, setIsVerificationRequired] =
     useState<boolean>(false);
@@ -34,7 +36,7 @@ const Home: NextPage = () => {
   } = usePrivacyRequestModal();
 
   const {
-    isOpen: isConsentModalOpen,
+    isOpen: isConsentModalOpenConst,
     onOpen: onConsentModalOpen,
     onClose: onConsentModalClose,
     currentView: currentConsentModalView,
@@ -43,7 +45,7 @@ const Home: NextPage = () => {
     setConsentRequestId,
     successHandler: consentModalSuccessHandler,
   } = useConsentRequestModal();
-
+  let isConsentModalOpen = isConsentModalOpenConst;
   const getIdVerificationConfigQuery = useGetIdVerificationConfigQuery();
 
   useEffect(() => {
@@ -89,6 +91,11 @@ const Home: NextPage = () => {
         onOpen={onConsentModalOpen}
       />
     );
+    if (router.query?.showConsentModal === "true") {
+      // manually override whether to show the consent modal given
+      // the query param `showConsentModal`
+      isConsentModalOpen = true;
+    }
   }
 
   return (

diff --git a/clients/privacy-center/types/config.ts b/clients/privacy-center/types/config.ts
@@ -27,6 +27,7 @@ export type Config = {
   server_url_development?: string;
   server_url_production?: string;
   logo_path: string;
+  favicon_path?: string;
   actions: PrivacyRequestOption[];
   includeConsent?: boolean;
   consent?: ConsentConfig;
@@ -45,9 +46,12 @@ export type ConsentConfig = {
   button: {
     description: string;
     description_subtext?: string[];
+    confirmButtonText?: string;
+    cancelButtonText?: string;
     icon_path: string;
     identity_inputs?: IdentityInputs;
     title: string;
+    modalTitle?: string;
   };
   page: {
     consentOptions: ConfigConsentOption[];
@@ -64,6 +68,8 @@ export type PrivacyRequestOption = {
   title: string;
   description: string;
   description_subtext?: string[];
+  confirmButtonText?: string;
+  cancelButtonText?: string;
   identity_inputs?: IdentityInputs;
 };
 

diff --git a/src/fides/data/sample_project/privacy_center/config/config.json b/src/fides/data/sample_project/privacy_center/config/config.json
@@ -86,4 +86,4 @@
       "title": "Manage your consent"
     }
   }
-}
+}