@fullsession.io/fs-feedback-widget 1.4.4 → 1.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/App.svelte +47 -1
  7. package/src/main.js +35 -34
  8. package/src/widgetPages/App.css +13 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fullsession.io/fs-feedback-widget",
3
- "version": "1.4.4",
3
+ "version": "1.4.6",
4
4
  "scripts": {
5
5
  "build": "rollup -c",
6
6
  "dev": "rollup -c -w",
package/src/App.svelte CHANGED
@@ -2,6 +2,7 @@
2
2
  import MainIcon from "./Icons/mainIcon.svelte";
3
3
  import ReactionPage from "./widgetPages/reactionPage.svelte";
4
4
  export let feedback;
5
+ export let containerState;
5
6
  console.log(feedback);
6
7
  import { fly } from "svelte/transition";
7
8
  import "../src/widgetPages/App.css";
@@ -176,7 +177,7 @@
176
177
  };
177
178
 
178
179
  </script>
179
-
180
+ {#if containerState == 0}
180
181
  <fsContainer>
181
182
  {#if buttonVisible}
182
183
  <div class="fsWidget" on:click={openWidget}>
@@ -218,3 +219,48 @@
218
219
  </div>
219
220
  {/if}
220
221
  </fsContainer>
222
+ {/if}
223
+
224
+ {#if containerState == 1}
225
+ <fsContainerApp>
226
+ {#if buttonVisible}
227
+ <div class="fsWidget" on:click={openWidget}>
228
+ <div id="fsFeedbackTxt">{widgetName}</div>
229
+ <div id="fsMainIcon">
230
+ <MainIcon bind:fill={iconColor} />
231
+ </div>
232
+ </div>
233
+ {/if}
234
+
235
+ {#if visible}
236
+ <div class="fsCont" in:fly={{ x: inTransitionX, duration: 500 }}>
237
+ <div class="fsCloseCont" on:click={closeWidget}>
238
+ <p id="fsCloseIcon">X</p>
239
+ </div>
240
+ <ReactionPage
241
+ closeHandler={closeOne}
242
+ bind:feedbackData={feedback}
243
+ closeHandlerBeforeFinishing={closeBeforeFinsihing}
244
+ />
245
+ </div>
246
+ {/if}
247
+ {#if thanksMessageVisible}
248
+ <div
249
+ class="fsThanksMessageCont"
250
+ out:fly={{ x: outTransitionX, duration: 300 }}
251
+ >
252
+ <div class="fsCloseCont" on:click={closeThanksMessage}>
253
+ <p id="fsCloseIcon">X</p>
254
+ </div>
255
+ <div
256
+ style=" width: 61%;
257
+ text-align: center;
258
+ margin-top: 7%;
259
+ margin-left: 20%;"
260
+ >
261
+ {feedback.wgThanksMsg}
262
+ </div>
263
+ </div>
264
+ {/if}
265
+ </fsContainerApp>
266
+ {/if}
package/src/main.js CHANGED
@@ -2,44 +2,45 @@ import App from './App.svelte';
2
2
 
3
3
 
4
4
 
5
- export function feedbackCreator(response) {
5
+ export function feedbackCreator(response,containerState) {
6
6
  new App({
7
7
  target: document.body,
8
8
  props: {
9
- feedback: response
9
+ feedback: response,
10
+ containerState: containerState
10
11
  }
11
12
  });
12
13
  }
13
14
 
14
- let widget ={id: 1,
15
- wgStatus: 1,
16
- wgName: "ask",
17
- wgDescription: "test",
18
- wgCrtDt: "2021-12-05 10:49:14",
19
- wgResponses: null,
20
- wgUpdTime: null,
21
- SiteId: 98,
22
- UserId: 262,
23
- wgLanguage: "en",
24
- wgPosition: "0",
25
- wgAccentColor: "#51797b",
26
- wgAlternateColor: true,
27
- wgQuestion: "How would you rate your experience?" ,
28
- wgUserScreenshot: 1,
29
- wgEmailReqMsg: "We may wish to follow up. Enter your email if you're happy for us to contact you." ,
30
- wgEmailReqActivation: 1,
31
- wgAdditionalMsg: "Heads up! This is for feedback only. Need help? Contact us via our [link to Help Center].",
32
- wgAdditionalMsgActivation: 1,
33
- wgThanksMsg: "Thank you for sharing your feedback with us",
34
- wgThanksMsgActivation: 1,
35
- wgDesktop: 1,
36
- wgPhone: 1,
37
- wgTablet:1,
38
- wgPages: [{"id":0,"name":"*"}],
39
- wgWidgetToUsers: 0,
40
- wgPercentage:100,
41
- wgEmail: "abd@gmail.com",
42
- wgWidgetToAllPages: 1,
43
- wgReactionStyle: 0,
44
- wgResponseViaEmail: 1}
45
- feedbackCreator(widget);
15
+ // let widget ={id: 1,
16
+ // wgStatus: 1,
17
+ // wgName: "ask",
18
+ // wgDescription: "test",
19
+ // wgCrtDt: "2021-12-05 10:49:14",
20
+ // wgResponses: null,
21
+ // wgUpdTime: null,
22
+ // SiteId: 98,
23
+ // UserId: 262,
24
+ // wgLanguage: "en",
25
+ // wgPosition: "0",
26
+ // wgAccentColor: "#51797b",
27
+ // wgAlternateColor: true,
28
+ // wgQuestion: "How would you rate your experience?" ,
29
+ // wgUserScreenshot: 1,
30
+ // wgEmailReqMsg: "We may wish to follow up. Enter your email if you're happy for us to contact you." ,
31
+ // wgEmailReqActivation: 1,
32
+ // wgAdditionalMsg: "Heads up! This is for feedback only. Need help? Contact us via our [link to Help Center].",
33
+ // wgAdditionalMsgActivation: 1,
34
+ // wgThanksMsg: "Thank you for sharing your feedback with us",
35
+ // wgThanksMsgActivation: 1,
36
+ // wgDesktop: 1,
37
+ // wgPhone: 1,
38
+ // wgTablet:1,
39
+ // wgPages: [{"id":0,"name":"*"}],
40
+ // wgWidgetToUsers: 0,
41
+ // wgPercentage:100,
42
+ // wgEmail: "abd@gmail.com",
43
+ // wgWidgetToAllPages: 1,
44
+ // wgReactionStyle: 0,
45
+ // wgResponseViaEmail: 1}
46
+ // feedbackCreator(widget);
package/src/widgetPages/App.css CHANGED
@@ -11,6 +11,19 @@ fsContainer{
11
11
  z-index: 100000;
12
12
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13
13
  }
14
+ fsContainerApp{
15
+ width: 776px;
16
+ height: 415px;
17
+ display: flex;
18
+ flex-direction: var(--wgPositionVertical);
19
+ position: fixed;
20
+ top: 0; right: 0; bottom: 0; left: 0;
21
+ pointer-events: none;
22
+ align-items: var(--wgPositionHorizintal);
23
+ padding: 0;
24
+ z-index: 100000;
25
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
+ }
14
27
  .fsWidget {
15
28
  pointer-events: auto;
16
29
  background-color: var(--widgetColor);