ordering-ui-react-native 0.15.56 → 0.15.58-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.56",
+  "version": "0.15.58-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -57,7 +57,7 @@
     "@types/styled-components": "^5.1.3",
     "axios": "^0.21.0",
     "moment": "^2.29.1",
-    "ordering-components": "github:Ordering-Inc/ordering-components#development",
+    "ordering-components": "github:Ordering-Inc/ordering-components#release",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prop-types": "^15.7.2",
@@ -109,6 +109,7 @@
     "react-native-sound": "^0.11.1",
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-swiper": "^1.6.0",
+    "react-native-tracking-transparency": "^0.1.1",
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^7.1.0",
     "react-native-webview": "^11.6.4",
@@ -123,7 +124,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.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-native": "^0.63.25",
     "babel-jest": "^26.3.0",
     "eslint": "^7.10.0",

package/src/DeliveryApp.tsx

@@ -7,7 +7,8 @@
  */
 
 import * as React from 'react';
-import { LogBox } from 'react-native';
+import { LogBox, Platform } from 'react-native';
+import * as Sentry from "@sentry/react-native";
 import { OrderingProvider } from 'ordering-components/native';
 import RNBootSplash from "react-native-bootsplash";
 
@@ -22,6 +23,47 @@ import theme from './theme.json';
 import AppContainer from './AppContainer';
 import { FacebookPixel } from './components/FacebookPixel';
 
