Purchases: Show the fetching state when visiting ManagePurchase aft…

…er renewing Fixes #161.
Automattic · Nov 24, 2015 · 54b56fc · 54b56fc
1 parent 697314e
commit 54b56fc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 26 deletions.
diff --git a/client/me/purchases/manage-purchase/index.jsx b/client/me/purchases/manage-purchase/index.jsx
@@ -67,7 +67,7 @@ const ManagePurchase = React.createClass( {
 		const purchase = getPurchase( this.props );
 		let noticeStatus = 'is-info';
 
-		if ( isDataLoading( this.props ) || ! isExpiring( purchase ) || this.isDataFetchingAfterRenewal() ) {
+		if ( isDataLoading( this.props ) || ! isExpiring( purchase ) ) {
 			return null;
 		}
 
@@ -272,7 +272,7 @@ const ManagePurchase = React.createClass( {
 	renderPaymentInfo() {
 		const purchase = getPurchase( this.props );
 
-		if ( isDataLoading( this.props ) ) {
+		if ( isDataLoading( this.props ) || this.isDataFetchingAfterRenewal() ) {
 			return <span className="manage-purchase__detail" />;
 		}
 
@@ -303,22 +303,23 @@ const ManagePurchase = React.createClass( {
 	},
 
 	renderPaymentDetails() {
-		const purchase = getPurchase( this.props );
+		const purchase = getPurchase( this.props ),
+			isLoading = isDataLoading( this.props ) || this.isDataFetchingAfterRenewal();
 
-		if ( ! isDataLoading( this.props ) && isOneTimePurchase( purchase ) ) {
+		if ( ! isLoading && isOneTimePurchase( purchase ) ) {
 			return null;
 		}
 
 		let paymentDetails = (
 			<span>
 				<em className="manage-purchase__detail-label">
-					{ isDataLoading( this.props ) ? null : this.translate( 'Payment method' ) }
+					{ isLoading ? null : this.translate( 'Payment method' ) }
 				</em>
 				{ this.renderPaymentInfo() }
 			</span>
 		);
 
-		if ( isDataLoading( this.props ) || ! showEditPaymentDetails( purchase ) ) {
+		if ( isLoading || ! showEditPaymentDetails( purchase ) ) {
 			return (
 				<li>
 					{ paymentDetails }
@@ -340,7 +341,7 @@ const ManagePurchase = React.createClass( {
 	renderRenewButton() {
 		const purchase = getPurchase( this.props );
 
-		if ( ! isRenewable( purchase ) || isExpired( purchase ) || isExpiring( purchase ) || this.isDataFetchingAfterRenewal() ) {
+		if ( ! isRenewable( purchase ) || isExpired( purchase ) || isExpiring( purchase ) ) {
 			return null;
 		}
 
@@ -375,7 +376,7 @@ const ManagePurchase = React.createClass( {
 	renderRenewsOrExpiresOnLabel() {
 		const purchase = getPurchase( this.props );
 
-		if ( ! this.isDataFetchingAfterRenewal() && ( isExpiring( purchase ) || creditCardExpiresBeforeSubscription( purchase ) ) ) {
+		if ( isExpiring( purchase ) || creditCardExpiresBeforeSubscription( purchase ) ) {
 			return this.translate( 'Expires on' );
 		}
 
@@ -389,10 +390,6 @@ const ManagePurchase = React.createClass( {
 	renderRenewsOrExpiresOn() {
 		const purchase = getPurchase( this.props );
 
-		if ( this.isDataFetchingAfterRenewal() ) {
-			return null;
-		}
-
 		if ( isRenewing( purchase ) ) {
 			return this.moment( purchase.renewDate ).format( 'LL' );
 		}
@@ -493,7 +490,7 @@ const ManagePurchase = React.createClass( {
 			cancelPurchaseNavItem,
 			cancelPrivateRegistrationNavItem;
 
-		if ( isDataLoading( this.props ) ) {
+		if ( isDataLoading( this.props ) || this.isDataFetchingAfterRenewal() ) {
 			classes = 'manage-purchase__info is-placeholder';
 			editPaymentMethodNavItem = <VerticalNavItem isPlaceholder />;
 			cancelPurchaseNavItem = <VerticalNavItem isPlaceholder />;
@@ -510,18 +507,14 @@ const ManagePurchase = React.createClass( {
 			productLink = this.renderProductLink();
 			price = this.renderPrice();
 			renewsOrExpiresOnLabel = this.renderRenewsOrExpiresOnLabel();
-			renewsOrExpiresOn = this.renderRenewsOrExpiresOn();
 			renewButton = this.renderRenewButton();
 			expiredRenewNotice = this.renderExpiredRenewNotice();
 			editPaymentMethodNavItem = this.renderEditPaymentMethodNavItem();
 			cancelPurchaseNavItem = this.renderCancelPurchaseNavItem();
 			cancelPrivateRegistrationNavItem = this.renderCancelPrivateRegistration();
+			renewsOrExpiresOn = this.renderRenewsOrExpiresOn();
 		}
 
-		const renewsOrExpiresOnClasses = classNames( 'manage-purchase__detail', {
-			'is-placeholder': this.isDataFetchingAfterRenewal()
-		} );
-
 		return (
 			<div>
 				<Card className={ classes }>
@@ -543,7 +536,7 @@ const ManagePurchase = React.createClass( {
 						</li>
 						<li>
 							<em className="manage-purchase__detail-label">{ renewsOrExpiresOnLabel }</em>
-							<span className={ renewsOrExpiresOnClasses }>
+							<span className="manage-purchase__detail">
 								{ renewsOrExpiresOn }
 							</span>
 						</li>

diff --git a/client/me/purchases/manage-purchase/style.scss b/client/me/purchases/manage-purchase/style.scss
@@ -179,13 +179,6 @@
 		text-align: right;
 	}
 
-	&.is-placeholder {
-		@include placeholder( 23% );
-
-		display: block;
-		height: 25px;
-	}
-
 	a {
 		display: block;
 		font-size: 12px;