ordering-ui-react-native 0.15.97 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.97",
+  "version": "0.16.0",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -123,7 +123,8 @@
     "@babel/core": "^7.11.6",
     "@babel/runtime": "^7.11.2",
     "@react-native-community/eslint-config": "^2.0.0",
-    "@types/react": "^16.9.51",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
     "@types/react-native": "^0.63.25",
     "babel-jest": "^26.3.0",
     "eslint": "^7.10.0",

package/src/components/StripeMethodForm/index.tsx

@@ -131,7 +131,7 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
 
   return (
     <>
-      {paymethod === 'google_pay' && (
+      {paymethod === 'google_pay' ? (
         <View>
           <OButton
             textStyle={{
@@ -145,27 +145,26 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
             style={{ marginTop: 20 }}
           />
         </View>
-        // ) : (
-        //   <View>
-        //     {isApplePaySupported ? (
-        //       <>
-        //         <OText>{t('APPLE_PAY_PAYMENT', 'Apple pay payment')}</OText>
-        //         <ApplePayButton
-        //           onPress={pay}
-        //           type="plain"
-        //           buttonStyle="black"
-        //           borderRadius={4}
-        //           style={{
-        //             width: '100%',
-        //             height: 50,
-        //           }}
-        //         />
-        //       </>
-        //     ) : (
-        //       <OText>{t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported')}</OText>
-        //     )}
-        //   </View>
-        // )}
+      ) : (
+        <View>
+          {isApplePaySupported ? (
+            <>
+              <OText>{t('APPLE_PAY_PAYMENT', 'Apple pay payment')}</OText>
+              <ApplePayButton
+                onPress={pay}
+                type="plain"
+                buttonStyle="black"
+                borderRadius={4}
+                style={{
+                  width: '100%',
+                  height: 50,
+                }}
+              />
+            </>
+          ) : (
+            <OText>{t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported')}</OText>
+          )}
+        </View>
       )}
       <Spinner
         visible={loadingGooglePayment}

package/src/components/UpsellingProducts/index.tsx

@@ -37,7 +37,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
     imageStyle: {
       width: 120,
       height: 90,
-      resizeMode: 'cover',
+      resizeMode: 'contain',
       borderRadius: 10
     },
     closeUpsellingButton: {

package/src/utils/index.tsx

@@ -450,7 +450,7 @@ export const orderCommentList = (value: string) => {
 
   if (!messages[status]) return null
 
-  const list = messages[status].map((val: any, i: number) => ({ key: i, value: val, content: t(`REJECT_REASON_${val.toUpperCase()}`, val.replaceAll('_', ' ')) }))
+  const list = messages[status].map((val: any, i: number) => ({ key: i, value: val, content: t(`REJECT_REASON_${val.toUpperCase()}`, val.replace(/_/g, ' ')) }))
 
   return { list }
 }

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

@@ -15,7 +15,7 @@ const LogoutButtonUI = (props: any) => {
     const data = await _retrieveStoreData('notification_state');
     const res = await handleLogoutClick(data);
     if (res) {
-      _clearStoreData({ excludedKeys: ['project_name'] });
+      _clearStoreData({ excludedKeys: ['isTutorial'] });
     }
   };
 

package/themes/kiosk/src/components/CartBottomSheet/index.tsx

@@ -62,6 +62,10 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
   }
 
   const handleEditProduct = (product: any) => {
+    if (props.onEditProduct) {
+      props.onEditProduct(product)
+      return
+    }
     setCurProduct(product)
     setModalIsOpen(true)
   }
@@ -148,7 +152,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
       <StyledBottomContent
         style={{bottom:10}}
         minHeight={props.height * 0.01}
-      > 
+      >
         <OButton
           text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
             !openUpselling !== canOpenUpselling ? `${t('CHECKOUT', 'Checkout')} ${parsePrice(cart?.total)}`: t('LOADING', 'Loading')
@@ -198,6 +202,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
           canOpenUpselling={canOpenUpselling}
           setCanOpenUpselling={setCanOpenUpselling}
           onClose={onCloseUpselling}
+          onAddProduct={props.onAddProduct}
           resetInactivityTimeout={resetInactivityTimeout}
         />
       )}
@@ -231,7 +236,7 @@ const TopBar = (props:any) => {
 			<OIconButton
         bgColor="transparent"
         borderColor="transparent"
-        RenderIcon={() => 
+        RenderIcon={() =>
             <EvilIcons
               name={'close'}
               size={40}
@@ -260,6 +265,8 @@ interface CartBottomSheetUIProps {
 	onNavigationRedirect: any,
   clearInactivityTimeout: any,
   resetInactivityTimeout: any,
+  onEditProduct: any,
+  onAddProduct: any,
 }
 
 export const CartBottomSheet = (props: any) => {

package/themes/kiosk/src/components/CartContent/index.tsx

@@ -1,10 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { useLanguage } from 'ordering-components/native';
 import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
-import { CCNotCarts } from './styles';
 
 import { Cart } from '../Cart';
-import { OText } from '../shared';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { Cart as TypeCart } from '../../types';
 
@@ -20,7 +17,6 @@ export const CartContent = (props: any) => {
     resetInactivityTimeout,
   }: Props = props
 
-  const [, t] = useLanguage()
   const [isCartsLoading, setIsCartsLoading] = useState(false)
   const [, { hideCartBottomSheet }] = useCartBottomSheet();
 
@@ -56,13 +52,6 @@ export const CartContent = (props: any) => {
           }
         </>
       )}
-      {/* {(!cart && showNotFound) && (
-        <CCNotCarts>
-          <OText size={24} style={{ textAlign: 'center' }}>
-            {t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
-          </OText>
-        </CCNotCarts>
-      )} */}
       <Spinner visible={isCartsLoading} />
     </>
   )

package/themes/kiosk/src/components/CategoriesMenu/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Dimensions, Platform, View } from 'react-native';
 import { useLanguage, useOrder, useUtils } from 'ordering-components/native';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -41,20 +41,22 @@ const CategoriesMenu = (props: any): React.ReactElement => {
 
   const theme = useTheme()
   const [, t] = useLanguage();
-  const [curIndexCateg, setIndexCateg] = useState(categories.indexOf(category));
   const [{ parsePrice }] = useUtils();
   const [orientationState] = useDeviceOrientation();
   const [bottomSheetVisibility, { showCartBottomSheet, hideCartBottomSheet }] = useCartBottomSheet();
-  const [productSelected, setProductSelected] = useState({})
+
+  const [productState, setProductState] = useState<any>(null)
+  const [productSelected, setProductSelected] = useState<any>({})
+  const [curIndexCateg, setIndexCateg] = useState(categories.indexOf(category));
   const [drawerState, setDrawerState] = useState({ isOpen: false, data: { order: null } });
 
   const width_dimension = Dimensions.get('window').width;
   const height_dimension = Dimensions.get('window').height;
-  
+
   const KeyboardView = styled.KeyboardAvoidingView`
     flex: 1;
   `;
-  
+
   const onChangeTabs = (idx: number) => {
     resetInactivityTimeout();
     setIndexCateg(idx);
@@ -76,6 +78,16 @@ const CategoriesMenu = (props: any): React.ReactElement => {
     cart = cartsList?.find((item: any) => item.business_id == businessId);
   }
 
+  const onEditProduct = (product: any) => {
+    setProductSelected({ ...product, _isEditProduct: true })
+    setDrawerValues({ isOpen: true, data: null })
+  }
+
+  const onAddProduct = (product: any) => {
+    setProductSelected(product)
+    setDrawerValues({ isOpen: true, data: null })
+  }
+
   const cartProps = {
     ...props,
     cart,
@@ -88,16 +100,32 @@ const CategoriesMenu = (props: any): React.ReactElement => {
       visible: bottomSheetVisibility,
       clearInactivityTimeout,
       resetInactivityTimeout,
+      onEditProduct,
+      onAddProduct
     },
     showNotFound: false,
     showCartBottomSheet,
   }
 
+  const onClickDrawer = () => {
+    setDrawerValues({ isOpen: !drawerState.isOpen, data: null })
+    setProductState(null)
+  }
+
+  const onSaveProductForm = () => {
+    showCartBottomSheet()
+    onClickDrawer()
+  }
+
   const onToggleCart = () => {
     if (bottomSheetVisibility) hideCartBottomSheet();
     else showCartBottomSheet();
   }
 
+  const onProductStateChange = useCallback((val: any) => {
+    setProductState({ ...productState, ...val })
+  }, [setProductState])
+
   return (
     <>
       <View style={{
@@ -144,12 +172,14 @@ const CategoriesMenu = (props: any): React.ReactElement => {
               onSelectItem={onChangeTabs}
             />
 
-            <GridContainer 
-              style={{ 
-                marginTop: 20, 
+            <GridContainer
+              style={{
+                marginTop: 20,
                 paddingLeft: orientationState?.orientation === LANDSCAPE
-                        ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.004 :orientationState?.dimensions?.width * 0.008
-                        : 0
+                  ? bottomSheetVisibility
+                    ? orientationState?.dimensions?.width * 0.004
+                    : orientationState?.dimensions?.width * 0.008
+                  : 0
               }}
             >
               {categories[curIndexCateg].products.map((product) => (
@@ -170,8 +200,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                   onPress={() => {
                     resetInactivityTimeout()
                     if (isDrawer) {
-                      setProductSelected(product)
-                      setDrawerValues({ isOpen: true, data: null })
+                      onAddProduct && onAddProduct(product)
                     } else {
                       navigation.navigate('ProductDetails', {
                         businessId,
@@ -191,23 +220,22 @@ const CategoriesMenu = (props: any): React.ReactElement => {
             </GridContainer>
           </Container>
         </View>
-
-          <View
-            style={{
-              flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
-              display: bottomSheetVisibility ? 'flex' : 'none'
-            }}
-          >
-            <CartContent
-              {...cartProps}
-            />
-          </View>
+        <View
+          style={{
+            flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
+            display: bottomSheetVisibility ? 'flex' : 'none'
+          }}
+        >
+          <CartContent
+            {...cartProps}
+          />
+        </View>
       </View>
       <DrawerView
         isOpen={drawerState.isOpen}
         width={width_dimension - (width_dimension * 0.4)}
         height={height_dimension}
-        onClickIcon={() => setDrawerValues({ isOpen: !drawerState.isOpen, data: null })}
+        onClickIcon={onClickDrawer}
       >
         <KeyboardView
           enabled
@@ -215,14 +243,24 @@ const CategoriesMenu = (props: any): React.ReactElement => {
         >
           <ProductForm
             isDrawer
-            product={productSelected}
-            businessId={parseInt(businessId, 10)}
-            businessSlug={businessSlug}
-            onSave={() => {
-              showCartBottomSheet()
-              setDrawerValues({ isOpen: !drawerState.isOpen, data: null })
-            }}
             navigation={navigation}
+            {...(productSelected?._isEditProduct ? {
+              isEdit: true,
+              productCart: productState?.productCart ?? productSelected,
+              product: productState?.product,
+              businessSlug: cart?.business?.slug,
+              businessId: cart?.business_id,
+              categoryId: productSelected?.category_id,
+              productId: productSelected?.id,
+            } : {
+              product: productSelected,
+              businessSlug: businessSlug,
+              businessId: parseInt(businessId, 10),
+              productState: productState,
+              productCart: productState,
+            })}
+            onSave={onSaveProductForm}
+            onProductStateChange={onProductStateChange}
           />
         </KeyboardView>
       </DrawerView>

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

@@ -6,8 +6,7 @@ import {
   StyleSheet,
   Animated,
   ScrollView,
-  Platform,
-  ImageBackground
+  ImageBackground,
 } from 'react-native'
 import {
   ProductForm as ProductOptions,
@@ -17,7 +16,6 @@ import {
   useUtils
 } from 'ordering-components/native'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import Spinner from 'react-native-loading-spinner-overlay'
 import { useTheme } from 'styled-components/native'
 
 import { ProductIngredient } from '../ProductIngredient'
@@ -32,12 +30,11 @@ import {
   ProductComment,
   ProductActions
 } from './styles'
-import { OButton, OImage, OInput, OText } from '../shared'
+import { OButton, OInput, OText } from '../shared'
 import { ProductOptionSubOption } from '../ProductOptionSubOption'
 import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
-import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
 
 export const ProductOptionsUI = (props: any) => {
   const {
@@ -56,7 +53,6 @@ export const ProductOptionsUI = (props: any) => {
     handleChangeCommentState,
     productObject,
     onClose,
-    isFromCheckout,
     isDrawer
   } = props;
 
@@ -66,7 +62,6 @@ export const ProductOptionsUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ auth }] = useSession();
   const [orientationState] = useDeviceOrientation();
-  const [, { showCartBottomSheet }] = useCartBottomSheet();
 
   const { product, loading, error } = productObject;
 
@@ -87,6 +82,8 @@ export const ProductOptionsUI = (props: any) => {
   const handleSaveProduct = () => {
     const isErrors = Object.values(errors).length > 0
     if (!isErrors) {
+      props.onProductStateChange &&
+      props.onProductStateChange(props.isEdit ? { product, productCart }: productCart)
       handleSave && handleSave()
       return
     }
@@ -503,12 +500,14 @@ export const ProductOptionsUI = (props: any) => {
             </WrapContent>
           </View>
         )}
+
         {error && error.length > 0 && (
           <NotFoundSource
             content={error[0]?.message || error[0]}
           />
         )}
       </ScrollView>
+
       {!loading && !error && product && (
         <ProductActions>
           {productCart && !isSoldOut && maxProductQuantity > 0 && (

package/themes/kiosk/src/components/UpsellingProducts/index.tsx

@@ -71,6 +71,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   }, [upsellingProducts.loading, upsellingProducts?.products.length])
 
   const handleFormProduct = (product: any) => {
+    if (props.onAddProduct) {
+      onClose && onClose()
+      props.onAddProduct(product)
+      return
+    }
     setActualProduct(product)
     setModalIsOpen(true)
   }
@@ -81,9 +86,18 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   }
 
   const UpsellingLayout = () => {
-
     const theme = useTheme()
 
+    const onClickProduct = (product: any) => {
+      resetInactivityTimeout()
+      if (props.onAddProduct) {
+        onClose && onClose()
+        props.onAddProduct(product)
+        return
+      }
+      handleFormProduct(product)
+    }
+
     return (
       <Container>
         {
@@ -167,10 +181,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                         style={{ height: 40, width: '100%' }}
                         bgColor="#EAF2FE"
                         borderColor="#EAF2FE"
-                        onClick={() => {
-                          resetInactivityTimeout()
-                          handleFormProduct(product)
-                        }}
+                        onClick={() => onClickProduct(product)}
                       />
                     </Item>
                   )) : (

package/themes/kiosk/src/types/index.d.ts

@@ -55,6 +55,7 @@ export interface UpsellingProductsParams {
   setCanOpenUpselling?: (value: any) => void;
   onClose?: () => void;
   resetInactivityTimeout: any;
+  onAddProduct: any;
 }
 
 export interface LanguageSelectorParams {

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

@@ -177,7 +177,16 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		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 alreadyRemoved = await _retrieveStoreData('already-removed')
+		_removeStoreData('already-removed')
+		if (unavailableProducts.length > 0) {
+			multiRemoveProducts && await multiRemoveProducts(unavailableProducts, _carts)
+			return
+		}
+	
+		if (alreadyRemoved === 'removed') {
+			setAlertState({ open: true, content: [t('NOT_AVAILABLE_PRODUCT', 'This product is not available.')] })
+		}
 	}
 
 	const removeCartByReOrder = async () => {

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

@@ -398,10 +398,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       const products = carts?.[_businessId]?.products
       const available = products.every((product: any) => product.valid === true)
 
-      if (available && reorderState?.result?.uuid) {
+      if (available && reorderState?.result?.uuid && (products?.length === order?.products.length)) {
         onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
       } else {
         _setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+        products?.length !== order?.products.length && _setStoreData('already-removed', JSON.stringify('removed'))
         navigation.navigate('Business', { store: businessData?.slug })
       }
     }

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

@@ -229,7 +229,7 @@ export const UserFormDetailsUI = (props: any) => {
 
 	useEffect(() => {
 		if (!phoneInputData.error && phoneInputData?.phone?.country_phone_code && phoneInputData?.phone?.cellphone) {
-			setWillVerifyOtpState(true)
+			setWillVerifyOtpState?.(true)
 		}
 	}, [phoneInputData])
 

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

@@ -7,6 +7,7 @@ import {
   TextInput,
   SafeAreaView,
   TouchableOpacity,
+  ScrollView,
 } from 'react-native';
 import {
   UserVerification as UserVerificationController,
@@ -81,7 +82,6 @@ const UserVerificationUI = (props: any) => {
   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);
@@ -155,7 +155,7 @@ const UserVerificationUI = (props: any) => {
 
     const containerStyle =
       containerIsFocused && isFocused
-        ? {...style.inputContainer, ...style.inputContainerFocused}
+        ? { ...style.inputContainer, ...style.inputContainerFocused }
         : style.inputContainer;
 
     return (
@@ -250,8 +250,8 @@ const UserVerificationUI = (props: any) => {
       showToast(
         ToastType.Error,
         verifyEmailState?.errorSendCode?.[0]
-          ?? verifyEmailState?.errorCheckCode?.[0]
-          ?? t('ERROR', 'Error'),
+        ?? verifyEmailState?.errorCheckCode?.[0]
+        ?? t('ERROR', 'Error'),
       );
       setTimeout(() => {
         cleanErrorsState();
@@ -264,8 +264,8 @@ const UserVerificationUI = (props: any) => {
       showToast(
         ToastType.Error,
         verifyPhoneState?.errorSendCode?.[0]
-          ?? verifyPhoneState?.errorCheckCode?.[0]
-          ?? t('ERROR', 'Error'),
+        ?? verifyPhoneState?.errorCheckCode?.[0]
+        ?? t('ERROR', 'Error'),
       );
       setTimeout(() => {
         cleanErrorsState();
@@ -296,209 +296,195 @@ const UserVerificationUI = (props: any) => {
 
   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')
-                )}
+      <ScrollView>
+        <Container>
+          <WrapperActions>
+            <WrapperText>
+              <OText size={22} weight='bold' style={{ marginBottom: 10 }}>
+                {t('VERIFICATION_CODE', 'Verification Code')}
               </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>
-              </>
+              {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>
+              )
+            ) : (
+              <>
+                <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={() => setModalIsOpen(true)}
+                    onPress={() => handleSendOtp('phone')}
+                    disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
                   >
                     <OText color={theme.colors.primary}>
-                      {t('UPDATE_PROFILE', 'Update profile')}
+                      {t('RESEND_AGAIN', 'Resend again?')}
                     </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 }}
+          )}
+
+        </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>
+        <View style={{ paddingHorizontal: 20, paddingBottom: 80 }}>
+          <UserDetails
+            user={user}
+            isEdit
+            isVerifiedPhone
           />
         </View>
-      </ButtonsActions>
-
-      <OModal
-        open={modalIsOpen}
-        entireModal
-        customClose
-        onClose={() => setModalIsOpen(false)}
-      >
-        <UserDetails
-          user={user}
-          handleSuccessUpdate={() => setModalIsOpen(false)}
-        />
-      </OModal>
+      </ScrollView>
     </SafeAreaView>
   )
 }