@fullsession.io/fs-feedback-widget 1.3.2 → 1.3.5

package/dist/publicextra.css

@@ -0,0 +1,298 @@
+fsContainer{
+    width: 100%;
+    display: flex;
+    flex-direction: var(--wgPositionVertical);
+    position: fixed;
+    top: 0; right: 0; bottom: 0; left: 0;
+	height: 100%;
+  pointer-events: none;
+  align-items: var(--wgPositionHorizintal);
+  padding: 0;
+  z-index: 100000;
+  }
+  .fsWidget {
+    pointer-events: auto;
+    background-color: var(--widgetColor);
+    width: 34px;
+    height: 112px;
+    border-top-left-radius:var(--widgetLeftSideBorder) ;
+    border-bottom-left-radius: var(--widgetLeftSideBorder);
+    border-top-right-radius: var(--widgetRightSideBorder) ;
+    border-bottom-right-radius: var(--widgetRightSideBorder);
+    box-shadow: 0.2px 0.2px 0.2px rgb(133, 130, 130);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    cursor: pointer;
+    margin-top: 5px;
+  }
+  #fsMainIcon {
+    width: 60%;
+    margin-left: 4%;
+    cursor: pointer;
+  }
+  #fsFeedbackTxt {
+    color: var(--widgetTextColor);
+    font-size: 15px;
+    writing-mode: vertical-lr;
+    transform: rotate(180deg);
+    cursor: pointer;
+    font-size-adjust: 0.40;
+  }
+  .fsWidget:hover {
+    width: 35px;
+    -webkit-box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
+    box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
+  }
+  .fsCont {
+    pointer-events: auto;
+    width: 320px;
+    height: fit-content;
+    background-color: rgb(255, 255, 255);
+ 	margin-right: var(--widgetMarginRight);
+   margin-left: var(--widgetMarginLeft);
+	-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px; 
+	box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
+  }
+  .fsThanksMessageCont{
+    pointer-events: auto;
+    width: 320px;
+    height: 104px;
+    background-color: rgb(255, 255, 255);
+ 	margin-right: var(--widgetMarginRight);
+   margin-left: var(--widgetMarginLeft);
+	-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px; 
+	box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
+  }
+  #fsCloseIcon{
+	  font-size: 15px;
+	  color: #ffff;
+	  font-weight: 600;
+	  font-family: system-ui;
+  	cursor: pointer;
+	  
+  }
+  .fsCloseCont{
+    pointer-events: auto;
+	  background-color: #4d5167;
+	  width: 27px;
+    height: 27px;
+	border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: -15px;
+    margin-left: 85%;
+	cursor: pointer;
+	}
+
+  
+  
+ 
+
+  /* @media (min-width: 640px) {
+    body {
+      max-width: none;
+    }
+  } */.fsReactionsContainer {
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    height: 190px;
+  }
+  .fsIcons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin-top: 11%;
+  }
+  #fsTxt {
+    font-size: 17px;
+    display: flex;
+    text-align: center;
+    margin-top: 5%;
+    width: 61%;
+    margin-left: 19%;
+  }
+
+  .fsIconTextCont {
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 22px;
+  }
+
+  .fsReactionText {
+    font-size: 12px;
+    display: none;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin-top: 0px;
+    
+  }
+  .fsIconTextCont:hover{
+    pointer-events: auto;
+    cursor: pointer;
+  }
+  .fsReactionIcon:hover + .fsReactionText {
+    display: block;
+    opacity: 0.8;
+  }
+
+  .fsCommentContainer{
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    height: 291px;
+    pointer-events: auto;
+  }
+  .fsTextAreaCont{
+    pointer-events: auto;
+      width: 100%;
+      height: 140px;
+      background-color: #eaeaeb;
+      margin-top: 17%;
+  }
+  .fsTextArea{
+    border: 0px;
+    width: 85%;
+    height: 120px;
+    background-color: #eaeaeb;
+    margin-left: 6%;
+    outline: none;
+    margin-top: 4%;
+    resize: none;
+
+  }
+  .fsSendButtonCommentComponent{
+    pointer-events: auto;
+      color: #ffff;
+      font-size: 12px;
+      text-align: center;
+      margin-top: 7px;
+      
+  }
+  .fsSendButtonContCommentComp{
+    pointer-events: auto;
+      background-color: var(--buttonColor);
+      width: 50px;
+      height: 29px;
+      box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
+      border-radius: 3px;
+      margin-top: 13px;
+    margin-right: 11px;
+    cursor: pointer;
+    border: 0px;
+    
+  }
+  
+.fsCommentButtonContDisable{
+    pointer-events: auto;
+  background-color: #cccccc;
+      width: 50px;
+      height: 29px;
+      box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
+      border-radius: 3px;
+      margin-top: 13px;
+    margin-right: 11px;
+    cursor:not-allowed;
+    border: 0px;
+}
+.fsCommentButtonTxtDisable{
+    pointer-events: auto;
+      color: black;
+      font-size: 12px;
+      text-align: center;
+      margin-top: 7px;
+}
+  .fsFooter{
+    pointer-events: auto;
+      display: flex;
+      justify-content: flex-end;
+  }
+
+  .fsIcons-second{
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin-top: 6%;
+  }
+  .fsPointerDiv{
+    width: 0;
+    height: 0;
+    border-left: 3px solid transparent;
+    margin-top: -8px;
+    border-right: 5px solid transparent;
+    border-bottom: 8px solid #eaeaeb;
+    margin-left: var(--pointerMargin);
+
+
+  }
+  #fsHateDiv{
+    display: var(--hateDisplay);
+  }
+  #fsDislikeDiv{
+    display: var(--dislikeDisplay);
+  }
+  #fsNeutralDiv{
+    display: var(--neutralDisplay);
+  }
+  #fsLikeDiv{
+    display: var(--likeDisplay);
+  }
+  #fsLoveDiv{
+    display: var(--loveDisplay);
+  }
+  .fsEmailContainer{
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    height: 220px;
+  }
+  #fsEmailInputCont{
+    pointer-events: auto;
+    pointer-events: auto;
+    width: 100%;
+    height: 46px;
+    background-color: #eaeaeb;
+    display: flex;
+    /* align-items: center; */
+    justify-content: center;
+    margin-top: 10%;
+
+  }
+  #fsEmailTextArea{
+    pointer-events: auto;
+    text-align: center;
+    border: 0px;
+    background-color: #eaeaeb;
+    outline: none;
+  }
+ #fsEmailText{
+    width: 80%;
+    text-align: center;
+    margin-left: 11%;
+    margin-top: 8%;
+    line-height: 1.29;
+    font-size: 17px;
+ }
+ .fsEmailFooter{
+    pointer-events: auto;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+ }
+ #fsSkipText{
+  color: #908f8f;
+    cursor: pointer;
+    font-size: 13px;
+    margin-top: 6%;
+    margin-right: 4%;
+    letter-spacing: normal;
+
+ }
+ #fsSkipText:hover{
+   color: #666666;
+ }

