@W-19143871 Clear email footer validation messages upon keypress.

Author: mitesh-patel-crm

packages/template-retail-react-app/app/components/subscription/hooks/use-email-subscription.js

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import {useCallback, useMemo, useState} from 'react'
+import {useCallback, useEffect, useMemo, useState} from 'react'
 import {useForm} from 'react-hook-form'
 import {
     CONSENT_CHANNELS,
@@ -47,9 +47,21 @@ export const useEmailSubscription = ({tag} = {}) => {
 
     const {formatMessage} = useIntl()
 
-    const form = useForm({defaultValues: {email: ''}})
+    const form = useForm({defaultValues: {email: ''}, reValidateMode: 'onSubmit'})
     const [successMessage, setSuccessMessage] = useState(null)
 
+    // Clear all feedback (success message + validation errors) when the user types.
+    // Prevents stale messages from a previous submission from lingering.
+    useEffect(() => {
+        const {unsubscribe} = form.watch((_, {name}) => {
+            if (name === 'email') {
+                setSuccessMessage(null)
+                form.clearErrors('email')
+            }
+        })
+        return () => unsubscribe()
+    }, [form])
+
     const messages = useMemo(
         () => ({
             success: formatMessage({
@@ -113,11 +125,7 @@ export const useEmailSubscription = ({tag} = {}) => {
     // Required by react-hook-form's Proxy-based formState.
     const {errors, isSubmitting} = form.formState
 
-    const onSubmit = isFeatureEnabled
-        ? form.handleSubmit(submitSubscription)
-        : (e) => {
-              if (e?.preventDefault) e.preventDefault()
-          }
+    const onSubmit = form.handleSubmit(submitSubscription)
 
     return {form, onSubmit, successMessage, errors, isSubmitting}
 }

packages/template-retail-react-app/app/components/subscription/hooks/use-email-subscription.test.js

@@ -772,6 +772,95 @@ describe('useEmailSubscription', () => {
         })
     })
 
+    describe('Feedback lifecycle — clearing on typing', () => {
+        test('clears success message when user types after successful submit', async () => {
+            mockUpdateSubscriptions.mockResolvedValue({})
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.form.setValue('email', 'test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.onSubmit()
+            })
+
+            await waitFor(() => {
+                expect(result.current.successMessage).toBe('Thanks for subscribing!')
+            })
+
+            // User starts typing a new email — success message should clear
+            act(() => {
+                result.current.form.setValue('email', 'n')
+            })
+
+            await waitFor(() => {
+                expect(result.current.successMessage).toBeNull()
+            })
+        })
+
+        test('does not show validation error when typing partial email after successful submit', async () => {
+            mockUpdateSubscriptions.mockResolvedValue({})
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.form.setValue('email', 'test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.onSubmit()
+            })
+
+            await waitFor(() => {
+                expect(result.current.successMessage).toBe('Thanks for subscribing!')
+            })
+
+            // Type a partial (invalid) email — should NOT trigger validation error
+            act(() => {
+                result.current.form.setValue('email', 'new-use')
+            })
+
+            await waitFor(() => {
+                expect(result.current.errors.email).toBeUndefined()
+                expect(result.current.successMessage).toBeNull()
+            })
+        })
+
+        test('clears error message when user types after failed submit', async () => {
+            mockUpdateSubscriptions.mockRejectedValue(new Error('API Error'))
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.form.setValue('email', 'test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.onSubmit()
+            })
+
+            await waitFor(() => {
+                expect(result.current.errors.email?.message).toBe(
+                    "We couldn't process the subscription. Try again."
+                )
+            })
+
+            // User starts correcting — error should clear
+            act(() => {
+                result.current.form.setValue('email', 'test@example.co')
+            })
+
+            await waitFor(() => {
+                expect(result.current.errors.email).toBeUndefined()
+            })
+        })
+    })
+
     describe('Edge cases', () => {
         test('handles undefined subscriptions data', () => {
             const mockRefetch = jest.fn().mockResolvedValue({data: undefined})