ordering-ui-react-native 0.22.33 → 0.22.34-release

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

@@ -35,10 +35,17 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		disabled,
 		setIsScrollAvailable,
 		image,
-		enableIntersection
+		enableIntersection,
+		usePizzaValidation,
+		pizzaState
 	} = props
 
-	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+	const disableIncrement =
+		option?.with_half_option
+			? pizzaState?.[`option:${option?.id}`]?.value === option?.max
+			: option?.limit_suboptions_by_max
+				? (balance === option?.max || state.quantity === suboption.max)
+				: state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 
 	const theme = useTheme();
@@ -65,8 +72,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const handleSuboptionClick = () => {
 		toggleSelect()
 		setIsDirty(true)
+		const minMaxValidation = option?.with_half_option ? usePizzaValidation : (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1))
 
-		if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1)) {
+		if (!state.selected && minMaxValidation) {
 			setShowMessage(true)
 		}
 	}
@@ -86,7 +94,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		if (!(balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1))) {
 			setShowMessage(false)
 		}
-	}, [balance])
+	}, [balance, pizzaState?.[`option:${option?.id}`]?.value])
 
 	return (
 		<InView onChange={(inView: boolean) => handleChangeInterSection(inView)} triggerOnce={true}>
@@ -122,7 +130,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 							{suboption?.name}
 						</OText>
 					</IconControl>
-					{option?.allow_suboption_quantity && state?.selected && (
+					{!(option?.max === 1 && option?.min === 1) && option?.allow_suboption_quantity && state?.selected && (
 						<QuantityControl>
 							<>
 								<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
@@ -135,11 +143,11 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								<OText size={12}>
 									{state.quantity}
 								</OText>
-								<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
+								<Checkbox disabled={disabled || disableIncrement || usePizzaValidation} onPress={increment}>
 									<IconAntDesign
 										name='pluscircleo'
 										size={iconsSize}
-										color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
+										color={disableIncrement || disabled || usePizzaValidation ? theme.colors.disabled : theme.colors.primary}
 									/>
 								</Checkbox>
 							</>
@@ -157,7 +165,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 										style={styles.inverse}
 									/>
 								</Circle>
-								<Circle disabled={disabled} onPress={() => changePosition('whole')}>
+								<Circle disabled={disabled || (pizzaState?.[`option:${option?.id}`]?.value === option?.max)} onPress={() => changePosition('whole')}>
 									<OIcon
 										src={theme.images.general.half_f}
 										color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}

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

@@ -233,7 +233,7 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
           <CalendarWrapper>
             {(timeList?.length > 0 && isEnabled) ? (
               <SelectDropdown
-                ref={dropdownRef} 
+                ref={dropdownRef}
                 data={timeList}
                 onSelect={(selectedItem, index) => {
                   console.log(selectedItem.value)
@@ -244,7 +244,7 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
                 rowTextForSelection={(item, index) => {
                   return item.text
                 }}
-                buttonStyle={{borderRadius: 7.6, ...styles.selectOption}}
+                buttonStyle={{ borderRadius: 7.6, ...styles.selectOption }}
                 buttonTextStyle={{
                   color: theme.colors.disabled,
                   fontSize: 14,
@@ -267,7 +267,7 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
                 }}
                 renderCustomizedRowChild={(item, index) => {
                   return (
-                    <Text style={[styles.dropDownRow, { color: isBusyTime(professional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                    <Text style={[styles.dropDownRow, { color: isBusyTime(professional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary }]}>
                       {item.text}
                     </Text>
                   )
@@ -326,11 +326,10 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
       </ScheduleWrapper>
       <ButtonWrapper>
         <OButton
-          bgColor={theme.colors.primary}
           onClick={() => handleSelectProfessional()}
           text={t('BOOK', 'Book')}
           style={styles.buttonStyle}
-          textStyle={{ fontSize: 14, color: theme.colors.white }}
+          textStyle={{ fontSize: 14 }}
         />
       </ButtonWrapper>
     </Container>

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

@@ -171,7 +171,7 @@ const PromotionsUI = (props: PromotionParams) => {
                 onClick={() => handleClickOffer(offer)}
                 text={t('VIEW', 'View')}
                 style={styles.buttonStyle}
-                textStyle={{ fontSize: 14, color: '#fff', flexWrap: 'nowrap' }}
+                textStyle={{ fontSize: 14, flexWrap: 'nowrap' }}
               />
             </WrapperSingleOffer>
           ))}
@@ -182,7 +182,7 @@ const PromotionsUI = (props: PromotionParams) => {
           title={``}
           onClose={() => setOpenModal(false)}
         >
-          <View style={{ padding: 20 }}>
+          <ScrollView style={{ padding: 20 }}>
             <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
               {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
             </OText>
@@ -210,10 +210,7 @@ const PromotionsUI = (props: PromotionParams) => {
             <OText style={{ marginTop: 10, marginBottom: 10 }}>
               {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
             </OText>
-            <ScrollView
-              showsVerticalScrollIndicator={false}
-              style={{ height: '68%' }}
-            >
+            <View style={{ marginBottom: 70 }}>
               {offerSelected?.businesses?.map((business: any) => {
                 return (
                   <SingleBusinessOffer key={business.id}>
@@ -238,14 +235,14 @@ const PromotionsUI = (props: PromotionParams) => {
                         onClick={() => handleBusinessClick(business)}
                         text={t('GO_TO_BUSINESSS', 'Go to business')}
                         style={styles.modalButtonStyle}
-                        textStyle={{ fontSize: 10, color: '#fff' }}
+                        textStyle={{ fontSize: 10 }}
                       />
                     </BusinessInfo>
                   </SingleBusinessOffer>
                 )
               })}
-            </ScrollView>
-          </View>
+            </View>
+          </ScrollView>
         </OModal>
       </PromotionsContainer>
     </Container>

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

@@ -293,7 +293,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
       <FloatingBottomContainer>
         <ActionContainer>
           <OButton
-            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            textStyle={{ paddingRight: 10 }}
             text={t('SEND_REVIEW', 'Send Review')}
             style={{ borderRadius: 8 }}
             imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}

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

@@ -227,7 +227,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             </View>
           ) : (
             <MultiLogosContainer>
-              {order?.logo?.map((logo : string, i : number) => (
+              {order?.logo?.map((logo: string, i: number) => (
                 <React.Fragment key={logo}>
                   <View style={styles.logoWrapper}>
                     <OIcon
@@ -333,7 +333,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
           </SkipButton>
           <OButton
-            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            textStyle={{ paddingRight: 10 }}
             text={t('CONTINUE', 'Continue')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}

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

@@ -104,7 +104,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
             <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
           </SkipButton>
           <OButton
-            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            textStyle={{ paddingRight: 10 }}
             text={order?.driver && !order?.user_review ? t('CONTINUE', 'Continue') : t('SEND_REVIEW', 'Send Review')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}

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

@@ -90,7 +90,7 @@ export const ReviewTrigger = (props: any) => {
             </View>
           ) : (
             <MultiLogosContainer>
-              {order?.logo?.map((logo : string, i : number) => (
+              {order?.logo?.map((logo: string, i: number) => (
                 <React.Fragment key={logo}>
                   <View style={styles.logoWrapper}>
                     <OIcon
@@ -122,7 +122,7 @@ export const ReviewTrigger = (props: any) => {
       <FloatingBottomContainer borderTopWidth={0} borderRadius={10}>
         <ActionContainer>
           <OButton
-            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            textStyle={{ paddingRight: 10 }}
             text={t('GOTO_REVIEW', 'Go to review')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}

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

@@ -57,9 +57,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const [{ optimizeImage, parsePrice, parseDate }] = useUtils()
   const { top } = useSafeAreaInsets()
   const [{ configs }] = useConfig()
-	const [orderState] = useOrder()
-	const [{ auth }] = useSession()
-	const { product, loading, error } = productObject;
+  const [orderState] = useOrder()
+  const [{ auth }] = useSession()
+  const { product, loading, error } = productObject;
 
   const [selectDate, setSelectedDate] = useState<any>(new Date())
   const [timeList, setTimeList] = useState<any>([])
@@ -77,8 +77,8 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const styles = StyleSheet.create({
     photoStyle: {
       width: 45,
-			height: 45,
-			borderRadius: 7.6
+      height: 45,
+      borderRadius: 7.6
     },
     buttonStyle: {
       borderRadius: 7.6,
@@ -144,7 +144,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
         moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf()) ||
         (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).add(duration, 'minutes').valueOf() &&
-        moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
+          moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
   }
@@ -166,9 +166,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }
 
   const handleUpdateGuest = () => {
-		const guestToken = uuid.v4()
-		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
-	}
+    const guestToken = uuid.v4()
+    if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+  }
 
   const customDayHeaderStylesCallback = () => {
     return {
@@ -193,11 +193,11 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }
 
   const handleRedirectLogin = () => {
-		navigation && navigation.navigate('Login', {
-			store_slug: props.businessSlug
-		});
+    navigation && navigation.navigate('Login', {
+      store_slug: props.businessSlug
+    });
     onClose && onClose()
-	};
+  };
 
   const getTimes = (curdate: any, menu: any) => {
     validateSelectedDate(curdate, menu)
@@ -290,7 +290,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     setSelectedDate(moment.utc(productCart?.calendar_event?.start).local())
     setTimeSelected(moment.utc(productCart?.calendar_event?.start).local().format('HH:mm'))
   }, [productCart])
-  
+
   return (
     <>
       {loading && !error && (
@@ -450,7 +450,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               <CalendarWrapper>
                 {(timeList?.length > 0 && isEnabled) ? (
                   <SelectDropdown
-                    ref={dropdownRef} 
+                    ref={dropdownRef}
                     defaultValueByIndex={timeList.findIndex((item: any) => item.value === timeSelected)}
                     data={timeList}
                     onSelect={(selectedItem, index) => {
@@ -462,7 +462,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                     rowTextForSelection={(item, index) => {
                       return item.text
                     }}
-                    buttonStyle={{borderRadius: 7.6, ...styles.selectOption}}
+                    buttonStyle={{ borderRadius: 7.6, ...styles.selectOption }}
                     buttonTextStyle={{
                       color: theme.colors.disabled,
                       fontSize: 14,
@@ -485,7 +485,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                     }}
                     renderCustomizedRowChild={(item, index) => {
                       return (
-                        <Text style={[styles.dropDownRow, { color: isBusyTime(currentProfessional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                        <Text style={[styles.dropDownRow, { color: isBusyTime(currentProfessional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary }]}>
                           {item.text}
                         </Text>
                       )
@@ -553,7 +553,6 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               auth &&
               orderState.options?.address_id)) && (
                 <OButton
-                  bgColor={theme.colors.primary}
                   onClick={() => handleSaveService()}
                   text={orderState.loading
                     ? t('LOADING', 'Loading')
@@ -562,7 +561,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       : t('BOOK', 'Book'))}
                   style={styles.buttonStyle}
                   isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected || isBusyTime(currentProfessional, dateSelected)}
-                  textStyle={{ fontSize: 14, color: theme.colors.white }}
+                  textStyle={{ fontSize: 14 }}
                 />
               )}
             {auth &&
@@ -577,45 +576,44 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               ) : (
                 <OButton onClick={() => addressRedirect()} />
               ))}
-              {!auth && (
-                <OButton
-                  isDisabled={isSoldOut || maxProductQuantity <= 0}
-                  onClick={() => handleRedirectLogin()}
-                  text={
-                    isSoldOut || maxProductQuantity <= 0
-                      ? t('SOLD_OUT', 'Sold out')
-                      : t('LOGIN_SIGNUP', 'Login / Sign Up')
-                  }
-                  imgRightSrc=""
-                  textStyle={{ color: theme.colors.primary, fontSize: 14 }}
-                  style={{
-                    height: 44,
-                    borderColor: theme.colors.primary,
-                    backgroundColor: theme.colors.white,
-                  }}
-                />
-              )}
-              {!auth && guestCheckoutEnabled && orderTypeEnabled &&  (
-                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
-                  {actionStatus?.loading ? (
-                    <Placeholder Animation={Fade}>
-                      <PlaceholderLine width={60} height={20} />
-                    </Placeholder>
-                  ) : (
-                    <OText color={theme.colors.primary} size={13}>{t('AS_GUEST_USER', 'As guest user')}</OText>
-                  )}
-                </TouchableOpacity>
-              )}
+            {!auth && (
+              <OButton
+                isDisabled={isSoldOut || maxProductQuantity <= 0}
+                onClick={() => handleRedirectLogin()}
+                text={
+                  isSoldOut || maxProductQuantity <= 0
+                    ? t('SOLD_OUT', 'Sold out')
+                    : t('LOGIN_SIGNUP', 'Login / Sign Up')
+                }
+                imgRightSrc=""
+                textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+                style={{
+                  height: 44,
+                  backgroundColor: theme.colors.white,
+                }}
+              />
+            )}
+            {!auth && guestCheckoutEnabled && orderTypeEnabled && (
+              <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+                {actionStatus?.loading ? (
+                  <Placeholder Animation={Fade}>
+                    <PlaceholderLine width={60} height={20} />
+                  </Placeholder>
+                ) : (
+                  <OText color={theme.colors.primary} size={13}>{t('AS_GUEST_USER', 'As guest user')}</OText>
+                )}
+              </TouchableOpacity>
+            )}
           </ButtonWrapper>
         </Container>
       )}
 
       <OModal
-				open={isOpen}
-				onClose={() => setIsOpen(false)}
-				entireModal
-			>
-				<ScrollView contentContainerStyle={styles.professionalList}>
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        entireModal
+      >
+        <ScrollView contentContainerStyle={styles.professionalList}>
           <View style={{ paddingVertical: 11 }}>
             <OText
               size={14}
@@ -671,7 +669,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
             </TouchableOpacity>
           ))}
         </ScrollView>
-			</OModal>
+      </OModal>
     </>
   )
 }

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

@@ -111,14 +111,14 @@ export const SessionsUI = (props: SessionsParams) => {
                 <OButton
                   text={t('DELETE_ALL_SESSIONS', 'Delete all sessions')}
                   isDisabled={actionState.loading}
-                  textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                  textStyle={{ fontSize: 14 }}
                   onClick={() => onDeleteAllSessions(false, true)}
                   style={{ borderRadius: 7.6, marginTop: 30 }}
                 />
                 <OButton
                   text={t('DELETE_ALL_SESSIONS_EXCEPT_CURRENT', 'Delete all sessions except current')}
                   isDisabled={actionState.loading}
-                  textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                  textStyle={{ fontSize: 14 }}
                   onClick={() => onDeleteAllSessions(false, false)}
                   style={{ borderRadius: 7.6, marginTop: 20 }}
                 />
@@ -136,7 +136,7 @@ export const SessionsUI = (props: SessionsParams) => {
           <OButton
             text={t('ACTIVE_SESSIONS', 'Active sessions')}
             isDisabled={actionState.loading}
-            textStyle={{ color: theme.colors.white, fontSize: 14 }}
+            textStyle={{ fontSize: 14 }}
             onClick={() => onDeleteAllSessions(true, false)}
             style={{ borderRadius: 7.6, marginTop: 20 }}
           />

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity, Modal } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -32,11 +32,9 @@ import {
 } from '../LoginForm/styles';
 
 import NavBar from '../NavBar';
-import { VerifyPhone } from '../VerifyPhone';
 
 import Alert from '../../../../../src/providers/AlertProvider'
 import { OText, OButton, OInput } from '../shared';
-import { OModal } from '../../../../../src/components/shared';
 import { SignupParams } from '../../types';
 import { sortInputFields } from '../../utils';
 import { GoogleLogin } from '../GoogleLogin';
@@ -85,7 +83,8 @@ const SignupFormUI = (props: SignupParams) => {
 		useSignUpFullDetails,
 		useSignUpOtpEmail,
 		useSignUpOtpCellphone,
-		isGuest
+		isGuest,
+		setCellphoneStartZero
 	} = props;
 
 	const theme = useTheme();
@@ -141,6 +140,8 @@ const SignupFormUI = (props: SignupParams) => {
 	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 	const [tabLayouts, setTabLayouts] = useState<any>({})
+	const [isCheckingCode, setCheckingCode] = useState(false)
+	const [otpError, setOtpError] = useState(null)
 
 	const tabsRef = useRef<any>(null)
 	const nameRef = useRef<any>(null);
@@ -155,7 +156,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
 	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled)
 
 	const closeAlert = () => {
 		setAlertState({
@@ -366,6 +367,19 @@ const SignupFormUI = (props: SignupParams) => {
 		handleReCaptcha && handleReCaptcha({ code: token, version: recaptchaConfig?.version })
 	}
 
+	const handleChangePhoneNumber = (number : any, rawNumber: any) => {
+		setPhoneInputData({
+			...phoneInputData,
+			...number,
+			phone: {
+				...phoneInputData.phone,
+				...number.phone,
+				country_code: phoneInputData.phone.country_code
+			}
+		})
+		setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
+	}
+
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
 			if (configs?.security_recaptcha_type?.value === 'v3' &&
@@ -467,9 +481,16 @@ const SignupFormUI = (props: SignupParams) => {
 
 	useEffect(() => {
 		if (checkPhoneCodeState?.result?.error) {
-			setAlertState({
+			const titleText = (
+				typeof checkPhoneCodeState?.result?.result === 'string'
+					? checkPhoneCodeState?.result?.result
+					: checkPhoneCodeState?.result?.result[0].toString()
+			) || t('ERROR', 'Error')
+			setCheckingCode(false)
+			setOtpError(titleText)
+			checkPhoneCodeState?.generate && setAlertState({
 				open: true,
-				title: (typeof checkPhoneCodeState?.result?.result === 'string' ? checkPhoneCodeState?.result?.result : checkPhoneCodeState?.result?.result[0].toString()) || t('ERROR', 'Error'),
+				title: titleText,
 				content: []
 			})
 		}
@@ -650,15 +671,7 @@ const SignupFormUI = (props: SignupParams) => {
 								<View style={{ marginBottom: 25 }}>
 									<PhoneInputNumber
 										data={phoneInputData}
-										handleData={(val: any) => setPhoneInputData({
-											...phoneInputData,
-											...val,
-											phone: {
-												...phoneInputData.phone,
-												...val.phone,
-												country_code: phoneInputData.phone.country_code
-											}
-										})}
+										handleData={handleChangePhoneNumber}
 										forwardRef={phoneRef}
 										changeCountry={(val: any) => setPhoneInputData({
 											...phoneInputData,
@@ -789,9 +802,9 @@ const SignupFormUI = (props: SignupParams) => {
 										<OButton
 											imgRightSrc={null}
 											text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
-											bgColor='#FFF'
-											borderColor='#FFF'
-											style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: '#FFF' }}
+											bgColor={theme.colors.white}
+											borderColor={theme.colors.white}
+											style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: theme.colors.white }}
 											textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
 											onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
 										/>
@@ -835,6 +848,7 @@ const SignupFormUI = (props: SignupParams) => {
 														/>
 													)
 												}
+												autoCapitalize='none'
 												value={value}
 												onChange={(val: any) => onChange(val)}
 												returnKeyType="done"
@@ -876,9 +890,7 @@ const SignupFormUI = (props: SignupParams) => {
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={t('GET_VERIFY_CODE', 'Get Verify Code')}
-							borderColor={theme.colors.primary}
 							imgRightSrc={null}
-							textStyle={{ color: 'white' }}
 							isLoading={isLoadingVerifyModal}
 							indicatorColor={theme.colors.white}
 							style={{ borderRadius: 7.6, marginTop: 6 }}
@@ -887,9 +899,6 @@ const SignupFormUI = (props: SignupParams) => {
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={signupButtonText}
-							bgColor={theme.colors.primary}
-							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white' }}
 							imgRightSrc={null}
 							isDisabled={formState.loading || validationFields.loading}
 							style={{ borderRadius: 7.6, marginTop: 6, shadowOpacity: 0 }}
@@ -971,13 +980,16 @@ const SignupFormUI = (props: SignupParams) => {
 					)
 				)}
 			</FormSide>
-			<OModal
-				open={willVerifyOtpState}
-				onClose={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
-				entireModal
-				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			<Modal
+				visible={willVerifyOtpState}
+				onDismiss={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
+				animationType='slide'
 			>
 				<Otp
+					isCheckingCode={isCheckingCode}
+					setCheckingCode={setCheckingCode}
+					otpError={otpError}
+					setOtpError={setOtpError}
 					pinCount={numOtpInputs || 6}
 					willVerifyOtpState={willVerifyOtpState || false}
 					setWillVerifyOtpState={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
@@ -985,7 +997,7 @@ const SignupFormUI = (props: SignupParams) => {
 					onSubmit={onSubmit}
 					setAlertState={setAlertState}
 				/>
-			</OModal>
+			</Modal>
 			<Spinner
 				visible={formState.loading || validationFields.loading || isFBLoading}
 			/>