Purchases: Show the fetching state when visiting ManagePurchase after renewing

[drewblaisdell]

This PR updates ManagePurchase to render the fetching state when data is fetching after a renewal, to hide any stale data related to the pre-renewal purchase.

Previously, we attempted to just obscure the renewal date, but there are other aspects of the purchase (the price, the expired style, etc) that we would need to change temporarily as well. The simplest solution is to just hide the purchase until a new one has been fetched from the API.

Fixes #161.

Testing

• Visit http://calypso.localhost:3000/purchases and renew an expired purchase.
• Assert that you are redirected to the ManagePurchase page for the given purchase, see the success notice, and that the fetching state is displayed below for a moment instead of stale data.
• QA review
• Code review

[scruffian]

We need to do something about the notices too:

[scruffian]

I added ca5291a to hide the renewal notice (and the expiring CC notice) after renewal too.

I'm good with your commit 👍

[fabianapsimoes]

QA 👍

[drewblaisdell]

@scruffian Thanks for the commit. Code is 👍 for this, then.

[stephanethomas]

I just wanted to mention that I think it's indeed the best option we have for now. I've spent quite some time trying to figure out a better approach to no avail.

The fundamental flaw here is that the /me/transactions/ API endpoint doesn't return the new list of purchases. It means that the list of purchases stored in PurchasesStore is stale as soon the transaction is successful. We can ask this store to fetch again data from the /me/purchases endpoint but users would still see the former data on the Manage Purchase page in the mean time.

The best workaround I can think of is to ask the store to update the purchase just renewed: this wouldn't perform any call to the API but just update local data. The thing is, it's easy to deduct basic changes client-side such as the new expiration date and perform this optimistic update. However, it's tricky to determine others such as the new price when the user cancels privacy protection. We could reset the corresponding properties in the store though but it doesn't solve everything. For example what if the user uses a different payment method during renewal? Again we would display the former payment method when users are redirected on the Manage Purchase page.

So this solution to update the data optimistically isn't a good one, which leaves us with either updating /me/transactions/ to return the new list of purchases, or display a skeleton while we load the up-to-date data :).