CHI-3768, CHI-3773: Fix Aselo webchat participant names

aselo-webchat-react-app/package.json

@@ -84,7 +84,7 @@
   "scripts": {
     "preinstall": "cd ../lambdas/packages/hrm-form-definitions && npm ci && npm run build && cd ../hrm-types && npm ci && npm run build",
     "start": "react-app-rewired start",
-    "start:as_dev": "cross-env REACT_APP_CONFIG_URL='http://localhost:9090/as/development.json' run-p dev:merge-configs dev:local-config-server start",
+    "start:as_dev": "cross-env REACT_APP_CONFIG_URL='http://localhost:9090/as/development.json' REACT_APP_FORM_DEFINITIONS_BASE_URL='http://localhost:8091' run-p dev:merge-configs dev:local-config-server dev:local-form-definition-server start",
     "build": "react-app-rewired build",
     "lint": "eslint --ext js --ext jsx --ext ts --ext tsx src/",
     "lint:fix": "npm run lint -- --fix",
@@ -97,7 +97,8 @@
     "eject": "react-app-rewired eject",
     "test:e2e": "cypress open",
     "dev:merge-configs": "npm run mergeConfigs development as",
-    "dev:local-config-server": "npx http-server ./mergedConfigs -p 9090 --cors -c-1"
+    "dev:local-config-server": "npx http-server ./mergedConfigs -p 9090 --cors -c-1",
+    "dev:local-form-definition-server": "npx http-server ../lambdas/packages/hrm-form-definitions/form-definitions -p 8091 --cors -c-1"
   },
   "browserslist": [
     ">0.2%",

aselo-webchat-react-app/src/components/MessageBubble.tsx

@@ -37,6 +37,8 @@ import {
   readStatusStyles,
   bubbleAndAvatarContainerStyles,
 } from './styles/MessageBubble.styles';
+import { selectCurrentTranslations } from '../store/config.reducer';
+import { localizeKey } from '../localization/localizeKey';
 
 const doubleDigit = (number: number) => `${number < 10 ? 0 : ''}${number}`;
 
@@ -56,12 +58,12 @@ export const MessageBubble = ({
 }) => {
   const [read, setRead] = useState(false);
   const [isMouseDown, setIsMouseDown] = useState(false);
-  const { conversationsClient, participants, fileAttachmentConfig, participantNames } = useSelector(
+  const { conversationsClient, participants, fileAttachmentConfig, currentTranslations } = useSelector(
     (state: AppState) => ({
       conversationsClient: state.chat.conversationsClient,
       participants: state.chat.participants,
       fileAttachmentConfig: state.config.fileAttachment,
-      participantNames: state.chat.participantNames,
+      currentTranslations: selectCurrentTranslations(state),
     }),
   );
   const messageRef = useRef<HTMLDivElement>(null);
@@ -129,7 +131,15 @@ export const MessageBubble = ({
   };
 
   // const author = users?.find((u) => u.identity === message.author)?.friendlyName || message.author;
-  const name = participantNames ? participantNames[message.participantSid] : '';
+  let name: string;
+  if (belongsToCurrentUser) {
+    name = 'MessagePhase-MessageBubble-OwnMessageSenderName';
+  } else if (message.participantSid) {
+    name = 'MessagePhase-MessageBubble-OtherParticipantMessageSenderName';
+  } else {
+    name = message.author || '';
+  }
+  const translatedName = localizeKey(currentTranslations)(name);
 
   return (
     <Box
@@ -151,10 +161,10 @@ export const MessageBubble = ({
         )}
         <Box {...getInnerContainerStyles(belongsToCurrentUser)}>
           <Flex hAlignContent="between" width="100%" vAlignContent="center" marginBottom="space20">
-            <Text {...authorStyles} as="p" aria-hidden style={{ textOverflow: 'ellipsis' }} title={name}>
-              {name}
+            <Text {...authorStyles} as="p" aria-hidden style={{ textOverflow: 'ellipsis' }} title={translatedName}>
+              {translatedName}
             </Text>
-            <ScreenReaderOnly as="p">{belongsToCurrentUser ? 'You sent at' : `${name} sent at`}</ScreenReaderOnly>
+            <ScreenReaderOnly as="p">{`${translatedName} sent at`}</ScreenReaderOnly>
             <Text {...timeStampStyles} as="p">
               {`${doubleDigit(message.dateCreated.getHours())}:${doubleDigit(message.dateCreated.getMinutes())}`}
             </Text>

aselo-webchat-react-app/src/components/__tests__/MessageBubble.test.tsx

@@ -37,7 +37,16 @@ const user2 = {
   sid: '62563cwqdc213cec23',
 };
 const defaultState = {
-  config: { fileAttachment: fileAttachmentConfig },
+  config: {
+    fileAttachment: fileAttachmentConfig,
+    translations: {
+      'en-US': {
+        'MessagePhase-MessageBubble-OwnMessageSenderName': 'You',
+        'MessagePhase-MessageBubble-OtherParticipantMessageSenderName': 'Counsellor',
+      },
+    },
+    defaultLocale: 'en-US',
+  },
   chat: {
     conversationsClient: { user: user1 },
     participants: [{ identity: user1.identity }, { identity: user2.identity }],
@@ -115,7 +124,7 @@ describe('Message Bubble', () => {
       />,
     );
 
-    expect(queryByText(user1.friendlyName)).toBeInTheDocument();
+    expect(queryByText('You')).toBeInTheDocument();
   });
 
   it('renders the message body', () => {
@@ -172,7 +181,7 @@ describe('Message Bubble', () => {
       />,
     );
 
-    expect(getByText(`${user2.friendlyName} sent at`)).toBeInTheDocument();
+    expect(getByText('Counsellor sent at')).toBeInTheDocument();
   });
 
   it("renders 'is read' and icon when message read by other participant", () => {

aselo-webchat-react-app/src/services/configService.ts

@@ -25,7 +25,10 @@ export const getDefinitionVersion = async ({
 }): Promise<{
   preEngagementForm: PreEngagementForm;
 }> => {
-  const formDefinitionsBaseUrl = buildFormDefinitionsBaseUrlGetter({ environment })(definitionVersionId);
+  const formDefinitionsBaseUrl = buildFormDefinitionsBaseUrlGetter({
+    environment,
+    configuredFormDefinitionsBaseUrl: process.env.REACT_APP_FORM_DEFINITIONS_BASE_URL,
+  })(definitionVersionId);
   // eslint-disable-next-line
   const definition = await loadWebchatDefinition(formDefinitionsBaseUrl);
   return definition;

aselo-webchat-react-app/src/sessionDataHandler.ts

@@ -19,9 +19,10 @@ import { LocalStorageUtil } from './utils/LocalStorage';
 import { generateMixPanelHeaders, generateSecurityHeaders } from './utils/generateHeaders';
 import { ConfigState } from './store/definitions';
 import { store } from './store/store';
+import { localizeKey } from './localization/localizeKey';
 
 export const LOCALSTORAGE_SESSION_ITEM_ID = 'TWILIO_WEBCHAT_WIDGET';
-const CUSTOMER_DEFAULT_NAME = 'Customer';
+const CUSTOMER_DEFAULT_NAME_KEY = 'Conversation-Participants-CustomerDefaultName';
 
 type SessionDataStorage = TokenResponse & {
   loginTimestamp: string | null;
@@ -189,19 +190,25 @@ class SessionDataHandler {
     });
 
     try {
+      const { config } = store.getState();
       const payload: InitWebchatAPIPayload = {
         DeploymentKey: this.getDeploymentKey(),
-        CustomerFriendlyName: (formData?.friendlyName as string) || CUSTOMER_DEFAULT_NAME,
+        CustomerFriendlyName: (() => {
+          const localizedName = localizeKey(config.translations[config.currentLocale ?? config.defaultLocale])(
+            CUSTOMER_DEFAULT_NAME_KEY,
+          );
+          return (
+            (formData?.friendlyName as string) ||
+            (localizedName === CUSTOMER_DEFAULT_NAME_KEY ? 'Anonymous' : localizedName)
+          );
+        })(),
         PreEngagementData: JSON.stringify(formData),
       };
 
       if (customerIdentity) {
         payload.Identity = customerIdentity;
       }
-      newTokenData = await contactBackend(store.getState().config)<TokenResponse>(
-        '/webchatAuthentication/initWebchat',
-        payload,
-      );
+      newTokenData = await contactBackend(config)<TokenResponse>('/webchatAuthentication/initWebchat', payload);
     } catch (e) {
       logger.error('No results from server');
       throw Error('No results from server');

aselo-webchat-react-app/translationsSrc/en.json

@@ -1,9 +1,12 @@
 {
+  "Conversation-Participants-CustomerDefaultName": "Anonymous",
   "Header-CloseChatButtons-EndChatButtonLabel": "End Chat",
   "Header-CloseChatButtons-EndChatConfirmDialogMessageFromChat": "End the current chat? Your messages will be lost.",
   "Header-CloseChatButtons-EndChatConfirmDialogMessageFromPreEngagement": "Abandon the current chat?",
   "Header-CloseChatButtons-QuickExitButtonLabel": "Quick Exit",
   "Header-CloseChatButtons-QuickExitDescription": "Need to leave immediately?",
   "Header-TitleBar-Title": "Live Chat",
-  "MessagePhase-MessageList-ChatStartMessage": "Chat Started"
+  "MessagePhase-MessageList-ChatStartMessage": "Chat Started",
+  "MessagePhase-MessageBubble-OtherParticipantMessageSenderName": "Counsellor",
+  "MessagePhase-MessageBubble-OwnMessageSenderName": "You"
 }

lambdas/account-scoped/src/conversation/createConversation.ts

@@ -17,6 +17,7 @@
 import { Twilio } from 'twilio';
 import { ConversationSID } from '@tech-matters/twilio-types';
 import { AseloCustomChannel } from '../customChannels/aseloCustomChannels';
+import { newErr, newOk, Result } from '../Result';
 
 const CONVERSATION_CLOSE_TIMEOUT = 'P3D'; // ISO 8601 duration format https://en.wikipedia.org/wiki/ISO_8601
 export type CreateFlexConversationParams = {
@@ -47,26 +48,42 @@ export const createConversation = async (
     additionalConversationAttributes,
     testSessionId,
   }: CreateFlexConversationParams,
-): Promise<{ conversationSid: ConversationSID; error?: Error }> => {
+): Promise<
+  Result<
+    { conversationSid?: ConversationSID; cause: Error },
+    { conversationSid: ConversationSID }
+  >
+> => {
   if (testSessionId) {
     console.info(
       'testSessionId specified. All outgoing messages will be sent to the test API.',
     );
   }
 
-  const conversationInstance = await client.conversations.v1.conversations.create({
-    xTwilioWebhookEnabled: 'true',
-    friendlyName: conversationFriendlyName,
-    uniqueName: `${channelType}/${uniqueUserName}/${Date.now()}`,
-  });
-  const conversationSid = conversationInstance.sid as ConversationSID;
+  let conversationSid: ConversationSID;
+  try {
+    const conversationInstance = await client.conversations.v1.conversations.create({
+      xTwilioWebhookEnabled: 'true',
+      friendlyName: conversationFriendlyName,
+      uniqueName: `${channelType}/${uniqueUserName}/${Date.now()}`,
+    });
+    conversationSid = conversationInstance.sid as ConversationSID;
+  } catch (err) {
+    return newErr({
+      message: `Create conversation failed: ${(err as Error)?.message}`,
+      error: { cause: err as Error },
+    });
+  }
 
   try {
     const conversationContext =
       client.conversations.v1.conversations.get(conversationSid);
     await conversationContext.participants.create({
       identity: uniqueUserName,
     });
+    await client.conversations.v1.users
+      .get(uniqueUserName)
+      .update({ friendlyName: senderScreenName });
     const channelAttributes = JSON.parse((await conversationContext.fetch()).attributes);
 
     console.debug('channelAttributes prior to update', channelAttributes);
@@ -91,7 +108,6 @@ export const createConversation = async (
       'configuration.filters': ['onMessageAdded'],
     });
     if (onMessageAddedWebhookUrl) {
-      /* const onMessageAdded = */
       await conversationContext.webhooks.create({
         target: 'webhook',
         'configuration.method': 'POST',
@@ -100,8 +116,11 @@ export const createConversation = async (
       });
     }
   } catch (err) {
-    return { conversationSid, error: err as Error };
+    return newErr({
+      message: `Create conversation failed: ${(err as Error)?.message}`,
+      error: { conversationSid, cause: err as Error },
+    });
   }
 
-  return { conversationSid };
+  return newOk({ conversationSid });
 };

lambdas/account-scoped/src/customChannels/customChannelToFlex.ts

@@ -21,6 +21,7 @@ import {
   createConversation,
   CreateFlexConversationParams,
 } from '../conversation/createConversation';
+import { isErr } from '../Result';
 
 export const findExistingConversation = async (
   client: Twilio,
@@ -75,7 +76,7 @@ export const removeConversation = async (
   }: {
     conversationSid: ConversationSID;
   },
-) => client.conversations.v1.conversations(conversationSid).remove();
+) => client.conversations.v1.conversations.get(conversationSid).remove();
 
 export { AseloCustomChannel, isAseloCustomChannel } from './aseloCustomChannels';
 
@@ -125,26 +126,28 @@ export const sendConversationMessageToFlex = async (
   let conversationSid = await findExistingConversation(client, uniqueUserName);
 
   if (!conversationSid) {
-    const { conversationSid: newConversationSid, error } = await createConversation(
-      client,
-      {
-        studioFlowSid,
-        channelType,
-        twilioNumber,
-        uniqueUserName,
-        senderScreenName,
-        onMessageAddedWebhookUrl,
-        conversationFriendlyName,
-        testSessionId,
-      },
-    );
+    const createConversationResult = await createConversation(client, {
+      studioFlowSid,
+      channelType,
+      twilioNumber,
+      uniqueUserName,
+      senderScreenName,
+      onMessageAddedWebhookUrl,
+      conversationFriendlyName,
+      testSessionId,
+    });
 
-    if (error) {
-      await removeConversation(client, {
-        conversationSid: newConversationSid,
-      });
-      throw error;
+    if (isErr(createConversationResult)) {
+      const { conversationSid: newConversationSid, cause } =
+        createConversationResult.error;
+      if (newConversationSid) {
+        await removeConversation(client, {
+          conversationSid: newConversationSid,
+        });
+      }
+      throw cause;
     }
+    const { conversationSid: newConversationSid } = createConversationResult.data;
 
     conversationSid = newConversationSid;
   }

lambdas/account-scoped/src/customChannels/instagram/instagramToFlex.ts

@@ -120,7 +120,7 @@ export const instagramToFlexHandler: AccountScopedHandler = async (
   const channelType = AseloCustomChannel.Instagram;
   const chatFriendlyName = `${channelType}:${senderExternalId}`;
   const uniqueUserName = `${channelType}:${senderExternalId}`;
-  const senderScreenName = uniqueUserName; // TODO: see if we can use ig handle somehow
+  const senderScreenName = senderExternalId; // TODO: see if we can use ig handle somehow
   const messageAttributes = JSON.stringify({ messageExternalId });
   const onMessageSentWebhookUrl = `${process.env.WEBHOOK_BASE_URL}/lambda/twilio/account-scoped/${accountSid}/customChannels/instagram/flexToInstagram?recipientId=${senderExternalId}`;
   const studioFlowSid = await getChannelStudioFlowSid(

lambdas/account-scoped/src/customChannels/line/lineToFlex.ts

@@ -136,7 +136,7 @@ export const lineToFlexHandler: AccountScopedHandler = async (
     const senderExternalId = messageEvent.source.userId; // The child ID on Line
     const chatFriendlyName = `${channelType}:${senderExternalId}`;
     const uniqueUserName = `${channelType}:${senderExternalId}`;
-    const senderScreenName = 'child';
+    const senderScreenName = senderExternalId;
     const onMessageSentWebhookUrl = `${process.env.WEBHOOK_BASE_URL}/lambda/twilio/account-scoped/${accountSid}/customChannels/line/flexToLine?recipientId=${senderExternalId}`;
     console.debug(
       'LineToFlex: sending message from',

lambdas/account-scoped/src/customChannels/modica/modicaToFlex.ts

@@ -46,7 +46,7 @@ export const modicaToFlexHandler: AccountScopedHandler = async (
   const senderExternalId = source; // The child phone number
   const chatFriendlyName = senderExternalId;
   const uniqueUserName = `${channelType}:${senderExternalId}`;
-  const senderScreenName = 'child';
+  const senderScreenName = senderExternalId;
   const onMessageSentWebhookUrl = `${process.env.WEBHOOK_BASE_URL}/lambda/twilio/account-scoped/${accountSid}/customChannels/modica/flexToModica?recipientId=${senderExternalId}`;
   const studioFlowSid = await getChannelStudioFlowSid(
     accountSid,