From 83884bc504854fe4e6e7f0e41e038d9009264039 Mon Sep 17 00:00:00 2001
From: adhiraj23zelthy <adhiraj@zelthy.com>
Date: Wed, 4 Sep 2024 15:25:19 +0530
Subject: [PATCH] country code for edit and add

---
 .../src/mocks/appUsersManagementHandlers.js   |  1 +
 .../Modals/AddNewUserModal/AddNewUserForm.jsx | 19 +++++---
 .../EditUserDetailsForm.jsx                   | 47 ++++++++++++-------
 3 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/frontend/src/mocks/appUsersManagementHandlers.js b/frontend/src/mocks/appUsersManagementHandlers.js
index 4707dc6a1..dd7dbeb31 100644
--- a/frontend/src/mocks/appUsersManagementHandlers.js
+++ b/frontend/src/mocks/appUsersManagementHandlers.js
@@ -169,6 +169,7 @@ export const appUsersManagementHandlers = [
 						previous: null,
 						records: searchValue ? [] : slicedData,
 					},
+					pn_country_code:'+213',
 					dropdown_options: {
 						roles: [
 							{
diff --git a/frontend/src/pages/appUserManagement/components/Modals/AddNewUserModal/AddNewUserForm.jsx b/frontend/src/pages/appUserManagement/components/Modals/AddNewUserModal/AddNewUserForm.jsx
index 46eaf3442..5cbd78431 100644
--- a/frontend/src/pages/appUserManagement/components/Modals/AddNewUserModal/AddNewUserForm.jsx
+++ b/frontend/src/pages/appUserManagement/components/Modals/AddNewUserModal/AddNewUserForm.jsx
@@ -13,20 +13,26 @@ import {
 	toggleRerenderPage,
 } from '../../../slice';
 import CountryCodeSelector from '../../../../../components/Form/CountryCodeSelector';
-import { useState } from 'react';
+import { useState , useLayoutEffect} from 'react';
+import { countryCodeList } from '../../../../../utils/countryCodes';
 
 const AddNewUserForm = ({ closeModal }) => {
 	const [countryCode,setCountryCode] = useState({
-		       name: 'India',
-		         dial_code: '+91',
-		         code: 'IN',
-	     })
+		name: 'India',
+		dial_code: '+91',
+		code: 'IN',
+	})
 	const [mobileValid,setMobileValid] = useState(true)
 	let { appId } = useParams();
 	const dispatch = useDispatch();
 
 	const appUserManagementData = useSelector(selectAppUserManagementData);
 	const triggerApi = useApi();
+	let pn_country_code = appUserManagementData?.pn_country_code ?? '+91'
+	useLayoutEffect(()=>{
+		let countryCodeObj = countryCodeList.find((c)=>c.dial_code===pn_country_code)
+		setCountryCode(countryCodeObj)
+	},[])
 	let initialValues = {
 		name: '',
 		email: '',
@@ -65,6 +71,7 @@ const AddNewUserForm = ({ closeModal }) => {
 	);
 
 	let onSubmit = (values) => {
+		setMobileValid(true)
 		let tempValues = {...values,mobile:countryCode?.dial_code+values.mobile}
 		let dynamicFormData = transformToFormData(tempValues);
 
@@ -143,7 +150,7 @@ const AddNewUserForm = ({ closeModal }) => {
 										placeholder="00000 00000"
 									/>
 								</div>
-								<p className='text-red-600 text-[11px]'>{!mobileValid && 'Not a valid mobile number'}</p>
+								<p className='text-red-600 text-[11px]'>{!mobileValid && 'Invalid phone number'}</p>
 								{formik.touched.mobile && formik.errors.mobile ? (
 									<div data-cy="error_message" className="font-lato text-form-xs text-[#cc3300]">
 										{formik.errors.mobile}
diff --git a/frontend/src/pages/appUserManagement/components/Modals/EditUserDetailsModal/EditUserDetailsForm.jsx b/frontend/src/pages/appUserManagement/components/Modals/EditUserDetailsModal/EditUserDetailsForm.jsx
index ee2222615..845097ff7 100644
--- a/frontend/src/pages/appUserManagement/components/Modals/EditUserDetailsModal/EditUserDetailsForm.jsx
+++ b/frontend/src/pages/appUserManagement/components/Modals/EditUserDetailsModal/EditUserDetailsForm.jsx
@@ -1,10 +1,12 @@
 import { Formik } from 'formik';
 import { get } from 'lodash';
+import { useLayoutEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import * as Yup from 'yup';
 import InputField from '../../../../../components/Form/InputField';
 import MultiSelectField from '../../../../../components/Form/MultiSelectField';
+import CountryCodeSelector from '../../../../../components/Form/CountryCodeSelector';
 import SubmitButton from '../../../../../components/Form/SubmitButton';
 import useApi from '../../../../../hooks/useApi';
 import { transformToFormData } from '../../../../../utils/form';
@@ -13,25 +15,35 @@ import {
 	selectAppUserManagementFormData,
 	toggleRerenderPage,
 } from '../../../slice';
+import { countryCodeList } from '../../../../../utils/countryCodes';
 
 const EditUserDetailsForm = ({ closeModal }) => {
 	let { appId } = useParams();
 	const dispatch = useDispatch();
+	const [mobileValid,setMobileValid] = useState(true)
+	const [countryCode,setCountryCode] = useState({
+		name: 'India',
+		  dial_code: '+91',
+		  code: 'IN',
+  })
 
 	const appUserManagementData = useSelector(selectAppUserManagementData);
-	const appUserManagementFormData = useSelector(
+	let appUserManagementFormData = useSelector(
 		selectAppUserManagementFormData
 	);
 
 	const triggerApi = useApi();
+	let pn_country_code = appUserManagementFormData?.pn_country_code ?? '+91'
+	useLayoutEffect(()=>{
+		let countryCodeObj = countryCodeList.find((c)=>c.dial_code===pn_country_code)
+		setCountryCode(countryCodeObj)
+	},[])
+
+	
 	let initialValues = {
 		name: appUserManagementFormData?.name ?? '',
 		email: appUserManagementFormData?.email ?? '',
-		mobile: appUserManagementFormData?.mobile
-			? appUserManagementFormData?.mobile.indexOf('+91') > -1
-				? appUserManagementFormData?.mobile?.slice(3) ?? ''
-				: appUserManagementFormData?.mobile
-			: '',
+		mobile: pn_country_code.length>0?appUserManagementFormData?.mobile.slice(pn_country_code.length):appUserManagementFormData?.mobile,
 		roles: appUserManagementFormData?.roles?.map((eachApp) => eachApp.id) ?? [],
 	};
 
@@ -49,13 +61,7 @@ const EditUserDetailsForm = ({ closeModal }) => {
 				is: (email) => {
 					if (!email) return true;
 				},
-				then: Yup.string()
-					.min(10, 'Must be 10 digits')
-					.max(10, 'Must be 10 digits')
-					.required('Required'),
-				otherwise: Yup.string()
-					.min(10, 'Must be 10 digits')
-					.max(10, 'Must be 10 digits'),
+				then: Yup.string().required('Required')
 			}),
 			roles: Yup.array().min(1, 'Minimun one is required').required('Required'),
 		},
@@ -63,8 +69,8 @@ const EditUserDetailsForm = ({ closeModal }) => {
 	);
 
 	let onSubmit = (values) => {
-		let tempValues = values;
-
+		setMobileValid(true)
+		let tempValues = {...values,mobile:countryCode?.dial_code+values.mobile}
 		let dynamicFormData = transformToFormData(tempValues);
 
 		const makeApiCall = async () => {
@@ -78,6 +84,8 @@ const EditUserDetailsForm = ({ closeModal }) => {
 			if (success && response) {
 				closeModal();
 				dispatch(toggleRerenderPage());
+			}else{
+				setMobileValid(false)
 			}
 		};
 
@@ -124,9 +132,11 @@ const EditUserDetailsForm = ({ closeModal }) => {
 								>
 									Mobile
 								</label>
-								<div className="flex gap-[12px] rounded-[6px] border border-[#DDE2E5] px-[12px] py-[14px]">
-									<span className="font-lato text-[#6C747D]">+91</span>
-									<input
+								<div className="flex gap-[12px] rounded-[6px] border border-[#DDE2E5] px-[12px]">
+									<span className="font-lato text-[#6C747D]">
+										<CountryCodeSelector countryCode={countryCode} setCountryCode={setCountryCode} />
+									</span>
+									<input	
 										id="mobile"
 										name="mobile"
 										type="number"
@@ -137,6 +147,7 @@ const EditUserDetailsForm = ({ closeModal }) => {
 										placeholder="00000 00000"
 									/>
 								</div>
+								<p className='text-red-600 text-[11px]'>{!mobileValid && 'Invalid phone number'}</p>
 								{formik.touched.mobile && formik.errors.mobile ? (
 									<div className="font-lato text-form-xs text-[#cc3300]">
 										{formik.errors.mobile}