ordering-ui-react-native 0.15.85 → 0.15.88

package/package.json

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

package/src/hooks/useCountdownTimer.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Hook for countdown seconds
+ * @param {int} initialCount
+ * @param {boolean} start
+ */
+export function useCountdownTimer (initialCount : number, start : boolean) {
+  const [count, setCount] = useState(initialCount)
+
+  useEffect(() => {
+    if (start) {
+      const secondsLeft = setInterval(() => {
+        setCount(c => c - (c === 0 ? 0 : 1))
+      }, 1000)
+      return () => clearInterval(secondsLeft)
+    }
+  }, [start])
+
+  return [
+    count,
+    setCount,
+    /** reset */
+    () => { setCount(initialCount) }
+  ]
+}

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

@@ -12,6 +12,7 @@ import {
 	useConfig
 } from 'ordering-components/native'
 import { OButton, OIcon, OModal, OText } from '../shared'
+import Alert from '../../providers/AlertProvider'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
 import { SearchBar } from '../SearchBar'
 import { BusinessProductsCategories } from '../BusinessProductsCategories'
@@ -48,6 +49,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		errorQuantityProducts,
 		header,
 		logo,
+		alertState,
+		setAlertState,
+		multiRemoveProducts,
 		getNextProducts,
 	} = props
 
@@ -169,18 +173,24 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
 	}
 
+	const adjustBusiness = async (adjustBusinessId: number) => {
+		const _carts = orderState?.carts?.[adjustBusinessId]
+		const products = _carts?.products
+		const unavailableProducts = products.filter((product: any) => product.valid !== true)
+		unavailableProducts.length > 0 && multiRemoveProducts && multiRemoveProducts(unavailableProducts, _carts)
+	}
+
 	const removeCartByReOrder = async () => {
-		const removeCardId = await _retrieveStoreData('remove-cartId')
-		if (currentCart && removeCardId) {
-			clearCart(removeCardId)
-			_removeStoreData('remove-cartId')
-			showToast(ToastType.Info, t('PRODUCT_REMOVED', 'Products removed from cart'))
+		const adjustBusinessId = await _retrieveStoreData('adjust-cart-products')
+		if (currentCart && adjustBusinessId) {
+			_removeStoreData('adjust-cart-products')
+			adjustBusiness(adjustBusinessId)
 		}
 	}
 
 	useEffect(() => {
 		removeCartByReOrder()
-	}, [])
+	}, [currentCart])
 
 	return (
 		<ContainerSafeAreaView
@@ -393,6 +403,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onRedirect={onRedirect}
 				/>
 			)}
+			<Alert
+				open={alertState?.open || false}
+				title=''
+				content={[t('NOT_AVAILABLE_PRODUCTS', 'These products are not available.')]}
+				onAccept={() => setAlertState({ open: false, content: [] })}
+				onClose={() => setAlertState({ open: false, content: [] })}
+			/>
 		</ContainerSafeAreaView>
 	)
 }

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

