FLEXIN-74: POC changes

Author: ashishkumarTWLO

src/components/PreEngagementFormPhase.tsx

@@ -26,13 +26,17 @@ export const PreEngagementFormPhase = () => {
         e.preventDefault();
         dispatch(changeEngagementPhase({ phase: EngagementPhase.Loading }));
         try {
-            const data = await sessionDataHandler.fetchAndStoreNewSession({
+            let data = await sessionDataHandler.fetchAndStoreNewSession({
                 formData: {
                     friendlyName: name && onUserInputSubmit(name, true),
                     email,
                     query: query && onUserInputSubmit(query)
                 }
             });
+            data = {
+                ...data,
+                conversationSid: data.conversation_sid
+            };
             dispatch(initSession({ token: data.token, conversationSid: data.conversationSid }));
         } catch (err) {
             dispatch(addNotification(notifications.failedToInitSessionNotification((err as Error).message)));

src/definitions.ts

@@ -3,6 +3,8 @@ import { GenericThemeShape } from "@twilio-paste/theme";
 export type Token = {
     token: string;
     conversationSid: string;
+    // eslint-disable-next-line camelcase
+    conversation_sid: string;
     identity: string;
     expiration: string;
 };

src/sessionDataHandler.ts

@@ -14,15 +14,23 @@ type SessionDataStorage = Token & {
 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 logger = window.Twilio.getLogger('sessionDataHandler');
+    const logger = window.Twilio.getLogger("sessionDataHandler");
+    const urlEncodedBody = new URLSearchParams();
+    for (const key in body) {
+        if (body.hasOwnProperty(key)) {
+            urlEncodedBody.append(key, body[key] as string);
+        }
+    }
     const response = await fetch(_endpoint + endpointRoute, {
         method: "POST",
         headers: {
             Accept: "application/json",
-            "Content-Type": "application/json",
+            "Content-Type": "application/x-www-form-urlencoded",
+            Authorization:
+                "Basic QUMyMWJkYmYxYmVkMTM0OTkyZmViMjY4ZjhjMmJkYWY4ZjpiNjBmMjI4MTE5YWExMWUwM2Y0ZTlmOGY0YTMyMGQ0OA==",
             ...securityHeaders
         },
-        body: JSON.stringify(body)
+        body: urlEncodedBody.toString()
     });
 
     if (!response.ok) {
@@ -111,7 +119,7 @@ export const sessionDataHandler = {
 
         try {
             newTokenData = await contactBackend<Token>("/Webchat/Tokens/Refresh", {
-                deployment_key: _deploymentKey,
+                DeploymentKey: _deploymentKey,
                 token: storedTokenData.token
             });
         } catch (e) {
@@ -130,17 +138,17 @@ export const sessionDataHandler = {
     },
 
     fetchAndStoreNewSession: async ({ formData }: { formData: Record<string, unknown> }) => {
-        const logger = window.Twilio.getLogger('sessionDataHandler');
+        const logger = window.Twilio.getLogger("sessionDataHandler");
         logger.info("trying to create new session");
         const loginTimestamp = Date.now();
 
         let newTokenData;
 
         try {
             newTokenData = await contactBackend<Token>("/Webchat/Init", {
-                deployment_key: _deploymentKey,
-                customerFriendlyName: formData?.friendlyName || "Customer",
-                preEngagementData: JSON.stringify(formData)
+                DeploymentKey: _deploymentKey,
+                CustomerFriendlyName: formData?.friendlyName || "Customer",
+                // PreEngagementData:  "{\"friendlyName\":\"Ashish\",\"email\":\"Ashish@twio.com\",\"query\":\"Hello+world\"}"
             });
         } catch (e) {
             logger.error("No results from server");

src/store/actions/initActions.ts

@@ -28,7 +28,9 @@ export function initSession({ token, conversationSid }: { token: string; convers
         let messages;
 
         try {
-            conversationsClient = await Client.create(token);
+            conversationsClient = await Client.create(token, {
+                region: process.env.REACT_APP_REGION
+            });
             try {
                 conversation = await conversationsClient.getConversationBySid(conversationSid);
             } catch (e) {

src/utils/generateSecurityHeaders.test.ts

@@ -8,10 +8,10 @@ import WebChatLogger from "../logger";
 
 jest.mock("../logger");
 
-const HEADER_SEC_DECODER = "I-Twilio-Sec-Decoders";
-const HEADER_SEC_BROWSEROS = "I-Twilio-Sec-Browseros";
-const HEADER_SEC_USERSETTINGS = "I-Twilio-Sec-Usersettings";
-const HEADER_SEC_WEBCHAT = "I-Twilio-Sec-Webchatinfo";
+const HEADER_SEC_DECODER = "X-Twilio-Sec-Decoders";
+const HEADER_SEC_BROWSEROS = "X-Twilio-Sec-Browseros";
+const HEADER_SEC_USERSETTINGS = "X-Twilio-Sec-Usersettings";
+const HEADER_SEC_WEBCHAT = "X-Twilio-Sec-Webchatinfo";
 describe("Generate Security Headers", () => {
     beforeAll(() => {
         Object.defineProperty(window, "Twilio", {

src/utils/generateSecurityHeaders.ts

@@ -2,10 +2,10 @@
 import { LOCALSTORAGE_SESSION_ITEM_ID } from "../sessionDataHandler";
 import { store } from "../store/store";
 
-const HEADER_SEC_DECODER = "I-Twilio-Sec-Decoders";
-const HEADER_SEC_BROWSEROS = "I-Twilio-Sec-Browseros";
-const HEADER_SEC_USERSETTINGS = "I-Twilio-Sec-Usersettings";
-const HEADER_SEC_WEBCHAT = "I-Twilio-Sec-Webchatinfo";
+const HEADER_SEC_DECODER = "X-Twilio-Sec-Decoders";
+const HEADER_SEC_BROWSEROS = "X-Twilio-Sec-Browseros";
+const HEADER_SEC_USERSETTINGS = "X-Twilio-Sec-Usersettings";
+const HEADER_SEC_WEBCHAT = "X-Twilio-Sec-Webchatinfo";
 
 type SecurityHeadersType = {
     [HEADER_SEC_BROWSEROS]: string;