FLEXIN-486 - Adding functionality to toggle the widget opening (#90)

* FLEXIN-486 - Adding functionality to toggle the widget opening
twilio · Oct 13, 2023 · 90e01cf · 90e01cf
1 parent 52c4ff2
commit 90e01cf
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 6 deletions.
diff --git a/public/app.js b/public/app.js
@@ -9,6 +9,7 @@ window.addEventListener("DOMContentLoaded", () => {
   Twilio.initWebchat({
     deploymentKey: urlParams.get("deploymentKey"),
     region: urlParams.get("region"),
+    appStatus: urlParams.get("appStatus"),
     theme: {
       isLight: isLightTheme
     }

diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx
@@ -6,6 +6,7 @@ import { sessionDataHandler } from "../sessionDataHandler";
 import { WebchatWidget } from "../components/WebchatWidget";
 import { store } from "../store/store";
 import * as initActions from "../store/actions/initActions";
+import * as genericActions from "../store/actions/genericActions";
 
 jest.mock("react-dom");
 
@@ -16,7 +17,7 @@ describe("Index", () => {
     beforeAll(() => {
         getLogger = jest.fn();
     });
-    
+
     afterEach(() => {
         jest.clearAllMocks();
     });
@@ -28,7 +29,7 @@ describe("Index", () => {
             const root = document.createElement("div");
             root.id = "twilio-webchat-widget-root";
             document.body.appendChild(root);
-            initWebchat({});
+            initWebchat({ deploymentKey: "CV000000" });
 
             expect(renderSpy).toBeCalledWith(
                 <Provider store={store}>
@@ -42,15 +43,15 @@ describe("Index", () => {
             const setEndpointSpy = jest.spyOn(sessionDataHandler, "setEndpoint");
 
             const serverUrl = "serverUrl";
-            initWebchat({ serverUrl });
+            initWebchat({ serverUrl, deploymentKey: "CV000000" });
 
             expect(setEndpointSpy).toBeCalledWith(serverUrl);
         });
 
         it("initializes config", () => {
             const initConfigSpy = jest.spyOn(initActions, "initConfig");
 
-            initWebchat({});
+            initWebchat({ deploymentKey: "CV000000" });
 
             expect(initConfigSpy).toBeCalled();
         });
@@ -59,9 +60,30 @@ describe("Index", () => {
             const initConfigSpy = jest.spyOn(initActions, "initConfig");
 
             const serverUrl = "serverUrl";
-            initWebchat({ serverUrl });
+            initWebchat({ serverUrl, deploymentKey: "CV000000" });
 
             expect(initConfigSpy).toBeCalledWith(expect.objectContaining({ serverUrl, theme: { isLight: true } }));
         });
+
+        it("triggers expaneded true if appStatus is open", () => {
+            const changeExpandedStatusSpy = jest.spyOn(genericActions, "changeExpandedStatus");
+
+            initWebchat({ deploymentKey: "CV000000", appStatus: "open" });
+            expect(changeExpandedStatusSpy).toHaveBeenCalledWith({ expanded: true });
+        });
+
+        it("triggers expaneded false if appStatus is closed", () => {
+            const changeExpandedStatusSpy = jest.spyOn(genericActions, "changeExpandedStatus");
+
+            initWebchat({ deploymentKey: "CV000000", appStatus: "closed" });
+            expect(changeExpandedStatusSpy).toHaveBeenCalledWith({ expanded: false });
+        });
+
+        it("triggers expaneded false with default appStatus", () => {
+            const changeExpandedStatusSpy = jest.spyOn(genericActions, "changeExpandedStatus");
+
+            initWebchat({ deploymentKey: "CV000000" });
+            expect(changeExpandedStatusSpy).toHaveBeenCalledWith({ expanded: false });
+        });
     });
 });
diff --git a/src/index.tsx b/src/index.tsx
@@ -9,6 +9,7 @@ import { sessionDataHandler } from "./sessionDataHandler";
 import { initConfig } from "./store/actions/initActions";
 import { ConfigState, UserConfig } from "./store/definitions";
 import { initLogger, getLogger } from "./logger";
+import { changeExpandedStatus } from "./store/actions/genericActions";
 
 const defaultConfig: ConfigState = {
     deploymentKey: "",
@@ -26,7 +27,7 @@ const defaultConfig: ConfigState = {
 const initWebchat = async (userConfig: UserConfig) => {
     // eslint-disable-next-line no-warning-comments
     // TODO: serverUrl needs to be removed with PR #74
-    const validKeys = ["deploymentKey", "region", "theme", "serverUrl"];
+    const validKeys = ["deploymentKey", "region", "theme", "serverUrl", "appStatus"];
     const logger = window.Twilio.getLogger(`InitWebChat`);
 
     // eslint-disable-next-line no-warning-comments
@@ -41,6 +42,9 @@ const initWebchat = async (userConfig: UserConfig) => {
         }
     });
 
+    store.dispatch(changeExpandedStatus({ expanded: userConfig.appStatus === "open" }));
+    delete userConfig.appStatus;
+
     const webchatConfig = merge({}, defaultConfig, userConfig);
 
     sessionDataHandler.setEndpoint(webchatConfig.serverUrl);

diff --git a/src/store/definitions.ts b/src/store/definitions.ts
@@ -40,6 +40,7 @@ export type UserConfig = {
     serverUrl?: string;
     deploymentKey: string;
     region?: string;
+    appStatus?: "open";
     theme?: {
         isLight?: boolean;
         overrides?: Partial<GenericThemeShape>;