Use graphql to add item to cart #1987

sirugh · 2019-11-19T16:43:36Z

Description

Updates addItemToCart to pass mutations for adding different product types to the cart.
Updates updateItemInCart to pass the necessary mutations for add item since addItem action was used as a fallback case.
Updates retry logic for graphQL response in the addItem error catch.

Related Issue

Closes PWA-139.

Acceptance

Verification Stakeholders

Specification

Verification Steps

Add a simple product to cart (no options ie jewelry). The cart should display properly with the item.
Add a configurable product to cart (a dress or something). The cart should display properly with the item.
Log in and add an item to the cart. It should display properly.
Log out and add an item to the cart. It should display properly.
Edit an item in the cart. It should update properly.
Remove an item from the cart. It should be removed properly.

Screenshots / Screen Captures (if appropriate)

Checklist

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

PWAStudioBot · 2019-11-19T16:47:42Z

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

Generated by 🚫 dangerJS against b9dfa79

packages/peregrine/lib/store/actions/cart/asyncActions.js

sirugh · 2019-12-04T18:26:08Z

packages/peregrine/lib/talons/MiniCart/useMiniCart.js

@@ -49,22 +43,6 @@ export const useMiniCart = props => {
        setIsEditingItem(false);
    }, []);

-    const handleUpdateItemInCart = useCallback(


I moved this to cartOptions where it was more appropriate.

Ah, found it! I assume this is the remnant of a re-factor, but I would consider removing the try/catch if its not reachable (in the other file).

sirugh · 2019-12-04T18:56:50Z

packages/peregrine/lib/store/actions/cart/asyncActions.js

@@ -134,6 +145,16 @@ export const addItemToCart = (payload = {}) => {
    };
 };

+// Returns true if the cart is invalid.
+function hasRetryableGqlError(error) {


This function feels nasty. I don't like matching some string value from the API. Would rather we be able to use some error id map. GQL always returns 200 so we no longer get 404 for invalid carts. I guess it depends how resilient category is in the graphql error response.

Turns out that category: "graphql-no-such-entity" is used if anything within the response is not found. To ensure we only retry on an invalid cart, and not on an invalid/oos item, we should use the message string.

packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

…-graphql

dpatil-magento · 2019-12-09T17:50:25Z

@sirugh @tjwiebell Add item to cart and place order >> now close checkout panel by clicking close icon or by clicking in greyed out area and try adding same product again. Product is not getting added to cart.
Note - Once we open cart manually after that it starts working.
Works fine on develop branch.

tjwiebell · 2019-12-09T21:30:17Z

@sirugh - Looks like the cartId check was removed, so its now possible to enter with a null cartId after checkout. We assumed this would fall into the retry logic with error message pattern matching, but its throwing a different message because of type validation, null !== String!. Would like to push this through, some let me know if you'd like me to just a push a solution and get this approved w/o ya.

Possible solutions:

Pattern match this new message in isInvalidCart
Re-add init cart if cartId not present before add

Message
Error: GraphQL error: Variable "$cartId" got invalid value null; Expected non-nullable type String! not to be null.

sirugh · 2019-12-09T22:13:16Z

packages/peregrine/lib/store/actions/cart/asyncActions.js

-                method: 'POST',
-                body: JSON.stringify({ cartItem })
+            const { cart } = getState();
+            const { cartId } = cart;


So this can be null after an order is placed, and a subsequent add calls this with a null cartId.

@tjwiebell suggested two options, but I think it may be better to figure out why the cart is deleted but never re-created after order. It should definitely be created every time the cartId is deleted.

sirugh · 2019-12-09T22:35:35Z

@dpatil-magento I believe I "fixed" the issue :) Tried it myself and I'm able to add immediately after checkout.

dpatil-magento · 2019-12-10T15:45:36Z

@sirugh Recent commit has broken checkout flow. After placing an order as guest/registered user, error is being displayed.

dpatil-magento · 2019-12-10T16:05:10Z

@sirugh Dont see error anymore but after placing order for fraction of second checkout form displayed again (Slow 3G screen captured below). Also "Create an Account" button is not functional anymore and original bug has reappeared (after placing order unable to add product to cart).

sirugh · 2019-12-10T16:34:06Z

The checkout form being visible for a fraction of a second is because we await the completion of checkout before we show the receipt. Something must be modifying the editing state in between submission though -- I can look into it.

^ Turns out this is just visible because we now await a create cart call, which takes a little longer, before we show the next step. We probably don't need to await that call though, I can remove the await.

As for the createAccount button not working on receipt, I can also fix.

dpatil-magento · 2019-12-10T21:34:08Z

@sirugh Looks good now. Can be merged once review is approved.

PWAStudioBot added pkg:peregrine pkg:venia-ui labels Nov 19, 2019

sirugh commented Nov 19, 2019

View reviewed changes

packages/peregrine/lib/store/actions/cart/asyncActions.js Outdated Show resolved Hide resolved

m2-community-project bot assigned sirugh Nov 19, 2019

m2-community-project bot added the Progress: review label Nov 19, 2019

sirugh force-pushed the rugh/addItemToCart-graphql branch 3 times, most recently from 8efd829 to cdb77c3 Compare November 20, 2019 00:02

sirugh changed the title ~~Rugh/add item to cart graphql~~ Use graphql to add item to cart Nov 20, 2019

sirugh mentioned this pull request Nov 20, 2019

Uses graphQl mutation to create/fetch cartId. #1988

Merged

sirugh changed the base branch from develop to rugh/createCart-graphql November 20, 2019 18:14

