Merge pull request #6124 from Countly/fix-placeholders-in-api-push-notifications

[Fix] Placeholders in API push notifications

Author: Cookiezaurs

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Version 24.05.X
 Fixes:
+- [push] Fixed push notifications title and content text and variables combination
 - [reports] Correctly match event for email report if event key contains '.'
 
 ## Version 24.05.28
@@ -4503,4 +4504,3 @@ This version provides several features and bugfixes to both server and SDKs. The
     A user of an application can only view analytics for that application 
     and cannot edit its settings.
   * Added csfr protection to all methods provided through app.js.
-

plugins/push/api/send/data/pers.js

@@ -4,36 +4,46 @@ const { dot } = require('../../../../../api/utils/common');
  * Personalize function. A factory to create a function which would apply personalization to a given string.
  * 
  * @param {String} string string to personalize
- * @param {Object} personaliztion object of {5: {f: 'fallback', c: false, k: 'key'}, 10: {...}} kind
+ * @param {Object} personalizations object of {5: {f: 'fallback', c: false, k: 'key'}, 10: {...}} kind
  * 
  * @returns {function} function with single obejct parameter which returns final string for a given data
  */
-module.exports = function personalize(string, personaliztion) {
-    let parts = [],
-        indicies = personaliztion ? Object.keys(personaliztion).map(n => parseInt(n, 10)) : [],
-        i = 0,
-        def;
+module.exports = function personalize(string, personalizations) {
+    let parts = [];
+    let def;
+    let i = 0;
+    let indexes = Object.keys(personalizations || {}).map(n => parseInt(n, 10));
 
-    indicies.forEach(idx => {
+    indexes.forEach(idx => {
         if (i < idx) {
-            parts.push(string.substr(i, idx));
+            const subStringLength = idx - i;
+            // push all the string that appears before the personalization index
+            parts.push(string.substr(i, subStringLength));
         }
+
+        // push the personalization function
         parts.push(function(data) {
-            let pers = personaliztion[idx];
-            data = dot(data, pers.k);
-            if (pers.c && data) {
+            let personalization = personalizations[idx];
+
+            data = dot(data, personalization.k);
+
+            if (personalization.c && data) {
                 if (typeof data !== 'string') {
                     data = data + '';
                 }
+
                 return data.substr(0, 1).toUpperCase() + data.substr(1);
             }
-            return data === null || data === undefined ? pers.f : (data + '');
+
+            // if data does not exist return fallback value
+            return data === null || data === undefined ? personalization.f : (data + '');
         });
-        i = idx + 1;
+
+        i = idx;
     });
 
     if (i < string.length) {
-        parts.push(string.substr(i, string.length));
+        parts.push(string.substr(i));
     }
 
     /**
@@ -48,11 +58,12 @@ module.exports = function personalize(string, personaliztion) {
                 return parts.map(p => typeof p === 'string' ? p : p(data)).join('');
             }
         }
+
         return def;
     };
 
     // a message with all slots filled with default values
     def = compile({___dummy: true});
 
     return compile;
-};
+};

plugins/push/frontend/public/stylesheets/main.scss

@@ -673,30 +673,32 @@
 
 .cly-vue-push-notification-message-editor-with-emoji-picker {
 
-
-    &__user-property {
-        padding: 1px 5px 2px;
-        background: #ECECEC;
-        border-radius: 2px;
-        margin-right: 2px;
-
-        &:hover {
-            cursor: pointer;
-        }
+    // .cly-vue-push-notification-message-editor-with-emoji-picker__content
+    &__content {
+        word-break: break-all;
+        overflow-x:auto;
+        height: 100px;
+        padding-right:32px;
     }
 
+    // .cly-vue-push-notification-message-editor-with-emoji-picker__title
     &__title {
         word-break: break-all;
         overflow-x: auto;
         height:35px;
         padding-right:32px;
     }
 
-    &__content {
-        word-break: break-all;
-        overflow-x:auto;
-        height: 100px;
-        padding-right:32px;
+    // .cly-vue-push-notification-message-editor-with-emoji-picker__user-property
+    &__user-property {
+        padding: 1px 5px 2px;
+        background: #ECECEC;
+        border-radius: 2px;
+
+        // .cly-vue-push-notification-message-editor-with-emoji-picker__user-property:hover
+        &:hover {
+            cursor: pointer;
+        }
     }
 }
 
@@ -830,4 +832,4 @@
 .cly-vue-push-notification-details-chart-bars__item-legend-percentage + .text-medium span i{
     margin-left: 6px;
     cursor: pointer;
-}
+}