Checkout Items Review Component

[revanth0212]

Description

Created the review of items in order component.

Related Issue

Closes PWA-406

Verification Steps

1. Add items to the cart.
2. Go to the checkout page.
3. Complete address and payment steps. You should see review of the items section before you place the order.

Screenshots / Screen Captures (if appropriate)

Desktop (Showing only 2):

Desktop (Showing All):

Mobile (Showing only 2):

Mobile (Showing All):

Checklist

None

[PWAStudioBot]

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Associated JIRA tickets: PWA-406.

Generated by 🚫 dangerJS against c9ea2e2

[soumya-ashok]

@revanth0212 - Listing the options how @jimbo suggested is fine. Let's keep that.
I am seeing a ton of space separating the second product from the horizontal rule below. In the mock I have 24px between them.

Additionally, if I go to the cart from the review step and return to checkout, the review order button shows up between the payment card and the items card. Maybe this is a caching issue as well? Not sure.

[tjwiebell]

@revanth0212 - This is very close to QA pass. Please see this comment about too much white space.

I am also still seeing SHOW ALL ITEMS regardless of my viewport size, which I believe is supposed to be mobile only. If that requirement didn't change, please investigate.

[jimbo]

I am also still seeing SHOW ALL ITEMS regardless of my viewport size, which I believe is supposed to be mobile only. If that requirement didn't change, please investigate.

Personally I'd be fine with it on desktop as well.

[soumya-ashok]

@tjwiebell and @jimbo - "Show all items" is intended for all viewports. The default state would be to display up to 2 items with the option to see more if they exist.

[tjwiebell]

@tjwiebell and @jimbo - "Show all items" is intended for all viewports. The default state would be to display up to 2 items with the option to see more if they exist.

@revanth0212 - I'm not sure where I pulled that requirement from then, sorry 😬Fix the white space problem and this is ready to merge.

[revanth0212]

@tjwiebell and @jimbo - "Show all items" is intended for all viewports. The default state would be to display up to 2 items with the option to see more if they exist.

@revanth0212 - I'm not sure where I pulled that requirement from then, sorry 😬Fix the white space problem and this is ready to merge.

Hey @tjwiebell it will be handled in a different PR. You can merge this for now.

[revanth0212]

The white space issue should be gone now. Also the animation can not be done for rectangle expansion. It can only be done for the visibility of the hidden items.

[soumya-ashok]

@revanth0212 and @jimbo UX approved