sirugh force-pushed the rugh/addItemToCart-graphql branch 2 times, most recently from 43bbd1f to d732f21 Compare November 20, 2019 18:21

sirugh commented Nov 20, 2019

View reviewed changes

packages/peregrine/lib/store/actions/cart/asyncActions.js Outdated Show resolved Hide resolved

sirugh force-pushed the rugh/createCart-graphql branch from cb459c3 to ca9023c Compare November 22, 2019 15:59

sirugh force-pushed the rugh/addItemToCart-graphql branch from d732f21 to d82ea6f Compare November 26, 2019 21:11

sirugh marked this pull request as ready for review November 27, 2019 16:26

sirugh force-pushed the rugh/addItemToCart-graphql branch 2 times, most recently from 64183b4 to 4c15cd3 Compare December 3, 2019 22:10

sirugh commented Dec 3, 2019

View reviewed changes

packages/peregrine/lib/store/actions/cart/asyncActions.js Show resolved Hide resolved

sirugh commented Dec 4, 2019

View reviewed changes

packages/peregrine/lib/store/actions/cart/asyncActions.js Outdated Show resolved Hide resolved

sirugh force-pushed the rugh/addItemToCart-graphql branch from 8471293 to 8dbfa6c Compare December 4, 2019 17:57

sirugh commented Dec 4, 2019

View reviewed changes

sirugh changed the base branch from rugh/createCart-graphql to develop December 4, 2019 20:02

sirugh changed the base branch from develop to rugh/createCart-graphql December 4, 2019 20:02

sirugh force-pushed the rugh/addItemToCart-graphql branch from 328985f to d1a67da Compare December 4, 2019 20:03

m2-community-project bot added the Progress: changes requested label Dec 6, 2019

sirugh added 2 commits December 9, 2019 09:01

Feedback: Pass single mutation to action and remove unreachable trycatch

d6ba413

Fix tests

ae03f3e

tjwiebell suggested changes Dec 9, 2019

View reviewed changes

packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js Outdated Show resolved Hide resolved

packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js Outdated Show resolved Hide resolved

sirugh added 3 commits December 9, 2019 10:37

Disable addToCart if unsupported product type.

ae39eaf

Merge remote-tracking branch 'origin/develop' into rugh/addItemToCart…

a9c4bd3

…-graphql

Oops

a4402a4

tjwiebell previously approved these changes Dec 9, 2019

View reviewed changes

sirugh commented Dec 9, 2019

View reviewed changes

Add noCartId retry logic back to addItem

2b3ab66

sirugh dismissed tjwiebell’s stale review via 2b3ab66 December 9, 2019 22:34

Immediately create a new cart after removing the old one.

8cf5fa1

Oops

01b4839

sirugh and others added 5 commits December 10, 2019 11:32

Handle order completion, cart creation, and receipt state correctly

ebc9494

Fix tests

f1d142e

Use addItemMutation for update

d241d7c

Merge branch 'develop' into rugh/addItemToCart-graphql

921fa17

remove unused imports

b9dfa79

tjwiebell approved these changes Dec 10, 2019

View reviewed changes

dpatil-magento merged commit 8e675f4 into develop Dec 11, 2019

m2-community-project bot removed the Progress: changes requested label Dec 11, 2019

sirugh deleted the rugh/addItemToCart-graphql branch March 4, 2020 18:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use graphql to add item to cart #1987

Use graphql to add item to cart #1987

sirugh commented Nov 19, 2019 •

edited

Loading

PWAStudioBot commented Nov 19, 2019 •

edited

Loading

sirugh Dec 4, 2019

tjwiebell Dec 6, 2019

sirugh Dec 4, 2019 •

edited

Loading

sirugh Dec 5, 2019

dpatil-magento commented Dec 9, 2019 •

edited

Loading

tjwiebell commented Dec 9, 2019

sirugh Dec 9, 2019

sirugh commented Dec 9, 2019

dpatil-magento commented Dec 10, 2019

dpatil-magento commented Dec 10, 2019

sirugh commented Dec 10, 2019 •

edited

Loading

dpatil-magento commented Dec 10, 2019

Use graphql to add item to cart #1987

Use graphql to add item to cart #1987

Conversation

sirugh commented Nov 19, 2019 • edited Loading

Description

Related Issue

Acceptance

Verification Stakeholders

Specification

Verification Steps

Screenshots / Screen Captures (if appropriate)

Checklist

PWAStudioBot commented Nov 19, 2019 • edited Loading

sirugh Dec 4, 2019

Choose a reason for hiding this comment

tjwiebell Dec 6, 2019

Choose a reason for hiding this comment

sirugh Dec 4, 2019 • edited Loading

Choose a reason for hiding this comment

sirugh Dec 5, 2019

Choose a reason for hiding this comment

dpatil-magento commented Dec 9, 2019 • edited Loading

tjwiebell commented Dec 9, 2019

sirugh Dec 9, 2019

Choose a reason for hiding this comment

sirugh commented Dec 9, 2019

dpatil-magento commented Dec 10, 2019

dpatil-magento commented Dec 10, 2019

sirugh commented Dec 10, 2019 • edited Loading

dpatil-magento commented Dec 10, 2019

sirugh commented Nov 19, 2019 •

edited

Loading

PWAStudioBot commented Nov 19, 2019 •

edited

Loading

sirugh Dec 4, 2019 •

edited

Loading

dpatil-magento commented Dec 9, 2019 •

edited

Loading

sirugh commented Dec 10, 2019 •

edited

Loading