hydrogen-react: Cart currency does not update after changing countryIsoCode of ShopifyProvider

[maximilianschmitt]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

@shopify/hydrogen-react@2023.7.2

What version of Remix are you using?

No response

Steps to Reproduce

I'm using hydrogen-react to manage a storefront that has multiple currencies setup. The app is wrapped like so:

<ShopifyProvider
  storeDomain={
    'https://' + process.env.SHOPIFY_STORE_ID + '.myshopify.com'
  }
  storefrontToken={process.env.SHOPIFY_STOREFRONT_API_TOKEN}
  storefrontApiVersion={process.env.SHOPIFY_STOREFRONT_API_VERSION}
  countryIsoCode={router.locale.toUpperCase()} // 👈 countryIsoCode is set dynamically when user selects a different currency
  languageIsoCode="EN"
>
  <CartProvider cartFragment={cartFragment}>
    // Rest of the app...
  </CartProvider cartFragment={cartFragment}>
</ShopifyProvider>

Starting with countryIsoCode="SE", I'm following these steps:

1. I add an item to the cart and cartCreate gets called to create a cart with country: SE

Request:

{
	"query": `
		mutation CartCreate(
			$input: CartInput!
			$numCartLines: Int = 250
			$country: CountryCode = ZZ
		) @inContext(country: $country) {
			cartCreate(input: $input) {
			cart {
				...CartFragment
			}
			}
		}

		
		fragment CartFragment on Cart {
			id
			checkoutUrl
			totalQuantity
			buyerIdentity {
			countryCode
			customer {
				id
				email
				firstName
				lastName
				displayName
			}
			email
			phone
			}
			lines(first: $numCartLines) {
			edges {
				node {
				id
				quantity
				attributes {
					key
					value
				}
				cost {
					totalAmount {
					amount
					currencyCode
					}
					subtotalAmount {
					amount
					currencyCode
					}
					compareAtAmountPerQuantity {
					amount
					currencyCode
					}
				}
				merchandise {
					... on ProductVariant {
					id
					availableForSale
					compareAtPrice {
						...MoneyFragment
					}
					price {
						...MoneyFragment
					}
					requiresShipping
					title
					image {
						...ImageFragment
					}
					product {
						handle
						title
						id
					}
					selectedOptions {
						name
						value
					}
					}
				}
				}
			}
			}
			cost {
			subtotalAmount {
				...MoneyFragment
			}
			totalAmount {
				...MoneyFragment
			}
			totalDutyAmount {
				...MoneyFragment
			}
			totalTaxAmount {
				...MoneyFragment
			}
			}
			note
			attributes {
			key
			value
			}
			discountCodes {
			code
			applicable
			}
		}

		fragment MoneyFragment on MoneyV2 {
			currencyCode
			amount
		}
		fragment ImageFragment on Image {
			id
			url
			altText
			width
			height
		}
	`,
	"variables": {
		"input": {
			"lines": [{ "merchandiseId": "gid://shopify/ProductVariant/42757387387068", "quantity": 1 }],
			"buyerIdentity": { "countryCode": "SE" }
		},
		"country": "SE"
	}
}

Response:

