ordering-ui-react-native 0.14.89 → 0.14.90-release

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

@@ -0,0 +1,123 @@
+import styled, { css } from 'styled-components/native';
+
+export const FiltersTab = styled.View`
+  margin-bottom: 20px;
+  min-height: 30px;
+  max-height: 35px;
+  flex: 1;
+  width: 100%;
+`
+
+export const TabsContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  flex: 1;
+  width: 100%;
+  border-bottom-color: ${(props: any) => props.theme.colors.tabBar};
+`
+
+export const Tag = styled.Pressable`
+  background-color: ${({ isSelected }: { isSelected: string }) => isSelected};
+  justify-content: center;
+  align-items: center;
+  min-height: 34px;
+  padding: 4px 10px;
+  border-radius: 50px;
+  margin-right: 15px;
+`
+
+export const IconWrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+  background: #fff;
+`
+
+export const ModalContainer = styled.ScrollView`
+  padding: 0px 30px;
+`
+
+export const ModalTitle = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  color: ${(props: any) => props.theme.colors.textGray};
+  margin-bottom: 24px;
+`
+
+export const FilterBtnWrapper = styled.TouchableOpacity`
+  background-color: ${(props: any) => props.theme.colors.inputDisabled};
+  border-radius: 7.6px;
+  margin-vertical: 5px;
+  padding: 15px 20px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+`
+
+export const TabPressable = styled.Pressable`
+  align-items: center;
+  border-color: ${(props: any) => props.theme.colors.textGray};
+  border-bottom-width: ${(props: any) => props.isSelected ? '1px' : '0px'};
+  padding-horizontal: 10px;
+`
+export const OrderStatus = styled.View`
+  margin-right: 5px;
+  width: 3px;
+  height: 90%;
+  border-radius: 6px;
+
+  ${(props: any) => props.timeState === 'in_time' && css`
+    background-color: #00D27A;
+  `}
+
+  ${(props: any) => props.timeState === 'at_risk' && css`
+    background-color: #FFC700;
+  `}
+
+  ${(props: any) => props.timeState === 'delayed' && css`
+    background-color: #E63757;
+  `}
+`
+
+export const SlaOption = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
+export const SearchModalContent = styled.View``
+
+export const SlaSettingModalContent = styled.View``
+
+export const DeliveryStatusWrapper = styled.View`
+  position: relative;
+`
+export const VerticalLine = styled.View`
+  position: absolute;
+  background: #E9ECEF;
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  top: 7px;
+  left: 7px;
+`
+
+export const Actions = styled.View``
+
+export const Sides = styled.View`
+  flex-direction: row;
+  height: 100%;
+`
+
+export const LeftSide = styled.View`
+  width: 30%;
+`
+
+export const RightSide = styled.View`
+  width: 70%;
+  border-width: 2px;
+  border-color: ${(props: any) => props.theme.colors.gray100};
+`

package/themes/business/src/components/OrdersListManager/utils.tsx

@@ -0,0 +1,216 @@
+import React, { useState, useEffect } from 'react'
+import { StyleSheet, Pressable } from 'react-native'
+import { useLanguage, useUtils, useConfig } from 'ordering-components/native'
+import styled, { useTheme } from 'styled-components/native'
+
+import { OText, OIcon } from '../shared';
+
+export const useOrderUtils = () => {
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [{ parseDate }] = useUtils()
+
+  const calculateDate = (type: any, from: any, to: any) => {
+    switch (type) {
+      case 'today':
+        const date = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        return { from: `${date} 00:00:00`, to: `${date} 23:59:59` }
+      case 'yesterday':
+        const yesterday = new Date()
+        yesterday.setDate(yesterday.getDate() - 1)
+        const start1 = parseDate(yesterday, { outputFormat: 'MM/DD/YYYY' })
+        const end1 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        return { from: `${start1} 00:00:00`, to: `${end1} 23:59:59` }
+      case 'last_7days':
+        const last_7days = new Date()
+        last_7days.setDate(last_7days.getDate() - 6)
+        const start7 = parseDate(last_7days, { outputFormat: 'MM/DD/YYYY' })
+        const end7 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        return { from: `${start7} 00:00:00`, to: `${end7} 23:59:59` }
+      case 'last_30days':
+        const last_30days = new Date()
+        last_30days.setDate(last_30days.getDate() - 29)
+        const start30 = parseDate(last_30days, { outputFormat: 'MM/DD/YYYY' })
+        const end30 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        return { from: `${start30} 00:00:00`, to: `${end30} 23:59:59` }
+      default:
+        const start = from ? `${parseDate(from, { outputFormat: 'MM/DD/YYYY' })} 00:00:00` : ''
+        const end = to ? `${parseDate(to, { outputFormat: 'MM/DD/YYYY' })} 23:59:59` : ''
+        return { from: start, to: end }
+    }
+  }
+
+  const preorderTypeList = [
+    { key: null, name: t('SLA', 'SLA\'s') },
+    { key: 'in_time', name: t('OK', 'Ok') },
+    { key: 'at_risk', name: t('AT_RISK', 'At Risk') },
+    { key: 'delayed', name: t('DELAYED', 'Delayed') }
+  ]
+  const defaultOrderTypes = [
+    { key: 1, name: t('DELIVERY', 'Delivery') },
+    { key: 2, name: t('PICKUP', 'Pickup') },
+    { key: 3, name: t('EAT_IN', 'Eat in') },
+    { key: 4, name: t('CURBSIDE', 'Curbside') },
+    { key: 5, name: t('DRIVE_THRU', 'Drive thru') }
+  ]
+
+  const deliveryStatus = [
+    {
+      key: t('OK', 'Ok'),
+      des: t('DELIVERY_OK_STATUS_DESC', 'Get delivery time from the businesses.'),
+      timmer: false,
+      icon: theme.images.general?.clock1,
+      backColor: '#00D27A'
+    },
+    {
+      key: t('AT_RISK', 'At risk'),
+      des: t('DELIVERY_ATRISK_STATUS_DESC', 'Is the time between delivery time of busines and the delayed time.'),
+      timmer: false,
+      icon: theme.images.general?.clockRisk,
+      backColor: '#FFC700'
+    },
+    {
+      key: t('DELAYED', 'Delayed'),
+      des: t('DELIVERY_DELAYED_STATUS_DESC', 'If this time is exceeded, the order will be delayed.'),
+      timmer: true,
+      icon: theme.images.general?.clockDelayed,
+      backColor: '#E63757'
+    }
+  ]
+
+  const defaultSearchList = {
+    id: '',
+    state: '',
+    city: '',
+    business: '',
+    delivery_type: '',
+    paymethod: '',
+    driver: '',
+    timeStatus: '',
+    date: {
+      from: '',
+      to: '',
+      type: ''
+    }
+  }
+
+  const constants = {
+    preorderTypeList,
+    defaultOrderTypes,
+    deliveryStatus,
+    defaultSearchList,
+    calculateDate
+  }
+
+  return [constants];
+}
+
+export const StatusBlock = (props: any) => {
+  const { item, last } = props
+  const [showTime, setShowTime] = useState(false)
+
+  useEffect(() => {
+    if (last) {
+      setShowTime(true)
+    }
+  }, [last])
+
+  const StatusItems = styled.View`
+    position: relative;
+    margin-bottom: 20px;
+    z-index: 2;
+  `
+  const ItemHeader = styled.View`
+    flex-direction: row;
+    margin-bottom: 5px;
+  `
+
+  const IconWrapper = styled.View`
+    flex-direction: row;
+    align-items: center;
+    background: #fff;
+  `
+
+  const ItemStatus = styled.View`
+    width: 4px;
+    height: 22px;
+    margin: 0 15px;
+    border-radius: 4px;
+    background: ${(props: any) => props.backColor};
+  `
+
+  const ItemContent = styled.View`
+    display: flex;
+    padding: 0 30px;
+  `
+
+  const OverLine = styled.View`
+    position: absolute;
+    height: 100%;
+    width: 15px;
+    top: 20px;
+    left: 0;
+    background-color: #fff;
+    z-index: 2;
+  `
+
+  return (
+    <StatusItems>
+      <Pressable style={{ marginBottom: 10 }}>
+        <ItemHeader>
+          <IconWrapper>
+            <OIcon
+              src={item?.icon}
+              width={16}
+              height={16}
+              color={item?.backColor}
+            />
+          </IconWrapper>
+          <ItemStatus backColor={item?.backColor} />
+          <OText>{item?.key}</OText>
+        </ItemHeader>
+      </Pressable>
+      <ItemContent>
+        <OText>{item?.des}</OText>
+      </ItemContent>
+      {showTime && ( <Timer /> )}
+      {last && ( <OverLine /> )}
+    </StatusItems>
+  )
+}
+
+export const Timer = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ configs }] = useConfig();
+
+  const styles = StyleSheet.create({
+    settingTime: {
+      fontSize: 14,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      margin: 0,
+      marginRight: 10,
+      paddingHorizontal: 10,
+      paddingTop: 5,
+      borderColor: theme.colors.disabled
+    }
+  })
+
+  const TimerInputWrapper = styled.View`
+    color: ${(props: any) => props.theme.colors.disabled};
+    margin-top: 15px;
+    margin-left: 30px;
+    margin-right: 30px;
+    flex-direction: row;
+    align-items: flex-end;
+  `
+
+  return (
+    <TimerInputWrapper>
+      <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
+      <OText>{t('MIN', 'min')}</OText>
+    </TimerInputWrapper>
+  )
+}
+

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Linking, Platform, TextInput } from 'react-native';
-import { useLanguage, useUtils, useToast, ToastType, OrderListGroups } from 'ordering-components/native';
+import { useLanguage, useUtils, useToast, ToastType, OrderListGroups, useConfig } from 'ordering-components/native';
 import SelectDropdown from 'react-native-select-dropdown'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
@@ -400,20 +400,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     setOpenSLASettingModal(false)
   }
 
-  const [settingTimeErrorMessage, setSettingTimeErrorMessage] = useState('')
-
-  const handlSLASettingTime = () => {
-    if (!hour || !minute) {
-      setSettingTimeErrorMessage(t('SLA_SETTING_ERROR', 'Time value is invalid'))
-      return
-    }
-    const _settingTimeSecond = hour * 3600 + minute * 60
-    setSlaSettingTime(_settingTimeSecond)
-    handleClose()
-    showToast(ToastType.Success, t('SLA_SETTING_UPDATED', 'SLAs setting updated'))
-  }
-
-
   useEffect(() => {
     setCurrentFilters(null)
     onFiltered && onFiltered(null)
@@ -555,7 +541,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           </TabsContainer>
         </ScrollView>
       </FiltersTab>
-      <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 250 }}>
+      <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 450 }}>
         {currentTabSelected !== 'logisticOrders' && (
           <View
             style={{
@@ -645,6 +631,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 getOrderStatus={getOrderStatus}
                 handleClickOrder={handleClickOrder}
                 slaSettingTime={slaSettingTime}
+                currentTabSelected={currentTabSelected}
               />
             )}
           {!logisticOrders?.error?.length &&
@@ -859,24 +846,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                       key={i}
                       item={item}
                       last={i + 1 === selectedTabStatus.length}
-                      setHour={setHour}
-                      setMinute={setMinute}
-                      setSettingTimeErrorMessage={setSettingTimeErrorMessage}
                     />
                   ))}
                   <VerticalLine />
                 </DeliveryStatusWrapper>
-                {settingTimeErrorMessage !== '' && (
-                  <OText style={styles.errorMessage}>{settingTimeErrorMessage}</OText>
-                )}
-                <Actions>
-                  <OButton
-                    text={t('ACCEPT', 'Accept')}
-                    textStyle={{ color: 'white', fontSize: 14 }}
-                    onClick={handlSLASettingTime}
-                    style={styles.acceptButtonStyle}
-                  />
-                </Actions>
               </SlaSettingModalContent>
             )}
           </ModalContainer>
@@ -887,7 +860,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 };
 
 export const StatusBlock = (props: any) => {
-  const { item, last, setHour, setMinute, setSettingTimeErrorMessage } = props
+  const { item, last } = props
   const [showTime, setShowTime] = useState(false)
 
   useEffect(() => {
@@ -898,7 +871,7 @@ export const StatusBlock = (props: any) => {
 
   return (
     <StatusItems>
-      <Pressable onPress={() => setShowTime(!showTime)} style={{ marginBottom: 5 }}>
+      <Pressable style={{ marginBottom: 10 }}>
         <ItemHeader>
           <IconWrapper>
             <OIcon
@@ -916,11 +889,7 @@ export const StatusBlock = (props: any) => {
         <OText>{item?.des}</OText>
       </ItemContent>
       {showTime && (
-        <Timer
-          setHour={setHour}
-          setMinute={setMinute}
-          setSettingTimeErrorMessage={setSettingTimeErrorMessage}
-        />
+        <Timer />
       )}
       {last && (
         <OverLine />
@@ -929,47 +898,28 @@ export const StatusBlock = (props: any) => {
   )
 }
 
-export const Timer = (props: any) => {
-  const { setHour, setMinute, setSettingTimeErrorMessage } = props
+export const Timer = () => {
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [{ configs }] = useConfig();
 
   const styles = StyleSheet.create({
-    inputStyle: {
-      paddingHorizontal: 7,
-      paddingVertical: 2,
-      borderRadius: 0,
+    settingTime: {
       fontSize: 14,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      margin: 0,
+      marginRight: 10,
+      paddingHorizontal: 10,
+      paddingTop: 5,
+      borderColor: theme.colors.disabled
     }
   })
 
-  const handleChangeInput = (val: any, type: string) => {
-    setSettingTimeErrorMessage('')
-    if (type === 'hour') {
-      setHour(val)
-    }
-    if (type === 'minute') {
-      setMinute(val)
-    }
-  }
-
   return (
     <TimerInputWrapper>
-      <TextInput
-        placeholder='HH'
-        keyboardType='number-pad'
-        maxLength={2}
-        style={{ ...styles.inputStyle, width: 36 }}
-        onChangeText={hour => handleChangeInput(hour, 'hour')}
-      />
-      <OText color={theme.colors.disabled}>:</OText>
-      <TextInput
-        placeholder='MM'
-        keyboardType='number-pad'
-        maxLength={2}
-        style={{ ...styles.inputStyle, width: 40 }}
-        onChangeText={minute => handleChangeInput(minute, 'minute')}
-      />
+      <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
+      <OText>{t('MIN', 'min')}</OText>
     </TimerInputWrapper>
   )
 }

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

@@ -130,15 +130,12 @@ export const ItemContent = styled.View`
 `
 
 export const TimerInputWrapper = styled.View`
