@fullsession.io/fs-feedback-widget 1.7.2 → 1.7.3

package/src/widgetPages/reactionPage.svelte

@@ -1,383 +1,383 @@
-<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;
-  $: 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);
-
-  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]} bind:emotIconType={widgetEmotIconType} />
-          </div>
-
-          <p class="fsReactionText" class:icons3-text-2={widgetEmotIconType === "2"}>Hate</p>
-        </div>
-
-        <div
-          class="fsIconTextCont"
-          on:click={() => openComment(2, 2, "dislike")}
-        >
-          <div class="fsReactionIcon">
-            <Icons bind:name={changingReactionNames[1]} bind:emotIconType={widgetEmotIconType} />
-          </div>
-
-          <p class="fsReactionText" class:icons3-text={widgetEmotIconType === "2"}>Dislike</p>
-        </div>
-        <div
-          class="fsIconTextCont"
-          on:click={() => openComment(2, 3, "neutral")}
-        >
-          <div class="fsReactionIcon">
-            <Icons bind:name={changingReactionNames[2]} bind:emotIconType={widgetEmotIconType} />
-          </div>
-
-          <p class="fsReactionText">Neutral</p>
-        </div>
-        <div class="fsIconTextCont" on:click={() => openComment(2, 4, "like")}>
-          <div class="fsReactionIcon">
-            <Icons bind:name={changingReactionNames[3]} bind:emotIconType={widgetEmotIconType} />
-          </div>
-          <p class="fsReactionText" class:icons3-text={widgetEmotIconType === "2"}>Like</p>
-        </div>
-        <div class="fsIconTextCont" on:click={() => openComment(2, 5, "love")}>
-          <div class="fsReactionIcon">
-            <Icons bind:name={changingReactionNames[4]} bind:emotIconType={widgetEmotIconType} />
-          </div>
-          <p class="fsReactionText" class:icons3-text-2={widgetEmotIconType === "2"}>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]} bind:emotIconType={widgetEmotIconType} />
-          {:else if reactionState == false}
-            <Icons bind:name={changingReactionNames[0]} bind:emotIconType={widgetEmotIconType} />
-          {/if}
-        </div>
-
-        <p class="fsReactionText" id="fsHateDiv" class:icons3-text-2={widgetEmotIconType === "2"}>Hate</p>
-      </div>
-
-      <div class="fsIconTextCont" on:click={() => openComment(2, 2, "dislike")}>
-        <div class="fsReactionIcon">
-          {#if reactionState}
-            <Icons bind:name={changingReactionNames[1]} bind:emotIconType={widgetEmotIconType} />
-          {:else if reactionState == false}
-            <Icons bind:name={changingReactionNames[1]} bind:emotIconType={widgetEmotIconType} />
-          {/if}
-        </div>
-
-        <p class="fsReactionText" id="fsDislikeDiv" class:icons3-text={widgetEmotIconType === "2"}>Dislike</p>
-      </div>
-      <div class="fsIconTextCont" on:click={() => openComment(2, 3, "neutral")}>
-        <div class="fsReactionIcon">
-          {#if reactionState}
-            <Icons bind:name={changingReactionNames[2]} bind:emotIconType={widgetEmotIconType} />
-          {:else if reactionState == false}
-            <Icons bind:name={changingReactionNames[2]} bind:emotIconType={widgetEmotIconType} />
-          {/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]} bind:emotIconType={widgetEmotIconType} />
-          {:else if reactionState == false}
-            <Icons bind:name={changingReactionNames[3]} bind:emotIconType={widgetEmotIconType} />
-          {/if}
-        </div>
-        <p class="fsReactionText" id="fsLikeDiv" class:icons3-text={widgetEmotIconType === "2"}>Like</p>
-      </div>
-      <div class="fsIconTextCont">
-        <div class="fsReactionIcon" on:click={() => openComment(2, 5, "love")}>
-          {#if reactionState}
-            <Icons bind:name={changingReactionNames[4]} bind:emotIconType={widgetEmotIconType} />
-          {:else if reactionState == false}
-            <Icons bind:name={changingReactionNames[4]} bind:emotIconType={widgetEmotIconType} />
-          {/if}
-        </div>
-        <p class="fsReactionText" id="fsLoveDiv" class:icons3-text-2={widgetEmotIconType === "2"}>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}
+<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;
+  $: 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);
+
+  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]} bind:emotIconType={widgetEmotIconType} />
+          </div>
+
+          <p class="fsReactionText" class:icons3-text-2={widgetEmotIconType === "2"}>Hate</p>
+        </div>
+
+        <div
+          class="fsIconTextCont"
+          on:click={() => openComment(2, 2, "dislike")}
+        >
+          <div class="fsReactionIcon">
+            <Icons bind:name={changingReactionNames[1]} bind:emotIconType={widgetEmotIconType} />
+          </div>
+
+          <p class="fsReactionText" class:icons3-text={widgetEmotIconType === "2"}>Dislike</p>
+        </div>
+        <div
+          class="fsIconTextCont"
+          on:click={() => openComment(2, 3, "neutral")}
+        >
+          <div class="fsReactionIcon">
+            <Icons bind:name={changingReactionNames[2]} bind:emotIconType={widgetEmotIconType} />
+          </div>
+
+          <p class="fsReactionText">Neutral</p>
+        </div>
+        <div class="fsIconTextCont" on:click={() => openComment(2, 4, "like")}>
+          <div class="fsReactionIcon">
+            <Icons bind:name={changingReactionNames[3]} bind:emotIconType={widgetEmotIconType} />
+          </div>
+          <p class="fsReactionText" class:icons3-text={widgetEmotIconType === "2"}>Like</p>
+        </div>
+        <div class="fsIconTextCont" on:click={() => openComment(2, 5, "love")}>
+          <div class="fsReactionIcon">
+            <Icons bind:name={changingReactionNames[4]} bind:emotIconType={widgetEmotIconType} />
+          </div>
+          <p class="fsReactionText" class:icons3-text-2={widgetEmotIconType === "2"}>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]} bind:emotIconType={widgetEmotIconType} />
+          {:else if reactionState == false}
+            <Icons bind:name={changingReactionNames[0]} bind:emotIconType={widgetEmotIconType} />
+          {/if}
+        </div>
+
+        <p class="fsReactionText" id="fsHateDiv" class:icons3-text-2={widgetEmotIconType === "2"}>Hate</p>
+      </div>
+
+      <div class="fsIconTextCont" on:click={() => openComment(2, 2, "dislike")}>
+        <div class="fsReactionIcon">
+          {#if reactionState}
+            <Icons bind:name={changingReactionNames[1]} bind:emotIconType={widgetEmotIconType} />
+          {:else if reactionState == false}
+            <Icons bind:name={changingReactionNames[1]} bind:emotIconType={widgetEmotIconType} />
+          {/if}
+        </div>
+
+        <p class="fsReactionText" id="fsDislikeDiv" class:icons3-text={widgetEmotIconType === "2"}>Dislike</p>
+      </div>
+      <div class="fsIconTextCont" on:click={() => openComment(2, 3, "neutral")}>
+        <div class="fsReactionIcon">
+          {#if reactionState}
+            <Icons bind:name={changingReactionNames[2]} bind:emotIconType={widgetEmotIconType} />
+          {:else if reactionState == false}
+            <Icons bind:name={changingReactionNames[2]} bind:emotIconType={widgetEmotIconType} />
+          {/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]} bind:emotIconType={widgetEmotIconType} />
+          {:else if reactionState == false}
+            <Icons bind:name={changingReactionNames[3]} bind:emotIconType={widgetEmotIconType} />
+          {/if}
+        </div>
+        <p class="fsReactionText" id="fsLikeDiv" class:icons3-text={widgetEmotIconType === "2"}>Like</p>
+      </div>
+      <div class="fsIconTextCont">
+        <div class="fsReactionIcon" on:click={() => openComment(2, 5, "love")}>
+          {#if reactionState}
+            <Icons bind:name={changingReactionNames[4]} bind:emotIconType={widgetEmotIconType} />
+          {:else if reactionState == false}
+            <Icons bind:name={changingReactionNames[4]} bind:emotIconType={widgetEmotIconType} />
+          {/if}
+        </div>
+        <p class="fsReactionText" id="fsLoveDiv" class:icons3-text-2={widgetEmotIconType === "2"}>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}