feat: differentiation for successful invites and failed invites (#3325)

feat: invites result splitted

packages/hoppscotch-common/locales/en.json

@@ -843,6 +843,8 @@
     "not_found": "Team not found. Contact your team owner.",
     "not_valid_viewer": "You are not a valid viewer. Contact your team owner.",
     "parent_coll_move": "Cannot move collection to a child collection",
+    "success_invites": "Success invites",
+    "failed_invites": "Failed invites",
     "pending_invites": "Pending invites",
     "permissions": "Permissions",
     "same_target_destination": "Same target and destination",

packages/hoppscotch-common/src/components/teams/Invite.vue

@@ -7,7 +7,7 @@
   >
     <template #body>
       <div v-if="sendInvitesResult.length" class="flex flex-col px-4">
-        <div class="flex flex-col items-center justify-center max-w-md">
+        <div class="flex flex-col items-center justify-center max-w-md mb-8">
           <icon-lucide-users class="w-6 h-6 text-accent" />
           <h3 class="my-2 text-lg text-center">
             {{ t("team.we_sent_invite_link") }}
@@ -16,28 +16,49 @@
             {{ t("team.we_sent_invite_link_description") }}
           </p>
         </div>
-        <div
+        <div v-if="successInvites.length">
-          class="flex flex-col p-4 mt-8 border rounded space-y-6 border-dividerLight"
+          <label class="mb-4 block">
-        >
+            {{ t("team.success_invites") }}
+          </label>
           <div
-            v-for="(invitee, index) in sendInvitesResult"
+            class="flex flex-col p-4 border rounded space-y-6 border-dividerLight"
-            :key="`invitee-${index}`"
           >
-            <p class="flex items-center">
+            <div
-              <component
+              v-for="(invitee, index) in successInvites"
-                :is="
+              :key="`invitee-${index}`"
-                  invitee.status === 'error' ? IconAlertTriangle : IconMailCheck
+            >
-                "
+              <p class="flex items-center">
-                class="mr-4 svg-icons"
+                <component
-                :class="
+                  :is="IconMailCheck"
-                  invitee.status === 'error' ? 'text-red-500' : 'text-green-500'
+                  class="mr-4 svg-icons text-green-500"
-                "
+                />
-              />
+                <span class="truncate">{{ invitee.email }}</span>
-              <span class="truncate">{{ invitee.email }}</span>
+              </p>
-            </p>
+            </div>
-            <p v-if="invitee.status === 'error'" class="mt-2 ml-8 text-red-500">
+          </div>
-              {{ getErrorMessage(invitee.error) }}
+        </div>
-            </p>
+        <div v-if="failedInvites.length" class="mt-6">
+          <label class="mb-4 block">
+            {{ t("team.failed_invites") }}
+          </label>
+          <div
+            class="flex flex-col p-4 border rounded space-y-6 border-dividerLight"
+          >
+            <div
+              v-for="(invitee, index) in failedInvites"
+              :key="`invitee-${index}`"
+            >
+              <p class="flex items-center">
+                <component
+                  :is="IconAlertTriangle"
+                  class="mr-4 svg-icons text-red-500"
+                />
+                <span class="truncate">{{ invitee.email }}</span>
+              </p>
+              <p class="mt-2 ml-8 text-red-500">
+                {{ getErrorMessage(invitee.error) }}
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -172,7 +193,7 @@
                       :active="invitee.value === 'OWNER'"
                       @click="
                         () => {
-                          updateNewInviteeRole(index, 'OWNER')
+                          updateNewInviteeRole(index, TeamMemberRole.Owner)
                           hide()
                         }
                       "
@@ -185,7 +206,7 @@
                       :active="invitee.value === 'EDITOR'"
                       @click="
                         () => {
-                          updateNewInviteeRole(index, 'EDITOR')
+                          updateNewInviteeRole(index, TeamMemberRole.Editor)
                           hide()
                         }
                       "
@@ -198,7 +219,7 @@
                       :active="invitee.value === 'VIEWER'"
                       @click="
                         () => {
-                          updateNewInviteeRole(index, 'VIEWER')
+                          updateNewInviteeRole(index, TeamMemberRole.Viewer)
                           hide()
                         }
                       "
@@ -484,6 +505,12 @@ type SendInvitesErrorType =
     }
 
 const sendInvitesResult = ref<Array<SendInvitesErrorType>>([])
+const successInvites = computed(() =>
+  sendInvitesResult.value.filter((invitee) => invitee.status === "success")
+)
+const failedInvites = computed(() =>
+  sendInvitesResult.value.filter((invitee) => invitee.status === "error")
+)
 
 const sendingInvites = ref<boolean>(false)