Merge pull request #5001 from Countly/surveys/responsiveness

[SER-889] [star-rating] changes for ratings to add consent
Countly · May 20, 2024 · 50e143e · 50e143e
2 parents ea71b63 + 668a622
commit 50e143e
Show file tree

Hide file tree

Showing 17 changed files with 816 additions and 393 deletions.
diff --git a/frontend/express/public/javascripts/countly/countly.helpers.js b/frontend/express/public/javascripts/countly/countly.helpers.js
@@ -340,6 +340,7 @@
         payload.text = msg.message;
         payload.autoHide = !msg.sticky;
         payload.id = msg.id;
+        payload.width = msg.width;
         var colorToUse;
 
         if (countlyGlobal.ssr) {

diff --git a/frontend/express/public/javascripts/countly/vue/components/helpers.js b/frontend/express/public/javascripts/countly/vue/components/helpers.js
@@ -1007,7 +1007,8 @@
                     return { title: '', url: '', from: '' };
                 },
                 type: Object
-            }
+            },
+            customWidth: { default: "", type: String },
         },
         data: function() {
             return {
@@ -1029,7 +1030,11 @@
         },
         computed: {
             dynamicClasses: function() {
-                return ["cly-vue-notification__alert-box__alert-text--" + this.color, "cly-vue-notification__alert-box--" + this.size];
+                var classes = ["cly-vue-notification__alert-box__alert-text--" + this.color, "cly-vue-notification__alert-box--" + this.size];
+                if (this.customWidth !== "") {
+                    classes.push(`notification-toasts__item--${this.customWidth}`);
+                }
+                return classes;
             },
             image: function() {
                 if (this.color === "dark-informational" || this.color === "light-informational") {

diff --git a/frontend/express/public/javascripts/countly/vue/core.js b/frontend/express/public/javascripts/countly/vue/core.js
@@ -688,7 +688,7 @@
 
     var NotificationToastsView = {
         template: '<div class="notification-toasts"> \
-                        <cly-notification v-for="(toast) in notificationToasts" :key="toast.id" :id="toast.id" :text="toast.text" :autoHide="toast.autoHide" :color="toast.color" :closable="true" @close="onClose" class="notification-toasts__item"></cly-notification>\
+                        <cly-notification v-for="(toast) in notificationToasts" :key="toast.id" :id="toast.id" :text="toast.text" :autoHide="toast.autoHide" :color="toast.color" :closable="true" :customWidth="toast.width" @close="onClose" class="notification-toasts__item"></cly-notification>\
                     </div>',
         store: _vuex.getGlobalStore(),
         computed: {

diff --git a/frontend/express/public/stylesheets/styles/blocks/_notification-toasts.scss b/frontend/express/public/stylesheets/styles/blocks/_notification-toasts.scss
@@ -8,5 +8,13 @@
         margin-top: 12px;
         min-width: 288px;
         max-width: 288px;
+
+        &--small {
+            max-width: 288px;
+        }
+
+        &--large {
+            max-width: 611px;
+        }
     }
 }
diff --git a/frontend/express/public/stylesheets/styles/overrides/_element-override.scss b/frontend/express/public/stylesheets/styles/overrides/_element-override.scss
@@ -136,6 +136,10 @@
         &.is-multiline {
             align-items: flex-start;
         }   
+
+        &.is-checked {
+            border-color: #0166d6;
+        }
     }   
     &.is-autosized-vstack {
         padding: 12px;
@@ -174,6 +178,26 @@
 	&.is-bordered {
 		border: 1px solid #CFD6E4;
 	}
+    &:hover {
+		&:not(.is-disabled) {
+			.el-radio__label {
+				color: inherit; 
+			}
+		}
+	}
+    &.is-checked{
+        &:not(.is-disabled) {
+            &:hover {
+                .el-radio__label {
+                    color: inherit;
+                }
+            }
+        }
+    }
+}
+
+.el-radio__input.is-checked+.el-radio__label {
+    color: inherit;
 }
 
 .el-collapse {

diff --git a/plugins/star-rating/api/api.js b/plugins/star-rating/api/api.js
@@ -36,6 +36,18 @@ const widgetProperties = {
         required: false,
         type: "String"
     },
+    consent: {
+        required: false,
+        type: "Boolean"
+    },
+    links: {
+        required: false,
+        type: "Array"
+    },
+    finalText: {
+        required: false,
+        type: "String"
+    },
     popup_comment_callout: {
         required: false,
         type: "String"
@@ -160,6 +172,19 @@ const widgetPropertyPreprocessors = {
             return null;
         }
     },
+    links: function(links) {
+        try {
+            return JSON.parse(links);
+        }
+        catch (jsonParseError) {
+            if (Array.isArray(links)) {
+                return links;
+            }
+            else {
+                return [];
+            }
+        }
+    },
     ratings_texts: function(ratingsTexts) {
         try {
             return JSON.parse(ratingsTexts);

diff --git a/plugins/star-rating/frontend/public/javascripts/countly.models.js b/plugins/star-rating/frontend/public/javascripts/countly.models.js
@@ -32,13 +32,17 @@
         "logo",
         "logoType",
         "globalLogo",
-        "internalName"
+        "internalName",
+        "consent",
+        "links",
+        "finalText"
     ];
 
     var widgetJSONProperties = [
         "targeting",
         "ratings_texts",
-        "target_pages"
+        "target_pages",
+        "links"
     ];
 
     starRatingPlugin.extractWidgetProperties = function(props) {