[PWA-240] [feature]: Cart Price Summary #2092

sirugh · 2020-01-09T22:26:38Z

Description

Adds a price summary to the cart page. Each of the more "complex" line items have been broken into separate components. To avoid having "magical" named queries being used in the parent I added a dependency called fraql that allows you to create unnamed queries. Look at priceSummary.js for usage example.

Related Issue

Closes PWA-240.

Acceptance

Verification Stakeholders

Specification

Verification Steps

For reference, use the tutorial for checkout w/ graphQL.

Empty cart

Go to the /cart page. The summary should not appear when there are no items.

With items

Add an item to your cart and obtain the cart id.
Using graphql playground/postman/etc, apply a coupon (you may need to create a coupon for your storefront)
Using graphql playground/postman/etc, set shipping address.
Using graphql playground/postman/etc, set shipping method (using "flatrate"/"flatrate" for carrier/method)
Refresh the /cart page. You should see an updated summary.

Scrolling view

The summary should scroll with the contents of the cart page.

Note

Coupons values are represented in an array with other possible values and no way to identify it as such. For now, I have represented this as a "Discount" line item.
Gift Cards can be enabled/disabled at build time if we're on EE or not, but that work needs to be done. In this PR they are disabled entirely with a local flag but we should address that soon. Deferred the work to PWA-78 for now.

Checklist

I have updated the documentation accordingly, if necessary.
I have added tests to cover my changes, if necessary.

Signed-off-by: Stephen Rugh <[email protected]>

PWAStudioBot · 2020-01-09T22:31:19Z

	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-240.

Generated by 🚫 dangerJS against 7b27b29

Signed-off-by: Stephen Rugh <[email protected]>

sirugh · 2020-01-10T20:19:54Z

packages/venia-ui/lib/components/CartPage/PriceSummary/giftCardSummary.js

+    ) : null;
+};
+
+// TODO: Gift cards are only enabled in EE, write a build time tool that turns the component into a no-op and the static fragments into __typename requests.


This is a big TODO. Before we merge this PR we have to have a way to determine which fragment to use, otherwise we risk breaking CE.

sirugh · 2020-01-10T20:30:26Z

packages/venia-ui/lib/components/CartPage/PriceSummary/discountSummary.js

