Global: Invite Users Modal UX Enhancements

[zcolah]

We will be making the following UX Enhancements to the Invite Users Modal

• [x] Make the Invite Users Button always be in it's default state and never be disabled Do not disable the invite users button. If a user tries to invite a user and has entered an incomplete email address or invalid email address, please show an error message below the input instead that says "Please enter a valid email address.". See Loom for more context: https://www.loom.com/share/743a3a39afb64f7e85c5f5ccb8b39e27?from_recorder=1&focus_title=1

  • [x] Update the Font Weight of the Modal Title to be 700

  • [x] Update the Icon in the Modal to be GroupAddRounded

  • [x] Change the invite input placeholder from "e.g. name@zesty.io" to "Email, comma or space separated". This will make it easier for customers to realize that they need to use commas or spaces to separate.

  • [x] Add ability to remove email address by clicking backspace on keyboard. See Loom: https://www.loom.com/share/809c3264880049779ff13cc44d188fbe

  • [x] Remove the dropdown option "Owner" unless the user has an Owner role themselves.

  • [x] Add Error Flow for users who do not have permission to add users. Currently users who do not have permission to invite users to an instance can use this modal to invite a user. However clicking on the invite users button actually does not send any invite email as they do not have the correct permissions. Hence we are adding an error flow as described below. If the user’s role does not allow them to invite a user, then please show the following flow when they click on the “Invite Users Button”: https://www.figma.com/file/zOI7oSH3fG1XDmmPzsP6PX/Zesty-3.0-Revamp?type=design&node-id=3552-10318&mode=dev

[finnar-bin]

@zcolah what's the expected behavior if the user presses space while free typing? Should it add whatever they typed as an email chip just like when you press "," or "Enter"?

[zcolah]

@theofficialnar this is a good suggestion. I checked Gmail and they do not do it, but Clickup does do it. And to be honest it is a better experience for sure.

May you also change the placeholder from "e.g. name@zesty.io" to "Email, comma or space separated"? This will make it easier for customers to realize that they need to use commas or spaces to separate. I have added it as a task above.

[zcolah]

@theofficialnar may also add ability to remove email address by clicking backspace on keyboard. See Loom: https://www.loom.com/share/809c3264880049779ff13cc44d188fbe

Added the task for the same above.

[zcolah]

@theofficialnar

Please remove the dropdown option "Owner" unless the user has an Owner role themselves. Added the task for the same above.

[finnar-bin]

• [x] Waiting for @zcolah to provide the design when there are successful and failed invites