From a85e3cf00c7b5fd36bb17bb011ed6d10c4d850d5 Mon Sep 17 00:00:00 2001
From: Patrick Latter <73612854+palatter@users.noreply.github.com>
Date: Tue, 4 Mar 2025 11:29:40 -0800
Subject: [PATCH] Port local storage for display name from CallwithChat to Chat
 sample (#5681)

* Use a randomized default name

* Save name to local storage instead of using random name

* Change files
---
 ...eact-45da9f59-d5f0-420c-a677-f6df8aa71cfd.json |  9 +++++++++
 ...eact-45da9f59-d5f0-420c-a677-f6df8aa71cfd.json |  9 +++++++++
 samples/Chat/src/app/ConfigurationScreen.tsx      | 15 +++++++++++++++
 samples/Chat/src/app/utils/localStorage.ts        | 13 +++++++++++++
 4 files changed, 46 insertions(+)
 create mode 100644 change-beta/@azure-communication-react-45da9f59-d5f0-420c-a677-f6df8aa71cfd.json
 create mode 100644 change/@azure-communication-react-45da9f59-d5f0-420c-a677-f6df8aa71cfd.json

diff --git a/change-beta/@azure-communication-react-45da9f59-d5f0-420c-a677-f6df8aa71cfd.json b/change-beta/@azure-communication-react-45da9f59-d5f0-420c-a677-f6df8aa71cfd.json
new file mode 100644
index 00000000000..e249463c99a
--- /dev/null
+++ b/change-beta/@azure-communication-react-45da9f59-d5f0-420c-a677-f6df8aa71cfd.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "",
+  "comment": "Port saving display name to local storage from CallwithChat Sample to Chat Sample",
+  "packageName": "@azure/communication-react",
+  "email": "palatter@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-45da9f59-d5f0-420c-a677-f6df8aa71cfd.json b/change/@azure-communication-react-45da9f59-d5f0-420c-a677-f6df8aa71cfd.json
new file mode 100644
index 00000000000..e249463c99a
--- /dev/null
+++ b/change/@azure-communication-react-45da9f59-d5f0-420c-a677-f6df8aa71cfd.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "",
+  "comment": "Port saving display name to local storage from CallwithChat Sample to Chat Sample",
+  "packageName": "@azure/communication-react",
+  "email": "palatter@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/samples/Chat/src/app/ConfigurationScreen.tsx b/samples/Chat/src/app/ConfigurationScreen.tsx
index e82801441fc..aa99db97b34 100644
--- a/samples/Chat/src/app/ConfigurationScreen.tsx
+++ b/samples/Chat/src/app/ConfigurationScreen.tsx
@@ -44,6 +44,11 @@ import { getEndpointUrl } from './utils/getEndpointUrl';
 import { refreshToken } from './utils/refreshToken';
 /* @conditional-compile-remove(rich-text-editor-composite-support) */
 import { RichTextEditorToggle } from './RichTextEditorToggle';
+import {
+  getDisplayNameFromLocalStorage,
+  localStorageAvailable,
+  saveDisplayNameToLocalStorage
+} from './utils/localStorage';
 
 // These props are set by the caller of ConfigurationScreen in the JSX and not found in context
 export interface ConfigurationScreenProps {
@@ -94,6 +99,14 @@ export default (props: ConfigurationScreenProps): JSX.Element => {
   const theme = useTheme();
   const { joinChatHandler, setToken, setUserId, setDisplayName, setThreadId, setEndpointUrl } = props;
 
+  useEffect(() => {
+    // Get display name from local storage if available
+    const defaultDisplayName = localStorageAvailable ? getDisplayNameFromLocalStorage() : null;
+    if (defaultDisplayName) {
+      setName(defaultDisplayName);
+    }
+  }, []);
+
   // Used when new user is being registered.
   const setupAndJoinChatThreadWithNewUser = useCallback(() => {
     const internalSetupAndJoinChatThread = async (): Promise<void> => {
@@ -183,6 +196,7 @@ export default (props: ConfigurationScreenProps): JSX.Element => {
     if (!name) {
       setEmptyWarning(true);
     } else {
+      saveDisplayNameToLocalStorage(name);
       setEmptyWarning(false);
       setDisableJoinChatButton(true);
       setConfigurationScreenState(CONFIGURATIONSCREEN_SHOWING_SPINNER_INITIALIZE_CHAT);
@@ -252,6 +266,7 @@ export default (props: ConfigurationScreenProps): JSX.Element => {
             </Stack>
           </FocusZone>
           <DisplayNameField
+            defaultName={name}
             setName={setName}
             setEmptyWarning={setEmptyWarning}
             validateName={validateName}
diff --git a/samples/Chat/src/app/utils/localStorage.ts b/samples/Chat/src/app/utils/localStorage.ts
index 3ebf71e83fd..fce09718ada 100644
--- a/samples/Chat/src/app/utils/localStorage.ts
+++ b/samples/Chat/src/app/utils/localStorage.ts
@@ -4,9 +4,22 @@
 export const localStorageAvailable = typeof Storage !== 'undefined';
 
 export enum LocalStorageKeys {
+  DisplayName = 'DisplayName',
   Theme = 'AzureCommunicationUI_Theme'
 }
 
+/**
+ * Get display name from local storage.
+ */
+export const getDisplayNameFromLocalStorage = (): string | null =>
+  window.localStorage.getItem(LocalStorageKeys.DisplayName);
+
+/**
+ * Save display name into local storage.
+ */
+export const saveDisplayNameToLocalStorage = (displayName: string): void =>
+  window.localStorage.setItem(LocalStorageKeys.DisplayName, displayName);
+
 /**
  * Get theme from local storage.
  */