package/package.json

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

package/src/App.svelte

@@ -1,164 +1,220 @@
 <script>
   import MainIcon from "./Icons/mainIcon.svelte";
-  import ReactionPage  from "./widgetPages/reactionPage.svelte"
+  import ReactionPage from "./widgetPages/reactionPage.svelte";
   export let feedback;
   console.log(feedback);
   import { fly } from "svelte/transition";
-  import "../src/widgetPages/App.css"
-  $:widgetColor = feedback.wgAccentColor;
-  $:document.documentElement.style.setProperty('--widgetColor', widgetColor);
-  let widgetTextColor="";
+  import "../src/widgetPages/App.css";
+  $: widgetColor = feedback.wgAccentColor;
+  $: document.documentElement.style.setProperty("--widgetColor", widgetColor);
+  let widgetTextColor = "";
   let iconColor = "";
-  let widgetName="Feedback"
-  if(feedback.wgLanguage == "en"){
-    widgetName = "  Feedback"
-  } else if(feedback.wgLanguage == "ar"){
-    widgetName = "رأي"
-  } else{
-    widgetName = "Rétroaction"
+  let widgetName = "Feedback";
+  if (feedback.wgLanguage == "en") {
+    widgetName = "  Feedback";
+  } else if (feedback.wgLanguage == "ar") {
+    widgetName = "رأي";
+  } else {
+    widgetName = "Rétroaction";
   }
 
-  if(feedback.wgAlternateColor === true){
+  if (feedback.wgAlternateColor === true) {
     widgetTextColor = "white";
-    iconColor = "white"
-  } else{
+    iconColor = "white";
+  } else {
     widgetTextColor = "black";
-    iconColor ="black"
+    iconColor = "black";
   }
 
-  $:document.documentElement.style.setProperty('--widgetTextColor', widgetTextColor);
+  $: document.documentElement.style.setProperty(
+    "--widgetTextColor",
+    widgetTextColor
+  );
 
-  let wgPositionHorizintal="";
+  let wgPositionHorizintal = "";
   let wgPositionVertical = "";
-  let widgetLeftSideBorder=0;
-  let widgetRightSideBorder=0;
+  let widgetLeftSideBorder = 0;
+  let widgetRightSideBorder = 0;
   let widgetMarginRight = 0;
   let widgetMarginLeft = 0;
   let visible = false;
   let buttonVisible = true;
   let thanksMessageVisible = false;
-  let  inTransitionX = 0;
-  let  outTransitionX = 0;
+  let inTransitionX = 0;
+  let outTransitionX = 0;
 
-  if(Number(feedback.wgPosition) == 0){
-    wgPositionHorizintal = "center"
-    wgPositionVertical = "row-reverse"
-    widgetLeftSideBorder =5;
-    widgetRightSideBorder=0;
+  if (Number(feedback.wgPosition) == 0) {
+    wgPositionHorizintal = "center";
+    wgPositionVertical = "row-reverse";
+    widgetLeftSideBorder = 5;
+    widgetRightSideBorder = 0;
     widgetMarginRight = 30;
     widgetMarginLeft = 0;
     inTransitionX = -100;
     outTransitionX = 20;
   }
-  if(Number(feedback.wgPosition) == 1){
-    wgPositionHorizintal = "center"
-    wgPositionVertical = "row"
-    widgetLeftSideBorder =0;
-    widgetRightSideBorder=5;
+  if (Number(feedback.wgPosition) == 1) {
+    wgPositionHorizintal = "center";
+    wgPositionVertical = "row";
+    widgetLeftSideBorder = 0;
+    widgetRightSideBorder = 5;
     widgetMarginRight = 0;
     widgetMarginLeft = 30;
     inTransitionX = 100;
     outTransitionX = -20;
   }
-  if(Number(feedback.wgPosition) == 2){
-    wgPositionHorizintal = "flex-end"
-    wgPositionVertical = "row-reverse"
-    widgetLeftSideBorder =5;
-    widgetMarginRight = 30
+  if (Number(feedback.wgPosition) == 2) {
+    wgPositionHorizintal = "flex-end";
+    wgPositionVertical = "row-reverse";
+    widgetLeftSideBorder = 5;
+    widgetMarginRight = 30;
     widgetMarginLeft = 0;
     inTransitionX = -100;
     outTransitionX = 20;
   }
-  if(Number(feedback.wgPosition) == 3){
-    wgPositionHorizintal = "flex-end"
-    wgPositionVertical = "row"
-    widgetLeftSideBorder =0;
-    widgetRightSideBorder=5;
+  if (Number(feedback.wgPosition) == 3) {
+    wgPositionHorizintal = "flex-end";
+    wgPositionVertical = "row";
+    widgetLeftSideBorder = 0;
+    widgetRightSideBorder = 5;
     widgetMarginRight = 0;
     widgetMarginLeft = 30;
     inTransitionX = 100;
     outTransitionX = -20;
   }
-  $: document.documentElement.style.setProperty('--wgPositionHorizintal', wgPositionHorizintal)
-  $: document.documentElement.style.setProperty('--wgPositionVertical', wgPositionVertical)
-  $: document.documentElement.style.setProperty('--widgetLeftSideBorder', widgetLeftSideBorder + 'px')
-  $: document.documentElement.style.setProperty('--widgetRightSideBorder', widgetRightSideBorder + 'px')
-  $: document.documentElement.style.setProperty('--widgetMarginRight', widgetMarginRight + 'px')
-  $: document.documentElement.style.setProperty('--widgetMarginLeft', widgetMarginLeft + 'px')
+  $: document.documentElement.style.setProperty(
+    "--wgPositionHorizintal",
+    wgPositionHorizintal
+  );
+  $: document.documentElement.style.setProperty(
+    "--wgPositionVertical",
+    wgPositionVertical
+  );
+  $: document.documentElement.style.setProperty(
+    "--widgetLeftSideBorder",
+    widgetLeftSideBorder + "px"
+  );
+  $: document.documentElement.style.setProperty(
+    "--widgetRightSideBorder",
+    widgetRightSideBorder + "px"
+  );
+  $: document.documentElement.style.setProperty(
+    "--widgetMarginRight",
+    widgetMarginRight + "px"
+  );
+  $: document.documentElement.style.setProperty(
+    "--widgetMarginLeft",
+    widgetMarginLeft + "px"
+  );
+
+  let userClosedWidget = 0;
+  let emailx = "";
+  let commentx = "";
+  let reactionTypex = "";
+  const closeOne = (email, comment, reactionType) => {
+    let widgetResponse = {
+      email: email,
+      comment: comment,
+      reaction: Number(reactionType),
+    };
 
-  const closeOne = (email,comment,reactionType) => {
-    let widgetResponse={
-      email:email,
-      comment:comment,
-      reaction:reactionType
-    }
     let event = new CustomEvent("fbEvent", {
+      bubbles: false,
+      detail: widgetResponse,
+    });
+    window.dispatchEvent(event);
+    console.log(widgetResponse);
+    openThanksMessage();
+  };
+
+  const closeBeforeFinsihing = (email, comment, reactionType) => {
+    emailx = email;
+    commentx = comment;
+    reactionTypex = Number(reactionType);
+    let widgetResponse = {
+      email: email,
+      comment: comment,
+      reaction: reactionType,
+    };
+    if (userClosedWidget == 1) {
+      console.log("hi", widgetResponse);
+      let event = new CustomEvent("fbEvent", {
         bubbles: false,
         detail: widgetResponse,
       });
-    window.dispatchEvent(event);
-  console.log(widgetResponse);
-  openThanksMessage()};  
+      window.dispatchEvent(event);
+      console.log(widgetResponse);
+    }
+  };
 
   const openThanksMessage = () => {
     visible = !visible;
     thanksMessageVisible = !thanksMessageVisible;
-	
-  }
+  };
+
   const closeThanksMessage = () => {
     thanksMessageVisible = !thanksMessageVisible;
-    setTimeout(function(){ 
-	buttonVisible = !buttonVisible;
-},350);
-  }
-  
+    setTimeout(function () {
+      buttonVisible = !buttonVisible;
+    }, 350);
+  };
+
   const openWidget = () => {
     visible = !visible;
-	buttonVisible = !buttonVisible;
+    buttonVisible = !buttonVisible;
   };
+
   const closeWidget = () => {
+    userClosedWidget = 1;
+    if (reactionTypex != 0) {
+      closeBeforeFinsihing(emailx, commentx, reactionTypex);
+    }
     visible = !visible;
-	setTimeout(function(){ 
-	buttonVisible = !buttonVisible;
-},350);
+    setTimeout(function () {
+      buttonVisible = !buttonVisible;
+    }, 350);
   };
-</script>
 
+</script>
 
-<container>
-	
+<fsContainer>
   {#if buttonVisible}
-    <div class="widget" on:click={openWidget}>
-      <div id="feedbackTxt">{widgetName}</div>
-      <div id="mainIcon">
-        <MainIcon bind:fill={iconColor}/>
+    <div class="fsWidget" on:click={openWidget}>
+      <div id="fsFeedbackTxt">{widgetName}</div>
+      <div id="fsMainIcon">
+        <MainIcon bind:fill={iconColor} />
       </div>
     </div>
   {/if}
 
   {#if visible}
-    <div
-      
-      class="cont"
-      in:fly="{{ x: inTransitionX, duration: 500 }}" 
-    >
-      <div class="closeCont" on:click={closeWidget}>
-		<p id="closeIcon">X</p>
-	  </div>
-      <ReactionPage closeHandler={closeOne} bind:feedbackData={feedback}/>
-	  
+    <div class="fsCont" in:fly={{ x: inTransitionX, duration: 500 }}>
+      <div class="fsCloseCont" on:click={closeWidget}>
+        <p id="fsCloseIcon">X</p>
+      </div>
+      <ReactionPage
+        closeHandler={closeOne}
+        bind:feedbackData={feedback}
+        closeHandlerBeforeFinishing={closeBeforeFinsihing}
+      />
     </div>
   {/if}
   {#if thanksMessageVisible}
-  <div class ="thanksMessageCont" out:fly="{{ x: outTransitionX, duration: 300 }}">
-    <div class="closeCont" on:click={closeThanksMessage}>
-      <p id="closeIcon">X</p>
-    </div>
-    <div style="    width: 61%;
+    <div
+      class="fsThanksMessageCont"
+      out:fly={{ x: outTransitionX, duration: 300 }}
+    >
+      <div class="fsCloseCont" on:click={closeThanksMessage}>
+        <p id="fsCloseIcon">X</p>
+      </div>
+      <div
+        style="    width: 61%;
     text-align: center;
     margin-top: 7%;
-    margin-left: 20%;">{feedback.wgThanksMsg}</div>
-  </div>
+    margin-left: 20%;"
+      >
+        {feedback.wgThanksMsg}
+      </div>
+    </div>
   {/if}
-  </container>
-
+</fsContainer>

package/src/main.js

@@ -11,35 +11,35 @@ export function feedbackCreator(response) {
 	});
 }
 
-// let widget ={id: 1,
-// 	wgStatus: 1,
-// 	wgName: "ask",
-// 	wgDescription: "test",
-// 	wgCrtDt: "2021-12-05 10:49:14",
-// 	wgResponses: null,
-// 	wgUpdTime: null,
-// 	SiteId: 98,
-// 	UserId: 262,
-// 	wgLanguage: "en",
-// 	wgPosition: "0",
-// 	wgAccentColor: "#51797b",
-// 	wgAlternateColor: true,
-// 	wgQuestion: "How would you rate your experience?" ,
-// 	wgUserScreenshot: 1,
-// 	wgEmailReqMsg: "We may wish to follow up. Enter your email if you're happy for us to contact you." ,
-// 	wgEmailReqActivation: 1,
-// 	wgAdditionalMsg: "Heads up! This is for feedback only. Need help? Contact us via our [link to Help Center].",
-// 	wgAdditionalMsgActivation: 1,
-// 	wgThanksMsg: "Thank you for sharing your feedback with us",
-// 	wgThanksMsgActivation: 1,
-// 	wgDesktop: 1,
-// 	wgPhone: 1,
-// 	wgTablet:1,
-// 	wgPages: [{"id":0,"name":"*"}],
-// 	wgWidgetToUsers: 0,
-// 	wgPercentage:100,
-// 	wgEmail: "abd@gmail.com",
-// 	wgWidgetToAllPages: 1,
-// 	wgReactionStyle: 0,
-// 	wgResponseViaEmail: 1}
-// feedbackCreator(widget);
+let widget ={id: 1,
+	wgStatus: 1,
+	wgName: "ask",
+	wgDescription: "test",
+	wgCrtDt: "2021-12-05 10:49:14",
+	wgResponses: null,
+	wgUpdTime: null,
+	SiteId: 98,
+	UserId: 262,
+	wgLanguage: "en",
+	wgPosition: "0",
+	wgAccentColor: "#51797b",
+	wgAlternateColor: true,
+	wgQuestion: "How would you rate your experience?" ,
+	wgUserScreenshot: 1,
+	wgEmailReqMsg: "We may wish to follow up. Enter your email if you're happy for us to contact you." ,
+	wgEmailReqActivation: 1,
+	wgAdditionalMsg: "Heads up! This is for feedback only. Need help? Contact us via our [link to Help Center].",
+	wgAdditionalMsgActivation: 1,
+	wgThanksMsg: "Thank you for sharing your feedback with us",
+	wgThanksMsgActivation: 1,
+	wgDesktop: 1,
+	wgPhone: 1,
+	wgTablet:1,
+	wgPages: [{"id":0,"name":"*"}],
+	wgWidgetToUsers: 0,
+	wgPercentage:100,
+	wgEmail: "abd@gmail.com",
+	wgWidgetToAllPages: 1,
+	wgReactionStyle: 0,
+	wgResponseViaEmail: 1}
+feedbackCreator(widget);