fix: Do not offer invite user functionality without permission

app/scenes/CollectionPermissions/AddPeopleToCollection.tsx

@@ -16,6 +16,7 @@ import PaginatedList from "~/components/PaginatedList";
 import Text from "~/components/Text";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import useThrottledCallback from "~/hooks/useThrottledCallback";
 import MemberListItem from "./components/MemberListItem";
@@ -28,6 +29,8 @@ function AddPeopleToCollection({ collection }: Props) {
   const { memberships, users } = useStores();
   const team = useCurrentTeam();
   const { t } = useTranslation();
+  const can = usePolicy(team);
+
   const [inviteModalOpen, setInviteModalOpen, setInviteModalClosed] =
     useBoolean();
   const [query, setQuery] = React.useState("");
@@ -68,11 +71,15 @@ function AddPeopleToCollection({ collection }: Props) {
     <Flex column>
       <Text type="secondary">
         {t("Need to add someone who’s not on the team yet?")}{" "}
-        <ButtonLink onClick={setInviteModalOpen}>
-          {t("Invite people to {{ teamName }}", {
-            teamName: team.name,
-          })}
-        </ButtonLink>
+        {can.inviteUser ? (
+          <ButtonLink onClick={setInviteModalOpen}>
+            {t("Invite people to {{ teamName }}", {
+              teamName: team.name,
+            })}
+          </ButtonLink>
+        ) : (
+          t("Ask an admin to invite them first")
+        )}
         .
       </Text>
       <Input

app/scenes/GroupMembers/AddPeopleToGroup.tsx

@@ -17,6 +17,7 @@ import PaginatedList from "~/components/PaginatedList";
 import Text from "~/components/Text";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import GroupMemberListItem from "./components/GroupMemberListItem";
 
@@ -31,6 +32,7 @@ function AddPeopleToGroup(props: Props) {
   const { users, groupMemberships } = useStores();
   const team = useCurrentTeam();
   const { t } = useTranslation();
+  const can = usePolicy(team);
 
   const [query, setQuery] = React.useState("");
   const [inviteModalOpen, handleInviteModalOpen, handleInviteModalClose] =
@@ -77,11 +79,15 @@ function AddPeopleToGroup(props: Props) {
         {t(
           "Add members below to give them access to the group. Need to add someone who’s not yet a member?"
         )}{" "}
-        <ButtonLink onClick={handleInviteModalOpen}>
-          {t("Invite them to {{teamName}}", {
-            teamName: team.name,
-          })}
-        </ButtonLink>
+        {can.inviteUser ? (
+          <ButtonLink onClick={handleInviteModalOpen}>
+            {t("Invite them to {{teamName}}", {
+              teamName: team.name,
+            })}
+          </ButtonLink>
+        ) : (
+          t("Ask an admin to invite them first")
+        )}
         .
       </Text>
       <Input

shared/i18n/locales/en_US/translation.json

@@ -468,6 +468,7 @@
   "{{ userName }} was added to the collection": "{{ userName }} was added to the collection",
   "Need to add someone who’s not on the team yet?": "Need to add someone who’s not on the team yet?",
   "Invite people to {{ teamName }}": "Invite people to {{ teamName }}",
+  "Ask an admin to invite them first": "Ask an admin to invite them first",
   "Search by name": "Search by name",
   "Search people": "Search people",
   "No people matching your search": "No people matching your search",