ordering-ui-react-native 0.16.34 → 0.16.37

package/package.json

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

package/themes/business/index.tsx

@@ -39,6 +39,8 @@ import { VerifyPhone } from './src/components/VerifyPhone';
 import { DriverMap } from './src/components/DriverMap';
 import { MapViewUI as MapView } from './src/components/MapView'
 import { NewOrderNotification } from './src/components/NewOrderNotification';
+import { DriverSchedule } from './src/components/DriverSchedule';
+import { ScheduleBlocked } from './src/components/ScheduleBlocked';
 //OComponents
 import {
   OText,
@@ -106,6 +108,8 @@ export {
   UserFormDetailsUI,
   UserProfileForm,
   VerifyPhone,
+  DriverSchedule,
+  ScheduleBlocked,
   //OComponents
   OAlert,
   OButton,

package/themes/business/src/components/DriverSchedule/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { View } from 'react-native'
+import { OText } from '../shared'
+import { useLanguage } from 'ordering-components/native'
+import { DayContainer } from './styles'
+import { useTheme } from 'styled-components/native'
+export const DriverSchedule = (props : any) => {
+    const { schedule } = props
+    const [, t] = useLanguage()
+    const theme = useTheme()
+
+    const daysOfWeek = [
+        t('SUNDAY_ABBREVIATION', 'Sun'),
+        t('MONDAY_ABBREVIATION', 'Mon'),
+        t('TUESDAY_ABBREVIATION', 'Tues'),
+        t('WEDNESDAY_ABBREVIATION', 'Wed'),
+        t('THURSDAY_ABBREVIATION', 'Thur'),
+        t('FRIDAY_ABBREVIATION', 'Fri'),
+        t('SATURDAY_ABBREVIATION', 'Sat')
+    ]
+
+    const scheduleFormatted = ({ hour, minute }: any) => {
+        const checkTime = (val: number) => val < 10 ? `0${val}` : val
+        return `${checkTime(hour)}:${checkTime(minute)}`
+    }
+
+    return (
+        <View >
+            <OText size={24} style={{paddingLeft: 30}}>
+                {t('SCHEDULE', 'Schedule')}
+            </OText>
+            <View style={{padding: 30}}>
+                {schedule.map((item: any, i: number) => (
+                    <DayContainer key={daysOfWeek[i]}>
+                        <OText style={{width: '20%'}} size={22} weight={700}>{daysOfWeek[i]}</OText>
+                        <View style={{width: '80%', alignItems: 'center'}}>
+                            <>
+                            {item?.enabled ? (
+                                <>
+                                    {item?.lapses.map((lapse: any, i: number) => (
+                                        <OText size={18} style={{marginTop: 3, marginBottom: 20}} key={`${daysOfWeek[i]}_${i}`}>{scheduleFormatted(lapse.open)} - {scheduleFormatted(lapse.close)}</OText>
+                                    ))}
+                                </>
+                            ) : (
+                                <OText size={18} style={{marginTop: 3, marginBottom: 10}} color={theme.colors.red}>{t('NOT_AVAILABLE', 'Not available')}</OText>
+                            )}
+                            </>
+                        </View>
+                    </DayContainer>
+                ))}
+            </View>
+        </View>
+    )
+}

package/themes/business/src/components/DriverSchedule/styles.tsx

@@ -0,0 +1,6 @@
+import styled from "styled-components/native";
+
+export const DayContainer = styled.View`
+    flex-direction: row;
+    width: 100%;
+`

package/themes/business/src/components/ScheduleBlocked/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Dimensions, View } from 'react-native'
+import { OButton, OIcon, OText } from '../shared'
+import { useLanguage, useSession } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+
+export const ScheduleBlocked = (props : any) => {
+    const { nextSchedule } = props
+    const [, t] = useLanguage()
+    const [, {logout}] = useSession()
+    const theme = useTheme()
+    const deviceWidth = Dimensions.get('screen').width
+
+    const daysOfWeek = [
+        t('MONDAY', 'Monday'),
+        t('TUESDAY', 'Tuesday'),
+        t('WEDNESDAY', 'Wednesday'),
+        t('THURSDAY', 'Thurday'),
+        t('FRIDAY', 'Friday'),
+        t('SATURDAY', 'Saturday'),
+        t('SUNDAY', 'Sunday')
+    ]
+
+    const scheduleFormatted = ({ hour, minute }: any) => {
+        const checkTime = (val: number) => val < 10 ? `0${val}` : val
+        return `${checkTime(hour)}:${checkTime(minute)}`
+    }
+
+    const goBack = () => {
+        logout()
+    }
+
+    return (
+        <View style={{ alignItems: 'center', padding: 40 }}>
+            <OText size={20}>{t('YOU_CANT_LOGIN', 'You can\'t login')}</OText>
+            <OIcon
+                src={theme.images?.general?.deliveryWaiting}
+                width={(deviceWidth - 80) * 0.9}
+                height={(deviceWidth - 80) * 0.8}
+            />
+            <OText>{t('OUTSIDE_ESTABLISHED_SCHEDULE', 'You are outside the established schedule')}</OText>
+            <View style={{ flexDirection: 'row', marginBottom: 20 }}>
+                <OText color={theme.colors.primary}>{t('NEXT_TIME', 'Next time')}: </OText>
+                <OText>{daysOfWeek[nextSchedule?.day - 1]} {scheduleFormatted(nextSchedule?.schedule?.open)}</OText>
+            </View>
+            <OButton
+                text={t('GO_BACK', 'Go back')}
+                textStyle={{ color: theme.colors.white }}
+                onClick={goBack}
+            />
+        </View>
+    )
+}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
+import { View, StyleSheet, ScrollView, ActivityIndicator, Pressable } from 'react-native';
 import { useForm } from 'react-hook-form';
 import { launchImageLibrary } from 'react-native-image-picker';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -22,6 +22,7 @@ import {
 import { LogoutButton } from '../LogoutButton';
 import { LanguageSelector } from '../LanguageSelector';
 import { UserFormDetailsUI } from '../UserFormDetails';
+import { DriverSchedule } from '../DriverSchedule'
 import ToggleSwitch from 'toggle-switch-react-native';
 import { UDWrapper } from '../UserFormDetails/styles';
 import {
@@ -30,11 +31,12 @@ import {
   OText,
   OButton,
   OInput,
+  OModal,
 } from '../../components/shared';
 import { sortInputFields, getTraduction } from '../../utils';
 import { ProfileParams } from '../../types';
 import { NotFoundSource } from '../NotFoundSource';
-
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 const ProfileUI = (props: ProfileParams) => {
   const {
     navigation,
@@ -66,6 +68,7 @@ const ProfileUI = (props: ProfileParams) => {
   const [phoneUpdate, setPhoneUpdate] = useState(false);
   const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
   const [phoneToShow, setPhoneToShow] = useState('');
+  const [openModal, setOpenModal] = useState(false)
 
   useEffect(() => {
     if (phoneInputData.phone.cellphone) {
@@ -459,7 +462,6 @@ const ProfileUI = (props: ProfileParams) => {
               />
             </View>
           )}
-
           {!validationFields.loading && !isEdit && (
             <EditButton>
               <OButton
@@ -474,12 +476,32 @@ const ProfileUI = (props: ProfileParams) => {
               />
             </EditButton>
           )}
-
+          {!!user?.schedule && (
+            <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <OText size={16}>{t('SCHEDULE', 'Schedule')}</OText>
+                <AntDesignIcon size={18} name='right' />
+              </View>
+              <View style={{
+                borderBottomColor: theme.colors.tabBar,
+                borderBottomWidth: 1,
+                marginTop: 10
+              }} />
+            </Pressable>
+          )}
           <Actions>
             <LanguageSelector />
 
             <LogoutButton />
           </Actions>
+          <OModal
+            open={openModal}
+            onClose={() => setOpenModal(false)}
+            entireModal
+            hideIcons
+          >
+            <DriverSchedule schedule={user?.schedule} />
+          </OModal>
         </ScrollView>
       )}
     </>

package/themes/business/src/components/shared/OModal.tsx

@@ -26,6 +26,7 @@ interface Props {
   isNotDecoration?: boolean;
   styleCloseButton?: any;
   order?: any;
+  hideIcons?: boolean
 }
 
 const OModal = (props: Props): React.ReactElement => {
@@ -47,6 +48,7 @@ const OModal = (props: Props): React.ReactElement => {
     style,
     styleCloseButton,
     order,
+    hideIcons
   } = props;
 
   const theme = useTheme();
@@ -70,8 +72,8 @@ const OModal = (props: Props): React.ReactElement => {
       alignItems: 'center',
       paddingHorizontal: 30,
       paddingTop: 30,
-      paddingBottom: 25,
-      borderBottomWidth: 2,
+      paddingBottom: !hideIcons ? 25 : 15,
+      borderBottomWidth: !hideIcons ? 2 : 0,
       borderBottomColor: '#e6e6e6',
     },
     titleGroups: {
@@ -218,50 +220,51 @@ const OModal = (props: Props): React.ReactElement => {
                     {title}
                   </OText>
                 </View>
+                {!hideIcons && (
+                  <View style={styles.titleGroups}>
+                    <View style={styles.shadow}>
+                      {order?.business?.logo ? (
+                        <OIcon
+                          url={optimizeImage(
+                            order?.business?.logo,
+                            'h_300,c_limit',
+                          )}
+                          style={styles.titleIcons}
+                        />
+                      ) : (
+                        <OIcon
+                          src={theme.images.dummies.businessLogo}
+                          style={styles.titleIcons}
+                        />
+                      )}
+                    </View>
 
-                <View style={styles.titleGroups}>
-                  <View style={styles.shadow}>
-                    {order?.business?.logo ? (
+                    <View style={styles.shadow}>
                       <OIcon
                         url={optimizeImage(
-                          order?.business?.logo,
+                          order?.customer?.photo ||
+                          theme?.images?.dummies?.customerPhoto,
                           'h_300,c_limit',
                         )}
                         style={styles.titleIcons}
                       />
-                    ) : (
-                      <OIcon
-                        src={theme.images.dummies.businessLogo}
-                        style={styles.titleIcons}
-                      />
-                    )}
-                  </View>
+                    </View>
 
-                  <View style={styles.shadow}>
-                    <OIcon
-                      url={optimizeImage(
-                        order?.customer?.photo ||
-                          theme?.images?.dummies?.customerPhoto,
-                        'h_300,c_limit',
-                      )}
-                      style={styles.titleIcons}
-                    />
+                    {order?.driver && (
+                      <View style={styles.shadow}>
+                        <OIcon
+                          url={
+                            optimizeImage(
+                              order?.driver?.photo,
+                              'h_300,c_limit',
+                            ) || theme?.images?.dummies?.driverPhoto
+                          }
+                          style={styles.titleIcons}
+                        />
+                      </View>
+                    )}
                   </View>
-
-                  {order?.driver && (
-                    <View style={styles.shadow}>
-                      <OIcon
-                        url={
-                          optimizeImage(
-                            order?.driver?.photo,
-                            'h_300,c_limit',
-                          ) || theme?.images?.dummies?.driverPhoto
-                        }
-                        style={styles.titleIcons}
-                      />
-                    </View>
-                  )}
-                </View>
+                )}
               </View>
             )}
             {children}

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

@@ -114,6 +114,10 @@ const CheckoutUI = (props: any) => {
 			position: 'absolute',
 			fontSize: 20
 		},
+		detailWrapper: {
+			paddingHorizontal: 40,
+			width: '100%'
+		},
 		wrapperNavbar: Platform.OS === 'ios'
 			? { paddingVertical: 0, paddingHorizontal: 40 }
 			: { paddingVertical: 20, paddingHorizontal: 40 }
@@ -136,6 +140,8 @@ const CheckoutUI = (props: any) => {
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
+	const [isOpen, setIsOpen] = useState(false)
+  const [requiredFields, setRequiredFields] = useState<any>([])
 
 	const placeSpotTypes = [3, 4]
 	const businessConfigs = businessDetails?.business?.configs ?? []
@@ -173,10 +179,14 @@ const CheckoutUI = (props: any) => {
 	}
 
 	const handlePlaceOrder = (confirmPayment) => {
-		if (!userErrors.length) {
+		if (!userErrors.length && !requiredFields?.length) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
 		}
+		if (requiredFields?.length) {
+      setIsOpen(true)
+      return
+    }
 		let stringError = ''
 		Object.values(userErrors).map((item: any, i: number) => {
 			stringError += (i + 1) === userErrors.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
@@ -204,11 +214,12 @@ const CheckoutUI = (props: any) => {
 		setUserErrors([])
 		const errors = []
 		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
+		const _requiredFields: any = []
 
 		Object.values(validationFields?.fields?.checkout).map((field: any) => {
 			if (field?.required && !notFields.includes(field.code)) {
 				if (!user[field?.code]) {
-					errors.push(t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `The field ${field?.name} is required`))
+					_requiredFields.push(field?.code)
 				}
 			}
 		})
@@ -219,8 +230,9 @@ const CheckoutUI = (props: any) => {
 				validationFields?.fields?.checkout?.cellphone?.required) ||
 				configs?.verification_phone_required?.value === '1')
 		) {
-			errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone number is required'))
+			_requiredFields.push('cellphone')
 		}
+		setRequiredFields(_requiredFields)
 
 		if (phoneUpdate) {
 			errors.push(t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number'))
@@ -703,6 +715,28 @@ const CheckoutUI = (props: any) => {
 							onClose={() => setOpenChangeStore(false)}
 						/>
 					</OModal>
+					<OModal
+						open={isOpen}
+						onClose={() => setIsOpen(false)}
+					>
+						<View style={styles.detailWrapper}>
+							<UserDetails
+								isUserDetailsEdit
+								cartStatus={cart?.status}
+								businessId={cart?.business_id}
+								useValidationFields
+								useDefualtSessionManager
+								useSessionUser
+								isCheckout
+								isEdit
+								phoneUpdate={phoneUpdate}
+								togglePhoneUpdate={togglePhoneUpdate}
+								requiredFields={requiredFields}
+								hideUpdateButton
+								onClose={() => setIsOpen(false)}
+							/>
+						</View>
+					</OModal>
 				</ChContainer>
 			</Container>
 			{!cartState.loading && cart && cart?.status !== 2 && (

package/themes/original/src/components/LoginForm/Otp/index.tsx

@@ -15,7 +15,8 @@ export const Otp = (props: otpParams) => {
         setWillVerifyOtpState,
         onSubmit,
         handleLoginOtp,
-        setAlertState
+        setAlertState,
+        pinCount
     } = props
 
     const theme = useTheme();
@@ -65,7 +66,7 @@ export const Otp = (props: otpParams) => {
                 </OText>
                 <OTPInputView
                     style={{ width: '100%', height: 150 }}
-                    pinCount={6}
+                    pinCount={pinCount || 6}
                     codeInputFieldStyle={loginStyle.underlineStyleBase}
                     codeInputHighlightStyle={loginStyle.underlineStyleHighLighted}
                     onCodeFilled={(code: string) => handleLoginOtp(code)}

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

@@ -102,7 +102,7 @@ const LoginFormUI = (props: LoginParams) => {
 
 	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 = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
 
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
@@ -256,7 +256,7 @@ const LoginFormUI = (props: LoginParams) => {
 		})
 	}
 
-	const handleCategoryScroll = (opc : string) => {
+	const handleCategoryScroll = (opc: string) => {
 		tabsRef.current.scrollTo({
 			x: tabLayouts?.[opc]?.x - 40,
 			animated: true
@@ -351,15 +351,15 @@ const LoginFormUI = (props: LoginParams) => {
 				titleStyle={{ marginRight: 0, marginLeft: 0 }}
 			/>
 			<FormSide>
-				{((useLoginByEmail && useLoginByCellphone) || useLoginOtp) && (
+				{(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
 					<LoginWith>
 						<OTabs
-							horizontal 
+							horizontal
 							showsHorizontalScrollIndicator={false}
 							ref={tabsRef}
 						>
 							{useLoginByEmail && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeTab('email')}
 									onLayout={(event: any) => handleOnLayout(event, 'email')}
 								>
@@ -384,7 +384,7 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginByCellphone && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeTab('cellphone')}
 									onLayout={(event: any) => handleOnLayout(event, 'cellphone')}
 								>
@@ -409,7 +409,7 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpEmail && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeOtpType('email')}
 									onLayout={(event: any) => handleOnLayout(event, 'otp_email')}
 								>
@@ -434,7 +434,7 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpCellphone && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeOtpType('cellphone')}
 									onLayout={(event: any) => handleOnLayout(event, 'otp_cellphone')}
 								>
@@ -707,7 +707,7 @@ const LoginFormUI = (props: LoginParams) => {
 							<ButtonsWrapper>
 								<SocialButtons>
 									{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-										configs?.facebook_id?.value && 
+										configs?.facebook_id?.value &&
 										facebookLoginEnabled && (
 											<FacebookLogin
 												notificationState={notificationState}

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

@@ -18,10 +18,12 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { FormSide, FormInput, SocialButtons } from './styles';
+import { Otp } from '../LoginForm/Otp'
 
 import {
 	ButtonsWrapper,
 	LoginWith as SignupWith,
+	TabBtn,
 	OTab,
 	OTabs,
 	RecaptchaButton
@@ -30,7 +32,9 @@ import {
 import NavBar from '../NavBar';
 import { VerifyPhone } from '../VerifyPhone';
 
-import { OText, OButton, OInput, OModal } from '../shared';
+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';
@@ -67,7 +71,19 @@ const SignupFormUI = (props: SignupParams) => {
 		notificationState,
 		handleChangePromotions,
 		enableReCaptcha,
-		handleReCaptcha
+		handleReCaptcha,
+		generateOtpCode,
+		numOtpInputs,
+		setWillVerifyOtpState,
+		handleChangeInput,
+		willVerifyOtpState,
+		setOtpState,
+		otpState,
+		setSignUpTab,
+		signUpTab,
+		useSignUpFullDetails,
+		useSignUpOtpEmail,
+		useSignUpOtpCellphone
 	} = props;
 
 	const theme = useTheme();
@@ -107,12 +123,10 @@ const SignupFormUI = (props: SignupParams) => {
 	const { control, handleSubmit, errors, register, setValue } = useForm();
 
 	const [passwordSee, setPasswordSee] = useState(false);
+	const [otpErrMsg, setOtpErrMsg] = useState('')
 	const [formValues, setFormValues] = useState(null);
 	const [isModalVisible, setIsModalVisible] = useState(false);
 	const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
-	const [signupTab, setSignupTab] = useState(
-		useSignupByCellphone && !useSignupByEmail ? 'cellphone' : 'email',
-	);
 	const [isFBLoading, setIsFBLoading] = useState(false);
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
@@ -122,9 +136,12 @@ const SignupFormUI = (props: SignupParams) => {
 			country_code: null
 		},
 	});
+	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
 	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+	const [tabLayouts, setTabLayouts] = useState<any>({})
 
+	const tabsRef = useRef<any>(null)
 	const nameRef = useRef<any>(null);
 	const lastnameRef = useRef<any>(null);
 	const middleNameRef = useRef<any>(null);
@@ -137,7 +154,15 @@ 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 = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+
+	const closeAlert = () => {
+		setAlertState({
+			open: false,
+			title: '',
+			content: []
+		})
+	}
 
 	const handleRefs = (ref: any, code: string) => {
 		switch (code) {
@@ -163,6 +188,13 @@ const SignupFormUI = (props: SignupParams) => {
 		}
 	};
 
+	const handleOnLayout = (event: any, opc: string) => {
+		const _tabLayouts = { ...tabLayouts }
+		const categoryKey = opc
+		_tabLayouts[categoryKey] = event.nativeEvent.layout
+		setTabLayouts(_tabLayouts)
+	}
+
 	const handleFocusRef = (code: string) => {
 		switch (code) {
 			case 'name': {
@@ -206,13 +238,8 @@ const SignupFormUI = (props: SignupParams) => {
 		navigation.navigate('Home');
 	};
 
-	const handleChangeTab = (val: string) => {
-		setSignupTab(val);
-		setPasswordSee(false);
-	};
-
-	const onSubmit = (values: any) => {
-		if (phoneInputData.error) {
+	const onSubmit = (values?: any) => {
+		if (phoneInputData.error && signUpTab !== 'otpEmail') {
 			showToast(ToastType.Error, phoneInputData.error);
 			return;
 		}
@@ -221,7 +248,8 @@ const SignupFormUI = (props: SignupParams) => {
 			!phoneInputData.phone.cellphone &&
 			((validationFields?.fields?.checkout?.cellphone?.enabled &&
 				validationFields?.fields?.checkout?.cellphone?.required) ||
-				configs?.verification_phone_required?.value === '1')
+				configs?.verification_phone_required?.value === '1') &&
+			signUpTab !== 'otpEmail'
 		) {
 			showToast(
 				ToastType.Error,
@@ -232,26 +260,29 @@ const SignupFormUI = (props: SignupParams) => {
 			);
 			return;
 		}
-		if (signupTab === 'email' || !useSignupByCellphone) {
-			handleButtonSignupClick &&
-				handleButtonSignupClick({
-					...values,
-					...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && { ...phoneInputData.phone }),
-					country_code: phoneInputData.phone.country_code
-				});
-			if (
-				!formState.loading &&
-				formState.result.result &&
-				!formState.result.error
-			) {
-				handleSuccessSignup && handleSuccessSignup(formState.result.result);
-			}
-			return;
+		if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
+			generateOtpCode && generateOtpCode({
+				...values,
+				...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && { ...phoneInputData.phone }),
+				country_code: phoneInputData.phone.country_code
+			})
+			return
+		}
+		handleButtonSignupClick &&
+			handleButtonSignupClick({
+				...values,
+				...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && { ...phoneInputData.phone }),
+				country_code: phoneInputData.phone.country_code
+			});
+		if (!formState.loading && formState.result.result && !formState.result.error) {
+			handleSuccessSignup && handleSuccessSignup(formState.result.result);
 		}
-		setFormValues(values);
-		handleVerifyCodeClick(values);
 	};
 
+	const handleSingUpOtp = (value: string) => {
+		setOtpState && setOtpState(value)
+	}
+
 	const handleVerifyCodeClick = (values: any) => {
 		const formData = values || formValues;
 		handleSendVerifyCode &&
@@ -382,6 +413,14 @@ const SignupFormUI = (props: SignupParams) => {
 		})
 	}, [configs])
 
+	useEffect(() => {
+		if (checkPhoneCodeState?.result?.error) {
+			setOtpErrMsg((typeof checkPhoneCodeState?.result?.result === 'string' ? checkPhoneCodeState?.result?.result : checkPhoneCodeState?.result?.result[0]) || t('ERROR', 'Error'))
+		} else if (checkPhoneCodeState?.result?.result && checkPhoneCodeState?.result?.result?.[0] === 'VERIFICATION_CODE_WAS_SENT_TO') {
+			setOtpErrMsg(t('CODE_SENT', 'The code has been sent'))
+		}
+	}, [checkPhoneCodeState])
+
 	return (
 		<View>
 			<NavBar
@@ -395,47 +434,90 @@ const SignupFormUI = (props: SignupParams) => {
 				titleStyle={{ marginLeft: 0, marginRight: 0 }}
 			/>
 			<FormSide>
-				{useSignupByEmail &&
-					useSignupByCellphone &&
-					configs &&
-					Object.keys(configs).length > 0 &&
-					(configs?.twilio_service_enabled?.value === 'true' ||
-						configs?.twilio_service_enabled?.value === '1') && (
-						<SignupWith style={{ paddingBottom: 25 }}>
-							<OTabs>
-								{useSignupByEmail && (
-									<Pressable onPress={() => handleChangeTab('email')}>
-										<OTab>
-											<OText
-												size={18}
-												color={
-													signupTab === 'email'
-														? theme.colors.primary
-														: theme.colors.disabled
-												}>
-												{t('SIGNUP_BY_EMAIL', 'Signup by Email')}
-											</OText>
-										</OTab>
-									</Pressable>
-								)}
-								{useSignupByCellphone && (
-									<Pressable onPress={() => handleChangeTab('cellphone')}>
-										<OTab>
-											<OText
-												size={18}
-												color={
-													signupTab === 'cellphone'
-														? theme.colors.primary
-														: theme.colors.disabled
-												}>
-												{t('SIGNUP_BY_PHONE', 'Signup by Phone')}
-											</OText>
-										</OTab>
-									</Pressable>
-								)}
-							</OTabs>
-						</SignupWith>
-					)}
+				{(useSignUpFullDetails) && (
+					<SignupWith>
+						<OTabs
+							horizontal
+							showsHorizontalScrollIndicator={false}
+							ref={tabsRef}
+						>
+							<TabBtn
+								onPress={() => setSignUpTab && setSignUpTab('default')}
+								onLayout={(event: any) => handleOnLayout(event, 'default')}
+							>
+								<OTab
+									style={{
+										borderBottomColor:
+											signUpTab === 'default'
+												? theme.colors.textNormal
+												: theme.colors.border,
+									}}>
+									<OText
+										size={14}
+										color={
+											signUpTab === 'default'
+												? theme.colors.textNormal
+												: theme.colors.disabled
+										}
+										weight={signUpTab === 'default' ? 'bold' : 'normal'}>
+										{t('DEFAULT', 'Default')}
+									</OText>
+								</OTab>
+							</TabBtn>
+							{useSignUpOtpEmail && (
+								<TabBtn
+									onPress={() => setSignUpTab && setSignUpTab('otpEmail')}
+									onLayout={(event: any) => handleOnLayout(event, 'otpEmail')}
+								>
+									<OTab
+										style={{
+											borderBottomColor:
+												signUpTab === 'otpEmail'
+													? theme.colors.textNormal
+													: theme.colors.border,
+										}}>
+										<OText
+											size={14}
+											color={
+												signUpTab === 'otpEmail'
+													? theme.colors.textNormal
+													: theme.colors.disabled
+											}
+											weight={signUpTab === 'otpEmail' ? 'bold' : 'normal'}>
+											{t('BY_OTP_EMAIL', 'by Otp Email')}
+										</OText>
+									</OTab>
+								</TabBtn>
+
+							)}
+							{useSignUpOtpCellphone && (
+								<TabBtn
+									onPress={() => setSignUpTab && setSignUpTab('otpCellphone')}
+									onLayout={(event: any) => handleOnLayout(event, 'otpCellphone')}
+								>
+									<OTab
+										style={{
+											borderBottomColor:
+												signUpTab === 'otpCellphone'
+													? theme.colors.textNormal
+													: theme.colors.border,
+										}}>
+										<OText
+											size={14}
+											color={
+												signUpTab === 'otpCellphone'
+													? theme.colors.textNormal
+													: theme.colors.disabled
+											}
+											weight={signUpTab === 'otpCellphone' ? 'bold' : 'normal'}>
+											{t('BY_OTP_CELLPHONE', 'by Otp Cellphone')}
+										</OText>
+									</OTab>
+								</TabBtn>
+							)}
+						</OTabs>
+					</SignupWith>
+				)}
 				<FormInput>
 					{!(useChekoutFileds && validationFields?.loading) ? (
 						<>
@@ -445,7 +527,9 @@ const SignupFormUI = (props: SignupParams) => {
 								(field: any, i: number) =>
 									!notValidationFields.includes(field.code) &&
 									showField &&
-									showField(field.code) && (
+									showField(field.code) &&
+									(signUpTab === 'default' ||
+										(signUpTab === 'otpEmail' && field.code === 'email')) && (
 										<React.Fragment key={field.id}>
 											{errors?.[`${field.code}`] && (
 												<OText
@@ -469,7 +553,7 @@ const SignupFormUI = (props: SignupParams) => {
 														value={value}
 														onChange={(val: any) =>
 															field.code !== 'email'
-																? onChange(val)
+																? (onChange(val))
 																: handleChangeInputEmail(val, onChange)
 														}
 														autoCapitalize={
@@ -501,7 +585,7 @@ const SignupFormUI = (props: SignupParams) => {
 									),
 							)}
 
-							{!!showInputPhoneNumber && (
+							{(!!showInputPhoneNumber && (signUpTab === 'default' || signUpTab === 'otpCellphone')) && (
 								<View style={{ marginBottom: 25 }}>
 									<PhoneInputNumber
 										data={phoneInputData}
@@ -564,34 +648,34 @@ const SignupFormUI = (props: SignupParams) => {
 									/>
 								</>
 							)}
-
-							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
-								<Controller
-									control={control}
-									render={({ onChange, value }: any) => (
-										<CheckBox
-											value={value}
-											onValueChange={newValue => {
-												onChange(newValue)
-												handleChangePromotions()
-											}}
-											boxType={'square'}
-											tintColors={{
-												true: theme.colors.primary,
-												false: theme.colors.disabled
-											}}
-											tintColor={theme.colors.disabled}
-											onCheckColor={theme.colors.primary}
-											onTintColor={theme.colors.primary}
-											style={Platform.OS === 'ios' && style.checkBoxStyle}
-										/>
-									)}
-									name='promotions'
-									defaultValue={false}
-								/>
-								<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
-							</View>
-
+							{(signUpTab === 'default') && (
+								<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
+									<Controller
+										control={control}
+										render={({ onChange, value }: any) => (
+											<CheckBox
+												value={value}
+												onValueChange={newValue => {
+													onChange(newValue)
+													handleChangePromotions()
+												}}
+												boxType={'square'}
+												tintColors={{
+													true: theme.colors.primary,
+													false: theme.colors.disabled
+												}}
+												tintColor={theme.colors.disabled}
+												onCheckColor={theme.colors.primary}
+												onTintColor={theme.colors.primary}
+												style={Platform.OS === 'ios' && style.checkBoxStyle}
+											/>
+										)}
+										name='promotions'
+										defaultValue={false}
+									/>
+									<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
+								</View>
+							)}
 							{configs?.terms_and_conditions?.value === 'true' && (
 								<>
 									{errors?.termsAccept && (
@@ -643,7 +727,7 @@ const SignupFormUI = (props: SignupParams) => {
 
 							)}
 
-							{signupTab !== 'cellphone' && (
+							{signUpTab === 'default' && (
 								<>
 									{errors?.password && (
 										<OText
@@ -715,9 +799,7 @@ const SignupFormUI = (props: SignupParams) => {
 						<Spinner visible />
 					)}
 
-					{signupTab === 'cellphone' &&
-						useSignupByEmail &&
-						useSignupByCellphone ? (
+					{(signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') ? (
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={t('GET_VERIFY_CODE', 'Get Verify Code')}
@@ -782,7 +864,7 @@ const SignupFormUI = (props: SignupParams) => {
 						<ButtonsWrapper>
 							<SocialButtons>
 								{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-									configs?.facebook_id?.value && 
+									configs?.facebook_id?.value &&
 									facebookLoginEnabled &&
 									(
 										<FacebookLogin
@@ -815,27 +897,40 @@ const SignupFormUI = (props: SignupParams) => {
 				)}
 
 			</FormSide>
-			<OModal open={isModalVisible} onClose={() => setIsModalVisible(false)}>
-				<VerifyPhone
-					phone={phoneInputData.phone}
-					formValues={formValues}
-					verifyPhoneState={verifyPhoneState}
-					checkPhoneCodeState={checkPhoneCodeState}
-					handleCheckPhoneCode={handleCheckPhoneCode}
-					setCheckPhoneCodeState={setCheckPhoneCodeState}
-					handleVerifyCodeClick={onSubmit}
+			<OModal
+				open={willVerifyOtpState}
+				onClose={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
+				entireModal
+				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			>
+				<Otp
+					pinCount={numOtpInputs || 6}
+					willVerifyOtpState={willVerifyOtpState || false}
+					setWillVerifyOtpState={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
+					handleLoginOtp={handleSingUpOtp}
+					onSubmit={onSubmit}
+					setAlertState={setAlertState}
 				/>
 			</OModal>
 			<Spinner
 				visible={formState.loading || validationFields.loading || isFBLoading}
 			/>
+			<Alert
+				open={alertState.open}
+				content={alertState.content}
+				title={alertState.title || ''}
+				onAccept={closeAlert}
+				onClose={closeAlert}
+			/>
 		</View>
 	);
 };
 
 export const SignupForm = (props: any) => {
+	const _numOtpInputs = 6
 	const signupProps = {
 		...props,
+		numOtpInputs: _numOtpInputs,
 		isRecaptchaEnable: true,
 		UIComponent: SignupFormUI,
 	};

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

@@ -23,6 +23,8 @@ const UserDetailsUI = (props: any) => {
 		isEdit,
 		formState,
 		cleanFormState,
+		requiredFields,
+		onClose,
 		cartStatus,
 		toggleIsEdit,
 		validationFields,
@@ -44,6 +46,7 @@ const UserDetailsUI = (props: any) => {
 	const userData = props.userData || (!formState.result.error && formState.result?.result) || user
 
 	const [isModalVisible, setIsModalVisible] = useState(false);
+	const [isSubmit, setIsSubmit] = useState(false)
 	const [willVerifyOtpState, setWillVerifyOtpState] = useState(false);
 	const [checkPhoneCodeState, setCheckPhoneCodeState] = useState({ loading: false, result: { error: false } })
 	const [phoneInputData, setPhoneInputData] = useState({
@@ -54,7 +57,6 @@ const UserDetailsUI = (props: any) => {
 		},
 	});
 
-
 	useEffect(() => {
 		if (isUserDetailsEdit) {
 			!isEdit && toggleIsEdit()
@@ -66,6 +68,12 @@ const UserDetailsUI = (props: any) => {
 		cleanFormState({ changes: {} })
 	}
 
+	useEffect(() => {
+		if (isSubmit && !isEdit && requiredFields) {
+			onClose && onClose()
+		}
+	}, [isSubmit, requiredFields, isEdit])
+
 	useEffect(() => {
 		if (user?.cellphone && !user?.country_phone_code) {
 			togglePhoneUpdate(true)
@@ -147,7 +155,7 @@ const UserDetailsUI = (props: any) => {
 						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal}>
 							{t('CUSTOMER_DETAILS', 'Customer Details')}
 						</OText>
-						{cartStatus !== 2 && (
+						{cartStatus !== 2 && !requiredFields && (
 							!isEdit ? (
 								<EditBtn onPress={() => toggleIsEdit()} activeOpacity={0.7}>
 									<OIcon
@@ -198,6 +206,7 @@ const UserDetailsUI = (props: any) => {
 							togglePhoneUpdate={togglePhoneUpdate}
 							isCheckout={isCheckout}
 							setWillVerifyOtpState={setWillVerifyOtpState}
+							setIsSubmit={setIsSubmit}
 						/>
 					)}
 				</UDContainer>

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

@@ -17,6 +17,9 @@ export const UserFormDetailsUI = (props: any) => {
 		isEdit,
 		formState,
 		showField,
+		requiredFields,
+		onClose,
+		setIsSubmit,
 		cleanFormState,
 		onCloseProfile,
 		isRequiredField,
@@ -75,6 +78,7 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const [{ user }] = useSession();
 	const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
+	const [isValid, setIsValid] = useState(false)
   const [isChanged, setIsChanged] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
@@ -160,6 +164,7 @@ export const UserFormDetailsUI = (props: any) => {
 					cellphone: '',
 				};
 			}
+			setIsSubmit && setIsSubmit(true)
 			handleButtonUpdateClick(changes);
 		}
 	};
@@ -235,6 +240,12 @@ export const UserFormDetailsUI = (props: any) => {
 			setWillVerifyOtpState?.(true)
 		}
 	}, [phoneInputData, configs?.verification_phone_required?.value, isChanged])
+
+	useEffect(() => {
+		if (!requiredFields || formState?.changes?.length === 0) return
+			const _isValid = requiredFields.every((key: any) => formState?.changes[key])
+			setIsValid(_isValid)
+		}, [formState?.changes, requiredFields])
 	
 	return (
 		<>
@@ -248,7 +259,7 @@ export const UserFormDetailsUI = (props: any) => {
 							}).map(
 								(field: any) =>
 									showField &&
-									showField(field.code) && (
+									showField(field.code) && ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
 										<React.Fragment key={field.id}>
 											<Controller
 												key={field.id}
@@ -322,7 +333,7 @@ export const UserFormDetailsUI = (props: any) => {
 									),
 							)}
 
-							{!!showInputPhoneNumber && (
+							{!!showInputPhoneNumber &&((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
 									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
 									<PhoneInputNumber
@@ -347,71 +358,76 @@ export const UserFormDetailsUI = (props: any) => {
 									)}
 								</WrapperPhone>
 							)}
-							<Controller
-								control={control}
-								render={() => (
-									<>
-										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-											{t('PASSWORD', 'Password')}
-										</OText>
-										<OInput
-											name='password'
-											placeholder={t('FRONT_VISUALS_PASSWORD', 'Password')}
-											inputStyle={styles.inputStyle}
-											style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
-											autoCapitalize='none'
-											isDisabled={false}
-											value={
-												formState?.changes['password'] ??
-												(user && user['password']) ??
-												''
-											}
-											onChange={(val: any) => {
-												setValue('password', val.target.value)
-												handleChangeInput(val)
-											}}
-											autoCorrect
-											type='default'
-											returnKeyType="done"
-											autoCompleteType='off'
-											isSecured
-										/>
-									</>
-								)}
-								name='password'
-								rules={getInputRules({ name: 'password', code: 'password' })}
-								defaultValue=''
-							/>
-							<Controller
-								control={control}
-								render={({ onChange, value }: any) => (
-									<TouchableOpacity
-										style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}
-										onPress={() => {
-											onChange(!value)
-											handleChangePromotions(!value)
-										}}
-									>
-										<CheckBox
-											value={value}
-											boxType={'square'}
-											tintColors={{
-												true: theme.colors.primary,
-												false: theme.colors.disabled
+							{!requiredFields && (
+								<Controller
+									control={control}
+									render={() => (
+										<>
+											<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+												{t('PASSWORD', 'Password')}
+											</OText>
+											<OInput
+												name='password'
+												placeholder={t('FRONT_VISUALS_PASSWORD', 'Password')}
+												inputStyle={styles.inputStyle}
+												style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
+												autoCapitalize='none'
+												isDisabled={false}
+												value={
+													formState?.changes['password'] ??
+													(user && user['password']) ??
+													''
+												}
+												onChange={(val: any) => {
+													setValue('password', val.target.value)
+													handleChangeInput(val)
+												}}
+												autoCorrect
+												type='default'
+												returnKeyType="done"
+												autoCompleteType='off'
+												isSecured
+											/>
+										</>
+									)}
+									name='password'
+									rules={getInputRules({ name: 'password', code: 'password' })}
+									defaultValue=''
+								/>
+							)}
+							{!requiredFields && (
+								<Controller
+									control={control}
+									render={({ onChange, value }: any) => (
+										<TouchableOpacity
+											style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}
+											onPress={() => {
+												onChange(!value)
+												handleChangePromotions(!value)
 											}}
-											tintColor={theme.colors.disabled}
-											onCheckColor={theme.colors.primary}
-											onTintColor={theme.colors.primary}
-											style={Platform.OS === 'ios' && styles.checkBoxStyle}
-										/>
-										<OText style={{ fontSize: 14, paddingHorizontal: 5, paddingLeft: 10 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
-									</TouchableOpacity>
-								)}
-								name='promotions'
-								defaultValue={formState?.result?.result
-									? !!formState?.result?.result?.settings?.notification?.newsletter
-									: !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))}
-							/>
+										>
+											<CheckBox
+												value={value}
+												boxType={'square'}
+												tintColors={{
+													true: theme.colors.primary,
+													false: theme.colors.disabled
+												}}
+												tintColor={theme.colors.disabled}
+												onCheckColor={theme.colors.primary}
+												onTintColor={theme.colors.primary}
+												style={Platform.OS === 'ios' && styles.checkBoxStyle}
+											/>
+											<OText style={{ fontSize: 14, paddingHorizontal: 5, paddingLeft: 10 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
+										</TouchableOpacity>
+									)}
+									name='promotions'
+									defaultValue={formState?.result?.result
+										? !!formState?.result?.result?.settings?.notification?.newsletter
+										: !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))}
+								/>
+							)}
+
 						</UDWrapper>
 					)}
 				{validationFields?.loading && (
@@ -443,6 +459,22 @@ export const UserFormDetailsUI = (props: any) => {
 						)}
 				</>
 			)}
+			{requiredFields && (
+				<OButton
+					text={
+						formState.loading
+							? t('UPDATING', 'Updating...')
+							: t('CONTINUE', 'Continue')
+					}
+					bgColor={theme.colors.white}
+					textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+					borderColor={theme.colors.primary}
+					isDisabled={formState.loading || !isValid}
+					imgRightSrc={null}
+					style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
+					onClick={handleSubmit(onSubmit)}
+				/>
+			)}
 		</>
 	);
 };

package/themes/original/src/types/index.tsx

@@ -110,9 +110,20 @@ export interface SignupParams {
 	handleSendVerifyCode?: any;
 	handleCheckPhoneCode?: any;
 	notificationState?: any;
+	signUpTab?: string;
+	useSignUpFullDetails?: boolean;
+	useSignUpOtpEmail?: boolean;
+	useSignUpOtpCellphone?: boolean;
+	willVerifyOtpState?: boolean;
+	numOtpInputs?: number;
 	handleChangePromotions: () => void;
+	handleChangeInput?: (in1: any, in2: any) => void;
 	enableReCaptcha?: boolean;
+	generateOtpCode?: (in1?: any) => void;
 	handleReCaptcha?: () => void;
+	setSignUpTab?: (in1: string) => void;
+	setWillVerifyOtpState?: (in1: boolean) => void;
+	setOtpState?: (in1: string) => void;
 }
 
 export interface PhoneInputParams {
@@ -651,7 +662,8 @@ export interface otpParams {
 	setWillVerifyOtpState: (val: boolean) => void,
 	onSubmit: () => void,
 	handleLoginOtp: (code: string) => void,
-	setAlertState: any
+	setAlertState: any;
+	pinCount: number;
 }
 
 export interface FavoriteParams {