From 486d00c5a71a2b6489a539348628620c11598bae Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Tue, 24 Nov 2015 14:50:48 -0800 Subject: [PATCH 1/2] Purchases: Show the fetching state when visiting `ManagePurchase` after renewing Fixes #161. --- client/me/purchases/manage-purchase/index.jsx | 31 +++++++------------ .../me/purchases/manage-purchase/style.scss | 7 ----- 2 files changed, 12 insertions(+), 26 deletions(-) diff --git a/client/me/purchases/manage-purchase/index.jsx b/client/me/purchases/manage-purchase/index.jsx index 2e9159fed0478e..46c7d6f3465319 100644 --- 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 ; } @@ -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 = ( - { isDataLoading( this.props ) ? null : this.translate( 'Payment method' ) } + { isLoading ? null : this.translate( 'Payment method' ) } { this.renderPaymentInfo() } ); - if ( isDataLoading( this.props ) || ! showEditPaymentDetails( purchase ) ) { + if ( isLoading || ! showEditPaymentDetails( purchase ) ) { return (
  • { 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 = ; cancelPurchaseNavItem = ; @@ -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 (
    @@ -543,7 +536,7 @@ const ManagePurchase = React.createClass( {
  • { renewsOrExpiresOnLabel } - + { renewsOrExpiresOn }
    • diff --git a/client/me/purchases/manage-purchase/style.scss b/client/me/purchases/manage-purchase/style.scss index 320bddc0bf7c7f..05669cec55f0ea 100644 --- 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; From d8defef78aa996deb26f52e1642958561c4aee4e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 25 Nov 2015 11:19:28 +0000 Subject: [PATCH 2/2] Purchases: Hide the notices when a purchase is loading after a renewal --- client/me/purchases/manage-purchase/index.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/me/purchases/manage-purchase/index.jsx b/client/me/purchases/manage-purchase/index.jsx index 46c7d6f3465319..0a6964af275a9c 100644 --- a/client/me/purchases/manage-purchase/index.jsx +++ b/client/me/purchases/manage-purchase/index.jsx @@ -60,6 +60,10 @@ const ManagePurchase = React.createClass( { }, renderNotices() { + if ( isDataLoading( this.props ) || this.isDataFetchingAfterRenewal() ) { + return null; + } + return this.renderPurchaseExpiringNotice() || this.renderCreditCardExpiringNotice(); }, @@ -67,7 +71,7 @@ const ManagePurchase = React.createClass( { const purchase = getPurchase( this.props ); let noticeStatus = 'is-info'; - if ( isDataLoading( this.props ) || ! isExpiring( purchase ) ) { + if ( ! isExpiring( purchase ) ) { return null; } @@ -96,10 +100,6 @@ const ManagePurchase = React.createClass( { }, renderCreditCardExpiringNotice() { - if ( isDataLoading( this.props ) ) { - return null; - } - const purchase = getPurchase( this.props ), { domain, id, payment: { creditCard } } = purchase;