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

package/package.json

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

package/src/App.svelte

@@ -169,6 +169,7 @@
         id: widgetId,
         email: email,
         reaction: Number(reactionType),
+        comment: comment,
         type: widgetType,
       };
     }
@@ -233,7 +234,6 @@
 
 <fsContainer
   class={!buttonVisible && widgetDisplayMode == 1 ? "fs-feedback-modal" : "fs-side"}
-  style="position: fixed; top: 0; right: 0; bottom: 0; left: 0;"
   dir="ltr"
 >
   {#if buttonVisible}

package/src/widgetPages/App.css

@@ -18,6 +18,8 @@
 }
 
 .fs-feedback-modal {
+  position: var(--positionState);
+  inset: 0;
   display: flex !important;
   justify-content: center;
   align-items: center;
@@ -28,6 +30,7 @@
   font-family: 'Montserrat', sans-serif;
 }
 
+
 .fs-thanks-txt {
   width: 61%;
   padding: 20px 0;
@@ -111,7 +114,6 @@ fsContainerApp {
 }
 
 .fsContNps {
-  padding: 20px;
   width: 400px !important;
 }
 
@@ -130,10 +132,9 @@ fsContainerApp {
 #fsCloseIcon {
   font-size: 15px;
   color: #ffff;
-  font-weight: 600;
+  font-weight: 300;
   cursor: pointer;
   margin-top: 2px;
-
 }
 
 .fsCloseCont {
@@ -151,7 +152,7 @@ fsContainerApp {
 }
 
 .fsNpsCloseCont {
-  margin: -35px 0 0 auto !important;
+  margin-left: 90% !important;
 }
 
 

package/src/widgetPages/reactionPage.svelte

@@ -271,7 +271,7 @@
       <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)}>
+            on:click={() => openEmailStep(2, i)}>
             <span>{i}</span>
           </div>
         {/each}
@@ -282,7 +282,7 @@
       </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")}>
@@ -365,6 +365,24 @@
       {/if}
     </div>
   </div>
+{:else if widgetComponent === 2 && wgType === 2}
+  <div id="fsTxtNps">Tell us more about your experience</div>
+  <div class="fsTextAreaCont-qa-view">
+    <textarea
+      class="fsTextArea"
+      placeholder="Answer Here..."
+      on:keyup={() => commentHandler()}
+    />
+  </div>
+
+  <div class="fsFooter">
+    <button
+      class="fsSendButtonContCommentComp fsNpsButton"
+      on:click={() => openEmailCont(3)}
+    >
+      <p class="fsSendButtonCommentComponent">Send</p>
+    </button>
+  </div>
 {:else if widgetComponent === 3}
   <div class="fsEmailContainer">
     <div id="fsEmailText">

package/src/widgetPages/reactionpage.css

@@ -30,6 +30,18 @@
   margin-top: 5px;
 }
 
+#fsTxtNps {
+  color: #1513A0;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 15px;
+  overflow: hidden;
+  width: 80% !important;
+  margin-top: 5px;
+  margin-left: 20px;
+}
+
 .fsIconTextCont {
   pointer-events: auto;
   display: flex;
@@ -39,6 +51,10 @@
   font-family: 'Montserrat', sans-serif;
 }
 
+.fsNpsButton {
+  margin-bottom: 10px;
+}
+
 .fsReactionText {
   font-size: 12px;
   display: none;
@@ -281,6 +297,7 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
+  padding: 0 20px 20px;
 }
 
 .fsNpsNumbers {