fix: use multi select user input and show already exist error if user with email exist or invited

(cherry picked from commit d06ac91052021be38952d9956e418ff868c11af5)

frontend/src/components/Settings/InviteUserPage.vue

@@ -11,7 +11,7 @@
         <div
           class="p-2 group bg-surface-gray-2 hover:bg-surface-gray-3 rounded"
         >
-          <MultiSelectEmailInput
+          <MultiSelectUserInput
             class="flex-1"
             inputClass="!bg-surface-gray-2 hover:!bg-surface-gray-3 group-hover:!bg-surface-gray-3"
             :placeholder="__('john@doe.com')"
@@ -20,9 +20,15 @@
             :error-message="
               (value) => __('{0} is an invalid email address', [value])
             "
-            :fetchContacts="false"
+            :fetchUsers="false"
           />
         </div>
+        <div
+          v-if="userExistMessage || inviteeExistMessage"
+          class="text-xs text-ink-red-3 mt-1.5"
+        >
+          {{ userExistMessage || inviteeExistMessage }}
+        </div>
         <FormControl
           type="select"
           class="mt-4"
@@ -86,7 +92,7 @@
   </div>
 </template>
 <script setup>
-import MultiSelectEmailInput from '@/components/Controls/MultiSelectEmailInput.vue'
+import MultiSelectUserInput from '@/components/Controls/MultiSelectUserInput.vue'
 import { validateEmail, convertArrayToString } from '@/utils'
 import { usersStore } from '@/stores/users'
 import {
@@ -99,12 +105,44 @@ import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, computed } from 'vue'
 
 const { updateOnboardingStep } = useOnboarding('frappecrm')
-const { isAdmin, isManager } = usersStore()
+const { users, isAdmin, isManager } = usersStore()
 
 const invitees = ref([])
 const role = ref('Sales User')
 const error = ref(null)
 
+const userExistMessage = computed(() => {
+  const inviteesSet = new Set(invitees.value)
+  if (!inviteesSet.size) return null
+
+  if (!users.data?.crmUsers?.length) return null
+  const existingEmails = users.data.crmUsers.map((user) => user.name)
+  const existingUsersSet = new Set(existingEmails)
+
+  const existingInvitees = inviteesSet.intersection(existingUsersSet)
+  if (existingInvitees.size === 0) return null
+
+  return __('User with email {0} already exists', [
+    Array.from(existingInvitees).join(', '),
+  ])
+})
+
+const inviteeExistMessage = computed(() => {
+  const inviteesSet = new Set(invitees.value)
+  if (!inviteesSet.size) return null
+
+  if (!pendingInvitations.data?.length) return null
+  const existingEmails = pendingInvitations.data.map((user) => user.email)
+  const existingUsersSet = new Set(existingEmails)
+
+  const existingInvitees = inviteesSet.intersection(existingUsersSet)
+  if (existingInvitees.size === 0) return null
+
+  return __('User with email {0} already invited', [
+    Array.from(existingInvitees).join(', '),
+  ])
+})
+
 const description = computed(() => {
   return {
     'System Manager':