@fullsession.io/fs-feedback-widget 1.6.0 → 1.7.0

package/src/widgetPages/reactionPage.svelte

@@ -1,305 +1,382 @@
-
-<script>
-  import Icons from "../Icons/reactionIcons.svelte";
-  import "../widgetPages/reactionpage.css"
-  export let feedbackData;
-  $: widgetComponent = 1;
-  let reactionNames = ["hate","dislike","neutral","like","love"];
-  let changingReactionNames = reactionNames;
-  let reactionType = "";
-  let comment=""
-  let email =""
-  let reactionName = "test";
-  let reactionState = true;
-  $:pointerMargin = 10;
-  $:hateDisplay = 'none'
-  $:dislikeDisplay = 'none'
-  $:neutralDisplay = 'none'
-  $:likeDisplay = 'none'
-  $:loveDisplay = 'none';
-  $:buttonColor = feedbackData.wgAccentColor;
-  $: 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)
-
-
-  
-  let count = 0;
-  $: buttonState = false;
-  let checkTextAreaInterval;
-  let checkEmailAreaInterval;
-
-  export let closeHandler = (email,comment,reactionType) => {};
-  export let closeHandlerBeforeFinishing = (email,comment,reactionType) => {};
-
-
-  // const commentButtonDisable = () =>{
-    
-  //   let source = document.querySelector(".fsTextArea");
-    
-  //   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
-      }
-  comment = "";
-  comment = input.value;
-}
-
-  // const EmailButtonDisable = () =>{
-    
-  //   let source = document.querySelector("#fsEmailTextArea");
-    
-  //   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;
-      }
-      
-
-    
-}
-  
-
-  const changeStyle = (prevState) =>{
-   
-    if(prevState == "hate"){
-      hateDisplay = "none"
-    } else if(prevState == "dislike"){
-      dislikeDisplay = "none"
-    } else if(prevState == "neutral"){
-      neutralDisplay = "none"
-    } else if(prevState == "like"){
-      likeDisplay = "none"
-    } else if(prevState == "love"){
-      loveDisplay = "none"
-    }
-  }
-
-  
-  const openComment = (state,rating,name) => {
-    let prevName = reactionName
-    reactionName = name
-
-    widgetComponent = state;
-    reactionType = String(rating);
-    changingReactionNames = ["unSelectedHate","unSelectedDislike","unSelectedNeutral","unSelectedLike","unSelectedLove"];
-    closeHandlerBeforeFinishing(email,comment,reactionType)
-    if(count >0){
-      changeStyle(prevName)
-    }
-    // changeStyle(prevName,reactionName)
-    count++;
-    if(rating == 1){
-      
-      pointerMargin = 11
-      hateDisplay = "block"
-      changingReactionNames[0] = reactionNames[0]
-      reactionState = !reactionState;
-    } else if(rating == 2){
-      changingReactionNames[1] = reactionNames[1]
-      pointerMargin = 30;
-      dislikeDisplay = "block"
-      reactionState = !reactionState;
-    } else if(rating == 3){
-      changingReactionNames[2] = reactionNames[2]
-      pointerMargin = 49
-      neutralDisplay = "block"
-      reactionState = !reactionState;
-    } else if(rating == 4){
-      changingReactionNames[3] = reactionNames[3]
-      pointerMargin = 68
-      likeDisplay = "block"
-      reactionState = !reactionState;
-    } else if(rating == 5){
-      changingReactionNames[4] = reactionNames[4]
-      pointerMargin = 87
-      loveDisplay = "block"
-      reactionState = !reactionState;
-    }
-  };
-
-  const openEmailCont  = (state) =>{
-    clearInterval(checkTextAreaInterval);
-    document.querySelector(".fsTextArea").value="";
-    buttonState = false
-    widgetComponent = state;
-    
-  }
-
-  const endEmailInterval =()=> {
-    clearInterval(checkEmailAreaInterval);
-    document.querySelector("#fsEmailTextArea").value="";
-
-	}
-
-</script>
-
-
-
-{#if widgetComponent === 1}
-<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="fsReactionText">Hate</p>
-    </div>
-
-    <div class="fsIconTextCont" on:click={() =>openComment(2,2,"dislike")}>
-      <div class="fsReactionIcon">
-        <Icons bind:name={changingReactionNames[1]} />
-      </div>
-
-      <p class="fsReactionText">Dislike</p>
-    </div>
-    <div class="fsIconTextCont" on:click={() =>openComment(2,3,"neutral")}>
-      <div class="fsReactionIcon">
-        <Icons bind:name={changingReactionNames[2]} />
-      </div>
-
-      <p class="fsReactionText">Neutral</p>
-    </div>
-    <div class="fsIconTextCont" on:click={() =>openComment(2,4,"like")}>
-      <div class="fsReactionIcon">
-        <Icons bind:name={changingReactionNames[3]} />
-      </div>
-      <p class="fsReactionText">Like</p>
-    </div>
-    <div class="fsIconTextCont" on:click={() =>openComment(2,5,"love")}>
-      <div class="fsReactionIcon">
-        <Icons bind:name={changingReactionNames[4]} />
-      </div>
-      <p class="fsReactionText" >Love</p>
-    </div>
-  </div>
-  <p id ="test"></p>
-</div>
-
-
-{:else if widgetComponent === 2}
-        <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}
-                    <Icons bind:name={changingReactionNames[0]}/>
-                    {/if}
-                  </div>
-            
-                  <p class="fsReactionText" id="fsHateDiv">Hate</p>
-                </div>
-            
-                <div class="fsIconTextCont"  on:click={() =>openComment(2,2,"dislike")}>
-                  <div class="fsReactionIcon">
-                    {#if reactionState}
-                    <Icons bind:name={changingReactionNames[1]}/>
-                    {:else if reactionState==false}
-                    <Icons bind:name={changingReactionNames[1]}/>
-                    {/if}
-                  </div>
-            
-                  <p class="fsReactionText" id="fsDislikeDiv">Dislike</p>
-                </div>
-                <div class="fsIconTextCont"  on:click={() =>openComment(2,3,"neutral")}>
-                  <div class="fsReactionIcon">
-                    {#if reactionState}
-                    <Icons bind:name={changingReactionNames[2]}/>
-                    {:else if reactionState==false}
-                    <Icons bind:name={changingReactionNames[2]}/>
-                    {/if}
-                  </div>
-            
-                  <p class="fsReactionText" id="fsNeutralDiv">Neutral</p>
-                </div>
-                <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="fsReactionText" id="fsLikeDiv">Like</p>
-                </div>
-                <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="fsReactionText" id="fsLoveDiv">Love</p>
-                </div>
-              </div>
-
-              <div class="fsTextAreaCont" >
-                  <div class="fsPointerDiv" id="fsPointer" ></div>
-                  <textarea class="fsTextArea" placeholder="Tell us your experience..."  on:keyup={() => commentHandler()}></textarea>
-              </div>
-
-              <div class="fsFooter">
-                {#if buttonState == false}
-                <button  class="fsCommentButtonContDisable"  disabled>
-                    <p class="fsCommentButtonTxtDisable">Send</p>
-                </button>
-                {:else if buttonState == true}
-                <button  class="fsSendButtonContCommentComp" on:click={() => openEmailCont(3)} >
-                  <p class="fsSendButtonCommentComponent">Send</p>
-                </button>
-                {/if}
-              </div>
-        </div>
-{:else if widgetComponent === 3}
-<div class="fsEmailContainer">
-  <div id="fsEmailText">
-    {feedbackData.wgEmailReqMsg}
-  </div>
-  <div id="fsEmailInputCont">
-    <input type="text" id="fsEmailTextArea" placeholder="email@domain.com" on:keyup={() => emailHandler()}>
-  </div>
-  <div class="fsEmailFooter">
-    <p id="fsSkipText" on:click={() => closeHandler(email,comment,reactionType)}><u>Skip</u></p>
-    {#if buttonState == false}
-    <fs-button class="fsCommentButtonContDisable" >
-        <p class="fsCommentButtonTxtDisable">Send</p>
-    </fs-button>
-    {:else if buttonState == true}
-    <fs-button class="fsSendButtonContCommentComp" on:click={() => closeHandler(email,comment,reactionType)} on:click={()=>endEmailInterval() }>
-      <p class="fsSendButtonCommentComponent" >Send</p>
-    </fs-button>
-  {/if}
-    
-  </div>
-</div>
-{/if}
-
-
-
+<script>
+  import Icons from "../Icons/reactionIcons.svelte";
+  import "../widgetPages/reactionpage.css";
+  export let feedbackData;
+  export let wgType;
+  $: widgetComponent = 1;
+  let reactionNames = ["hate", "dislike", "neutral", "like", "love"];
+  let changingReactionNames = reactionNames;
+  let reactionType = "";
+  let comment = "";
+  let email = "";
+  let questionAnswer = "";
+  let reactionName = "test";
+  let reactionState = true;
+  $: pointerMargin = 10;
+  $: hateDisplay = "none";
+  $: dislikeDisplay = "none";
+  $: neutralDisplay = "none";
+  $: likeDisplay = "none";
+  $: loveDisplay = "none";
+  $: buttonColor = feedbackData.wgAccentColor;
+  $: widgetQuestion = feedbackData.wgQuestion;
+  $: widgetEmailReqMsg = feedbackData.wgEmailReqMsg;
+  $: widgetPlaceholder = feedbackData.wgFeedbackPlaceholder;
+  $: 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);
+
+  let count = 0;
+  $: buttonState = false;
+  let checkTextAreaInterval;
+  let checkEmailAreaInterval;
+
+  export let closeHandler = (
+    email,
+    comment,
+    reactionType,
+    questionAnswer
+  ) => {};
+  export let closeHandlerBeforeFinishing = (email, comment, reactionType) => {};
+
+  // const commentButtonDisable = () =>{
+
+  //   let source = document.querySelector(".fsTextArea");
+
+  //   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
+    }
+    comment = "";
+    comment = input.value;
+  };
+
+  // const EmailButtonDisable = () =>{
+
+  //   let source = document.querySelector("#fsEmailTextArea");
+
+  //   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;
+    }
+  };
+
+  const changeStyle = (prevState) => {
+    if (prevState == "hate") {
+      hateDisplay = "none";
+    } else if (prevState == "dislike") {
+      dislikeDisplay = "none";
+    } else if (prevState == "neutral") {
+      neutralDisplay = "none";
+    } else if (prevState == "like") {
+      likeDisplay = "none";
+    } else if (prevState == "love") {
+      loveDisplay = "none";
+    }
+  };
+
+  const openComment = (state, rating, name) => {
+    let prevName = reactionName;
+    reactionName = name;
+
+    widgetComponent = state;
+    reactionType = String(rating);
+    changingReactionNames = [
+      "unSelectedHate",
+      "unSelectedDislike",
+      "unSelectedNeutral",
+      "unSelectedLike",
+      "unSelectedLove",
+    ];
+    closeHandlerBeforeFinishing(email, comment, reactionType);
+    if (count > 0) {
+      changeStyle(prevName);
+    }
+    // changeStyle(prevName,reactionName)
+    count++;
+    if (rating == 1) {
+      pointerMargin = 11;
+      hateDisplay = "block";
+      changingReactionNames[0] = reactionNames[0];
+      reactionState = !reactionState;
+    } else if (rating == 2) {
+      changingReactionNames[1] = reactionNames[1];
+      pointerMargin = 30;
+      dislikeDisplay = "block";
+      reactionState = !reactionState;
+    } else if (rating == 3) {
+      changingReactionNames[2] = reactionNames[2];
+      pointerMargin = 49;
+      neutralDisplay = "block";
+      reactionState = !reactionState;
+    } else if (rating == 4) {
+      changingReactionNames[3] = reactionNames[3];
+      pointerMargin = 68;
+      likeDisplay = "block";
+      reactionState = !reactionState;
+    } else if (rating == 5) {
+      changingReactionNames[4] = reactionNames[4];
+      pointerMargin = 87;
+      loveDisplay = "block";
+      reactionState = !reactionState;
+    }
+  };
+
+  const questionHandler = (state, question) => {
+    let input = document.querySelector(".fsAnswerTextArea");
+
+    if (input.value === "") {
+      buttonState = false;
+    } else {
+      buttonState = true;
+    }
+    questionAnswer = "";
+    questionAnswer = input.value;
+  };
+
+  const openEmailCont = (state) => {
+    clearInterval(checkTextAreaInterval);
+    document.querySelector(".fsTextArea").value = "";
+    buttonState = false;
+    widgetComponent = state;
+  };
+
+  const openEmailView = (state) => {
+    clearInterval(checkTextAreaInterval);
+    document.querySelector(".fsAnswerTextArea").value = "";
+    buttonState = false;
+    widgetComponent = state;
+  };
+
+  const endEmailInterval = () => {
+    clearInterval(checkEmailAreaInterval);
+    document.querySelector("#fsEmailTextArea").value = "";
+  };
+</script>
+
+{#if widgetComponent === 1}
+  <div id="fsTxt">{widgetQuestion}</div>
+  {#if wgType === 0}
+    <div class="fsReactionsContainer">
+      <div class="fsIcons">
+        <div class="fsIconTextCont" on:click={() => openComment(2, 1, "hate")}>
+          <div class="fsReactionIcon">
+            <Icons bind:name={changingReactionNames[0]} />
+          </div>
+
+          <p class="fsReactionText">Hate</p>
+        </div>
+
+        <div
+          class="fsIconTextCont"
+          on:click={() => openComment(2, 2, "dislike")}
+        >
+          <div class="fsReactionIcon">
+            <Icons bind:name={changingReactionNames[1]} />
+          </div>
+
+          <p class="fsReactionText">Dislike</p>
+        </div>
+        <div
+          class="fsIconTextCont"
+          on:click={() => openComment(2, 3, "neutral")}
+        >
+          <div class="fsReactionIcon">
+            <Icons bind:name={changingReactionNames[2]} />
+          </div>
+
+          <p class="fsReactionText">Neutral</p>
+        </div>
+        <div class="fsIconTextCont" on:click={() => openComment(2, 4, "like")}>
+          <div class="fsReactionIcon">
+            <Icons bind:name={changingReactionNames[3]} />
+          </div>
+          <p class="fsReactionText">Like</p>
+        </div>
+        <div class="fsIconTextCont" on:click={() => openComment(2, 5, "love")}>
+          <div class="fsReactionIcon">
+            <Icons bind:name={changingReactionNames[4]} />
+          </div>
+          <p class="fsReactionText">Love</p>
+        </div>
+      </div>
+    </div>
+  {:else if wgType === 1}
+    <div class="fsQuestionContainer">
+      <div class="fsTextAreaCont-qa-view">
+        <textarea
+          class="fsAnswerTextArea"
+          placeholder="Answer Here..."
+          on:keyup={() => questionHandler()}
+        />
+      </div>
+      <div class="fsFooter">
+        {#if buttonState == false}
+          <button class="fsCommentButtonContDisable" disabled>
+            <p class="fsCommentButtonTxtDisable">Send</p>
+          </button>
+        {:else if buttonState == true}
+          <button
+            class="fsSendButtonContCommentComp"
+            on:click={() => openEmailView(3)}
+          >
+            <p class="fsSendButtonCommentComponent">Send</p>
+          </button>
+        {/if}
+      </div>
+    </div>
+  {/if}
+{:else if widgetComponent === 2 && wgType !== 1}
+  <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}
+            <Icons bind:name={changingReactionNames[0]} />
+          {/if}
+        </div>
+
+        <p class="fsReactionText" id="fsHateDiv">Hate</p>
+      </div>
+
+      <div class="fsIconTextCont" on:click={() => openComment(2, 2, "dislike")}>
+        <div class="fsReactionIcon">
+          {#if reactionState}
+            <Icons bind:name={changingReactionNames[1]} />
+          {:else if reactionState == false}
+            <Icons bind:name={changingReactionNames[1]} />
+          {/if}
+        </div>
+
+        <p class="fsReactionText" id="fsDislikeDiv">Dislike</p>
+      </div>
+      <div class="fsIconTextCont" on:click={() => openComment(2, 3, "neutral")}>
+        <div class="fsReactionIcon">
+          {#if reactionState}
+            <Icons bind:name={changingReactionNames[2]} />
+          {:else if reactionState == false}
+            <Icons bind:name={changingReactionNames[2]} />
+          {/if}
+        </div>
+
+        <p class="fsReactionText" id="fsNeutralDiv">Neutral</p>
+      </div>
+      <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="fsReactionText" id="fsLikeDiv">Like</p>
+      </div>
+      <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="fsReactionText" id="fsLoveDiv">Love</p>
+      </div>
+    </div>
+
+    <div class={wgType === 0 ? "fsTextAreaCont" : "fsTextAreaCont-qa-view"}>
+      <div class="fsPointerDiv" id="fsPointer" />
+      <textarea
+        class="fsTextArea"
+        placeholder={widgetPlaceholder}
+        on:keyup={() => commentHandler()}
+      />
+    </div>
+
+    <div class="fsFooter">
+      {#if buttonState == false}
+        <button class="fsCommentButtonContDisable" disabled>
+          <p class="fsCommentButtonTxtDisable">Send</p>
+        </button>
+      {:else if buttonState == true}
+        <button
+          class="fsSendButtonContCommentComp"
+          on:click={() => openEmailCont(3)}
+        >
+          <p class="fsSendButtonCommentComponent">Send</p>
+        </button>
+      {/if}
+    </div>
+  </div>
+{:else if widgetComponent === 3}
+  <div class="fsEmailContainer">
+    <div id="fsEmailText">
+      {widgetEmailReqMsg}
+    </div>
+    <div id="fsEmailInputCont">
+      <input
+        type="text"
+        id="fsEmailTextArea"
+        placeholder="email@domain.com"
+        on:keyup={() => emailHandler()}
+      />
+    </div>
+    <div class="fsEmailFooter">
+      <p
+        id="fsSkipText"
+        on:click={() =>
+          closeHandler(email, comment, reactionType, questionAnswer)}
+      >
+        <u>Skip</u>
+      </p>
+      {#if buttonState == false}
+        <button class="fsCommentButtonContDisable" disabled>
+          <p class="fsCommentButtonTxtDisable">Send</p>
+        </button>
+      {:else if buttonState == true}
+        <button
+          class="fsSendButtonContCommentComp"
+          on:click={() =>
+            closeHandler(email, comment, reactionType, questionAnswer)}
+          on:click={() => endEmailInterval()}
+        >
+          <p class="fsSendButtonCommentComponent">Send</p>
+        </button>
+      {/if}
+    </div>
+  </div>
+{/if}