Merge pull request #76 from yext/popup-stay-closed

Popup stay closed

Author: lluo-yext

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/src/index.js",

src/components/ChatPopUp.tsx

@@ -74,6 +74,7 @@ const builtInCssClasses: ChatPopUpCssClasses = withStylelessCssClasses(
     },
   }
 );
+const popupLocalStorageKey = "YEXT_CHAT_OPEN_ON_LOAD";
 
 /**
  * The props for the {@link ChatPopUp} component.
@@ -151,6 +152,7 @@ export function ChatPopUp(props: ChatPopUpProps) {
     //only show initial message popup (if specified) when CTA label is not provided
     !ctaLabel && showInitialMessagePopUp
   );
+
   const onCloseInitialMessage = useCallback(() => {
     setshowInitialMessage(false);
   }, []);
@@ -162,41 +164,58 @@ export function ChatPopUp(props: ChatPopUpProps) {
   // to avoid message requests immediately on load while the popup is still "hidden"
   const [renderChat, setRenderChat] = useState(false);
 
+  // Set the initial value of the local storage flag for opening on load only if it doesn't already exist
+
+  if (window.localStorage.getItem(popupLocalStorageKey) === null) {
+    window.localStorage.setItem(
+      popupLocalStorageKey,
+      openOnLoad ? "true" : "false"
+    );
+  }
+  const openOnLoadLocalStorage =
+    window.localStorage.getItem(popupLocalStorageKey);
+
+  /* Open panel on load if: 
+  - openOnLoad prop is true or there are messages in state (from browser storage), and local storage flag is true */
+  const isOpenOnLoad =
+    (messages.length > 1 && openOnLoadLocalStorage === "true") || openOnLoad;
+
   // only fetch initial message when ChatPanel is closed on load (otherwise, it will be fetched in ChatPanel)
   useFetchInitialMessage(
     showInitialMessagePopUp ? console.error : handleError,
     false,
     (showUnreadNotification || showInitialMessagePopUp) &&
       !renderChat &&
-      !openOnLoad
+      !isOpenOnLoad
   );
 
   useEffect(() => {
-    // Open panel on load if openOnLoad prop is true or there are messages in state (from browser storage)
-    if (!renderChat && (openOnLoad || messages.length > 1)) {
+    if (!renderChat && isOpenOnLoad) {
       setShowChat(true);
       setRenderChat(true);
       setshowInitialMessage(false);
     }
-  }, [messages.length, openOnLoad, renderChat]);
+  }, [renderChat, messages.length, isOpenOnLoad]);
 
   const onClick = useCallback(() => {
     setShowChat((prev) => !prev);
     setRenderChat(true);
     setshowInitialMessage(false);
+    window.localStorage.setItem(popupLocalStorageKey, "true");
   }, []);
 
   const onClose = useCallback(() => {
     setShowChat(false);
     customOnClose?.();
     // consider all the messages are read while the panel was open
     setNumReadMessagesLength(messages.length);
-  }, [customOnClose, messages]);
+    window.localStorage.setItem(popupLocalStorageKey, "false");
+  }, [customOnClose, messages.length]);
 
   useEffect(() => {
     // update number of unread messages if there are new messages added while the panel is closed
     setNumUnreadMessagesLength(messages.length - numReadMessages);
-  }, [messages, numReadMessages]);
+  }, [messages.length, numReadMessages]);
 
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
   const panelCssClasses = twMerge(

test-site/package-lock.json

@@ -40,7 +40,7 @@ function App() {
       <ChatHeadlessProvider config={config}>
         <ChatPopUp
           title="Clippy"
-          openOnLoad={true}
+          openOnLoad={false}
           showInitialMessagePopUp={true}
           showHeartBeatAnimation={true}
           showUnreadNotification={true}

test-site/src/App.tsx

@@ -82,7 +82,7 @@ describe("open on load with state from browser storage", () => {
   beforeEach(() => {
     localStorage.clear();
   });
-  it("renders panel on load when there are non-initial messages in state", async () => {
+  it("renders panel on load when there are non-initial messages in state and panel wasn't previously closed", async () => {
     localStorage.setItem(
       `yext_chat_state__localhost__${dummyConfig.botId}`,
       JSON.stringify({
@@ -100,6 +100,7 @@ describe("open on load with state from browser storage", () => {
         ],
       })
     );
+    localStorage.setItem("YEXT_CHAT_OPEN_ON_LOAD", "true");
     renderPopUp({}, undefined, { ...dummyConfig, saveToLocalStorage: true });
     expect(screen.getByLabelText("Send Message")).toBeTruthy();
   });
@@ -110,6 +111,38 @@ describe("open on load with state from browser storage", () => {
   });
 });
 
+describe("does not open on load with saveToLocalStorage = false", () => {
+  beforeEach(() => {
+    localStorage.setItem("YEXT_CHAT_OPEN_ON_LOAD", "false");
+  });
+
+  it("should not open on initial page load", async () => {
+    renderPopUp({});
+    expect(screen.queryByLabelText("Send Message")).toBeNull();
+  });
+
+  it("should not open on load even if there are messages", async () => {
+    localStorage.setItem(
+      `yext_chat_state__localhost__${dummyConfig.botId}`,
+      JSON.stringify({
+        messages: [
+          {
+            text: "How can I help you?",
+            source: MessageSource.BOT,
+            timestamp: new Date().toISOString(),
+          },
+          {
+            text: "Hello!",
+            source: MessageSource.USER,
+            timestamp: new Date().toISOString(),
+          },
+        ],
+      })
+    );
+    expect(screen.queryByLabelText("Send Message")).toBeNull();
+  });
+});
+
 describe("ctaLabel", () => {
   it("renders CTA label when a label is provided", async () => {
     renderPopUp({ ctaLabel: "ChatPopUp Test" });