@fullsession.io/fs-feedback-widget 1.11.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullsession.io/fs-feedback-widget",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

package/src/App.svelte

@@ -15,6 +15,7 @@
   $: widgetLanguage = feedback.wgLanguage;
   $: widgetAlternateColor = feedback.wgAlternateColor;
   $: wgPosition = feedback.wgPosition;
+  $: widgetThanksComponentActivation = feedback.wgThanksMsgActivation;
   $: widgetThanksMsg = feedback.wgThanksMsg;
   $: WidgetTriggers = feedback.wgTriggers;
   $: document.documentElement.style.setProperty("--widgetColor", widgetColor);
@@ -205,7 +206,13 @@
 
   const openThanksMessage = () => {
     visible = !visible;
-    thanksMessageVisible = !thanksMessageVisible;
+    if (widgetThanksComponentActivation) {
+      thanksMessageVisible = !thanksMessageVisible;
+    } else {
+      setTimeout(function () {
+        buttonVisible = !buttonVisible;
+      }, 350);
+    }
   };
 
   const closeThanksMessage = () => {

package/src/Icons/reactionIcons.svelte

@@ -5,68 +5,32 @@
   export let emotIconType;
   export let width = "40px";
   export let height = "40px";
-  let emotIcons =
+  // Recompute emotIcons and icons reactively when `emotIconType` changes
+  $: emotIcons =
     emotIconType == "0"
       ? icons_1
       : emotIconType == "1"
       ? icons_2
       : emotIconType == "2"
       ? icons_3
-      : null;
-  let icons = [
-    {
-      box: 50,
-      name: "love",
-      svg: emotIcons[0],
-    },
-    {
-      box: 50,
-      name: "unSelectedLove",
-      svg: emotIcons[1],
-    },
-    {
-      box: 50,
-      name: "like",
-      svg: emotIcons[2],
-    },
-    {
-      box: 50,
-      name: "unSelectedLike",
-      svg: emotIcons[3],
-    },
-    {
-      box: 50,
-      name: "neutral",
-      svg: emotIcons[4],
-    },
-    {
-      box: 50,
-      name: "unSelectedNeutral",
-      svg: emotIcons[5],
-    },
-    {
-      box: 50,
-      name: "dislike",
-      svg: emotIcons[6],
-    },
-    {
-      box: 50,
-      name: "unSelectedDislike",
-      svg: emotIcons[7],
-    },
+      : icons_1;
 
-    {
-      box: 50,
-      name: "hate",
-      svg: emotIcons[8],
-    },
-    {
-      box: 50,
-      name: "unSelectedHate",
-      svg: emotIcons[9],
-    },
-  ];
-  let displayIcon = icons.find((e) => e.name === name);
+  $: icons = emotIcons
+    ? [
+        { box: 50, name: "love", svg: emotIcons[0] },
+        { box: 50, name: "unSelectedLove", svg: emotIcons[1] },
+        { box: 50, name: "like", svg: emotIcons[2] },
+        { box: 50, name: "unSelectedLike", svg: emotIcons[3] },
+        { box: 50, name: "neutral", svg: emotIcons[4] },
+        { box: 50, name: "unSelectedNeutral", svg: emotIcons[5] },
+        { box: 50, name: "dislike", svg: emotIcons[6] },
+        { box: 50, name: "unSelectedDislike", svg: emotIcons[7] },
+        { box: 50, name: "hate", svg: emotIcons[8] },
+        { box: 50, name: "unSelectedHate", svg: emotIcons[9] },
+      ]
+    : [];
+
+  $: displayIcon = icons.find((e) => e.name === name) || icons[0];
 </script>
 
 {#if emotIconType === "2"}

package/src/widgetPages/App.css

@@ -32,12 +32,13 @@
 
 
 .fs-thanks-txt {
-  width: 61%;
-  padding: 20px 0;
+  width: 100%;
+  padding: 20px;
   text-align: center;
   align-self: center;
   padding-bottom: 20px;
-  overflow: hidden;
+  overflow-y: auto;
+  max-height: 100%;
 }
 
 fsContainerApp {
@@ -121,7 +122,9 @@ fsContainerApp {
   display: flex;
   flex-direction: column;
   pointer-events: auto;
-  height: auto;
+  width: 320px;
+  height: 150px;
+  border-radius: 5px;
   background-color: rgb(255, 255, 255);
   margin-right: var(--widgetMarginRight);
   margin-left: var(--widgetMarginLeft);
@@ -155,12 +158,88 @@ fsContainerApp {
   margin-left: 90% !important;
 }
 
+/* Mobile Responsive Styles */
+@media (max-width: 768px) {
+  .fsCont {
+    width: 90vw;
+    max-width: 320px;
+    margin-right: 5vw;
+    margin-left: 5vw;
+  }
+
+  .fsContNps {
+    width: 95vw !important;
+    max-width: 400px;
+  }
+
+  .fsThanksMessageCont {
+    width: 90vw;
+    max-width: 320px;
+    margin-right: 5vw;
+    margin-left: 5vw;
+  }
+
+  .fsWidget {
+    width: 32px;
+    height: 110px;
+  }
+
+  #fsFeedbackTxt {
+    font-size: 13px;
+  }
+
+  .fsCloseCont {
+    margin-left: 82%;
+  }
+
+  .fsNpsCloseCont {
+    margin-left: 88% !important;
+  }
+
+  .fs-thanks-txt {
+    width: 100%;
+    padding: 15px;
+    font-size: 14px;
+  }
+}
 
-
-
-
-/* @media (min-width: 640px) {
-    body {
-      max-width: none;
-    }
-  } */
+@media (max-width: 480px) {
+  .fsCont {
+    width: 95vw;
+    max-width: 300px;
+  }
+
+  .fsContNps {
+    width: 98vw !important;
+    max-width: 380px;
+  }
+
+  .fsThanksMessageCont {
+    width: 95vw;
+    max-width: 300px;
+  }
+
+  .fsWidget {
+    width: 30px;
+    height: 100px;
+  }
+
+  #fsFeedbackTxt {
+    font-size: 12px;
+  }
+
+  .fsCloseCont {
+    width: 24px;
+    height: 24px;
+    margin-left: 80%;
+  }
+
+  #fsCloseIcon {
+    font-size: 13px;
+  }
+
+  .fs-thanks-txt {
+    font-size: 13px;
+    padding: 12px;
+  }
+}

package/src/widgetPages/reactionPage.svelte

@@ -1,6 +1,8 @@
 <script>
   import Icons from "../Icons/reactionIcons.svelte";
   import "../widgetPages/reactionpage.css";
+  import { onMount } from "svelte";
+  
   export let feedbackData;
   export let wgType;
   $: widgetComponent = 1;
@@ -20,30 +22,43 @@
   $: loveDisplay = "none";
   $: buttonColor = feedbackData.wgAccentColor;
   $: widgetQuestion = feedbackData.wgQuestion;
+  $: widgetEmailComponentActivation = feedbackData.wgEmailReqActivation;
   $: widgetEmailReqMsg = feedbackData.wgEmailReqMsg;
   $: widgetPlaceholder = feedbackData.wgFeedbackPlaceholder;
   $: widgetEmotIconType = feedbackData.wgReactionStyle;
-  $: document.documentElement.style.setProperty(
-    "--pointerMargin",
-    pointerMargin + "%"
-  );
-  $: document.documentElement.style.setProperty("--hateDisplay", hateDisplay);
-  $: document.documentElement.style.setProperty(
-    "--dislikeDisplay",
-    dislikeDisplay
-  );
-  $: document.documentElement.style.setProperty(
-    "--neutralDisplay",
-    neutralDisplay
-  );
-  $: document.documentElement.style.setProperty("--likeDisplay", likeDisplay);
-  $: document.documentElement.style.setProperty("--loveDisplay", loveDisplay);
-  $: document.documentElement.style.setProperty("--buttonColor", buttonColor);
+  
+  // Set CSS custom properties only once on mount, then update individually as needed
+  // This avoids triggering multiple style recalculations on every reactive update
+  onMount(() => {
+    const root = document.documentElement.style;
+    root.setProperty("--pointerMargin", pointerMargin + "%");
+    root.setProperty("--hateDisplay", hateDisplay);
+    root.setProperty("--dislikeDisplay", dislikeDisplay);
+    root.setProperty("--neutralDisplay", neutralDisplay);
+    root.setProperty("--likeDisplay", likeDisplay);
+    root.setProperty("--loveDisplay", loveDisplay);
+    root.setProperty("--buttonColor", buttonColor);
+  });
+  
+  // Update CSS properties only when specific values change
+  $: if (typeof window !== 'undefined') {
+    document.documentElement.style.setProperty("--pointerMargin", pointerMargin + "%");
+  }
+  $: if (typeof window !== 'undefined') {
+    document.documentElement.style.setProperty("--hateDisplay", hateDisplay);
+    document.documentElement.style.setProperty("--dislikeDisplay", dislikeDisplay);
+    document.documentElement.style.setProperty("--neutralDisplay", neutralDisplay);
+    document.documentElement.style.setProperty("--likeDisplay", likeDisplay);
+    document.documentElement.style.setProperty("--loveDisplay", loveDisplay);
+  }
+  $: if (typeof window !== 'undefined') {
+    document.documentElement.style.setProperty("--buttonColor", buttonColor);
+  }
 
   let count = 0;
-  $: buttonState = false;
+  let buttonState = false;
+  let emailError = "";
   let checkTextAreaInterval;
-  let checkEmailAreaInterval;
 
   export let closeHandler = (
     email,
@@ -53,13 +68,6 @@
   ) => {};
   export let closeHandlerBeforeFinishing = (email, comment, reactionType) => {};
 
-  // const commentButtonDisable = () =>{
-
-  //   let source = document.querySelector(".fsTextArea");
-
-  //   source.addEventListener('propertychange', commentHandler);
-
-  // }
   const commentHandler = () => {
     let input = document.querySelector(".fsTextArea");
 
@@ -72,27 +80,30 @@
     comment = input.value;
   };
 
-  // const EmailButtonDisable = () =>{
-
-  //   let source = document.querySelector("#fsEmailTextArea");
-
-  //   source.addEventListener('propertychange', emailHandler);
-
-  // }
-
-  const emailHandler = () => {
-    let input = document.querySelector("#fsEmailTextArea");
+  // Ultra-fast email handler - just updates value, no validation during typing
+  const emailHandler = (event) => {
+    email = event.target.value;
+    emailError = ""; // Clear error when user types
+    // Enable button if there's any content
+    buttonState = email.length > 0;
+  };
 
-    if (
-      !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(input.value) ||
-      input.value === ""
-    ) {
-      buttonState = false; //button remains disabled
-    } else {
-      buttonState = true; //button is enabled
-      email = "";
-      email = document.getElementById("fsEmailTextArea").value;
+  // Validate only when user clicks Send - much better performance
+  const validateAndSubmitEmail = () => {
+    const trimmedEmail = email.trim();
+    
+    // Quick client-side validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    
+    if (!trimmedEmail || !emailRegex.test(trimmedEmail)) {
+      emailError = "Please enter a valid email address";
+      buttonState = false;
+      return;
     }
+    
+    // Valid - proceed with submission
+    emailError = "";
+    closeHandler(email, comment, reactionType, questionAnswer);
   };
 
   const changeStyle = (prevState) => {
@@ -179,19 +190,29 @@
     clearInterval(checkTextAreaInterval);
     document.querySelector(".fsTextArea").value = "";
     buttonState = false;
-    widgetComponent = state;
+    if (widgetEmailComponentActivation) {
+      widgetComponent = state;
+    } else {
+      closeHandler(email, comment, reactionType, questionAnswer);
+    }
   };
 
   const openEmailView = (state) => {
     clearInterval(checkTextAreaInterval);
     document.querySelector(".fsAnswerTextArea").value = "";
     buttonState = false;
-    widgetComponent = state;
+    if (widgetEmailComponentActivation) {
+      widgetComponent = state;
+    } else {
+      closeHandler(email, comment, reactionType, questionAnswer);
+    }
   };
 
   const endEmailInterval = () => {
-    clearInterval(checkEmailAreaInterval);
-    document.querySelector("#fsEmailTextArea").value = "";
+    const el = document.querySelector("#fsEmailTextArea");
+    if (el) el.value = "";
+    email = "";
+    emailError = "";
   };
 </script>
 
@@ -366,7 +387,7 @@
     </div>
   </div>
 {:else if widgetComponent === 2 && wgType === 2}
-  <div id="fsTxtNps">Tell us more about your experience</div>
+  <div id="fsTxtNps">{widgetPlaceholder}</div>
   <div class="fsTextAreaCont-qa-view">
     <textarea
       class="fsTextArea"
@@ -390,12 +411,16 @@
     </div>
     <div id="fsEmailInputCont">
       <input
-        type="text"
+        type="email"
         id="fsEmailTextArea"
         placeholder="email@domain.com"
-        on:keyup={() => emailHandler()}
+        autocomplete="email"
+        on:input={emailHandler}
       />
     </div>
+    {#if emailError}
+      <div class="fsEmailError">{emailError}</div>
+    {/if}
     <div class="fsEmailFooter">
       <p
         id="fsSkipText"
@@ -411,9 +436,7 @@
       {:else if buttonState == true}
         <button
           class="fsSendButtonContCommentComp"
-          on:click={() =>
-            closeHandler(email, comment, reactionType, questionAnswer)}
-          on:click={() => endEmailInterval()}
+          on:click={validateAndSubmitEmail}
         >
           <p class="fsSendButtonCommentComponent">Send</p>
         </button>