[Checkout UI] useApplyCartLinesChange hook triggers contact and shipping address form validlation

[simsben]

Please list the package(s) involved in the issue, and include the version you are using

 "@shopify/ui-extensions": "2024.4.1",
 "@shopify/ui-extensions-react": "2024.4.1",

Describe the bug

When a cart line item is added or removed from the cart at checkout, the Contact and Shipping address form validation executes and the user is presented with validation errors on Email and Zip / postal code, e.g. "Enter a valid email or a mobile phone number". This looks to be specific to the useApplyCartLinesChange hook. This also appears to be a more recent issue in the past day or two as we did not see this behavior with our app extensions until today.

Steps to reproduce the behavior:

1. Add items to cart
2. Navigate to checkout
3. Using a checkout extension, add an item to the cart

Expected behavior

The item should get added to the cart, and no form validation errors should be presented to the user.

Screenshots

Additional context

Some simple code that recreated this error:

import React from 'react'
import {
  InlineAlignment,
  MaybeResponsiveConditionalStyle,
  reactExtension,
  useApplyCartLinesChange,
  useSettings,
  View,
  Button,
} from '@shopify/ui-extensions-react/checkout'

export default reactExtension('purchase.checkout.block.render', () => <App />)

const App = (): React.ReactElement => {
  const applyCartLinesChange = useApplyCartLinesChange()
  const { alignment } = useSettings()

  let alignmentValue: MaybeResponsiveConditionalStyle<InlineAlignment> = 'start'
  if (alignment === 'right') {
    alignmentValue = 'end'
  } else if (alignment === 'center') {
    alignmentValue = 'center'
  }

  return (
    <View padding='base' inlineAlignment={alignmentValue}>
      <Button
        onPress={() => {
          applyCartLinesChange({
            type: 'addCartLine',
            merchandiseId: 'gid://shopify/ProductVariant/44370002804984', // replace with your product variant
            quantity: 1,
          })
            .then(() => {
              console.log('we added to cart')
            })
            .catch((error) => {
              console.error('there was an error', error)
            })
        }}>
        Add to cart
      </Button>
    </View>
  )
}

[simsben]

@theindra Can you clarify what SEV-2 means on your end? Just wondering if this is something that someone is going to look at sooner rather than later?

[jun-shop]

👋 Thanks for reporting and supplying with example code! We'll triage this and take a look.

[luoxiu]

Hi @theindra @jun-shop ,

Any update on this?
We're experiencing the exact same issue, and our customers are complaining.
Hope it can be resolved soon.

[simsben]

@jun-shop Yes, can you provide an update? I was told by one of our Shopify contacts that this was "as designed" but this is something that changed recently. And customers/merchants are complaining about this as well. I understand the need to run the validation, but if the customer hasn't actually input anything or clicked through the checkout flow at all, this validation should not be happening, in my opinion.

[simsben]

@jun-shop @theindra Can you provide an update on this ticket? This has a negative customer experience at checkout for any merchant that uses a Checkout Extension that modifies the cart. I was told by our Shopify contact that this was "as designed" but this hasn't always been the case. We have specific merchants that have complained about this and do not want to use checkout extensions until this is resolved. Can you increase the priority of this issue or give us an ETA on when this could be resolved?

[theindra]

Hi @simsben ,
The issue has been triaged and the team will look at this soon. @jun-shop can share more details as soon as she is back next week.

[CodeMan82]

Is there any update to this issue? We are currently writing a checkout ui extension that allows the customer to click a button to donate a specific amount. Everything is working as expected, except calling the "useApplyCartLinesChange" function causes a partial form submit and triggers the validation on Contact and Postcode.

[jun-shop]

The team is actively investigating and working on a fix. Thank you for your patience and apologies for the delay

[francispelland]

@jun-shop do you have an ETA or a workaround for merchants in the meantime? As we approach crunch time, some issues we may need to consider ways we can unblock migrating shops.

[simsben]

@jun-shop do you have an ETA or a workaround for merchants in the meantime? As we approach crunch time, some issues we may need to consider ways we can unblock migrating shops.

@francispelland It appears that this has been fixed. We were told by one of our Shopify contacts that it was resolved and validated it both on one of our test stores and a store that was live with our extension.

[jun-shop]

Thank you for your patience. Closing this out, but please re-open if it happens again

[MightBeAWizard]

Hey team! I have a merchant that experienced this issue back in July and is reaching out again as it appears to have come back.
The merchant is getting an error on the email address field when the Shipping Protection by Route is checked.

Dawn theme
Live theme

Internal

Any insights on this would be greatly appreciated.

[MightBeAWizard]

Want to touch base to see if this has gotten eyes?