wso2 · madurangasiriwardena · Oct 18, 2023 · Oct 16, 2023 · Oct 17, 2023 · Oct 17, 2023
diff --git a/.changeset/dry-cooks-add.md b/.changeset/dry-cooks-add.md
@@ -0,0 +1,6 @@
+---
+"@wso2is/myaccount": minor
+"@wso2is/console": minor
+---
+
+Add organization display name in branding
diff --git a/apps/console/src/extensions/i18n/models/extensions.ts b/apps/console/src/extensions/i18n/models/extensions.ts
@@ -1570,6 +1570,11 @@ export interface Extensions {
                             label: string;
                             placeholder: string;
                         };
+                        displayName: {
+                            hint: string;
+                            label: string;
+                            placeholder: string;
+                        };
                     };
                 };
             };

diff --git a/apps/console/src/extensions/i18n/resources/en-US/extensions.ts b/apps/console/src/extensions/i18n/resources/en-US/extensions.ts
@@ -1777,6 +1777,12 @@ export const extensions: Extensions = {
                 },
                 general: {
                     fields: {
+                        displayName: {
+                            hint: "Organization name that appears to users. If not set, {{ productName }} defaults " +
+                                "are used.",
+                            label: "Organization Display Name",
+                            placeholder: "Enter a display name"
+                        },
                         supportEmail: {
                             hint: "The email address that appears on error pages and other pages where " +
                                 "users would require support. If not set, {{ productName }} defaults are used.",

diff --git a/apps/console/src/extensions/i18n/resources/fr-FR/extensions.ts b/apps/console/src/extensions/i18n/resources/fr-FR/extensions.ts
@@ -1792,6 +1792,13 @@ export const extensions: Extensions = {
                 },
                 general: {
                     fields: {
+                        displayName: {
+                            hint:
+                                "Nom de l'organisation qui apparaît aux utilisateurs. S'il n'est pas défini, " +
+                                "les valeurs par défaut de {{ productName }} seront utilisées.",
+                            label: "Nom d’affichage de l’organisation",
+                            placeholder: "Entrer un nom d'affichage"
+                        },
                         supportEmail: {
                             hint:
                                 "TEmail qui apparaît sur les pages d'erreur et dans les endroits où une " +

diff --git a/apps/console/src/extensions/i18n/resources/si-LK/extensions.ts b/apps/console/src/extensions/i18n/resources/si-LK/extensions.ts
@@ -1752,6 +1752,13 @@ export const extensions: Extensions = {
                 },
                 general: {
                     fields: {
+                        displayName: {
+                            hint:
+                                "පරිශීලකයින්ට දිස්වන සංවිධානයේ නම." +
+                                "සකසා නොමැති නම්, {{ productName }} පෙරනිමිය භාවිතා වේ.",
+                            label: "සංවිධානයේ සංදර්ශක නම",
+                            placeholder: "සංදර්ශක නාමයක් ඇතුළත් කරන්න"
+                        },
                         supportEmail: {
                             hint:
                                 "දෝෂ පිටු සහ පාරිභෝගිකයින් සඳහා සහය අවශ්‍ය වන ස්ථානවල දිස්වන විද්‍යුත් තැපෑල." +

diff --git a/apps/console/src/features/branding/components/branding-preference-tabs.tsx b/apps/console/src/features/branding/components/branding-preference-tabs.tsx
@@ -190,6 +190,7 @@ export const BrandingPreferenceTabs: FunctionComponent<BrandingPreferenceTabsInt
                     onSubmit={ onSubmit }
                     initialValues={ {
                         organizationDetails: {
+                            displayName: brandingPreference.organizationDetails?.displayName,
                             supportEmail: brandingPreference.organizationDetails?.supportEmail
                         }
                     } }
@@ -199,6 +200,7 @@ export const BrandingPreferenceTabs: FunctionComponent<BrandingPreferenceTabsInt
                                 ...brandingPreference,
                                 organizationDetails: {
                                     ...brandingPreference.organizationDetails,
+                                    displayName: values.organizationDetails.displayName,
                                     supportEmail: values.organizationDetails.supportEmail
                                 }
                             })

diff --git a/apps/console/src/features/branding/components/general/general-details-form.tsx b/apps/console/src/features/branding/components/general/general-details-form.tsx
@@ -92,6 +92,7 @@ export const GeneralDetailsForm: FunctionComponent<GeneralDetailsFormPropsInterf
 
     const productName: string = useSelector((state: AppState) => state.config.ui.productName);
 
+    const [ displayName, setDisplayName ] = useState<string>(initialValues.organizationDetails.displayName);
     const [ supportEmail, setSupportEmail ] = useState<string>(initialValues.organizationDetails.supportEmail);
 
     /**
@@ -103,10 +104,11 @@ export const GeneralDetailsForm: FunctionComponent<GeneralDetailsFormPropsInterf
             ...initialValues,
             organizationDetails: {
                 ...initialValues.organizationDetails,
+                displayName,
                 supportEmail
             }
         });
-    }, [ supportEmail ]);
+    }, [ supportEmail, displayName ]);
 
     if (isLoading) {
         return (
@@ -135,6 +137,28 @@ export const GeneralDetailsForm: FunctionComponent<GeneralDetailsFormPropsInterf
             onSubmit={ onSubmit }
             initialValues={ initialValues }
         >
+            <Field.Input
+                ariaLabel="Display name input field"
+                inputType="default"
+                name="organizationDetails.displayName"
+                label={ t("extensions:develop.branding.forms.general.fields.displayName.label") }
+                placeholder={ t("extensions:develop.branding.forms.general.fields.displayName.placeholder") }
+                hint={
+                    t("extensions:develop.branding.forms.general.fields.displayName.hint", { productName })
+                }
+                required={ false }
+                readOnly={ readOnly }
+                value={ initialValues.organizationDetails.displayName }
+                maxLength={
+                    BrandingPreferencesConstants.GENERAL_DETAILS_FORM_FIELD_CONSTRAINTS.DISPLAY_NAME_MAX_LENGTH
+                }
+                minLength={
+                    BrandingPreferencesConstants.GENERAL_DETAILS_FORM_FIELD_CONSTRAINTS.DISPLAY_NAME_MIN_LENGTH
+                }
+                width={ 16 }
+                listen={ (value: string) => setDisplayName(value) }
+                data-componentid={ `${componentId}-organization-display-name` }
+            />
             <Field.Input
                 ariaLabel="Contact email input field"
                 inputType="email"

diff --git a/apps/console/src/features/branding/components/preview/email-template-screen-skeleton.tsx b/apps/console/src/features/branding/components/preview/email-template-screen-skeleton.tsx
@@ -142,7 +142,7 @@ export const EmailTemplateScreenSkeleton: FunctionComponent<EmailTemplateScreenS
                             }
                         }
                     },
-                    "organization-name": tenantDomain,
+                    "organization-name": brandingPreference.organizationDetails.displayName ?? tenantDomain,
                     "user-name": userDisplayName
                 })
             ) }

diff --git a/apps/console/src/features/branding/constants/branding-preferences-constants.ts b/apps/console/src/features/branding/constants/branding-preferences-constants.ts
@@ -112,8 +112,12 @@ export class BrandingPreferencesConstants {
      */
     public static readonly GENERAL_DETAILS_FORM_FIELD_CONSTRAINTS: {
         SUPPORT_EMAIL_MAX_LENGTH: number,
-        SUPPORT_EMAIL_MIN_LENGTH: number
+        SUPPORT_EMAIL_MIN_LENGTH: number,
+        DISPLAY_NAME_MAX_LENGTH: number,
+        DISPLAY_NAME_MIN_LENGTH: number
     } = {
+        DISPLAY_NAME_MAX_LENGTH: 100,
+        DISPLAY_NAME_MIN_LENGTH: 3,
         SUPPORT_EMAIL_MAX_LENGTH: 100,
         SUPPORT_EMAIL_MIN_LENGTH: 3
     };
@@ -216,6 +220,7 @@ export class BrandingPreferencesConstants {
             }
         },
         organizationDetails: {
+            displayName: "",
             supportEmail: ""
         },
         theme: {

diff --git a/apps/console/src/features/branding/models/branding-preferences.ts b/apps/console/src/features/branding/models/branding-preferences.ts
@@ -101,6 +101,10 @@ export interface BrandingPreferenceOrganizationDetailsInterface {
      * Support email to be shown for Org members.
      */
     supportEmail: string;
+    /**
+     * Display name to be shown for Org members.
+     */
+    displayName: string;
 }
 
 /**

diff --git a/apps/console/src/features/branding/pages/branding.tsx b/apps/console/src/features/branding/pages/branding.tsx
@@ -289,6 +289,12 @@ const BrandingPage: FunctionComponent<BrandingPageInterface> = (
                 eventPublisher.publish("organization-branding-configure-site-title");
             }
 
+            // If a display name is updated, publish an event.
+            if (isEmpty(brandingPreference.organizationDetails.displayName)
+                && !isEmpty(values.organizationDetails?.displayName)) {
+                eventPublisher.publish("organization-branding-configure-display-name");
+            }
+
             // When a theme is selected for the first time or switched, publish an event.
             if (isEmpty(brandingPreference.theme?.activeTheme)) {
                 eventPublisher.publish(`organization-branding-configure-${

diff --git a/apps/console/src/features/email-management/utils/email-customization-utils.ts b/apps/console/src/features/email-management/utils/email-customization-utils.ts
@@ -81,7 +81,8 @@ export class EmailCustomizationUtils {
         const {
             organizationDetails: {
                 copyrightText,
-                supportEmail
+                supportEmail,
+                displayName
             },
             theme
         } = BrandingPreferenceUtils.migrateThemePreference(brandingConfigs, {
@@ -114,7 +115,7 @@ export class EmailCustomizationUtils {
             .replace(/{{organization.font}}/g, currentTheme.typography.font.fontFamily)
             .replace(/{{organization.font.color}}/g, currentTheme.colors.text.primary)
             .replace(/{{organization.button.font.color}}/g, currentTheme.buttons.primary.base.font.color)
-            .replace(/{{organization-name}}/g, organizationName)
+            .replace(/{{organization-name}}/g, displayName ?? organizationName)
             .replace(/{{organization.logo.img}}/g, currentTheme.images.logo.imgURL || defaultOrgLogo)
             .replace(/{{organization.logo.altText}}/g, currentTheme.images.logo.altText)
             .replace(/{{organization.copyright.text}}/g,

diff --git a/apps/myaccount/src/models/branding-preferences.ts b/apps/myaccount/src/models/branding-preferences.ts
@@ -101,6 +101,10 @@ export interface BrandingPreferenceOrganizationDetailsInterface {
      * Support email to be shown for Org members.
      */
     supportEmail: string;
+    /**
+     * Display name to be shown for Org members.
+     */
+    displayName: string;
 }
 
 /**
-Original file line number
+Diff line change
@@ Expand Up @@
                                 }
                             }
                         },
-                        "organization-name": tenantDomain,
+                        "organization-name": brandingPreference.organizationDetails.displayName ?? tenantDomain,
                         "user-name": userDisplayName
                     })
                 ) }
@@ Expand Down @@