#413 fix Trainee edit profile

package.json

@@ -95,6 +95,7 @@
     "react-loading-skeleton": "^3.4.0",
     "react-pdf": "^7.3.3",
     "react-pdf-js": "^5.1.0",
+    "react-phone-number-input": "^3.4.8",
     "react-router": "^6.14.1",
     "react-router-dom": "^6.14.1",
     "react-select": "^5.7.4",

src/components/Input.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { RegisterOptions } from 'react-hook-form';
 
 type DefaultProps = {
   customClass?: string;
@@ -21,6 +22,8 @@ type inputProps = {
   placeholder: string;
   register: any;
   errors: any;
+  readOnly?: boolean
+  validationRules?: RegisterOptions;
 };
 
 function Input({
@@ -32,8 +35,11 @@ function Input({
   errors,
   placeholder,
   customClass,
-  isRequired,
+  isRequired=false,
   register,
+  handleChange,
+  readOnly = false,
+  validationRules = {},
 }: inputProps & DefaultProps) {
   const { t } = useTranslation();
 
@@ -42,7 +48,7 @@ function Input({
   fieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
   /* Format error message end */
 
-  return (
+   return (
     <div className="flex flex-col items-start justify-start font-serif w-full">
       <label
         htmlFor={labelFor}
@@ -59,8 +65,12 @@ function Input({
         })}
         id={id}
         type={type}
-        className={`text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  ${customClass}`}
+        className={`text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700 ${
+          readOnly ? 'bg-gray-100 cursor-not-allowed' : ''
+        } ${customClass}`}
         placeholder={placeholder}
+        onChange={handleChange}
+        readOnly={readOnly}
       />
       <div className="text-[.78rem] md:text-[.83rem]">
         <small className="text-red-600">
@@ -73,4 +83,4 @@ function Input({
 
 Input.defaultProps = inputDefaultProps;
 
-export default Input;
+export default Input;

src/constants/formFields.ts

@@ -39,16 +39,16 @@ const profileFields = [
     isRequired: false,
     placeholder: 'Enter the City where you live',
   },
-  {
-    labelText: 'Telephone',
-    labelFor: 'telephone',
-    id: 'telephone',
-    name: 'phoneNumber',
-    type: 'phone',
-    autoComplete: 'telephone',
-    isRequired: false,
-    placeholder: 'Your Telephone Number',
-  },
+  // {
+  //   labelText: 'Telephone',
+  //   labelFor: 'telephone',
+  //   id: 'telephone',
+  //   name: 'phoneNumber',
+  //   type: 'phone',
+  //   autoComplete: 'telephone',
+  //   isRequired: false,
+  //   placeholder: 'Your Telephone Number',
+  // },
   {
     labelText: 'Github Username',
     labelFor: 'github-username',

src/index.css

@@ -35,6 +35,53 @@
   }
 }
 
+.phone-input-container {
+  background-color: transparent;
+  font-size: 0.8rem;
+
+}
+.PhoneInputInput {
+  padding: 0.3rem;
+}
+.custom-phone-input .PhoneInputInput:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px #8667f2;
+  border-radius: 2px;
+}
+
+
+.phone-input-container .PhoneInputCountry {
+  margin-right: 0.5rem;
+}
+
+.phone-input-container .PhoneInputCountrySelect {
+  background-color: white;
+}
+
+.dark .phone-input-container .PhoneInputCountrySelect {
+  background-color: #272728;
+  color: #F3F4F6;
+
+}
+
+.phone-input-container .PhoneInputCountryIcon {
+  background-color: transparent;
+}
+
+.phone-input-container .PhoneInputInput {
+  background-color: white;
+}
+
+.dark .phone-input-container .PhoneInputInput {
+  background-color: rgba(0, 0, 0, 0.45);
+  color: #F3F4F6;
+}
+
+.dark .phone-input-container .PhoneInputCountrySelectArrow {
+  border-top-color: #F3F4F6;
+}
+
+
 /* 404 Page */
 .errorImg {
   background-image: linear-gradient(90deg,

src/pages/ProfileEdit.tsx

@@ -19,6 +19,9 @@ import Button from '../components/Buttons';
 import { COUNTRIES, SelectMenuOption } from '../constants/countries';
 import profileFields from '../constants/formFields';
 import { UPDATE_PROFILE } from '../Mutations/profileMutation';
+import PhoneInput from 'react-phone-number-input';
+import 'react-phone-number-input/style.css';
+import { isValidPhoneNumber } from 'react-phone-number-input';
 
 type fields = {
   [key: string]: string | number;
@@ -30,7 +33,7 @@ profileFields.forEach((field) => {
 });
 
 function EditProfile() {
-  // eslint-disable-next-line  operator-linebreak
+    // eslint-disable-next-line  operator-linebreak
   const { setName } = useContext(UserContext);
   const [profileFieldState, setProfileFieldState] =
     useState<fields>(fieldState);
@@ -45,7 +48,7 @@ function EditProfile() {
   const location = useLocation();
 
   const { profile }: any = location.state;
-  // eslint-disable-next-line no-underscore-dangle
+    // eslint-disable-next-line no-underscore-dangle
 
   useDocumentTitle('Edit Profile');
   const {
@@ -54,17 +57,24 @@ function EditProfile() {
     handleSubmit,
 
     formState: { errors },
-  }: any = useForm({ mode: 'all', defaultValues: profile });
+  }: any = useForm({
+    mode: 'all',
+    defaultValues: {
+      ...profile,
+      email: profile.user.email,
+      phoneNumber: profile.phoneNumber || '',
+    }
+  });
   const client = useApolloClient();
   const [UpdateProfile, { loading }] = useMutation(UPDATE_PROFILE);
   const onSubmit = async (data: any) => {
-    /* istanbul ignore next */
+        /* istanbul ignore next */
     try {
       await UpdateProfile({
         variables: { ...data },
       });
       await client.resetStore();
-      /* istanbul ignore next */
+            /* istanbul ignore next */
       toast.success('Profile has been updated');
       navigate('/profile');
     } catch (error) {}
@@ -127,6 +137,21 @@ function EditProfile() {
           >
             <div className="flex flex-col w-full gap-6 xmd:flex-row lg:gap-10">
               <div className="flex flex-col gap-y-3 basis-1/2">
+                <Input
+                  key="email"
+                  labelText="Email"
+                  labelFor="email"
+                  id="email"
+                  register={register}
+                  errors={errors}
+                  name="email"
+                  type="email"
+                  isRequired={true}
+                  placeholder="Your email"
+                  customClass="dark:bg-black/45"
+                  readOnly={true} 
+                  handleChange={() => {}}
+                />
                 {profileFields.map((field) => {
                   if (
                     !['address', 'city'].includes(field.labelText.toLowerCase())
@@ -173,12 +198,12 @@ function EditProfile() {
                           id={field.id}
                           register={register}
                           errors={errors}
+
                           name={field.name}
                           type={field.type}
                           isRequired={field.isRequired}
                           placeholder={t(`${field.placeholder}`)}
                           customClass="dark:bg-black/45"
-                          /* istanbul ignore next */
                           handleChange={(
                             e: React.ChangeEvent<HTMLInputElement>,
                           ) => {
@@ -195,10 +220,10 @@ function EditProfile() {
                 </div>
               </div>
               <div className="flex flex-col gap-y-3 basis-1/2">
-                <div className="flex flex-col items-start justify-start mt-auto font-serif">
+                <div className="flex flex-col items-start justify-start mt-auto font-serif ">
                   <label
                     htmlFor="Country"
-                    className="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
+                    className="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem] "
                   >
                     {t('Country')}
                   </label>
@@ -223,6 +248,36 @@ function EditProfile() {
                     )}
                   />
                 </div>
+                <div className="flex flex-col items-start justify-start">
+                  <label
+                    htmlFor="phoneNumber"
+                    className="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
+                  >
+                    {t('Phone Number')} (Optional)
+                  </label>
+                  <Controller
+                    name="phoneNumber"
+                    control={control}
+                    rules={{
+                      validate: (value) => 
+                        !value || isValidPhoneNumber(value) || 
+                        "Please enter a valid phone number with country code"
+                    }}
+                    render={({ field: { onChange, value } }) => (
+                      <PhoneInput
+                        international
+                        countryCallingCodeEditable={false}
+                        placeholder={t('Select country code')}
+                        value={value}
+                        onChange={onChange}
+                        className="w-full phone-input-container custom-phone-input dark:bg-black/45"
+                      />
+                    )}
+                  />
+                  {errors.phoneNumber && (
+                    <span className="text-red-500 text-sm">{errors.phoneNumber.message}</span>
+                  )}
+                </div>
                 <div className="flex flex-col items-start justify-start h-full md:col-span-2">
                   <label
                     htmlFor="Biography"

tests/pages/Profile.test.tsx

@@ -25,13 +25,17 @@ const mockedUseLocationValue = {
   search: '',
   key: '',
   hash: '',
-  state: {
-    profile: {
-      lastName: 'Doe',
-      firstName: 'John',
-      country: 'AD',
+state: {
+  profile: {
+    lastName: 'Doe',
+    firstName: 'John',
+    country: 'AD',
+    user: {
+      email: '[email protected]'
     },
+    phoneNumber: '+1234567890'
   },
+},
 };
 
 describe('Profile Page', () => {