+Sentry.init({
+  environment: Platform.OS === 'ios' ? 'ios' : 'android',
+  dsn: 'https://e5e1115dc93b49109f4ab65f2098bef9@o460529.ingest.sentry.io/5722123',
+  release: 'ordering-ui-native@' + process.env.npm_package_version,
+  ignoreErrors: [
+    'is not defined',
+    'is not a function',
+    'can\'t find variable',
+    'objects are not valid',
+    'element type is invalid',
+    'requiring module',
+    'has not been registered',
+    'failed to connect to debugger!',
+    'rendered more hooks than',
+    'rendered fewer hooks than',
+    'should have a queue',
+    'the OS most likely terminated',
+    'Connection timed out',
+    'java.io.EOFException',
+    'Abort',
+    'Segfault',
+    'Failed to allocate a',
+    'Application Not Responding',
+    'connection no longer valid',
+    'IllegalInstruction',
+    'React.Children.only expected to receive a single React element child.',
+    'unrecognized selector sent to instance'
+  ],
+  tracesSampleRate: 0.2,
+  // Release health
+  enableAutoSessionTracking: true,
+  // Sessions close after app is 10 seconds in the background.
+  sessionTrackingIntervalMillis: 10000,
+
+  integrations: [
+    new Sentry.ReactNativeTracing({
+      routingInstrumentation: reactNavigationV5Instrumentation,
+    })
+  ]
+});
+
 LogBox.ignoreLogs([
   'Sending \`onAnimatedValueUpdate` with no listeners registered.',
   'Non-serializable values were found in the navigation state.',

package/src/components/AddressForm/index.tsx

@@ -210,9 +210,25 @@ const AddressFormUI = (props: AddressFormParams) => {
             }
             if ( addressType === 'postal_code') {
               postalCode = component.short_name
+              if (isObjet) {
+                setValue('zipcode', postalCode)
+                handleChangeInput({ target: { name: 'zipcode', value: postalCode } })
+              }
             }
           }
           isObjet ? address = addressValue.join(', ') : address
+    
+          if (isObjet) {
+            setValue('address', address)
+            googleInput?.current?.setAddressText(address)
+            setLoadingLocation(false)
+            updateChanges({
+              address: address,
+              location: json.results[0].geometry.location
+            })
+            return
+          }
+        
           data.address = {
             address,
             location: json.results[0].geometry.location,
@@ -597,7 +613,7 @@ const AddressFormUI = (props: AddressFormParams) => {
                 name='zipcode'
                 rules={{ required: isRequiredField && isRequiredField('zipcode') ? t(`VALIDATION_ERROR_ZIP_CODE_REQUIRED`, `The field Zip Code is required`) : null }}
                 defaultValue={address?.zipcode || formState.changes?.zipcode || addressState.address.zipcode || ''}
-                render={() => (
+                render={({ value }) => (
                   <OInput
                     name='zipcode'
                     placeholder={t('ZIP_CODE', 'Zip code')}
@@ -605,7 +621,7 @@ const AddressFormUI = (props: AddressFormParams) => {
                       handleChangeInput(text)
                       setValue('zipcode', text)
                     }}
-                    value={address?.zipcode || formState.changes?.zipcode || addressState.address.zipcode || ''}
+                    value={value || address?.zipcode || formState.changes?.zipcode || addressState.address.zipcode || ''}
                     style={styles.inputsStyle}
                     forwardRef={zipCodeRef}
                     returnKeyType='next'

package/src/components/BusinessController/index.tsx

@@ -32,6 +32,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
     business,
     handleClick,
     isBusinessOpen,
+    getBusinessOffer,
     businessWillCloseSoonMinutes,
     isBusinessClose
   } = props;
@@ -145,11 +146,18 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
           />
         </BusinessLogo>
         <BusinessState>
-          {!isBusinessOpen && (
+          {(!isBusinessOpen || !!getBusinessOffer(business?.offers)) && (
             <View style={styles.businessStateView}>
-              <OText color={theme.colors.white} size={20} style={styles.businessStateText}>
-                {t('PREORDER', 'PREORDER')}
-              </OText>
+              {getBusinessOffer(business?.offers) && (
+                <OText color={theme.colors.white} size={18} style={styles.businessStateText}>
+                  {getBusinessOffer(business?.offers) || parsePrice(0)}
+                </OText>
+              )}
+              {!isBusinessOpen && (
+                <OText color={theme.colors.white} size={18} style={styles.businessStateText}>
+                  {t('PREORDER', 'PREORDER')}
+                </OText>
+              )}
             </View>
           )}
         </BusinessState>
@@ -158,10 +166,10 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
         <BusinessInfo>
           <View style={{ width: '70%', alignItems: 'flex-start' }}>
             <OText
-                size={20}
-                numberOfLines={1}
-                ellipsizeMode='tail'
-              >
+              size={20}
+              numberOfLines={1}
+              ellipsizeMode='tail'
+            >
               {business?.name}
             </OText>
           </View>

package/src/components/BusinessTypeFilter/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { StyleSheet, View, ScrollView, TouchableOpacity, Dimensions, Platform, PlatformIOSStatic } from 'react-native'
+import { StyleSheet, View, ScrollView, Dimensions, Platform, PlatformIOSStatic, TouchableOpacity } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessTypeFilter as BusinessTypeFilterController, useLanguage } from 'ordering-components/native'
 
@@ -71,11 +71,13 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
           <OIcon
             url={item.image}
             style={styles.logo}
+            cover
           />
         ) : (
           <OIcon
             src={theme.images.categories.all}
             style={styles.logo}
+            cover
           />
         )}
         <OText

package/src/components/BusinessesListing/index.tsx

@@ -191,7 +191,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
         {isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
       </OrderControlContainer>

package/src/components/Checkout/index.tsx

@@ -592,6 +592,19 @@ const CheckoutUI = (props: any) => {
                     {t('WARNING_INVALID_PRODUCTS', 'Some products are invalid, please check them.')}
                   </OText>
                 )}
+
+                {options.type === 1 &&
+                  validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                  validationFields?.fields?.checkout?.driver_tip?.required &&
+                  (Number(cart?.driver_tip) <= 0) && (
+                  <OText
+                    style={{ textAlign: 'center' }}
+                    color={theme.colors.error}
+                    size={14}
+                  >
+                    {t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
+                  </OText>
+								)}
               </ChErrors>
             </ChSection>
           )}
@@ -602,8 +615,16 @@ const CheckoutUI = (props: any) => {
           <>
             <FloatingButton
               handleClick={() => handlePlaceOrder()}
-              isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal'}
-              disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal'}
+              isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal' ||
+                              (options.type === 1 &&
+                                validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                                validationFields?.fields?.checkout?.driver_tip?.required &&
+                                (Number(cart?.driver_tip) <= 0))}
+              disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal' ||
+                        (options.type === 1 &&
+                          validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                          validationFields?.fields?.checkout?.driver_tip?.required &&
+                          (Number(cart?.driver_tip) <= 0))}
               btnText={cart?.subtotal_to_calculate >= cart?.minimum
                 ? (
                   placing

package/src/components/DriverTips/index.tsx

@@ -49,7 +49,7 @@ const DriverTipsUI = (props: any) => {
   const [{ configs }] = useConfig();
   const [{loading}] = useOrder()
 
-  const [value, setvalue] = useState(0);
+  const [value, setvalue] = useState('');
   const [valueOption,setValueOption] = useState(0)
 
   const placeholderCurrency = (configs?.currency_position?.value || 'left') === 'left'
@@ -57,9 +57,12 @@ const DriverTipsUI = (props: any) => {
     : `0${configs?.format_number_currency?.value}`
 
   const handleChangeDriverTip = (val: any) => {
-    let tip = parseFloat(val)
-    tip = isNaN(tip) ? 0 : tip
-    setvalue(tip)
+    const tip = Number(val)
+    if ((isNaN(tip) || tip < 0)) {
+      setvalue(value)
+      return
+    }
+    setvalue(val)
   }
 
   const handleChangeOptionCustom = (val : any) => {
@@ -110,6 +113,8 @@ const DriverTipsUI = (props: any) => {
             <OInput
               placeholder={placeholderCurrency}
               style={style.inputStyle}
+              value={value}
+              type={'numeric'}
               onChange={handleChangeDriverTip}
               autoCapitalize='none'
               autoCorrect={false}
@@ -121,10 +126,10 @@ const DriverTipsUI = (props: any) => {
               textStyle={{ color: 'white', fontSize: 18, maxWidth: 110, minWidth: 60 }}
               imgRightSrc={null}
               textProps={{numberOfLines: 1}}
-              isDisabled={!(value > 0 && value !== driverTip) || !value}
+              isDisabled={parseFloat(value || '0') < 0 || parseFloat(value || '0') === driverTip || value === ''}
               onClick={() => {
                 handlerChangeOption(value)
-                setvalue(0)
+                setvalue('')
               }}
             />
           </DTWrapperInput>

package/src/components/LanguageSelector/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { I18nManager, Platform, StyleSheet, View } from 'react-native'
@@ -87,7 +87,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     changeDirection(Platform.OS === 'ios' ? language : langCode)
     handleChangeLanguage(Platform.OS === 'ios' ? language : langCode)
   }
-
+  
+  useEffect(() => {
+    changeDirection(currentLanguage)
+  }, [])
+  
   return (
     <Container>
       {languagesState?.languages ? (
@@ -101,6 +105,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
           disabled={orderState.loading}
           onClose={() => Platform.OS === 'ios' ? handlerChangeLanguage() : {}}
           onDonePress={() => handlerChangeLanguage()}
+          fixAndroidTouchableBug={true}
         />
       ) : <DummyContainer />}
     </Container>

package/src/components/LoginForm/index.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { Pressable, StyleSheet, View, Keyboard } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import Recaptcha from 'react-native-recaptcha-that-works'
 
 import {
   LoginForm as LoginFormController,
@@ -28,7 +30,8 @@ import {
   OTab,
   SocialButtons,
   OrSeparator,
-  LineSeparator
+  LineSeparator,
+  RecaptchaButton
 } from './styles';
 
 import { _removeStoreData } from '../../providers/StoreUtil';
@@ -56,7 +59,9 @@ const LoginFormUI = (props: LoginParams) => {
     handleSendVerifyCode,
     handleCheckPhoneCode,
     onNavigationRedirect,
-    notificationState
+    notificationState,
+    handleReCaptcha,
+    enableReCaptcha
   } = props
 
   const theme = useTheme()
@@ -70,6 +75,10 @@ const LoginFormUI = (props: LoginParams) => {
       marginBottom: 25,
       borderWidth: 1,
       borderColor: theme.colors.disabled
+    },
+    recaptchaIcon: {
+      width: 100,
+      height: 100,
     }
   });
 
@@ -89,9 +98,13 @@ const LoginFormUI = (props: LoginParams) => {
       cellphone: null
     }
   });
-
+  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+  const recaptchaRef = useRef<any>({});
   const inputRef = useRef<any>({})
 
+  const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
+
   const anySocialButtonActivated = ((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) ||
     (configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null)
@@ -150,6 +163,40 @@ const LoginFormUI = (props: LoginParams) => {
     onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
   }
 
+  const handleOpenRecaptcha = () => {
+    setRecaptchaVerified(false)
+
+    if (recaptchaVerified) {
+      handleReCaptcha && handleReCaptcha('')
+      return
+    }
+
+    if (!recaptchaConfig?.siteKey) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+      return
+    }
+    if (!recaptchaConfig?.baseUrl) {
+      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 && handleReCaptcha(token)
+  }
+
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+      setRecaptchaConfig({
+        siteKey: configs?.security_recaptcha_site_key?.value || null,
+        baseUrl: configs?.security_recaptcha_base_url?.value || null
+      })
+    }
+  }, [configs, enableReCaptcha])
+
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
       formState.result?.result && showToast(
@@ -315,6 +362,48 @@ const LoginFormUI = (props: LoginParams) => {
               rules={{ required: t('VALIDATION_ERROR_PASSWORD_REQUIRED', 'The field Password is required').replace('_attribute_', t('PASSWORD', 'Password')) }}
               defaultValue=""
             />
+
+            {enableReCaptcha && (
+              <>
+                <TouchableOpacity
+                  onPress={handleOpenRecaptcha}
+                >
+                  <RecaptchaButton>
+                    {recaptchaVerified ? (
+                      <MaterialCommunityIcons
+                        name="checkbox-marked"
+                        size={26}
+                        color={theme.colors.primary}
+                      />
+                    ) : (
+                      <MaterialCommunityIcons
+                        name="checkbox-blank-outline"
+                        size={26}
+                        color={theme.colors.mediumGray}
+                      />
+                    )}
+                    <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+                  </RecaptchaButton>
+                </TouchableOpacity>
+                <Recaptcha
+                  ref={recaptchaRef}
+                  siteKey={recaptchaConfig?.siteKey}
+                  baseUrl={recaptchaConfig?.baseUrl}
+                  onVerify={onRecaptchaVerify}
+                  onExpire={() => setRecaptchaVerified(false)}
+                  footerComponent={<OButton
+                    onClick={() => recaptchaRef.current.close()}
+                    style={{ borderRadius: 0 }}
+                    text={t('CLOSE', 'Close')}
+                    bgColor={theme.colors.primary}
+                    borderColor={theme.colors.primary}
+                    textStyle={{ color: 'white' }}
+                    imgRightSrc={null}
+                  />}
+                />
+              </>
+            )}
+
             <OButton
               onClick={handleSubmit(onSubmit)}
               text={loginButtonText}
@@ -367,13 +456,13 @@ const LoginFormUI = (props: LoginParams) => {
         }
 
         {configs && Object.keys(configs).length > 0 && anySocialButtonActivated && (
-            <ButtonsWrapper>
-              <OText size={18} mBottom={10} color={theme.colors.disabled}>
-                {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
-              </OText>
-              <SocialButtons>
-                {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-                  configs?.facebook_id?.value && (
+          <ButtonsWrapper>
+            <OText size={18} mBottom={10} color={theme.colors.disabled}>
+              {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
+            </OText>
+            <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)}
@@ -381,26 +470,26 @@ const LoginFormUI = (props: LoginParams) => {
                     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) => setIsLoadingSocialButton(val)}
-                    handleSuccessGoogleLogin={handleSuccessFacebook}
-                  />
-                )}
-                {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
-                  <AppleLogin
-                    notificationState={notificationState}
-                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                    handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
-                    handleSuccessApple={handleSuccessApple}
-                  />
-                )}
-              </SocialButtons>
-            </ButtonsWrapper>
-          )}
+              {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
+                <GoogleLogin
+                  notificationState={notificationState}
+                  webClientId={configs?.google_login_client_id?.value}
+                  handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                  handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
+                  handleSuccessGoogleLogin={handleSuccessFacebook}
+                />
+              )}
+              {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
+                <AppleLogin
+                  notificationState={notificationState}
+                  handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                  handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
+                  handleSuccessApple={handleSuccessApple}
+                />
+              )}
+            </SocialButtons>
+          </ButtonsWrapper>
+        )}
 
         {onNavigationRedirect && registerButtonText && (
           <ButtonsWrapper>
@@ -438,6 +527,7 @@ const LoginFormUI = (props: LoginParams) => {
 export const LoginForm = (props: any) => {
   const loginProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI,
     handleSuccessLogin: () => _removeStoreData('isGuestUser')
   };

package/src/components/LoginForm/styles.tsx

@@ -67,3 +67,9 @@ export const LineSeparator = styled.View`
 export const SkeletonWrapper = styled.View`
   width: 90%;
 `
+export const RecaptchaButton = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+  justify-content: center;
+`

package/src/components/OrderDetails/index.tsx

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