Fix modal preview in Admin-UI experience config (#4712)

Co-authored-by: Kelsey Thomas <[email protected]>

CHANGELOG.md

@@ -50,6 +50,7 @@ The types of changes are:
 ### Fixed
 - Ignore 404 errors from Delighted and Kustomer when an erasure client is not found [#4593](https://github.com/ethyca/fides/pull/4593)
 - Various FE fixes for Admin-UI experience config form [#4707](https://github.com/ethyca/fides/pull/4707)
+- Fix modal preview in Admin-UI experience config form [#4712](https://github.com/ethyca/fides/pull/4712)
 - Optimize FidesJS bundle size by only loading TCF static stings when needed [#4711](https://github.com/ethyca/fides/pull/4711)
 
 ## [2.31.0](https://github.com/ethyca/fides/compare/2.30.1...2.31.0)

clients/admin-ui/src/features/privacy-experience/Preview.tsx

@@ -14,7 +14,6 @@ import { getErrorMessage } from "~/features/common/helpers";
 import { TranslationWithLanguageName } from "~/features/privacy-experience/form/helpers";
 import {
   buildBaseConfig,
-  FidesPreviewComponent,
   translationOrDefault,
 } from "~/features/privacy-experience/preview/helpers";
 import { useLazyGetPrivacyNoticeByIdQuery } from "~/features/privacy-notices/privacy-notices.slice";
@@ -129,7 +128,7 @@ const Preview = ({
   useEffect(() => {
     // if current component is a modal, we want to force fides.js to show a modal, not a banner component
     if (values.component === ComponentType.MODAL) {
-      baseConfig.options.fidesPreviewComponent = FidesPreviewComponent.MODAL;
+      baseConfig.experience.experience_config.component = ComponentType.MODAL;
     }
     // if we're editing a translation, we want to preview the banner/modal with that language,
     // otherwise we show first translation if exists, else keep default
@@ -146,7 +145,12 @@ const Preview = ({
       baseConfig.options.fidesLocale = values.translations[0].language;
     }
     baseConfig.options.preventDismissal = !values.dismissable;
-    if (window.Fides && values.privacy_notice_ids?.length) {
+    if (
+      window.Fides &&
+      values.privacy_notice_ids?.length &&
+      values.component !== ComponentType.PRIVACY_CENTER &&
+      values.component !== ComponentType.TCF_OVERLAY
+    ) {
       window.Fides.init(baseConfig);
     }
   }, [values, translation, baseConfig, allPrivacyNotices]);
@@ -265,7 +269,12 @@ const Preview = ({
         id="fides-js-base"
         src={fidesJsScript}
         onReady={() => {
-          window.Fides?.init(baseConfig);
+          if (
+            values.component !== ComponentType.TCF_OVERLAY &&
+            values.component !== ComponentType.PRIVACY_CENTER
+          ) {
+            window.Fides?.init(baseConfig);
+          }
         }}
       />
       <div id="preview-container" />

clients/admin-ui/src/features/privacy-experience/preview/helpers.ts

@@ -30,11 +30,6 @@ export const buildExperienceTranslation = (
   ...(config.translations ? config.translations[0] : {}),
 });
 
-export enum FidesPreviewComponent {
-  BANNER = "banner",
-  MODAL = "modal",
-}
-
 export const buildBaseConfig = (
   experienceConfig: Partial<ExperienceConfigCreate>,
   notices: PrivacyNoticeResponse[]
@@ -51,7 +46,6 @@ export const buildBaseConfig = (
     fidesApiUrl: "http://localhost:8080/api/v1",
     preventDismissal: experienceConfig.dismissable ?? false,
     fidesPreviewMode: true,
-    fidesPreviewComponent: FidesPreviewComponent.BANNER,
     allowHTMLDescription: true,
     serverSideFidesApiUrl: "",
     fidesString: null,

clients/fides-js/src/fides-tcf.ts

@@ -245,7 +245,6 @@ _Fides = {
     allowHTMLDescription: null,
     base64Cookie: false,
     fidesPreviewMode: false,
-    fidesPreviewComponent: null,
   },
   fides_meta: {},
   identity: {},

clients/fides-js/src/fides.ts

@@ -201,7 +201,6 @@ _Fides = {
     allowHTMLDescription: null,
     base64Cookie: false,
     fidesPreviewMode: false,
-    fidesPreviewComponent: null,
   },
   fides_meta: {},
   identity: {},

clients/fides-js/src/lib/consent-types.ts

@@ -108,9 +108,6 @@ export type FidesOptions = {
   // Allows preview of banner components for internal use or testing, such that saving to cookie disabled,
   // and some buttons are disabled on the Fides components
   fidesPreviewMode: boolean;
-
-  // Allows preview mode to specify which component to open, banner or modal
-  fidesPreviewComponent?: string | null;
 };
 
 /**

clients/privacy-center/app/server-environment.ts

@@ -58,7 +58,6 @@ export interface PrivacyCenterSettings {
   ALLOW_HTML_DESCRIPTION: boolean | null; // (optional) whether or not HTML descriptions should be rendered
   BASE_64_COOKIE: boolean; // whether or not to encode cookie as base64 on top of the default JSON string
   FIDES_PREVIEW_MODE: boolean | false; // (optional) sets fides to preview mode, save prefs to cookie, disabling buttons, etc
-  FIDES_PREVIEW_COMPONENT: string | null; // (optional) allows fides preview mode to specify a component to open (e.g. modal vs banner)
 }
 
 /**
@@ -89,7 +88,6 @@ export type PrivacyCenterClientSettings = Pick<
   | "ALLOW_HTML_DESCRIPTION"
   | "BASE_64_COOKIE"
   | "FIDES_PREVIEW_MODE"
-  | "FIDES_PREVIEW_COMPONENT"
 >;
 
 export type Styles = string;
@@ -367,10 +365,6 @@ export const loadPrivacyCenterEnvironment =
       FIDES_PREVIEW_MODE: process.env.FIDES_PRIVACY_CENTER__FIDES_PREVIEW_MODE
         ? process.env.FIDES_PRIVACY_CENTER__FIDES_PREVIEW_MODE === "true"
         : false,
-      FIDES_PREVIEW_COMPONENT: process.env
-        .FIDES_PRIVACY_CENTER__FIDES_PREVIEW_COMPONENT
-        ? process.env.FIDES_PRIVACY_CENTER__FIDES_PREVIEW_COMPONENT
-        : null,
     };
 
     // Load configuration file (if it exists)
@@ -403,7 +397,6 @@ export const loadPrivacyCenterEnvironment =
       ALLOW_HTML_DESCRIPTION: settings.ALLOW_HTML_DESCRIPTION,
       BASE_64_COOKIE: settings.BASE_64_COOKIE,
       FIDES_PREVIEW_MODE: settings.FIDES_PREVIEW_MODE,
-      FIDES_PREVIEW_COMPONENT: settings.FIDES_PREVIEW_COMPONENT,
     };
 
     // For backwards-compatibility, override FIDES_API_URL with the value from the config file if present

clients/privacy-center/pages/api/fides-js.ts

@@ -165,7 +165,6 @@ export default async function handler(
       fidesTcfGdprApplies: environment.settings.FIDES_TCF_GDPR_APPLIES,
       fidesString,
       fidesPreviewMode: environment.settings.FIDES_PREVIEW_MODE,
-      fidesPreviewComponent: environment.settings.FIDES_PREVIEW_COMPONENT,
       // Custom API override functions must be passed into custom Fides extensions via Fides.init(...)
       apiOptions: null,
       fidesJsBaseUrl: environment.settings.FIDES_JS_BASE_URL,