ordering-ui-react-native 0.15.43 → 0.15.45-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.43",
+  "version": "0.15.45-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",
@@ -99,6 +99,7 @@
     "react-native-picker-select": "^8.0.4",
     "react-native-print": "^0.9.0",
     "react-native-reanimated": "^1.13.1",
+    "react-native-recaptcha-that-works": "^1.2.0",
     "react-native-restart": "^0.0.22",
     "react-native-safe-area-context": "^3.1.8",
     "react-native-screens": "^2.11.0",
@@ -108,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",
@@ -122,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

@@ -92,6 +92,8 @@ const LoginFormUI = (props: LoginParams) => {
 
   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)
@@ -381,7 +383,7 @@ const LoginFormUI = (props: LoginParams) => {
                     handleSuccessFacebookLogin={handleSuccessFacebook}
                   />
                 )}
-                {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+                {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
                   <GoogleLogin
                     notificationState={notificationState}
                     webClientId={configs?.google_login_client_id?.value}

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 && (
@@ -514,7 +500,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 </Table>
               )}
               {
-                order?.taxes?.length === 0 && order?.tax_type === 2 && (
+                order?.taxes?.length === 0 && order?.tax_type === 2 && order?.summary?.tax > 0 && (
                   <Table>
                     <OText>
                       {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
@@ -524,7 +510,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 )
               }
               {
-                order?.fees?.length === 0 && (
+                order?.fees?.length === 0 && order?.summary?.service_fee > 0 && (
                   <Table>
                     <OText>
                       {t('SERVICE_FEE', 'Service fee')}

package/src/components/PaymentOptions/index.tsx

@@ -156,7 +156,7 @@ const PaymentOptionsUI = (props: any) => {
     )
   }
 
-  const excludeGateway: any = ['stripe_connect', 'stripe_redirect']; //exclude connect & redirect
+  const excludeGateway: any = ['stripe_connect', 'stripe_redirect', 'apple_pay']; //exclude connect & redirect & apple pay
 
   return (
     <PMContainer>