@fullsession.io/fs-feedback-widget 1.8.0 → 1.10.0

package/package.json

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

package/src/App.svelte

@@ -157,13 +157,21 @@
         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),
+        comment: comment,
+        type: widgetType,
+      };
     }
 
     let event = new CustomEvent("fbEvent", {
@@ -242,9 +250,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

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,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
+
 .fs-side {
   width: 100%;
   display: flex;
@@ -12,7 +14,7 @@
   align-items: var(--wgPositionHorizintal);
   padding: 0;
   z-index: 100000;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .fs-feedback-modal {
@@ -23,7 +25,7 @@
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 100000;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .fs-thanks-txt {
@@ -36,7 +38,6 @@
 }
 
 fsContainerApp {
-  width: 776px;
   height: 415px;
   display: flex;
   flex-direction: var(--wgPositionVertical);
@@ -49,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);
@@ -109,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);
@@ -145,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");
 
@@ -259,8 +266,23 @@
         {/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(2, 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}
+{:else if widgetComponent === 2 && wgType === 0}
   <div class="fsCommentContainer">
     <div class="fsIcons-second">
       <div class="fsIconTextCont" on:click={() => openComment(2, 1, "hate")}>
@@ -343,6 +365,24 @@
       {/if}
     </div>
   </div>
+{:else if widgetComponent === 2 && wgType === 2}
+  <div id="fsTxt">{widgetQuestion}</div>
+  <div class="fsTextAreaCont-qa-view">
+    <textarea
+      class="fsTextArea"
+      placeholder={widgetPlaceholder}
+      on:keyup={() => commentHandler()}
+    />
+  </div>
+
+  <div class="fsFooter">
+    <button
+      class="fsSendButtonContCommentComp"
+      on:click={() => openEmailCont(3)}
+    >
+      <p class="fsSendButtonCommentComponent">Next</p>
+    </button>
+  </div>
 {:else if widgetComponent === 3}
   <div class="fsEmailContainer">
     <div id="fsEmailText">

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,13 +36,13 @@
   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;
 }
 
@@ -50,7 +57,7 @@
 .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,7 +91,7 @@
   height: 140px;
   background-color: #eaeaeb;
   margin-top: 10px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .fsTextArea, .fsAnswerTextArea {
@@ -96,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 {
@@ -109,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;
 
 }
 
@@ -124,7 +131,7 @@
   margin-right: 11px;
   cursor: pointer;
   border: 0px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Montserrat', sans-serif;
 
 }
 
@@ -139,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;
 
 }
 
@@ -149,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;
 
 }
 
@@ -157,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;
 
 }
 
@@ -167,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 {
@@ -205,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 {
@@ -218,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 {
@@ -227,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 {
@@ -239,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 {
@@ -247,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;
 
 }
 
@@ -258,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;
 }