ordering-ui-react-native 0.16.33 → 0.16.34-release

package/themes/business/src/components/shared/ODropDown.tsx

@@ -4,6 +4,7 @@ import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
 import { ScrollView as CustomScrollView, TouchableOpacity as CustomTouchableOpacity, View } from 'react-native'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Text } from 'react-native-paper';
 
 interface Props {
@@ -16,7 +17,11 @@ interface Props {
   dropViewMaxHeight?: any,
   isModal?: any,
   bgcolor?: string,
-  textcolor?: string
+  textcolor?: string,
+  handleClear?: any,
+  handleOpenSelect?: any,
+  openedSelect?: string,
+  selectType?: string
 }
 
 const Wrapper = styled.View`
@@ -70,7 +75,11 @@ const ODropDown = (props: Props) => {
     placeholder,
     onSelect,
     dropViewMaxHeight,
-    isModal
+    isModal,
+    handleClear,
+    handleOpenSelect,
+    openedSelect,
+    selectType
   } = props
 
   const theme = useTheme();
@@ -82,6 +91,7 @@ const ODropDown = (props: Props) => {
 
   const onToggle = () => {
     setIsOpen(!isOpen)
+    if (!isOpen) handleOpenSelect?.()
   }
 
   const onSelectOption = (option: any) => {
@@ -91,12 +101,25 @@ const ODropDown = (props: Props) => {
     setIsOpen(false)
   }
 
+  const handleClearSearch = () => {
+    handleClear()
+    if (isOpen) {
+      onToggle()
+    }
+  }
+
   useEffect(() => {
     const _defaultOption = options?.find((option: any) => option.value === defaultValue)
     setSelectedOption(_defaultOption)
     setValue(defaultValue)
   }, [defaultValue, options])
 
+  useEffect(() => {
+    if (openedSelect !== selectType && typeof openedSelect === 'string') {
+      setIsOpen(false)
+    }
+  }, [openedSelect])
+
   return (
     <Wrapper style={props.style}>
       <Selected
@@ -110,11 +133,22 @@ const ODropDown = (props: Props) => {
         >
           {selectedOption?.content || selectedOption?.name || placeholder}
         </SelectedLabel>
-        <FeatherIcon
-          name='chevron-down'
-          color={props.textcolor}
-          size={24}
-        />
+        {selectedOption && handleClear ? (
+          <AntDesign
+            name={'close'}
+            size={20}
+            onPress={() => handleClearSearch()}
+            style={{ position: 'absolute', right: 12, top: 13 }}
+          />
+        ) : (
+          <FeatherIcon
+            name='chevron-down'
+            color={props.textcolor}
+            size={24}
+            style={{ position: 'absolute', right: 12, top: 13 }}
+
+          />
+        )}
       </Selected>
       {isOpen && options && (
         <DropView
@@ -154,7 +188,7 @@ const ODropDown = (props: Props) => {
               maxHeight: dropViewMaxHeight || null,
               paddingBottom: 15
             }}
-            nestedScrollEnabled={true}
+              nestedScrollEnabled={true}
             >
               {options.map((option: any, index: number) => (
                 <CustomTouchableOpacity

package/themes/business/src/components/shared/ODropDownCalendar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import styled, { css, useTheme } from 'styled-components/native'
 import { useLanguage } from 'ordering-components/native';
 import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
@@ -24,6 +24,10 @@ interface Props {
   handleChangeDate?: any,
   rangeDate?: any,
   isCalendarAlwaysVisible?: boolean
+  handleClear?: any;
+  handleOpenSelect?: any,
+  openedSelect?: string,
+  selectType?: string
 }
 
 const Wrapper = styled.View`
@@ -96,7 +100,11 @@ const ODropDownCalendar = (props: Props) => {
     isCalendar,
     handleChangeDate,
     rangeDate,
-    isCalendarAlwaysVisible
+    isCalendarAlwaysVisible,
+    handleClear,
+    handleOpenSelect,
+    openedSelect,
+    selectType
   } = props
 
   const theme = useTheme();
@@ -110,6 +118,7 @@ const ODropDownCalendar = (props: Props) => {
 
   const onToggle = () => {
     setIsOpen(!isOpen)
+    if (!isOpen) handleOpenSelect?.()
   }
 
   const onSelectOption = (option: any) => {
@@ -122,7 +131,7 @@ const ODropDownCalendar = (props: Props) => {
   const onDateChange = (date: any, type: any) => {
     if (!date) return
     if (type === 'END_DATE') {
-      handleChangeDate(rangeDate.from, date.format('MM/DD/YY'))
+      handleChangeDate(rangeDate.from, new Date(date.format('MM/DD/YY')) === rangeDate.from ? '' : date.format('MM/DD/YY'))
     } else {
       handleChangeDate(date.format('MM/DD/YY'), '')
     }
@@ -142,12 +151,31 @@ const ODropDownCalendar = (props: Props) => {
     return (from || to) ? (from + (to ? end : '')) : placeholder
   }
 
+  const handleClearCalendar = () => {
+    handleClear && handleClear()
+    if (isOpen) {
+      onToggle()
+    }
+  }
+
   useEffect(() => {
     const _defaultOption = options?.find((option: any) => option.value === defaultValue)
     setSelectedOption(_defaultOption)
     setValue(defaultValue)
   }, [defaultValue, options])
 
+  useEffect(() => {
+    if (openedSelect !== selectType && typeof openedSelect === 'string') {
+      setIsOpen(false)
+    }
+  }, [openedSelect])
+
+  useEffect(() => {
+    if (rangeDate.to && rangeDate.from) {
+      onSelect('calendar')
+    }
+  }, [rangeDate.to, rangeDate.from])
+
   return (
     <Wrapper style={props.style}>
       <Selected
@@ -165,10 +193,11 @@ const ODropDownCalendar = (props: Props) => {
               : `${selectedOption?.content || selectedOption?.name || placeholder}`
           }
         </SelectedLabel>
-        <FeatherIcon
-          name='calendar'
-          color={theme.colors.backArrow}
-          size={24}
+        <AntDesign
+          name={selectedOption && handleClear ? 'close' : 'calendar'}
+          size={20}
+          onPress={() => handleClearCalendar()}
+          style={{ position: 'absolute', right: 12, top: 13 }}
         />
       </Selected>
       {isOpen && options && (

package/themes/business/src/components/shared/OModal.tsx

@@ -26,6 +26,7 @@ interface Props {
   isNotDecoration?: boolean;
   styleCloseButton?: any;
   order?: any;
+  hideIcons?: boolean
 }
 
 const OModal = (props: Props): React.ReactElement => {
@@ -47,6 +48,7 @@ const OModal = (props: Props): React.ReactElement => {
     style,
     styleCloseButton,
     order,
+    hideIcons
   } = props;
 
   const theme = useTheme();
@@ -70,8 +72,8 @@ const OModal = (props: Props): React.ReactElement => {
       alignItems: 'center',
       paddingHorizontal: 30,
       paddingTop: 30,
-      paddingBottom: 25,
-      borderBottomWidth: 2,
+      paddingBottom: !hideIcons ? 25 : 15,
+      borderBottomWidth: !hideIcons ? 2 : 0,
       borderBottomColor: '#e6e6e6',
     },
     titleGroups: {
@@ -218,50 +220,51 @@ const OModal = (props: Props): React.ReactElement => {
                     {title}
                   </OText>
                 </View>
+                {!hideIcons && (
+                  <View style={styles.titleGroups}>
+                    <View style={styles.shadow}>
+                      {order?.business?.logo ? (
+                        <OIcon
+                          url={optimizeImage(
+                            order?.business?.logo,
+                            'h_300,c_limit',
+                          )}
+                          style={styles.titleIcons}
+                        />
+                      ) : (
+                        <OIcon
+                          src={theme.images.dummies.businessLogo}
+                          style={styles.titleIcons}
+                        />
+                      )}
+                    </View>
 
-                <View style={styles.titleGroups}>
-                  <View style={styles.shadow}>
-                    {order?.business?.logo ? (
+                    <View style={styles.shadow}>
                       <OIcon
                         url={optimizeImage(
-                          order?.business?.logo,
+                          order?.customer?.photo ||
+                          theme?.images?.dummies?.customerPhoto,
                           'h_300,c_limit',
                         )}
                         style={styles.titleIcons}
                       />
-                    ) : (
-                      <OIcon
-                        src={theme.images.dummies.businessLogo}
-                        style={styles.titleIcons}
-                      />
-                    )}
-                  </View>
+                    </View>
 
-                  <View style={styles.shadow}>
-                    <OIcon
-                      url={optimizeImage(
-                        order?.customer?.photo ||
-                          theme?.images?.dummies?.customerPhoto,
-                        'h_300,c_limit',
-                      )}
-                      style={styles.titleIcons}
-                    />
+                    {order?.driver && (
+                      <View style={styles.shadow}>
+                        <OIcon
+                          url={
+                            optimizeImage(
+                              order?.driver?.photo,
+                              'h_300,c_limit',
+                            ) || theme?.images?.dummies?.driverPhoto
+                          }
+                          style={styles.titleIcons}
+                        />
+                      </View>
+                    )}
                   </View>
-
-                  {order?.driver && (
-                    <View style={styles.shadow}>
-                      <OIcon
-                        url={
-                          optimizeImage(
-                            order?.driver?.photo,
-                            'h_300,c_limit',
-                          ) || theme?.images?.dummies?.driverPhoto
-                        }
-                        style={styles.titleIcons}
-                      />
-                    </View>
-                  )}
-                </View>
+                )}
               </View>
             )}
             {children}

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

@@ -21,8 +21,8 @@ export interface LoginParams {
   allowedLevels?: any;
   useRootPoint?: any;
   notificationState?: any;
-	handleReCaptcha?: any;
-	enableReCaptcha?: any;
+  handleReCaptcha?: any;
+  enableReCaptcha?: any;
 }
 export interface ProfileParams {
   navigation?: any;
@@ -41,6 +41,7 @@ export interface ProfileParams {
   validationFields?: any;
   showField?: any;
   isRequiredField?: any;
+  isAlsea?: boolean;
 }
 
 export interface AddressListParams {
@@ -255,6 +256,7 @@ export interface MessagesOptionParams {
   messagesReadList?: any;
   onNavigationRedirect?: any;
   setSortBy?: any;
+  getOrders: any
 }
 export interface OrdersOptionParams {
   orderList?: any;
@@ -265,7 +267,7 @@ export interface OrdersOptionParams {
   titleContent?: string;
   customArray?: Array<any>;
   loadMoreOrders?: () => {};
-  loadOrders?: ({}: any) => {};
+  loadOrders?: ({ }: any) => {};
   messages?: any;
   setMessages?: () => {};
   loadMessages?: () => {};
@@ -279,7 +281,7 @@ export interface OrdersOptionParams {
   ordersGroup?: any;
   setOrdersGroup?: any;
   setCurrentFilters?: any;
-  onFiltered?: ({}: any) => {};
+  onFiltered?: ({ }: any) => {};
   filtered?: any;
   handleClickOrder?: any;
   orderGroupStatusCustom?: {
@@ -290,9 +292,11 @@ export interface OrdersOptionParams {
   };
   isBusinessApp?: boolean;
   handleClickLogisticOrder: (status: number, orderId: number) => void,
-  logisticOrders: {orders: Array<any>, loading: boolean, error: Array<string> | string},
+  logisticOrders: { orders: Array<any>, loading: boolean, error: Array<string> | string },
   loadLogisticOrders: () => void;
-  isLogisticActivated?: boolean
+  isLogisticActivated?: boolean;
+  isAlsea?: boolean;
+  checkNotification?: boolean;
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -390,6 +394,7 @@ export interface ProductItemAccordionParams {
   offsetDisabled?: any;
   isFromCheckout?: any;
   isClickableEvent?: any;
+  currency?: any;
 }
 export interface ReviewOrderParams {
   order?: { orderId: number; businessId: number; logo: string };
@@ -405,7 +410,7 @@ export interface MessagesParams {
   order?: any;
   orderId?: number;
   messages?: any;
-  message?: string;
+  message: string;
   image?: string;
   messagesToShow?: any;
   sendMessage?: any;
@@ -561,13 +566,14 @@ export interface AcceptOrRejectOrderParams {
 }
 
 export interface MapViewParams {
-  onNavigationRedirect: (page : string, params ?: any) => void,
+  onNavigationRedirect: (page: string, params?: any) => void,
   getBusinessLocations: () => void,
+  setDriverLocation: (location: any) => void,
   isLoadingBusinessMarkers?: boolean,
   markerGroups: Array<any>,
   customerMarkerGroups: Array<any>,
   alertState: { open: boolean, content: Array<string>, key?: string | null },
-  setAlertState: ({open, content, key} : { open: boolean, content: Array<string>, key?: string | null }) => void
+  setAlertState: ({ open, content, key }: { open: boolean, content: Array<string>, key?: string | null }) => void
 }
 
 export interface ReviewCustomerParams {

package/themes/business/src/utils/index.tsx

@@ -38,6 +38,8 @@ export const getTraduction = (key: string, t: any) => {
     ERROR_PRODUCT_NOT_FOUND: 'Error with the product',
     ERROR_USER_UPDATE_YOU_HAVE_ASSIGNED_ORDERS:
       "You can't because you have assigned orders",
+    ERROR_INVALID_OFFER: 'The offer doesn\'t exist',
+    ERROR_AUTH_DRIVER_LOGIN_VALIDATION: 'Error auth driver login validation'
   };
 
   return keyList[key] ? t(key, keyList[key]) : t(key);
@@ -343,3 +345,11 @@ export const getOrderStatus = (s: string, t: any) => {
 
   return objectStatus && objectStatus;
 };
+
+export const transformDistance = (value : number, distanceUnit?: string) => {
+  return distanceUnit === 'mi'
+    ? (value / 1.609).toFixed(2)
+    : distanceUnit === 'ft'
+      ? (value * 3280.84).toFixed(0)
+      : (value).toFixed(2)
+}

package/themes/doordash/src/components/BusinessesListing/index.tsx

@@ -197,7 +197,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>
 			)}
 			{!auth && (

package/themes/doordash/src/components/LoginForm/index.tsx

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

package/themes/instacart/src/components/BusinessesListing/index.tsx

@@ -155,7 +155,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>
 				)}
 				<View style={styles.wrapperOrderOptions}>

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

@@ -20,6 +20,7 @@ const BusinessesListingUI = (props: any) => {
   const {
     navigation,
     businessesList,
+    paginationProps,
     handleBusinessClick,
   } = props;
 
@@ -78,7 +79,7 @@ const BusinessesListingUI = (props: any) => {
         </CardsContainer>
 
 
-        {!businessesList.loading && businessesList.businesses.length === 0 && (
+        {!businessesList.loading && businessesList.businesses.length === 0 && paginationProps.totalPages !== null && (
           <NotFoundSource
             content={t(
               'NOT_FOUND_BUSINESSES',

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

@@ -50,6 +50,12 @@ const CheckoutUI = (props: any) => {
     }
   }, [cart])
 
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    }
+  }, [cart])
+
   return (
     <>
       <PaymentOptions