When you open an app modal after just opening the POS, the cart subscription is always a blank cart. The cart subscription seems to receive updates but the data is not reflected in the cart object.
Here’s some basic code to replicate:
import { useEffect } from 'react'
import {
Navigator,
Text,
Screen,
reactExtension,
useApi,
useCartSubscription,
} from '@shopify/ui-extensions-react/point-of-sale'
const Modal = () => {
const api = useApi();
const cart = useCartSubscription();
useEffect(() => {
api.cart.addCartProperties({
// random value
'test': Math.random().toString(36).substring(7)
})
}, [])
useEffect(() => {
console.log('Cart component updated:', cart);
}, [cart])
return (
<Navigator>
<Screen name="test" title="Test">
<Text>Modal</Text>
</Screen>
</Navigator>
)
}
export default reactExtension('pos.home.modal.render', () => <Modal />);
Steps to replicate
- Clear the cart (Seems important to start with an empty cart)
- Close the POS app
- Open the POS app
- Open the app modal
- Look at the logs, they will all be empty carts with no properties even though we’re adding one.
- Close the tile
- The added property will be present in the POS cart so the property got added even though it was not reflected in the cart subscription.
- Open the tile again, the cart logs are good now, the previously added property will appear in the logs and then the new property will also show up.
The logs when I first open the modal:
The logs when I reopen the modal afterward:
I think it’s also happening randomly afterward on clean carts, but closing and opening the app seems to be the only way I can constantly replicate the issue.
This is causing issues with our app as it needs to add line items with properties, but since adding to cart and adding properties are 2 separate APIs the way we do it is add the item then listen to cart updates (with a use effect on the cart subscription) and when the item is found we add the item properties, but since the cart is always empty on first load of the app it never finds the item and gets stuck in an infinite loading.