feat: Invite note registered users to story maps

techmatters · Aug 22, 2023 · 099db06 · 099db06
1 parent 70eca14
commit 099db06
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 48 deletions.
diff --git a/src/collaboration/components/MembershipsList.js b/src/collaboration/components/MembershipsList.js
@@ -30,9 +30,16 @@ const MembershipsList = props => {
           xs: 12,
           sm: 3,
         },
-        valueGetter: ({ row: member }) => t('user.full_name', { user: member }),
+        valueGetter: ({ row: member }) =>
+          member.pendingEmail
+            ? member.pendingEmail
+            : t('user.full_name', { user: member }),
         cardRender: ({ row: member }) => (
-          <Typography>{t('user.full_name', { user: member })}</Typography>
+          <Typography>
+            {member.pendingEmail
+              ? member.pendingEmail
+              : t('user.full_name', { user: member })}
+          </Typography>
         ),
         renderCell: ({ row: member }) => <MemberName member={member} />,
       },
@@ -82,13 +89,14 @@ const MembershipsList = props => {
         onSearchParamsChange: setSearchParams,
       })}
       cardsProps={{
-        avatarRender: ({ row: member }) => (
-          <AccountAvatar
-            component="div"
-            sx={{ width: 40, height: 40 }}
-            user={member}
-          />
-        ),
+        avatarRender: ({ row: member }) =>
+          member.firstName && (
+            <AccountAvatar
+              component="div"
+              sx={{ width: 40, height: 40 }}
+              user={member}
+            />
+          ),
       }}
       tableProps={{
         initialSort: [

diff --git a/src/localization/locales/en-US.json b/src/localization/locales/en-US.json
@@ -984,8 +984,8 @@
         "card_collaborators_one": "Collaborating with {{sample}}",
         "card_collaborators_two": "Collaborating with {{sample}}",
         "card_collaborators_other": "Collaborating with {{sample}} and {{diff}} more",
-        "remove_membership_confirm_title": "Remove $t(user.full_name)'s Access",
-        "remove_membership_confirm_message": "Once removed, $t(user.full_name) will not be able to edit {{storyMapTitle}} draft.",
+        "remove_membership_confirm_title": "Remove {{name}}'s Access",
+        "remove_membership_confirm_message": "Once removed, {{name}} will not be able to edit {{storyMapTitle}} draft.",
         "remove_membership_confirm_button": "Remove"
     },
     "site": {

diff --git a/src/storyMap/components/StoryMapForm/ShareDialog.js b/src/storyMap/components/StoryMapForm/ShareDialog.js
@@ -100,10 +100,14 @@ const RemoveButton = props => {
       <ConfirmButton
         onConfirm={onRemoveWrapper}
         confirmTitle={t('storyMap.remove_membership_confirm_title', {
-          user: member,
+          name: member.pendingEmail
+            ? member.pendingEmail
+            : t('user.full_name', { user: member }),
         })}
         confirmMessage={t('storyMap.remove_membership_confirm_message', {
-          user: member,
+          name: member.pendingEmail
+            ? member.pendingEmail
+            : t('user.full_name', { user: member }),
           storyMapTitle: storyMap.title,
         })}
         confirmButton={t('storyMap.remove_membership_confirm_button')}

diff --git a/src/storyMap/components/StoryMapInvite.js b/src/storyMap/components/StoryMapInvite.js
@@ -45,7 +45,7 @@ const StoryMapInvite = () => {
       console.log({ decodedToken });
       return approveMembershipToken({
         token,
-        accountEmail: decodedToken.email,
+        accountEmail: decodedToken.email || decodedToken.pendingEmail,
         membership: { membershipId },
       });
     }, [token, decodedToken, membershipId])

diff --git a/src/storyMap/components/StoryMapsCard.js b/src/storyMap/components/StoryMapsCard.js
@@ -109,7 +109,6 @@ const CollaborationList = props => {
 };
 
 const StoryMapListItem = props => {
-  const { data: user } = useSelector(_.get('account.currentUser'));
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const { t, i18n } = useTranslation();
@@ -136,7 +135,6 @@ const StoryMapListItem = props => {
       approveMembership({
         membership: accountMembership,
         storyMap,
-        accountEmail: user.email,
       })
     ).then(data => {
       const success = _.get('meta.requestStatus', data) === 'fulfilled';
@@ -146,7 +144,7 @@ const StoryMapListItem = props => {
         navigate(`/tools/story-maps/${storyMapId}/${storyMapSlug}/edit`);
       }
     });
-  }, [dispatch, navigate, storyMap, accountMembership, user.email]);
+  }, [dispatch, navigate, storyMap, accountMembership]);
 
   return (
     <ListItem

diff --git a/src/storyMap/storyMapFragments.js b/src/storyMap/storyMapFragments.js
@@ -56,12 +56,7 @@ export const storyMapMetadataFields = /* GraphQL */ `
       memberships(user_Email_Not: $accountEmail, first: 2) {
         edges {
           node {
-            id
-            userRole
-            membershipStatus
-            user {
-              ...userFields
-            }
+            ...collaborationMembershipFields
           }
         }
       }

diff --git a/src/storyMap/storyMapService.js b/src/storyMap/storyMapService.js
@@ -162,12 +162,7 @@ export const addMemberships = ({ storyMap, emails, userRole }) => {
         }
       ) {
         memberships {
-          id
-          user {
-            ...userFields
-          }
-          userRole
-          membershipStatus
+          ...collaborationMembershipFields
         }
         errors
       }
@@ -211,16 +206,39 @@ export const deleteMembership = ({ storyMap, membership }) => {
     .then(_.get('deleteStoryMapMembership.membership'));
 };
 
-export const approveMembership = ({ membership, token, accountEmail }) => {
+export const approveMembership = ({ membership }, currentUser) => {
+  const query = graphql(`
+    mutation approveMembership($accountEmail: String!, $membershipId: String!) {
+      approveStoryMapMembership(input: { membershipId: $membershipId }) {
+        membership {
+          id
+        }
+        storyMap {
+          ...storyMapMetadataFields
+        }
+        errors
+      }
+    }
+  `);
+
+  return terrasoApi
+    .requestGraphQL(query, {
+      membershipId: membership.membershipId,
+      accountEmail: currentUser.email,
+    })
+    .then(response => ({
+      membership: response.approveStoryMapMembership.membership,
+      storyMap: extractStoryMap(response.approveStoryMapMembership.storyMap),
+    }));
+};
+
+export const approveMembershipToken = ({ membership, token, accountEmail }) => {
   const query = graphql(`
-    mutation approveMembership(
+    mutation approveMembershipToken(
       $accountEmail: String!
-      $membershipId: String
-      $inviteToken: String
+      $inviteToken: String!
     ) {
-      approveStoryMapMembership(
-        input: { membershipId: $membershipId, inviteToken: $inviteToken }
-      ) {
+      approveStoryMapMembershipToken(input: { inviteToken: $inviteToken }) {
         membership {
           id
         }
@@ -235,11 +253,11 @@ export const approveMembership = ({ membership, token, accountEmail }) => {
   return terrasoApi
     .requestGraphQL(query, {
       inviteToken: token,
-      membershipId: token ? null : membership.membershipId,
       accountEmail,
     })
+    .then(response => response.approveStoryMapMembershipToken)
     .then(response => ({
-      membership: response.approveStoryMapMembership.membership,
-      storyMap: extractStoryMap(response.approveStoryMapMembership.storyMap),
+      membership: response.membership,
+      storyMap: extractStoryMap(response.storyMap),
     }));
 };
diff --git a/src/storyMap/storyMapSlice.js b/src/storyMap/storyMapSlice.js
@@ -135,7 +135,7 @@ export const deleteMembership = createAsyncThunk(
 
 export const approveMembershipToken = createAsyncThunk(
   'storyMap/approveMembership',
-  storyMapService.approveMembership,
+  storyMapService.approveMembershipToken,
   null,
   false
 );
@@ -275,14 +275,11 @@ const storyMapSlice = createSlice({
     builder.addCase(addMemberships.fulfilled, (state, action) => {
       const memberships = [
         ...state.form.data.memberships,
-        ...action.payload.map(({ id, user, userRole, membershipStatus }) => ({
-          id: user.id,
-          membershipId: id,
-          email: user.email,
-          firstName: user.firstName,
-          lastName: user.lastName,
-          userRole,
-          membershipStatus,
+        ...action.payload.map(membership => ({
+          ...membership,
+          ...membership.user,
+          id: membership?.user?.id,
+          membershipId: membership.id,
         })),
       ];
       const uniqMemberships = _.uniqBy('id', memberships);