feature: Privacy Center - configure email xor phone to match fulfillm…

…ent functionality (#2539) Co-authored-by: eastandwestwind <[email protected]> Co-authored-by: Neville Samuell <[email protected]>
ethyca · Apr 11, 2023 · 73559d6 · 73559d6
1 parent 370414d
commit 73559d6
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 176 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -35,6 +35,8 @@ The types of changes are:
 
 - Set `privacyDeclarationDeprecatedFields` flags to false and set `userCannotModify` to true [2987](https://github.com/ethyca/fides/pull/2987)
 - Restored `nav-config` back to the admin-ui [#2990](https://github.com/ethyca/fides/pull/2990)
+- Modify privacy center default config to only request email identities, and add validation preventing requesting both email & phone identities [#2539](https://github.com/ethyca/fides/pull/2539)
+
 
 ### Removed
 

diff --git a/clients/cypress-e2e/cypress/e2e/smoke_test.cy.ts b/clients/cypress-e2e/cypress/e2e/smoke_test.cy.ts
@@ -16,10 +16,7 @@ describe("Smoke test", () => {
     cy.visit(PRIVACY_CENTER_URL);
     cy.getByTestId("card").contains("Access your data").click();
     cy.getByTestId("privacy-request-form").within(() => {
-      cy.get("input#name").type("Jenny");
       cy.get("input#email").type("[email protected]");
-
-      cy.get("input#phone").type("555 867 5309");
       cy.get("button").contains("Continue").click();
     });
 

diff --git a/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx b/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx
@@ -108,8 +108,32 @@ const useConsentRequestForm = ({
       }
     },
     validationSchema: Yup.object().shape({
-      email: emailValidation(identityInputs?.email),
-      phone: phoneValidation(identityInputs?.phone),
+      email: emailValidation(identityInputs?.email).test(
+        "one of email or phone entered",
+        "You must enter either email or phone",
+        (value, context) => {
+          if (
+            identityInputs?.email === "optional" &&
+            identityInputs?.phone === "optional"
+          ) {
+            return Boolean(context.parent.phone || context.parent.email);
+          }
+          return true;
+        }
+      ),
+      phone: phoneValidation(identityInputs?.phone).test(
+        "one of email or phone entered",
+        "You must enter either email or phone",
+        (value, context) => {
+          if (
+            identityInputs?.email === "optional" &&
+            identityInputs?.phone === "optional"
+          ) {
+            return Boolean(context.parent.phone || context.parent.email);
+          }
+          return true;
+        }
+      ),
     }),
   });
 
@@ -186,6 +210,9 @@ const ConsentRequestForm: React.FC<ConsentRequestFormProps> = ({
                   onBlur={handleBlur}
                   value={values.email}
                   isInvalid={touched.email && Boolean(errors.email)}
+                  isDisabled={Boolean(
+                    typeof values.phone !== "undefined" && values.phone
+                  )}
                 />
                 <FormErrorMessage>{errors.email}</FormErrorMessage>
               </FormControl>
@@ -195,6 +222,9 @@ const ConsentRequestForm: React.FC<ConsentRequestFormProps> = ({
                 id="phone"
                 isInvalid={touched.phone && Boolean(errors.phone)}
                 isRequired={identityInputs.phone === "required"}
+                isDisabled={Boolean(
+                  typeof values.email !== "undefined" && values.email
+                )}
               >
                 <FormLabel>Phone</FormLabel>
                 <PhoneInput

diff --git a/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx b/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx
@@ -135,8 +135,32 @@ const usePrivacyRequestForm = ({
     },
     validationSchema: Yup.object().shape({
       name: nameValidation(identityInputs?.name),
-      email: emailValidation(identityInputs?.email),
-      phone: phoneValidation(identityInputs?.phone),
+      email: emailValidation(identityInputs?.email).test(
+        "one of email or phone entered",
+        "You must enter either email or phone",
+        (value, context) => {
+          if (
+            identityInputs?.email === "optional" &&
+            identityInputs?.phone === "optional"
+          ) {
+            return Boolean(context.parent.phone || context.parent.email);
+          }
+          return true;
+        }
+      ),
+      phone: phoneValidation(identityInputs?.phone).test(
+        "one of email or phone entered",
+        "You must enter either email or phone",
+        (value, context) => {
+          if (
+            identityInputs?.email === "optional" &&
+            identityInputs?.phone === "optional"
+          ) {
+            return Boolean(context.parent.phone || context.parent.email);
+          }
+          return true;
+        }
+      ),
     }),
   });
 
@@ -237,6 +261,9 @@ const PrivacyRequestForm: React.FC<PrivacyRequestFormProps> = ({
                   onChange={handleChange}
                   onBlur={handleBlur}
                   value={values.email}
+                  isDisabled={Boolean(
+                    typeof values.phone !== "undefined" && values.phone
+                  )}
                 />
                 <FormErrorMessage>{errors.email}</FormErrorMessage>
               </FormControl>
@@ -256,6 +283,9 @@ const PrivacyRequestForm: React.FC<PrivacyRequestFormProps> = ({
                   }}
                   onBlur={handleBlur}
                   value={values.phone}
+                  isDisabled={Boolean(
+                    typeof values.email !== "undefined" && values.email
+                  )}
                 />
                 <FormErrorMessage>{errors.phone}</FormErrorMessage>
               </FormControl>

diff --git a/clients/privacy-center/config/config.json b/clients/privacy-center/config/config.json
@@ -13,9 +13,7 @@
       "title": "Access your data",
       "description": "We will provide you a report of all your personal data.",
       "identity_inputs": {
-        "name": "optional",
-        "email": "required",
-        "phone": "optional"
+        "email": "required"
       }
     },
     {
@@ -24,9 +22,7 @@
       "title": "Erase your data",
       "description": "We will erase all of your personal data. This action cannot be undone.",
       "identity_inputs": {
-        "name": "optional",
-        "email": "required",
-        "phone": "optional"
+        "email": "required"
       }
     }
   ],
@@ -36,8 +32,7 @@
       "description": "Manage your consent preferences, including the option to select 'Do Not Sell My Personal Information'.",
       "icon_path": "/consent.svg",
       "identity_inputs": {
-        "email": "required",
-        "phone": "optional"
+        "email": "required"
       },
       "title": "Manage your consent"
     },

diff --git a/clients/privacy-center/config/examples/basic.json b/clients/privacy-center/config/examples/basic.json
@@ -11,9 +11,7 @@
       "title": "Download your data",
       "description": "We will email you a report of the data related to your account.",
       "identity_inputs": {
-        "name": "required",
-        "email": "required",
-        "phone": "optional"
+        "email": "required"
       }
     },
     {
@@ -22,7 +20,6 @@
       "title": "Delete your data",
       "description": "We will delete all of your account data. This action cannot be undone.",
       "identity_inputs": {
-        "name": "optional",
         "email": "required"
       }
     },
@@ -32,7 +29,7 @@
       "title": "Edit your data",
       "description": "Manage how we use your data, including Do Not Sell My Personal Information.",
       "identity_inputs": {
-        "phone": "optional"
+        "email": "required"
       }
     }
   ]

diff --git a/clients/privacy-center/cypress/e2e/privacy-request.cy.ts b/clients/privacy-center/cypress/e2e/privacy-request.cy.ts
@@ -13,58 +13,24 @@ describe("Privacy request", () => {
       ).as("postPrivacyRequestVerify");
     });
 
-    it("can verify phone and navigate to form", () => {
-      cy.visit("/");
-      cy.getByTestId("card").contains("Access your data").click();
-
-      cy.getByTestId("privacy-request-form").within(() => {
-        cy.get("input#name").type("Jenny");
-        cy.get("input#email").type("[email protected]");
-
-        cy.get("input#phone").type("555 867 5309");
-        cy.get("select[name=phoneCountry]").should("have.value", "US");
-        cy.get("input#phone").clear().type("+44 55 8675 3090");
-        cy.get("select[name=phoneCountry]").should("have.value", "GB");
-
-        cy.get("button").contains("Continue").click();
-      });
-      cy.wait("@postPrivacyRequest").then((interception) => {
-        expect(interception.request.body[0].identity).to.eql({
-          email: "[email protected]",
-          phone_number: "+445586753090",
-        });
-      });
-
-      cy.getByTestId("verification-form").within(() => {
-        cy.get("input").type("112358");
-        cy.get("button").contains("Submit code").click();
-      });
-      cy.wait("@postPrivacyRequestVerify");
-
-      cy.getByTestId("request-submitted");
-    });
-
     it("requires valid inputs", () => {
       cy.visit("/");
       cy.getByTestId("card").contains("Access your data").click();
 
       cy.getByTestId("privacy-request-form").within(() => {
         // This block uses `.root()` to keep queries within the form. This is necessary because of
         // `.blur()` which triggers input validation.
-        cy.root().get("input#email").type("invalid email");
-        cy.root().get("input#phone").type("123 456 7890 1234567").blur();
 
+        // test email being typed, continue becoming disabled due to invalid email
+        cy.root().get("input#email").type("invalid email").blur();
         cy.root().should("contain", "Email is invalid");
-        cy.root().should("contain", "Phone is invalid");
         cy.root().get("button").contains("Continue").should("be.disabled");
+        cy.root().get("input#email").clear().blur();
 
-        cy.root().get("input#email").type("[email protected]");
-        cy.root().get("input#phone").clear().type("123 456 7890").blur();
-        cy.root().get("button").contains("Continue").should("be.enabled");
-
-        // The phone input is optional (in the default config) so it can be left blank.
-        cy.root().get("input#phone").clear().blur();
+        // test valid email, continue becoming enabled due to valid email
+        cy.root().get("input#email").type("[email protected]").blur();
         cy.root().get("button").contains("Continue").should("be.enabled");
+        cy.root().get("input#email").clear().blur();
       });
     });
   });

