Purchases: Form doesn't load correctly when attempting to Edit Payment Method

[SiobhyB]

What I did:

I attempted to update my credit card details by navigating to my Purchases page, clicking on the purchase that I wished to update, and then selecting the option to Edit Payment Method.

What I expected:

I expected to be able to enter my new credit card details in a form.

What happened:

The form didn't load correctly; a blank grey outline of the fields are there but it's not possible to click into any of the fields or update them.

Testing on the latest version of Chrome (47.0.2526.73) and OSX (10.11.1).

2445258-t, 2444814-t

[frosty]

Another report of this issue: 2448078-t.

[seejacobscott]

I've run into a similar issue when attempting to cancel a premium upgrade while there is a domain attached. When I click the "Cancel and Refund WordPress.com Premium" Link it shows me the following:

I initially requested the cancellation last night and had no problem, I received the email but this morning when I attempted to confirm the cancellation it was giving me a 500 error:

I attempted to redo the cancellation and it began doing this.

[fabianapsimoes]

cc @stephanethomas

[stephanethomas]

I suspect we get into this state because our data components display a placeholder until all data have been loaded from the server. For example, here is how this check is performed in the EditCardDetailsData component:

function isDataLoading( state ) {
  return (
    ! state.card ||
    ! state.selectedPurchase.hasLoadedFromServer ||
    ! state.selectedSite
  );
}

In this particular case, I think the problem lies with the hasLoadedFromServer flag in the Purchases store. This flag is only true if we were able to fetch data successfully from the server. This means that we'll display the placeholder in case of failure, instead of displaying any error message.

@gziolo, @rads: this is a tricky one. What would you suggest here? This probably only happens from time to time but I still think we should display an error message. That wouldn't be easy since we would have to update a bunch of components. On the other hand, we almost never handle errors correctly. This is an opportunity to fix that.

[gziolo]

Yes, this is very important issue that we need to solve :) We don't have ready solution yet. In Redux documentation there is nice page explaining how to handle Async Actions. The proposed solution is quite similar to what we are doing:

• use isFetching field in state to hold information if there is pending server request
• use error field in state to keep error message returned from the last failed server request
• use didInvalidate field in state to hold information if data is stale and should be updated
• use lastUpdated field in state to keep the date of the last server request

In this case error field should be enough. I'm afraid that in this case there could also go something wrong with card or selectedSite. So in the best case we should expose hasLoadedFromServer and error fields also for those stores.

[demetd]

Another report can be found here: 997137-t

[darnelldibbles-zz]

A few more reports of the error in 677847-f and 677740-f

[KokkieH]

Two more reports in 677901-f

[pento]

Another report on live chat, trying to renew the bundle on lovinmindfulness.com.

[benchilcote]

Another case from Live chat user knfusa. CC info was greyed out: 280548-chat

[dcoleonline]

Another: 2452790-t

[kriskarkoski]

Also 282845-chat, noting here so I can follow up with the user once it's fixed

[frosty]

One more: 2460608-t - noting for followup.

[fabianapsimoes]

Just so you know, there's a fix pending review (#1596). I hope we'll get it merged soon.

[fabianapsimoes]

@SiobhyB, @demetd, @darnelldibbles, @KokkieH, @pento, @benchilcote, @dcoleonline, @kriskarkoski, @frosty -- pinging in case to make sure you all know we merged the fix for this issue.Thanks for the reports!