Custom data model to allow changing display name of call queues (#3148)

mgamis-msft · dmceachernmsft · web-flow · commit 439da51ff9cc · 2023-06-13T01:42:00.000-07:00
* Added onFetchProfile to CommonCallAdapterOptions.

* Change files

* Duplicate change files for beta

* Change files

* Duplicate change files for beta

* Fix restricted import

* api update

* Fixed createProfileStateModifier

* revert onFetchProfile in CallScreen.tsx

---------

Co-authored-by: Donald McEachern &lt;94866715+dmceachernmsft@users.noreply.github.com&gt;
diff --git a/change-beta/@azure-communication-react-2f52c659-d28e-4e3c-9d1e-359cd3737b90.json b/change-beta/@azure-communication-react-2f52c659-d28e-4e3c-9d1e-359cd3737b90.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Added onFetchProfile to CommonCallAdapterOptions to allow displayName changes when using AzureCommunicationCallAdapter",
+  "packageName": "@azure/communication-react",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change-beta/@azure-communication-react-d411729c-7346-4493-9d6b-c7d02be035eb.json b/change-beta/@azure-communication-react-d411729c-7346-4493-9d6b-c7d02be035eb.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Added onFetchProfile to CommonCallAdapterOptions.",
+  "packageName": "@azure/communication-react",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-2f52c659-d28e-4e3c-9d1e-359cd3737b90.json b/change/@azure-communication-react-2f52c659-d28e-4e3c-9d1e-359cd3737b90.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Added onFetchProfile to CommonCallAdapterOptions to allow displayName changes when using AzureCommunicationCallAdapter",
+  "packageName": "@azure/communication-react",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-d411729c-7346-4493-9d6b-c7d02be035eb.json b/change/@azure-communication-react-d411729c-7346-4493-9d6b-c7d02be035eb.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Added onFetchProfile to CommonCallAdapterOptions.",
+  "packageName": "@azure/communication-react",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/communication-react/review/beta/communication-react.api.md b/packages/communication-react/review/beta/communication-react.api.md
@@ -1596,6 +1596,7 @@ export interface CommonCallAdapter extends AdapterState<CallAdapterState>, Dispo
 // @beta
 export type CommonCallAdapterOptions = {
     videoBackgroundImages?: VideoBackgroundImage[];
+    onFetchProfile?: OnFetchProfileCallback;
 };
 
 // @public
@@ -1992,7 +1993,7 @@ export const createStatefulChatClient: (args: StatefulChatClientArgs, options?:
 export const createTeamsCallAdapter: ({ userId, credential, locator, options }: TeamsCallAdapterArgs) => Promise<TeamsCallAdapter>;
 
 // @beta
-export const createTeamsCallAdapterFromClient: (callClient: StatefulCallClient, callAgent: TeamsCallAgent, locator: CallAdapterLocator, options?: TeamsAdapterOptions | undefined) => Promise<TeamsCallAdapter>;
+export const createTeamsCallAdapterFromClient: (callClient: StatefulCallClient, callAgent: TeamsCallAgent, locator: CallAdapterLocator, options?: CommonCallAdapterOptions | undefined) => Promise<TeamsCallAdapter>;
 
 // @public
 export interface CreateVideoStreamViewResult {
@@ -3440,9 +3441,7 @@ export interface SystemMessageCommon extends MessageCommon {
 }
 
 // @beta
-export type TeamsAdapterOptions = {
-    onFetchProfile?: OnFetchProfileCallback;
-} & CommonCallAdapterOptions;
+export type TeamsAdapterOptions = CommonCallAdapterOptions;
 
 // @beta
 export interface TeamsCallAdapter extends CommonCallAdapter {
diff --git a/packages/react-components/src/localization/locales/ar-SA/strings.json b/packages/react-components/src/localization/locales/ar-SA/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "الصفحة السابقة",
     "rightNavButtonAriaLabel": "الصفحة التالية"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/de-DE/strings.json b/packages/react-components/src/localization/locales/de-DE/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "Vorherige Seite",
     "rightNavButtonAriaLabel": "Nächste Seite"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/es-ES/strings.json b/packages/react-components/src/localization/locales/es-ES/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "página anterior",
     "rightNavButtonAriaLabel": "página siguiente"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/fi-FI/strings.json b/packages/react-components/src/localization/locales/fi-FI/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "edellinen sivu",
     "rightNavButtonAriaLabel": "seuraava sivu"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/fr-FR/strings.json b/packages/react-components/src/localization/locales/fr-FR/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "page précédente",
     "rightNavButtonAriaLabel": "page suivante"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/he-IL/strings.json b/packages/react-components/src/localization/locales/he-IL/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "הדף הקודם",
     "rightNavButtonAriaLabel": "הדף הבא"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/it-IT/strings.json b/packages/react-components/src/localization/locales/it-IT/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "Pagina precedente",
     "rightNavButtonAriaLabel": "Pagina successiva"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/ja-JP/strings.json b/packages/react-components/src/localization/locales/ja-JP/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "前のページ",
     "rightNavButtonAriaLabel": "次のページ"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/ko-KR/strings.json b/packages/react-components/src/localization/locales/ko-KR/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "이전 페이지",
     "rightNavButtonAriaLabel": "다음 페이지"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/nb-NO/strings.json b/packages/react-components/src/localization/locales/nb-NO/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "forrige side",
     "rightNavButtonAriaLabel": "neste side"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/nl-NL/strings.json b/packages/react-components/src/localization/locales/nl-NL/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "vorige pagina",
     "rightNavButtonAriaLabel": "volgende pagina"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/pl-PL/strings.json b/packages/react-components/src/localization/locales/pl-PL/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "poprzednia strona",
     "rightNavButtonAriaLabel": "następna strona"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/pt-BR/strings.json b/packages/react-components/src/localization/locales/pt-BR/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "página anterior",
     "rightNavButtonAriaLabel": "próxima página"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/ru-RU/strings.json b/packages/react-components/src/localization/locales/ru-RU/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "предыдущая страница",
     "rightNavButtonAriaLabel": "следующая страница"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/sv-SE/strings.json b/packages/react-components/src/localization/locales/sv-SE/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "föregående sida",
     "rightNavButtonAriaLabel": "nästa sida"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/tr-TR/strings.json b/packages/react-components/src/localization/locales/tr-TR/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "önceki sayfa",
     "rightNavButtonAriaLabel": "sonraki sayfa"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/zh-CN/strings.json b/packages/react-components/src/localization/locales/zh-CN/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "上一页",
     "rightNavButtonAriaLabel": "下一页"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/zh-TW/strings.json b/packages/react-components/src/localization/locales/zh-TW/strings.json
@@ -329,4 +329,4 @@
     "leftNavButtonAriaLabel": "上一頁",
     "rightNavButtonAriaLabel": "下一頁"
   }
-}
+}
diff --git a/packages/react-composites/review/beta/react-composites.api.md b/packages/react-composites/review/beta/react-composites.api.md
@@ -984,6 +984,7 @@ export interface CommonCallAdapter extends AdapterState<CallAdapterState>, Dispo
 // @beta
 export type CommonCallAdapterOptions = {
     videoBackgroundImages?: VideoBackgroundImage[];
+    onFetchProfile?: OnFetchProfileCallback;
 };
 
 // @public
@@ -1121,7 +1122,7 @@ export function createAzureCommunicationChatAdapterFromClient(chatClient: Statef
 export const createTeamsCallAdapter: ({ userId, credential, locator, options }: TeamsCallAdapterArgs) => Promise<TeamsCallAdapter>;
 
 // @beta
-export const createTeamsCallAdapterFromClient: (callClient: StatefulCallClient, callAgent: TeamsCallAgent, locator: CallAdapterLocator, options?: TeamsAdapterOptions | undefined) => Promise<TeamsCallAdapter>;
+export const createTeamsCallAdapterFromClient: (callClient: StatefulCallClient, callAgent: TeamsCallAgent, locator: CallAdapterLocator, options?: CommonCallAdapterOptions | undefined) => Promise<TeamsCallAdapter>;
 
 // @beta
 type CustomCallControlButtonCallback = (args: CustomCallControlButtonCallbackArgs) => CustomCallWithChatControlButtonProps;
@@ -1476,9 +1477,7 @@ export interface RemoteVideoTileMenuOptions {
 }
 
 // @beta
-export type TeamsAdapterOptions = {
-    onFetchProfile?: OnFetchProfileCallback;
-} & CommonCallAdapterOptions;
+export type TeamsAdapterOptions = CommonCallAdapterOptions;
 
 // @beta
 export interface TeamsCallAdapter extends CommonCallAdapter {
diff --git a/packages/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.ts b/packages/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.ts
@@ -1076,6 +1076,12 @@ export type CommonCallAdapterOptions = {
    * Default set of background images for background image picker.
    */
   videoBackgroundImages?: VideoBackgroundImage[];
+  /**
+   * Use this to fetch profile information which will override data in {@link CallAdapterState} like display name
+   * The onFetchProfile is fetch-and-forget one time action for each user, once a user profile is updated, the value will be cached
+   * and would not be updated again within the lifecycle of adapter.
+   */
+  onFetchProfile?: OnFetchProfileCallback;
 };
 
 /**
@@ -1123,14 +1129,7 @@ export type AzureCommunicationCallAdapterArgs = {
  *
  * @beta
  */
-export type TeamsAdapterOptions = {
-  /**
-   * Use this to fetch profile information which will override data in {@link CallAdapterState} like display name
-   * The onFetchProfile is fetch-and-forget one time action for each user, once a user profile is updated, the value will be cached
-   * and would not be updated again within the lifecycle of adapter.
-   */
-  onFetchProfile?: OnFetchProfileCallback;
-} & CommonCallAdapterOptions;
+export type TeamsAdapterOptions = CommonCallAdapterOptions;
 
 /**
  * Arguments for creating the Azure Communication Services implementation of {@link TeamsCallAdapter}.
diff --git a/packages/react-composites/src/composites/CallComposite/adapter/OnFetchProfileCallback.ts b/packages/react-composites/src/composites/CallComposite/adapter/OnFetchProfileCallback.ts
@@ -47,8 +47,8 @@ export const createProfileStateModifier = (
         const profile = await onFetchProfile(key, { displayName: originalParticipants[key].displayName });
         if (profile?.displayName && originalParticipants[key].displayName !== profile?.displayName) {
           cachedDisplayName[key] = profile?.displayName;
+          shouldNotifyUpdates = true;
         }
-        shouldNotifyUpdates = true;
       }
       // notify update only when there is a change, which most likely will trigger modifier and setState again
       shouldNotifyUpdates && notifyUpdate();
diff --git a/packages/react-composites/src/composites/localization/locales/ar-SA/strings.json b/packages/react-composites/src/composites/localization/locales/ar-SA/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "عرض لوحة الطلب",
     "dtmfDialpadPlaceholderText": "أدخل عدداً"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/de-DE/strings.json b/packages/react-composites/src/composites/localization/locales/de-DE/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Wähltastatur anzeigen",
     "dtmfDialpadPlaceholderText": "Nummer eingeben"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/en-GB/strings.json b/packages/react-composites/src/composites/localization/locales/en-GB/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Show dialpad",
     "dtmfDialpadPlaceholderText": "Enter number"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/es-ES/strings.json b/packages/react-composites/src/composites/localization/locales/es-ES/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Mostrar teclado de marcado",
     "dtmfDialpadPlaceholderText": "Introducir número"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/fi-FI/strings.json b/packages/react-composites/src/composites/localization/locales/fi-FI/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Näytä valintapaneeli",
     "dtmfDialpadPlaceholderText": "Syötä numero"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/fr-FR/strings.json b/packages/react-composites/src/composites/localization/locales/fr-FR/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Afficher le pavé numérique",
     "dtmfDialpadPlaceholderText": "Saisir un numéro"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/he-IL/strings.json b/packages/react-composites/src/composites/localization/locales/he-IL/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "הצג לוח חיוג",
     "dtmfDialpadPlaceholderText": "הזן מספר"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/it-IT/strings.json b/packages/react-composites/src/composites/localization/locales/it-IT/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Mostra tastiera",
     "dtmfDialpadPlaceholderText": "Immetti il numero"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/ja-JP/strings.json b/packages/react-composites/src/composites/localization/locales/ja-JP/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "ダイヤルパッドを表示",
     "dtmfDialpadPlaceholderText": "番号を入力してください"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/ko-KR/strings.json b/packages/react-composites/src/composites/localization/locales/ko-KR/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "다이얼패드 표시",
     "dtmfDialpadPlaceholderText": "번호 입력"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/nb-NO/strings.json b/packages/react-composites/src/composites/localization/locales/nb-NO/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Vis numerisk tastatur",
     "dtmfDialpadPlaceholderText": "Skriv inn nummer"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/nl-NL/strings.json b/packages/react-composites/src/composites/localization/locales/nl-NL/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Toetsenblok weergeven",
     "dtmfDialpadPlaceholderText": "Nummer invoeren"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/pl-PL/strings.json b/packages/react-composites/src/composites/localization/locales/pl-PL/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Pokaż klawiaturę numeryczną",
     "dtmfDialpadPlaceholderText": "Wprowadź numer"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/pt-BR/strings.json b/packages/react-composites/src/composites/localization/locales/pt-BR/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Mostrar teclado de discagem",
     "dtmfDialpadPlaceholderText": "Digite o número"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/ru-RU/strings.json b/packages/react-composites/src/composites/localization/locales/ru-RU/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Показать панель набора номера",
     "dtmfDialpadPlaceholderText": "Введите номер"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/sv-SE/strings.json b/packages/react-composites/src/composites/localization/locales/sv-SE/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Visa knappsats",
     "dtmfDialpadPlaceholderText": "Ange nummer"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/tr-TR/strings.json b/packages/react-composites/src/composites/localization/locales/tr-TR/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "Tuş takımını göster",
     "dtmfDialpadPlaceholderText": "Numara girin"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/zh-CN/strings.json b/packages/react-composites/src/composites/localization/locales/zh-CN/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "显示拨号盘",
     "dtmfDialpadPlaceholderText": "输入号码"
   }
-}
+}
diff --git a/packages/react-composites/src/composites/localization/locales/zh-TW/strings.json b/packages/react-composites/src/composites/localization/locales/zh-TW/strings.json
@@ -196,4 +196,4 @@
     "openDtmfDialpadLabel": "顯示撥號盤",
     "dtmfDialpadPlaceholderText": "輸入號碼"
   }
-}
+}

Original file line number	Diff line number	Diff line change
`@@ -329,4 +329,4 @@`
`329`	`329`	`"leftNavButtonAriaLabel": "الصفحة السابقة",`
`330`	`330`	`"rightNavButtonAriaLabel": "الصفحة التالية"`
`331`	`331`	`}`
`332`		`-}`
	`332`	`+}`