Merge pull request #683 from ita-social-projects/#682_improvingTheMas…

…kForEnteringA_PhoneNumberInTheContact_Tab

#682 improving the mask for entering a phone number in the contact tab

FrontEnd/src/components/ProfilePage/FormComponents/ContactsInfo.jsx

@@ -1,30 +1,21 @@
 import axios from 'axios';
 import { toast } from 'react-toastify';
-import { useState, useEffect } from 'react';
-import { useContext } from 'react';
+import { useState, useEffect, useContext } from 'react';
 import { DirtyFormContext } from '../../../context/DirtyFormContext';
 import { useAuth, useProfile } from '../../../hooks';
 import checkFormIsDirty from '../../../utils/checkFormIsDirty';
+import { formatPhoneNumber } from '../../../utils/formatPhoneNumber';
 import FullField from './FormFields/FullField';
 import HalfFormField from './FormFields/HalfFormField';
 import Loader from '../../loader/Loader';
 import css from './FormComponents.module.css';
+import { useMask } from '@react-input/mask';
 
 const LABELS = {
   phone: 'Телефон',
   address: 'Поштова адреса',
 };
 
-const formatPhoneNumber = (phoneNumber) => {
-  if (!phoneNumber) return '';
-  const cleaned = phoneNumber.replace(/\s+/g, '');
-  if (cleaned.length === 12 && cleaned.startsWith('380')) {
-    return `+380${cleaned.slice(3, 5)} ${cleaned.slice(5, 8)} ${cleaned.slice(8, 10)} ${cleaned.slice(10)}`;
-  }
-  return phoneNumber;
-};
-
-
 const cleanPhoneNumber = (phoneNumber) => {
   return phoneNumber.replace(/[^\d]/g, '');
 };
@@ -33,6 +24,7 @@ const ContactsInfo = (props) => {
   const { user } = useAuth();
   const { profile: mainProfile, mutate: profileMutate } = useProfile();
   const [profile, setProfile] = useState(props.profile);
+  const [phone, setPhone] = useState(formatPhoneNumber(profile?.phone));
   const [phoneNumberError, setPhoneNumberError] = useState(null);
   const { setFormIsDirty } = useContext(DirtyFormContext);
 
@@ -46,6 +38,8 @@ const ContactsInfo = (props) => {
     setFormIsDirty(isDirty);
   }, [mainProfile, profile]);
 
+  const inputRef = useMask({ mask: '+380XX XXX XX XX', replacement: { X: /\d/ } });
+
   useEffect(() => {
     props.currentFormNameHandler(props.curForm);
   }, []);
@@ -79,6 +73,7 @@ const ContactsInfo = (props) => {
     } else {
       setPhoneNumberError('Номер повинен містити лише цифри');
     }
+    setPhone(formatPhoneNumber(e.target.value));
     setProfile((prevState) => {
       return { ...prevState, [e.target.name]: e.target.value };
     });
@@ -139,11 +134,12 @@ const ContactsInfo = (props) => {
               <HalfFormField
                 inputType="tel"
                 name="phone"
+                ref={inputRef}
                 fieldPlaceholder="+380XX XXX XX XX"
                 label={LABELS.phone}
                 updateHandler={onUpdatePhoneNumberField}
                 requredField={false}
-                value={profile.phone ?? ''}
+                value={phone ?? ''}
                 error={phoneNumberError}
               />
             </div>

FrontEnd/src/components/ProfilePage/FormComponents/FormFields/HalfFormField.jsx

@@ -1,15 +1,12 @@
-import { PropTypes } from 'prop-types';
+import PropTypes from 'prop-types';
 import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
 import css from './HalfFormField.module.css';
 import { Tooltip } from 'antd';
-import { useMask } from '@react-input/mask';
+import { forwardRef } from 'react';
 
 const LENGTH_EMAIL = 19;
 
-const HalfFormField = (props) => {
-
-  const inputRef = useMask({ mask: '+380XX XXX XX XX', replacement: { X: /\d/ } });
-
+const HalfFormField = forwardRef(function HalfFormField(props, ref) {
   const shouldShowTooltip =
     props.name === 'email' && props.value.length > LENGTH_EMAIL;
 
@@ -47,7 +44,7 @@ const HalfFormField = (props) => {
             onBlur={props.onBlur}
             onKeyDown={preventEnterSubmit}
             onChange={props.updateHandler}
-            ref={inputRef}
+            ref={ref}
             required={props.requredField ? 'required' : ''}
             disabled={props.name === 'email' ? 'disabled' : ''}
             maxLength={props.maxLength}
@@ -65,9 +62,7 @@ const HalfFormField = (props) => {
       )}
     </div>
   );
-};
-
-export default HalfFormField;
+});
 
 HalfFormField.propTypes = {
   requredField: PropTypes.bool,
@@ -83,3 +78,5 @@ HalfFormField.propTypes = {
     PropTypes.arrayOf(PropTypes.string),
   ]),
 };
+
+export default HalfFormField;

FrontEnd/src/utils/formatPhoneNumber.js

@@ -0,0 +1,8 @@
+export const formatPhoneNumber = (phoneNumber) => {
+    if (!phoneNumber) return '';
+    const cleaned = phoneNumber.replace(/\s+/g, '');
+    if (cleaned.length === 12 && cleaned.startsWith('380')) {
+      return `+380${cleaned.slice(3, 5)} ${cleaned.slice(5, 8)} ${cleaned.slice(8, 10)} ${cleaned.slice(10)}`;
+    }
+    return phoneNumber;
+  };