ordering-ui-react-native 0.15.72 → 0.15.73-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.72",
+  "version": "0.15.73-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",
@@ -86,6 +86,7 @@
     "react-native-google-places-autocomplete": "^2.1.3",
     "react-native-html-to-pdf": "^0.10.0",
     "react-native-image-picker": "^4.0.6",
+    "react-native-intersection-observer": "^0.0.9",
     "react-native-lightbox": "^0.8.1",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-loading-spinner-overlay": "^2.0.0",
@@ -109,6 +110,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,8 +125,10 @@
     "@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",
+    "@types/react-native-calendar-picker": "^7.0.2",
     "babel-jest": "^26.3.0",
     "eslint": "^7.10.0",
     "jest": "^26.4.2",

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/ActiveOrders/index.tsx

@@ -48,75 +48,73 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
   }, [orders.length])
 
   const Order = ({ order }: { order: any }) => (
-    <React.Fragment>
-      <Card
-        isMiniCard={configs?.google_maps_api_key?.value}
-        onPress={() => handleClickCard(order?.uuid)}
-      >
-        {!!(configs?.google_maps_api_key?.value) && (
-          <Map>
+    <Card
+      isMiniCard={configs?.google_maps_api_key?.value}
+      onPress={() => handleClickCard(order?.uuid)}
+    >
+      {!!(configs?.google_maps_api_key?.value) && (
+        <Map>
+          <OIcon
+            url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
+            height={100}
+            width={320}
+            style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
+          />
+        </Map>
+      )}
+      <Information>
+        {!!order.business?.logo && (
+          <Logo>
             <OIcon
-              url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
-              height={100}
-              width={320}
-              style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
+              url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
+              style={styles.logo}
             />
-          </Map>
+          </Logo>
         )}
-        <Information>
-          {!!order.business?.logo && (
-            <Logo>
-              <OIcon
-                url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-                style={styles.logo}
-              />
-            </Logo>
-          )}
-          <OrderInformation>
-            <BusinessInformation style={{ width: '60%' }}>
-              <GestureHandlerScrollView
-                  showsVerticalScrollIndicator={false}
-                  showsHorizontalScrollIndicator={false}
-                  horizontal
-              >
-                <TouchableWithoutFeedback>
-                  <View>
-                    <OText
-                      size={16}
-                      numberOfLines={1}
-                      ellipsizeMode='tail'
-                    >
-                      {order.business?.name}
-                    </OText>
-                  </View>
-                </TouchableWithoutFeedback>
-              </GestureHandlerScrollView>
-              <GestureHandlerScrollView
+        <OrderInformation>
+          <BusinessInformation style={{ width: '60%' }}>
+            <GestureHandlerScrollView
                 showsVerticalScrollIndicator={false}
                 showsHorizontalScrollIndicator={false}
                 horizontal
-              >
-                <TouchableWithoutFeedback>
-                  <View style={styles.orderNumber}>
-                    <OText size={12} space color={theme.colors.textSecondary}>{t('ORDER_NUMBER', 'Order No.')}</OText>
-                    <OText size={12} color={theme.colors.textSecondary}>{order.id}</OText>
-                  </View>
-                </TouchableWithoutFeedback>
-              </GestureHandlerScrollView>
-              <OText size={12} color={theme.colors.textSecondary}>{order?.delivery_datetime_utc
-                ? parseDate(order?.delivery_datetime_utc)
-                : parseDate(order?.delivery_datetime, { utc: false })}</OText>
-            </BusinessInformation>
-            <Price>
-              <OText size={16}>{parsePrice(order?.summary?.total || order?.total)}</OText>
-              {order?.status !== 0 && (
-                <OText color={theme.colors.primary} size={12} numberOfLines={2}>{getOrderStatus(order.status)?.value}</OText>
-              )}
-            </Price>
-          </OrderInformation>
-        </Information>
-      </Card>
-    </React.Fragment>
+            >
+              <TouchableWithoutFeedback>
+                <View>
+                  <OText
+                    size={16}
+                    numberOfLines={1}
+                    ellipsizeMode='tail'
+                  >
+                    {order.business?.name}
+                  </OText>
+                </View>
+              </TouchableWithoutFeedback>
+            </GestureHandlerScrollView>
+            <GestureHandlerScrollView
+              showsVerticalScrollIndicator={false}
+              showsHorizontalScrollIndicator={false}
+              horizontal
+            >
+              <TouchableWithoutFeedback>
+                <View style={styles.orderNumber}>
+                  <OText size={12} space color={theme.colors.textSecondary}>{t('ORDER_NUMBER', 'Order No.')}</OText>
+                  <OText size={12} color={theme.colors.textSecondary}>{order.id}</OText>
+                </View>
+              </TouchableWithoutFeedback>
+            </GestureHandlerScrollView>
+            <OText size={12} color={theme.colors.textSecondary}>{order?.delivery_datetime_utc
+              ? parseDate(order?.delivery_datetime_utc)
+              : parseDate(order?.delivery_datetime, { utc: false })}</OText>
+          </BusinessInformation>
+          <Price>
+            <OText size={16}>{parsePrice(order?.summary?.total || order?.total)}</OText>
+            {order?.status !== 0 && (
+              <OText color={theme.colors.primary} size={12} numberOfLines={2}>{getOrderStatus(order.status)?.value}</OText>
+            )}
+          </Price>
+        </OrderInformation>
+      </Information>
+    </Card>
   )
 
   return (

package/src/components/ActiveOrders/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const ActiveOrdersContainer = styled.ScrollView`
   margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
+  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '450px'};
   max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
 `
 

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/BusinessBasicInformation/index.tsx

@@ -56,22 +56,14 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
         }
         source={{ uri: header || optimizeImage(businessState?.business?.header, 'h_400,c_limit') }}
       >
-        <BusinessLogo>
-          {loading ? (
-            <View style={{ marginLeft: 20 }}>
-              <Placeholder Animation={Fade}>
-                <PlaceholderLine height={50} width={20} />
-              </Placeholder>
-            </View>
-          ) : (
-            !isBusinessInfoShow && (
-              <OIcon
-                url={logo || optimizeImage(businessState?.business?.logo, 'h_300,c_limit')}
-                style={styles.businessLogo}
-              />
-            )
-          )}
-        </BusinessLogo>
+        {!isBusinessInfoShow && (
+          <BusinessLogo>
+            <OIcon
+              url={logo || optimizeImage(businessState?.business?.logo, 'h_300,c_limit')}
+              style={styles.businessLogo}
+            />
+          </BusinessLogo>
+        )}
       </BusinessHeader>
       <BusinessInfo
         style={styles.businessInfo}
@@ -117,7 +109,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
               <PlaceholderLine width={10} />
             </Placeholder>
           ) : (
-            <View style={{width: '75%'}}>
+            <View style={{ width: '75%' }}>
               <OText color={theme.colors.textSecondary}>{getBusinessType()}</OText>
             </View>
           )}
