feat: Update API for contact avatar (#4719)

Added the ability to update the contact's avatar via API and Dashboard.

- Contact create and update APIs can now accept avatar attachment parameters [form data].
- Contact create and update endpoints can now accept the avatar_url parameter.[json]
- API endpoint to remove a contact avatar.
- Updated Contact create/edit UI components with avatar support

Fixes: #3428

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

@@ -1,5 +1,18 @@
 <template>
   <form class="contact--form" @submit.prevent="handleSubmit">
+    <div class="row">
+      <div class="columns">
+        <woot-avatar-uploader
+          :label="$t('CONTACT_FORM.FORM.AVATAR.LABEL')"
+          :src="avatarUrl"
+          :username-avatar="name"
+          :delete-avatar="!!avatarUrl"
+          class="settings-item"
+          @change="handleImageUpload"
+          @onAvatarDelete="handleAvatarDelete"
+        />
+      </div>
+    </div>
     <div class="row">
       <div class="columns">
         <label :class="{ error: $v.name.$error }">
@@ -129,6 +142,8 @@ export default {
       email: '',
       name: '',
       phoneNumber: '',
+      avatarFile: null,
+      avatarUrl: '',
       socialProfileUserNames: {
         facebook: '',
         twitter: '',
@@ -186,6 +201,7 @@ export default {
       this.phoneNumber = phoneNumber || '';
       this.companyName = additionalAttributes.company_name || '';
       this.description = additionalAttributes.description || '';
+      this.avatarUrl = this.contact.thumbnail || '';
       const {
         social_profiles: socialProfiles = {},
         screen_name: twitterScreenName,
@@ -198,7 +214,7 @@ export default {
       };
     },
     getContactObject() {
-      return {
+      const contactObject = {
         id: this.contact.id,
         name: this.name,
         email: this.email,
@@ -210,6 +226,11 @@ export default {
           social_profiles: this.socialProfileUserNames,
         },
       };
+      if (this.avatarFile) {
+        contactObject.avatar = this.avatarFile;
+        contactObject.isFormData = true;
+      }
+      return contactObject;
     },
     async handleSubmit() {
       this.$v.$touch();
@@ -237,6 +258,28 @@ export default {
         }
       }
     },
+    handleImageUpload({ file, url }) {
+      this.avatarFile = file;
+      this.avatarUrl = url;
+    },
+    async handleAvatarDelete() {
+      try {
+        if (this.contact && this.contact.id) {
+          await this.$store.dispatch('contacts/deleteAvatar', this.contact.id);
+          this.showAlert(
+            this.$t('CONTACT_FORM.DELETE_AVATAR.API.SUCCESS_MESSAGE')
+          );
+        }
+        this.avatarFile = null;
+        this.avatarUrl = '';
+      } catch (error) {
+        this.showAlert(
+          error.message
+            ? error.message
+            : this.$t('CONTACT_FORM.DELETE_AVATAR.API.ERROR_MESSAGE')
+        );
+      }
+    },
   },
 };
 </script>