CheckoutUI: useCartLineTarget() hook doesn't update the line item on selling plan change

[StayOnWork]

Basically the title.

I update the checkout line item with applyCartLinesChange() function and expect the line item (returned by the useCartLineTarget() hook) to be updated. And it works fine when I update product variant (so called merchandiseId). But when I update sellingPlanId alone, the line item is not updated, and therefore the app is not re-rendered.

Example:

import {
  Banner,
  reactExtension,
  useCartLineTarget,
  useApplyCartLinesChange,
  Button,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.cart-line-item.render-after',
  () => <Extension />,
);

function Extension() {
  const lineItem = useCartLineTarget();
  const applyCartLinesChange = useApplyCartLinesChange();

  const handleSetSellingPlan = () => {
    applyCartLinesChange({
      type: 'updateCartLine',
      id: lineItem.id,
      sellingPlanId: 'gid://shopify/SellingPlan/SomeNumbersHere',
    });
  };

  return (
    <>
      <Banner>
        Selling plan id: {lineItem.merchandise.sellingPlan?.id ?? 'empty'}
      </Banner>
      <Button onPress={ handleSetSellingPlan }>Set Selling Plan</Button>
    </>
  );
}

In this app the banner shows current selling plan id of the line item. The button sets the selling plan, and it is set successfully on click (I literally see the price change), but the banner still shows empty selling plan.

This means useCartLineTarget() hook doesn’t work as expected (lineItem variable is not updated).

Is there a workaround? Thanks

[klenotiw]

Hello, just wondering did you add that product to a selling plans group? I followed this guide to add a product to a selling plan group, then I was able to use your code to add a selling plan to the product.

[StayOnWork]

Yes, the product is added to the selling plan. There is no problem with adding the selling plan to the product. The problem here - I expect

const lineItem = useCartLineTarget();

lineItem to be updated, so that it will have the selling plan. What’s happening in reality - lineItem.merchandise.sellingPlan was empty before the change, and it REMAINS empty after the change.
Again. The selling plan is set successfully (I see the price change), but the hook useCartLineTarget() does not reflect that.

[klenotiw]

Yeah so I copied your code into an extension and was able to add a selling plan, and see it update the id. Can you confirm that the product you are trying to add a selling plan to is apart of a selling plan group? If it is you should see it in the purchase options section on the product page.

Could I also ask what version you are using and what access scopes you are using?