Consolidate buttons into the same component

ethyca · Jun 13, 2023 · 6dfec80 · 6dfec80
1 parent a242748
commit 6dfec80
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 178 deletions.
diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx
@@ -1,107 +1,39 @@
-import { h, FunctionComponent, Fragment } from "preact";
-import { ButtonType, ExperienceConfig } from "../lib/consent-types";
-import Button from "./Button";
+import { h, FunctionComponent, VNode } from "preact";
+import { ExperienceConfig } from "../lib/consent-types";
 import CloseButton from "./CloseButton";
 
 interface BannerProps {
   experience: ExperienceConfig;
-  onAcceptAll: () => void;
-  onRejectAll: () => void;
-  onManagePreferences: () => void;
   onClose: () => void;
   bannerIsOpen: boolean;
-  /** Shows acknowledge button instead of Accept all/ Reject all */
-  isAcknowledgeOnly: boolean;
+  buttonGroup: VNode;
 }
 
 const ConsentBanner: FunctionComponent<BannerProps> = ({
   experience,
-  onAcceptAll,
-  onRejectAll,
-  onManagePreferences,
+  buttonGroup,
   onClose,
   bannerIsOpen,
-  isAcknowledgeOnly,
-}) => {
-  const {
-    title = "Manage your consent",
-    description = "This website processes your data respectfully, so we require your consent to use cookies.",
-    accept_button_label: acceptButtonLabel = "Accept All",
-    reject_button_label: rejectButtonLabel = "Reject All",
-    privacy_preferences_link_label:
-      privacyPreferencesLabel = "Manage preferences",
-    acknowledge_button_label: acknowledgeButtonLabel = "Ok",
-  } = experience;
-
-  const handleRejectAll = () => {
-    onRejectAll();
-    onClose();
-  };
-
-  const handleAcceptAll = () => {
-    onAcceptAll();
-    onClose();
-  };
-
-  return (
-    <div
-      id="fides-banner-container"
-      className={`fides-banner fides-banner-bottom ${
-        bannerIsOpen ? "" : "fides-banner-hidden"
-      } `}
-    >
-      <div id="fides-banner">
-        <div id="fides-banner-inner">
-          <CloseButton ariaLabel="Close banner" onClick={onClose} />
-          <div id="fides-banner-title" className="fides-banner-title">
-            {title}
-          </div>
-          <div
-            id="fides-banner-description"
-            className="fides-banner-description"
-          >
-            {description}
-          </div>
-          <div id="fides-banner-buttons" className="fides-banner-buttons">
-            {isAcknowledgeOnly ? (
-              <span
-                id="fides-acknowledge-button"
-                className="fides-banner-buttons-right"
-              >
-                <Button
-                  buttonType={ButtonType.PRIMARY}
-                  label={acknowledgeButtonLabel}
-                  onClick={onAcceptAll}
-                />
-              </span>
-            ) : (
-              <>
-                <span className="fides-banner-buttons-left">
-                  <Button
-                    buttonType={ButtonType.TERTIARY}
-                    label={privacyPreferencesLabel}
-                    onClick={onManagePreferences}
-                  />
-                </span>
-                <span className="fides-banner-buttons-right">
-                  <Button
-                    buttonType={ButtonType.PRIMARY}
-                    label={rejectButtonLabel}
-                    onClick={handleRejectAll}
-                  />
-                  <Button
-                    buttonType={ButtonType.PRIMARY}
-                    label={acceptButtonLabel}
-                    onClick={handleAcceptAll}
-                  />
-                </span>
-              </>
-            )}
-          </div>
+}) => (
+  <div
+    id="fides-banner-container"
+    className={`fides-banner fides-banner-bottom ${
+      bannerIsOpen ? "" : "fides-banner-hidden"
+    } `}
+  >
+    <div id="fides-banner">
+      <div id="fides-banner-inner">
+        <CloseButton ariaLabel="Close banner" onClick={onClose} />
+        <div id="fides-banner-title" className="fides-banner-title">
+          {experience.title}
+        </div>
+        <div id="fides-banner-description" className="fides-banner-description">
+          {experience.description}
         </div>
+        {buttonGroup}
       </div>
     </div>
-  );
-};
+  </div>
+);
 
 export default ConsentBanner;
