diff --git a/client/me/purchases/purchases-list/index.tsx b/client/me/purchases/purchases-list/index.tsx index 660d16aed03d96..385b2493b09e0b 100644 --- a/client/me/purchases/purchases-list/index.tsx +++ b/client/me/purchases/purchases-list/index.tsx @@ -14,6 +14,7 @@ import NoSitesMessage from 'calypso/components/empty-content/no-sites-message'; import InlineSupportLink from 'calypso/components/inline-support-link'; import Main from 'calypso/components/main'; import NavigationHeader from 'calypso/components/navigation-header'; +import Notice from 'calypso/components/notice'; import PageViewTracker from 'calypso/lib/analytics/page-view-tracker'; import TrackComponentView from 'calypso/lib/analytics/track-component-view'; import { getPurchasesBySite, getSubscriptionsBySite } from 'calypso/lib/purchases'; @@ -70,6 +71,55 @@ class PurchasesList extends Component< return ! this.props.sites.length && ! this.props.subscriptions.length; } + renderPurchasesByOtherAdminsNotice() { + const { sites, translate } = this.props; + + /* + * Because this is only rendered when the user has no purchases, + * we don't need to check each site to ensure the purchases aren't + * linked with the user (they can't be, since they don't have any). + */ + const affectedSites = sites + .filter( + ( site ) => + ( ! site?.plan.is_free || site?.products.length > 0 ) && site.capabilities.manage_options + ) + .map( ( site ) => site.slug ); + + if ( ! affectedSites.length ) { + return; + } + + let affectedSitesString = ''; + + if ( affectedSites.length === 1 ) { + affectedSitesString = affectedSites[ 0 ]; + } else { + const allButLast = affectedSites.slice( 0, -1 ).join( ', ' ); + const translatedAnd = translate( 'and', { + comment: 'last conjunction in a list of blognames: (blog1, blog2,) blog3 _and_ blog4', + } ); + const last = affectedSites[ affectedSites.length - 1 ]; + + affectedSitesString = allButLast + ' ' + translatedAnd + ' ' + last; + } + + return ( + + { translate( + 'The upgrades for {{strong}}%(affectedSitesString)s{{/strong}} are owned by another site administrator. ' + + 'These can only be managed by the purchase owners.', + { + components: { strong: }, + args: { + affectedSitesString, + }, + } + ) } + + ); + } + renderConciergeBanner() { const { nextAppointment, availableSessions, isUserBlocked } = this.props; return ( @@ -144,6 +194,7 @@ class PurchasesList extends Component< eventName="calypso_no_purchases_upgrade_nudge_impression" eventProperties={ commonEventProps } /> + { this.renderPurchasesByOtherAdminsNotice() }