feat: Ability to remove inbox avatar (#2885)

* Delete inbox avatar

1) New API endpoint added for deleting inbox avatar.
2) Delete avatar button in the inbox settings page.

Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/api/inboxes.js

@@ -13,6 +13,10 @@ class Inboxes extends ApiClient {
   getCampaigns(inboxId) {
     return axios.get(`${this.url}/${inboxId}/campaigns`);
   }
+
+  deleteInboxAvatar(inboxId) {
+    return axios.delete(`${this.url}/${inboxId}/avatar`);
+  }
 }
 
 export default new Inboxes();

app/javascript/dashboard/api/specs/inboxes.spec.js

@@ -27,5 +27,12 @@ describe('#InboxesAPI', () => {
         '/api/v1/inboxes/2/campaigns'
       );
     });
+
+    it('#deleteInboxAvatar', () => {
+      inboxesAPI.deleteInboxAvatar(2);
+      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/inboxes/2/avatar'
+      );
+    });
   });
 });

app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue

@@ -1,16 +1,31 @@
 <template>
-  <label>
-    <span v-if="label">{{ label }}</span>
+  <div>
+    <label>
+      <span v-if="label">{{ label }}</span>
+    </label>
     <woot-thumbnail v-if="src" size="80px" :src="src" />
-    <input
-      id="file"
-      ref="file"
-      type="file"
-      accept="image/*"
-      @change="handleImageUpload"
-    />
-    <slot></slot>
-  </label>
+    <div v-if="src && deleteAvatar" class="avatar-delete-btn">
+      <woot-button
+        color-scheme="alert"
+        variant="hollow"
+        size="tiny"
+        @click="onAvatarDelete"
+        >{{
+          this.$t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT')
+        }}</woot-button
+      >
+    </div>
+    <label>
+      <input
+        id="file"
+        ref="file"
+        type="file"
+        accept="image/*"
+        @change="handleImageUpload"
+      />
+      <slot></slot>
+    </label>
+  </div>
 </template>
 
 <script>
@@ -24,6 +39,10 @@ export default {
       type: String,
       default: '',
     },
+    deleteAvatar: {
+      type: Boolean,
+      default: false,
+    },
   },
   watch: {},
   methods: {
@@ -35,6 +54,17 @@ export default {
         url: URL.createObjectURL(file),
       });
     },
+    onAvatarDelete() {
+      this.$refs.file.value = null;
+      this.$emit('onAvatarDelete');
+    },
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.avatar-delete-btn {
+  margin-top: var(--space-smaller);
+  margin-bottom: var(--space-smaller);
+}
+</style>

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -232,6 +232,7 @@
     },
     "DELETE": {
       "BUTTON_TEXT": "Delete",
+      "AVATAR_DELETE_BUTTON_TEXT": "Delete Avatar",
       "CONFIRM": {
         "TITLE": "Confirm Deletion",
         "MESSAGE": "Are you sure to delete ",
@@ -241,7 +242,9 @@
       },
       "API": {
         "SUCCESS_MESSAGE": "Inbox deleted successfully",
-        "ERROR_MESSAGE": "Could not delete inbox. Please try again later."
+        "ERROR_MESSAGE": "Could not delete inbox. Please try again later.",
+        "AVATAR_SUCCESS_MESSAGE": "Inbox avatar deleted successfully",
+        "AVATAR_ERROR_MESSAGE": "Could not delete the inbox avatar. Please try again later."
       }
     },
     "TABS": {

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -22,7 +22,9 @@
         <woot-avatar-uploader
           :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
           :src="avatarUrl"
+          deleteAvatar
           @change="handleImageUpload"
+          @onAvatarDelete="handleAvatarDelete"
         />
         <woot-input
           v-model.trim="selectedInboxName"
@@ -544,6 +546,23 @@ export default {
       this.avatarFile = file;
       this.avatarUrl = url;
     },
+    async handleAvatarDelete() {
+      try {
+        await this.$store.dispatch(
+          'inboxes/deleteInboxAvatar',
+          this.currentInboxId
+        );
+        this.avatarFile = null;
+        this.avatarUrl = '';
+        this.showAlert(this.$t('INBOX_MGMT.DELETE.API.AVATAR_SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(
+          error.message
+            ? error.message
+            : this.$t('INBOX_MGMT.DELETE.API.AVATAR_ERROR_MESSAGE')
+        );
+      }
+    },
   },
   validations: {
     selectedAgents: {

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

@@ -173,6 +173,13 @@ export const actions = {
       throw new Error(error.message);
     }
   },
+  deleteInboxAvatar: async (_, inboxId) => {
+    try {
+      await InboxesAPI.deleteInboxAvatar(inboxId);
+    } catch (error) {
+      throw new Error(error);
+    }
+  },
 };
 
 export const mutations = {

app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js

@@ -128,4 +128,19 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#deleteInboxAvatar', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue();
+      await expect(
+        actions.deleteInboxAvatar({}, inboxList[0].id)
+      ).resolves.toBe();
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.deleteInboxAvatar({}, inboxList[0].id)
+      ).rejects.toThrow(Error);
+    });
+  });
 });