@@ -137,7 +137,12 @@ const CheckoutUI = (props: any) => {
 	const placeSpotTypes = [3, 4]
 	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
-	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash || cart?.subtotal < cart?.minimum || (placeSpotTypes.includes(options?.type) && !cart?.place)
+	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash ||
+								cart?.subtotal < cart?.minimum || (placeSpotTypes.includes(options?.type) && !cart?.place) ||
+								(options.type === 1 &&
+									validationFields?.fields?.checkout?.driver_tip?.enabled &&
+									validationFields?.fields?.checkout?.driver_tip?.required &&
+									(Number(cart?.driver_tip) <= 0))
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -623,7 +628,7 @@ const CheckoutUI = (props: any) => {
 
 					{!cartState.loading && cart && (
 						<View>
-							<ChErrors style={{ marginBottom: 0 }}>
+							<ChErrors style={{ marginBottom: 10 }}>
 								{!cart?.valid_address && cart?.status !== 2 && (
 									<OText
 										color={theme.colors.error}
@@ -658,6 +663,17 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_PLACE_SPOT', 'Please, select your spot to place order.')}
 									</OText>
 								)}
+								{options.type === 1 &&
+								validationFields?.fields?.checkout?.driver_tip?.enabled &&
+								validationFields?.fields?.checkout?.driver_tip?.required &&
+								(Number(cart?.driver_tip) <= 0) && (
+								<OText
+									color={theme.colors.error}
+									size={12}
+								>
+									{t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
+								</OText>
+								)}
 							</ChErrors>
 						</View>
 					)}

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

@@ -25,7 +25,8 @@ const ForgotPasswordUI = (props: any) => {
 		formState,
 		handleButtonForgotPasswordClick,
 		handleReCaptcha,
-		enableReCaptcha
+		enableReCaptcha,
+		reCaptchaValue
 	} = props;
 	const [, t] = useLanguage();
 	const [, { showToast }] = useToast();
@@ -58,9 +59,12 @@ const ForgotPasswordUI = (props: any) => {
 		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
 	}
 
-	  	const handleOpenRecaptcha = () => {
+	const handleOpenRecaptcha = () => {
 		setRecaptchaVerified(false)
-	  	if (!recaptchaConfig?.siteKey) {
+		handleReCaptcha(null)
+		if (reCaptchaValue) return
+
+	  if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
 			return
 		}
@@ -76,6 +80,11 @@ const ForgotPasswordUI = (props: any) => {
 		handleReCaptcha(token)
 	}
 
+	const handleRecaptchaExpire = () => {
+		setRecaptchaVerified(false)
+		handleReCaptcha(null)
+	}
+
 	useEffect(() => {
 		if (!formState.loading && emailSent) {
 			if (formState.result?.error) {
@@ -192,7 +201,7 @@ const ForgotPasswordUI = (props: any) => {
 								siteKey={recaptchaConfig?.siteKey}
 								baseUrl={recaptchaConfig?.baseUrl}
 								onVerify={onRecaptchaVerify}
-								onExpire={() => setRecaptchaVerified(false)}
+								onExpire={handleRecaptchaExpire}
 							/>
 						</>
 					)}

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

@@ -0,0 +1,91 @@
+import React, { useEffect } from 'react'
+import { formatSeconds } from '../../../utils'
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
+import { useLanguage } from 'ordering-components/native';
+import { OTPContainer } from './styles';
+import { OText, OButton } from '../../shared';
+import OTPInputView from '@twotalltotems/react-native-otp-input'
+import { useTheme } from 'styled-components/native';
+import { otpParams } from '../../../types'
+
+export const Otp = (props: otpParams) => {
+    const {
+        willVerifyOtpState,
+        setWillVerifyOtpState,
+        onSubmit,
+        handleLoginOtp,
+        setAlertState
+    } = props
+
+    const theme = useTheme();
+    const [, t] = useLanguage();
+    const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
+        600, willVerifyOtpState)
+
+
+    const handleOnSubmit = () => {
+        setAlertState({
+            open: true,
+            title: t('CODE_SENT', 'The code has been sent'),
+        })
+        resetOtpLeftTime()
+        onSubmit()
+    }
+
+    useEffect(() => {
+        if (otpLeftTime === 0) {
+            setAlertState({
+                open: true,
+                title: t('TIME_IS_UP', 'Time is up'),
+                content: t('PLEASE_RESEND_CODE', 'Please resend code again')
+            })
+        }
+    }, [otpLeftTime])
+
+    const loginStyle = StyleSheet.create({
+        underlineStyleBase: {
+            width: 45,
+            height: 60,
+            borderWidth: 1,
+            fontSize: 16
+        },
+        underlineStyleHighLighted: {
+            borderColor: theme.colors.primary,
+            color: theme.colors.primary,
+            fontSize: 16
+        },
+    });
+
+    return (
+        <>
+            <OTPContainer>
+                <OText size={24}>
+                    {formatSeconds(otpLeftTime)}
+                </OText>
+                <OTPInputView
+                    style={{ width: '100%', height: 150 }}
+                    pinCount={6}
+                    autoFocusOnLoad
+                    codeInputFieldStyle={loginStyle.underlineStyleBase}
+                    codeInputHighlightStyle={loginStyle.underlineStyleHighLighted}
+                    onCodeFilled={(code: string) => handleLoginOtp(code)}
+                    selectionColor={theme.colors.primary}
+                />
+                <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
+                    <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
+                        {t('RESEND_CODE', 'Resend code')}
+                    </OText>
+                </TouchableOpacity>
+                <OButton
+                    onClick={() => setWillVerifyOtpState(false)}
+                    bgColor={theme.colors.white}
+                    borderColor={theme.colors.primary}
+                    textStyle={{ color: theme.colors.primary }}
+                    style={{ borderRadius: 8, width: '100%' }}
+                    text={t('CANCEL', 'Cancel')}
+                />
+            </OTPContainer>
+        </>
+    )
+}

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components/native';
+
+export const OTPContainer = styled.View`
+  padding: 20px;
+  align-items: center;
+  flex: 1 
+`

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

@@ -18,7 +18,6 @@ import { useTheme } from 'styled-components/native';
 import { FacebookLogin } from '../FacebookLogin';
 import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
 import { OModal } from '../../../../../src/components/shared';
-
 import {
 	Container,
 	ButtonsWrapper,
@@ -32,17 +31,19 @@ import {
 	LineSeparator,
 	SkeletonWrapper,
 	TabBtn,
-  RecaptchaButton
+	RecaptchaButton
 } from './styles';
 
 import NavBar from '../NavBar';
 
-import { OText, OButton, OInput, OIcon } from '../shared';
+import { OText, OButton, OInput } from '../shared';
 import { LoginParams } from '../../types';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { GoogleLogin } from '../GoogleLogin';
 import { AppleLogin } from '../AppleLogin';
+import { Otp } from './Otp'
 import { TouchableOpacity } from 'react-native-gesture-handler';
+import Alert from '../../../../../src/providers/AlertProvider'
 
 const LoginFormUI = (props: LoginParams) => {
 	const {
@@ -51,6 +52,7 @@ const LoginFormUI = (props: LoginParams) => {
 		navigation,
 		useLoginByEmail,
 		useLoginByCellphone,
+		useLoginOtp,
 		loginButtonText,
 		forgotButtonText,
 		verifyPhoneState,
@@ -63,7 +65,12 @@ const LoginFormUI = (props: LoginParams) => {
 		onNavigationRedirect,
 		notificationState,
 		handleReCaptcha,
-		enableReCaptcha
+		enableReCaptcha,
+		otpType,
+		setOtpType,
+		generateOtpCode,
+		useLoginOtpEmail,
+		useLoginOtpCellphone,
 	} = props;
 
 	const [, { showToast }] = useToast();
@@ -75,6 +82,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
 	const [isModalVisible, setIsModalVisible] = useState(false);
 	const [isFBLoading, setIsFBLoading] = useState(false);
+	const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -84,9 +92,11 @@ const LoginFormUI = (props: LoginParams) => {
 	});
 	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
 
 	const theme = useTheme();
-
+	const isOtpEmail = loginTab === 'otp' && otpType === 'email'
+	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
 			backgroundColor: '#FFF',
@@ -106,32 +116,67 @@ const LoginFormUI = (props: LoginParams) => {
 			marginBottom: 7,
 		},
 		recaptchaIcon: {
-		width: 100,
-		height: 100,
-		}
+			width: 100,
+			height: 100,
+		},
+		borderStyleBase: {
+			width: 30,
+			height: 45
+		},
+
+		borderStyleHighLighted: {
+			borderColor: "#03DAC6",
+		},
+
+		underlineStyleBase: {
+			width: 45,
+			height: 60,
+			borderWidth: 1,
+			fontSize: 16
+		},
+
+		underlineStyleHighLighted: {
+			borderColor: theme.colors.primary,
+			color: theme.colors.primary,
+			fontSize: 16
+		},
 	});
 
 	const emailRef = useRef<any>({});
 	const passwordRef = useRef<any>({});
-  	const recaptchaRef = useRef<any>({});
+	const recaptchaRef = useRef<any>({});
 
 	const handleChangeTab = (val: string) => {
 		props.handleChangeTab(val);
 		setPasswordSee(false);
 	};
 
-	const onSubmit = (values: any) => {
+	const onSubmit = (values?: any) => {
 		Keyboard.dismiss();
-		if (phoneInputData.error) {
-			showToast(ToastType.Error, phoneInputData.error);
-			return;
+		if (loginTab === 'otp') {
+			if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
+				showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
+				return
+			}
+			if (loginTab === 'otp') {
+				generateOtpCode({
+					...values,
+					...phoneInputData.phone
+				})
+			}
+			setWillVerifyOtpState(true)
+		} else {
+			if (phoneInputData.error) {
+				showToast(ToastType.Error, phoneInputData.error);
+				return;
+			}
+			handleButtonLoginClick({
+				...values,
+				...phoneInputData.phone,
+			});
 		}
-		handleButtonLoginClick({
-			...values,
-			...phoneInputData.phone,
-		});
-	};
 
+	};
 	const handleVerifyCodeClick = () => {
 		if (phoneInputData.error) {
 			showToast(ToastType.Error, phoneInputData.error);
@@ -166,9 +211,9 @@ const LoginFormUI = (props: LoginParams) => {
 		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
 	};
 
-  	const handleOpenRecaptcha = () => {
+	const handleOpenRecaptcha = () => {
 		setRecaptchaVerified(false)
-	  	if (!recaptchaConfig?.siteKey) {
+		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
 			return
 		}
@@ -176,14 +221,33 @@ const LoginFormUI = (props: LoginParams) => {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
 			return
 		}
+
 		recaptchaRef.current.open()
-  	}
+	}
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
 		handleReCaptcha(token)
 	}
 
+	const handleChangeOtpType = (type: string) => {
+		handleChangeTab('otp')
+		setOtpType(type)
+	}
+
+	const handleLoginOtp = (code: string) => {
+		handleButtonLoginClick({ code })
+		setWillVerifyOtpState(false)
+	}
+
+	const closeAlert = () => {
+		setAlertState({
+			open: false,
+			title: '',
+			content: []
+		})
+	}
+
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
 			setRecaptchaConfig({
@@ -231,16 +295,26 @@ const LoginFormUI = (props: LoginParams) => {
 	}, [phoneInputData?.phone?.cellphone])
 
 	useEffect(() => {
-    register('cellphone', {
-      required: loginTab === 'cellphone'
-        ? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
-        : null
-    })
-  }, [register])
+		register('cellphone', {
+			required: loginTab === 'cellphone'
+				? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+				: null
+		})
+	}, [register])
 
 	useEffect(() => {
-    reset()
-  }, [loginTab])
+		reset()
+	}, [loginTab])
+
+	useEffect(() => {
+		if (checkPhoneCodeState?.result?.error) {
+			setAlertState({
+				open: true,
+				content: t(checkPhoneCodeState?.result?.error, checkPhoneCodeState?.result?.error),
+				title: ''
+			})
+		}
+	}, [checkPhoneCodeState])
 
 	return (
 		<Container>
@@ -255,9 +329,9 @@ const LoginFormUI = (props: LoginParams) => {
 				titleStyle={{ marginRight: 0, marginLeft: 0 }}
 			/>
 			<FormSide>
-				{useLoginByEmail && useLoginByCellphone && (
+				{((useLoginByEmail && useLoginByCellphone) || useLoginOtp) && (
 					<LoginWith>
-						<OTabs>
+						<OTabs horizontal>
 							{useLoginByEmail && (
 								<TabBtn onPress={() => handleChangeTab('email')}>
 									<OTab
@@ -302,13 +376,57 @@ const LoginFormUI = (props: LoginParams) => {
 									</OTab>
 								</TabBtn>
 							)}
+							{useLoginOtpEmail && (
+								<TabBtn onPress={() => handleChangeOtpType('email')}>
+									<OTab
+										style={{
+											borderBottomColor:
+												isOtpEmail
+													? theme.colors.textNormal
+													: theme.colors.border,
+										}}>
+										<OText
+											size={14}
+											color={
+												isOtpEmail
+													? theme.colors.textNormal
+													: theme.colors.disabled
+											}
+											weight={isOtpEmail ? 'bold' : 'normal'}>
+											{t('LOGIN_BY_OTP_EMAIL', 'Login by Otp Email')}
+										</OText>
+									</OTab>
+								</TabBtn>
+							)}
+							{useLoginOtpCellphone && (
+								<TabBtn onPress={() => handleChangeOtpType('cellphone')}>
+									<OTab
+										style={{
+											borderBottomColor:
+												isOtpCellphone
+													? theme.colors.textNormal
+													: theme.colors.border,
+										}}>
+										<OText
+											size={14}
+											color={
+												isOtpCellphone
+													? theme.colors.textNormal
+													: theme.colors.disabled
+											}
+											weight={isOtpCellphone ? 'bold' : 'normal'}>
+											{t('LOGIN_BY_OTP_PHONE', 'Login by Otp Phone')}
+										</OText>
+									</OTab>
+								</TabBtn>
+							)}
 						</OTabs>
 					</LoginWith>
 				)}
 
-				{(useLoginByCellphone || useLoginByEmail) && (
+				{(useLoginByCellphone || useLoginByEmail || useLoginOtp) && (
 					<FormInput>
-						{useLoginByEmail && loginTab === 'email' && (
+						{((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
 							<>
 								{errors?.email && (
 									<OText
@@ -344,10 +462,10 @@ const LoginFormUI = (props: LoginParams) => {
 									rules={{
 										required: {
 											value: true,
-											message: 	t(
-											'VALIDATION_ERROR_EMAIL_REQUIRED',
-											'The field Email is required',
-										).replace('_attribute_', t('EMAIL', 'Email'))
+											message: t(
+												'VALIDATION_ERROR_EMAIL_REQUIRED',
+												'The field Email is required',
+											).replace('_attribute_', t('EMAIL', 'Email'))
 										},
 										pattern: {
 											value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
@@ -362,7 +480,7 @@ const LoginFormUI = (props: LoginParams) => {
 							</>
 
 						)}
-						{useLoginByCellphone && loginTab === 'cellphone' && (
+						{((useLoginByCellphone && loginTab === 'cellphone') || (loginTab === 'otp' && otpType === 'cellphone')) && (
 							<View style={{ marginBottom: 28 }}>
 								<PhoneInputNumber
 									data={phoneInputData}
@@ -383,53 +501,56 @@ const LoginFormUI = (props: LoginParams) => {
 								{errors?.password?.message}{errors?.password?.type === 'required' && '*'}
 							</OText>
 						)}
-						<Controller
-							control={control}
-							render={({ onChange, value }: any) => (
-								<OInput
-									isSecured={!passwordSee ? true : false}
-									placeholder={t('PASSWORD', 'Password')}
-									style={{...loginStyle.inputStyle, marginBottom: 14}}
-									icon={theme.images.general.lock}
-									iconCustomRight={
-										!passwordSee ? (
-											<MaterialCommunityIcons
-												name="eye-outline"
-												size={24}
-												onPress={() => setPasswordSee(!passwordSee)}
-												color={theme.colors.disabled}
-											/>
-										) : (
-											<MaterialCommunityIcons
-												name="eye-off-outline"
-												size={24}
-												onPress={() => setPasswordSee(!passwordSee)}
-												color={theme.colors.disabled}
-											/>
-										)
+						{loginTab !== 'otp' && (
+
+							<Controller
+								control={control}
+								render={({ onChange, value }: any) => (
+									<OInput
+										isSecured={!passwordSee ? true : false}
+										placeholder={t('PASSWORD', 'Password')}
+										style={{ ...loginStyle.inputStyle, marginBottom: 14 }}
+										icon={theme.images.general.lock}
+										iconCustomRight={
+											!passwordSee ? (
+												<MaterialCommunityIcons
+													name="eye-outline"
+													size={24}
+													onPress={() => setPasswordSee(!passwordSee)}
+													color={theme.colors.disabled}
+												/>
+											) : (
+												<MaterialCommunityIcons
+													name="eye-off-outline"
+													size={24}
+													onPress={() => setPasswordSee(!passwordSee)}
+													color={theme.colors.disabled}
+												/>
+											)
+										}
+										value={value}
+										forwardRef={passwordRef}
+										onChange={(val: any) => onChange(val)}
+										returnKeyType="done"
+										onSubmitEditing={handleSubmit(onSubmit)}
+										blurOnSubmit
+										borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
+									/>
+								)}
+								name="password"
+								rules={{
+									required: {
+										value: true,
+										message: t(
+											'VALIDATION_ERROR_PASSWORD_REQUIRED',
+											'The field Password is required',
+										).replace('_attribute_', t('PASSWORD', 'Password'))
 									}
-									value={value}
-									forwardRef={passwordRef}
-									onChange={(val: any) => onChange(val)}
-									returnKeyType="done"
-									onSubmitEditing={handleSubmit(onSubmit)}
-									blurOnSubmit
-									borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
-								/>
-							)}
-							name="password"
-							rules={{
-								required: {
-									value: true,
-									message: t(
-									'VALIDATION_ERROR_PASSWORD_REQUIRED',
-									'The field Password is required',
-								).replace('_attribute_', t('PASSWORD', 'Password'))
-								}
-							}}
-							defaultValue=""
-						/>
-						{onNavigationRedirect && forgotButtonText && (
+								}}
+								defaultValue=""
+							/>
+						)}
+						{onNavigationRedirect && forgotButtonText && loginTab !== 'otp' && (
 							<TouchableOpacity onPress={() => onNavigationRedirect('Forgot')}>
 								<OText size={14} mBottom={18}>
 									{forgotButtonText}
@@ -468,10 +589,9 @@ const LoginFormUI = (props: LoginParams) => {
 								/>
 							</>
 						)}
-
 						<OButton
 							onClick={handleSubmit(onSubmit)}
-							text={loginButtonText}
+							text={loginTab !== 'otp' ? loginButtonText : t('GET_VERIFY_CODE', 'Get verify code')}
 							bgColor={theme.colors.primary}
 							borderColor={theme.colors.primary}
 							textStyle={{ color: 'white' }}
@@ -480,11 +600,11 @@ const LoginFormUI = (props: LoginParams) => {
 							style={{ borderRadius: 7.6, marginTop: 10, marginBottom: 25 }}
 						/>
 						{onNavigationRedirect && registerButtonText && (
-							<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
+							<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
 								<OText size={14}>
 									{t('NEW_ON_PLATFORM', 'New on Ordering?')}
 								</OText>
-							<TouchableOpacity onPress={() => onNavigationRedirect('Signup')}>
+								<TouchableOpacity onPress={() => onNavigationRedirect('Signup')}>
 									<OText size={14} mLeft={5} color={theme.colors.skyBlue}>
 										{t('CREATE_ACCOUNT', 'Create account')}
 									</OText>
@@ -495,11 +615,11 @@ const LoginFormUI = (props: LoginParams) => {
 				)}
 
 				{useLoginByCellphone &&
-          loginTab === 'cellphone' &&
-          configs && Object.keys(configs).length > 0 &&
-          (configs?.twilio_service_enabled?.value === 'true' ||
-            configs?.twilio_service_enabled?.value === '1') &&
-          configs?.twilio_module?.value && (
+					loginTab === 'cellphone' &&
+					configs && Object.keys(configs).length > 0 &&
+					(configs?.twilio_service_enabled?.value === 'true' ||
+						configs?.twilio_service_enabled?.value === '1') &&
+					configs?.twilio_module?.value && (
 						<>
 							<OrSeparator>
 								<LineSeparator />
@@ -524,59 +644,59 @@ const LoginFormUI = (props: LoginParams) => {
 					)}
 
 				{configs && Object.keys(configs).length > 0 ? (
-          (((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
-          (configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
-          (
-            <>
-            	<View
-                style={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  marginVertical: 15
-                }}>
-                <View style={loginStyle.line} />
-                <OText
-                  size={14}
-                  mBottom={10}
-                  style={{ paddingHorizontal: 19 }}
-                  color={theme.colors.disabled}>
-                  {t('OR', 'or')}
-                </OText>
-                <View style={loginStyle.line} />
-              </View>
-              <ButtonsWrapper>
-                <SocialButtons>
-                  {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-                    configs?.facebook_id?.value && (
-                    <FacebookLogin
-                      notificationState={notificationState}
-                      handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                      handleLoading={(val: boolean) => setIsFBLoading(val)}
-                      handleSuccessFacebookLogin={handleSuccessFacebook}
-                    />
-                  )}
-                  {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
-                    <GoogleLogin
-                      notificationState={notificationState}
-                      webClientId={configs?.google_login_client_id?.value}
-                      handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                      handleLoading={(val: boolean) => setIsFBLoading(val)}
-                      handleSuccessGoogleLogin={handleSuccessFacebook}
-                    />
-                  )}
-                  {(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
-                    <AppleLogin
-                      notificationState={notificationState}
-                      handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                      handleLoading={(val: boolean) => setIsFBLoading(val)}
-                      handleSuccessAppleLogin={handleSuccessFacebook}
-                    />
-                  )}
-                </SocialButtons>
-              </ButtonsWrapper>
-            </>
+					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
+						(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
+					(
+						<>
+							<View
+								style={{
+									flexDirection: 'row',
+									width: '100%',
+									justifyContent: 'space-between',
+									alignItems: 'center',
+									marginVertical: 15
+								}}>
+								<View style={loginStyle.line} />
+								<OText
+									size={14}
+									mBottom={10}
+									style={{ paddingHorizontal: 19 }}
+									color={theme.colors.disabled}>
+									{t('OR', 'or')}
+								</OText>
+								<View style={loginStyle.line} />
+							</View>
+							<ButtonsWrapper>
+								<SocialButtons>
+									{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
+										configs?.facebook_id?.value && (
+											<FacebookLogin
+												notificationState={notificationState}
+												handleErrors={(err: any) => showToast(ToastType.Error, err)}
+												handleLoading={(val: boolean) => setIsFBLoading(val)}
+												handleSuccessFacebookLogin={handleSuccessFacebook}
+											/>
+										)}
+									{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+										<GoogleLogin
+											notificationState={notificationState}
+											webClientId={configs?.google_login_client_id?.value}
+											handleErrors={(err: any) => showToast(ToastType.Error, err)}
+											handleLoading={(val: boolean) => setIsFBLoading(val)}
+											handleSuccessGoogleLogin={handleSuccessFacebook}
+										/>
+									)}
+									{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+										<AppleLogin
+											notificationState={notificationState}
+											handleErrors={(err: any) => showToast(ToastType.Error, err)}
+											handleLoading={(val: boolean) => setIsFBLoading(val)}
+											handleSuccessAppleLogin={handleSuccessFacebook}
+										/>
+									)}
+								</SocialButtons>
+							</ButtonsWrapper>
+						</>
 					)
 				) : (
 					<SkeletonWrapper>
@@ -592,24 +712,12 @@ const LoginFormUI = (props: LoginParams) => {
 						</Placeholder>
 					</SkeletonWrapper>
 				)}
-
-				{/* {onNavigationRedirect && registerButtonText && (
-          <ButtonsWrapper>
-            <OButton
-              onClick={() => onNavigationRedirect('Signup')}
-              text={registerButtonText}
-              style={loginStyle.btnOutline}
-              borderColor={theme.colors.primary}
-              imgRightSrc={null}
-            />
-          </ButtonsWrapper>
-        )} */}
 			</FormSide>
 			<OModal
 				open={isModalVisible}
 				onClose={() => setIsModalVisible(false)}
-        entireModal
-        title={t('VERIFY_PHONE', 'Verify Phone')}
+				entireModal
+				title={t('VERIFY_PHONE', 'Verify Phone')}
 			>
 				<VerifyPhone
 					phone={phoneInputData.phone}
@@ -618,9 +726,30 @@ const LoginFormUI = (props: LoginParams) => {
 					handleCheckPhoneCode={handleCheckPhoneCode}
 					setCheckPhoneCodeState={setCheckPhoneCodeState}
 					handleVerifyCodeClick={handleVerifyCodeClick}
-          onClose={() => setIsModalVisible(false)}
+					onClose={() => setIsModalVisible(false)}
+				/>
+			</OModal>
+			<OModal
+				open={willVerifyOtpState}
+				onClose={() => setWillVerifyOtpState(false)}
+				entireModal
+				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			>
+				<Otp
+					willVerifyOtpState={willVerifyOtpState}
+					setWillVerifyOtpState={setWillVerifyOtpState}
+					handleLoginOtp={handleLoginOtp}
+					onSubmit={onSubmit}
+					setAlertState={setAlertState}
 				/>
 			</OModal>
+			<Alert
+				open={alertState.open}
+				content={alertState.content}
+				title={alertState.title || ''}
+				onAccept={closeAlert}
+				onClose={closeAlert}
+			/>
 			<Spinner visible={isFBLoading} />
 		</Container>
 	);
@@ -629,7 +758,7 @@ const LoginFormUI = (props: LoginParams) => {
 export const LoginForm = (props: any) => {
 	const loginProps = {
 		...props,
-    isRecaptchaEnable: true,
+		isRecaptchaEnable: true,
 		UIComponent: LoginFormUI,
 	};
 	return <LoginFormController {...loginProps} />;

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

@@ -386,16 +386,23 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }
 
   useEffect(() => {
+    const _businessId = 'businessId:' + businessData?.id
     if (reorderState?.error) {
-      const _businessId = 'businessId:' + businessData?.id
-      const _uuid = carts[_businessId]?.uuid
-      if (_uuid) {
-        _setStoreData('remove-cartId', JSON.stringify(_uuid))
+      if (businessData?.id) {
+        _setStoreData('adjust-cart-products', JSON.stringify(_businessId))
         navigation.navigate('Business', { store: businessData?.slug })
       }
     }
-    if (!reorderState?.error && reorderState?.result?.uuid) {
-      onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
+    if (!reorderState?.error && reorderState.loading === false && businessData?.id) {
+      const products = carts?.[_businessId]?.products
+      const available = products.every((product: any) => product.valid === true)
+
+      if (available && reorderState?.result?.uuid) {
+        onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
+      } else {
+        _setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+        navigation.navigate('Business', { store: businessData?.slug })
+      }
     }
   }, [reorderState])
 

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

@@ -19,6 +19,12 @@ export interface LoginParams {
 	notificationState?: any;
 	handleReCaptcha?: any;
     enableReCaptcha?: any;
+	otpType?: string,
+	setOtpType: (type : string) => void,
+	generateOtpCode: (values ?: any) => void,
+	useLoginOtpEmail?: boolean,
+	useLoginOtpCellphone?: boolean,
+	useLoginOtp?: boolean
 }
 export interface ProfileParams {
 	navigation?: any;
@@ -198,6 +204,9 @@ export interface BusinessProductsListingParams {
 	header?: any;
 	logo?: any;
 	productModal?: any;
+	alertState?: { open: boolean, content: any[] };
+	setAlertState?: any;
+	multiRemoveProducts?: (in1: any, in2: any) => {};
 	getNextProducts?: () => {};
 	handleChangeCategory: (value: any) => {};
 	setProductLogin?: () => {};
@@ -597,4 +606,12 @@ export interface SessionsParams {
     actionState: any,
     handleDeleteSession: any,
     handleDeleteAllSessions: any
-}
+}
+
+export interface otpParams {
+	willVerifyOtpState: boolean,
+	setWillVerifyOtpState: (val : boolean) => void,
+	onSubmit: () => void,
+	handleLoginOtp: (code : string) => void,
+	setAlertState: any
+}

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

@@ -212,4 +212,20 @@ export const formatUrlVideo = (url : string) => {
   const match = url.match(regExp)
   const id = (match && match[7].length === 11) ? match[7] : false
   return `https://www.youtube-nocookie.com/embed/${id}`
-}
+}
+
+export const formatSeconds = (seconds : number) => {
+  // Hours, minutes and seconds
+  var hrs = ~~(seconds / 3600)
+  var mins = ~~((seconds % 3600) / 60)
+  var secs = ~~seconds % 60
+
+  // Output like '1:01' or '4:03:59' or '123:03:59'
+  var ret = ''
+  if (hrs > 0) {
+    ret += '' + hrs + ':' + (mins < 10 ? '0' : '')
+  }
+  ret += '' + mins + ':' + (secs < 10 ? '0' : '')
+  ret += '' + secs
+  return ret
+}