From 78d87d02397451dcb98026c45de3ad7f716ba2ed Mon Sep 17 00:00:00 2001
From: Joshua Bolk <joshuabolk@gmail.com>
Date: Fri, 9 Feb 2024 12:21:47 +0100
Subject: [PATCH 1/2] fix: customer signup loop

---
 .../hooks/useAccountSignInUpForm.tsx          | 21 +++++++++++--------
 packages/next-ui/hooks/useUrlQuery.ts         |  2 +-
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/magento-customer/hooks/useAccountSignInUpForm.tsx b/packages/magento-customer/hooks/useAccountSignInUpForm.tsx
index cedef10e84..20368815c3 100644
--- a/packages/magento-customer/hooks/useAccountSignInUpForm.tsx
+++ b/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) => {
diff --git a/packages/next-ui/hooks/useUrlQuery.ts b/packages/next-ui/hooks/useUrlQuery.ts
index 16c050159c..0995999ea9 100644
--- a/packages/next-ui/hooks/useUrlQuery.ts
+++ b/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 })
     },

From 13ffa6b945f1c72bf1fdc9298e4ce5dd76b48d73 Mon Sep 17 00:00:00 2001
From: Paul Hachmang <paul@reachdigital.nl>
Date: Fri, 9 Feb 2024 12:29:42 +0100
Subject: [PATCH 2/2] Create tall-phones-wash.md

---
 .changeset/tall-phones-wash.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/tall-phones-wash.md

diff --git a/.changeset/tall-phones-wash.md b/.changeset/tall-phones-wash.md
new file mode 100644
index 0000000000..3facfc75c3
--- /dev/null
+++ b/.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