@fullsession.io/fs-feedback-widget 1.3.2 → 1.3.5

package/src/widgetPages/App.css

@@ -1,4 +1,4 @@
-container{
+fsContainer{
     width: 100%;
     display: flex;
     flex-direction: var(--wgPositionVertical);
@@ -9,8 +9,9 @@ container{
   align-items: var(--wgPositionHorizintal);
   padding: 0;
   z-index: 100000;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
-  .widget {
+  .fsWidget {
     pointer-events: auto;
     background-color: var(--widgetColor);
     width: 34px;
@@ -27,12 +28,12 @@ container{
     cursor: pointer;
     margin-top: 5px;
   }
-  #mainIcon {
+  #fsMainIcon {
     width: 60%;
     margin-left: 4%;
     cursor: pointer;
   }
-  #feedbackTxt {
+  #fsFeedbackTxt {
     color: var(--widgetTextColor);
     font-size: 15px;
     writing-mode: vertical-lr;
@@ -40,12 +41,12 @@ container{
     cursor: pointer;
     font-size-adjust: 0.40;
   }
-  .widget:hover {
+  .fsWidget:hover {
     width: 35px;
     -webkit-box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
     box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
   }
-  .cont {
+  .fsCont {
     pointer-events: auto;
     width: 320px;
     height: fit-content;
@@ -55,7 +56,7 @@ container{
 	-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px; 
 	box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
   }
-  .thanksMessageCont{
+  .fsThanksMessageCont{
     pointer-events: auto;
     width: 320px;
     height: 104px;
@@ -65,15 +66,14 @@ container{
 	-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px; 
 	box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
   }
-  #closeIcon{
-	  font-size: 16px;
+  #fsCloseIcon{
+	  font-size: 15px;
 	  color: #ffff;
 	  font-weight: 600;
-	  font-family: system-ui;
-	cursor: pointer;
+  	cursor: pointer;
 	  
   }
-  .closeCont{
+  .fsCloseCont{
     pointer-events: auto;
 	  background-color: #4d5167;
 	  width: 27px;
@@ -91,8 +91,8 @@ container{
   
  
 
-  @media (min-width: 640px) {
+  /* @media (min-width: 640px) {
     body {
       max-width: none;
     }
-  }
+  } */

package/src/widgetPages/reactionPage.svelte

@@ -3,6 +3,7 @@
   import Icons from "../Icons/reactionIcons.svelte";
   import "../widgetPages/reactionpage.css"
   export let feedbackData;
+  console.log("hiiih")
   $: widgetComponent = 1;
   let reactionNames = ["hate","dislike","neutral","like","love"];
   let changingReactionNames = reactionNames;
@@ -34,42 +35,53 @@
   let checkEmailAreaInterval;
 
   export let closeHandler = (email,comment,reactionType) => {};
-  
+  export let closeHandlerBeforeFinishing = (email,comment,reactionType) => {};
+
 
-  const commentButtonDisable = () =>{
+  // const commentButtonDisable = () =>{
     
-    let input = document.querySelector(".textArea");
+  //   let source = document.querySelector(".fsTextArea");
     
-    checkTextAreaInterval = setInterval(() => {
-      console.log(input.value)
-      if (input.value=== "") {
+  //   source.addEventListener('propertychange', commentHandler);
+      
+   
+  // }
+  const commentHandler = () => {
+    let input = document.querySelector(".fsTextArea");
+
+  if (input.value=== "") {
         buttonState = false; //button remains disabled
       } else {
         buttonState = true; //button is enabled
       }
-    }, 500);
-      
-   
-  }
+  comment = "";
+  comment = input.value;
+  console.log(input.value)
+}
 
-  const EmailButtonDisable = () =>{
+  // const EmailButtonDisable = () =>{
     
-    let input = document.querySelector("#EmailTextArea");
+  //   let source = document.querySelector("#fsEmailTextArea");
     
-    checkEmailAreaInterval = setInterval(() => {
-      console.log(input.value)
-      if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(input.value)) || input.value ==="") {
+  //   source.addEventListener('propertychange', emailHandler);
+
+
+  // }
+
+  const emailHandler = ()=> {
+    let input = document.querySelector("#fsEmailTextArea");
+
+    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;
       }
-      email = "";
-      email = document.getElementById("EmailTextArea").value;
-
-    }, 500);
       
-   
-  }
+
+    
+}
   
 
   const changeStyle = (prevState) =>{
@@ -96,7 +108,7 @@
     widgetComponent = state;
     reactionType = String(rating);
     changingReactionNames = ["unSelectedHate","unSelectedDislike","unSelectedNeutral","unSelectedLike","unSelectedLove"];
-
+    closeHandlerBeforeFinishing(email,comment,reactionType)
     if(count >0){
       changeStyle(prevName)
     }
@@ -133,54 +145,60 @@
 
   const openEmailCont  = (state) =>{
     clearInterval(checkTextAreaInterval);
+    document.querySelector(".fsTextArea").value="";
     buttonState = false
     widgetComponent = state;
-    comment = document.getElementsByClassName("textArea")[0].value;
+    
   }
 
-  
+  const endEmailInterval =()=> {
+    console.log("444")
+    clearInterval(checkEmailAreaInterval);
+    document.querySelector("#fsEmailTextArea").value="";
+
+	}
 
 </script>
 
 
 
 {#if widgetComponent === 1}
-<div class="container">
-  <div id="txt">{feedbackData.wgQuestion}</div>
-  <div class="icons">
-    <div class="iconTextCont" on:click={() =>openComment(2,1,"hate")}>
-      <div class="reactionIcon">
+<div class="fsReactionsContainer">
+  <div id="fsTxt">{feedbackData.wgQuestion}</div>
+  <div class="fsIcons">
+    <div class="fsIconTextCont" on:click={() =>openComment(2,1,"hate")}>
+      <div class="fsReactionIcon">
         <Icons bind:name={changingReactionNames[0]}/>
       </div>
 
-      <p class="reactionText">Hate</p>
+      <p class="fsReactionText">Hate</p>
     </div>
 
-    <div class="iconTextCont" on:click={() =>openComment(2,2,"dislike")}>
-      <div class="reactionIcon">
+    <div class="fsIconTextCont" on:click={() =>openComment(2,2,"dislike")}>
+      <div class="fsReactionIcon">
         <Icons bind:name={changingReactionNames[1]} />
       </div>
 
-      <p class="reactionText">Dislike</p>
+      <p class="fsReactionText">Dislike</p>
     </div>
-    <div class="iconTextCont" on:click={() =>openComment(2,3,"neutral")}>
-      <div class="reactionIcon">
+    <div class="fsIconTextCont" on:click={() =>openComment(2,3,"neutral")}>
+      <div class="fsReactionIcon">
         <Icons bind:name={changingReactionNames[2]} />
       </div>
 
-      <p class="reactionText">Neutral</p>
+      <p class="fsReactionText">Neutral</p>
     </div>
-    <div class="iconTextCont" on:click={() =>openComment(2,4,"like")}>
-      <div class="reactionIcon">
+    <div class="fsIconTextCont" on:click={() =>openComment(2,4,"like")}>
+      <div class="fsReactionIcon">
         <Icons bind:name={changingReactionNames[3]} />
       </div>
-      <p class="reactionText">Like</p>
+      <p class="fsReactionText">Like</p>
     </div>
-    <div class="iconTextCont" on:click={() =>openComment(2,5,"love")}>
-      <div class="reactionIcon">
+    <div class="fsIconTextCont" on:click={() =>openComment(2,5,"love")}>
+      <div class="fsReactionIcon">
         <Icons bind:name={changingReactionNames[4]} />
       </div>
-      <p class="reactionText" >Love</p>
+      <p class="fsReactionText" >Love</p>
     </div>
   </div>
   <p id ="test"></p>
@@ -188,10 +206,10 @@
 
 
 {:else if widgetComponent === 2}
-        <div class="commentContainer">
-            <div class="icons-second">
-                <div class="iconTextCont"  on:click={() =>openComment(2,1,"hate")}>
-                  <div class="reactionIcon">
+        <div class="fsCommentContainer">
+            <div class="fsIcons-second">
+                <div class="fsIconTextCont"  on:click={() =>openComment(2,1,"hate")}>
+                  <div class="fsReactionIcon">
                     {#if reactionState}
                     <Icons bind:name={changingReactionNames[0]}/>
                     {:else if reactionState==false}
@@ -199,11 +217,11 @@
                     {/if}
                   </div>
             
-                  <p class="reactionText" id="hateDiv">Hate</p>
+                  <p class="fsReactionText" id="fsHateDiv">Hate</p>
                 </div>
             
-                <div class="iconTextCont"  on:click={() =>openComment(2,2,"dislike")}>
-                  <div class="reactionIcon">
+                <div class="fsIconTextCont"  on:click={() =>openComment(2,2,"dislike")}>
+                  <div class="fsReactionIcon">
                     {#if reactionState}
                     <Icons bind:name={changingReactionNames[1]}/>
                     {:else if reactionState==false}
@@ -211,10 +229,10 @@
                     {/if}
                   </div>
             
-                  <p class="reactionText" id="dislikeDiv">Dislike</p>
+                  <p class="fsReactionText" id="fsDislikeDiv">Dislike</p>
                 </div>
-                <div class="iconTextCont"  on:click={() =>openComment(2,3,"neutral")}>
-                  <div class="reactionIcon">
+                <div class="fsIconTextCont"  on:click={() =>openComment(2,3,"neutral")}>
+                  <div class="fsReactionIcon">
                     {#if reactionState}
                     <Icons bind:name={changingReactionNames[2]}/>
                     {:else if reactionState==false}
@@ -222,65 +240,65 @@
                     {/if}
                   </div>
             
-                  <p class="reactionText" id="neutralDiv">Neutral</p>
+                  <p class="fsReactionText" id="fsNeutralDiv">Neutral</p>
                 </div>
-                <div class="iconTextCont"  on:click={() =>openComment(2,4,"like")}>
-                  <div class="reactionIcon">
+                <div class="fsIconTextCont"  on:click={() =>openComment(2,4,"like")}>
+                  <div class="fsReactionIcon">
                     {#if reactionState}
                     <Icons bind:name={changingReactionNames[3]}/>
                     {:else if reactionState==false}
                     <Icons bind:name={changingReactionNames[3]}/>
                     {/if}
                   </div>
-                  <p class="reactionText" id="likeDiv">Like</p>
+                  <p class="fsReactionText" id="fsLikeDiv">Like</p>
                 </div>
-                <div class="iconTextCont">
-                  <div class="reactionIcon"  on:click={() =>openComment(2,5,"love")}>
+                <div class="fsIconTextCont">
+                  <div class="fsReactionIcon"  on:click={() =>openComment(2,5,"love")}>
                     {#if reactionState}
                     <Icons bind:name={changingReactionNames[4]}/>
                     {:else if reactionState==false}
                     <Icons bind:name={changingReactionNames[4]}/>
                     {/if}
                   </div>
-                  <p class="reactionText" id="loveDiv">Love</p>
+                  <p class="fsReactionText" id="fsLoveDiv">Love</p>
                 </div>
               </div>
 
-              <div class="textAreaCont" >
-                  <div class="pointerDiv" id="pointer" ></div>
-                  <textarea class="textArea" placeholder="Tell us your experience..." on:click={() => commentButtonDisable()}></textarea>
+              <div class="fsTextAreaCont" >
+                  <div class="fsPointerDiv" id="fsPointer" ></div>
+                  <textarea class="fsTextArea" placeholder="Tell us your experience..."  on:keyup={() => commentHandler()}></textarea>
               </div>
 
-              <div class="footer">
+              <div class="fsFooter">
                 {#if buttonState == false}
-                <button  class="CommentButtonContDisable"  disabled>
-                    <p class="CommentButtonTxtDisable">Send</p>
+                <button  class="fsCommentButtonContDisable"  disabled>
+                    <p class="fsCommentButtonTxtDisable">Send</p>
                 </button>
                 {:else if buttonState == true}
-                <button  class="sendButtonContCommentComp" on:click={() => openEmailCont(3)} >
-                  <p class="SendButtonCommentComponent">Send</p>
+                <button  class="fsSendButtonContCommentComp" on:click={() => openEmailCont(3)} >
+                  <p class="fsSendButtonCommentComponent">Send</p>
                 </button>
                 {/if}
               </div>
         </div>
 {:else if widgetComponent === 3}
-<div class="emailContainer">
-  <div id="emailText">
+<div class="fsEmailContainer">
+  <div id="fsEmailText">
     {feedbackData.wgEmailReqMsg}
   </div>
-  <div id="emailInputCont" on:click={() => EmailButtonDisable()}>
-    <input type="text" id="EmailTextArea" placeholder="email@domain.com">
+  <div id="fsEmailInputCont">
+    <input type="text" id="fsEmailTextArea" placeholder="email@domain.com" on:keyup={() => emailHandler()}>
   </div>
-  <div class="emailFooter">
-    <p id="skipText" on:click={() => closeHandler(email,comment,reactionType)}><u>Skip</u></p>
+  <div class="fsEmailFooter">
+    <p id="fsSkipText" on:click={() => closeHandler(email,comment,reactionType)}><u>Skip</u></p>
     {#if buttonState == false}
-    <button class="CommentButtonContDisable" disabled>
-        <p class="CommentButtonTxtDisable">Send</p>
+    <button class="fsCommentButtonContDisable" disabled>
+        <p class="fsCommentButtonTxtDisable">Send</p>
     </button>
     {:else if buttonState == true}
-    <button class="sendButtonContCommentComp" on:click={() => closeHandler(email,comment,reactionType)}>
-      <p class="SendButtonCommentComponent" >Send</p>
-  </button>
+    <button class="fsSendButtonContCommentComp" on:click={() => closeHandler(email,comment,reactionType)} on:click={()=>endEmailInterval() }>
+      <p class="fsSendButtonCommentComponent" >Send</p>
+    </button>
   {/if}
     
   </div>

package/src/widgetPages/reactionpage.css

@@ -1,16 +1,17 @@
-.container {
+.fsReactionsContainer {
     pointer-events: auto;
     display: flex;
     flex-direction: column;
     height: 190px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
-  .icons {
+  .fsIcons {
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
     margin-top: 11%;
   }
-  #txt {
+  #fsTxt {
     font-size: 17px;
     display: flex;
     text-align: center;
@@ -19,44 +20,50 @@
     margin-left: 19%;
   }
 
-  .iconTextCont {
+  .fsIconTextCont {
     pointer-events: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     height: 22px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
 
-  .reactionText {
+  .fsReactionText {
     font-size: 12px;
     display: none;
-    margin-top: 9.5%;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin-top: 0px;
     
   }
-  .iconTextCont:hover{
+  .fsIconTextCont:hover{
     pointer-events: auto;
     cursor: pointer;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
-  .reactionIcon:hover + .reactionText {
+  .fsReactionIcon:hover + .fsReactionText {
     display: block;
     opacity: 0.8;
   }
 
-  .commentContainer{
+  .fsCommentContainer{
     pointer-events: auto;
     display: flex;
     flex-direction: column;
     height: 291px;
     pointer-events: auto;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
-  .textAreaCont{
+  .fsTextAreaCont{
     pointer-events: auto;
       width: 100%;
       height: 140px;
       background-color: #eaeaeb;
       margin-top: 17%;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
-  .textArea{
+  .fsTextArea{
     border: 0px;
     width: 85%;
     height: 120px;
@@ -65,17 +72,19 @@
     outline: none;
     margin-top: 4%;
     resize: none;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
   }
-  .SendButtonCommentComponent{
+  .fsSendButtonCommentComponent{
     pointer-events: auto;
       color: #ffff;
       font-size: 12px;
       text-align: center;
       margin-top: 7px;
-      
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
-  .sendButtonContCommentComp{
+  .fsSendButtonContCommentComp{
     pointer-events: auto;
       background-color: var(--buttonColor);
       width: 50px;
@@ -86,10 +95,11 @@
     margin-right: 11px;
     cursor: pointer;
     border: 0px;
-    
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
   
-.CommentButtonContDisable{
+.fsCommentButtonContDisable{
     pointer-events: auto;
   background-color: #cccccc;
       width: 50px;
@@ -100,28 +110,36 @@
     margin-right: 11px;
     cursor:not-allowed;
     border: 0px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
 }
-.CommentButtonTxtDisable{
+.fsCommentButtonTxtDisable{
     pointer-events: auto;
       color: black;
       font-size: 12px;
       text-align: center;
       margin-top: 7px;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
 }
-  .footer{
+  .fsFooter{
     pointer-events: auto;
       display: flex;
       justify-content: flex-end;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
 
-  .icons-second{
+  .fsIcons-second{
 
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
     margin-top: 6%;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
-  .pointerDiv{
+  .fsPointerDiv{
     width: 0;
     height: 0;
     border-left: 3px solid transparent;
@@ -132,28 +150,30 @@
 
 
   }
-  #hateDiv{
+  #fsHateDiv{
     display: var(--hateDisplay);
   }
-  #dislikeDiv{
+  #fsDislikeDiv{
     display: var(--dislikeDisplay);
   }
-  #neutralDiv{
+  #fsNeutralDiv{
     display: var(--neutralDisplay);
   }
-  #likeDiv{
+  #fsLikeDiv{
     display: var(--likeDisplay);
   }
-  #loveDiv{
+  #fsLoveDiv{
     display: var(--loveDisplay);
   }
-  .emailContainer{
+  .fsEmailContainer{
     pointer-events: auto;
     display: flex;
     flex-direction: column;
     height: 220px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
-  #emailInputCont{
+  #fsEmailInputCont{
     pointer-events: auto;
     pointer-events: auto;
     width: 100%;
@@ -163,38 +183,50 @@
     /* align-items: center; */
     justify-content: center;
     margin-top: 10%;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
 
   }
-  #EmailTextArea{
+  #fsEmailTextArea{
     pointer-events: auto;
     text-align: center;
     border: 0px;
     background-color: #eaeaeb;
     outline: none;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
- #emailText{
+ #fsEmailText{
     width: 80%;
     text-align: center;
     margin-left: 11%;
     margin-top: 8%;
     line-height: 1.29;
     font-size: 17px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
  }
- .emailFooter{
+ .fsEmailFooter{
     pointer-events: auto;
   display: flex;
   justify-content: flex-end;
   flex-direction: row;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
  }
- #skipText{
+ #fsSkipText{
   color: #908f8f;
     cursor: pointer;
     font-size: 13px;
     margin-top: 6%;
     margin-right: 4%;
     letter-spacing: normal;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
 
  }
- #skipText:hover{
+ #fsSkipText:hover{
    color: #666666;
+   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
  }