ordering-ui-react-native 0.16.55 → 0.16.56-release

package/themes/business/src/components/PreviousOrders/styles.tsx

@@ -33,8 +33,7 @@ export const NotificationIcon = styled.View`
 export const AcceptOrRejectOrder = styled.View`
   flex-direction: row;
   justify-content: space-between;
-  flex: 1;
-  margin: 10px;
+  margin: ${(props: any) => props.m ?? 10}px;
 `
 export const Timestatus = styled.View`
   position: relative;;
@@ -42,4 +41,33 @@ export const Timestatus = styled.View`
   height: 55px;
   border-radius: 20px;
   top: 5px;
-`
+`
+
+export const AccordionSection = styled.View`
+  background: #FFF;
+  padding-vertical: 10px;
+`
+
+export const Accordion = styled.TouchableOpacity`
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  paddingVertical: 0;
+  marginLeft: 3px;
+`
+
+export const ContentInfo = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  overflow: hidden;
+`
+
+export const AccordionContent = styled.View`
+  overflow: hidden;
+`
+
+export const ProductOptionsList = styled.View`
+  margin-top: 20px;
+  margin-left: 20px;
+`

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

@@ -28,6 +28,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
     getProductMax,
     onDeleteProduct,
     onEditProduct,
+    currency
   } = props;
 
   const [, t] = useLanguage();
@@ -147,7 +148,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
               }}>
               <View style={{ flexDirection: 'row' }}>
                 <OText size={12} color={theme.colors.textGray}>
-                  {parsePrice(getProductPrice(product))}
+                  {parsePrice(getProductPrice(product), { currency })}
                 </OText>
 
                 {(
@@ -268,7 +269,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                                   suboption.position,
                                 )
                                 : '',
-                            price: parsePrice(suboption.price),
+                            price: parsePrice(suboption.price, { currency }),
                           })}
                         </OText>
                       </ProductSubOption>

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

@@ -1,4 +1,6 @@
-import React, { useState, useEffect } from 'react'
+
+
+import React, { useState, useEffect, useRef } from 'react'
 import {
   useLanguage,
   useUtils,
@@ -10,7 +12,8 @@ import {
   View,
   StyleSheet,
   I18nManager,
-  TouchableOpacity
+  TouchableOpacity,
+  Keyboard
 } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { ReviewCustomerParams } from '../../types'
@@ -38,7 +41,8 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     reviewState,
     setReviewState,
     actionState,
-    handleSendCustomerReview
+    handleSendCustomerReview,
+    handleCustomCustomerReview
   } = props
 
   const theme = useTheme()
@@ -52,12 +56,12 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
   const { top, bottom } = useSafeAreaInsets()
   const [comments, setComments] = useState<Array<any>>([])
   const [extraComment, setExtraComment] = useState('')
