@W-19444204 email input readonly in myaccount

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: {

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
                     }
                 },
                 {

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(<MockedComponent />, {
+        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')
+})