-  border-width: 1px;
-  border-radius: 7.6px;
   color: ${(props: any) => props.theme.colors.disabled};
-  border-color: ${(props: any) => props.theme.colors.disabled};
+  margin-top: 15px;
   margin-left: 30px;
   margin-right: 30px;
   flex-direction: row;
-  align-items: center;
-  width: 80px;
+  align-items: flex-end;
 `
 export const OverLine = styled.View`
   position: absolute;

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Platform, PlatformIOSStatic } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import moment from 'moment'
 import { useLanguage, useUtils } from 'ordering-components/native';
@@ -8,6 +8,10 @@ import {
   Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder, Timestatus
 } from './styles';
 import EntypoIcon from 'react-native-vector-icons/Entypo'
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+import DeviceInfo from 'react-native-device-info';
+
+const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
 export const PreviousOrders = (props: any) => {
   const {
@@ -17,25 +21,38 @@ export const PreviousOrders = (props: any) => {
     handleClickOrder,
     isLogisticOrder,
     handleClickLogisticOrder,
-    slaSettingTime
+    slaSettingTime,
+    currentTabSelected,
+    currentOrdenSelected
   } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
   const theme = useTheme();
   const [currentTime, setCurrentTime] = useState()
+  const [orientationState] = useDeviceOrientation();
+
+  const IS_PORTRAIT = orientationState.orientation === PORTRAIT
+
+  const platformIOS = Platform as PlatformIOSStatic
+  const isIpad = platformIOS.isPad
+  const isTablet = DeviceInfo.isTablet();
 
   const handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
     handleClickOrder && handleClickOrder(order)
-    onNavigationRedirect &&
-      onNavigationRedirect('OrderDetails', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+    if (props.handleClickEvent) {
+      props.handleClickEvent({ ...order, isLogistic: isLogisticOrder })
+    } else {
+      onNavigationRedirect &&
+        onNavigationRedirect('OrderDetails', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+    }
   };
 
   const styles = StyleSheet.create({
     cardButton: {
       flex: 1,
-      minHeight: isLogisticOrder ? 50 : 64,
-      marginBottom: isLogisticOrder ? 0 : 30,
+      paddingVertical: (isIpad || isTablet) ? 20 : 0,
+      marginBottom: IS_PORTRAIT ? 25 : 0,
       marginLeft: 3,
     },
     icon: {
@@ -114,8 +131,9 @@ export const PreviousOrders = (props: any) => {
             return (
               <View
                 style={{
-                  backgroundColor: order?.locked && isLogisticOrder ? '#ccc' : '#fff',
-                  marginBottom: isLogisticOrder ? 10 : 0
+                  backgroundColor: currentOrdenSelected === order?.id ? theme.colors.gray100 : order?.locked && isLogisticOrder ? '#ccc' : '#fff',
+                  marginBottom: isLogisticOrder ? 10 : 0,
+                  // justifyContent: 'center'
                 }}
                 key={order.id}
               >
@@ -159,7 +177,7 @@ export const PreviousOrders = (props: any) => {
                           />
                         </NotificationIcon>
                       )}
-                      <View style={{ flexDirection: 'row' }}>
+                      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
                         <OText
                           style={styles.date}
                           color={theme.colors.unselectText}
@@ -169,9 +187,14 @@ export const PreviousOrders = (props: any) => {
                           {(order?.order_group_id && order?.order_group && isLogisticOrder ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}` : (t('NO', 'Order No.') + order.id)) + ' · '}
                           {order?.delivery_datetime_utc
                             ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY · HH:mm a' })
-                            : parseDate(order?.delivery_datetime, { utc: false })}{' · '}
+                            : parseDate(order?.delivery_datetime, { utc: false })}
                         </OText>
-                        <OText style={styles.date} color={order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : ''} >{getDelayTime(order)}</OText>
+                        {(currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && (
+                          <>
+                            <OText> · </OText>
+                            <OText style={styles.date} color={order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : ''} >{getDelayTime(order)}</OText>
+                          </>
+                        )}
                       </View>
                       {!isLogisticOrder && (
                         <MyOrderOptions>

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

@@ -38,7 +38,6 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     reviewState,
     setReviewState,
     actionState,
-    handleChangeQualification,
     handleSendCustomerReview
   } = props
 
@@ -105,6 +104,11 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
 
   const commentsList = reviewCommentList('customer')
 
+  const handleChangeQualification = (index: any) => {
+    if (index) setReviewState({ ...reviewState, qualification: index, comment: '' })
+    setComments([])
+  }
+
   const isSelectedComment = (commentKey: number) => {
     const found = comments.find((comment: any) => comment?.key === commentKey)
     return found

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

@@ -575,3 +575,7 @@ export interface ReviewCustomerParams {
   handleChangeQualification?: any,
   handleSendCustomerReview?: any,
 }
+
+export interface NoNetworkParams {
+  image?: any;
+}

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}>