@fullsession.io/fs-feedback-widget 1.7.6 → 1.9.0

package/package.json

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

package/src/App.svelte

@@ -157,13 +157,20 @@
         reaction: Number(reactionType),
         type: widgetType,
       };
-    } else {
+    } else if (widgetType === 1) {
       widgetResponse = {
         id: widgetId,
         email: email,
         questionAnswer: questionAnswer,
         type: widgetType,
       };
+    } else if (widgetType === 2) {
+      widgetResponse = {
+        id: widgetId,
+        email: email,
+        reaction: Number(reactionType),
+        type: widgetType,
+      };
     }
 
     let event = new CustomEvent("fbEvent", {
@@ -225,8 +232,8 @@
 </script>
 
 <fsContainer
-  class={!buttonVisible && widgetDisplayMode == 1 ? "modal" : "side"}
-  style="position: 10px"
+  class={!buttonVisible && widgetDisplayMode == 1 ? "fs-feedback-modal" : "fs-side"}
+  style="position: fixed; top: 0; right: 0; bottom: 0; left: 0;"
   dir="ltr"
 >
   {#if buttonVisible}
@@ -242,9 +249,10 @@
     <div
       class="fsCont"
       class:fsContModal={widgetDisplayMode === 1}
+      class:fsContNps={widgetType === 2}
       in:transition={transitionInParams}
     >
-      <div class="fsCloseCont" on:click={closeWidget}>
+      <div class="fsCloseCont" class:fsNpsCloseCont={widgetType === 2} on:click={closeWidget}>
         <p id="fsCloseIcon">X</p>
       </div>
       <ReactionPage
@@ -259,7 +267,7 @@
       <div class="fsCloseCont" on:click={closeThanksMessage}>
         <p id="fsCloseIcon">X</p>
       </div>
-      <div class="thanks-txt">
+      <div class="fs-thanks-txt">
         {widgetThanksMsg}
       </div>
     </div>

package/src/Icons/reactionIcons.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { icons_1, icons_2, icons_3, icons_4 } from "./reactionSvgs/icons.js";
+  import { icons_1, icons_2, icons_3 } from "./reactionSvgs/icons.js";
   export let name;
   export let focusable = false;
   export let emotIconType;

package/src/widgetPages/App.css

@@ -1,4 +1,6 @@
-.side {
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
+
+.fs-side {
   width: 100%;
   display: flex;
   flex-direction: var(--wgPositionVertical);
@@ -12,23 +14,21 @@
   align-items: var(--wgPositionHorizintal);
   padding: 0;
   z-index: 100000;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
-.modal {
+.fs-feedback-modal {
   display: flex !important;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
-  position: var(--positionState);
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 100000;
-  pointer-events: none;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
-.thanks-txt {
+.fs-thanks-txt {
   width: 61%;
   padding: 20px 0;
   text-align: center;
@@ -38,7 +38,6 @@
 }
 
 fsContainerApp {
-  width: 776px;
   height: 415px;
   display: flex;
   flex-direction: var(--wgPositionVertical);
@@ -51,14 +50,14 @@ fsContainerApp {
   align-items: var(--wgPositionHorizintal);
   padding: 0;
   z-index: 100000;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .fsWidget {
   pointer-events: auto;
   background-color: var(--widgetColor);
   width: 34px;
-  height: 112px;
+  height: 120px;
   border-top-left-radius: var(--widgetLeftSideBorder);
   border-bottom-left-radius: var(--widgetLeftSideBorder);
   border-top-right-radius: var(--widgetRightSideBorder);
@@ -111,11 +110,15 @@ fsContainerApp {
   margin: 0;
 }
 
+.fsContNps {
+  padding: 20px;
+  width: 400px !important;
+}
+
 .fsThanksMessageCont {
   display: flex;
   flex-direction: column;
   pointer-events: auto;
-  width: 320px;
   height: auto;
   background-color: rgb(255, 255, 255);
   margin-right: var(--widgetMarginRight);
@@ -147,6 +150,10 @@ fsContainerApp {
   cursor: pointer;
 }
 
+.fsNpsCloseCont {
+  margin: -35px 0 0 auto !important;
+}
+
 
 
 

package/src/widgetPages/reactionPage.svelte

@@ -156,6 +156,13 @@
     }
   };
 
+  const openEmailStep = (state, rating) => {
+    widgetComponent = state;
+    reactionType = String(rating);
+
+    closeHandlerBeforeFinishing(email, comment, reactionType);
+  };
+
   const questionHandler = (state, question) => {
     let input = document.querySelector(".fsAnswerTextArea");
 
@@ -198,7 +205,7 @@
             <Icons bind:name={changingReactionNames[0]} bind:emotIconType={widgetEmotIconType} />
           </div>
 
-          <p class="fsReactionText" class:icons3-text-2={widgetEmotIconType === "2"}>Hate</p>
+          <p class="fsReactionText" class:fs-icons3-text-2={widgetEmotIconType === "2"}>Hate</p>
         </div>
 
         <div
@@ -209,7 +216,7 @@
             <Icons bind:name={changingReactionNames[1]} bind:emotIconType={widgetEmotIconType} />
           </div>
 
-          <p class="fsReactionText" class:icons3-text={widgetEmotIconType === "2"}>Dislike</p>
+          <p class="fsReactionText" class:fs-icons3-text={widgetEmotIconType === "2"}>Dislike</p>
         </div>
         <div
           class="fsIconTextCont"
@@ -225,13 +232,13 @@
           <div class="fsReactionIcon">
             <Icons bind:name={changingReactionNames[3]} bind:emotIconType={widgetEmotIconType} />
           </div>
-          <p class="fsReactionText" class:icons3-text={widgetEmotIconType === "2"}>Like</p>
+          <p class="fsReactionText" class:fs-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>
+          <p class="fsReactionText" class:fs-icons3-text-2={widgetEmotIconType === "2"}>Love</p>
         </div>
       </div>
     </div>
@@ -259,6 +266,21 @@
         {/if}
       </div>
     </div>
+  {:else if wgType === 2}
+    <div class="fsNpsContainer">
+      <div class="fsNpsNumbers">
+        {#each {length: 11} as _, i}
+          <div class={i > 8 ? "fsNpsNumber fsHighNps" : i > 6 ? "fsNpsNumber fsMediumNps" : "fsNpsNumber fsLowNps"}
+            on:click={() => openEmailStep(3, i)}>
+            <span>{i}</span>
+          </div>
+        {/each}
+      </div>
+      <div class="fsNpsFooter">
+        <div class="fsNpsText">not likely at all</div>
+        <div class="fsNpsText">extremely likely </div>
+      </div>
+    </div>
   {/if}
 {:else if widgetComponent === 2 && wgType !== 1}
   <div class="fsCommentContainer">
@@ -272,7 +294,7 @@
           {/if}
         </div>
 
-        <p class="fsReactionText" id="fsHateDiv" class:icons3-text-2={widgetEmotIconType === "2"}>Hate</p>
+        <p class="fsReactionText" id="fsHateDiv" class:fs-icons3-text-2={widgetEmotIconType === "2"}>Hate</p>
       </div>
 
       <div class="fsIconTextCont" on:click={() => openComment(2, 2, "dislike")}>
@@ -284,7 +306,7 @@
           {/if}
         </div>
 
-        <p class="fsReactionText" id="fsDislikeDiv" class:icons3-text={widgetEmotIconType === "2"}>Dislike</p>
+        <p class="fsReactionText" id="fsDislikeDiv" class:fs-icons3-text={widgetEmotIconType === "2"}>Dislike</p>
       </div>
       <div class="fsIconTextCont" on:click={() => openComment(2, 3, "neutral")}>
         <div class="fsReactionIcon">
@@ -305,7 +327,7 @@
             <Icons bind:name={changingReactionNames[3]} bind:emotIconType={widgetEmotIconType} />
           {/if}
         </div>
-        <p class="fsReactionText" id="fsLikeDiv" class:icons3-text={widgetEmotIconType === "2"}>Like</p>
+        <p class="fsReactionText" id="fsLikeDiv" class:fs-icons3-text={widgetEmotIconType === "2"}>Like</p>
       </div>
       <div class="fsIconTextCont">
         <div class="fsReactionIcon" on:click={() => openComment(2, 5, "love")}>
@@ -315,7 +337,7 @@
             <Icons bind:name={changingReactionNames[4]} bind:emotIconType={widgetEmotIconType} />
           {/if}
         </div>
-        <p class="fsReactionText" id="fsLoveDiv" class:icons3-text-2={widgetEmotIconType === "2"}>Love</p>
+        <p class="fsReactionText" id="fsLoveDiv" class:fs-icons3-text-2={widgetEmotIconType === "2"}>Love</p>
       </div>
     </div>
 

package/src/widgetPages/reactionpage.css

@@ -1,9 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
+
 .fsReactionsContainer {
   pointer-events: auto;
   display: flex;
   flex-direction: column;
   height: fit-content;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .fsIcons {
@@ -15,12 +17,17 @@
 }
 
 #fsTxt {
-  align-self: center;
-  font-size: 17px;
-  display: block;
+  color: #1513A0;
+  text-align: center;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 15px;
   text-align: center;
-  width: 61%;
+  align-self: center;
   overflow: hidden;
+  width: 80% !important;
+  margin-top: 5px;
 }
 
 .fsIconTextCont {
@@ -29,28 +36,28 @@
   flex-direction: column;
   align-items: center;
   height: 22px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .fsReactionText {
   font-size: 12px;
   display: none;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
   margin-top: 0px;
 }
 
-.icons3-text {
+.fs-icons3-text {
   padding-left: 5px;
 }
 
-.icons3-text-2 {
+.fs-icons3-text-2 {
   padding-left: 3px;
 }
 
 .fsIconTextCont:hover {
   pointer-events: auto;
   cursor: pointer;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .fsReactionIcon:hover+.fsReactionText {
@@ -64,7 +71,7 @@
   display: flex;
   flex-direction: column;
   pointer-events: auto;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
   height: auto;
   padding-bottom: 10px;
 }
@@ -75,7 +82,7 @@
   height: 140px;
   background-color: #eaeaeb;
   margin-top: 17%;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .fsTextAreaCont-qa-view {
@@ -84,11 +91,7 @@
   height: 140px;
   background-color: #eaeaeb;
   margin-top: 10px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-.txt-type-view {
-  margin-top: 10px;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .fsTextArea, .fsAnswerTextArea {
@@ -100,7 +103,7 @@
   outline: none;
   margin-top: 4%;
   resize: none;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .fsTextarea:focus {
@@ -113,7 +116,7 @@
   font-size: 12px;
   text-align: center;
   margin-top: 6px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 
 }
 
@@ -128,7 +131,7 @@
   margin-right: 11px;
   cursor: pointer;
   border: 0px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 
 }
 
@@ -143,7 +146,7 @@
   margin-right: 11px;
   cursor: not-allowed;
   border: 0px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 
 }
 
@@ -153,7 +156,7 @@
   font-size: 12px;
   text-align: center;
   margin-top: 6px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 
 }
 
@@ -161,7 +164,7 @@
   pointer-events: auto;
   display: flex;
   justify-content: flex-end;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 
 }
 
@@ -171,7 +174,7 @@
   flex-direction: row;
   justify-content: space-evenly;
   margin-top: 6%;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .fsPointerDiv {
@@ -209,7 +212,7 @@
   display: flex;
   flex-direction: column;
   height: fit-content;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 #fsEmailInputCont {
@@ -222,7 +225,7 @@
   /* align-items: center; */
   justify-content: center;
   margin-top: 10%;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 #fsEmailTextArea {
@@ -231,7 +234,7 @@
   border: 0px;
   background-color: #eaeaeb;
   outline: none;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 #fsEmailText {
@@ -243,7 +246,7 @@
   padding-top: 20px;
   line-height: 1.29;
   font-size: 17px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .fsEmailFooter {
@@ -251,7 +254,7 @@
   display: flex;
   justify-content: flex-end;
   flex-direction: row;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 
 }
 
@@ -262,13 +265,69 @@
   margin-top: 6%;
   margin-right: 4%;
   letter-spacing: normal;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 
 
 }
 
 #fsSkipText:hover {
   color: #666666;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
+
+}
+
+.fsNpsContainer {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.fsNpsNumbers {
+  display: flex;
+  justify-content: space-between;
+}
+
+.fsHighNps {
+  background: #50C099;
+}
+
+.fsLowNps {
+  background: #F9837C;
+}
+
+.fsMediumNps {
+  background: #FFC565;
+}
+
+.fsNpsNumber {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #FFF;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 5px 10px;
+  border-radius: 3px;
+  border: 0.36px solid #CBD4E6;
+  cursor: pointer;
+  transition: 0.4s ease;
+}
+
+.fsNpsNumber:hover {
+  opacity: 0.6;
+}
+
+.fsNpsFooter {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 9px;
+}
 
+.fsNpsText {
+  color: var(--dark-grey, #6D6D6D);
+  font-family: 'Montserrat', sans-serif;
+  font-size: 10px;
+  font-weight: 500;
 }