feat: allow inbox specific flags for signature toggle (#8280)

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

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

@@ -135,6 +135,7 @@ export default {
     // allowSignature is a kill switch, ensuring no signature methods
     // are triggered except when this flag is true
     allowSignature: { type: Boolean, default: false },
+    channelType: { type: String, default: '' },
     showImageResizeToolbar: { type: Boolean, default: false }, // A kill switch to show or hide the image toolbar
   },
   data() {
@@ -266,8 +267,11 @@ export default {
     sendWithSignature() {
       // this is considered the source of truth, we watch this property
       // on change, we toggle the signature in the editor
-      const { send_with_signature: isEnabled } = this.uiSettings;
+      if (this.allowSignature && !this.isPrivate && this.channelType) {
-      return isEnabled && this.allowSignature && !this.isPrivate;
+        return this.fetchSignatureFlagFromUiSettings(this.channelType);
+      }
+
+      return false;
     },
   },
   watch: {

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

@@ -101,7 +101,7 @@
       <transition name="modal-fade">
         <div
           v-show="$refs.upload && $refs.upload.dropActive"
-          class="flex items-center justify-center gap-2 fixed left-0 right-0 top-0 bottom-0 w-full h-full z-20 text-slate-600 dark:text-slate-200 bg-white_transparent dark:bg-black_transparent flex-col"
+          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-600 dark:text-slate-200 bg-white_transparent dark:bg-black_transparent"
         >
           <fluent-icon icon="cloud-backup" size="40" />
           <h4 class="page-sub-title text-slate-600 dark:text-slate-200">
@@ -313,8 +313,8 @@ export default {
       return !this.isOnPrivateNote;
     },
     sendWithSignature() {
-      const { send_with_signature: isEnabled } = this.uiSettings;
+      // channelType is sourced from inboxMixin
-      return isEnabled;
+      return this.fetchSignatureFlagFromUiSettings(this.channelType);
     },
     signatureToggleTooltip() {
       return this.sendWithSignature
@@ -339,9 +339,7 @@ export default {
       }
     },
     toggleMessageSignature() {
-      this.updateUISettings({
+      this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);
-        send_with_signature: !this.sendWithSignature,
-      });
     },
     replaceText(text) {
       this.$emit('replace-text', text);

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -85,6 +85,7 @@
         :variables="messageVariables"
         :signature="signatureToApply"
         :allow-signature="true"
+        :channel-type="channelType"
         @typing-off="onTypingOff"
         @typing-on="onTypingOn"
         @focus="onFocus"
@@ -477,8 +478,7 @@ export default {
       return !!this.signatureToApply;
     },
     sendWithSignature() {
-      const { send_with_signature: isEnabled } = this.uiSettings;
+      return this.fetchSignatureFlagFromUiSettings(this.channelType);
-      return isEnabled;
     },
     editorMessageKey() {
       const { editor_message_key: isEnabled } = this.uiSettings;

app/javascript/dashboard/mixins/uiSettings.js

@@ -1,4 +1,5 @@
 import { mapGetters } from 'vuex';
+
 export const DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER = [
   { name: 'conversation_actions' },
   { name: 'macros' },
@@ -13,6 +14,9 @@ export const DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER = [
   { name: 'previous_conversation' },
 ];
 
+const slugifyChannel = name =>
+  name.toLowerCase().replace(' ', '_').replace('-', '_').replace('::', '_');
+
 export const isEditorHotKeyEnabled = (uiSettings, key) => {
   const {
     editor_message_key: editorMessageKey,
@@ -65,5 +69,17 @@ export default {
     toggleSidebarUIState(key) {
       this.updateUISettings({ [key]: !this.isContactSidebarItemOpen(key) });
     },
+    setSignatureFlagForInbox(channelType, value) {
+      channelType = slugifyChannel(channelType);
+      this.updateUISettings({
+        [`${channelType}_signature_enabled`]: value,
+      });
+    },
+    fetchSignatureFlagFromUiSettings(channelType) {
+      if (!channelType) return false;
+
+      channelType = slugifyChannel(channelType);
+      return this.uiSettings[`${channelType}_signature_enabled`];
+    },
   },
 };

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -281,6 +281,10 @@ export default {
       type: Function,
       default: () => {},
     },
+    channelType: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -316,8 +320,7 @@ export default {
       messageSignature: 'getMessageSignature',
     }),
     sendWithSignature() {
-      const { send_with_signature: isEnabled } = this.uiSettings;
+      return this.fetchSignatureFlagFromUiSettings(this.channelType);
-      return isEnabled;
     },
     signatureToApply() {
       return this.messageSignature;
@@ -543,9 +546,7 @@ export default {
       return classByType;
     },
     toggleMessageSignature() {
-      this.updateUISettings({
+      this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);
-        send_with_signature: !this.sendWithSignature,
-      });
       this.setSignature();
     },
   },