diff --git a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx index 720a086eef..2395cd74a8 100644 --- a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx +++ b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx @@ -334,14 +334,16 @@ export const formatPhoneNumber = str => { }; export const Phone = props => { - const { userProfile, setUserProfile, handleUserProfile, canEdit, desktopDisplay ,darkMode} = props; + const { userProfile, setUserProfile, handleUserProfile, canEdit, desktopDisplay, darkMode } = props; const { phoneNumber, privacySettings } = userProfile; const phoneInputWrapperRef = useRef(null); + if (canEdit) { return ( <> + {/* one toggle, same as Email */} { handleUserProfile={handleUserProfile} darkMode={darkMode} /> - { - setUserProfile({ ...userProfile, phoneNumber: phoneNumber.trim() }); - }} - /> - { - const input = phoneInputWrapperRef.current?.querySelector('input'); - if (input) { - navigator.clipboard.writeText(input.value); - toast.success('Phone number copied!'); - } - }} - title="Copy phone number" - style={{ - position: 'absolute', - right: '12px', - top: '50%', - transform: 'translateY(-50%)', - cursor: 'pointer', - fontSize: '1rem', - color: darkMode ? '#fff' : '#000', - zIndex: 2, - }} - /> - + + {/* wrapper to position the copy icon correctly */} +
+ { + setUserProfile({ ...userProfile, phoneNumber: value.trim() }); + }} + /> + + { + const input = phoneInputWrapperRef.current?.querySelector('input'); + if (input) { + navigator.clipboard.writeText(input.value); + toast.success('Phone number copied!'); + } + }} + style={{ + position: 'absolute', + cursor: 'pointer', + fontSize: '1rem', + color: darkMode ? '#fff' : '#000', + top: '50%', + right: '10px', + transform: 'translateY(-50%)', + zIndex: 2, + }} + /> +
); } + return ( <> {privacySettings?.phoneNumber && (