[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.