PROD-1714-When-CMP-cannot-be-dismissed-page-content-should-not-scroll…

…-overlay-should-appear (#4748)

Co-authored-by: Lucano Vera <[email protected]>

CHANGELOG.md

@@ -31,6 +31,7 @@ The types of changes are:
 - Updated privacy notice & experience forms to hide translation UI when user doesn't have translation feature [#4728](https://github.com/ethyca/fides/pull/4728), [#4734](https://github.com/ethyca/fides/pull/4734)
 - Custom privacy request fields now support list values [#4686](https://github.com/ethyca/fides/pull/4686)
 - Update when GPP API reports signal status: ready [#4635](https://github.com/ethyca/fides/pull/4635)
+- Update non-dismissable TCF and notice banners to show a black overlay and prevent scrolling [#4748](https://github.com/ethyca/fidesplus/pull/4748)
 - Cleanup config vars for preview in Admin-UI [#4745](https://github.com/ethyca/fides/pull/4745)
 
 ### Fixed
@@ -46,6 +47,10 @@ The types of changes are:
 - Added new script to allow recompiling of fides-js when the code changes [#4744](https://github.com/ethyca/fides/pull/4744)
 
 
+### Developer Experience
+- Added new script to allow recompiling of fides-js when the code changes [#4744](https://github.com/ethyca/fides/pull/4744)
+
+
 ## [2.32.0](https://github.com/ethyca/fides/compare/2.31.1...2.32.0)
 
 ### Added

clients/fides-js/src/components/ConsentBanner.tsx

@@ -13,7 +13,7 @@ interface ButtonGroupProps {
 
 interface BannerProps {
   i18n: I18n;
-  dismissable: boolean | undefined;
+  dismissable: boolean;
   onOpen: () => void;
   onClose: () => void;
   bannerIsOpen: boolean;

clients/fides-js/src/components/Overlay.tsx

@@ -27,6 +27,7 @@ import type { I18n } from "../lib/i18n";
 import ConsentModal from "./ConsentModal";
 import ConsentContent from "./ConsentContent";
 import "./fides.css";
+import { blockPageScrolling, unblockPageScrolling } from "../lib/ui-utils";
 
 interface RenderBannerProps {
   isOpen: boolean;
@@ -51,6 +52,7 @@ interface Props {
   renderModalContent: () => VNode;
   renderModalFooter: (props: RenderModalFooter) => VNode;
   onVendorPageClick?: () => void;
+  isUiBlocking: boolean;
 }
 
 const Overlay: FunctionComponent<Props> = ({
@@ -65,13 +67,26 @@ const Overlay: FunctionComponent<Props> = ({
   renderModalContent,
   renderModalFooter,
   onVendorPageClick,
+  isUiBlocking,
 }) => {
   const delayBannerMilliseconds = 100;
   const delayModalLinkMilliseconds = 200;
   const hasMounted = useHasMounted();
   const [bannerIsOpen, setBannerIsOpen] = useState(false);
   const modalLinkRef = useRef<HTMLElement | null>(null);
 
+  useEffect(() => {
+    if (isUiBlocking && bannerIsOpen) {
+      blockPageScrolling();
+    } else {
+      unblockPageScrolling();
+    }
+
+    return () => {
+      unblockPageScrolling();
+    };
+  }, [isUiBlocking, bannerIsOpen]);
+
   const dispatchCloseEvent = useCallback(
     ({ saved = false }: { saved?: boolean }) => {
       dispatchFidesEvent("FidesModalClosed", cookie, options.debug, { saved });
@@ -177,9 +192,10 @@ const Overlay: FunctionComponent<Props> = ({
 
   return (
     <div>
-      {showBanner && bannerIsOpen && window.Fides.options.preventDismissal && (
+      {showBanner && bannerIsOpen && isUiBlocking && (
         <div className="fides-modal-overlay" />
       )}
+
       {showBanner
         ? renderBanner({
             isOpen: bannerIsOpen,

clients/fides-js/src/components/fides.css

@@ -418,6 +418,10 @@ div#fides-consent-content .fides-modal-description {
   gap: 12px;
 }
 
+.fides-no-scroll {
+  overflow-y: hidden;
+}
+
 /* Responsive overlay */
 @media (max-width: 48em) {
   div.fides-modal-content,

clients/fides-js/src/components/notices/NoticeOverlay.tsx

@@ -235,19 +235,22 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
     return null;
   }
 
+  const isDismissable = !!experience.experience_config?.dismissable;
+
   return (
     <Overlay
       options={options}
       experience={experience}
       i18n={i18n}
       cookie={cookie}
       savedConsent={savedConsent}
+      isUiBlocking={!isDismissable}
       onOpen={dispatchOpenOverlayEvent}
       onDismiss={handleDismiss}
       renderBanner={({ isOpen, onClose, onSave, onManagePreferencesClick }) => (
         <ConsentBanner
           bannerIsOpen={isOpen}
-          dismissable={experience.experience_config?.dismissable}
+          dismissable={isDismissable}
           onOpen={dispatchOpenBannerEvent}
           onClose={() => {
             onClose();

clients/fides-js/src/components/tcf/TcfOverlay.tsx

@@ -312,6 +312,8 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
     return null;
   }
 
+  const isDismissable = !!experience.experience_config?.dismissable;
+
   return (
     <Overlay
       options={options}
@@ -322,6 +324,7 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
       onVendorPageClick={() => {
         setActiveTabIndex(2);
       }}
+      isUiBlocking={!isDismissable}
       onOpen={dispatchOpenOverlayEvent}
       onDismiss={handleDismiss}
       renderBanner={({ isOpen, onClose, onSave, onManagePreferencesClick }) => {
@@ -332,7 +335,7 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
         return (
           <ConsentBanner
             i18n={i18n}
-            dismissable={experience.experience_config?.dismissable}
+            dismissable={isDismissable}
             bannerIsOpen={isOpen}
             onOpen={dispatchOpenBannerEvent}
             onClose={() => {

clients/fides-js/src/lib/ui-utils.ts

@@ -0,0 +1,6 @@
+export const blockPageScrolling = () => {
+  document.body.classList.add("fides-no-scroll");
+};
+export const unblockPageScrolling = () => {
+  document.body.classList.remove("fides-no-scroll");
+};

docs/fides/docs/css/fides.css

@@ -61,6 +61,8 @@ body {
     font-family: 'Source Sans Pro', sans-serif;
 }
 
+
+
 .md-header{
     background-color: var(--md-header-bg-color);
 }