+DiscountSummary.fragments = {
+    discounts: gql`
+        fragment _ on CartPrices {
+            discounts {


In 2.3.3 we have discount, which is a "deprecated but functional" field in 2.3.4
In 2.3.4 we have discounts, which 2.3.3 does not have.

If we want to support both versions we will need to provide some way (build or runtime?) to determine which field is valid for the current backend.

I am going to proceed with the assumption that we don't need to support 2.3.3, so discounts is valid.

I am going to proceed with the assumption that we don't need to support 2.3.3, so discounts is valid.

We do need to support 2.3.3.

Signed-off-by: Stephen Rugh <[email protected]>

sirugh · 2020-01-13T19:53:33Z

packages/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js

+        variables: {
+            cartId
+        },
+        fetchPolicy: 'no-cache'


We should verify that actions that modify the price summary values such as shipping method or adding a shipping address elsewhere also update the price summary even if no-cache is used here.

packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js

Signed-off-by: Stephen Rugh <[email protected]>

…mmary.js

Signed-off-by: Stephen Rugh <[email protected]>

…tudio into rugh/price-summary

Signed-off-by: Stephen Rugh <[email protected]>

jimbo

Looks good to me. I'd like to know what effect fraql has on the bundle before approving this; I'm fine with it from a fragment authoring perspective.

Also note that we do have to support 2.3.3.

jimbo · 2020-01-15T18:50:48Z

packages/venia-ui/lib/components/CartPage/PriceSummary/discountSummary.js

+DiscountSummary.fragments = {
+    discounts: gql`
+        fragment _ on CartPrices {
+            discounts {


I am going to proceed with the assumption that we don't need to support 2.3.3, so discounts is valid.

We do need to support 2.3.3.

sirugh · 2020-01-15T19:32:53Z

Looks good to me. I'd like to know what effect fraql has on the bundle before approving this; I'm fine with it from a fragment authoring perspective.

I have removed it and used named exports instead. This just leaves a little coupling magic in terms of fragment name and the name of the export but that's not a big deal, and is preferable over using a new dependency IMO.

Also note that we do have to support 2.3.3.

Rather than go back and forth on this, let's put that in documentation somewhere and make sure the entire team knows exactly what backend version we have to support when we are coding. I spoke with @tjwiebell and we both thought that this code wouldn't be released until our next release which would coincide with 2.3.5. And we both thought that we were supporting "current - 1", so 6.0.0 would have to support 2.3.5 and 2.3.4 whereas 5.0.0 which is releasing now will have to support 2.3.4 and 2.3.3

In regards to this specific PR, I can work around that by using the discount field which is deprecated in 2.3.4 but still exists. I just worry that we're going to run into complete removal of fields that we have to support since GQL doesn't really do semver "the right way".

jimbo · 2020-01-15T19:35:48Z

Yes, my mistake. This can be for 2.3.4, so we're good here. 👍

Signed-off-by: Stephen Rugh <[email protected]>

dpatil-magento · 2020-01-15T22:27:51Z

QA Pass, can be merged once re-approved.

sirugh added 2 commits January 9, 2020 14:41

feature: price summary

2ae4c08

Signed-off-by: Stephen Rugh <[email protected]>

feature: dynamically available gift cards

1ed3946

Signed-off-by: Stephen Rugh <[email protected]>

PWAStudioBot added pkg:peregrine pkg:venia-ui labels Jan 9, 2020

sirugh added the version: Minor This changeset includes functionality added in a backwards compatible manner. label Jan 10, 2020

sirugh force-pushed the rugh/price-summary branch 2 times, most recently from 3e71954 to f05a8c3 Compare January 10, 2020 15:56

sirugh added 2 commits January 10, 2020 10:22

dep: adds fraql to allow composition of unnamed fragments

bbcd286

Signed-off-by: Stephen Rugh <[email protected]>

discount summary component

ee504c5

Signed-off-by: Stephen Rugh <[email protected]>

sirugh force-pushed the rugh/price-summary branch 2 times, most recently from 5adb2cc to d6a0984 Compare January 10, 2020 18:16

sirugh added 2 commits January 10, 2020 12:19

Break summary into components

9c89db6

Signed-off-by: Stephen Rugh <[email protected]>

css update

1021135

Signed-off-by: Stephen Rugh <[email protected]>

sirugh force-pushed the rugh/price-summary branch from d6a0984 to 1021135 Compare January 10, 2020 18:19

sirugh added 2 commits January 10, 2020 14:11

Pull fragment data off response and pass to components

6a4e1eb

Signed-off-by: Stephen Rugh <[email protected]>

fix css

2b01c27

Signed-off-by: Stephen Rugh <[email protected]>

sirugh commented Jan 10, 2020

View reviewed changes

m2-community-project bot assigned sirugh Jan 10, 2020

m2-community-project bot added the Progress: review label Jan 10, 2020

sirugh marked this pull request as ready for review January 10, 2020 20:27

sirugh commented Jan 10, 2020

View reviewed changes

sirugh added 3 commits January 13, 2020 10:16

Use toggle for to no-op gift card component

01692a4

Signed-off-by: Stephen Rugh <[email protected]>

Pass specific classes to line item components

5e83196

Signed-off-by: Stephen Rugh <[email protected]>

Export static summary query for use by refetch

637f1dc

Signed-off-by: Stephen Rugh <[email protected]>

sirugh commented Jan 13, 2020

View reviewed changes

packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js Outdated Show resolved Hide resolved

revanth0212 changed the title ~~[feature]: Cart Price Summary~~ [PWA-240] [feature]: Cart Price Summary Jan 14, 2020

m2-community-project bot added Progress: changes requested and removed Progress: review labels Jan 14, 2020

sirugh and others added 2 commits January 14, 2020 13:14

Feedback. Also do not render tax until available.

29a3bd2

Signed-off-by: Stephen Rugh <[email protected]>

Update packages/venia-ui/lib/components/CartPage/PriceSummary/priceSu…

9da93c4

…mmary.js

revanth0212 previously approved these changes Jan 14, 2020

View reviewed changes

revanth0212 and others added 3 commits January 14, 2020 14:24

Merge branch 'develop' into rugh/price-summary

5abd7a3

add tests

e7d28a0

Signed-off-by: Stephen Rugh <[email protected]>

Merge branch 'rugh/price-summary' of https://github.com/magento/pwa-s…

af17370

…tudio into rugh/price-summary

sirugh dismissed revanth0212’s stale review via af17370 January 14, 2020 21:21

m2-community-project bot added Progress: review and removed Progress: changes requested labels Jan 14, 2020

dpatil-magento and others added 3 commits January 15, 2020 08:55

Merge branch 'develop' into rugh/price-summary

e84ed2d

fix import in test

2499226

Signed-off-by: Stephen Rugh <[email protected]>

Revert to graphql-tag and named exports

f7f0e2b

Signed-off-by: Stephen Rugh <[email protected]>

jimbo reviewed Jan 15, 2020

View reviewed changes

m2-community-project bot assigned jimbo Jan 15, 2020

oops

c1cd366

Signed-off-by: Stephen Rugh <[email protected]>

jimbo previously approved these changes Jan 15, 2020

View reviewed changes

Use lazy query to avoid fetching until/unless a cart exists

7b27b29

Signed-off-by: Stephen Rugh <[email protected]>

sirugh dismissed jimbo’s stale review via 7b27b29 January 15, 2020 21:50

jimbo approved these changes Jan 15, 2020

View reviewed changes

dpatil-magento merged commit a4a67ba into develop Jan 15, 2020

dpatil-magento deleted the rugh/price-summary branch January 15, 2020 22:29

m2-community-project bot removed the Progress: review label Jan 15, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[PWA-240] [feature]: Cart Price Summary #2092

[PWA-240] [feature]: Cart Price Summary #2092

sirugh commented Jan 9, 2020 •

edited

Loading

PWAStudioBot commented Jan 9, 2020 •

edited

Loading

sirugh Jan 10, 2020

sirugh Jan 10, 2020 •

edited

Loading

sirugh Jan 13, 2020

jimbo Jan 15, 2020

sirugh Jan 13, 2020

jimbo left a comment

jimbo Jan 15, 2020

sirugh commented Jan 15, 2020

jimbo commented Jan 15, 2020

dpatil-magento commented Jan 15, 2020

[PWA-240] [feature]: Cart Price Summary #2092

[PWA-240] [feature]: Cart Price Summary #2092

Conversation

sirugh commented Jan 9, 2020 • edited Loading

Description

Related Issue

Acceptance

Verification Stakeholders

Specification

Verification Steps

Empty cart

With items

Scrolling view

Note

Checklist

PWAStudioBot commented Jan 9, 2020 • edited Loading

sirugh Jan 10, 2020

Choose a reason for hiding this comment

sirugh Jan 10, 2020 • edited Loading

Choose a reason for hiding this comment

sirugh Jan 13, 2020

Choose a reason for hiding this comment

jimbo Jan 15, 2020

Choose a reason for hiding this comment

sirugh Jan 13, 2020

Choose a reason for hiding this comment

jimbo left a comment

Choose a reason for hiding this comment

jimbo Jan 15, 2020

Choose a reason for hiding this comment

sirugh commented Jan 15, 2020

jimbo commented Jan 15, 2020

dpatil-magento commented Jan 15, 2020

sirugh commented Jan 9, 2020 •

edited

Loading

PWAStudioBot commented Jan 9, 2020 •

edited

Loading

sirugh Jan 10, 2020 •

edited

Loading