chore: Add editor toggle for API inbox (#5660)

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -64,7 +64,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      accountId: 'getCurrentAccountId',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     hasSecondaryMenu() {

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

@@ -11,7 +11,6 @@
         size="small"
         @click="toggleEmojiPicker"
       />
-      <!-- ensure the same validations for attachment types are implemented in  backend models as well -->
       <file-upload
         ref="upload"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
@@ -47,6 +46,16 @@
         :title="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
         @click="toggleAudioRecorder"
       />
+      <woot-button
+        v-if="showEditorToggle"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
+        icon="quote"
+        emoji="🖊️"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        @click="$emit('toggle-editor')"
+      />
       <woot-button
         v-if="showAudioPlayStopButton"
         :icon="audioRecorderPlayStopIcon"
@@ -184,7 +193,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    isFormatMode: {
+    showEditorToggle: {
       type: Boolean,
       default: false,
     },

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

@@ -109,10 +109,11 @@
       :recording-audio-state="recordingAudioState"
       :is-recording-audio="isRecordingAudio"
       :is-on-private-note="isOnPrivateNote"
-      :is-format-mode="showRichContentEditor"
+      :show-editor-toggle="isAPIInbox && !isOnPrivateNote"
       :enable-multiple-file-upload="enableMultipleFileUpload"
       :has-whatsapp-templates="hasWhatsappTemplates"
       @selectWhatsappTemplate="openWhatsappTemplateModal"
+      @toggle-editor="toggleRichContentEditor"
     />
     <whatsapp-templates
       :inbox-id="inbox.id"
@@ -230,6 +231,13 @@ export default {
         return true;
       }
 
+      if (this.isAPIInbox) {
+        const {
+          display_rich_content_editor: displayRichContentEditor = false,
+        } = this.uiSettings;
+        return displayRichContentEditor;
+      }
+
       return false;
     },
     assignedAgent: {
@@ -365,7 +373,7 @@ export default {
       );
     },
     isRichEditorEnabled() {
-      return this.isAWebWidgetInbox || this.isAnEmailChannel || this.isAPIInbox;
+      return this.isAWebWidgetInbox || this.isAnEmailChannel;
     },
     showAudioRecorder() {
       return !this.isOnPrivateNote && this.showFileUpload;
@@ -511,6 +519,11 @@ export default {
     document.removeEventListener('keydown', this.handleKeyEvents);
   },
   methods: {
+    toggleRichContentEditor() {
+      this.updateUISettings({
+        display_rich_content_editor: !this.showRichContentEditor,
+      });
+    },
     getSavedDraftMessages() {
       return LocalStorage.get(LOCAL_STORAGE_KEYS.DRAFT_MESSAGES) || {};
     },

app/javascript/dashboard/store/modules/inboxes.js

@@ -55,7 +55,7 @@ export const getters = {
     const {
       message_templates: whatsAppMessageTemplates,
       additional_attributes: additionalAttributes,
-    } = inbox;
+    } = inbox || {};
 
     const { message_templates: apiInboxMessageTemplates } =
       additionalAttributes || {};
@@ -63,7 +63,7 @@ export const getters = {
       whatsAppMessageTemplates || apiInboxMessageTemplates;
 
     // filtering out the whatsapp templates with media
-    if (messagesTemplates) {
+    if (messagesTemplates instanceof Array) {
       return messagesTemplates.filter(template => {
         return !template.components.some(
           i => i.format === 'IMAGE' || i.format === 'VIDEO'