FE Admin UI update - New field to accept this value (#4761)

ethyca · Apr 1, 2024 · 3ff188b · 3ff188b
1 parent f8a9215
commit 3ff188b
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 34 deletions.
diff --git a/clients/admin-ui/src/features/privacy-experience/PrivacyExperienceTranslationForm.tsx b/clients/admin-ui/src/features/privacy-experience/PrivacyExperienceTranslationForm.tsx
@@ -182,7 +182,7 @@ const PrivacyExperienceTranslationForm = ({
           : "Edit experience text"}
       </Heading>
       {isOOB ? <OOBTranslationNotice languageName={translation.name} /> : null}
-      {translationsEnabled ? (
+      {translationsEnabled && (
         <>
           <CustomSwitch
             name={`translations.${translationIndex}.is_default`}
@@ -204,7 +204,7 @@ const PrivacyExperienceTranslationForm = ({
             handleConfirm={() => setNewDefaultTranslation(translationIndex)}
           />
         </>
-      ) : null}
+      )}
 
       <CustomTextInput
         name={`translations.${translationIndex}.title`}
@@ -221,24 +221,24 @@ const PrivacyExperienceTranslationForm = ({
         variant="stacked"
       />
       {values.component === ComponentType.BANNER_AND_MODAL ||
-      values.component === ComponentType.TCF_OVERLAY ? (
-        <>
-          <CustomTextInput
-            name={`translations.${translationIndex}.banner_title`}
-            id={`translations.${translationIndex}.banner_title`}
-            label="Banner title (optional)"
-            tooltip="A separate title for the banner (defaults to main title)"
-            variant="stacked"
-          />
-          <CustomTextArea
-            name={`translations.${translationIndex}.banner_description`}
-            id={`translations.${translationIndex}.banner_description`}
-            label="Banner description (optional)"
-            tooltip="A separate description for the banner (defaults to main description)"
-            variant="stacked"
-          />
-        </>
-      ) : null}
+        (values.component === ComponentType.TCF_OVERLAY && (
+          <>
+            <CustomTextInput
+              name={`translations.${translationIndex}.banner_title`}
+              id={`translations.${translationIndex}.banner_title`}
+              label="Banner title (optional)"
+              tooltip="A separate title for the banner (defaults to main title)"
+              variant="stacked"
+            />
+            <CustomTextArea
+              name={`translations.${translationIndex}.banner_description`}
+              id={`translations.${translationIndex}.banner_description`}
+              label="Banner description (optional)"
+              tooltip="A separate description for the banner (defaults to main description)"
+              variant="stacked"
+            />
+          </>
+        ))}
       <CustomTextInput
         name={`translations.${translationIndex}.accept_button_label`}
         id={`translations.${translationIndex}.accept_button_label`}
@@ -253,49 +253,58 @@ const PrivacyExperienceTranslationForm = ({
         isRequired
         variant="stacked"
       />
-      {formConfig.privacy_preferences_link_label?.included ? (
+      {formConfig.privacy_preferences_link_label?.included && (
         <CustomTextInput
           name={`translations.${translationIndex}.privacy_preferences_link_label`}
           id={`translations.${translationIndex}.privacy_preferences_link_label`}
           label={`"Manage privacy preferences" button label`}
           variant="stacked"
           isRequired={formConfig.privacy_preferences_link_label?.required}
         />
-      ) : null}
-      {formConfig.save_button_label?.included ? (
+      )}
+      {formConfig.save_button_label?.included && (
         <CustomTextInput
           name={`translations.${translationIndex}.save_button_label`}
           id={`translations.${translationIndex}.save_button_label`}
           label={`"Save" button label`}
           variant="stacked"
           isRequired={formConfig.save_button_label.required}
         />
-      ) : null}
-      {formConfig.acknowledge_button_label?.included ? (
+      )}
+      {formConfig.acknowledge_button_label?.included && (
         <CustomTextInput
           name={`translations.${translationIndex}.acknowledge_button_label`}
           id={`translations.${translationIndex}.acknowledge_button_label`}
           label={`"Acknowledge" button label`}
           variant="stacked"
           isRequired={formConfig.acknowledge_button_label.required}
         />
-      ) : null}
-      {formConfig.privacy_policy_link_label?.included ? (
+      )}
+      {formConfig.privacy_policy_link_label?.included && (
         <CustomTextInput
           name={`translations.${translationIndex}.privacy_policy_link_label`}
           id={`translations.${translationIndex}.privacy_policy_link_label`}
           label="Privacy policy link label (optional)"
           variant="stacked"
         />
-      ) : null}
-      {formConfig.privacy_policy_url?.included ? (
+      )}
+      {formConfig.privacy_policy_url?.included && (
         <CustomTextInput
           name={`translations.${translationIndex}.privacy_policy_url`}
           id={`translations.${translationIndex}.privacy_policy_url`}
           label="Privacy policy link URL (optional)"
           variant="stacked"
         />
-      ) : null}
+      )}
+      {formConfig.modal_link_label?.included && (
+        <CustomTextInput
+          name={`translations.${translationIndex}.modal_link_label`}
+          id={`translations.${translationIndex}.modal_link_label`}
+          label="Trigger Link Label (optional)"
+          tooltip="Include text here if you would like the Fides CMP to manage the copy of the button that is included on your site to open the CMP."
+          variant="stacked"
+        />
+      )}
     </PrivacyExperienceConfigColumnLayout>
   );
 };

diff --git a/clients/admin-ui/src/features/privacy-experience/form/helpers.tsx b/clients/admin-ui/src/features/privacy-experience/form/helpers.tsx
@@ -121,6 +121,7 @@ export const getTranslationFormFields = (
       reject_button_label: { included: true, required: true },
       privacy_policy_link_label: { included: true },
       privacy_policy_url: { included: true },
+      modal_link_label: { included: true },
     };
   }
   if (component === ComponentType.MODAL) {
@@ -134,6 +135,7 @@ export const getTranslationFormFields = (
       privacy_policy_link_label: { included: true },
       privacy_policy_url: { included: true },
       privacy_preferences_link_label: { included: true },
+      modal_link_label: { included: true },
     };
   }
 
@@ -150,6 +152,7 @@ export const getTranslationFormFields = (
       privacy_policy_link_label: { included: true },
       privacy_policy_url: { included: true },
       privacy_preferences_link_label: { included: true, required: true },
+      modal_link_label: { included: true },
     };
   }
   // For TCF overlay / default
@@ -163,5 +166,6 @@ export const getTranslationFormFields = (
     privacy_policy_link_label: { included: true },
     privacy_policy_url: { included: true },
     privacy_preferences_link_label: { included: true, required: true },
+    modal_link_label: { included: true },
   };
 };
diff --git a/clients/admin-ui/src/features/privacy-experience/preview/helpers.ts b/clients/admin-ui/src/features/privacy-experience/preview/helpers.ts
@@ -16,6 +16,7 @@ const defaultTranslation: ExperienceTranslation = {
   description: "Description",
   privacy_policy_link_label: "",
   privacy_policy_url: "",
+  modal_link_label: "",
   privacy_preferences_link_label: "Privacy preferences",
   reject_button_label: "Reject All",
   save_button_label: "Save",
@@ -78,7 +79,9 @@ export const buildBaseConfig = (
   },
 });
 
-// fill in any empty strings in a translation with the defaults above
+/**
+ * fill in any empty strings in a translation with the defaults from `buildBaseConfig`
+ */
 export const translationOrDefault = (
   translation: ExperienceTranslation
 ): ExperienceTranslation => {

diff --git a/clients/admin-ui/src/features/privacy-experience/privacy-experience.slice.ts b/clients/admin-ui/src/features/privacy-experience/privacy-experience.slice.ts
@@ -37,7 +37,8 @@ type ExperienceConfigOptionalFields =
   | "banner_title"
   | "banner_description"
   | "privacy_policy_link_label"
-  | "privacy_policy_url";
+  | "privacy_policy_url"
+  | "modal_link_label";
 export type ExperienceConfigUpdateParams = Omit<
   Partial<ExperienceConfigUpdate>,
   ExperienceConfigOptionalFields
@@ -47,6 +48,7 @@ export type ExperienceConfigUpdateParams = Omit<
   banner_description?: string | null;
   privacy_policy_link_label?: string | null;
   privacy_policy_url?: string | null;
+  modal_link_label?: string | null;
 };
 type ExperienceConfigEnableDisableParams = ExperienceConfigDisabledUpdate & {
   id: string;
@@ -59,6 +61,7 @@ export type ExperienceConfigCreateParams = Omit<
   banner_description?: string | null;
   privacy_policy_link_label?: string | null;
   privacy_policy_url?: string | null;
+  modal_link_label?: string | null;
 };
 
 const privacyExperienceConfigApi = baseApi.injectEndpoints({

diff --git a/clients/admin-ui/src/types/api/models/ExperienceTranslation.ts b/clients/admin-ui/src/types/api/models/ExperienceTranslation.ts
@@ -57,4 +57,8 @@ export type ExperienceTranslation = {
    * Overall description - used for banner as well if applicable.  HTML descriptions are supported so links can be included.
    */
   description?: string;
+  /**
+   * Custom link/button trigger label
+   */
+  modal_link_label?: string;
 };
diff --git a/clients/admin-ui/src/types/api/models/ExperienceTranslationCreate.ts b/clients/admin-ui/src/types/api/models/ExperienceTranslationCreate.ts
@@ -51,4 +51,8 @@ export type ExperienceTranslationCreate = {
    */
   banner_description?: string;
   description: string;
+  /**
+   * Custom link/button trigger label
+   */
+  modal_link_label?: string;
 };
diff --git a/clients/fides-js/src/lib/i18n/locales/index.ts b/clients/fides-js/src/lib/i18n/locales/index.ts
@@ -6,7 +6,8 @@ import type { Locale, Messages, Language } from "..";
  *
  * NOTE: This process isn't automatic. To add a new static locale, follow these steps:
  * 1) Add the static import of the new ./{locale}/messages.json file
- * 2) Add the locale to the LOCALES object below
+ * 2) Add the locale to the STATIC_MESSAGES object below
+ * 3) Add the locale to the LOCALE_LANGUAGE_MAP object below
  */
 import ar from "./ar/messages.json";
 import bg from "./bg/messages.json";

diff --git a/clients/fides-js/src/lib/tcf/i18n/locales/index.ts b/clients/fides-js/src/lib/tcf/i18n/locales/index.ts
@@ -6,7 +6,7 @@ import type { Locale, Messages } from "../../../i18n";
  *
  * NOTE: This process isn't automatic. To add a new static locale, follow these steps:
  * 1) Add the static import of the new ./{locale}/messages-tcf.json file
- * 2) Add the locale to the LOCALES object below
+ * 2) Add the locale to the STATIC_MESSAGES_TCF object below
  */
 import ar from "./ar/messages-tcf.json";
 import bg from "./bg/messages-tcf.json";