Improve Calypso user management

client/my-sites/people/people-list-item/index.jsx

@@ -7,11 +7,12 @@ import { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import PeopleProfile from 'calypso/my-sites/people/people-profile';
 import { recordGoogleEvent } from 'calypso/state/analytics/actions';
-import { resendInvite } from 'calypso/state/invites/actions';
+import { sendInvites, resendInvite } from 'calypso/state/invites/actions';
 import {
 	isRequestingInviteResend,
 	didInviteResendSucceed,
 	didInviteDeletionSucceed,
+	getSendInviteState,
 } from 'calypso/state/invites/selectors';
 
 import './style.scss';
@@ -55,6 +56,20 @@ class PeopleListItem extends PureComponent {
 		);
 	};
 
+	canReceiveInvite = () => {
+		const site = this.props.site;
+		const user = this.props.user;
+		return (
+			user &&
+			user.roles &&
+			user.email &&
+			! user.linked_user_ID &&
+			site &&
+			site.slug &&
+			! this.props.isSelectable
+		);
+	};
+
 	canLinkToSubscriberProfile = () => {
 		const { site, user } = this.props;
 
@@ -106,6 +121,19 @@ class PeopleListItem extends PureComponent {
 		this.props.resendInvite( siteId, inviteKey );
 	};
 
+	onSendInvite = ( event ) => {
+		const { requestingSend, siteId, user } = this.props;
+		// Prevents navigation to invite-details screen and onClick event.
+		event.preventDefault();
+		event.stopPropagation();
+
+		if ( requestingSend?.progress ) {
+			return null;
+		}
+
+		this.props.sendInvites( siteId, [ user.email ], user.roles[ 0 ], '', false );
+	};
+
 	renderInviteStatus = () => {
 		const { type, invite, translate, requestingResend, resendSuccess, RevokeClearBtn } = this.props;
 		const { isPending } = invite;
@@ -135,6 +163,22 @@ class PeopleListItem extends PureComponent {
 		);
 	};
 
+	renderInviteButton = () => {
+		const { translate, requestingSend } = this.props;
+
+		return (
+			<div className="people-list-item__invite-status">
+				<Button
+					busy={ requestingSend?.progress }
+					className="people-list-item__invite-send"
+					onClick={ this.onSendInvite }
+				>
+					{ translate( 'Invite' ) }
+				</Button>
+			</div>
+		);
+	};
+
 	render() {
 		const {
 			className,
@@ -149,6 +193,7 @@ class PeopleListItem extends PureComponent {
 		} = this.props;
 
 		const isInvite = invite && ( 'invite' === type || 'invite-details' === type );
+		const isLinkedUser = user && user.linked_user_ID;
 
 		if ( isInvite && inviteWasDeleted ) {
 			// After an invite is deleted and the user is returned to the
@@ -163,10 +208,12 @@ class PeopleListItem extends PureComponent {
 			{
 				'is-invite': isInvite,
 				'is-invite-details': type === 'invite-details',
+				'is-not-linked-user': ! isLinkedUser && ! isInvite,
 			},
 			className
 		);
 		const canLinkToProfile = this.canLinkToProfile();
+		const canReceiveInvite = this.canReceiveInvite();
 		const tagName = canLinkToProfile ? 'a' : 'span';
 
 		return (
@@ -187,6 +234,7 @@ class PeopleListItem extends PureComponent {
 					/>
 				</div>
 
+				{ canReceiveInvite && ! isInvite && this.renderInviteButton() }
 				{ isInvite && showStatus && this.renderInviteStatus() }
 
 				{ onRemove && (
@@ -220,10 +268,11 @@ export default connect(
 		return {
 			requestingResend: isRequestingInviteResend( state, siteId, inviteKey ),
 			resendSuccess: didInviteResendSucceed( state, siteId, inviteKey ),
+			requestingSend: getSendInviteState( state ),
 			siteId,
 			inviteKey,
 			inviteWasDeleted,
 		};
 	},
-	{ resendInvite, recordGoogleEvent }
+	{ sendInvites, resendInvite, recordGoogleEvent }
 )( localize( PeopleListItem ) );

client/my-sites/people/people-list-item/style.scss

@@ -49,6 +49,10 @@
 	}
 }
 
+.people-list-item.is-not-linked-user {
+	background: var(--studio-gray-10);
+}
+
 .people-list-item__invite-status {
 	align-self: center;
 	flex-shrink: 0;
@@ -86,7 +90,8 @@
 }
 
 .people-list-item__invite-resend.button,
-.people-list-item__invite-revoke.button {
+.people-list-item__invite-revoke.button,
+.people-list-item__invite-send {
 	vertical-align: baseline;
 	margin-left: 0.75rem;
 

client/my-sites/people/team-members/index.tsx

@@ -4,6 +4,7 @@ import InfiniteList from 'calypso/components/infinite-list';
 import NoResults from 'calypso/my-sites/no-results';
 import PeopleListItem from 'calypso/my-sites/people/people-list-item';
 import { useSelector } from 'calypso/state';
+import { getPendingInvitesForSite } from 'calypso/state/invites/selectors';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import PeopleListSectionHeader from '../people-list-section-header';
 import type { UsersQuery } from './types';
@@ -20,12 +21,19 @@ function TeamMembers( props: Props ) {
 	const translate = useTranslate();
 	const { search, usersQuery, showAddTeamMembersBtn = true } = props;
 	const site = useSelector( ( state ) => getSelectedSite( state ) );
+	const siteId = site?.ID as number;
+	const pendingInvites = useSelector( ( state ) => getPendingInvitesForSite( state, siteId ) );
+	const pendingInvitesMails = pendingInvites?.map( ( invite ) => invite.user?.email );
 
 	const listKey = [ 'team-members', site?.ID, search ].join( '-' );
 	const { data, fetchNextPage, isLoading, isFetchingNextPage, hasNextPage } = usersQuery;
 
 	const members = data?.users || [];
-	const membersTotal = data?.total;
+	const filteredMembers = members.filter(
+		( member ) => ! pendingInvitesMails?.includes( member?.email )
+	);
+
+	const membersTotal = filteredMembers.length;
 
 	const addTeamMemberLink = `/people/new/${ site?.slug }`;
 
@@ -89,7 +97,7 @@ function TeamMembers( props: Props ) {
 						{ isLoading && renderLoadingPeople() }
 						<InfiniteList
 							listkey={ listKey }
-							items={ members }
+							items={ filteredMembers }
 							fetchNextPage={ fetchNextPage }
 							fetchingNextPage={ isFetchingNextPage }
 							lastPage={ ! hasNextPage }