Implement updated Order Confirmation for Venia (PWA)

[ericerway]

This issue is for the following packages:

[X] venia-concept
[ ] pwa-buildpack
[ ] peregrine
[ ] pwa-module
[ ] pwa-devdocs

Description

Mockup for order confirmation page - https://magento.invisionapp.com/share/WQN5F7BYBPG#/screens/324379326

As a shopper, I want to have immediate access to the order that I placed on Venia after checkout so that I can check the status at any time.

Assumptions

• Completed MVP for Checkout of Venia
• REST/GraphQL coverage to retrieve order information (e.g. ID#, email)
• Password delivered via email upon Create Account based on order information (changed)
• Detailed account creation per UX prototype will be handled in future sprint
• Back button is not necessary as part of the left drawer but close is required [NEW]

Tasks

• Discovery for REST/GraphQL coverage with orders and mail (service)
• Identify admin-only endpoints with data customer would want to see, for future adaptation
• Expose \Magento\Sales\Api\OrderCustomerManagementInterface::create in REST API
• Implement UI as React RootComponent displaying order data from REST API
• Implement UI interaction (button) to invoke API call that sends account creation email
• Testing and documentation (as appropriate)

[dmtrkad]

• Checkout review
  (1 SP)
• Expose \Magento\Sales\Api\OrderCustomerManagementInterface::create in REST API
  1. Need details
• Implement UI page container
  (1 SP)
• Fetching Order information on page load event
  (1 SP)
• Implement UI interaction (button) to invoke API call that sends account creation email
  (1 SP)
• Adding unit tests
  (2 SP)
• Adding user testing scenarios
  1. testing strategy is not defined. The main approach is under consideration
• Testing and documentation (as appropriate)
  1. Development docs.
  (3 SP)
  2. Testing docs.
  - No access to manage hip scripts. Should be provided to measure an effort
  - the testing strategy is not defined. The main approach is under consideration
  (2 SP)

Acceptance criteria

1. Implement page in accordance with the link below https://magento.invisionapp.com/share/S6OGPZQN4QC
2. Loading order data
3. Static "Continue shopping"-button's shown on the screen.
4. "Create an account"-button is shown on the screen and clickable
5. If the user clicks on "Create an account"-button, an email will be sent.

Demo scenario

1. As an anonymous user, I switch from check out page to Order Confirmation page
2. Then, the order confirmation page ID is shown on the screen
3. Static text is shown on the page
4. "Continue shopping" and "create account"-buttons are shown on the screen
5. "Continue shopping"-button is not leaded to close the drawer
6. "Create account"-button 's sent an email in the implemented format

Q&A

1. Do we need to support mobile versions only? No desktop

• This needs to support mobile and desktop
• DESKTOP VERSION - https://magento.invisionapp.com/share/R8OGPWYVU2B
  Continue Shopping button will take the shopper to the home page
  Create an Account button will take the shopper to the create account screen with email, first name and last name pre-filled.

2. What're the integration details for REST/GraphQL coverage structure? (API endpoints exists: Order information, sending an email ). What's the behavior if the user click button in case if an email 's sent (Positive&Negative scenario)
3. What kind of endpoints need to be provided for an admin role?
4. What kind of data do we need to display to customers in terms of admin-only endpoints?
5. Technical requirements are needed to provide \Magento\Sales\Api\OrderCustomerManagementInterface::create in REST API
6. What 'll be happened if the user did not create an account and clicks on "continue shopping"- button?

[ericerway]

• This needs to support mobile and desktop
• Need @zetlen on the REST/GraphQL - we typically revert to REST where GraphQL is not available
• Need @zetlen on the endpoints/data/resolve as well

[dmtrkad]

• This needs to support mobile and desktop
• Need @zetlen on the REST/GraphQL - we typically revert to REST where GraphQL is not available
• Need @zetlen on the endpoints/data/resolve as well

@ericerway let you please kindly use an approach to update answers under questions to make things clean. I've moved one of your answer under the question and updated my comment above.

[Starotitorov]

Frontend tasks:

• Implement page component.
• Review checkout flow.
• Implement fetching of order information.
• Handle create account button click.
• Add continue shopping button.
• Add unit tests.
• Add docs.

[vitalics]

Scenario ready for review and available from link below
https://app.hiptest.com/l/sc/2337958

[zetlen]

I've learned from our architects that we have no REST API endpoint for displaying order confirmation data for guest checkouts. In fact, even in Luma, the guest checkout confirmation page is very sparse:

@eerway @Starotitorov @soumya-ashok For MVP, let's reduce the scope of the confirmation page for guest checkouts to show just what the Luma guest confirmation page shows.

[Starotitorov]

@ericerway @zetlen @soumya-ashok Guys, everything is Ok with the scope. I was able to get required information to render it on the page, now we are rendering almost the same data on our page. @zetlen, it was just a question, i noticed this, and it seemed strange to me, that I was able to submit an order for guest user, but could not fetch order details using /orders/{orderId} endpoint.

[dmtrkad]

#401
Fixing of review comments will be finished Oct, 24
Estimation : 1SP

[Starotitorov]

@ericerway, @awilcoxa, @zetlen, @jimbo, @dmtrkad we are blocked by discussion related to grouping application by features and review of #401. I wrote an email with detailed comparison of approach that we are using now and grouping by feature, I explained all possible issues with an approach that we are using now. @zetlen, @jimbo it will be great to receive a feedback from you.

[dmtrkad]

@zetlen @jimbo , James, Jimmy, Could you please assist us on the questions Artsiom shared above?

[Starotitorov]

There is an issue with running CI jobs for #505. This issue blocks merging of the pull request. @zetlen, I need your help, I can run all test, lint, prettier, build scripts locally, but CI jobs fail.