fix(TU-8691): Fix preventReopenOnClose logic

When two forms load at the same time, check if the first one was already closed at the time the second one is being opened (instead of on form load).
Typeform · Feb 23, 2024 · dfb5615 · dfb5615
1 parent 780f627
commit dfb5615
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 168 deletions.
diff --git a/packages/demo-html/public/behavioral-html/prevent-reopen-on-close-html.html b/packages/demo-html/public/behavioral-html/prevent-reopen-on-close-html.html
@@ -1,66 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Open: time (via embed code)</title>
+    <title>Open: data-tf-prevent-reopen-on-close</title>
     <link rel="stylesheet" href="../lib/css/sidetab.css" />
+    <link rel="stylesheet" href="../lib/css/popover.css" />
+    <link rel="stylesheet" href="../lib/css/popup.css" />
   </head>
   <body>
-    <h1>This sidetab opens in <span id="seconds">5</span> seconds (via embed code)</h1>
-    <p>The sidetab is opened automatically after the given time has passed.</p>
-    <p>If the user closes the sidetab and then refreshes, it will not reopen the Typeform.</p>
+    <p>Popover opens first (after 1 second).</p>
+    <p>
+      Sidetab opens second (after 6 seconds). However, if you closed the popover before it opens, the sidetab does not
+      open because they both show the same typeform.
+    </p>
+    <p>If you closed either popover or sidetab, neither of them will open on page reload.</p>
+    <p>
+      Regardless of your previous actions a popup opens third (after 7 seconds). If you close it, it will not reopen on
+      page reload.
+    </p>
+    <p>Information on closed typeforms is stored in cookie. You can reset the cookie below:</p>
+
+    <a
+      id="popover"
+      class="typeform-share"
+      data-tf-popover="HLjqXS5W"
+      data-tf-medium="unit-test"
+      data-tf-open="time"
+      data-tf-open-value="1000"
+      data-tf-prevent-reopen-on-close
+    >
+    </a>
 
     <a
       id="sidetab"
       class="typeform-share"
       data-tf-sidetab="HLjqXS5W"
       data-tf-medium="unit-test"
       data-tf-open="time"
-      data-tf-open-value="5000"
+      data-tf-open-value="6000"
       data-tf-prevent-reopen-on-close
     >
     </a>
 
-    <p>
-    <button
-      id="reset-cookie"
-    >
-      Reset cookie to reopen Typeform automatically
-    </button>
-    </p>
+    <a
+      id="popup"
+      class="typeform-share"
+      data-tf-popup="Cqrg7cgL"
+      data-tf-medium="unit-test"
+      data-tf-open="time"
+      data-tf-open-value="7000"
+      data-tf-prevent-reopen-on-close
+    ></a>
 
     <p>
-      <button
-        id="refresh"
-      >
-        Refresh page
-      </button>
+      <button id="reset-cookie">Reset all cookies to reopen Typeform automatically</button>
     </p>
 
-    <h2>Customize the time</h2>
-    <p>This can be set on "Share" page as well.</p>
-    <form action="" method="get">
-      <label for="time">Milliseconds</label>
-      <input id="time" name="ms" type="number" value="5000" step="1000" min="1000" />
-      <button type="submit">Set</button>
-    </form>
-
     <script>
-      const ms = parseInt(new URL(window.location.href).searchParams.get('ms'), 10)
-      if (ms) {
-        document.getElementById('sidetab').dataset.tfOpenValue = ms
-        document.getElementById('time').value = ms
-        document.getElementById('seconds').innerHTML = Math.round(ms / 1000)
-      }
-
-      document.getElementById('reset-cookie').addEventListener("click", () => {
+      document.getElementById('reset-cookie').addEventListener('click', () => {
         document.cookie = 'tf-HLjqXS5W-closed=false;Path=/'
+        document.cookie = 'tf-Cqrg7cgL-closed=false;Path=/'
         window.location.reload()
       })
-
-      document.getElementById('refresh').addEventListener("click", () => {
-        window.location.reload()
-      })
-
     </script>
 
     <script src="../lib/embed.js"></script>

diff --git a/packages/demo-html/public/behavioral-js/prevent-reopen-on-close-js.html b/packages/demo-html/public/behavioral-js/prevent-reopen-on-close-js.html