diff --git a/src/fides/data/sample_project/privacy_center/config/config.json b/src/fides/data/sample_project/privacy_center/config/config.json
@@ -11,9 +11,7 @@
       "title": "Access your data",
       "description": "We will provide you a report of all your personal data.",
       "identity_inputs": {
-        "name": "optional",
-        "email": "required",
-        "phone": "optional"
+        "email": "required"
       }
     },
     {
@@ -22,9 +20,7 @@
       "title": "Erase your data",
       "description": "We will erase all of your personal data. This action cannot be undone.",
       "identity_inputs": {
-        "name": "optional",
-        "email": "required",
-        "phone": "optional"
+        "email": "required"
       }
     }
   ],

diff --git a/src/fides/data/test_env/privacy_center_config/config.json b/src/fides/data/test_env/privacy_center_config/config.json
@@ -12,9 +12,7 @@
       "title": "Access your data",
       "description": "We will provide you a report of all your personal data.",
       "identity_inputs": {
-        "name": "optional",
-        "email": "required",
-        "phone": "optional"
+        "email": "required"
       }
     },
     {
@@ -23,9 +21,7 @@
       "title": "Erase your data",
       "description": "We will erase all of your personal data. This action cannot be undone.",
       "identity_inputs": {
-        "name": "optional",
-        "email": "required",
-        "phone": "optional"
+        "email": "required"
       }
     }
   ],
@@ -38,8 +34,7 @@
       "When you use our services, you're trusting us with your information. We understand this is a big responsibility and work hard to protect your information and put you in control."
     ],
     "identity_inputs": {
-      "email": "required",
-      "phone": "optional"
+      "email": "required"
     },
     "cookieName": "fides_consent",
     "policy_key": "default_consent_policy",

diff --git a/tests/fixtures/privacy_center_config/bad_test_config.json b/tests/fixtures/privacy_center_config/bad_test_config.json