ordering-ui-react-native 0.16.33 → 0.16.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.33",
+  "version": "0.16.34",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/original/src/components/UserDetails/index.tsx

@@ -30,12 +30,9 @@ const UserDetailsUI = (props: any) => {
 		phoneUpdate,
 		togglePhoneUpdate,
 		isCheckout,
-		checkPhoneCodeState,
 		handleSendVerifyCode,
-		handleCheckPhoneCode,
 		verifyPhoneState,
-		isVerifiedPhone,
-		setCheckPhoneCodeState
+		setFormState
 	} = props
 
 	const theme = useTheme();
@@ -48,6 +45,7 @@ const UserDetailsUI = (props: any) => {
 
 	const [isModalVisible, setIsModalVisible] = useState(false);
 	const [willVerifyOtpState, setWillVerifyOtpState] = useState(false);
+	const [checkPhoneCodeState, setCheckPhoneCodeState] = useState({ loading: false, result: { error: false } })
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -94,6 +92,18 @@ const UserDetailsUI = (props: any) => {
 		}
 	}
 
+	const handleSendPhoneCode = (values: any) => {
+    setWillVerifyOtpState(false)
+		setIsModalVisible(false)
+    setFormState({
+      ...formState,
+      changes: {
+        ...formState?.changes,
+        verification_code: values?.code
+      }
+    })
+  }
+
 	useEffect(() => {
 		if (willVerifyOtpState) handleVerifyCodeClick()
 	}, [willVerifyOtpState])
@@ -120,10 +130,6 @@ const UserDetailsUI = (props: any) => {
 		}
 	}, [verifyPhoneState])
 
-	useEffect(() => {
-		if (isVerifiedPhone) setIsModalVisible(false)
-	}, [isVerifiedPhone])
-
 	return (
 		<>
 			{(validationFields.loading || formState.loading) && (
@@ -202,13 +208,12 @@ const UserDetailsUI = (props: any) => {
 				entireModal
 			>
 				<VerifyPhone
-				phone={phoneInputData.phone}
-				verifyPhoneState={verifyPhoneState}
-				checkPhoneCodeState={checkPhoneCodeState}
-				handleCheckPhoneCode={handleCheckPhoneCode}
-				setCheckPhoneCodeState={setCheckPhoneCodeState}
-				handleVerifyCodeClick={handleVerifyCodeClick}
-				onClose={() => setIsModalVisible(false)}
+					phone={phoneInputData.phone}
+					verifyPhoneState={verifyPhoneState}
+					checkPhoneCodeState={checkPhoneCodeState}
+					handleCheckPhoneCode={handleSendPhoneCode}
+					handleVerifyCodeClick={handleVerifyCodeClick}
+					onClose={() => setIsModalVisible(false)}
 				/>
 			</OModal>
 			<Spinner visible={verifyPhoneState?.loading} />

package/themes/original/src/components/UserFormDetails/index.tsx

@@ -26,7 +26,6 @@ export const UserFormDetailsUI = (props: any) => {
 		phoneUpdate,
 		hideUpdateButton,
 		setWillVerifyOtpState,
-		isVerifiedPhone,
 		handleChangePromotions,
 	} = props;
 
@@ -76,6 +75,7 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const [{ user }] = useSession();
 	const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
+  const [isChanged, setIsChanged] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -153,9 +153,6 @@ export const UserFormDetailsUI = (props: any) => {
 				);
 				return;
 			}
-			if (formState?.changes?.cellphone && !isVerifiedPhone) {
-				showToast(ToastType.Error, t('VERIFY_ERROR_PHONE_NUMBER', 'The Phone Number field is not verified'))
-			}
 			let changes = null;
 			if (user?.cellphone && !userPhoneNumber) {
 				changes = {
@@ -169,6 +166,7 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const handleChangePhoneNumber = (number: any) => {
 		setPhoneInputData(number);
+		setIsChanged(true)
 		let phoneNumber = {
 			country_phone_code: {
 				name: 'country_phone_code',
@@ -228,11 +226,16 @@ export const UserFormDetailsUI = (props: any) => {
 	}, [user, isEdit]);
 
 	useEffect(() => {
-		if (!phoneInputData.error && phoneInputData?.phone?.country_phone_code && phoneInputData?.phone?.cellphone) {
+		if (!phoneInputData.error &&
+			phoneInputData?.phone?.country_phone_code &&
+			phoneInputData?.phone?.cellphone &&
+			configs?.verification_phone_required?.value === '1' &&
+			formState?.changes?.cellphone &&
+			isChanged) {
 			setWillVerifyOtpState?.(true)
 		}
-	}, [phoneInputData])
-
+	}, [phoneInputData, configs?.verification_phone_required?.value, isChanged])
+	
 	return (
 		<>
 			<UDForm>

package/themes/original/src/components/UserProfileForm/index.tsx

@@ -35,12 +35,9 @@ const ProfileUI = (props: ProfileParams) => {
 		cleanFormState,
 		handleChangeInput,
 		handleButtonUpdateClick,
-		checkPhoneCodeState,
 		handleSendVerifyCode,
-		handleCheckPhoneCode,
 		verifyPhoneState,
-		isVerifiedPhone,
-		setCheckPhoneCodeState
+		setFormState
 	} = props;
 
 	const theme = useTheme();
@@ -73,6 +70,7 @@ const ProfileUI = (props: ProfileParams) => {
 	const { handleSubmit, errors, setValue, control } = useForm();
 	const [isModalVisible, setIsModalVisible] = useState(false);
 	const [willVerifyOtpState, setWillVerifyOtpState] = useState(false);
+	const [checkPhoneCodeState, setCheckPhoneCodeState] = useState({ loading: false, result: { error: false } })
 
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
@@ -272,9 +270,17 @@ const ProfileUI = (props: ProfileParams) => {
 		}
 	}, [verifyPhoneState])
 
-	useEffect(() => {
-		if (isVerifiedPhone) setIsModalVisible(false)
-	}, [isVerifiedPhone])
+	const handleSendPhoneCode = (values: any) => {
+    setWillVerifyOtpState(false)
+		setIsModalVisible(false)
+    setFormState({
+      ...formState,
+      changes: {
+        ...formState?.changes,
+        verification_code: values?.code
+      }
+    })
+  }
 
 	return (
 		<>
@@ -331,8 +337,7 @@ const ProfileUI = (props: ProfileParams) => {
 					phone={phoneInputData.phone}
 					verifyPhoneState={verifyPhoneState}
 					checkPhoneCodeState={checkPhoneCodeState}
-					handleCheckPhoneCode={handleCheckPhoneCode}
-					setCheckPhoneCodeState={setCheckPhoneCodeState}
+					handleCheckPhoneCode={handleSendPhoneCode}
 					handleVerifyCodeClick={handleVerifyCodeClick}
 					onClose={() => setIsModalVisible(false)}
 				/>