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 {