[feature]: Purchase History for Venia (PWA)

[ericerway]

This issue is for the following packages:

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

Description

(link from Invision to Purchase History; related to account/auth work)

As a shopper, I want to find previous purchases (by item) on Venia by order# so that I can make a repeat purchase or request help from Customer Service.

Assumptions

• Requires authentication (e.g. Roni Cost) to access this data
• Grouping for Last 30 Days and Earlier (all-time) are desirable but stretch goals
• Order Details will be handled separately; this is just the listing for Purchase History
• Filtering will be considered in the future (backlog)
• Utilize REST API as GraphQL is in development (for orders)

Tasks

• Discovery to retrieve orders data from REST or GraphQL (and auth)
• Identify future considerations (tasks) for filtering, pagination and other experiences
• Implement basic Purchase History (last orders; items)
• Testing and documentation (as appropriate)

[dmtrkad]

• Discovery to retrieve orders data from REST or GraphQL (and auth)
  (1 SP)
• Implement Page component
• Implement filter component (Static only)
  (1 SP)
• Implement Purchase history list component
  (2SP)
• Fetch Purchase History (last orders; items)
  1. Endpoints exists and returns data
  (2 SP)
• Authorization flow R&D
  (1 SP)
• Adding of Unit tests
  (3 SP)
• Adding of Test scenarious
  1. Approach, access to hip tool should be granted
  2. General test strategy should be defined
• Updating of js/tech/test documentation
  1 Development docs
  (3 SP)
  2 Testing docs
  1. Test Approach, access to hip tool should be granted
  2. General test strategy should be defined

Acceptance criterea

1. As an authorized user, I open "Purchase history: listed..."-page
2. Filter component's shown on the "Purchase history: listed..."-page
3. Then, user see the list of product items
4. Each product item includes image, product title, date and arrow

Demo scenario

1. Open "Purchase history: listed..."-page
   2 "Purchase history: listed..."-page is shown the list of product items
   3 Filter component's shown in a static mode

Q&A

1. What kind of approach we generally use to build/define page URLs?

[ericerway]

• Mockups available on Invision via @soumya-ashok here: https://magento.invisionapp.com/share/WQN5F7BYBPG#/screens/324119962
• @zetlen can you help on the Venia concept vs. Peregrine?

[zetlen]

@dmtrkad Initially, we do all our development in Venia. When we feel personally we have created a component or utility that is useful outside Venia, we can PR it to peregrine.

[Starotitorov]

Frontend tasks:

• Implement page component.
• Implement filter component.
• Implement purchase history list component.
• Implement fetching of purchase history om mocks.
• Implement fetching of purchase history (last orders; items).
• Add unit tests.
• Add docs.
• Register separate route for the page.

[vitalics]

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

[dmtrkad]

Action plan: Need to localize an issue and update jest config.
Estimation: 1SP

• Implement fetching of purchase history (last orders; items).
  @ericerway, Do we need to implement purchase history page for authorized users only? Right now Magento allows us to fetch orders information only for authorized users.
• Register separate route for the page.
  Estimation: 1SP

[AlexeyKaryka]

@ericerway @zetlen purchase history page shows items from completed orders and different orders may contain same items, so should we keep duplicated items from different orders on the purchase history page?

[ericerway]

@dmtrkad this is only for authenticated users; order details is for both authenticated and guest users. Let's create a small user story for the remaining 1SP work here.

@AlexeyKaryka yes let's keep duplicated items; this should be an uncommon use case. Thanks!

[Starotitorov]

@ericerway, right now Magento does not allow us to retrive information about order for guest users.

[ericerway]

Double checked and the endpoint is definitely there for order details but may be for admin only and will not work for cookie auth. Let's handle offline but please double check the new REST API documentation here: https://devdocs.magento.com/redoc/2.3/index.html

[Starotitorov]

@ericerway, we use header Authorization to attach token to request, we do not use cookies at all, we store this token in localStorage. It is possible to retreive order information only for authorized users. We do not have some kind of authorization token for guest users.

[Starotitorov]

@zetlen, I faced with an issue, I did not find an endpoint to fetch all items from all orders for customer or at least endpoint to fetch all orders for customer using auth token https://devdocs.magento.com/redoc/2.3/ https://devdocs.magento.com/guides/v2.3/rest/list.html . Do we have an appropriate endpoint in Magento to fetch data required for the story? I see that we have an endpoint /V1/orders, but it is for admins.

[Starotitorov]

@ericerway, @awilcoxa, @zetlen, @jimbo, @dmtrkad We are blocked by issue related to running units tests and importing List from peregrine, there is a pull request #417. Also, there is an open question related to rest API endpoint that can be used to fetch information about items from all orders that were submitted by authorized customer #294 (comment). We have implemented Redux related logic and now there is an open question related to API endpoint to fetch data.

[soumya-ashok]

@ddzhura
Based on the mockup sent via email, here are my notes -
The font on the screen does not match the mockup. 'Muli' is the one we are using. It is a free Google font.
The filter icon needs to be reduced in size, and vertically aligned in the field
How would the filtering interaction work? Do they enter a filter and select "done" on the keypad screen overlay, and the page reloads with results or
Do the results filter automatically when they complete the filter term in the field? @jimbo could you assist here please?

[Starotitorov]

@soumya-ashok, thank you for the feedback! According to requirements filtering is out of the scope of the story and will be implemented in the future. Right now filter field is just a static component.

[Starotitorov]

@soumya-ashok, @ddzhura, @jimbo

I will align filter icon vertically and reduce the size, thank you for the comment.

• We specified 'Muli' font, but here a fallback font is used, because we do not load 'Muli' font in our application.
• Our icon library https://feathericons.com/ does not contain filter icon from mockup, so we added a similar icon. Do we need to change this?

[soumya-ashok]

@Starotitorov - The mockups use material icons, but @jimbo and I decided to go with Feather icons because they are open source and suit the design a little better. The feather filter icon is fine the way you have it right now unless there is a "filled" option available in the same library.

[Starotitorov]

@soumya-ashok, there is no problem to change a color of the icon, yeah, i will do it.

[ericerway]

Moving to Sprint 30 for review while fetch endpoints are explored.

[awilcoxa]

@jimbo is purchase history merged/released? Anything left to do for this issue?

[awilcoxa]

Components exist but is not available in UI, moving back to backlog to determine next steps/stories.

[awilcoxa]

https://jira.corp.magento.com/browse/PWA-276

[sivakumarkoduru]

@ddzhura
Based on the mockup sent via email, here are my notes -
The font on the screen does not match the mockup. 'Muli' is the one we are using. It is a free Google font.
The filter icon needs to be reduced in size, and vertically aligned in the field
How would the filtering interaction work? Do they enter a filter and select "done" on the keypad screen overlay, and the page reloads with results or
Do the results filter automatically when they complete the filter term in the field? @jimbo could you assist here please?

Its better to add item status in the grid ,for example delivered on 12th May 2019 , cancelled,returned etc,

[sirugh]

This is outdated. We have internal work to address the order history page now, starting with #2611