ordering-ui-react-native 0.14.66 → 0.14.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.66",
+  "version": "0.14.69",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -108,6 +108,7 @@
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^7.1.0",
     "react-native-webview": "^11.6.4",
+    "react-native-youtube-iframe": "^2.2.2",
     "rn-placeholder": "^3.0.3",
     "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",

package/src/components/shared/OIcon.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import { ImageStyle } from 'react-native'
 import styled from 'styled-components/native'
+import { useTheme } from 'styled-components/native'
 
 const Wrapper = styled.View``
 
@@ -23,10 +24,12 @@ interface Props {
 }
 
 const OImage = (props: Props): React.ReactElement => {
+  const theme = useTheme();
+  
   return (
     <Wrapper style={{ borderRadius: props.style?.borderRadius, overflow: 'hidden', marginHorizontal: props.style?.marginHorizontal }}>
       <SImage
-        source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy ? props.dummy : require('../../assets/icons/lunch.png')}
+        source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy ? props.dummy : theme.images.general.lunch || require('../../assets/icons/lunch.png')}
         style={{
           tintColor: props.color,
           flex: props.isWrap ? 1 : 0,

package/themes/original/index.tsx

@@ -32,7 +32,7 @@ import { Wallets } from './src/components/Wallets';
 import { PaymentOptionWallet } from './src/components/PaymentOptionWallet';
 import { ProductForm } from './src/components/ProductForm';
 import { UpsellingProducts } from './src/components/UpsellingProducts';
-import { VerifyEmail } from './src/components/VerifyEmail';
+import { UserVerification } from './src/components/UserVerification';
 
 import { Toast } from './src/components/shared/OToast';
 import {
@@ -95,7 +95,7 @@ export {
   PaymentOptionWallet,
   ProductForm,
   UpsellingProducts,
-  VerifyEmail,
+  UserVerification,
 
 	// OComponents
 	Toast,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ProductsList, useLanguage, useUtils } from 'ordering-components/native';
+import { ProductsList, useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessProductsListParams } from '../../types';
@@ -31,6 +31,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
   const [, t] = useLanguage();
   const [{ optimizeImage }] = useUtils()
+  const [{ configs }] = useConfig()
+  const isUseParentCategory = configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1'
 
   const handleOnLayout = (event: any, categoryId: any) => {
     const _categoriesLayout = { ...categoriesLayout }
@@ -80,52 +82,47 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           </View>
         )}
 
-      {!category.id &&
-        categories &&
-        categories
-          .filter((category) => category.id !== null)
-          .map((category, i, _categories) => {
-            const products =
-              categoryState.products?.filter(
-                (product: any) => product.category_id === category.id,
-              ) || [];
-            return (
-              <React.Fragment key={'cat_' + category.id}>
-                {products.length > 0 && (
-                  <>
-                    <View
-                      style={bpStyles.catWrap}
-                      onLayout={(event: any) => handleOnLayout(event, category.id)}
-                    >
-                      <View style={bpStyles.catIcon}>
-                        <OIcon
-                          url={optimizeImage(category.image, 'h_100,c_limit')}
-                          width={41}
-                          height={41}
-                          style={{ borderRadius: 7.6 }}
-                        />
-                      </View>
-                      <OText size={16} weight="600">
-                        {category.name}
-                      </OText>
-                    </View>
-                    <>
-                      {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
-                        <SingleProductCard
-                          key={i}
-                          isSoldOut={product.inventoried && !product.quantity}
-                          businessId={businessId}
-                          product={product}
-                          onProductClick={onProductClick}
-                          productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
-                        />
-                      ))}
-                    </>
-                  </>
-                )}
-              </React.Fragment>
-            );
-          })}
+      {!category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
+        const products = !isUseParentCategory
+          ? categoryState?.products?.filter((product : any) => product?.category_id === category?.id) ?? []
+          : categoryState?.products?.filter((product : any) => category?.children?.some((cat : any) => cat.category_id === product?.category_id)) ?? []
+        return (
+          <React.Fragment key={'cat_' + category.id}>
+            {products.length > 0 && (
+              <>
+                <View
+                  style={bpStyles.catWrap}
+                  onLayout={(event: any) => handleOnLayout(event, category.id)}
+                >
+                  <View style={bpStyles.catIcon}>
+                    <OIcon
+                      url={optimizeImage(category.image, 'h_100,c_limit')}
+                      width={41}
+                      height={41}
+                      style={{ borderRadius: 7.6 }}
+                    />
+                  </View>
+                  <OText size={16} weight="600">
+                    {category.name}
+                  </OText>
+                </View>
+                <>
+                  {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
+                    <SingleProductCard
+                      key={i}
+                      isSoldOut={product.inventoried && !product.quantity}
+                      businessId={businessId}
+                      product={product}
+                      onProductClick={onProductClick}
+                      productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                    />
+                  ))}
+                </>
+              </>
+            )}
+          </React.Fragment>
+        );
+      })}
 
       {(categoryState.loading || isBusinessLoading) && (
         <>

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

@@ -192,8 +192,9 @@ const CheckoutUI = (props: any) => {
 
 		if (
 			!user?.cellphone &&
-			validationFields?.fields?.checkout?.cellphone?.enabled &&
-			validationFields?.fields?.checkout?.cellphone?.required
+			((validationFields?.fields?.checkout?.cellphone?.enabled &&
+        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'))
 		}

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

@@ -21,7 +21,8 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		inputStyle,
 		textStyle,
 		flagStyle,
-		noDropIcon
+		noDropIcon,
+    isDisabled
 	} = props
 
 	const theme = useTheme();
@@ -98,6 +99,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		<Wrapper>
 			<PhoneInput
 				ref={phoneInput}
+        disabled={isDisabled}
 				defaultValue={userphoneNumber || defaultValue}
 				defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
 				onChangeFormattedText={(text: string) => handleChangeNumber(text)}

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import {
 	ProductForm as ProductOptions,
 	useSession,
@@ -12,11 +12,12 @@ import { ProductOption } from '../ProductOption';
 import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import YoutubePlayer from "react-native-youtube-iframe"
 import {
 	Grayscale
 } from 'react-native-color-matrix-image-filters'
 
-import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView, Button, Alert } from 'react-native';
 
 import {
 	WrapHeader,
@@ -158,6 +159,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [indexGallery, setIndexGallery] = useState(0)
 	const [selOpt, setSelectedOpt] = useState(0);
 	const [isHaveWeight, setIsHaveWeight] = useState(false)
+	const [playing, setPlaying] = useState(false);
 	const [qtyBy, setQtyBy] = useState({
 		weight_unit: false,
 		pieces: true
@@ -216,7 +218,7 @@ export const ProductOptionsUI = (props: any) => {
 
 	const handleRedirectLogin = () => {
 		navigation.navigate('Login', {
-			store_slug:  props.businessSlug
+			store_slug: props.businessSlug
 		});
 	};
 
@@ -224,15 +226,34 @@ export const ProductOptionsUI = (props: any) => {
 		setQtyBy({ [val]: true, [!val]: false })
 	}
 
+	const onStateChange = useCallback((state) => {
+		if (state === "ended") {
+			setPlaying(false);
+		}
+	}, []);
+
+	const togglePlaying = useCallback(() => {
+		setPlaying((prev) => !prev);
+	}, []);
+
 	useEffect(() => {
-		const productImgList: any = []
-		product?.images && productImgList.push(product.images)
+		const imageList: any = []
+		const videoList: any = []
+		product?.images && imageList.push(product.images)
 		if (product?.gallery && product?.gallery.length > 0) {
 			for (const img of product?.gallery) {
-				productImgList.push(img.file)
+				if (img?.file) {
+					imageList.push(img?.file)
+				}
+				if (img?.video) {
+					const keys = img?.video.split('/')
+					const _videoId = keys[keys.length - 1]
+					videoList.push(_videoId)
+				}
 			}
 		}
-		setGallery(productImgList)
+		const gallery = imageList.concat(videoList)
+		setGallery(gallery)
 
 		if (product?.weight && product?.weight_unit) {
 			setIsHaveWeight(true)
@@ -349,18 +370,30 @@ export const ProductOptionsUI = (props: any) => {
 											</View>
 										}
 									>
-										{gallery.length > 0 && gallery.map((img, i) => (
+										{gallery && gallery.length > 0 && gallery.map((img, i) => (
 											<View
 												style={styles.slide1}
 												key={i}
 											>
-												<FastImage
-													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
-													source={{
-														uri: optimizeImage(img, 'h_258,c_limit'),
-														priority: FastImage.priority.normal,
-													}}
-												/>
+												{img.includes('image') ? (
+													<FastImage
+														style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
+														source={{
+															uri: optimizeImage(img, 'h_258,c_limit'),
+															priority: FastImage.priority.normal,
+														}}
+													/>
+												) : (
+													<>
+														<YoutubePlayer
+															height={300}
+															play={playing}
+															videoId={img}
+															onChangeState={onStateChange}
+														/>
+														<Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
+													</>
+												)}
 											</View>
 										))}
 									</Swiper>
@@ -384,18 +417,33 @@ export const ProductOptionsUI = (props: any) => {
 														opacity: index === thumbsSwiper ? 1 : 0.8
 													}}
 												>
-													<OIcon
-														url={img}
-														style={{
-															borderColor: theme.colors.lightGray,
-															borderRadius: 8,
-															minHeight: '100%',
-															opacity: isSoldOut ? 0.5 : 1
-														}}
-														width={56}
-														height={56}
-														cover
-													/>
+													{img.includes('image') ? (
+														<OIcon
+															url={img}
+															style={{
+																borderColor: theme.colors.lightGray,
+																borderRadius: 8,
+																minHeight: '100%',
+																opacity: isSoldOut ? 0.5 : 1
+															}}
+															width={56}
+															height={56}
+															cover
+														/>
+													) : (
+														<OIcon
+															url={'http://img.youtube.com/vi/' + img + '/0.jpg'}
+															style={{
+																borderColor: theme.colors.lightGray,
+																borderRadius: 8,
+																minHeight: '100%',
+																opacity: isSoldOut ? 0.5 : 1
+															}}
+															width={56}
+															height={56}
+															cover
+														/>
+													)}
 												</View>
 											</TouchableOpacity>
 

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

@@ -97,9 +97,6 @@ const SignupFormUI = (props: SignupParams) => {
     }
 	});
 
-	const showInputPhoneNumber =
-		validationFields?.fields?.checkout?.cellphone?.enabled ?? false;
-
 	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
 	const [, { login }] = useSession();
@@ -130,6 +127,8 @@ const SignupFormUI = (props: SignupParams) => {
 	const phoneRef = useRef<any>(null);
 	const passwordRef = useRef<any>(null);
 
+  const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+
 	const handleRefs = (ref: any, code: string) => {
 		switch (code) {
 			case 'name': {
@@ -210,8 +209,9 @@ const SignupFormUI = (props: SignupParams) => {
 		if (
 			!phoneInputData.phone.country_phone_code &&
 			!phoneInputData.phone.cellphone &&
-			validationFields?.fields?.checkout?.cellphone?.enabled &&
-			validationFields?.fields?.checkout?.cellphone?.required
+			((validationFields?.fields?.checkout?.cellphone?.enabled &&
+        validationFields?.fields?.checkout?.cellphone?.required) ||
+        configs?.verification_phone_required?.value === '1')
 		) {
 			showToast(
 				ToastType.Error,
@@ -306,8 +306,9 @@ const SignupFormUI = (props: SignupParams) => {
 				!phoneInputData.error &&
 				!phoneInputData.phone.country_phone_code &&
 				!phoneInputData.phone.cellphone &&
-				validationFields?.fields?.checkout?.cellphone?.enabled &&
-				validationFields?.fields?.checkout?.cellphone?.required
+				((validationFields?.fields?.checkout?.cellphone?.enabled &&
+          validationFields?.fields?.checkout?.cellphone?.required) ||
+          configs?.verification_phone_required?.value === '1')
 			) {
 				list.push({
 					message: t(

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { useSession, useLanguage, ToastType, useToast } from 'ordering-components/native';
+import { useSession, useLanguage, ToastType, useToast, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { useForm, Controller } from 'react-hook-form';
 
@@ -62,6 +62,7 @@ export const UserFormDetailsUI = (props: any) => {
 	});
 
 	const [, t] = useLanguage();
+	const [{ configs }] = useConfig();
 	const [, { showToast }] = useToast();
 	const { handleSubmit, control, errors, setValue } = useForm();
 
@@ -75,8 +76,7 @@ export const UserFormDetailsUI = (props: any) => {
 		},
 	});
 
-	const showInputPhoneNumber =
-		validationFields?.fields?.checkout?.cellphone?.enabled ?? false;
+	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 
 	const getInputRules = (field: any) => {
 		const rules: any = {
@@ -132,8 +132,9 @@ export const UserFormDetailsUI = (props: any) => {
 		if (Object.keys(formState.changes).length > 0) {
 			if (
 				formState.changes?.cellphone === null &&
-				validationFields?.fields?.checkout?.cellphone?.enabled &&
-				validationFields?.fields?.checkout?.cellphone?.required
+				((validationFields?.fields?.checkout?.cellphone?.enabled &&
+          validationFields?.fields?.checkout?.cellphone?.required) ||
+          configs?.verification_phone_required?.value === '1')
 			) {
 				showToast(
 					ToastType.Error,

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

@@ -5,6 +5,7 @@ import {
 	useLanguage,
 	ToastType,
 	useToast,
+  useConfig
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { useForm } from 'react-hook-form';
@@ -56,6 +57,7 @@ const ProfileUI = (props: ProfileParams) => {
 	});
 
 	const [{ user }] = useSession();
+	const [{ configs }] = useConfig();
 	const [, t] = useLanguage();
 	const [, { showToast }] = useToast();
 	const { handleSubmit, errors, setValue, control } = useForm();
@@ -76,8 +78,9 @@ const ProfileUI = (props: ProfileParams) => {
 		}
 		if (
 			formState.changes.cellphone === '' &&
-			validationFields?.fields?.checkout?.cellphone?.enabled &&
-			validationFields?.fields?.checkout?.cellphone?.required
+			((validationFields?.fields?.checkout?.cellphone?.enabled &&
+        validationFields?.fields?.checkout?.cellphone?.required) ||
+        configs?.verification_phone_required?.value === '1')
 		) {
 			showToast(
 				ToastType.Error,

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

@@ -0,0 +1,514 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useTheme } from 'styled-components/native';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TextInput,
+  SafeAreaView,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  UserVerification as UserVerificationController,
+  UserFormDetails as UserFormController,
+  useToast,
+  useSession,
+  useLanguage,
+  ToastType,
+  useConfig
+} from 'ordering-components/native';
+
+import { OText, OInput, OButton, OModal } from '../shared';
+import { LogoutButton } from '../LogoutButton'
+import { UserFormDetailsUI } from '../UserFormDetails'
+import { PhoneInputNumber } from '../PhoneInputNumber';
+
+import {
+  Container,
+  InputsSection,
+  WrapperText,
+  InputWrapper,
+  WrappCountdown,
+  CountDownContainer,
+  OtpSection,
+  DigitInput,
+  ButtonsActions,
+  WrapperActions
+} from './styles'
+
+const TIME_COUNTDOWN = 60 * 10 // 10 minutes
+
+const UserDetails = (props: any) => {
+  const userDetailsProps = {
+    ...props,
+    isEdit: true,
+    useValidationFields: true,
+    useDefualtSessionManager: true,
+    UIComponent: UserFormDetailsUI
+  }
+
+  return <UserFormController {...userDetailsProps} />
+}
+
+const UserVerificationUI = (props: any) => {
+  const {
+    verifyEmailState,
+    verifyPhoneState,
+    sendVerifyEmailCode,
+    sendVerifyPhoneCode,
+    checkVerifyEmailCode,
+    checkVerifyPhoneCode,
+    cleanErrorsState,
+  } = props
+
+  const theme = useTheme();
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [{ auth, user }] = useSession()
+  const [, { showToast }] = useToast();
+
+  const isEmailVerifyRequired = auth && configs?.verification_email_required?.value === '1' && !user?.email_verified
+  const isPhoneVerifyRequired = auth && configs?.verification_phone_required?.value === '1' && !user?.phone_verified
+
+  const CODE_LENGTH = isEmailVerifyRequired ? 6 : 4
+
+  const ref = useRef<TextInput>(null);
+
+  const [otpState, setOtpState] = useState('')
+
+  const [timer, setTimer] = useState(`${TIME_COUNTDOWN / 60}:00`)
+  const [isSendCodeAgain, setIsSendCodeAgain] = useState(false)
+  const [containerIsFocused, setContainerIsFocused] = useState(false);
+
+  const [phoneState, setPhoneState] = useState<any>(null)
+  const [modalIsOpen, setModalIsOpen] = useState(false)
+  const [verificationState, setVerificationState] = useState({ email: false, phone: false })
+
+  const codeDigitsArray = new Array(CODE_LENGTH).fill(0);
+
+  const phoneLength = phoneState?.cellphone && phoneState?.country_phone_code && phoneState?.cellphone?.split('')?.length
+  const lastNumbers = phoneState?.cellphone && phoneState?.country_phone_code && phoneState?.cellphone?.split('').fill('*', 0, phoneLength - 2).join('')
+
+  const style = StyleSheet.create({
+    inputContainer: {
+      borderWidth: 1,
+      borderRadius: 7.6,
+      padding: 12,
+      borderColor: theme.colors.disabled,
+    },
+    inputContainerFocused: {
+      borderColor: theme.colors.primary,
+    },
+    hiddenCodeInput: {
+      position: 'absolute',
+      height: 0,
+      width: 0,
+      opacity: 0,
+    },
+    inputStyle: {
+      marginBottom: 28,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: 7.6,
+    },
+    btnStyle: {
+      borderRadius: 7.6,
+      marginTop: 5,
+      marginBottom: 2
+    },
+    phoneSelect: {
+      borderWidth: 0,
+      marginStart: -5,
+      marginEnd: 0,
+      marginTop: -3,
+      height: 32,
+      width: 44
+    },
+    phoneInputStyle: {
+      height: 30,
+      borderWidth: 1,
+      fontSize: 12,
+      paddingBottom: 0,
+      marginBottom: -0,
+      paddingHorizontal: 10
+    }
+  });
+
+  const handleOnPress = () => {
+    setContainerIsFocused(true);
+    ref?.current?.focus();
+  };
+
+  const handleOnBlur = () => {
+    setContainerIsFocused(false);
+  };
+
+  const toDigitInput = (_value: number, idx: number) => {
+    const emptyInputChar = '0';
+    const digit = otpState[idx] || emptyInputChar;
+
+    const isCurrentDigit = idx === otpState.length;
+    const isLastDigit = idx === CODE_LENGTH - 1;
+    const isCodeFull = otpState.length === CODE_LENGTH;
+
+    const isFocused = isCurrentDigit || (isLastDigit && isCodeFull);
+
+    const containerStyle =
+      containerIsFocused && isFocused
+        ? {...style.inputContainer, ...style.inputContainerFocused}
+        : style.inputContainer;
+
+    return (
+      <View key={idx} style={containerStyle}>
+        <Text
+          style={{
+            fontSize: 20,
+            color: otpState[idx] ? theme.colors.black : theme.colors.disabled
+          }}
+        >
+          {digit}
+        </Text>
+      </View>
+    );
+  };
+
+  const handleSendOtp = (opt: string = '') => {
+    setTimer(`${TIME_COUNTDOWN / 60}:00`)
+    setIsSendCodeAgain(true)
+    if (opt === 'phone') {
+      sendVerifyPhoneCode({
+        cellphone: phoneState?.cellphone,
+        country_phone_code: phoneState?.country_phone_code
+      })
+      return
+    }
+    sendVerifyEmailCode({ email: user?.email })
+  }
+
+  const setupUserPhoneNumber = () => {
+    if (!user || !user?.cellphone || !user?.country_phone_code) return
+    setPhoneState({
+      cellphone: user?.cellphone,
+      country_phone_code: user?.country_phone_code,
+      formatted: `+${user?.country_phone_code} ${user?.cellphone}`
+    })
+  }
+
+  useEffect(() => {
+    let _timer = TIME_COUNTDOWN - 1;
+    let minutes = 0;
+    let seconds = 0;
+    const interval = setInterval(() => {
+      minutes = _timer / 60;
+      seconds = _timer % 60;
+
+      minutes = minutes < 10 ? 0 + minutes : minutes;
+      seconds = seconds < 10 ? 0 + seconds : seconds;
+
+      const formatMinutes = parseInt(minutes.toString()) < 10
+        ? `0${parseInt(minutes.toString())}`
+        : parseInt(minutes.toString());
+
+      const formatseconds = parseInt(seconds.toString()) < 10
+        ? `0${parseInt(seconds.toString())}`
+        : parseInt(seconds.toString());
+
+      setTimer(`${formatMinutes}:${formatseconds}`);
+
+      if (--_timer < 0) {
+        clearInterval(interval);
+      }
+
+      if (timer === `${TIME_COUNTDOWN / 60}:00` && isSendCodeAgain) {
+        setIsSendCodeAgain(false)
+        clearInterval(interval);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval)
+  }, [isSendCodeAgain])
+
+  useEffect(() => {
+    if (otpState?.length === CODE_LENGTH) {
+      if (verificationState.email) {
+        checkVerifyEmailCode({ code: otpState })
+        return
+      }
+      if (verificationState.phone) {
+        checkVerifyPhoneCode({
+          cellphone: phoneState?.cellphone,
+          country_phone_code: +(phoneState?.country_phone_code),
+          code: otpState
+        })
+        return
+      }
+    }
+  }, [otpState])
+
+  useEffect(() => {
+    if (verifyEmailState?.errorSendCode || verifyEmailState?.errorCheckCode) {
+      showToast(
+        ToastType.Error,
+        verifyEmailState?.errorSendCode?.[0]
+          ?? verifyEmailState?.errorCheckCode?.[0]
+          ?? t('ERROR', 'Error'),
+      );
+      setTimeout(() => {
+        cleanErrorsState();
+        cleanErrorsState('phone');
+        setOtpState('');
+      }, 2000);
+    }
+
+    if (verifyPhoneState?.errorSendCode || verifyPhoneState?.errorCheckCode) {
+      showToast(
+        ToastType.Error,
+        verifyPhoneState?.errorSendCode?.[0]
+          ?? verifyPhoneState?.errorCheckCode?.[0]
+          ?? t('ERROR', 'Error'),
+      );
+      setTimeout(() => {
+        cleanErrorsState();
+        cleanErrorsState('phone');
+        setOtpState('');
+      }, 2000);
+    }
+  }, [verifyEmailState, verifyPhoneState])
+
+  useEffect(() => {
+    if (!verifyEmailState?.loadingSendCode && isEmailVerifyRequired) {
+      setVerificationState({
+        ...verificationState,
+        email: !!verifyEmailState?.resultSendCode
+      })
+    }
+    if (!verifyPhoneState?.loadingSendCode && isPhoneVerifyRequired && !isEmailVerifyRequired) {
+      setVerificationState({
+        ...verificationState,
+        phone: !!verifyPhoneState?.resultSendCode
+      })
+    }
+  }, [verifyEmailState, verifyPhoneState])
+
+  useEffect(() => {
+    setupUserPhoneNumber()
+  }, [user])
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <Container>
+        <WrapperActions>
+          <WrapperText>
+            <OText size={22} weight='bold' style={{ marginBottom: 10 }}>
+              {t('VERIFICATION_CODE', 'Verification Code')}
+            </OText>
+            {isEmailVerifyRequired && (
+              <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
+                {!verificationState.email ? (
+                  t('VERIFICATION_EMAIL_CODE_MESSAGE', 'In order to continue using our platform please verify your email')
+                ) : (
+                  t('VERIFICATION_EMAIL_CODE_SENT_MESSAGE', 'Please type the verification code sent to your email')
+                )}
+              </OText>
+            )}
+
+            {isPhoneVerifyRequired && !isEmailVerifyRequired && (
+              <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
+                {!verificationState.phone ? (
+                  t('VERIFICATION_PHONE_CODE_MESSAGE', 'In order to continue using our platform please verify your phone number')
+                ) : (
+                  t('VERIFICATION_PHONE_CODE_SENT_MESSAGE', 'Please, enter the verification code we sent to your mobile ending with :number').replace(':number', lastNumbers)
+                )}
+              </OText>
+            )}
+          </WrapperText>
+          <View style={{ position: 'absolute', top: 0, right: 0 }}>
+            <LogoutButton iconSize={20} />
+          </View>
+        </WrapperActions>
+
+        {isEmailVerifyRequired && (
+          !verificationState.email ? (
+            <InputWrapper>
+              <OInput
+                placeholder={user?.email}
+                style={style.inputStyle}
+                icon={theme.images.general.email}
+                isDisabled
+              />
+            </InputWrapper>
+          ) : (
+            <>
+              <WrappCountdown>
+                <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
+                  <OText
+                    size={26}
+                    color={timer === '00:00' ? theme.colors.error: theme.colors.success}
+                  >
+                    {timer}
+                  </OText>
+                </CountDownContainer>
+              </WrappCountdown>
+
+              <InputsSection>
+                <OtpSection>
+                  <DigitInput
+                    disabled={otpState.length === CODE_LENGTH}
+                    onPress={handleOnPress}
+                  >
+                    {codeDigitsArray.map(toDigitInput)}
+                  </DigitInput>
+                  <TextInput
+                    ref={ref}
+                    value={otpState}
+                    placeholder='0'
+                    onChangeText={setOtpState}
+                    onSubmitEditing={handleOnBlur}
+                    keyboardType="number-pad"
+                    returnKeyType="done"
+                    textContentType="oneTimeCode"
+                    maxLength={CODE_LENGTH}
+                    style={style.hiddenCodeInput}
+                  />
+                </OtpSection>
+              </InputsSection>
+
+              <WrapperText>
+                <TouchableOpacity
+                  onPress={() => handleSendOtp()}
+                >
+                  <OText color={theme.colors.primary}>
+                    {t('RESEND_AGAIN', 'Resend again?')}
+                  </OText>
+                </TouchableOpacity>
+              </WrapperText>
+            </>
+          )
+        )}
+
+        {isPhoneVerifyRequired && !isEmailVerifyRequired && (
+          !verificationState.phone ? (
+            phoneState?.formatted ? (
+              <>
+                <InputWrapper phone>
+                  <PhoneInputNumber
+                    handleData={() => {}}
+                    defaultValue={phoneState?.cellphone}
+                    defaultCode={phoneState?.country_phone_code.replace('+', '')}
+                    boxStyle={style.phoneSelect}
+                    inputStyle={style.phoneInputStyle}
+                    textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
+                    noDropIcon
+                    isDisabled
+                  />
+                </InputWrapper>
+              </>
+            ) : (
+              <>
+                <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
+                  {t('WARNING_PHONE_CODE_VALIDATION', 'Please update your phone number to continue')}
+                </OText>
+                <WrapperText>
+                  <TouchableOpacity
+                    onPress={() => setModalIsOpen(true)}
+                  >
+                    <OText color={theme.colors.primary}>
+                      {t('UPDATE_PROFILE', 'Update profile')}
+                    </OText>
+                  </TouchableOpacity>
+                </WrapperText>
+              </>
+            )
+          ) : (
+            <>
+              <WrappCountdown>
+                <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
+                  <OText
+                    size={26}
+                    color={timer === '00:00' ? theme.colors.error: theme.colors.success}
+                  >
+                    {timer}
+                  </OText>
+                </CountDownContainer>
+              </WrappCountdown>
+
+              <InputsSection>
+                <OtpSection>
+                  <DigitInput
+                    disabled={otpState.length === CODE_LENGTH}
+                    onPress={handleOnPress}
+                  >
+                    {codeDigitsArray.map(toDigitInput)}
+                  </DigitInput>
+                  <TextInput
+                    ref={ref}
+                    value={otpState}
+                    placeholder='0'
+                    onChangeText={setOtpState}
+                    onSubmitEditing={handleOnBlur}
+                    keyboardType="number-pad"
+                    returnKeyType="done"
+                    textContentType="oneTimeCode"
+                    maxLength={CODE_LENGTH}
+                    style={style.hiddenCodeInput}
+                  />
+                </OtpSection>
+              </InputsSection>
+
+              <WrapperText>
+                <TouchableOpacity
+                  onPress={() => handleSendOtp('phone')}
+                  disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+                >
+                  <OText color={theme.colors.primary}>
+                    {t('RESEND_AGAIN', 'Resend again?')}
+                  </OText>
+                </TouchableOpacity>
+              </WrapperText>
+            </>
+          )
+        )}
+
+      </Container>
+      <ButtonsActions>
+        <View style={{ width: '100%' }}>
+          <OButton
+            onClick={(verificationState.email || verificationState.phone)
+              ? () => setVerificationState({ email: false, phone: false })
+              : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
+            }
+            text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
+            bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+            borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+            textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
+            imgRightSrc={null}
+            isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+            style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
+          />
+        </View>
+      </ButtonsActions>
+
+      <OModal
+        open={modalIsOpen}
+        entireModal
+        customClose
+        onClose={() => setModalIsOpen(false)}
+      >
+        <UserDetails
+          user={user}
+          handleSuccessUpdate={() => setModalIsOpen(false)}
+        />
+      </OModal>
+    </SafeAreaView>
+  )
+}
+
+export const UserVerification = (props: any) => {
+  const verifyProps = {
+    ...props,
+    UIComponent: UserVerificationUI
+  }
+  return (
+    <UserVerificationController {...verifyProps} />
+  )
+}

package/themes/original/src/components/{VerifyEmail → UserVerification}/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 
 export const Container = styled.View`
   padding: 20px;
@@ -11,7 +11,13 @@ export const WrapperText = styled.View`
   align-items: center;
 `
 
-export const InputWrapper = styled.View``
+export const InputWrapper = styled.View`
+  ${(props: any) => props.phone && css`
+    width: 60%;
+    align-self: center;
+    padding-top: 20px;
+  `}
+`
 
 export const WrapperActions = styled.View`
   position: relative;

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

@@ -107,6 +107,7 @@ export interface PhoneInputParams {
 	textStyle?: any;
 	noDropIcon?: boolean;
 	flagStyle?: any;
+	isDisabled?: any;
 }
 
 export interface LanguageSelectorParams {
@@ -202,7 +203,7 @@ export interface BusinessProductsListParams {
 	errors?: any;
 	businessId?: number;
 	category?: any;
-	categories?: Array<any>;
+	categories: Array<any>;
 	categoryState?: any;
 	onProductClick?: any;
 	handleSearchRedirect?: () => {};

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

@@ -1,303 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { useTheme } from 'styled-components/native';
-import {
-  StyleSheet,
-  Text,
-  View,
-  TextInput,
-  SafeAreaView,
-  TouchableOpacity,
-} from 'react-native';
-import {
-  VerifyEmail as VerifyEmailController,
-  useToast,
-  useSession,
-  useLanguage,
-  ToastType
-} from 'ordering-components/native';
-
-import { OText, OInput, OButton } from '../shared';
-import { LogoutButton } from '../LogoutButton'
-
-import {
-  Container,
-  InputsSection,
-  WrapperText,
-  InputWrapper,
-  WrappCountdown,
-  CountDownContainer,
-  OtpSection,
-  DigitInput,
-  ButtonsActions,
-  WrapperActions
-} from './styles'
-
-const TIME_COUNTDOWN = 60 * 10 // 10 minutes
-const CODE_LENGTH = 6;
-
-const VerifyEmailUI = (props: any) => {
-  const {
-    verifyEmailState,
-    cleanErrorsState,
-    sendVerifyEmailCode,
-    checkVerifyEmailCode,
-  } = props
-
-  const theme = useTheme();
-  const [, t] = useLanguage()
-  const [{ user }] = useSession()
-  const [, { showToast }] = useToast();
-
-  const ref = useRef<TextInput>(null);
-
-  const [otpState, setOtpState] = useState('')
-  const [emailVerification, setEmailVerification] = useState(false)
-
-  const [timer, setTimer] = useState(`${TIME_COUNTDOWN / 60}:00`)
-  const [isSendCodeAgain, setIsSendCodeAgain] = useState(false)
-  const [containerIsFocused, setContainerIsFocused] = useState(false);
-
-  const codeDigitsArray = new Array(CODE_LENGTH).fill(0);
-
-  const style = StyleSheet.create({
-    inputContainer: {
-      borderWidth: 1,
-      borderRadius: 7.6,
-      padding: 12,
-      borderColor: theme.colors.disabled,
-    },
-    inputContainerFocused: {
-      borderColor: theme.colors.primary,
-    },
-    hiddenCodeInput: {
-      position: 'absolute',
-      height: 0,
-      width: 0,
-      opacity: 0,
-    },
-    inputStyle: {
-      marginBottom: 28,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      borderRadius: 7.6,
-    },
-    btnStyle: {
-      borderRadius: 7.6,
-      marginTop: 5,
-      marginBottom: 2
-    }
-  });
-
-  const handleOnPress = () => {
-    setContainerIsFocused(true);
-    ref?.current?.focus();
-  };
-
-  const handleOnBlur = () => {
-    setContainerIsFocused(false);
-  };
-
-  const toDigitInput = (_value: number, idx: number) => {
-    const emptyInputChar = '0';
-    const digit = otpState[idx] || emptyInputChar;
-
-    const isCurrentDigit = idx === otpState.length;
-    const isLastDigit = idx === CODE_LENGTH - 1;
-    const isCodeFull = otpState.length === CODE_LENGTH;
-
-    const isFocused = isCurrentDigit || (isLastDigit && isCodeFull);
-
-    const containerStyle =
-      containerIsFocused && isFocused
-        ? {...style.inputContainer, ...style.inputContainerFocused}
-        : style.inputContainer;
-
-    return (
-      <View key={idx} style={containerStyle}>
-        <Text
-          style={{
-            fontSize: 20,
-            color: otpState[idx] ? theme.colors.black : theme.colors.disabled
-          }}
-        >
-          {digit}
-        </Text>
-      </View>
-    );
-  };
-
-  const handleSendOtp = () => {
-    setTimer(`${TIME_COUNTDOWN / 60}:00`)
-    setIsSendCodeAgain(true)
-    sendVerifyEmailCode({ email: user?.email })
-  }
-
-  useEffect(() => {
-    let _timer = TIME_COUNTDOWN - 1;
-    let minutes = 0;
-    let seconds = 0;
-    const interval = setInterval(() => {
-      minutes = _timer / 60;
-      seconds = _timer % 60;
-
-      minutes = minutes < 10 ? 0 + minutes : minutes;
-      seconds = seconds < 10 ? 0 + seconds : seconds;
-
-      const formatMinutes = parseInt(minutes.toString()) < 10
-        ? `0${parseInt(minutes.toString())}`
-        : parseInt(minutes.toString());
-
-      const formatseconds = parseInt(seconds.toString()) < 10
-        ? `0${parseInt(seconds.toString())}`
-        : parseInt(seconds.toString());
-
-      setTimer(`${formatMinutes}:${formatseconds}`);
-
-      if (--_timer < 0) {
-        clearInterval(interval);
-      }
-
-      if (timer === `${TIME_COUNTDOWN / 60}:00` && isSendCodeAgain) {
-        setIsSendCodeAgain(false)
-        clearInterval(interval);
-      }
-    }, 1000);
-
-    return () => clearInterval(interval)
-  }, [isSendCodeAgain])
-
-  useEffect(() => {
-    if (otpState?.length === CODE_LENGTH) {
-      if (emailVerification) {
-        checkVerifyEmailCode({ code: otpState })
-        return
-      }
-    }
-  }, [otpState])
-
-  useEffect(() => {
-    if (verifyEmailState?.errorSendCode || verifyEmailState?.errorCheckCode) {
-      showToast(
-        ToastType.Error,
-        verifyEmailState?.errorSendCode?.[0]
-          ?? verifyEmailState?.errorCheckCode?.[0]
-          ?? t('ERROR', 'Error'),
-      );
-      setTimeout(() => {
-        cleanErrorsState();
-        setOtpState('');
-      }, 2000);
-    }
-  }, [verifyEmailState])
-
-  useEffect(() => {
-    if (!verifyEmailState?.loadingSendCode) {
-      setEmailVerification(!!verifyEmailState?.resultSendCode)
-    }
-  }, [verifyEmailState])
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <Container>
-        <WrapperActions>
-          <WrapperText>
-            <OText size={22} weight='bold' style={{ marginBottom: 10 }}>
-              {t('VERIFICATION_CODE', 'Verification Code')}
-            </OText>
-            <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
-              {!emailVerification ? (
-                t('VERIFICATION_CODE_MESSAGE', 'In order to continue using our platform please verify your email')
-              ) : (
-                t('VERIFICATION_CODE_SENT_MESSAGE', 'Please type the verification code sent to your email')
-              )}
-            </OText>
-          </WrapperText>
-          <View style={{ position: 'absolute', top: 0, right: 0 }}>
-            <LogoutButton iconSize={20} />
-          </View>
-        </WrapperActions>
-
-        {!emailVerification ? (
-          <InputWrapper>
-            <OInput
-              placeholder={user?.email}
-              style={style.inputStyle}
-              icon={theme.images.general.email}
-              isDisabled
-            />
-          </InputWrapper>
-        ) : (
-          <>
-            <WrappCountdown>
-              <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
-                <OText
-                  size={26}
-                  color={timer === '00:00' ? theme.colors.error: theme.colors.success}
-                >
-                  {timer}
-                </OText>
-              </CountDownContainer>
-            </WrappCountdown>
-
-            <InputsSection>
-              <OtpSection>
-                <DigitInput
-                  disabled={otpState.length === CODE_LENGTH}
-                  onPress={handleOnPress}
-                >
-                  {codeDigitsArray.map(toDigitInput)}
-                </DigitInput>
-                <TextInput
-                  ref={ref}
-                  value={otpState}
-                  placeholder='0'
-                  onChangeText={setOtpState}
-                  onSubmitEditing={handleOnBlur}
-                  keyboardType="number-pad"
-                  returnKeyType="done"
-                  textContentType="oneTimeCode"
-                  maxLength={CODE_LENGTH}
-                  style={style.hiddenCodeInput}
-                />
-              </OtpSection>
-            </InputsSection>
-
-            <WrapperText>
-              <TouchableOpacity
-                onPress={handleSendOtp}
-              >
-                <OText color={theme.colors.primary}>
-                  {t('RESEND_AGAIN', 'Resend again?')}
-                </OText>
-              </TouchableOpacity>
-            </WrapperText>
-          </>
-        )}
-      </Container>
-      <ButtonsActions>
-        <View style={{ width: '100%' }}>
-          <OButton
-            onClick={emailVerification ? () => setEmailVerification(false) : handleSendOtp}
-            text={emailVerification ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
-            bgColor={emailVerification ? theme.colors.secundary : theme.colors.primary}
-            borderColor={emailVerification ? theme.colors.secundary : theme.colors.primary}
-            textStyle={{ color: emailVerification ? 'black' : 'white' }}
-            imgRightSrc={null}
-            isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode}
-            style={emailVerification ? style.btnStyle : { borderRadius: 7.6 }}
-          />
-        </View>
-      </ButtonsActions>
-    </SafeAreaView>
-  )
-}
-
-export const VerifyEmail = (props: any) => {
-  const verifyProps = {
-    ...props,
-    UIComponent: VerifyEmailUI
-  }
-  return (
-    <VerifyEmailController {...verifyProps} />
-  )
-}