FLEXIN-74: changed endpoints for init and token refresh

.env.sample

@@ -8,6 +8,10 @@ CONVERSATIONS_SERVICE_SID=
 ALLOWED_ORIGINS=http://localhost:3000
 ## base endpoint of your local server. By default it is "http://localhost:3001"
 REACT_APP_SERVER_URL=http://localhost:3001
+# region for the host (i.e stage-us1, dev-us1, us1), defaults to us1(prod)
+REACT_APP_REGION=''
+# deployment key for Webchat app
+REACT_APP_DEPLOYMENT_KEY=''
 # Used to enable/disable downloading/emailing of chat transcripts for the customer. Enable by setting the variable to true.
 DOWNLOAD_TRANSCRIPT_ENABLED=false
 EMAIL_TRANSCRIPT_ENABLED=false

public/index.html

@@ -41,7 +41,8 @@
 	<script>
 		window.addEventListener("DOMContentLoaded", () => {
 			Twilio.initWebchat({
-				serverUrl: "%REACT_APP_SERVER_URL%",
+				deploymentKey: "%REACT_APP_DEPLOYMENT_KEY%",
+				region: "%REACT_APP_REGION%",
 				theme: {
 					isLight: true
 				}
@@ -50,4 +51,4 @@
 	</script>
 </body>
 
-</html>
+</html>

src/__tests__/index.test.tsx

@@ -32,13 +32,22 @@ describe("Index", () => {
             );
         });
 
-        it("sets endpoint correctly", () => {
-            const setEndpointSpy = jest.spyOn(sessionDataHandler, "setEndpoint");
+        it("sets region correctly", () => {
+            const setEndpointSpy = jest.spyOn(sessionDataHandler, "setRegion");
 
-            const serverUrl = "serverUrl";
-            initWebchat({ serverUrl });
+            const region = "Foo";
+            initWebchat({ region });
+
+            expect(setEndpointSpy).toBeCalledWith(region);
+        });
+
+        it("sets deployment key correctly", () => {
+            const setEndpointSpy = jest.spyOn(sessionDataHandler, "setDeploymentKey");
+
+            const deploymentKey = "Foo";
+            initWebchat({ deploymentKey });
 
-            expect(setEndpointSpy).toBeCalledWith(serverUrl);
+            expect(setEndpointSpy).toBeCalledWith(deploymentKey);
         });
 
         it("initializes config", () => {

src/__tests__/sessionDataHandler.test.ts

@@ -1,6 +1,6 @@
 import fetchMock from "fetch-mock-jest";
 
-import { sessionDataHandler } from "../sessionDataHandler";
+import { sessionDataHandler, contactBackend } from "../sessionDataHandler";
 
 Object.defineProperty(navigator, "mediaCapabilities", {
     writable: true,
@@ -14,9 +14,43 @@ describe("session data handler", () => {
         jest.clearAllMocks();
     });
 
-    it("should set an endpoint", () => {
-        sessionDataHandler.setEndpoint("foo");
-        expect(sessionDataHandler.getEndpoint()).toBe("foo");
+    it("should set the region", () => {
+        sessionDataHandler.setRegion("Foo");
+        expect(sessionDataHandler.getRegion()).toBe("Foo");
+    });
+
+    it("should set the deployment key", () => {
+        sessionDataHandler.setDeploymentKey("key1");
+        expect(sessionDataHandler.getDeploymentKey()).toBe("key1");
+    });
+
+    describe("contactBackend", () => {
+        beforeEach(() => () => {
+            sessionDataHandler.setRegion("");
+        });
+
+        afterEach(() => {
+            sessionDataHandler.setRegion("");
+        });
+
+        it("should call correct stage url", async () => {
+            const mockFetch = Promise.resolve({ ok: true, json: async () => Promise.resolve("okay") });
+            const fetchSpy = jest
+                .spyOn(window, "fetch")
+                .mockImplementation(async (): Promise<never> => mockFetch as Promise<never>);
+            sessionDataHandler.setRegion("stage");
+            await contactBackend("/Webchat/Tokens/Refresh", { formData: {} });
+            expect(fetchSpy.mock.calls[0][0]).toEqual("https://flex-api.stage.twilio.com/v2/Webchat/Tokens/Refresh");
+        });
+
+        it("should call correct prod url", async () => {
+            const mockFetch = Promise.resolve({ ok: true, json: async () => Promise.resolve("okay") });
+            const fetchSpy = jest
+                .spyOn(window, "fetch")
+                .mockImplementation(async (): Promise<never> => mockFetch as Promise<never>);
+            await contactBackend("/Webchat/Tokens/Refresh", { formData: {} });
+            expect(fetchSpy.mock.calls[0][0]).toEqual("https://flex-api.twilio.com/v2/Webchat/Tokens/Refresh");
+        });
     });
 
     describe("fetch and store new session", () => {

src/components/PreEngagementFormPhase.tsx

@@ -28,7 +28,7 @@ export const PreEngagementFormPhase = () => {
         try {
             const data = await sessionDataHandler.fetchAndStoreNewSession({
                 formData: {
-                    friendlyName: name && onUserInputSubmit(name, true),
+                    customerFriendlyName: name && onUserInputSubmit(name, true),
                     email,
                     query: query && onUserInputSubmit(query)
                 }
@@ -92,7 +92,7 @@ export const PreEngagementFormPhase = () => {
                         data-test="pre-engagement-chat-form-query-textarea"
                         value={query}
                         onChange={(e) => dispatch(updatePreEngagementData({ query: e.target.value }))}
-                        onKeyPress={handleKeyPress}
+                        onKeyDown={handleKeyPress}
                         required
                     />
                 </Box>

src/components/__tests__/PreEngagementFormPhase.test.tsx

@@ -135,15 +135,17 @@ describe("Pre Engagement Form Phase", () => {
         fireEvent.change(queryInput, { target: { value: query } });
         fireEvent.submit(formBox);
 
-        expect(fetchAndStoreNewSessionSpy).toHaveBeenCalledWith({ formData: { friendlyName: name, query, email } });
+        expect(fetchAndStoreNewSessionSpy).toHaveBeenCalledWith({
+            formData: { customerFriendlyName: name, query, email }
+        });
     });
 
     it("submits form on enter within textarea", () => {
         const fetchAndStoreNewSessionSpy = jest.spyOn(sessionDataHandler, "fetchAndStoreNewSession");
         const { container } = render(withStore(<PreEngagementFormPhase />));
 
         const textArea = container.querySelector("textarea") as Element;
-        fireEvent.keyPress(textArea, { key: "Enter", code: "Enter", charCode: 13, shiftKey: false });
+        fireEvent.keyDown(textArea, { key: "Enter", code: "Enter", charCode: 13, shiftKey: false });
 
         expect(fetchAndStoreNewSessionSpy).toHaveBeenCalled();
     });
@@ -153,7 +155,7 @@ describe("Pre Engagement Form Phase", () => {
         const { container } = render(withStore(<PreEngagementFormPhase />));
 
         const textArea = container.querySelector("textarea") as Element;
-        fireEvent.keyPress(textArea, { key: "Enter", code: "Enter", charCode: 13, shiftKey: true });
+        fireEvent.keyDown(textArea, { key: "Enter", code: "Enter", charCode: 13, shiftKey: true });
 
         expect(fetchAndStoreNewSessionSpy).not.toHaveBeenCalled();
     });

src/index.tsx

@@ -10,7 +10,8 @@ import { ConfigState } from "./store/definitions";
 import { initLogger } from "./logger";
 
 const defaultConfig: ConfigState = {
-    serverUrl: "http://localhost:3001",
+    deploymentKey: "",
+    region: "",
     theme: {
         isLight: true
     },
@@ -38,7 +39,8 @@ const defaultConfig: ConfigState = {
 
 const initWebchat = async (config: ConfigState) => {
     const mergedConfig = merge({}, defaultConfig, config);
-    sessionDataHandler.setEndpoint(mergedConfig.serverUrl);
+    sessionDataHandler.setDeploymentKey(mergedConfig.deploymentKey);
+    sessionDataHandler.setRegion(mergedConfig.region);
     store.dispatch(initConfig(mergedConfig));
     initLogger();
     const rootElement = document.getElementById("twilio-webchat-widget-root");

src/sessionDataHandler.ts

@@ -2,16 +2,19 @@ import log from "loglevel";
 
 import { Token } from "./definitions";
 import { generateSecurityHeaders } from "./utils/generateSecurityHeaders";
+import { buildRegionalHost } from "./utils/regionUtil";
 
 export const LOCALSTORAGE_SESSION_ITEM_ID = "TWILIO_WEBCHAT_WIDGET";
 
-let _endpoint = "";
+let _region = "";
+let _deploymentKey = "";
 
 type SessionDataStorage = Token & {
     loginTimestamp: number | null;
 };
 
 export async function contactBackend<T>(endpointRoute: string, body: Record<string, unknown> = {}): Promise<T> {
+    const _endpoint = `https://flex-api${buildRegionalHost(_region)}.twilio.com/v2`;
     const securityHeaders = await generateSecurityHeaders();
     const response = await fetch(_endpoint + endpointRoute, {
         method: "POST",
@@ -53,12 +56,20 @@ function getStoredSessionData() {
 }
 
 export const sessionDataHandler = {
-    setEndpoint(endpoint: string = "") {
-        _endpoint = endpoint;
+    setRegion(region: string = "") {
+        _region = region;
     },
 
-    getEndpoint() {
-        return _endpoint;
+    getRegion(): string {
+        return _region;
+    },
+
+    setDeploymentKey(key: string = "") {
+        _deploymentKey = key;
+    },
+
+    getDeploymentKey(): string {
+        return _deploymentKey;
     },
 
     tryResumeExistingSession(): Token | null {
@@ -95,7 +106,9 @@ export const sessionDataHandler = {
         let newTokenData: Token;
 
         try {
-            newTokenData = await contactBackend<Token>("/refreshToken", {
+            newTokenData = await contactBackend<Token>("/Webchat/Tokens/Refresh", {
+                // eslint-disable-next-line camelcase
+                deployment_key: _deploymentKey,
                 token: storedTokenData.token
             });
         } catch (e) {
@@ -119,7 +132,12 @@ export const sessionDataHandler = {
         let newTokenData;
 
         try {
-            newTokenData = await contactBackend<Token>("/initWebchat", { formData });
+            newTokenData = await contactBackend<Token>("/Webchat/Init", {
+                // eslint-disable-next-line camelcase
+                deployment_key: _deploymentKey,
+                customerFriendlyName: formData?.customerFriendlyName || "Customer",
+                preEngagementData: formData
+            });
         } catch (e) {
             throw Error("No results from server");
         }

src/store/definitions.ts

@@ -37,7 +37,8 @@ export type SessionState = {
 };
 
 export type ConfigState = {
-    serverUrl?: string;
+    deploymentKey?: string;
+    region?: string;
     theme?: {
         isLight?: boolean;
         overrides?: Partial<GenericThemeShape>;

src/utils/regionUtil.test.ts

@@ -0,0 +1,14 @@
+import { buildRegionalHost } from "./regionUtil";
+
+describe("buildRegionalHost(region)", () => {
+    it("builds correct region for various values", () => {
+        expect(buildRegionalHost("us1")).toBe("");
+        expect(buildRegionalHost("ie1")).toBe(".ie1");
+        expect(buildRegionalHost("")).toBe("");
+        expect(buildRegionalHost("prod")).toBe("");
+        expect(buildRegionalHost("stage-au1")).toBe(".stage-au1");
+        expect(buildRegionalHost("stage-us1")).toBe(".stage");
+        expect(buildRegionalHost("dev-us1")).toBe(".dev");
+        expect(buildRegionalHost("dev-us2")).toBe(".dev-us2");
+    });
+});

src/utils/regionUtil.ts

@@ -0,0 +1,14 @@
+export function buildRegionalHost(region: string = ""): string {
+    switch (region) {
+        case "prod":
+        case "us1":
+        case "":
+            return "";
+        case "dev-us1":
+            return ".dev";
+        case "stage-us1":
+            return ".stage";
+        default:
+            return `.${region}`;
+    }
+}