Merge pull request #5950 from Countly/journey+content-main

Journey Engine and Content Builder Update

Author: ArtursKadikis

.eslintrc.json

@@ -251,6 +251,28 @@
                 ]
             }
         },
+        {
+            "files": [ "plugins/content/api/positioning/**/*.js" ],
+            "parserOptions": {
+                "ecmaVersion": 2023,
+                "sourceType": "module"
+            },
+            "env": {
+                "node": true,
+                "es2023": true
+            }
+        },
+        {
+            "files": [ "plugins/content/api/positioning/**/*.cjs" ],
+            "parserOptions": {
+                "ecmaVersion": 2023,
+                "sourceType": "commonjs"
+            },
+            "env": {
+                "node": true,
+                "es2023": true
+            }
+        },
         {
             "files": [
                 "api/**/*.js",

frontend/express/public/javascripts/countly/vue/components/content.js

@@ -409,6 +409,11 @@
         template: CV.T('/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html'),
 
         props: {
+            componentTooltip: {
+                default: null,
+                type: String
+            },
+
             disabled: {
                 default: false,
                 type: Boolean
@@ -419,6 +424,15 @@
                 type: String
             },
 
+            labelIcon: {
+                default: 'cly-io cly-io-question-mark-circle',
+                type: String
+            },
+            labelTooltip: {
+                default: null,
+                type: String
+            },
+
             options: {
                 default: () => [],
                 type: Array
@@ -457,6 +471,16 @@
             size: {
                 default: null,
                 type: String
+            },
+
+            withComponentTooltip: {
+                default: false,
+                type: Boolean
+            },
+
+            withLabelTooltip: {
+                default: false,
+                type: Boolean
             }
         },
 
@@ -498,6 +522,10 @@
                 return this.isDropdownInput && Array.isArray(this.options) && this.options.length;
             },
 
+            isLabelTooltipVisible() {
+                return this.withLabelTooltip && this.labelTooltip;
+            },
+
             isSliderInput() {
                 return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER;
             },
@@ -519,6 +547,13 @@
 
             mainComponent() {
                 return COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE[this.type] || 'div';
+            },
+
+            tooltip() {
+                if (this.withComponentTooltip) {
+                    return this.componentTooltip || null;
+                }
+                return null;
             }
         }
     }));

frontend/express/public/javascripts/countly/vue/components/date.js

@@ -1660,9 +1660,48 @@
                 type: Boolean,
                 default: true,
                 required: false
+            },
+            minDateValue: {
+                type: Date
+            },
+            isFuture: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            pickerOptions() {
+                const defaultRange = { selectableRange: '00:00:00 - 23:59:00' };
+
+                if (!this.minDateValue) {
+                    return defaultRange;
+                }
+
+                const now = moment();
+                const minDateMoment = moment(this.minDateValue);
+                const isToday = minDateMoment.isSame(now, 'day');
+
+                if (this.isFuture && isToday) {
+                    return {
+                        selectableRange: `${now.format('HH:mm:ss')} - 23:59:00`
+                    };
+                }
+
+                return defaultRange;
             }
         },
-        template: '<el-time-picker :append-to-body="appendToBody" :style="{\'width\': width + \'px\'}" class="cly-vue-time-picker" v-bind="$attrs" v-on="$listeners" :format="format" :clearable="clearable"></el-time-picker>'
+        template: `
+                <el-time-picker
+                    :append-to-body="appendToBody"
+                    :clearable="clearable"
+                    :format="format"
+                    :picker-options="pickerOptions"
+                    :style="{\'width\': width + \'px\'}"
+                    class="cly-vue-time-picker"
+                    v-bind="$attrs"
+                    v-on="$listeners"
+                >
+                </el-time-picker>`
     });
 
 

frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html

@@ -17,12 +17,18 @@
       class="cly-vue-content-builder-sidebar-input__label"
     >
       {{ label }}
+      <i
+        v-if="isLabelTooltipVisible"
+        v-tooltip.left="labelTooltip"
+        :class="labelIcon"
+      />
     </label>
     <slot name="content-builder-layout-step">
       <component
         :is="mainComponent"
         v-bind="$attrs"
         v-model="componentValue"
+        v-tooltip.left="tooltip"
         class="cly-vue-content-builder-sidebar-input__component"
         :class="{ 'cly-vue-content-builder-sidebar-input__component--slider': isSliderInput }"
         :controls="controlsProp"

frontend/express/public/javascripts/countly/vue/templates/datepicker.html

@@ -207,7 +207,7 @@
                         <span class="text-medium">{{i18n('common.time')}}</span>
                     </div>
                     <div>
-                        <cly-time-picker align="right" :width="100" v-model="minTime"></cly-time-picker>
+                        <cly-time-picker align="right" :width="100" v-model="minTime" :min-date-value="minDate" :is-future="isFuture"></cly-time-picker>
                     </div>
                 </div>
             </div>

frontend/express/public/stylesheets/vue/clyvue.scss

@@ -4745,11 +4745,23 @@
 
     // .cly-vue-content-builder-sidebar-input__label
     &__label {
+        display: flex;
+        align-items: baseline;
+        justify-content: flex-start;
+
         flex-shrink: 0;
         margin-right: auto;
         font-size: 13px;
         font-weight: 500;
         line-height: 16px;
+
+        // .cly-vue-content-builder-sidebar-input__label i
+        i {
+            margin-left: 4px;
+            font-size: 13px;
+            font-weight: 500;
+            line-height: 16px;
+        }
     }
 
     // .cly-vue-content-builder-sidebar-input__number-input-suffix