Include overrides when loading full experience (#5333)

Author: gilluminate

CHANGELOG.md

@@ -28,6 +28,7 @@ The types of changes are:
 - Fix issue with fides-js where the experience was incorrectly initialized as an empty object which appeared valid, when `undefined` was expected [#5309](https://github.com/ethyca/fides/pull/5309)
 - Fix issue where newly added languages in Admin-UI were not being rendered in the preview [#5316](https://github.com/ethyca/fides/pull/5316)
 - Fix bug where consent automation accordion shows for integrations that don't support consent automation [#5330](https://github.com/ethyca/fides/pull/5330)
+- Fix issue where custom overrides (title, description, privacy policy url, etc.) were not being applied to the full TCF overlay [#5333](https://github.com/ethyca/fides/pull/5333)
 
 
 ### Added

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

@@ -56,6 +56,7 @@ export const TcfOverlay = ({
   cookie,
   savedConsent,
   propertyId,
+  translationOverrides,
 }: TcfOverlayProps) => {
   const {
     i18n,
@@ -144,7 +145,7 @@ export const TcfOverlay = ({
         const fullExperience: PrivacyExperience = { ...result, ...userPrefs };
 
         setExperience(fullExperience);
-        loadMessagesFromExperience(i18n, fullExperience);
+        loadMessagesFromExperience(i18n, fullExperience, translationOverrides);
         if (!userlocale || bestLocale === defaultLocale) {
           // English (default) GVL translations are part of the full experience, so we load them here.
           loadGVLMessagesFromExperience(i18n, fullExperience);

clients/fides-js/src/components/types.ts

@@ -1,5 +1,6 @@
 import type {
   FidesCookie,
+  FidesExperienceTranslationOverrides,
   FidesInitOptions,
   NoticeConsent,
   PrivacyExperience,
@@ -21,4 +22,5 @@ export interface OverlayProps {
   fidesRegionString: string;
   savedConsent: NoticeConsent;
   propertyId?: string;
+  translationOverrides?: Partial<FidesExperienceTranslationOverrides>;
 }

clients/fides-js/src/lib/initOverlay.ts

@@ -29,6 +29,7 @@ export const initOverlay = async ({
   savedConsent,
   renderOverlay,
   propertyId,
+  translationOverrides,
 }: OverlayProps & {
   renderOverlay: (props: OverlayProps, parent: ContainerNode) => void;
 }): Promise<void> => {
@@ -152,6 +153,7 @@ export const initOverlay = async ({
             cookie,
             savedConsent,
             propertyId,
+            translationOverrides,
           },
           parentElem,
         );

clients/fides-js/src/lib/initialize.ts

@@ -459,6 +459,7 @@ export const initialize = async ({
           savedConsent: fides.saved_consent,
           renderOverlay,
           propertyId,
+          translationOverrides: overrides?.experienceTranslationOverrides,
         }).catch((e) => {
           debugLog(options.debug, e);
         });