diff --git a/packages/template-retail-react-app/app/components/forms/useProfileFields.jsx b/packages/template-retail-react-app/app/components/forms/useProfileFields.jsx index 8471520189..92db9a1078 100644 --- a/packages/template-retail-react-app/app/components/forms/useProfileFields.jsx +++ b/packages/template-retail-react-app/app/components/forms/useProfileFields.jsx @@ -67,6 +67,11 @@ export default function useProfileFields({ }) }, error: errors[`${prefix}email`], + inputProps: { + // For security reason, updating the email must be validated via OTP (One Time Password) + // If you are to change this to allow updating the email, you must validate the email via OTP otherwise you will have a security gap + readOnly: true + }, control }, phone: { diff --git a/packages/template-retail-react-app/app/pages/account/profile.jsx b/packages/template-retail-react-app/app/pages/account/profile.jsx index 85ce237076..514c4d7484 100644 --- a/packages/template-retail-react-app/app/pages/account/profile.jsx +++ b/packages/template-retail-react-app/app/pages/account/profile.jsx @@ -100,15 +100,8 @@ const ProfileCard = ({allowPasswordChange = false}) => { body: { firstName: values.firstName, lastName: values.lastName, - phoneHome: values.phone, - // NOTE/ISSUE - // The sdk is allowing you to change your email to an already-existing email. - // I would expect an error. We also want to keep the email and login the same - // for the customer, but the sdk isn't changing the login when we submit an - // updated email. This will lead to issues where you change your email but end - // up not being able to login since 'login' will no longer match the email. - email: values.email, - login: values.email + phoneHome: values.phone + // Email field is now readonly and not included in the update } }, { diff --git a/packages/template-retail-react-app/app/pages/account/profile.test.js b/packages/template-retail-react-app/app/pages/account/profile.test.js index 8a1ad392bf..ac987c9771 100644 --- a/packages/template-retail-react-app/app/pages/account/profile.test.js +++ b/packages/template-retail-react-app/app/pages/account/profile.test.js @@ -117,3 +117,29 @@ test('Non ECOM user cannot see the password card', async () => { expect(screen.queryByText(/Password/i)).not.toBeInTheDocument() }) + +test('Email field is readonly when editing profile', async () => { + sdk.useCustomerType.mockReturnValue({isRegistered: true, isExternal: false}) + + const {user} = renderWithProviders(, { + wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app} + }) + + await waitFor(() => { + expect(screen.getByText(/Account Details/i)).toBeInTheDocument() + }) + + const profileCard = screen.getByTestId('sf-toggle-card-my-profile') + // Click edit to open the profile form + await user.click(within(profileCard).getByText(/edit/i)) + + // Profile Form must be present + expect(screen.getByLabelText('Profile Form')).toBeInTheDocument() + + // Find the email input field + const emailInput = screen.getByLabelText('Email') + expect(emailInput).toBeInTheDocument() + + // Verify the email field is readonly + expect(emailInput).toHaveAttribute('readonly') +})