feat: Add support for rich content for message in ongoing campaigns (#2577)

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -57,6 +57,7 @@ export default {
     value: { type: String, default: '' },
     placeholder: { type: String, default: '' },
     isPrivate: { type: Boolean, default: false },
+    isFormatMode: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -280,4 +281,25 @@ export default {
     padding: 0 var(--space-smaller);
   }
 }
+
+.editor-wrap {
+  margin-bottom: var(--space-normal);
+}
+
+.message-editor {
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-normal);
+  padding: 0 var(--space-slab);
+  margin-bottom: 0;
+}
+
+.editor_warning {
+  border: 1px solid var(--r-400);
+}
+
+.editor-warning__message {
+  color: var(--r-400);
+  font-weight: var(--font-weight-normal);
+  padding: var(--space-smaller) 0 0 0;
+}
 </style>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue

@@ -16,7 +16,21 @@
           @blur="$v.title.$touch"
         />
 
-        <label :class="{ error: $v.message.$error }">
+        <label v-if="isOngoingType" class="editor-wrap">
+          {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
+          <woot-message-editor
+            v-model="message"
+            class="message-editor"
+            :class="{ editor_warning: $v.message.$error }"
+            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
+            @blur="$v.message.$touch"
+          />
+          <span v-if="$v.message.$error" class="editor-warning__message">
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
+          </span>
+        </label>
+
+        <label v-else :class="{ error: $v.message.$error }">
           {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
           <textarea
             v-model="message"
@@ -141,12 +155,18 @@
 import { mapGetters } from 'vuex';
 import { required, url, minLength } from 'vuelidate/lib/validators';
 import alertMixin from 'shared/mixins/alertMixin';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 import campaignMixin from 'shared/mixins/campaignMixin';
 import WootDateTimePicker from 'dashboard/components/ui/DateTimePicker.vue';
 
 export default {
-  components: { WootDateTimePicker },
+  components: {
+    WootDateTimePicker,
+    WootMessageEditor,
+  },
+
   mixins: [alertMixin, campaignMixin],
+
   props: {
     senderList: {
       type: Array,
@@ -287,3 +307,8 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+::v-deep .ProseMirror-woot-style {
+  height: 8rem;
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue

@@ -22,6 +22,7 @@ import Spinner from 'shared/components/Spinner.vue';
 import Label from 'dashboard/components/ui/Label';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import WootButton from 'dashboard/components/ui/WootButton.vue';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName';
 import campaignMixin from 'shared/mixins/campaignMixin';
 import timeMixin from 'dashboard/mixins/time';
@@ -32,7 +33,9 @@ export default {
     Spinner,
     VeTable,
   },
-  mixins: [clickaway, timeMixin, campaignMixin],
+
+  mixins: [clickaway, timeMixin, campaignMixin, messageFormatterMixin],
+
   props: {
     campaigns: {
       type: Array,
@@ -92,11 +95,16 @@ export default {
           align: 'left',
           width: 350,
           renderBodyCell: ({ row }) => {
-            return (
-              <div class="text-truncate">
-                <span title={row.message}>{row.message}</span>
-              </div>
-            );
+            if (row.message) {
+              return (
+                <div class="text-truncate">
+                  <span
+                    domPropsInnerHTML={this.formatMessage(row.message)}
+                  ></span>
+                </div>
+              );
+            }
+            return '';
           },
         },
       ];

app/javascript/dashboard/routes/dashboard/settings/inbox/components/EditCampaign.vue

@@ -12,16 +12,17 @@
           :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
           @blur="$v.title.$touch"
         />
-        <label :class="{ error: $v.message.$error }">
+        <label class="editor-wrap">
           {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          <textarea
+          <woot-message-editor
             v-model.trim="message"
-            rows="5"
-            type="text"
+            class="message-editor"
+            :is-format-mode="true"
+            :class="{ editor_warning: $v.message.$error }"
             :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
             @input="$v.message.$touch"
           />
-          <span v-if="$v.message.$error" class="message">
+          <span v-if="$v.message.$error" class="editor-warning__message">
             {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
           </span>
         </label>
@@ -92,8 +93,12 @@
 <script>
 import { mapGetters } from 'vuex';
 import { required, url, minLength } from 'vuelidate/lib/validators';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 import alertMixin from 'shared/mixins/alertMixin';
 export default {
+  components: {
+    WootMessageEditor,
+  },
   mixins: [alertMixin],
   props: {
     selectedCampaign: {
@@ -209,3 +214,8 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+::v-deep .ProseMirror-woot-style {
+  height: 8rem;
+}
+</style>