diff --git a/plugins/star-rating/api/api.js b/plugins/star-rating/api/api.js index c4e0f7480a4..cb14fcee750 100644 --- a/plugins/star-rating/api/api.js +++ b/plugins/star-rating/api/api.js @@ -474,7 +474,7 @@ function uploadFile(myfile, id, callback) { params.app_user = params.app_user || {}; var user = JSON.parse(JSON.stringify(params.app_user)); - common.db.collection('feedback_widgets').find({"app_id": params.app_id + "", "status": true, type: "rating"}, {_id: 1, popup_header_text: 1, cohortID: 1, type: 1, appearance: 1, showPolicy: 1, trigger_position: 1, hide_sticker: 1, trigger_bg_color: 1, trigger_font_color: 1, trigger_button_text: 1, trigger_size: 1, target_pages: 1}).toArray(function(err, widgets) { + common.db.collection('feedback_widgets').find({"app_id": params.app_id + "", "status": true, type: "rating"}, {_id: 1, popup_header_text: 1, cohortID: 1, type: 1, appearance: 1, showPolicy: 1, trigger_position: 1, hide_sticker: 1, trigger_bg_color: 1, trigger_font_color: 1, trigger_button_text: 1, trigger_size: 1, target_pages: 1, wv: 1}).toArray(function(err, widgets) { if (err) { log.e(err); reject(err); @@ -492,6 +492,7 @@ function uploadFile(myfile, id, callback) { } widget.tg = widget.target_pages; widget.name = widget.popup_header_text; + widget.wv = widget.wv?.toString() || null; // remove this props from response delete widget.hide_sticker; delete widget.trigger_position; @@ -565,6 +566,11 @@ function uploadFile(myfile, id, callback) { phone: true, tablet: true }; + /** + * NOTE: This property is used to help SDK identify if the widget has the new handling for close button and + * allows widget to be fullscreen. Since the server will support this from here on, it can be hardcoded. + */ + widget.wv = 1; //widget.created_by = common.db.ObjectID(obParams.member._id); validateCreate(obParams, FEATURE_NAME, function(params) { diff --git a/plugins/star-rating/frontend/public/stylesheets/ratings-iframe.scss b/plugins/star-rating/frontend/public/stylesheets/ratings-iframe.scss index 99260c47082..56436bb3291 100644 --- a/plugins/star-rating/frontend/public/stylesheets/ratings-iframe.scss +++ b/plugins/star-rating/frontend/public/stylesheets/ratings-iframe.scss @@ -5,12 +5,13 @@ .ratings-popup .modal-content { .hidden { display: none; -} + } -.disabled { + .disabled { cursor: auto !important; opacity: 0.5; -} + } + border-radius: 13px; background-color: white; padding: 0px 25px 40px 25px; @@ -31,6 +32,17 @@ cursor: pointer; } } + + /* .ratings-popup .modal-content--fullscreen */ + &--fullscreen { + margin: 40px 0; + height: calc(100vh - 100px); + + /* .ratings-popup--fullscreen .modal-content__top */ + &__top { + margin-top: 0px; + } + } } .ratings-popup .emotions-area { @@ -228,4 +240,4 @@ .rating-loader-wrapper .rating-loader { width: 50px; -} \ No newline at end of file +} diff --git a/plugins/star-rating/frontend/public/templates/feedback-popup.html b/plugins/star-rating/frontend/public/templates/feedback-popup.html index b10699659dc..9850ce8c8dd 100644 --- a/plugins/star-rating/frontend/public/templates/feedback-popup.html +++ b/plugins/star-rating/frontend/public/templates/feedback-popup.html @@ -1,546 +1,707 @@ - - - Countly Feedback Popup - - - - - <% if (themeFiles && themeFiles.css) { %> - <% for(var i=0, l=themeFiles.css.length; i < l; i++) {%> - - <% } %> - <% } %> - - - - -
- -
-
-
-
-
-

- What is your opinion -
- of this page? -
-

-
- - - - - -
-
-
- -
- - + + Countly Feedback Popup + + + + + <% if (themeFiles && themeFiles.css) { %> + <% for(var i=0, l=themeFiles.css.length; i < l; i++) {%> + + <% } %> + <% } %> + + + +
+ +
+
+
+
+ +
+
+

+ What is your opinion
of this page? + +

+
+ + + + + +
+
+
+ + +
+ + +
+ +
+
+ + +
+ + +
+ +
+
+ +
+ +
+
+ + +
-
-
- -
- - +
+
+ +
+
+

+ Thank you. +
+ We received your message. + +

+
+
+ + +
- -
-
- -
- -
-
- - - - -
-
-
-
- -
-
-

- Thank you. -
- We received your message. -
-

-
-
- - - - -
-
- - - + + -<% if (themeFiles && themeFiles.js) { %> -<% for(var i=0, l=themeFiles.js.length; i < l; i++) {%> - -<% } %> -<% } %> - + + function closeHandler(e) { + if (widgetVersion) { + var isWebSDK = platform === 'Web'; + + if (!isWebSDK) { + window.location.href = 'https://countly_action_event?cly_widget_command=1&close=1'; + } + else if (window.parent && typeof window.parent.postMessage === 'function') { + var payload = JSON.stringify({ + close: 1, + cly_widget_command: 1 + }); + + window.parent.postMessage(payload, parentOrigin); + } + } + else { + if (window.parent && typeof window.parent.postMessage === 'function') { + var d = JSON.stringify({ close: true }); + window.parent.postMessage(d, parentOrigin); + } + // NOTE: the isFromWeb variable is not defined in this scope, this code will never run + // will leave it commented for now until certain if it is needed or not + // else if (isFromWeb) { + // window.location.href += "&reset=true"; + // // This is used as a fallback for browsers where postMessage API doesn't work. + // // Instead of sending a message to the parent window, one could reload this iframe, + // // and listen to onload event of iframe in the parent window (sdk) + // // In the onload function you can hide the iframe + // // While the iframe is hidden, it undergoes the reload in background + // // You need to handle the reload by passing reset in the url. + // // You can then check for this reset value and if its true, + // // set {shown: false} while fetching the survey bcz it was a reset and survey + // // was already shown. Also in the reset you need to handle the css of the survey. + // // Caveat - + // // There is although one caveat, between initiating iframe reload and hiding + // // it the onload there is a lag of few miniseconds. Which gives an impression + // // that the window is unresponsive for a split second. + // // Therefore, using postMessage for cross window communication. + // } + } + + } + + // event handler for countly feedback show comment area checkbox + // show hide comment area + $('body').on('change', '#countly-feedback-show-comment', showHideCommentArea); + + // event handler for countly feedback show comment area checkbox + // show hide comment area + $('body').on('change', '#countly-feedback-show-email', showHideEmailArea); + + // event handler for countly feedback sender + // send feedback + $('body').on('click', '#cf-submit-button', sendFeedback); + $('body').on('click', '#consent', consent); + + // event handler for countly feedback emotion img + // rate for feedback + $('body').on('click', '.rating-emotion', rate); + + // event handler for popup closer + $('body').on('click', CLOSE_BUTTON_ID, closeHandler); + })(); + + <% if (themeFiles && themeFiles.js) { %> + <% for(var i=0, l=themeFiles.js.length; i < l; i++) {%> + + <% } %> + <% } %> + diff --git a/ui-tests/cypress/lib/dashboard/feedback/ratings/demoWidgetPage.js b/ui-tests/cypress/lib/dashboard/feedback/ratings/demoWidgetPage.js index 6f4371ec29b..dcba5f07912 100755 --- a/ui-tests/cypress/lib/dashboard/feedback/ratings/demoWidgetPage.js +++ b/ui-tests/cypress/lib/dashboard/feedback/ratings/demoWidgetPage.js @@ -34,7 +34,7 @@ const goToDemoWidgetPage = (username, password, appName, widgetID) => { if (response.admin_of[key].name === appName) { const appKey = response.admin_of[key].key; - cy.visit(`/feedback/rating?widget_id=${widgetID.trim()}&device_id=test&app_key=${appKey}`); + cy.visit(`/feedback/rating?widget_id=${widgetID.trim()}&device_id=test&app_key=${appKey}&custom={"tc":1,"rw":1,"xb":1}`); } } });