diff --git a/client/my-sites/upgrades/domain-management/email/google-apps-users-card.jsx b/client/my-sites/upgrades/domain-management/email/google-apps-users-card.jsx
index 4bde571927bf6f..cdc0ecdaca126c 100644
--- a/client/my-sites/upgrades/domain-management/email/google-apps-users-card.jsx
+++ b/client/my-sites/upgrades/domain-management/email/google-apps-users-card.jsx
@@ -2,17 +2,20 @@
* External dependencies
*/
import React from 'react';
+import groupBy from 'lodash/groupBy';
/**
* Internal dependencies
*/
import CompactCard from 'components/card/compact';
+import Notice from 'components/notice';
+import Button from 'components/button';
import PendingGappsTosNotice from 'my-sites/upgrades/components/domain-warnings/pending-gapps-tos-notice';
import paths from 'my-sites/upgrades/paths';
import analyticsMixin from 'lib/mixins/analytics';
import SectionHeader from 'components/section-header';
import GoogleAppsUserItem from './google-apps-user-item';
-import { getSelectedDomain } from 'lib/domains';
+import { getSelectedDomain, hasPendingGoogleAppsUsers } from 'lib/domains';
const GoogleAppsUsers = React.createClass( {
mixins: [ analyticsMixin( 'domainManagement', 'googleApps' ) ],
@@ -50,44 +53,68 @@ const GoogleAppsUsers = React.createClass( {
this.recordEvent( 'addGoogleAppsUserClick', this.props.selectedDomainName );
},
- render() {
- const pendingDomains = this.getDomainsAsList().filter( domain =>
- domain.googleAppsSubscription &&
- domain.googleAppsSubscription.pendingUsers &&
- domain.googleAppsSubscription.pendingUsers.length !== 0 );
-
+ renderDomain( domain, users ) {
return (
-
- { pendingDomains.length !== 0 &&
}
-
+
+ label={ domain }>
{ this.canAddUsers() && (
-
{ this.translate( 'Add Google Apps User' ) }
-
+
) }
-
-
-
- { this.props.googleAppsUsers.map(
- ( user, index ) => (
-
- )
- ) }
+
+
+ { users.map( ( user, index ) => this.renderUser( user, index ) ) }
);
+ },
+
+ renderUser( user, index ) {
+ if ( user.error ) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+ },
+
+ render() {
+ const pendingDomains = this.getDomainsAsList().filter( hasPendingGoogleAppsUsers ),
+ usersByDomain = groupBy( this.props.googleAppsUsers, 'domain' );
+
+ return (
+
+ { pendingDomains.length !== 0 &&
+
+ }
+
+ { Object.keys( usersByDomain ).map( ( domain ) => this.renderDomain( domain, usersByDomain[ domain ] ) ) }
+
+ );
}
} );
diff --git a/client/my-sites/upgrades/domain-management/email/placeholder.jsx b/client/my-sites/upgrades/domain-management/email/placeholder.jsx
index 41cac6fe8882e3..3710e223bd31fc 100644
--- a/client/my-sites/upgrades/domain-management/email/placeholder.jsx
+++ b/client/my-sites/upgrades/domain-management/email/placeholder.jsx
@@ -11,11 +11,11 @@ import SectionHeader from 'components/section-header';
import GoogleAppsUserItem from './google-apps-user-item';
const Placeholder = () =>
-
+
-
-
+
+
diff --git a/client/my-sites/upgrades/domain-management/style.scss b/client/my-sites/upgrades/domain-management/style.scss
index f8c2ddfec2c67e..1f7aa7f8e0db8b 100644
--- a/client/my-sites/upgrades/domain-management/style.scss
+++ b/client/my-sites/upgrades/domain-management/style.scss
@@ -1002,36 +1002,18 @@ ul.email-forwarding__list {
}
}
-.google-apps-users-card.card {
- padding: 0;
- @include clear-fix;
+.google-apps-users-card {
+ margin-bottom: 10px;
}
-.google-apps-users-card__add-user-button {
- @include breakpoint( '<480px' ) {
- width: 100%;
- }
-
- @include breakpoint( '>480px' ) {
- float: right;
+.google-apps-users-card__user-list {
+ &.card {
+ padding: 0;
+ @include clear-fix;
}
}
-.google-apps-users-card__subtext {
- font-size: 13px;
- margin: 5px 0;
- font-style: italic;
- font-weight: 400;
- color: $gray;
-}
-
-.google-apps-users-card__notice.notice {
- font-size: 13px;
- margin: 10px 0;
- animation: none;
-}
-
-.google-apps-users-card__user-list {
+.google-apps-users-card__user-list-inner {
list-style: none;
margin: 0;
@@ -1048,6 +1030,10 @@ ul.email-forwarding__list {
border-bottom: 1px solid $gray-light;
}
}
+
+ .notice {
+ margin: 0;
+ }
}
.google-apps-user-item__email {