diff --git a/clients/fides-js/src/components/ConsentButtons.tsx b/clients/fides-js/src/components/ConsentButtons.tsx
@@ -0,0 +1,98 @@
+import { h } from "preact";
+import Button from "./Button";
+import {
+  ButtonType,
+  PrivacyExperience,
+  ConsentMechanism,
+  PrivacyNotice,
+} from "../lib/consent-types";
+
+type NoticeKeys = Array<PrivacyNotice["notice_key"]>;
+
+const ConsentButtons = ({
+  experience,
+  onManagePreferencesClick,
+  onSave,
+  enabledKeys,
+  isInModal,
+}: {
+  experience: PrivacyExperience;
+  onSave: (noticeKeys: NoticeKeys) => void;
+  onManagePreferencesClick?: () => void;
+  enabledKeys: NoticeKeys;
+  isInModal?: boolean;
+}) => {
+  if (!experience.experience_config || !experience.privacy_notices) {
+    return null;
+  }
+
+  const { experience_config: config, privacy_notices: notices } = experience;
+  const isAllNoticeOnly = notices.every(
+    (n) => n.consent_mechanism === ConsentMechanism.NOTICE_ONLY
+  );
+
+  const handleAcceptAll = () => {
+    onSave(notices.map((n) => n.notice_key));
+  };
+
+  const handleRejectAll = () => {
+    onSave(
+      notices
+        .filter((n) => n.consent_mechanism === ConsentMechanism.NOTICE_ONLY)
+        .map((n) => n.notice_key)
+    );
+  };
+
+  if (isAllNoticeOnly) {
+    return (
+      <div
+        className={`fides-acknowledge-button-container ${
+          isInModal ? "" : "fides-banner-acknowledge"
+        }`}
+      >
+        <Button
+          buttonType={ButtonType.PRIMARY}
+          label={config.acknowledge_button_label}
+          onClick={handleAcceptAll}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div id="fides-banner-buttons" className="fides-banner-buttons">
+      {onManagePreferencesClick ? (
+        <div>
+          <Button
+            buttonType={ButtonType.TERTIARY}
+            label={config.privacy_preferences_link_label}
+            onClick={onManagePreferencesClick}
+          />
+        </div>
+      ) : null}
+      <div className={isInModal ? "fides-modal-button-group" : undefined}>
+        {isInModal ? (
+          <Button
+            buttonType={ButtonType.SECONDARY}
+            label={config.save_button_label}
+            onClick={() => {
+              onSave(enabledKeys);
+            }}
+          />
+        ) : null}
+        <Button
+          buttonType={ButtonType.PRIMARY}
+          label={config.reject_button_label}
+          onClick={handleRejectAll}
+        />
+        <Button
+          buttonType={ButtonType.PRIMARY}
+          label={config.accept_button_label}
+          onClick={handleAcceptAll}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ConsentButtons;
diff --git a/clients/fides-js/src/components/ConsentModal.tsx b/clients/fides-js/src/components/ConsentModal.tsx
@@ -1,11 +1,6 @@
-import { h, Fragment } from "preact";
+import { h, VNode } from "preact";
 import { Attributes } from "../lib/a11y-dialog";
-import Button from "./Button";
-import {
-  ButtonType,
-  PrivacyNotice,
-  ExperienceConfig,
-} from "../lib/consent-types";
+import { PrivacyNotice, ExperienceConfig } from "../lib/consent-types";
 import NoticeToggles from "./NoticeToggles";
 import CloseButton from "./CloseButton";
 
@@ -17,41 +12,18 @@ const ConsentModal = ({
   notices,
   enabledNoticeKeys,
   onChange,
-  onClose,
-  onSave,
-  onRejectAll,
-  onAcceptAll,
-  isAcknowledgeOnly,
+  buttonGroup,
 }: {
   attributes: Attributes;
   experience: ExperienceConfig;
   notices: PrivacyNotice[];
   enabledNoticeKeys: NoticeKeys;
   onClose: () => void;
   onChange: (enabledNoticeKeys: NoticeKeys) => void;
-  onSave: (enabledNoticeKeys: NoticeKeys) => void;
-  onRejectAll: () => void;
-  onAcceptAll: () => void;
-  /** Shows acknowledge button instead of Accept all/ Reject all */
-  isAcknowledgeOnly: boolean;
+  buttonGroup: VNode;
 }) => {
   const { container, overlay, dialog, title, closeButton } = attributes;
 
-  const handleSave = () => {
-    onSave(enabledNoticeKeys);
-    onClose();
-  };
-
-  const handleAcceptAll = () => {
-    onAcceptAll();
-    onClose();
-  };
-
-  const handleRejectAll = () => {
-    onRejectAll();
-    onClose();
-  };
-
   return (
     // @ts-ignore A11yDialog ref obj type isn't quite the same
     <div
@@ -86,34 +58,7 @@ const ConsentModal = ({
             onChange={onChange}
           />
         </div>
-
-        <div className="fides-modal-button-group">
-          {isAcknowledgeOnly ? (
-            <Button
-              label={experience.acknowledge_button_label}
-              buttonType={ButtonType.PRIMARY}
-              onClick={onAcceptAll}
-            />
-          ) : (
-            <>
-              <Button
-                label={experience.save_button_label}
-                buttonType={ButtonType.SECONDARY}
-                onClick={handleSave}
-              />
-              <Button
-                label={experience.reject_button_label}
-                buttonType={ButtonType.PRIMARY}
-                onClick={handleRejectAll}
-              />
-              <Button
-                label={experience.accept_button_label}
-                buttonType={ButtonType.PRIMARY}
-                onClick={handleAcceptAll}
-              />
-            </>
-          )}
-        </div>
+        {buttonGroup}
         {experience.privacy_policy_link_label &&
         experience.privacy_policy_url ? (
           <a