Fix lost i18n context issues with embedded full experience (#5749)

Co-authored-by: Lucano Vera <lucanovera@live.com.ar>
ethyca · Feb 12, 2025 · 88b49a8 · 88b49a8
1 parent b614405
commit 88b49a8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -48,6 +48,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 - Fixed `window.Fides.experience` of FidesJS to be a merged version of the minimal and full experience. [#5726](https://github.com/ethyca/fides/pull/5726)
 - Fixed vendor count template string on FidesJS embedded layer 2 descriptions [#5736](https://github.com/ethyca/fides/pull/5736)
 - Allowing a list with a single dataset in the YAML dataset editor [#5750](https://github.com/ethyca/fides/pull/5750)
+- Fixed edge case translation string issue on FidesJS embedded layer 2 (#5749)[https://github.com/ethyca/fides/pull/5749]
 
 ## [2.54.0](https://github.com/ethyca/fides/compare/2.53.0...2.54.0)
 

diff --git a/clients/fides-js/src/components/tcf/TcfOverlay.tsx b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
@@ -110,6 +110,7 @@ export const TcfOverlay = ({
   }, [currentLocale, minExperienceLocale, setCurrentLocale]);
 
   const { gvlTranslations, setGvlTranslations } = useGvl();
+  const [isGVLLangLoading, setIsGVLLangLoading] = useState(false);
   const loadGVLTranslations = async (locale: string) => {
     const gvlTranslationObjects = await fetchGvlTranslations(
       options.fidesApiUrl,
@@ -149,8 +150,6 @@ export const TcfOverlay = ({
   const [experience, setExperience] = useState<PrivacyExperience>();
 
   useEffect(() => {
-    let isGVLLangLoading = false;
-
     if (!!userlocale && bestLocale !== minExperienceLocale) {
       // The minimal experience translation is different from the user's language.
       // This occurs when the customer has set their overrides on the window object
@@ -166,9 +165,9 @@ export const TcfOverlay = ({
       // We can only get English GVL translations from the experience.
       // If the user's locale is not English, we need to load them from the api.
       // This only affects the modal.
-      isGVLLangLoading = true;
+      setIsGVLLangLoading(true);
       loadGVLTranslations(bestLocale).then(() => {
-        isGVLLangLoading = false;
+        setIsGVLLangLoading(false);
       });
     }
     fidesDebugger("Fetching full TCF experience...");
@@ -192,20 +191,6 @@ export const TcfOverlay = ({
           window.Fides.experience.minimal_tcf = false;
 
           setExperience(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);
-          } else {
-            setCurrentLocale(bestLocale);
-            if (!isGVLLangLoading) {
-              setIsI18nLoading(false);
-            }
-          }
         }
       }
     });
@@ -220,6 +205,16 @@ export const TcfOverlay = ({
     if (!experience) {
       setDraftIds(EMPTY_ENABLED_IDS);
     } else {
+      loadMessagesFromExperience(i18n, experience, translationOverrides);
+      if (!userlocale || bestLocale === defaultLocale) {
+        // English (default) GVL translations are part of the full experience, so we load them here.
+        loadGVLMessagesFromExperience(i18n, experience);
+      } else {
+        setCurrentLocale(bestLocale);
+        if (!isGVLLangLoading) {
+          setIsI18nLoading(false);
+        }
+      }
       const {
         tcf_purpose_consents: consentPurposes = [],
         privacy_notices: customPurposes = [],