-
+  const scrollref = useRef<any>()
   const styles = StyleSheet.create({
     photoWrapper: {
       shadowColor: theme.colors.black,
       shadowRadius: 3,
-      shadowOffset: {width: 1, height: 4},
+      shadowOffset: { width: 1, height: 4 },
       elevation: 3,
       borderRadius: 8,
       shadowOpacity: 0.1,
@@ -95,11 +99,11 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
   })
 
   const qualificationList = [
-    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
     { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
     { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
     { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
-    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
+    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
   ]
 
   const commentsList = reviewCommentList('customer')
@@ -142,6 +146,25 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
 
   }, [actionState.error])
 
+  useEffect(() => {
+    if (scrollref?.current) {
+      Keyboard.addListener('keyboardDidShow', () => {
+        scrollref.current.scrollToEnd()
+      })
+    }
+  }, [scrollref?.current])
+
+  const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''}`?.replace('  ', ' ')?.trim() ?? ''
+
+  const handleReviewClick = () => {
+    handleCustomCustomerReview
+      ? handleCustomCustomerReview({
+        qualification: reviewState?.qualification,
+        comment: reviewState?.comment
+      })
+      : handleSendCustomerReview()
+  }
+
   return (
     <KeyboardAvoidingView
       enabled
@@ -179,6 +202,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       <Content
         showsVerticalScrollIndicator={false}
         contentContainerStyle={{ paddingBottom: 30 }}
+        ref={scrollref}
       >
         <CustomerInfoContainer>
           <View
@@ -196,20 +220,20 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
               style={{ borderRadius: 7.6 }}
             />
           </View>
-          <OText
+          {!!customerName && <OText
             size={14}
             weight="500"
             style={{
               marginTop: 16
             }}
           >
-            {order?.customer?.name} {order?.customer?.middle_name} {order?.customer?.lastname} {order?.customer?.second_lastname}
-          </OText>
+            {customerName}
+          </OText>}
         </CustomerInfoContainer>
         <OText
           size={12}
         >
-          {t('HOW_WAS_YOUR_CUSTOMER', 'How was your experience with _name_?').replace('_name_', `${order?.customer?.name} ${order?.customer?.middle_name} ${order?.customer?.lastname} ${order?.customer?.second_lastname}`)}
+          {customerName ? t('HOW_WAS_YOUR_CUSTOMER', 'How was your experience with _name_?').replace('_name_', customerName) : t('HOW_WAS_YOUR_NO_CUSTOMER', 'How was your experience?')}
         </OText>
         <RatingBarContainer>
           <LinearGradient
@@ -270,8 +294,8 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
               }}
               style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
               imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
-              imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-              onClick={() => handleChangeComment(commentItem) }
+              imgRightStyle={{ right: 5, margin: 5 }}
+              onClick={() => handleChangeComment(commentItem)}
             />
           ))}
         </CommentsButtonGroup>
@@ -291,7 +315,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
 
       <ActionButtonWrapper>
         <FloatingButton
-          firstButtonClick={() => handleSendCustomerReview()}
+          firstButtonClick={() => handleReviewClick()}
           btnText={actionState.loading ? t('LOADING', 'Loading') : t('SEND_REVIEW', 'Send Review')}
           color={theme.colors.primary}
           widthButton={'100%'}
@@ -299,7 +323,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       </ActionButtonWrapper>
       <Alert
         open={alertState.open}
-        onAccept={() => setAlertState({  open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
         onClose={() => setAlertState({ open: false, content: [] })}
         content={alertState.content}
         title={t('ERROR', 'Error')}

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

@@ -36,6 +36,7 @@ export const UserFormDetailsUI = (props: any) => {
     handleCancelEdit,
     toggleIsEdit,
     isCheckout,
+    isAlsea
   } = props;
 
   const theme = useTheme();
@@ -265,7 +266,9 @@ export const UserFormDetailsUI = (props: any) => {
               }).map(
                 (field: any) =>
                   showField &&
-                  showField(field.code) && (
+                  showField(field.code) &&
+                  !isAlsea
+                  && (
                     <React.Fragment key={field.id}>
                       <OText style={styles.label}>
                         {t(field?.code.toUpperCase(), field?.name)}
@@ -442,7 +445,7 @@ export const UserFormDetailsUI = (props: any) => {
                 </OText>
               )}
 
-              {!!showInputPhoneNumber && (
+              {!!showInputPhoneNumber && !isAlsea && (
                 <WrapperPhone>
                   <PhoneInputNumber
                     data={phoneInputData}

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

@@ -49,6 +49,7 @@ const ProfileUI = (props: ProfileParams) => {
     handleToggleAvalaibleStatusDriver,
     userState,
     isAvailableLoading,
+    isAlsea
   } = props;
 
   const [{ user }] = useSession();
@@ -459,6 +460,7 @@ const ProfileUI = (props: ProfileParams) => {
                 hideUpdateButton
                 handleCancelEdit={handleCancelEdit}
                 toggleIsEdit={toggleIsEdit}
+                isAlsea={isAlsea}
               />
             </View>
           )}

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/OLink.tsx

@@ -29,8 +29,19 @@ const OLink = (props: Props): React.ReactElement => {
       ],
     );
 
+  const handleInvalidNumberAlert = () =>
+    Alert.alert(
+      t('ERROR_OPENING_THE_LINK', 'Error opening the link'),
+      t('INVALID_NUMBER', 'Invalid number'),
+      [
+        {
+          text: t('OK', 'Ok'),
+        },
+      ],
+    );
+
   const handleOpenUrl = async (breakFunction = false) => {
-    if(breakFunction) {
+    if (breakFunction) {
       return
     }
     if (!url) {
@@ -40,8 +51,9 @@ const OLink = (props: Props): React.ReactElement => {
 
     try {
       const supported = await Linking.canOpenURL(url);
-
-      if (supported) {
+      if (url && url?.includes('tel:')) {
+        url?.includes('invalid') ? handleInvalidNumberAlert() : await Linking.openURL(url)
+      } else if (supported) {
         await Linking.openURL(url);
       } else {
         handleAlert();
@@ -57,17 +69,17 @@ const OLink = (props: Props): React.ReactElement => {
         <OButton
           onClick={() => handleOpenUrl()}
           text={shorcut} imgRightSrc=''
-          textStyle={{color: 'white'}}
-          style={{width: '100%', alignSelf: 'center', borderRadius: 10}}
+          textStyle={{ color: 'white' }}
+          style={{ width: '100%', alignSelf: 'center', borderRadius: 10 }}
         />
       ) : (
-      <OText
-        style={TextStyle}
-        numberOfLines={1}
-        ellipsizeMode="tail"
-        color={color}>
-        {shorcut}
-      </OText>
+        <OText
+          style={TextStyle}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          color={color}>
+          {shorcut}
+        </OText>
       )}
     </Pressable>
   );

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

@@ -40,12 +40,13 @@ interface Props {
   numberOfLines?: number;
   ellipsizeMode?: string;
   adjustsFontSizeToFit?: boolean;
-  textDecorationLine?: string
+  textDecorationLine?: string;
+  lineHeight?: number;
 }
 
 const OText = (props: Props): React.ReactElement => {
   return (
-    <SText {...props} style={props.style}>
+    <SText {...props} style={[props.style, { lineHeight: props.lineHeight }]}>
       {props.children}
       {props.space && ' '}
     </SText>

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,15 @@ 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;
+  ordersFormatted?: any;
+  handleChangeOrderStatus?: () => void;
+  handleSendCustomerReview?: () => void;
+  orderDetailsProps?: any;
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -390,6 +398,7 @@ export interface ProductItemAccordionParams {
   offsetDisabled?: any;
   isFromCheckout?: any;
   isClickableEvent?: any;
+  currency?: any;
 }
 export interface ReviewOrderParams {
   order?: { orderId: number; businessId: number; logo: string };
@@ -405,7 +414,7 @@ export interface MessagesParams {
   order?: any;
   orderId?: number;
   messages?: any;
-  message?: string;
+  message: string;
   image?: string;
   messagesToShow?: any;
   sendMessage?: any;
@@ -550,24 +559,28 @@ export interface AcceptOrRejectOrderParams {
   loading?: boolean;
   action: string;
   orderId?: number;
-  handleUpdateOrder?: (status: number, isAccept: any) => {};
+  handleUpdateOrder?: (p1: any, p2: any) => {};
   notShowCustomerPhone?: boolean | undefined;
-  actions?: actions;
+  actions?: any;
   titleAccept?: textTranslate;
   titleReject?: textTranslate;
   titleNotReady?: textTranslate;
   appTitle?: textTranslate;
   orderTitle?: any
+  isPage?: boolean
+  navigation?: any
+  route?: any
 }
 
 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 {
@@ -578,6 +591,7 @@ export interface ReviewCustomerParams {
   actionState?: any,
   handleChangeQualification?: any,
   handleSendCustomerReview?: any,
+  handleCustomCustomerReview?: any,
 }
 
 export interface NoNetworkParams {

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 && (