Purchases: Add loading page skeleton for Single Purchase pages

[fabianapsimoes]

We need design for Purchase pages loading state. This includes following pages:

• Manage Purchase
• Cancel Purchase
• Confirmation Cancel Purchase
• Edit Payment Method (moved to Purchases: Add loading page skeleton for Edit Payment Method page #843)
• Edit Card Details

As part of this task we should also add redirects for all aforementioned pages when there is no purchase selected.

Loading Placeholders

@mikeshelton1503 proposed the following mockups:

• Manage Purchase
  
• Cancel Purchase
  
• Confirm Cancel Purchase
  
• Edit Card Details
  

Page Redirects

• Perform redirect when user can't access Manage Purchase page
• Perform redirect when user can't access Cancel Purchase page
• Perform redirect when user can't access Confirm Cancel Purchase page
• Perform redirect when user can't access Cancel Private Registration page
• Perform redirect when user can't access Edit Card Details page

Refactoring tasks

• Create Edit Card Details skeleton that can be shared by loading placeholder and page component - it produced more lines of code, than using duplicated code in case of Edit Card Details page, let's skip it for the time being
• Move all page titles into one place
• Always use selectedSite.slug in urls when referencing site domain

[gziolo]

Manage Purchase page needs some improvements on mobile view:

[fabianapsimoes]

Manage Purchase page needs some improvements on mobile view:

That's being fixed in #670.

[gziolo]

Page skeleton for Edit Payment Method page moved to #843.

[gziolo]

@scruffian I was trying to accomplish refactoring: Create Edit Card Details skeleton that can be shared by loading placeholder and page component.
I ended up producing more lines of code, than using duplicated HTML code in case of Edit Card Details page, let's skip it for the time being. Feel free to revisit it in the future. I hope you can come up with some nice optimisation :)

[scruffian]

@gziolo IMO its worth having more lines to reduce duplication. I anticipate people forgetting to update skeletons in the future when they update a page...

[gziolo]

This is still work in progress. All loading placeholders are done. I started working on handling page redirects when there are cases like:

• purchase was removed but we try to access page using old url
• we enter the page that shouldn't be loaded for the given purchase

I'm not quite sure how we should handle the case when site's domain has changed, and user tries to load purchase page with old url. Sites list returns no data at the moment causing issues in placeholders.

@fabianapsimoes I think it'd be good to revisit if we want to implement those redirects in v1.

[fabianapsimoes]

@gziolo could you open a new issue describing this issue? Then we can discuss it and prioritize in a different thread.

[gziolo]

@fabianapsimoes: issue created: #1407, I don't think it's very important, but it would be nice to find solution for this edge case.

[fabianapsimoes]

I've reported the missing page redirects in this issue in #2519. Closing this issue.

[gziolo]

👍