@@ -187,7 +179,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
         titleSectionStyle={styles.modalTitleSectionStyle}
         open={openBusinessInformation}
         onClose={() => setOpenBusinessInformation(false)}
-        styleCloseButton={{color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)'}}
+        styleCloseButton={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
         isNotDecoration
       >
         <BusinessInformation
@@ -199,7 +191,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
         titleSectionStyle={styles.modalTitleSectionStyle}
         open={openBusinessReviews}
         onClose={() => setOpenBusinessReviews(false)}
-        styleCloseButton={{color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)'}}
+        styleCloseButton={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
         isNotDecoration
       >
         <BusinessReviews

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/BusinessInformation/index.tsx

@@ -48,6 +48,20 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
       />
       <WrapMainContent>
         <InnerContent>
+          {(!!businessState?.business?.email || !!businessState?.business?.cellphone) && (
+            <>
+              <GrayBackground>
+                <OText size={16} weight='bold'>{t('BUSINESS_DETAILS', 'Business Details')}</OText>
+              </GrayBackground>
+              {!!businessState?.business?.email && (
+                <OText size={14} mBottom={5} mLeft={15} style={{ marginTop: 10 }}>{t('EMAIL', 'Email')}: <OText color={theme.colors.textSecondary}>{businessState?.business?.email}</OText></OText>
+              )}
+              {!!businessState?.business?.cellphone && (
+                <OText size={14} mBottom={20} mLeft={15}>{t('CELLPHONE', 'Cellphone')}: <OText color={theme.colors.textSecondary}>{businessState?.business?.cellphone}</OText></OText>
+              )}
+            </>
+          )}
+
           <GrayBackground>
             <OText size={16} weight='bold'>{t('BUSINESS_LOCATION', 'Business Location')}</OText>
           </GrayBackground>

package/src/components/BusinessTypeFilter/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { StyleSheet, View, ScrollView, Dimensions, Platform, PlatformIOSStatic, Pressable } 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'
 
@@ -9,7 +9,6 @@ import { BusinessTypeFilterParams } from '../../types'
 import { useTheme } from 'styled-components/native'
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import DeviceInfo from 'react-native-device-info';
-import { TouchableOpacity } from 'react-native-gesture-handler'
 
 const windowWidth = Dimensions.get('window').width;
 

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

@@ -93,7 +93,7 @@ const CheckoutUI = (props: any) => {
     deliveryOptionSelected,
     instructionsOptions,
     handleChangeDeliveryOption,
-
+    merchantId
   } = props
 
   const theme = useTheme();
@@ -530,6 +530,7 @@ const CheckoutUI = (props: any) => {
                   handlePaymentMethodClickCustom={handlePaymentMethodClick}
                   setCardData={setCardData}
                   handlePlaceOrder={handlePlaceOrder}
+                  merchantId={merchantId}
                 />
               </ChPaymethods>
             </ChSection>
@@ -592,6 +593,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 +616,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 ? (