Initial localization implementation (#239)

package.json

@@ -175,6 +175,7 @@
     "postcss-preset-env": "^9.5.2",
     "postcss-safe-parser": "^7.0.0",
     "prop-types": "^15.8.1",
+    "react-intl": "^6.3.2",
     "react-dev-utils": "^12.0.0",
     "react-render-html": "^0.6.0",
     "react-test-renderer": "^16.6.3",

src/components/Chat/Chat.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: MIT-0
 
 import PT from "prop-types";
+import { FormattedMessage } from "react-intl";
 import { CONTACT_STATUS } from "../../constants/global";
 import ChatTranscriptor from "./ChatTranscriptor";
 import ChatComposer from "./ChatComposer";
@@ -73,7 +74,13 @@ const defaultHeaderConfig =  {
   render: () => {
     return (
       <HeaderWrapper>
-        <WelcomeText type={'h2'}>Hi there! </WelcomeText>
+        <WelcomeText type={'h2'}>
+          <FormattedMessage
+            id="header.headerText"
+            defaultMessage= "Hi there! "
+          />
+        </WelcomeText>
+        {/*TODO: translate below texts*/}
         <Text type={'p'}>This is an example of how customers experience chat on your website</Text>
       </HeaderWrapper>
     )
@@ -136,6 +143,9 @@ export default class Chat extends Component {
   componentDidMount() {
     this.init(this.props.chatSession);
     this.resetChatHeight();
+    if (typeof this.props.changeLanguage === "function") {
+      this.props.changeLanguage(this.props.language);
+    }
     this.logger && this.logger.info("Component mounted.")
   }
 
@@ -144,6 +154,10 @@ export default class Chat extends Component {
       this.cleanUp(prevProps.chatSession);
       this.init(this.props.chatSession);
     }
+    if (prevProps.language !== this.props.language &&
+        typeof this.props.changeLanguage === "function") {
+      this.props.changeLanguage(this.props.language);
+    }
   }
 
   componentWillUnmount() {

src/components/Chat/Chat.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IntlProvider } from 'react-intl';
 import Chat from './Chat';
 import ThemeProvider from '../../theme/ThemeProvider';
 import { render } from "@testing-library/react";
@@ -63,20 +64,22 @@ describe('<Chat />', () => {
 
         test("should reset the header height", () => {
             const mockResetHeightMethod = jest.spyOn(Chat.prototype, "resetChatHeight");
-            render(<ThemeProvider>
-                      <Chat {...mockProps} />
-                    </ThemeProvider>);
+            render(<IntlProvider onError={jest.fn} locale="en">
+                        <ThemeProvider>
+                            <Chat {...mockProps} />
+                        </ThemeProvider>
+                   </IntlProvider>);
             expect(screen.getByTestId('amazon-connect-chat-wrapper')).not.toBe(null);
             expect(mockResetHeightMethod).toBeCalled();
         })
 
         test("Should be able to jitter to fix iphone mobile scroll issue", () => {
             const mockResetHeightMethod = jest.spyOn(Chat.prototype, "resetChatHeight");
-            const mockComposer = render(
-                <ThemeProvider>
-                    <Chat {...mockProps} />
-                </ThemeProvider>
-            );
+            const mockComposer = render(<IntlProvider onError={jest.fn} locale="en">
+                    <ThemeProvider>
+                        <Chat {...mockProps} />
+                    </ThemeProvider>
+                </IntlProvider>);
             expect(screen.getByTestId('amazon-connect-chat-wrapper')).not.toBe(null);
             expect(mockResetHeightMethod).toBeCalled();
 
@@ -88,10 +91,11 @@ describe('<Chat />', () => {
 
         test("should send ReadReceipt when a message is visible in the viewport", () => {
             ChatTranscriptor.mockClear();
-            render(
-                    <ThemeProvider>
-                    <Chat {...mockProps} />
-                    </ThemeProvider>)
+            render(<IntlProvider onError={jest.fn} locale="en">
+                        <ThemeProvider>
+                            <Chat {...mockProps} />
+                        </ThemeProvider>
+                   </IntlProvider>)
             ChatTranscriptor.mock.calls[0][0].sendReadReceipt({});
             expect(mockProps.chatSession.sendReadReceipt).toHaveBeenCalled();
         })

src/components/Chat/ChatActionBar/ChatActionBar.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: MIT-0
 
 import * as React from "react";
+import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 import PT from "prop-types";
 import { Button } from "connect-core";
@@ -99,7 +100,12 @@ export default class ChatActionBar extends React.Component {
                     type="default"
                     onClick={onEndChat}
                   >
-                    <span>End chat</span>
+                    <span>
+                      <FormattedMessage
+                          id="Chat.EndChat"
+                          defaultMessage="End chat"
+                      />
+                    </span>
                   </ActionButton>
                 </React.Fragment>
               )}
@@ -111,7 +117,12 @@ export default class ChatActionBar extends React.Component {
                   type="default"
                   onClick={onClose}
                 >
-                  <span>Close</span>
+                  <span>
+                    <FormattedMessage
+                        id="Chat.Close"
+                        defaultMessage="Close"
+                    />
+                  </span>
                 </ActionButton>
               </React.Fragment>
 

src/components/Chat/ChatActionBar/ChatActionBar.test.js

@@ -2,14 +2,22 @@
 // SPDX-License-Identifier: MIT-0
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { IntlProvider } from 'react-intl';
 import ChatActionBar from './ChatActionBar';
 import { ThemeProvider } from '../../../theme';
 
 describe('<ChatActionBar />', () => {
   test("Style should match the snapshot", () => {
     const addMessageFn = jest.fn();
-    const tree = createTree(<ThemeProvider><ChatActionBar contactStatus="connected"/></ThemeProvider>);
+    const tree = createTree(<ThemeProvider>
+      <IntlProvider
+          locale="en"
+          onError={jest.fn}
+          key="en"
+          messages={{}}>
+        <ChatActionBar contactStatus="connected"/>
+      </IntlProvider>
+    </ThemeProvider>);
     expect(tree).toMatchSnapshot();
   });
   let wrapper, instance;

src/components/Chat/ChatComposer/ChatComposer.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: MIT-0
 
 import React, { useState, useLayoutEffect, useEffect, useRef, useMemo } from "react";
+import { useIntl } from 'react-intl'
 import styled from "styled-components";
 import throttle from "lodash/throttle";
 import PT from "prop-types";
@@ -307,7 +308,11 @@ export default function ChatComposer({ addMessage, addAttachment, onTyping, cont
     addAttachment(contactId, file);
   }
 
-  const ariaLabel = "Type a message";
+  const intl = useIntl();
+  const ariaLabel = intl.formatMessage({
+    id: "chatComposer.placeholder",
+    defaultMessage: "Type a message"
+  });
   const placeholder = attachment == null ? ariaLabel : "";
 
   const richMessagingComposer = (

src/components/Chat/ChatComposer/ChatComposer.test.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: MIT-0
 
 import React from "react";
+import { IntlProvider } from 'react-intl';
 import ChatComposer from "./ChatComposer";
 import { ThemeProvider } from "../../../theme";
 import { render, fireEvent, screen, prettyDOM } from "@testing-library/react";
@@ -22,7 +23,12 @@ let mockProps;
 function renderElement(props) {
   mockComposer = render(
     <ThemeProvider>
-      <ChatComposer {...props} />
+      <IntlProvider
+          locale="en"
+          key="en"
+          messages={{}}>
+        <ChatComposer {...props}/>
+      </IntlProvider>
     </ThemeProvider>
   );
 }

src/components/Chat/ChatContainer.js

@@ -14,6 +14,7 @@ import { defaultTheme } from "connect-theme";
 import { FlexRowContainer } from "connect-theme/Helpers";
 import { CHAT_FEATURE_TYPES } from "./constants";
 import { ContentType } from "./datamodel/Model";
+import { LanguageProvider, LanguageContext } from "../../context/LanguageContext";
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -46,6 +47,7 @@ class ChatContainer extends Component {
       chatSession: null,
       composerConfig: {},
       status: "NotInitiated",
+      language: 'en_US'
     };
 
     this.submitChatInitiationHandler = this.initiateChatSession.bind(this);
@@ -101,6 +103,7 @@ class ChatContainer extends Component {
         (input.featurePermissions && input.featurePermissions[CHAT_FEATURE_TYPES.ATTACHMENTS]) ||
         (chatDetails.featurePermissions && chatDetails.featurePermissions[CHAT_FEATURE_TYPES.ATTACHMENTS]);
       const richMessagingEnabled = typeof input.supportedMessagingContentTypes === "string" ? input.supportedMessagingContentTypes.split(",").includes(ContentType.MESSAGE_CONTENT_TYPE.TEXT_MARKDOWN) : false;
+      const language = input.language || "en_US";
 
       this.setState({
         status: "Initiated",
@@ -109,6 +112,7 @@ class ChatContainer extends Component {
           attachmentsEnabled,
           richMessagingEnabled,
         },
+        language
       });
       success && success(chatSession);
     } catch (error) {
@@ -153,7 +157,21 @@ class ChatContainer extends Component {
         </Wrapper>
       );
     }
-    return <Chat chatSession={this.state.chatSession} composerConfig={this.state.composerConfig} onEnded={this.resetState} {...this.props} />;
+    return (
+        <LanguageProvider>
+          <LanguageContext.Consumer>
+            {({changeLanguage}) => (<>
+              <Chat
+                  chatSession={this.state.chatSession}
+                  composerConfig={this.state.composerConfig}
+                  onEnded={this.resetState}
+                  changeLanguage={changeLanguage}
+                  language={this.state.language}
+                  {...this.props} />
+            </>)}
+          </LanguageContext.Consumer>
+        </LanguageProvider>
+    );
   }
 }
 

src/components/Chat/ChatContainer.test.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import { IntlProvider } from 'react-intl';
 import ChatContainer from './ChatContainer';
 import { render, waitFor } from '@testing-library/react';
 import ThemeProvider from '../../theme/ThemeProvider';
 import request from '../../utils/fetchRequest';
 import EventBus from "./eventbus";
+import { LanguageProvider } from "../../context/LanguageContext";
 
 jest.mock('../../utils/fetchRequest');
 
@@ -107,9 +109,13 @@ describe("<ChatContainer />", () => {
 
   const renderComponent = () =>
     render(
-        <ThemeProvider>
-            <ChatContainer {...config} />
-        </ThemeProvider>
+        <LanguageProvider>
+          <IntlProvider locale="en">
+            <ThemeProvider>
+                <ChatContainer {...config} />
+            </ThemeProvider>
+          </IntlProvider>
+        </LanguageProvider>
     );
 
   it("should render component successfully", async () => {

src/components/Chat/ChatTranscriptor/ChatMessages/ChatMessage.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: MIT-0
 
 import React, { PureComponent } from "react";
+import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 import PT from "prop-types";
 import Linkify from "react-linkify";
@@ -174,14 +175,20 @@ export class ParticipantMessage extends PureComponent {
     const isOutgoingMsg = this.props.messageDetails.transportDetails.direction === Direction.Outgoing;
     const displayName = this.props.messageDetails.displayName || (isOutgoingMsg ? "Customer" : "Agent");
     const transportDetails = this.props.messageDetails.transportDetails;
+    const statusStringPrefix = "connect-chat-transport-status-";
 
     let transportStatusElement = <React.Fragment />;
     switch (transportDetails.status) {
       case Status.Sending:
         transportStatusElement = (
           <React.Fragment>
             <StatusText>
-              <span>Sending</span>
+              <span>
+                <FormattedMessage
+                    id={statusStringPrefix + "sending"}
+                    defaultMessage="Sending"
+                />
+              </span>
             </StatusText>
           </React.Fragment>
         );
@@ -193,7 +200,12 @@ export class ParticipantMessage extends PureComponent {
         transportStatusElement = (
           <ErrorText>
             <Icon />
-            <span>Failed to send!</span>
+            <span>
+              <FormattedMessage
+                  id={statusStringPrefix + "sendFailed"}
+                  defaultMessage="Failed to send! "
+              />
+            </span>
           </ErrorText>
         );
         break;
@@ -202,7 +214,12 @@ export class ParticipantMessage extends PureComponent {
     }
     return (
       <React.Fragment>
-        <Header.Sender>{displayName}</Header.Sender>
+        <Header.Sender>
+          <FormattedMessage
+              id={displayName || "DISPLAY_NAME_MISSING"}
+              defaultMessage={displayName}
+          />
+        </Header.Sender>
         <Header.Status>{transportStatusElement}</Header.Status>
       </React.Fragment>
     );
@@ -222,8 +239,16 @@ export class ParticipantMessage extends PureComponent {
     return (
       <React.Fragment>
         <Footer.MessageReceipt>
-          {lastReadReceipt && "Read"}
-          {lastDeliveredReceipt && "Delivered"}
+          {lastReadReceipt && <FormattedMessage
+              id="connect-chat-read-receipt"
+              defaultMessage="Read"
+              aria-live="polite"
+          />}
+          {lastDeliveredReceipt && <FormattedMessage
+              id="connect-chat-delivered-receipt"
+              defaultMessage="Delivered"
+              aria-live="polite"
+          />}
         </Footer.MessageReceipt>
       </React.Fragment>
     );

src/components/Chat/ChatTranscriptor/ChatMessages/ChatMessage.test.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: MIT-0
 
 import React from "react";
+import { IntlProvider } from "react-intl";
 import "@testing-library/jest-dom";
 import { render } from "@testing-library/react";
 import { ParticipantMessage, ErrorFallback } from "./ChatMessage";
@@ -59,9 +60,11 @@ describe("ChatMessage", () => {
     };
 
     render(
-      <ThemeProvider>
-        <ParticipantMessage {...mockProps} />
-      </ThemeProvider>
+        <IntlProvider locale="en" onError={jest.fn} >
+          <ThemeProvider>
+            <ParticipantMessage {...mockProps} />
+          </ThemeProvider>
+        </IntlProvider>
     );
   }