From 3edc0542cc0f5e3a91e53412c8fa208e09ab77e6 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 5 Dec 2024 04:32:29 +0530
Subject: [PATCH] fix: Fix issue with profile picture not updating (#10532)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR resolves the issue with updating the profile picture in the profile settings.

**Cause of issue**
The issue can be reproduced with the old `ProfileAvatar.vue` component.
While the exact reason is unclear, it seems related to cases where the
file might be `null`.

**Solution**
Replaced the old `ProfileAvatar.vue` with `Avatar.vue` and tested it. It
works fine. I’ve attached a loom video below.

Fixes https://linear.app/chatwoot/issue/CW-3768/profile-picture-bug

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 app/controllers/api/v1/profiles_controller.rb |  2 +-
 .../components-next/avatar/Avatar.vue         |  2 +-
 .../dashboard/settings/profile/Index.vue      |  1 -
 .../settings/profile/UserProfilePicture.vue   | 18 ++--
 .../dashboard/store/modules/auth.js           |  5 +-
 .../v3/components/Form/ProfileAvatar.vue      | 85 -------------------
 .../api/v1/profiles/avatar.json.jbuilder      |  1 +
 .../api/v1/profiles_controller_spec.rb        |  2 +
 8 files changed, 16 insertions(+), 100 deletions(-)
 delete mode 100644 app/javascript/v3/components/Form/ProfileAvatar.vue
 create mode 100644 app/views/api/v1/profiles/avatar.json.jbuilder

diff --git a/app/controllers/api/v1/profiles_controller.rb b/app/controllers/api/v1/profiles_controller.rb
index bd3c2673c..ae1a1fe30 100644
--- a/app/controllers/api/v1/profiles_controller.rb
+++ b/app/controllers/api/v1/profiles_controller.rb
@@ -17,7 +17,7 @@ class Api::V1::ProfilesController < Api::BaseController
 
   def avatar
     @user.avatar.attachment.destroy! if @user.avatar.attached?
-    head :ok
+    @user.reload
   end
 
   def auto_offline
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index ab87e33c9..fb23b3cff 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -132,7 +132,7 @@ const iconStyles = computed(() => ({
 }));
 
 const initialsStyles = computed(() => ({
-  fontSize: `${props.size > 32 ? 16 : props.size / 2}px`,
+  fontSize: `${Math.min(props.size / 2.5, 24)}px`,
 }));
 
 const invalidateCurrentImage = () => {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index be1d166ab..a38046580 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -190,7 +190,6 @@ export default {
       <UserProfilePicture
         :src="avatarUrl"
         :name="name"
-        size="72px"
         @change="updateProfilePicture"
         @delete="deleteProfilePicture"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
index 87ac25efa..d86329b76 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
@@ -1,8 +1,6 @@
 <script setup>
-import { computed } from 'vue';
-import ProfileAvatar from 'v3/components/Form/ProfileAvatar.vue';
-import { removeEmoji } from 'shared/helpers/emoji';
-const props = defineProps({
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+defineProps({
   src: {
     type: String,
     default: '',
@@ -15,8 +13,6 @@ const props = defineProps({
 
 const emit = defineEmits(['change', 'delete']);
 
-const userNameWithoutEmoji = computed(() => removeEmoji(props.name));
-
 const updateProfilePicture = e => {
   emit('change', e);
 };
@@ -31,10 +27,12 @@ const deleteProfilePicture = () => {
     <span class="text-sm font-medium text-ash-900">
       {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
     </span>
-    <ProfileAvatar
-      :src="src"
-      :name="userNameWithoutEmoji"
-      @change="updateProfilePicture"
+    <Avatar
+      :src="src || ''"
+      :name="name || ''"
+      :size="72"
+      allow-upload
+      @upload="updateProfilePicture"
       @delete="deleteProfilePicture"
     />
   </div>
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index 695edc3cb..fa49af339 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -133,9 +133,10 @@ export const actions = {
     }
   },
 
-  deleteAvatar: async () => {
+  deleteAvatar: async ({ commit }) => {
     try {
-      await authAPI.deleteAvatar();
+      const response = await authAPI.deleteAvatar();
+      commit(types.SET_CURRENT_USER, response.data);
     } catch (error) {
       // Ignore error
     }
diff --git a/app/javascript/v3/components/Form/ProfileAvatar.vue b/app/javascript/v3/components/Form/ProfileAvatar.vue
deleted file mode 100644
index 32eff693a..000000000
--- a/app/javascript/v3/components/Form/ProfileAvatar.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import InitialsAvatar from './InitialsAvatar.vue';
-const props = defineProps({
-  src: {
-    type: String,
-    default: '',
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['change', 'delete']);
-
-const hasImageLoaded = ref(false);
-const imageLoadedError = ref(false);
-const fileInputRef = ref(null);
-
-const shouldShowImage = computed(() => props.src && !imageLoadedError.value);
-
-const onImageLoadError = () => {
-  imageLoadedError.value = true;
-};
-
-const onImageLoad = () => {
-  hasImageLoaded.value = true;
-  imageLoadedError.value = false;
-};
-
-const openFileInput = () => {
-  fileInputRef.value.click();
-};
-
-const onImageUpload = event => {
-  const [file] = event.target.files;
-  emit('change', {
-    file,
-    url: file ? URL.createObjectURL(file) : null,
-  });
-};
-
-const onAvatarDelete = () => {
-  emit('delete');
-};
-</script>
-
-<template>
-  <div class="relative rounded-xl h-[72px] w-[72px] cursor-pointe group">
-    <img
-      v-if="shouldShowImage"
-      class="rounded-xl h-[72px] w-[72px]"
-      :alt="name"
-      :src="src"
-      draggable="false"
-      @load="onImageLoad"
-      @error="onImageLoadError"
-    />
-    <InitialsAvatar v-else-if="!shouldShowImage" :name="name" :size="72" />
-
-    <input
-      ref="fileInputRef"
-      type="file"
-      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-      hidden
-      @change="onImageUpload"
-    />
-    <div class="hidden group-hover:block">
-      <button
-        v-if="src"
-        class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none dark:border-ash-75 reset-base -top-2 -right-2 bg-ash-300"
-        @click="onAvatarDelete"
-      >
-        <fluent-icon icon="dismiss" size="16" class="text-ash-900" />
-      </button>
-      <button
-        class="reset-base absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
-        @click="openFileInput"
-      >
-        <fluent-icon icon="avatar-upload" size="32" class="text-white" />
-      </button>
-    </div>
-  </div>
-</template>
diff --git a/app/views/api/v1/profiles/avatar.json.jbuilder b/app/views/api/v1/profiles/avatar.json.jbuilder
new file mode 100644
index 000000000..0a4b4f9fa
--- /dev/null
+++ b/app/views/api/v1/profiles/avatar.json.jbuilder
@@ -0,0 +1 @@
+json.partial! 'api/v1/models/user', formats: [:json], resource: @user
diff --git a/spec/controllers/api/v1/profiles_controller_spec.rb b/spec/controllers/api/v1/profiles_controller_spec.rb
index 28b4c5ed5..50404ad55 100644
--- a/spec/controllers/api/v1/profiles_controller_spec.rb
+++ b/spec/controllers/api/v1/profiles_controller_spec.rb
@@ -180,6 +180,8 @@ RSpec.describe 'Profile API', type: :request do
                as: :json
 
         expect(response).to have_http_status(:success)
+        json_response = response.parsed_body
+        expect(json_response['avatar_url']).to be_empty
       end
     end
   end