{
    "data": {
        "cartCreate": {
            "cart": {
                "id": "gid://shopify/Cart/c1-a3671628a918268f5bd2afb59f6fc29f",
                "checkoutUrl": "https://elvstroem.myshopify.com/cart/c/c1-a3671628a918268f5bd2afb59f6fc29f",
                "totalQuantity": 1,
                "buyerIdentity": {
                    "countryCode": "SE",
                    "customer": null,
                    "email": null,
                    "phone": null
                },
                "lines": {
                    "edges": [
                        {
                            "node": {
                                "id": "gid://shopify/CartLine/e6ad395e-0823-423d-9c1f-98db07e4ba4a?cart=c1-a3671628a918268f5bd2afb59f6fc29f",
                                "quantity": 1,
                                "attributes": [],
                                "cost": {
                                    "totalAmount": {
                                        "amount": "1175.0",
                                        "currencyCode": "SEK"
                                    },
                                    "subtotalAmount": {
                                        "amount": "1175.0",
                                        "currencyCode": "SEK"
                                    },
                                    "compareAtAmountPerQuantity": null
                                },
                                "merchandise": {
                                    "id": "gid://shopify/ProductVariant/42757387387068",
                                    "availableForSale": true,
                                    "compareAtPrice": null,
                                    "price": {
                                        "currencyCode": "SEK",
                                        "amount": "1175.0"
                                    },
                                    "requiresShipping": true,
                                    "title": "Navy / Large",
                                    "image": {
                                        "id": "gid://shopify/ProductImage/35671878107324",
                                        "url": "https://cdn.shopify.com/s/files/1/0626/4504/3388/files/COPENHAGEN67-12212301-NAVY_1.jpg?v=1693499120",
                                        "altText": null,
                                        "width": 2400,
                                        "height": 3000
                                    },
                                    "product": {
                                        "handle": "copenhagen-67",
                                        "title": "Copenhagen 67",
                                        "id": "gid://shopify/Product/7910661292220"
                                    },
                                    "selectedOptions": [
                                        {
                                            "name": "Color",
                                            "value": "Navy"
                                        },
                                        {
                                            "name": "Size",
                                            "value": "Large"
                                        }
                                    ]
                                }
                            }
                        }
                    ]
                },
                "cost": {
                    "subtotalAmount": {
                        "currencyCode": "SEK",
                        "amount": "1175.0"
                    },
                    "totalAmount": {
                        "currencyCode": "SEK",
                        "amount": "1175.0"
                    },
                    "totalDutyAmount": null,
                    "totalTaxAmount": null
                },
                "note": null,
                "attributes": [],
                "discountCodes": []
            }
        }
    },
    "extensions": {
        "context": {
            "country": "SE",
            "language": "EN"
        }
    }
}

I change countryIsoCode from "SE" to "DK", so cartBuyerIdentityUpdate gets called to update the cart with country: DK

Request:

{
	"query": `
		mutation CartBuyerIdentityUpdate(
			$cartId: ID!
			$buyerIdentity: CartBuyerIdentityInput!
			$numCartLines: Int = 250
			$country: CountryCode = ZZ
		) @inContext(country: $country) {
			cartBuyerIdentityUpdate(cartId: $cartId, buyerIdentity: $buyerIdentity) {
			cart {
				...CartFragment
			}
			}
		}

		
		fragment CartFragment on Cart {
			id
			checkoutUrl
			totalQuantity
			buyerIdentity {
			countryCode
			customer {
				id
				email
				firstName
				lastName
				displayName
			}
			email
			phone
			}
			lines(first: $numCartLines) {
			edges {
				node {
				id
				quantity
				attributes {
					key
					value
				}
				cost {
					totalAmount {
					amount
					currencyCode
					}
					subtotalAmount {
					amount
					currencyCode
					}
					compareAtAmountPerQuantity {
					amount
					currencyCode
					}
				}
				merchandise {
					... on ProductVariant {
					id
					availableForSale
					compareAtPrice {
						...MoneyFragment
					}
					price {
						...MoneyFragment
					}
					requiresShipping
					title
					image {
						...ImageFragment
					}
					product {
						handle
						title
						id
					}
					selectedOptions {
						name
						value
					}
					}
				}
				}
			}
			}
			cost {
			subtotalAmount {
				...MoneyFragment
			}
			totalAmount {
				...MoneyFragment
			}
			totalDutyAmount {
				...MoneyFragment
			}
			totalTaxAmount {
				...MoneyFragment
			}
			}
			note
			attributes {
			key
			value
			}
			discountCodes {
			code
			applicable
			}
		}

		fragment MoneyFragment on MoneyV2 {
			currencyCode
			amount
		}
		fragment ImageFragment on Image {
			id
			url
			altText
			width
			height
		}
	`,
	"variables": {
		"cartId": "gid://shopify/Cart/c1-a3671628a918268f5bd2afb59f6fc29f",
		"buyerIdentity": { "countryCode": "DK" },
		"country": "DK"
	}
}

Response:

