From 83f07cdacfd29ce5236fbe2b88aefc0bf7bb3d3f Mon Sep 17 00:00:00 2001
From: Allison King <allison@ethyca.com>
Date: Fri, 22 Sep 2023 16:42:48 -0400
Subject: [PATCH] Make the banner the initial layer (#4142)

---
 CHANGELOG.md                                  |   1 +
 .../fides-js/src/components/ConsentBanner.tsx |   8 +-
 clients/fides-js/src/components/fides.css     |   1 +
 .../src/components/notices/NoticeOverlay.tsx  |  25 +++--
 .../src/components/tcf/TcfModalContent.tsx    | 102 ++++--------------
 .../src/components/tcf/TcfOverlay.tsx         |  35 ++++--
 .../cypress/e2e/consent-banner-tcf.cy.ts      |  32 +++---
 7 files changed, 79 insertions(+), 125 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a149a0e0dc..e406e4d3e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@ The types of changes are:
 - Added further config options to customize the privacy center [#4090](https://github.com/ethyca/fides/pull/4090)
 - CORS configuration page [#4073](https://github.com/ethyca/fides/pull/4073)
 - Refactored `fides.js` components so that they can take data structures that are not necessarily privacy notices [#3870](https://github.com/ethyca/fides/pull/3870)
+- Moved the initial TCF layer to the banner [#4142](https://github.com/ethyca/fides/pull/4142)
 
 ### Fixed
 - Allows CDN to cache empty experience responses from fides.js API  [#4113](https://github.com/ethyca/fides/pull/4113)
diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx
index 42438321db..0e379f1d79 100644
--- a/clients/fides-js/src/components/ConsentBanner.tsx
+++ b/clients/fides-js/src/components/ConsentBanner.tsx
@@ -1,4 +1,4 @@
-import { h, FunctionComponent, VNode } from "preact";
+import { h, FunctionComponent, ComponentChildren } from "preact";
 import { getConsentContext } from "../lib/consent-context";
 import { ExperienceConfig } from "../lib/consent-types";
 import CloseButton from "./CloseButton";
@@ -8,14 +8,14 @@ interface BannerProps {
   experience: ExperienceConfig;
   onClose: () => void;
   bannerIsOpen: boolean;
-  buttonGroup: VNode;
+  children: ComponentChildren;
 }
 
 const ConsentBanner: FunctionComponent<BannerProps> = ({
   experience,
-  buttonGroup,
   onClose,
   bannerIsOpen,
+  children,
 }) => {
   const showGpcBadge = getConsentContext().globalPrivacyControl;
   return (
@@ -45,7 +45,7 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
           >
             {experience.description}
           </div>
-          {buttonGroup}
+          {children}
         </div>
       </div>
     </div>
diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index 5513695050..99a868f05d 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -174,6 +174,7 @@ div#fides-banner-description {
   line-height: 1.2em;
   min-width: 33%;
   flex: 1;
+  margin-bottom: 0.5em;
 }
 
 div#fides-button-group {
diff --git a/clients/fides-js/src/components/notices/NoticeOverlay.tsx b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
index 562d7e4a5b..c64d4097f5 100644
--- a/clients/fides-js/src/components/notices/NoticeOverlay.tsx
+++ b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
@@ -107,19 +107,18 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
             bannerIsOpen={isOpen}
             onClose={onClose}
             experience={experienceConfig}
-            buttonGroup={
-              <NoticeConsentButtons
-                experience={experience}
-                onManagePreferencesClick={onManagePreferencesClick}
-                enabledKeys={draftEnabledNoticeKeys}
-                onSave={(keys) => {
-                  handleUpdatePreferences(keys);
-                  onSave();
-                }}
-                isAcknowledge={isAllNoticeOnly}
-              />
-            }
-          />
+          >
+            <NoticeConsentButtons
+              experience={experience}
+              onManagePreferencesClick={onManagePreferencesClick}
+              enabledKeys={draftEnabledNoticeKeys}
+              onSave={(keys) => {
+                handleUpdatePreferences(keys);
+                onSave();
+              }}
+              isAcknowledge={isAllNoticeOnly}
+            />
+          </ConsentBanner>
         ) : null
       }
       renderModalContent={({ onClose }) => (
diff --git a/clients/fides-js/src/components/tcf/TcfModalContent.tsx b/clients/fides-js/src/components/tcf/TcfModalContent.tsx
index 7cfd91a6de..8294cb5629 100644
--- a/clients/fides-js/src/components/tcf/TcfModalContent.tsx
+++ b/clients/fides-js/src/components/tcf/TcfModalContent.tsx
@@ -1,35 +1,9 @@
 import { h } from "preact";
-import { useState } from "preact/hooks";
 import TcfTabs from "./TcfTabs";
 import { TcfConsentButtons } from "./TcfConsentButtons";
 import { ButtonType, PrivacyExperience } from "../../lib/consent-types";
 import type { EnabledIds, UpdateEnabledIds } from "./TcfOverlay";
 import Button from "../Button";
-import InitialLayer from "./InitialLayer";
-
-const BackButton = ({ onClick }: { onClick: () => void }) => (
-  <button type="button" className="fides-back-button" onClick={onClick}>
-    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none">
-      <path
-        fill="#2D3748"
-        d="M3.914 5.5H10v1H3.914l2.682 2.682-.707.707L2 6l3.889-3.889.707.707L3.914 5.5Z"
-      />
-    </svg>
-    Back
-  </button>
-);
-
-const ManagePreferencesLink = ({
-  linkLabel,
-  onClick,
-}: {
-  linkLabel: string;
-  onClick: () => void;
-}) => (
-  <button type="button" onClick={onClick} className="fides-link-button">
-    {linkLabel}
-  </button>
-);
 
 const TcfModalContent = ({
   experience,
@@ -41,63 +15,25 @@ const TcfModalContent = ({
   draftIds: EnabledIds;
   onChange: (payload: UpdateEnabledIds) => void;
   onSave: (keys: EnabledIds) => void;
-}) => {
-  const [isInitialLayer, setIsInitialLayer] = useState(true);
-  const goToSecondLayer = () => {
-    setIsInitialLayer(false);
-  };
-  if (isInitialLayer) {
-    return (
-      <div>
-        <InitialLayer
-          experience={experience}
-          managePreferencesLink={
-            <ManagePreferencesLink
-              onClick={goToSecondLayer}
-              linkLabel={
-                experience.experience_config?.privacy_preferences_link_label ||
-                ""
-              }
-            />
-          }
-        />
-        <TcfConsentButtons
-          experience={experience}
-          onSave={onSave}
-          firstButton={
-            <Button
-              buttonType={ButtonType.SECONDARY}
-              label={
-                experience.experience_config?.privacy_preferences_link_label
-              }
-              onClick={goToSecondLayer}
-            />
-          }
+}) => (
+  <div>
+    <TcfTabs
+      experience={experience}
+      enabledIds={draftIds}
+      onChange={onChange}
+    />
+    <TcfConsentButtons
+      experience={experience}
+      onSave={onSave}
+      firstButton={
+        <Button
+          buttonType={ButtonType.SECONDARY}
+          label={experience.experience_config?.save_button_label}
+          onClick={() => onSave(draftIds)}
         />
-      </div>
-    );
-  }
-  return (
-    <div>
-      <BackButton onClick={() => setIsInitialLayer(true)} />
-      <TcfTabs
-        experience={experience}
-        enabledIds={draftIds}
-        onChange={onChange}
-      />
-      <TcfConsentButtons
-        experience={experience}
-        onSave={onSave}
-        firstButton={
-          <Button
-            buttonType={ButtonType.SECONDARY}
-            label={experience.experience_config?.save_button_label}
-            onClick={() => onSave(draftIds)}
-          />
-        }
-      />
-    </div>
-  );
-};
+      }
+    />
+  </div>
+);
 
 export default TcfModalContent;
diff --git a/clients/fides-js/src/components/tcf/TcfOverlay.tsx b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
index eca2fa3712..7ec70f5077 100644
--- a/clients/fides-js/src/components/tcf/TcfOverlay.tsx
+++ b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
@@ -31,6 +31,7 @@ import { ConsentMethod, PrivacyExperience } from "../../lib/consent-types";
 import TcfModalContent from "./TcfModalContent";
 import { generateTcString } from "../../lib/tcf";
 import { FidesCookie } from "../../lib/cookie";
+import InitialLayer from "./InitialLayer";
 
 const resolveConsentValueFromTcfModel = (
   model: TCFPurposeRecord | TCFFeatureRecord | TCFVendorRecord
@@ -226,17 +227,29 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
             bannerIsOpen={isOpen}
             onClose={onClose}
             experience={experienceConfig}
-            buttonGroup={
-              <TcfConsentButtons
-                experience={experience}
-                onManagePreferencesClick={onManagePreferencesClick}
-                onSave={(keys) => {
-                  handleUpdateAllPreferences(keys);
-                  onSave();
-                }}
-              />
-            }
-          />
+          >
+            <InitialLayer
+              experience={experience}
+              managePreferencesLink={
+                <button
+                  type="button"
+                  onClick={onManagePreferencesClick}
+                  className="fides-link-button"
+                >
+                  {experience.experience_config
+                    ?.privacy_preferences_link_label || ""}
+                </button>
+              }
+            />
+            <TcfConsentButtons
+              experience={experience}
+              onManagePreferencesClick={onManagePreferencesClick}
+              onSave={(keys) => {
+                handleUpdateAllPreferences(keys);
+                onSave();
+              }}
+            />
+          </ConsentBanner>
         ) : null
       }
       renderModalContent={({ onClose }) => (
diff --git a/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts b/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts
index ebfccfa6d8..e3a590225f 100644
--- a/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts
+++ b/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts
@@ -146,29 +146,33 @@ describe("Fides-js TCF", () => {
   });
 
   describe("initial layer", () => {
-    beforeEach(() => {
-      cy.get("#fides-modal-link").click();
-    });
-
     it("can render purposes in the initial layer as a stack", () => {
-      cy.get("span").contains(STACK_1.name);
-      cy.get("span").contains(PURPOSE_3.name);
+      cy.get("div#fides-banner").within(() => {
+        cy.get("span").contains(STACK_1.name);
+        cy.get("span").contains(PURPOSE_3.name);
+
+        cy.get("span").contains(STACK_1.name).click();
+        [PURPOSE_1.id, PURPOSE_2.id, PURPOSE_4.id, PURPOSE_5.id].forEach(
+          (id) => {
+            cy.get("li").contains(`Purpose ${id}`);
+          }
+        );
+      });
+    });
 
-      cy.get("span").contains(STACK_1.name).click();
-      [PURPOSE_1.id, PURPOSE_2.id, PURPOSE_4.id, PURPOSE_5.id].forEach((id) => {
-        cy.get("li").contains(`Purpose ${id}`);
+    it("can open the modal", () => {
+      cy.get("div#fides-banner").within(() => {
+        cy.get("#fides-button-group").within(() => {
+          cy.get("button").contains("Manage preferences").click();
+        });
       });
+      cy.get("#fides-tab-Purposes");
     });
   });
 
   describe("second layer", () => {
     beforeEach(() => {
       cy.get("#fides-modal-link").click();
-      cy.getByTestId("fides-modal-content").within(() => {
-        cy.get("#fides-banner-button-secondary")
-          .contains("Manage preferences")
-          .click();
-      });
     });
 
     describe("rendering the TCF modal", () => {