Merge pull request #2191 from graphcommerce-org/fix/customer-signup-loop

fix: customer signup loop

.changeset/tall-phones-wash.md

@@ -0,0 +1,6 @@
+---
+"@graphcommerce/magento-customer": patch
+"@graphcommerce/next-ui": patch
+---
+
+When a user was logging in from the checkout react would be caught in an infinite loop and thus the page would hang

packages/magento-customer/hooks/useAccountSignInUpForm.tsx

@@ -10,6 +10,7 @@ import {
   IsEmailAvailableQueryVariables,
 } from './IsEmailAvailable.gql'
 import { useCustomerSession } from './useCustomerSession'
+import { useUrlQuery } from '@graphcommerce/next-ui'
 
 export type UseFormIsEmailAvailableProps = {
   onSubmitted?: (data: { email: string }) => void
@@ -22,6 +23,7 @@ export const isToggleMethod = !import.meta.graphCommerce.enableGuestCheckoutLogi
 export function useAccountSignInUpForm(props: UseFormIsEmailAvailableProps = {}) {
   const { onSubmitted } = props
   const { token, valid } = useCustomerSession()
+  const [queryState, setRouterQuery] = useUrlQuery<{ email?: string | null }>()
 
   const customerQuery = useQuery(CustomerDocument, { fetchPolicy: 'cache-only' })
   const cachedEmail = customerQuery?.data?.customer?.email
@@ -39,19 +41,20 @@ export function useAccountSignInUpForm(props: UseFormIsEmailAvailableProps = {})
     },
     { fetchPolicy: 'cache-and-network' },
   )
-  const { formState, data, handleSubmit } = form
+  const { formState, data, handleSubmit, setValue, trigger } = form
   const { isSubmitSuccessful, isValid } = formState
 
-  const router = useRouter()
   useEffect(() => {
-    const emailFromParams = router.query.email as string
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      if (!cachedEmail && queryState.email) {
+        await setRouterQuery({ email: null })
 
-    if (!cachedEmail && emailFromParams) {
-      form.setValue('email', emailFromParams)
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      form.trigger('email')
-    }
-  }, [cachedEmail, router.query.email, form])
+        setValue('email', queryState.email)
+        await trigger('email')
+      }
+    })()
+  }, [cachedEmail, queryState.email, setRouterQuery, setValue, trigger])
 
   const submit = isToggleMethod
     ? async (e?: React.BaseSyntheticEvent) => {

packages/next-ui/hooks/useUrlQuery.ts

@@ -11,7 +11,7 @@ export function useUrlQuery<T extends Record<string, string | null>>() {
         Object.entries({ ...current, ...incoming }).filter(([, value]) => value !== null),
       )
 
-      if (JSON.stringify(current) === JSON.stringify(newQuery)) return undefined
+      if (JSON.stringify(current) === JSON.stringify(newQuery)) return Promise.resolve(true)
 
       return replace({ query: newQuery }, undefined, { shallow: true })
     },