{
    "data": {
        "cartBuyerIdentityUpdate": {
            "cart": {
                "id": "gid://shopify/Cart/c1-a3671628a918268f5bd2afb59f6fc29f",
                "checkoutUrl": "https://elvstroem.myshopify.com/cart/c/c1-a3671628a918268f5bd2afb59f6fc29f",
                "totalQuantity": 1,
                "buyerIdentity": {
                    "countryCode": "DK",
                    "customer": null,
                    "email": null,
                    "phone": null
                },
                "lines": {
                    "edges": [
                        {
                            "node": {
                                "id": "gid://shopify/CartLine/e6ad395e-0823-423d-9c1f-98db07e4ba4a?cart=c1-a3671628a918268f5bd2afb59f6fc29f",
                                "quantity": 1,
                                "attributes": [],
                                "cost": {
                                    "totalAmount": {
                                        "amount": "1141.0",
                                        "currencyCode": "SEK"
                                    },
                                    "subtotalAmount": {
                                        "amount": "1141.0",
                                        "currencyCode": "SEK"
                                    },
                                    "compareAtAmountPerQuantity": null
                                },
                                "merchandise": {
                                    "id": "gid://shopify/ProductVariant/42757387387068",
                                    "availableForSale": true,
                                    "compareAtPrice": null,
                                    "price": {
                                        "currencyCode": "DKK",
                                        "amount": "700.0"
                                    },
                                    "requiresShipping": true,
                                    "title": "Navy / Large",
                                    "image": {
                                        "id": "gid://shopify/ProductImage/35671878107324",
                                        "url": "https://cdn.shopify.com/s/files/1/0626/4504/3388/files/COPENHAGEN67-12212301-NAVY_1.jpg?v=1693499120",
                                        "altText": null,
                                        "width": 2400,
                                        "height": 3000
                                    },
                                    "product": {
                                        "handle": "copenhagen-67",
                                        "title": "Copenhagen 67",
                                        "id": "gid://shopify/Product/7910661292220"
                                    },
                                    "selectedOptions": [
                                        {
                                            "name": "Color",
                                            "value": "Navy"
                                        },
                                        {
                                            "name": "Size",
                                            "value": "Large"
                                        }
                                    ]
                                }
                            }
                        }
                    ]
                },
                "cost": {
                    "subtotalAmount": {
                        "currencyCode": "SEK",
                        "amount": "1141.0"
                    },
                    "totalAmount": {
                        "currencyCode": "SEK",
                        "amount": "1141.0"
                    },
                    "totalDutyAmount": null,
                    "totalTaxAmount": null
                },
                "note": "",
                "attributes": [],
                "discountCodes": []
            }
        }
    },
    "extensions": {
        "context": {
            "country": "DK",
            "language": "EN"
        }
    }
}

Expected Behavior

After calling cartBuyerIdentityUpdate with a new country, I would expect the cart to display all line items and totals/subtotals in the currency of the new country.

Actual Behavior

The cart displays all line items and totals/subtotals in the currency with which the cart was originally created.

[rylanharper]

I am seeing this issue as well.. I am not using Hydrogen, but its the same issue using the graphql API (using Nuxt3 with the Shopify Graphql API).. This is an internal API issue I am pretty sure.

The buyerIdentity of the cart seems to no longer update the countryCode or amount of any given line item. I'm also seeing this issue on a number of headless stores I reference using Hydrogen, Next, Nuxt, etc.

On top of what @maximilianschmitt mentioned, Hydrogen will break when you change the currency to a new country code and select any new variant of a product. The page reads We’ve lost this Not found and the console shows Failed to load resource: the server responded with a status of 404 ()

[contrebande-labs]

The bug can be reproduced on the demo store without any change:

1. Go here : https://hydrogen.shop/
2. Add anything to the cart
3. Change the locale to another country with a different currency
4. Go to the cart. The prices are displayed in the original currency and don't match the current locale.

Any multi-currency custom storefront is affected.

[dcodrin]

Can confirm, same thing happening with our store, this is having a huge impact on all multi-currency stores.

[wizardlyhel]

This was an storefront-api mutation issue - Should be solved now

[contrebande-labs]

I see that it now works for your demo. But it still doesn't work for us (haven't changed anything in the codebase). Please see here: https://contrebande.co

[wizardlyhel]

@contrebande-labs I've added an item to cart and switching between the available currencies and I am seeing the prices are changing to the expected currencies for the product list and cart items using the link you have provided

[contrebande-labs]

@wizardlyhel Thanks for your help. It still didn't work for me until I cleared my cookies. Is it possible that it could be the case? Old carts will still have the problem?

[dcodrin]

@wizardlyhel @contrebande-labs can confirm that the issue is still impacting sessions that were set during this window, so the only way to get those working is to clear the cart cookie, new sessions were indeed fixed though.

[imamMern]

@wizardlyhel @contrebande-labs Can You guys share any github code or process how this currency changing demo store was developed in hydrogen?
Specially I really like this one https://contrebande.co/ . Can you guys help me by sharing this"?