SalesforceCommerceCloud · giridhari-gupta · Dec 5, 2025 · Dec 4, 2025 · Dec 5, 2025 · adamraya
@@ -1,4 +1,5 @@
 ## v8.3.0-dev (Nov 05, 2025)
+- [Bugfix] Fix Forgot Password link not working from Account Profile password update form [#3493](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3493)
 
 ## v8.2.0 (Nov 04, 2025)
 - Add support for Rule Based Promotions for Choice of Bonus Products. We are currently supporting only one product level rule based promotion per product [#3418](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3418)

@@ -17,22 +17,24 @@ import useUpdatePasswordFields from '@salesforce/retail-react-app/app/components
 import Field from '@salesforce/retail-react-app/app/components/field'
 import PasswordRequirements from '@salesforce/retail-react-app/app/components/forms/password-requirements'
 
-const UpdatePasswordFields = ({form, prefix = ''}) => {
+const UpdatePasswordFields = ({form, prefix = '', handleForgotPasswordClick}) => {
     const fields = useUpdatePasswordFields({form, prefix})
     const password = form.watch('password')
 
     return (
         <Stack spacing={5} divider={<StackDivider borderColor="gray.100" />}>
             <Stack>
                 <Field {...fields.currentPassword} />
-                <Box>
-                    <Button variant="link" size="sm" onClick={() => null}>
-                        <FormattedMessage
-                            defaultMessage="Forgot Password?"
-                            id="update_password_fields.button.forgot_password"
-                        />
-                    </Button>
-                </Box>
+                {handleForgotPasswordClick && (
+                    <Box>
+                        <Button variant="link" size="sm" onClick={handleForgotPasswordClick}>
+                            <FormattedMessage
+                                defaultMessage="Forgot Password?"
+                                id="update_password_fields.button.forgot_password"
+                            />
+                        </Button>
+                    </Box>
+                )}
             </Stack>
 
             <Stack spacing={3} pb={2}>
@@ -45,6 +47,7 @@ const UpdatePasswordFields = ({form, prefix = ''}) => {
 }
 
 UpdatePasswordFields.propTypes = {
+    handleForgotPasswordClick: PropTypes.func,
     /** Object returned from `useForm` */
     form: PropTypes.object.isRequired,
 

@@ -58,4 +58,32 @@ describe('UpdatePasswordFields component', () => {
         expect(screen.getByText('Passwords do not match.')).toBeInTheDocument()
         expect(onSubmit).not.toHaveBeenCalled()
     })
+
+    test('does not render "Forgot Password?" button when handleForgotPasswordClick is not provided', () => {
+        renderWithProviders(<WrapperComponent />)
+
+        expect(screen.queryByText(/forgot password/i)).not.toBeInTheDocument()
+    })
+
+    test('renders "Forgot Password?" button when handleForgotPasswordClick is provided', () => {
+        const handleForgotPasswordClick = jest.fn()
+        renderWithProviders(
+            <WrapperComponent handleForgotPasswordClick={handleForgotPasswordClick} />
+        )
+
+        const forgotPasswordButton = screen.getByText(/forgot password/i)
+        expect(forgotPasswordButton).toBeInTheDocument()
+    })
+
+    test('calls handleForgotPasswordClick when "Forgot Password?" button is clicked', async () => {
+        const handleForgotPasswordClick = jest.fn()
+        const {user} = renderWithProviders(
+            <WrapperComponent handleForgotPasswordClick={handleForgotPasswordClick} />
+        )
+
+        const forgotPasswordButton = screen.getByText(/forgot password/i)
+        await user.click(forgotPasswordButton)
+
+        expect(handleForgotPasswordClick).toHaveBeenCalledTimes(1)
+    })
 })
@@ -230,7 +230,9 @@ const Account = () => {
 
                 <Switch>
                     <Route exact path={path}>
-                        <AccountDetail />
+                        <AccountDetail
+                            handleForgotPasswordClick={() => navigate('/reset-password')}
+                        />
                     </Route>
                     <Route exact path={`${path}/wishlist`}>
                         <AccountWishlist />

@@ -220,7 +220,6 @@ describe('updating password', function () {
         expect(el.getByText(/forgot password/i)).toBeInTheDocument()
     })
 
-    // TODO: Fix test
     test('Allows customer to update password', async () => {
         global.server.use(
             rest.put('*/password', (req, res, ctx) => res(ctx.status(204), ctx.json()))
@@ -233,10 +232,11 @@ describe('updating password', function () {
         await user.type(el.getByLabelText(/current password/i), 'Password!12345')
         await user.type(el.getByLabelText('New Password'), 'Password!98765')
         await user.type(el.getByLabelText('Confirm New Password'), 'Password!98765')
-        await user.click(el.getByText(/Forgot password/i))
         await user.click(el.getByText(/save/i))
-
-        expect(el.getByTestId('sf-toggle-card-password-content')).toBeInTheDocument()
+        // Wait for form submission to complete and edit mode to close
+        await waitFor(() => {
+            expect(el.getByTestId('sf-toggle-card-password-content')).toBeInTheDocument()
+        })
     })
 
     test('Warns customer when updating password with invalid current password', async () => {
@@ -257,4 +257,26 @@ describe('updating password', function () {
 
         expect(await screen.findByTestId('password-update-error')).toBeInTheDocument()
     })
+
+    test('navigates to reset-password page when "Forgot Password?" is clicked', async () => {
+        useCustomerType.mockReturnValue({isRegistered: true, isExternal: false})
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+        })
+
+        expect(await screen.findByTestId('account-page')).toBeInTheDocument()
+        expect(await screen.findByTestId('account-detail-page')).toBeInTheDocument()
+
+        const el = within(screen.getByTestId('sf-toggle-card-password'))
+        await user.click(el.getByText(/edit/i))
+
+        const forgotPasswordButton = el.getByText(/forgot password/i)
+        expect(forgotPasswordButton).toBeInTheDocument()
+
+        await user.click(forgotPasswordButton)
+
+        await waitFor(() => {
+            expect(window.location.pathname).toBe(`${expectedBasePath}/reset-password`)
+        })
+    })
 })
@@ -235,7 +235,7 @@ ProfileCard.propTypes = {
     allowPasswordChange: PropTypes.bool
 }
 
-const PasswordCard = () => {
+const PasswordCard = ({handleForgotPasswordClick}) => {
     const {formatMessage} = useIntl()
     const headingRef = useRef(null)
     const {data: customer} = useCurrentCustomer()
@@ -300,7 +300,10 @@ const PasswordCard = () => {
                                     </Text>
                                 </Alert>
                             )}
-                            <UpdatePasswordFields form={form} />
+                            <UpdatePasswordFields
+                                form={form}
+                                handleForgotPasswordClick={handleForgotPasswordClick}
+                            />
                             <FormActionButtons
                                 onCancel={() => {
                                     setIsEditing(false)
@@ -336,7 +339,11 @@ const PasswordCard = () => {
     )
 }
 
-const AccountDetail = () => {
+PasswordCard.propTypes = {
+    handleForgotPasswordClick: PropTypes.func
+}
+
+const AccountDetail = ({handleForgotPasswordClick}) => {
     const headingRef = useRef()
     useEffect(() => {
         // Focus the 'Account Details' header when the component mounts for accessibility
@@ -356,12 +363,18 @@ const AccountDetail = () => {
 
             <Stack spacing={4}>
                 <ProfileCard allowPasswordChange={!isExternal} />
-                {!isExternal && <PasswordCard />}
+                {!isExternal && (
+                    <PasswordCard handleForgotPasswordClick={handleForgotPasswordClick} />
+                )}
             </Stack>
         </Stack>
     )
 }
 
+AccountDetail.propTypes = {
+    handleForgotPasswordClick: PropTypes.func
+}
+
 AccountDetail.getTemplateName = () => 'account-detail'
 
 export default AccountDetail
@@ -115,3 +115,47 @@ test('Non ECOM user cannot see the password card', async () => {
 
     expect(screen.queryByText(/Password/i)).not.toBeInTheDocument()
 })
+
+describe('AccountDetail component', () => {
+    test('passes handleForgotPasswordClick prop to PasswordCard when provided', async () => {
+        sdk.useCustomerType.mockReturnValue({isRegistered: true, isExternal: false})
+        const handleForgotPasswordClick = jest.fn()
+
+        const {user} = renderWithProviders(
+            <AccountDetail handleForgotPasswordClick={handleForgotPasswordClick} />,
+            {
+                wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+            }
+        )
+
+        await waitFor(() => {
+            expect(screen.getByText(/Account Details/i)).toBeInTheDocument()
+        })
+
+        const passwordCard = screen.getByTestId('sf-toggle-card-password')
+        await user.click(within(passwordCard).getByText(/edit/i))
+
+        const forgotPasswordButton = screen.getByText(/forgot password/i)
+        expect(forgotPasswordButton).toBeInTheDocument()
+
+        await user.click(forgotPasswordButton)
+        expect(handleForgotPasswordClick).toHaveBeenCalledTimes(1)
+    })
+
+    test('does not show "Forgot Password?" button when handleForgotPasswordClick is not provided', async () => {
+        sdk.useCustomerType.mockReturnValue({isRegistered: true, isExternal: false})
+
+        const {user} = renderWithProviders(<AccountDetail />, {
+            wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText(/Account Details/i)).toBeInTheDocument()
+        })
+
+        const passwordCard = screen.getByTestId('sf-toggle-card-password')
+        await user.click(within(passwordCard).getByText(/edit/i))
+
+        expect(screen.queryByText(/forgot password/i)).not.toBeInTheDocument()
+    })
+})