W-13546967 - Fix change password form (#1634)

* Fix password form functionality

* Add test for failed password update.

* Reset for after success

* Update CHANGELOG.md

Author: bendvc

packages/template-retail-react-app/CHANGELOG.md

@@ -44,6 +44,7 @@
 
 ### Bug Fixes
 
+- Fix password change functionality [#1634](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1634)
 - Remove internal linter rule that is missing in generated projects [#1554](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1554)
 - Fix bug where you can add duplicates of the same item to the wishlist. Also fixes bug where skeleton appears when removing last item from the wishlist. [#1560](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1560)
 - Replace max-age with s-maxage to only cache shared caches [#1564](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1564)

packages/template-retail-react-app/app/mocks/mock-data.js

@@ -5638,3 +5638,10 @@ export const mockCartVariant = {
     c_size: '9MD',
     c_width: 'Z'
 }
+
+export const mockPasswordUpdateFalure = {
+    title: 'Update Password',
+    type: 'https://api.commercecloud.salesforce.com/documentation/error/v1/errors/update-password',
+    detail: 'The update password request is invalid. Customer\u0027s current password is not valid',
+    errorMessage: 'Customer\u0027s current password is not valid'
+}

packages/template-retail-react-app/app/pages/account/index.test.js

@@ -16,7 +16,8 @@ import {
     mockOrderHistory,
     mockedGuestCustomer,
     mockedRegisteredCustomer,
-    mockOrderProducts
+    mockOrderProducts,
+    mockPasswordUpdateFalure
 } from '@salesforce/retail-react-app/app/mocks/mock-data'
 import Account from '@salesforce/retail-react-app/app/pages/account/index'
 import Login from '@salesforce/retail-react-app/app/pages/login'
@@ -162,27 +163,52 @@ describe('updating profile', function () {
 })
 
 describe('updating password', function () {
-    beforeEach(() => {
-        global.server.use(
-            rest.put('*/password', (req, res, ctx) => {
-                return res(ctx.json())
-            })
-        )
-    })
-    test('Allows customer to update password', async () => {
+    test('Password update form is rendered correctly', async () => {
         const {user} = renderWithProviders(<MockedComponent />)
         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))
+
+        expect(el.getByLabelText(/current password/i)).toBeInTheDocument()
+        expect(el.getByLabelText(/new password/i)).toBeInTheDocument()
+        expect(el.getByText(/forgot password/i)).toBeInTheDocument()
+    })
+
+    test('Allows customer to update password', async () => {
+        global.server.use(
+            rest.put('*/password', (req, res, ctx) => res(ctx.status(204), ctx.json()))
+        )
+
+        const {user} = renderWithProviders(<MockedComponent />)
+
         const el = within(screen.getByTestId('sf-toggle-card-password'))
         await user.click(el.getByText(/edit/i))
         await user.type(el.getByLabelText(/current password/i), 'Password!12345')
         await user.type(el.getByLabelText(/new password/i), 'Password!98765')
         await user.click(el.getByText(/Forgot password/i))
+        await user.click(el.getByText(/save/i))
 
-        expect(await screen.findByTestId('account-detail-page')).toBeInTheDocument()
+        expect(await screen.findByText('••••••••')).toBeInTheDocument()
+    })
+
+    test('Warns customer when updating password with invalid current password', async () => {
+        global.server.use(
+            rest.put('*/password', (req, res, ctx) =>
+                res(ctx.status(401), ctx.json(mockPasswordUpdateFalure))
+            )
+        )
 
+        const {user} = renderWithProviders(<MockedComponent />)
+
+        const el = within(screen.getByTestId('sf-toggle-card-password'))
+        await user.click(el.getByText(/edit/i))
+        await user.type(el.getByLabelText(/current password/i), 'Password!123456')
+        await user.type(el.getByLabelText(/new password/i), 'Password!98765')
+        await user.click(el.getByText(/Forgot password/i))
         await user.click(el.getByText(/save/i))
-        expect(await screen.findByText('••••••••')).toBeInTheDocument()
+
+        expect(await screen.findByTestId('password-update-error')).toBeInTheDocument()
     })
 })

packages/template-retail-react-app/app/pages/account/profile.jsx

@@ -234,7 +234,7 @@ const PasswordCard = () => {
     const {formatMessage} = useIntl()
 
     const {data: customer} = useCurrentCustomer()
-    const {isRegistered, customerId} = customer
+    const {isRegistered, customerId, email} = customer
 
     const login = useAuthHelper(AuthHelpers.LoginRegisteredUserB2C)
 
@@ -275,24 +275,20 @@ const PasswordCard = () => {
                             isClosable: true
                         })
                         login.mutate({
-                            email: values.email,
+                            username: email,
                             password: values.password
                         })
                         passwordHeading?.focus()
+                        form.reset()
+                    },
+                    onError: async (err) => {
+                        const resObj = await err.response.json()
+                        form.setError('root.global', {type: 'manual', message: resObj.detail})
                     }
                 }
             )
-            setIsEditing(false)
-            toast({
-                title: formatMessage({
-                    defaultMessage: 'Password updated',
-                    id: 'password_card.info.password_updated'
-                }),
-                status: 'success',
-                isClosable: true
-            })
         } catch (error) {
-            form.setError('global', {type: 'manual', message: error.message})
+            form.setError('root.global', {type: 'manual', message: error.message})
         }
     }
 
@@ -313,11 +309,11 @@ const PasswordCard = () => {
                 <Container variant="form">
                     <form onSubmit={form.handleSubmit(submit)}>
                         <Stack spacing={6}>
-                            {form.formState.errors?.global && (
-                                <Alert status="error">
+                            {form.formState.errors?.root?.global && (
+                                <Alert data-testid="password-update-error" status="error">
                                     <AlertIcon color="red.500" boxSize={4} />
                                     <Text fontSize="sm" ml={3}>
-                                        {form.formState.errors.global.message}
+                                        {form.formState.errors.root.global.message}
                                     </Text>
                                 </Alert>
                             )}