[Bug]: Cart Sidebar - cannot remove product or add more items

[AdamPawlinski]

Expected Behavior

Products on Cart Sidebar element should behave as expected:

• can be removed from Cart
• can add more items
• 'save for later' button can be removed from this view I suppose (to be discussed)

Actual Behavior

Possible Solution

No response

Steps to reproduce

No response

What version of vendure integration are you using?

1.0.0.

What version of Node.js are you using?

16.13.2

What browser (and version) are you using?

Chrome Version 98.0.4758.80 (Official Build) (64-bit)

What operating system (and version) are you using?

Ubuntu

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Baroshem]

Hey, could you please check what is going on in the network/console tab of the browser? Also could you take a look at Vendure server to investigate whether the changes to the cart are actually happening on Vendure?

[jacobfrantz1]

I ran into this issue as well. This integration transforms the bearer token that vendure sets for the guest user when they create an order into a cookie. The cookie has the "Secure" option so chrome won't set the cookie if you are not using https. Having the cookie set is required for any edits to the active order.

[Baroshem]

Hey @jacobfrantz1,

Sorry for late reply, this message completely disapeard from my notifications. It's really strange because I have been using this integration on MacOS since August last year and was able to do guest checkout and user checkout freely. Could you provide more details about your environment? I would really like to help with that but not able to reproduce it

[jacobfrantz1]

@Baroshem Vendure uses a session token for guest orders. My browser is what rejected the session cookie because it was marked as secure. This is no longer an issue for me as I am now serving my storefront with https in my test environment.
https://github.com/vuestorefront-community/vendure/blob/develop/packages/api-client/src/helpers/cookie.ts
This code marks the cookie as secure.

[Baroshem]

I see however, I am also using Chrome for development and serving the dev server locally on http, not https and it is working for some reason 🤔

[AdamPawlinski]

@jacobfrantz1 Thanks for solving it, when I changed the cookie to secure:false it works. But it is strange that it works properly for @Baroshem without any change. Maybe there is some other difference in your configuration?

[Baroshem]

Maybe it has to do with the operating system. But I have seen @michaelbromley creating a demo store while working on Windows. Really really strange. Maybe as a workaround, we could add a condition here so that value of secure will be set to false in dev environment and true in prod?

Something like:

...
secure: process.env.production ? true : false

[michaelbromley]

That's right, I use Windows 10 for all my development. Perhaps the issue has to do with the domain. Secure cookeis will only be set over HTTPS except when the domain is localhost - in some browsers. See here for more details: https://web.dev/when-to-use-local-https/#use-http:localhost-by-default

[jacobfrantz1]

That's likely the case. I was using a development server that was not on my local machine.

[macrozone]

in my case if i increase the amount on an item in the cart, the item just vanishes.

The api returns: "GraphQL error: Die Bestellung beeinhaltet keine OrderLine mit der ID 40"

it means in english something like "The order does not contain OrderLine with ID 40"

Edit: I see that after deleting cookies, it won't create a new cookie for anonymous users, even after reloading the page.

[Baroshem]

@macrozone

Could you provide some reproduction repository?

[macrozone]

@macrozone

Could you provide some reproduction repository?

nevermind, was a cookie error.

the cart is still very buggy though. E.g. after a checkout, the cart is still there, but you cant add any items, it throws an error

{"data":{"addItemToOrder":{"errorCode":"ORDER_MODIFICATION_ERROR","message":"Der Inhalt der Bestellung kann nur im Status \"AddingItems\" geändert werden","__typename":"OrderModificationError"}}}

[Baroshem]

@macrozone

Could you provide more details (ideally a reproduction repo)? I could try to reproduce it on my side. These issues are really strange because cart operations were there for about few months now, so these issues appear out of nowhere.

[macrozone]

the problems are because you can't add products on carts that are in certain states, which seems to be a vendure problem.
I assume the problem is with the stripe integration which sometimes does not update the state of the cart properly.

Also if you leave the checkout process at some point, you might end up with a broken cart that is stuck in a certain state. For the user its impossible to recover from this. But i have to investigate why this happens.

So bottom line is that i don't think its vue-storefront problem at all. The only problem is see on that side is that many errors are just swallowed and not reacted on. You only see the errors if you look at the network traffic.

I think the storefront-vendure integration could be more verbose on errors and exceptions and/or try to recover more gracefully from certain situations

[michaelbromley]

Once an Order is completed (by default this occurs when it transitions to the PaymentAuthorized or PaymentSettled states), it get set to active: false and should no longer be accessible via the activeOrder query in the Shop API.

So yes, it sounds like maybe an error is occurring at the payment stage. If you are able to isolate the steps which reproduce it, please open an issue on the Vendure repo.

Regarding error handling in VSF, pretty much all mutations in Vendure will return a union result containing either the expected object or an ErrorResult type.

The recommended way to handle this in the storefront is to select and check the __typename field when the response from the mutation is returned. If the __typename is not the expected type, e.g. 'Order' then we can assume an error ocurred and display some generic toast notification with the errorMessage.