fix(ux): customer portal: disallow empty messages (#1143)

desk/src/pages/portal/ticketing/Ticket.vue

@@ -375,6 +375,7 @@ import CustomIcons from "@/components/desk/global/CustomIcons.vue"
 import CustomerSatisfactionFeedback from "@/components/portal/ticket/CustomerSatisfactionFeedback.vue"
 import TicketField from "@/components/global/TicketField.vue"
 import { useAuthStore } from "@/stores/auth"
+import { isEmpty } from "@/utils/editor"
 
 export default {
  name: "Tickets",
@@ -512,6 +513,17 @@ export default {
  this.content = this.tempTextEditorData.content
  this.attachments = this.tempTextEditorData.attachments
  },
+ validate(params) {
+ if (isEmpty(params.message)) {
+ this.$toast({
+ title: "Message is empty",
+ icon: "x",
+ iconClasses: "text-red-600",
+ });
+
+ return 'Message is empty';
+ }
+ }
  }
  },
  },

desk/src/utils/editor.ts

@@ -0,0 +1,16 @@
+import { isEmpty as isEmpty_ } from "lodash";
+
+export function strip(content: string) {
+ const opening = new RegExp(/^<div class='content-block'><div>/);
+ const closing = new RegExp(/<\/div><\/div>$/);
+
+ return content.replace(opening, "").replace(closing, "");
+}
+
+/**
+ * Check if the content is empty. This is done by replacing all <div class="content-block">
+ * with empty strings.
+ */
+export function isEmpty(content: string) {
+ return isEmpty_(strip(content).trim());
+}