Quantity bug on POS version 9.29

Extensions
1

Hello!

We have a major issue with quantities with our app on POS version 9.29. It appears to be related with item added by API and then using the clear button (items added by the interface seem fine). When clearing the cart it’s like it remembers the old quantity and then when re-adding the same item by API it adds back the old quantity + the new quantity. I was on 9.27 and couldn’t replicate the issue our client had, then updated the version and now getting the issue.

Minimal code to replicate (see this video):

<Tile
  title='test'
  subtitle='test'
  onPress={() => {
    console.log('Tapped');
    api.cart.addLineItem(42623416565820, 1);
  }}
  enabled
/>
2

Hi @Tommy_Gaudreau we’re looking into this now

1 Like
3

I’m unable to reproduce it on our end with that same code. If you kill POS and reopen it is the issue reproduce-able? I wonder if it needs to be open for some time to trigger some sort of memory leak

4

@JS_Goupil

Oops sorry turns out I still had more code that I thought I had disabled. This code should actually replicate the issue:

import React, { useEffect } from 'react'

import { Tile, reactExtension, useApi, useCartSubscription } from '@shopify/ui-extensions-react/point-of-sale'

const TileComponent = () => {
  const api = useApi()
  const cart = useCartSubscription()

  const cartUpdate = async () => {
    for (let i = 0; i < cart.lineItems.length; i++) {
      const lineItem = cart.lineItems[i];
      if (lineItem.variantId == 42623416565820) { // same item that was added in the tile
        await api.cart.removeLineItem(lineItem.uuid);
        await api.cart.addLineItem(42623416500284, 1); // switch the item with another item. This new item gets the wrong quantity when clearing the cart and redoing the tile action.
      }
    }
  }

  useEffect(() => {
    cartUpdate();
  }, [cart])

  return (
    <Tile
      title='test'
      subtitle='test'
      onPress={() => {
        console.log('Tapped');
        api.cart.addLineItem(42623416565820, 1);
      }}
      enabled
    />
  )
}

export default reactExtension('pos.home.tile.render', () => {
  return <TileComponent />
})
5

So I spent the day debugging this issue with a bit of help from @JS_Goupil. It turns out there’s actually a bug currently on the POS and Shopify is looking into it.

The problem is that the cart subscription is called multiple times with the same state. From my tests this seems to be caused by clearing the cart, each time you clear the cart it causes it causes 1 more invocation of the cart subscription per cart update. So if you repeat the process of clearing the cart 10 times, the cart subscription will be triggered 10 times per update with the same cart.

This is my temporary solution with a bit of pseudo code:

import React, { useEffect } from 'react'

import { Tile, reactExtension, useApi, useCartSubscription } from '@shopify/ui-extensions-react/point-of-sale'

// Important to use global variables. If you use state, the component will re-render before the state is updated.
let refreshTimeout: NodeJS.Timeout | undefined;
let timeoutDelay = 0;

const TileComponent = () => {
  const api = useApi()
  const cart = useCartSubscription()

  const cartUpdate = () => {
    if (needToTriggerUpdate) {
      timeoutDelay = 1000;

      api.cart.removeLineItem(1);
      api.cart.addLineItem(1, 1);
    }
    else if (allClear) {
      timeoutDelay = 0;
    }
  }

  useEffect(() => {
    /**
     * The setTimeout logic is used to prevent the cartUpdate function from being called multiple times in a short period of time.
     * Strangely the POS randomly triggers the cart subscription multiple times with the same cart object after clearing the cart.
     * (For each clear cart, it triggers the subscription 1 more time per cart update)
     *
     * The timeout starts at 0 so that it updates the cart immediately when necessary.
     * If we find a case to update the cart, we set the timeout to 1000ms to prevent the function from being called multiple times in a row.
     * Then when we finally detect that all is clear, we set the timeout back to 0.
     */
    if (refreshTimeout) {
      clearTimeout(refreshTimeout)
    }

    const timeout = setTimeout(() => {
      // log time with seconds
      cartUpdate();
    }, timeoutDelay)


    refreshTimeout = timeout
  }, [cart])

  return (
    <Tile
      title='test'
      subtitle='test'
      enabled
    />
  )
}

export default reactExtension('pos.home.tile.render', () => {
  return <TileComponent />
})

Basically using a setTimeout, I try to ignore consecutive cart updates right after my own cart update.

6

@Tommy_Gaudreau 9.29.3 was released about an hour ago, should have a fix. Can you test it out? Let your merchants know as well please

7

That seems better for us. Thank you!

8

Although, now Android is on 9.29.2 we are now seeing the bug there. Do you know when 9.29.3 will ship on Android? Thank you

9

Everything seems good so far on the update!

10

Hi @JS_Goupil,

Since version 9.29.3 we are unable to get the most updated cart via useCartSubscription in the modal. (tile is fine anyway).
A change in qty / customer does not reflect in the modal.
Already submitted a ticket with video showing successul case in old version and failed case in new version via live chat support.

11

Hey, we have a fix incoming on 9.29.4. Turns out this was a separate bug from the one we fixed in 9.29.3

12

Hi there,

I am a developer that uses useCartSubscription to listen for cart changes. I put this in my Modal component, which is loaded from the Tile of course. Am I correct in understanding that there is an issue with useCartSubscription not properly reflecting cart changes? Such as a change in the customer? I have reports of some merchants for our app having an issue where the same customer is loaded over and over. But sometimes there is no issue and sometimes there is. Some merchants do not experience this at all.

13

@Etra hi there, yes the issue was that if you close the modal and reopen it, the cart subscription no longer works. We just pushed a new release, POS 9.29.4 which is out for iOS but not android yet (Google has been really slow approving hotfixes).

14

Thank you so much. I was losing my mind haha. I hope this is resolved going forward. It is good on my end but can’t speak for the devices of our merchants. I have informed them to update and hope to have updates to confirm all is good (as mentioned sometimes it can work and then stop). @JS_Goupil

Relevant thread here:

15

I’ve been going friggin nuts trying to figure out why my app that adds a CC fee via addCustomSale is not working correctly anymore. Nothing has changed on my end, but this past week it started adding a multitude at a time. This has worked flawlessly until now. On emptying the cart it will add it upwards to a dozen times. I stripped down my app to nothing but a logging message and found that emptying the cart sends anywhere between 2-12 of the same request at a time. I’m thinking this is the same issue OP has described. I’m on an android device, but the client I’m developing this for is on iOS. Is the suggestion here that they just need to update their POS app and it should be fixed??

16

I just took a look and the android pos app is still on version 2.29.2 which was the version I had issues with. Also on my iOS device the update was not automatic so maybe it’s the same for them and updating would help resolve their issue.

1 Like
17

Thanks! I asked them to make sure they’re updated to the latest, we’ll know tomorrow if that fixes things or not.

18

The recent iOS update fixed the issue for me as well. Not before 3 days of tearing my own code apart though. :frowning:

19

@JS_Goupil any news on when we can expect the Android update? I’m also still seeing 9.29.2 as the latest version available in Play Store from March 10. Thanks.