fix invite user flow

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -39,7 +39,6 @@
   // Initially filter entities without app access
   // Show all when false
   let filterByAppAccess = false
-
   let email
   let error
   let form
@@ -55,7 +54,7 @@
   let userLimitReachedModal
 
   let inviteFailureResponse = ""
-  $: queryIsEmail = emailValidator(query) === true
+  $: validEmail = emailValidator(email) === true
   $: prodAppId = apps.getProdAppID($store.appId)
   $: promptInvite = showInvite(
     filteredInvites,
@@ -152,16 +151,13 @@
   }
 
   const sortInviteRoles = (a, b) => {
-    const aIsEmpty = !a.info.apps || Object.keys(a.info.apps).length === 0
+    const aEmpty =
-    const bIsEmpty = !b.info.apps || Object.keys(b.info.apps).length === 0
+      !a.info?.appBuilders?.length && Object.keys(a.info.apps).length === 0
+    const bEmpty =
+      !b.info?.appBuilders?.length && Object.keys(b.info.apps).length === 0
 
-    return aIsEmpty
+    if (aEmpty && !bEmpty) return 1
-      ? bIsEmpty
+    if (!aEmpty && bEmpty) return -1
-        ? 0
-        : 1 // Put items with empty "apps" at the bottom
-      : bIsEmpty
-      ? -1
-      : 0 // Put items with non-empty "apps" above the empty ones
   }
 
   const sortRoles = (a, b) => {
@@ -361,11 +357,11 @@
   }
 
   async function inviteUser() {
-    if (!queryIsEmail) {
+    if (!validEmail) {
       notifications.error("Email is not valid")
       return
     }
-    const newUserEmail = query + ""
+    const newUserEmail = email + ""
     inviting = true
 
     const payload = [
@@ -377,7 +373,7 @@
     ]
 
     if (creationAccessType === Constants.Roles.CREATOR) {
-      payload[0].appBuilder = prodAppId
+      payload[0].appBuilders = [prodAppId]
     } else {
       payload[0].apps = {
         [prodAppId]: creationAccessType,
@@ -395,20 +391,22 @@
   }
 
   const openInviteFlow = () => {
-    invitingFlow = true
+    $licensing.userLimitReached
+      ? userLimitReachedModal.show()
+      : (invitingFlow = true)
   }
 
   const onInviteUser = async () => {
     form.validate()
     userOnboardResponse = await inviteUser()
-    const originalQuery = query + ""
+    const originalQuery = email + ""
-    query = null
+    email = null
 
     const newUser = userOnboardResponse?.successful.find(
       user => user.email === originalQuery
     )
     if (newUser) {
-      query = originalQuery
+      email = originalQuery
       notifications.success(
         userOnboardResponse.created
           ? "User created successfully"
@@ -427,16 +425,26 @@
     }
     userOnboardResponse = null
     invitingFlow = false
+    // trigger reload of the users
+    query = ""
   }
 
   const onUpdateUserInvite = async (invite, role) => {
-    await users.updateInvite({
+    let updateBody = {
       code: invite.code,
       apps: {
         ...invite.apps,
         [prodAppId]: role,
       },
-    })
+    }
+
+    if (role === Constants.Roles.CREATOR) {
+      updateBody.appBuilders = [...(updateBody.appBuilders ?? []), prodAppId]
+      delete updateBody?.apps?.[prodAppId]
+    } else if (role !== Constants.Roles.CREATOR && invite?.appBuilders) {
+      invite.appBuilders = []
+    }
+    await users.updateInvite(updateBody)
     await filterInvites(query)
   }
 
@@ -482,7 +490,7 @@
   $: initSidePanel($store.builderSidePanel)
 
   function handleKeyDown(evt) {
-    if (evt.key === "Enter" && queryIsEmail && !inviting) {
+    if (evt.key === "Enter" && validEmail && !inviting) {
       onInviteUser()
     }
   }
@@ -524,9 +532,7 @@
       <Heading size="S">{invitingFlow ? "Invite new user" : "Users"}</Heading>
     </div>
     <div class="header">
-      <Button on:click={() => (invitingFlow = true)} size="S" cta
+      <Button on:click={openInviteFlow} size="S" cta>Invite user</Button>
-        >Invite user</Button
-      >
       <Icon
         color="var(--spectrum-global-color-gray-600)"
         name="RailRightClose"
@@ -579,9 +585,7 @@
             <div class="invite-directions">
               Try searching a different email or <span
                 class="underlined"
-                on:click={$licensing.userLimitReached
+                on:click={openInviteFlow}>invite a new user</span
-                  ? userLimitReachedModal.show
-                  : openInviteFlow}>invite a new user</span
               >
             </div>
           </div>
@@ -606,7 +610,9 @@
                   <div class="auth-entity-access">
                     <RoleSelect
                       placeholder={false}
-                      value={invite.info.apps?.[prodAppId]}
+                      value={invite.info?.appBuilders?.includes(prodAppId)
+                        ? Constants.Roles.CREATOR
+                        : invite.info.apps?.[prodAppId]}
                       allowRemove={invite.info.apps?.[prodAppId]}
                       allowPublic={false}
                       allowCreator={true}
@@ -756,10 +762,9 @@
             <FancyInput
               disabled={false}
               label="Email"
-              value={query}
+              value={email}
               on:change={e => {
                 email = e.detail
-                query = e.detail
               }}
               validate={() => {
                 if (!email) {

packages/frontend-core/src/api/user.js

@@ -156,14 +156,14 @@ export const buildUserEndpoints = API => ({
     return await API.post({
       url: "/api/global/users/onboard",
       body: payload.map(invite => {
-        const { email, admin, builder, apps, appBuilder } = invite
+        const { email, admin, builder, apps, appBuilders } = invite
         return {
           email,
           userInfo: {
             admin: admin ? { global: true } : undefined,
             builder: builder ? { global: true } : undefined,
             apps: apps ? apps : undefined,
-            appBuilder: appBuilder ? appBuilder : undefined,
+            appBuilders: appBuilders ? appBuilders : undefined,
           },
         }
       }),
@@ -176,10 +176,12 @@ export const buildUserEndpoints = API => ({
    * @param invite the invite code sent in the email
    */
   updateUserInvite: async invite => {
+    console.log(invite)
     await API.post({
       url: `/api/global/users/invite/update/${invite.code}`,
       body: {
         apps: invite.apps,
+        appBuilders: invite.appBuilders ? invite.appBuilders : undefined,
       },
     })
   },

packages/worker/src/api/controllers/global/users.ts

@@ -267,8 +267,8 @@ export const onboardUsers = async (ctx: Ctx<InviteUsersRequest>) => {
       // Temp password to be passed to the user.
       createdPasswords[invite.email] = password
       let builder: { global: boolean; apps?: string[] } = { global: false }
-      if (invite.userInfo.appBuilder) {
+      if (invite.userInfo.appBuilders) {
-        builder.apps = [invite.userInfo.appBuilder]
+        builder.apps = invite.userInfo.appBuilders
       }
       return {
         email: invite.email,
@@ -371,6 +371,15 @@ export const updateInvite = async (ctx: any) => {
     ...invite,
   }
 
+  if (!updateBody?.appBuilders || !updateBody.appBuilders?.length) {
+    updated.info.appBuilders = []
+  } else {
+    updated.info.appBuilders = [
+      ...(invite.info.appBuilders ?? []),
+      ...updateBody.appBuilders,
+    ]
+  }
+
   if (!updateBody?.apps || !Object.keys(updateBody?.apps).length) {
     updated.info.apps = []
   } else {
@@ -405,8 +414,8 @@ export const inviteAccept = async (
       }
       let builder: { global: boolean; apps?: string[] } = { global: false }
 
-      if (info.appBuilder) {
+      if (info.appBuilders) {
-        builder.apps = [info.appBuilder]
+        builder.apps = info.appBuilders
         request.builder = builder
       }
       delete info.apps