ordering-ui-react-native 0.16.36 → 0.16.39

package/package.json

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

package/src/components/OrderDetails/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { View, StyleSheet, BackHandler, TouchableOpacity, I18nManager, AppState } from 'react-native'
+import React, { useState, useEffect } from 'react'
+import { View, StyleSheet, BackHandler, TouchableOpacity, I18nManager } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -109,7 +109,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [isReviewed, setIsReviewed] = useState(false)
   const [openOrderCreating, setOpenOrderCreating] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
-  const appState = useRef(AppState.currentState)
 
   const { order, loading, businessData, error } = props.order
 
@@ -259,23 +258,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     })
   }, [])
 
-  useEffect(() => {
-    const onFocusApp = (nextAppState: any) => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === "active"
-      ) {
-        getOrder && getOrder()
-      }
-      appState.current = nextAppState;
-    }
-
-    AppState.addEventListener("change", onFocusApp);
-    return () => {
-      AppState.removeEventListener('change', onFocusApp);
-    };
-  }, [])
-
   return (
     <OrderDetailsContainer keyboardShouldPersistTaps='handled'>
       {order && order?.id && !error && !loading && (

package/src/components/PaymentOptions/index.tsx

@@ -89,6 +89,8 @@ const PaymentOptionsUI = (props: any) => {
         return theme.images.general.stripes
       case 'stripe_redirect':
         return theme.images.general.stripesb
+      case 'apple_pay':
+        return theme.images.general.applePayMark
       default:
         return theme.images.general.creditCard
     }
@@ -97,7 +99,7 @@ const PaymentOptionsUI = (props: any) => {
   const handlePaymentMethodClick = (paymethod: any) => {
     const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square'].includes(paymethod?.gateway)
     handlePaymethodClick(paymethod, isPopupMethod)
-		if (webViewPaymentGateway.includes(paymethod?.gateway)) {
+    if (webViewPaymentGateway.includes(paymethod?.gateway)) {
       handlePaymentMethodClickCustom(paymethod)
     }
     setCardData(paymethodData)
@@ -130,29 +132,44 @@ const PaymentOptionsUI = (props: any) => {
 
   const renderPaymethods = ({ item }: any) => {
     return (
-      <TouchableOpacity
-        onPress={() => handlePaymentMethodClick(item)}
-      >
-        <PMItem
-          key={item.id}
-          isDisabled={isDisabled}
-          isActive={paymethodSelected?.id === item.id}
-        >
-          <OIcon
-            src={getPayIcon(item.gateway)}
-            width={40}
-            height={40}
-            color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
-          />
-          <OText
-            size={12}
-            style={{ margin: 0 }}
-            color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+      <>
+        {item?.gateway === 'apple_pay' ? (
+          <TouchableOpacity
+            onPress={() => handlePaymentMethodClick(item)}
           >
-            {t(item.gateway.toUpperCase(), item.name)}
-          </OText>
-        </PMItem>
-      </TouchableOpacity>
+            <OIcon
+              src={getPayIcon(item.gateway)}
+              width={120}
+              height={100}
+              style={{ marginRight: 10 }}
+            />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            onPress={() => handlePaymentMethodClick(item)}
+          >
+            <PMItem
+              key={item.id}
+              isDisabled={isDisabled}
+              isActive={paymethodSelected?.id === item.id}
+            >
+              <OIcon
+                src={getPayIcon(item.gateway)}
+                width={40}
+                height={40}
+                color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
+              />
+              <OText
+                size={12}
+                style={{ margin: 0 }}
+                color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+              >
+                {t(item.gateway.toUpperCase(), item.name)}
+              </OText>
+            </PMItem>
+          </TouchableOpacity>
+        )}
+      </>
     )
   }
 
@@ -213,31 +230,31 @@ const PaymentOptionsUI = (props: any) => {
       {stripeOptions.includes(paymethodSelected?.gateway) &&
         (paymethodData?.brand || paymethodData?.card?.brand) &&
         (paymethodData?.last4 || paymethodData?.card?.last4) &&
-      (
-        <PMCardSelected>
-          <PMCardItemContent>
-            <View style={styles.viewStyle}>
-              <MaterialCommunityIcons
-                name='radiobox-marked'
-                size={24}
-                color={theme.colors.primary}
-              />
-            </View>
-            <View style={styles.viewStyle}>
-              <OText>
-                {getIconCard((paymethodData?.brand || paymethodData?.card?.brand), 26)}
-              </OText>
-            </View>
-            <View style={styles.viewStyle}>
-              <OText
-                size={20}
-              >
-                XXXX-XXXX-XXXX-{(paymethodData?.last4 || paymethodData?.card?.last4)}
-              </OText>
-            </View>
-          </PMCardItemContent>
-        </PMCardSelected>
-      )}
+        (
+          <PMCardSelected>
+            <PMCardItemContent>
+              <View style={styles.viewStyle}>
+                <MaterialCommunityIcons
+                  name='radiobox-marked'
+                  size={24}
+                  color={theme.colors.primary}
+                />
+              </View>
+              <View style={styles.viewStyle}>
+                <OText>
+                  {getIconCard((paymethodData?.brand || paymethodData?.card?.brand), 26)}
+                </OText>
+              </View>
+              <View style={styles.viewStyle}>
+                <OText
+                  size={20}
+                >
+                  XXXX-XXXX-XXXX-{(paymethodData?.last4 || paymethodData?.card?.last4)}
+                </OText>
+              </View>
+            </PMCardItemContent>
+          </PMCardSelected>
+        )}
 
       {/* Stripe */}
       {isOpenMethod?.paymethod?.gateway === 'stripe' && !paymethodData?.id && (
@@ -317,7 +334,7 @@ const PaymentOptionsUI = (props: any) => {
             bgColor={theme.colors.primary}
             borderColor={theme.colors.primary}
             style={styles.btnAddStyle}
-            textStyle={{color: 'white'}}
+            textStyle={{ color: 'white' }}
             imgRightSrc={null}
             onClick={() => setAddCardOpen({ ...addCardOpen, stripeConnect: true })}
           />

package/src/components/ReviewOrder/index.tsx

@@ -332,6 +332,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
 export const ReviewOrder = (props: ReviewOrderParams) => {
   const reviewOrderProps = {
     ...props,
+    defaultStar: 0,
     UIComponent: ReviewOrderUI
   }
   return <ReviewOrderController {...reviewOrderProps} />

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

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Linking } from 'react-native';
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
+import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import isBetween from 'dayjs/plugin/isBetween';
@@ -21,7 +22,8 @@ import {
 	WrapReviews,
 	WrapBusinessInfo,
 	TitleWrapper,
-	RibbonBox
+	RibbonBox,
+	SocialListWrapper
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 const types = ['food', 'laundry', 'alcohol', 'groceries'];
@@ -44,6 +46,64 @@ export const BusinessBasicInformation = (
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
 
+	const styles = StyleSheet.create({
+		businesInfoheaderStyle: {
+			height: 150,
+		},
+		headerStyle: {
+			height: 260,
+		},
+		businessLogo: {
+			width: 72,
+			height: 72,
+			borderRadius: 7.6,
+			justifyContent: 'flex-start',
+			alignItems: 'flex-start',
+		},
+		businessInfo: {
+			paddingHorizontal: 40,
+			paddingTop: 56,
+		},
+		bullet: {
+			flexDirection: 'row',
+			alignItems: 'center',
+		},
+		metadata: {
+			marginRight: 2,
+		},
+		starIcon: {
+			marginHorizontal: 5,
+		},
+		reviewStyle: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			justifyContent: 'center'
+		},
+		modalTitleSectionStyle: {
+			position: 'absolute',
+			width: '100%',
+			top: 0,
+			zIndex: 100,
+			left: 40
+		},
+		socialIcon: {
+			borderRadius: 3,
+			borderColor: theme.colors.border,
+			borderWidth: 1,
+			width: 20,
+			height: 20,
+			justifyContent: 'center',
+			alignItems: 'center',
+			marginLeft: 5
+		},
+		tiktokIcon: {
+			height: 12,
+			width: 12,
+			margin: 0,
+			padding: 0
+		}
+	});
+
 	const handleClickBusinessInformation = () => {
 		if (!businessInformationObtained) {
 			BusinessInformation = require('../BusinessInformation').BusinessInformation
@@ -73,6 +133,19 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
+	const SocialNetWork = (props: any) => {
+		const { socialLink, iconTitle} = props
+
+		return (
+			<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(socialLink)}>
+				<MaterialComIcon
+					name={iconTitle}
+					color={theme.colors.textNormal}
+					size={14}
+				/>
+			</TouchableOpacity>
+		)
+	}
 
 	useEffect(() => {
 		if (businessState?.loading) return
@@ -165,6 +238,53 @@ export const BusinessBasicInformation = (
 									</OText>
 								</RibbonBox>
 							)}
+							<SocialListWrapper
+								showsVerticalScrollIndicator={false}
+								showsHorizontalScrollIndicator={false}
+								horizontal
+								contentContainerStyle={{ flex: 1, justifyContent: 'flex-end'}}
+							>
+								{!!business?.facebook_profile && (
+									<SocialNetWork
+										socialLink={business?.facebook_profile}
+										iconTitle='facebook'
+									/>
+								)}
+								{!!business?.instagram_profile && (
+									<SocialNetWork
+										socialLink={business?.instagram_profile}
+										iconTitle='instagram'
+									/>
+								)}
+								{!!business?.tiktok_profile && (
+									<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
+										<View style={styles.tiktokIcon}>
+											<OIcon
+												src={theme.images.general.tiktok}
+												style={{ width: '100%', height: '100%'}}
+											/>
+										</View>
+									</TouchableOpacity>
+								)}
+								{!!business?.pinterest_profile && (
+									<SocialNetWork
+										socialLink={business?.pinterest_profile}
+										iconTitle='pinterest'
+									/>
+								)}
+								{!!business?.whatsapp_number && (
+									<SocialNetWork
+										socialLink={business?.whatsapp_number}
+										iconTitle='whatsapp'
+									/>
+								)}
+								{!!business?.snapchat_profile && (
+									<SocialNetWork
+										socialLink={business?.snapchat_profile}
+										iconTitle='snapchat'
+									/>
+								)}
+							</SocialListWrapper>
 						</TitleWrapper>
 					)}
 				</BusinessInfoItem>
@@ -276,45 +396,3 @@ export const BusinessBasicInformation = (
 		</BusinessContainer>
 	);
 };
-
-const styles = StyleSheet.create({
-	businesInfoheaderStyle: {
-		height: 150,
-	},
-	headerStyle: {
-		height: 260,
-	},
-	businessLogo: {
-		width: 72,
-		height: 72,
-		borderRadius: 7.6,
-		justifyContent: 'flex-start',
-		alignItems: 'flex-start',
-	},
-	businessInfo: {
-		paddingHorizontal: 40,
-		paddingTop: 56,
-	},
-	bullet: {
-		flexDirection: 'row',
-		alignItems: 'center',
-	},
-	metadata: {
-		marginRight: 2,
-	},
-	starIcon: {
-		marginHorizontal: 5,
-	},
-	reviewStyle: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		justifyContent: 'center'
-	},
-	modalTitleSectionStyle: {
-		position: 'absolute',
-		width: '100%',
-		top: 0,
-		zIndex: 100,
-		left: 40
-	},
-});

package/themes/original/src/components/BusinessBasicInformation/styles.tsx

@@ -68,3 +68,7 @@ export const RibbonBox = styled.View`
     border-radius: 50px;
   `}
 `
+
+export const SocialListWrapper = styled.ScrollView`
+  flex-direction: row;
+`

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

@@ -75,6 +75,7 @@ export const Favorite = (props: any) => {
         <FavoriteList
           favoriteURL='favorite_products'
           originalURL='products'
+          onNavigationRedirect={onRedirect}
           isProduct
         />
       )}

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

@@ -73,6 +73,17 @@ const FavoriteListUI = (props: FavoriteParams) => {
     return objectStatus && objectStatus
   }
 
+  const onProductClick = (product: any) => {
+    const categoryId = product?.category?.id
+    const businessId = product?.category?.business?.id
+    if (!categoryId || !businessId) return
+    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+			productId: product?.id,
+			categoryId: categoryId,
+			businessId: businessId
+		})
+  }
+
   useEffect(() => {
 		const _businessId = 'businessId:' + reorderState?.result?.business_id
 		if (reorderState?.error) {
@@ -248,9 +259,9 @@ const FavoriteListUI = (props: FavoriteParams) => {
             favoriteList.favorites?.sort((a: any, b: any) => a?.name?.toLowerCase() > b?.name?.toLowerCase()).map((product: any, i: number) => (
               <SingleProductCard
                 key={`${product?.id}_${i}`}
-                isSoldOut={product.inventoried && !product.quantity}
+                isSoldOut={product?.inventoried && !product?.quantity}
                 product={product}
-                onProductClick={() => {}}
+                onProductClick={onProductClick}
                 handleUpdateProducts={handleUpdateFavoriteList}
               />
             ))

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/PaymentOptions/index.tsx

@@ -82,6 +82,8 @@ const PaymentOptionsUI = (props: any) => {
 				return theme.images.general.stripes
 			case 'stripe_redirect':
 				return theme.images.general.stripesb
+			case 'apple_pay':
+				return theme.images.general.applePayMark
 			default:
 				return theme.images.general.creditCard
 		}
@@ -142,29 +144,46 @@ const PaymentOptionsUI = (props: any) => {
 
 	const renderPaymethods = ({ item }: any) => {
 		return (
-			<TouchableOpacity
-				onPress={() => handlePaymentMethodClick(item)}
-			>
-				<PMItem
-					key={item.id}
-					isDisabled={isDisabled}
-					isActive={paymethodSelected?.id === item.id}
-				>
-					<OIcon
-						src={getPayIcon(item.gateway)}
-						width={20}
-						height={20}
-						color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
-					/>
-					<OText
-						size={10}
-						style={{ margin: 0, marginTop: 4 }}
-						color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+			<>
+				{item?.gateway === 'apple_pay' ? (
+					<TouchableOpacity
+						onPress={() => handlePaymentMethodClick(item)}
 					>
-						{t(item.gateway.toUpperCase(), item.name)}
-					</OText>
-				</PMItem>
-			</TouchableOpacity>
+						<OIcon
+							src={getPayIcon(item.gateway)}
+							width={70}
+							height={70}
+							style={{ marginRight: 10 }}
+						/>
+					</TouchableOpacity>
+				) : (
+					<TouchableOpacity
+						onPress={() => handlePaymentMethodClick(item)}
+					>
+						{console.log(item?.gateway)}
+						<PMItem
+							key={item.id}
+							isDisabled={isDisabled}
+							isActive={paymethodSelected?.id === item.id}
+						>
+							<OIcon
+								src={getPayIcon(item.gateway)}
+								width={20}
+								height={20}
+								color={item?.gateway === 'apple_pay' ? '' : paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
+							/>
+							<OText
+								size={10}
+								style={{ margin: 0, marginTop: 4 }}
+								color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+							>
+								{t(item.gateway.toUpperCase(), item.name)}
+							</OText>
+						</PMItem>
+					</TouchableOpacity>
+				)}
+			</>
+
 		)
 	}
 

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/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 {