ordering-ui-react-native 0.15.86 → 0.15.87-release

package/src/utils/index.tsx

@@ -34,7 +34,6 @@ export const getTraduction = (key: string, t: any) => {
     ERROR_ADD_PRODUCT_VERY_FAR_FOR_DELIVERY: 'Error adding product, very far for delivery',
     ERROR_PRODUCT_NOT_FOUND: 'Error with the product',
     ERROR_ADD_BUSINESS_INVALID: 'An error occurred with the business',
-    ERROR_INVALID_OFFER: 'The offer doesn\'t exist'
   }
 
   return keyList[key] ? t(key, keyList[key]) : t(key)
@@ -408,49 +407,49 @@ export const orderCommentList = (value: string) => {
 
   const messages: any = {
     6: [// on reject order
-      'Very far away',
-      'Driver/ vehicle incident',
-      'Destination unreachable',
-      'Unavailable driver',
-      'Other'
+      'very_far_away',
+      'driver_vehicle_incident',
+      'destination_unreacheable',
+      'unavailable_driver',
+      'other'
     ],
     9: [// on force pickup status
-      'I forgot to complete it in the location',
-      'I didn\'t have internet connection',
-      'Other'
+      'forgot_complete_location',
+      'not_internet_conection',
+      'other'
     ],
     10: [// on pickup failed by driver
-      'Very far away',
-      'Driver/ vehicle incident',
-      'Destination unreachable',
-      'Store closed',
-      'Unavailable driver',
-      'Other'
+      'very_far_away',
+      'driver_vehicle_incident',
+      'destination_unreacheable',
+      'store_closed',
+      'unavailable_driver',
+      'other'
     ],
     11: [// on force delivery status
-      'I forgot to complete it in the location',
-      'I didn\'t have internet connection',
-      'Other'
+      'forgot_complete_location',
+      'not_internet_conection',
+      'other'
     ],
     12: [// on delivery failed by driver
-      'Very far away',
-      'Driver/ vehicle incident',
-      'Destination unreachable',
-      'Recipient unavailable',
-      'Refused- incorrect/ missing items',
-      'Refused- damage',
-      'Other'
+      'very_far_away',
+      'driver_vehicle_incident',
+      'destination_unreacheable',
+      'recipient_unavailable',
+      'incorrect_missing_items',
+      'refused_damage',
+      'other'
     ],
     14: [// on order not ready
-      'Store didn\'t receive the order on time',
-      'Store very busy',
-      'Other'
+      'store_recieve_order_late',
+      'store_busy',
+      'other'
     ]
   }
 
   if (!messages[status]) return null
 
-  const list = messages[status].map((val: any, i: number) => ({ key: i, content: t(`ORDER_STATUS_${status}_QUICK_COMMENT_${i}`, val) }))
+  const list = messages[status].map((val: any, i: number) => ({ key: i, value: val, content: t(`REJECT_REASON_${val.toUpperCase()}`, val.replace(/_/g, ' ')) }))
 
   return { list }
 }

package/themes/business/index.tsx

@@ -39,6 +39,8 @@ import { VerifyPhone } from './src/components/VerifyPhone';
 import { DriverMap } from './src/components/DriverMap';
 import { MapViewUI as MapView } from './src/components/MapView'
 import { NewOrderNotification } from './src/components/NewOrderNotification';
+import { DriverSchedule } from './src/components/DriverSchedule';
+import { ScheduleBlocked } from './src/components/ScheduleBlocked';
 //OComponents
 import {
   OText,
@@ -106,6 +108,8 @@ export {
   UserFormDetailsUI,
   UserProfileForm,
   VerifyPhone,
+  DriverSchedule,
+  ScheduleBlocked,
   //OComponents
   OAlert,
   OButton,

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

@@ -1,14 +1,17 @@
 import React, { useState, useEffect, useRef } from 'react';
+import FeatherIcon from 'react-native-vector-icons/Feather';
 import {
   Linking,
   Keyboard,
   Platform,
   View,
   KeyboardAvoidingView,
-  TextInput
+  TextInput,
+  StyleSheet
 } from 'react-native';
 import { useTheme } from 'styled-components/native';
-import { useLanguage } from 'ordering-components/native';
+import SelectDropdown from 'react-native-select-dropdown'
+import { useLanguage, useSession } from 'ordering-components/native';
 import { Content, Timer, TimeField, Header, Action, Comments, CommentsButtonGroup } from './styles';
 import { FloatingButton } from '../FloatingButton';
 import { OText, OButton, OTextarea, OIconButton } from '../shared';
@@ -32,6 +35,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   } = props;
 
   const [, t] = useLanguage();
+  const [{ user }] = useSession();
   const theme = useTheme();
   const scrollViewRef = useRef<any>(null);
   const viewRef = useRef<any>(null);
@@ -41,10 +45,12 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const [min, setMin] = useState('00');
   const [time, setTime] = useState('');
   const [comments, setComments] = useState('');
-  const [commentList, setCommentList] = useState<any>([]);
+  const [rejectReason, setRejectReason] = useState(null);
   const [isKeyboardShow, setIsKeyboardShow] = useState(false);
   const { top, bottom } = useSafeAreaInsets()
 
+  const isDriverApp = appTitle?.key === 'DELIVERY_APP'
+
   const orderCommentsList = orderCommentList(action)
 
   let codeNumberPhone, numberPhone, numberToShow;
@@ -53,20 +59,41 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const buttonText = t(orderTitle[action]?.btnKey, orderTitle[action]?.btnText)
   const showTextArea = ['reject', 'deliveryFailed', 'pickupFailed', 'notReady', 'forcePickUp', 'forceDelivery'].includes(action)
 
-  const isSelectedComment = (commentKey: number) => {
-    const found = commentList.find((comment: any) => comment?.key === commentKey)
-    return found
-  }
-
-  const handleChangeComments = (commentItem: any) => {
-    const found = commentList.find((comment: any) => comment?.key === commentItem.key)
-    if (found) {
-      const _comments = commentList.filter((comment: any) => comment?.key !== commentItem.key)
-      setCommentList(_comments)
-    } else {
-      setCommentList([...commentList, commentItem])
-    }
-  }
+  const styles = StyleSheet.create({
+    selectOption: {
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      minHeight: 40,
+      width: '100%',
+      paddingHorizontal: 15,
+      backgroundColor: theme.colors.inputChat,
+      borderRadius: 7.6,
+    },
+    buttonTextStyle: {
+      textAlign: 'left',
+      marginHorizontal: 0,
+      fontSize: 16,
+      lineHeight: 24,
+      color: '#748194',
+      textTransform: 'capitalize'
+    },
+    dropdownStyle: {
+      borderWidth: 1,
+      borderRadius: 8,
+      paddingTop: 5,
+      backgroundColor: '#fff',
+      borderColor: theme.colors.lightGray,
+      overflow: 'hidden',
+      minHeight: 120
+    },
+    rowStyle: {
+      display: 'flex',
+      borderBottomWidth: 0,
+      height: 36,
+      alignItems: 'center',
+      paddingHorizontal: 10
+    },
+  })
 
   const handleFocus = () => {
     viewRef?.current?.measure((x: any, y: any) => {
@@ -74,12 +101,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     });
   };
 
-  const handleFocusTimer = () => {
-    timerRef?.current?.measure((x: any, y: any) => {
-      scrollViewRef?.current?.scrollTo({ x: 0, y });
-    });
-  };
-
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener(
       'keyboardDidShow',
@@ -171,13 +192,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
 
   const handleAcceptOrReject = () => {
     handleFixTime();
-
-    let _comments = ''
-    if (commentList.length > 0) {
-      commentList.map((comment: any) => (_comments += comment.content + '. '))
-    }
-    const _comment = _comments + comments
-
     let minsToSend = min;
 
     if (min > '60') minsToSend = '59';
@@ -191,7 +205,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 7,
       },
       rejectByBusiness: {
-        comment: _comment,
+        comment: comments,
         status: 5,
       },
       acceptByDriver: {
@@ -199,28 +213,34 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 8,
       },
       rejectByDriver: {
-        comment: _comment,
+        comment: comments,
         status: 6,
+        reject_reason: rejectReason
       },
       pickupFailedByDriver: {
-        comment: _comment,
-        status: 10
+        comment: comments,
+        status: 10,
+        reject_reason: rejectReason
       },
       deliveryFailedByDriver: {
-        comment: _comment,
-        status: 12
+        comment: comments,
+        status: 12,
+        reject_reason: rejectReason
       },
       orderNotReady: {
-        comment: _comment,
-        status: 14
+        comment: comments,
+        status: 14,
+        reject_reason: rejectReason
       },
       forcePickUp: {
-        reasons: _comment,
-        status: 9
+        reasons: comments,
+        status: 9,
+        reject_reason: rejectReason
       },
       forceDelivery: {
-        reasons: _comment,
-        status: 11
+        reasons: comments,
+        status: 11,
+        reject_reason: rejectReason
       }
     };
 
@@ -413,25 +433,45 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
           onBlur={() => actions && action === 'accept' && timerRef?.current?.focus?.()}
         />
 
-        {orderCommentsList && (
+        {orderCommentsList && isDriverApp && (
           <CommentsButtonGroup>
-            {orderCommentsList?.list?.map((comment: any) => (
-              <OButton
-                key={comment.key}
-                text={comment.content}
-                bgColor={isSelectedComment(comment.key) ? theme.colors.primary : theme.colors.tabBar}
-                borderColor={isSelectedComment(comment.key) ? theme.colors.primary : theme.colors.tabBar}
-                textStyle={{
-                  color: isSelectedComment(comment.key) ? theme.colors.white : theme.colors.darkText,
-                  fontSize: 12,
-                  paddingRight: isSelectedComment(comment.key) ? 15 : 0
-                }}
-                style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
-                imgRightSrc={isSelectedComment(comment.key) ? theme.images.general.close : null}
-                imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-                onClick={() => handleChangeComments(comment) }
-              />
-            ))}
+            <SelectDropdown
+              defaultButtonText={t('REJECT_REASONS_OPTIONS', 'Reject reasons')}
+              data={orderCommentsList?.list}
+              onSelect={(selectedItem) => {
+                setRejectReason(selectedItem?.value)
+              }}
+              buttonTextAfterSelection={(selectedItem) => selectedItem.content}
+              rowTextForSelection={(item) => item.key}
+              buttonStyle={styles.selectOption}
+              buttonTextStyle={styles.buttonTextStyle}
+              renderDropdownIcon={isOpened => {
+                return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
+              }}
+              dropdownStyle={styles.dropdownStyle}
+              dropdownOverlayColor='transparent'
+              rowStyle={styles.rowStyle}
+              renderCustomizedRowChild={(item) => {
+                return (
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center'
+                    }}
+                  >
+                    <View>
+                      <OText
+                        size={14}
+                        color={'#748194'}
+                        style={{ textTransform: 'capitalize' }}
+                      >
+                        {item?.content}
+                      </OText>
+                    </View>
+                  </View>
+                );
+              }}
+            />
           </CommentsButtonGroup>
         )}
 

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

@@ -39,4 +39,5 @@ export const Comments = styled.View`
 export const CommentsButtonGroup = styled.View`
   flex-direction: row;
   flex-wrap: wrap;
+  margin-top: 15px;
 `

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

@@ -44,6 +44,35 @@ import { USER_TYPE } from '../../config/constants';
 
 import SignatureScreen from 'react-native-signature-canvas';
 
+const ORDER_STATUS: any = {
+  0: 'ORDER_STATUS_PENDING',
+  1: 'ORDERS_COMPLETED',
+  2: 'ORDER_REJECTED',
+  3: 'ORDER_STATUS_IN_BUSINESS',
+  4: 'ORDER_READY',
+  5: 'ORDER_REJECTED_RESTAURANT',
+  6: 'ORDER_STATUS_CANCELLEDBYDRIVER',
+  7: 'ORDER_STATUS_ACCEPTEDBYRESTAURANT',
+  8: 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER',
+  9: 'ORDER_PICKUP_COMPLETED_BY_DRIVER',
+  10: 'ORDER_PICKUP_FAILED_BY_DRIVER',
+  11: 'ORDER_DELIVERY_COMPLETED_BY_DRIVER',
+  12: 'ORDER_DELIVERY_FAILED_BY_DRIVER',
+  13: 'PREORDER',
+  14: 'ORDER_NOT_READY',
+  15: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+  16: 'ORDER_STATUS_CANCELLED_BY_CUSTOMER',
+  17: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+  18: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS',
+  19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
+  20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+  21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+  22: 'ORDER_LOOKING_FOR_DRIVER',
+  23: 'ORDER_DRIVER_ON_WAY'
+}
+
+const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
+
 const ChatUI = (props: MessagesParams) => {
   const {
     type,
@@ -82,6 +111,13 @@ const ChatUI = (props: MessagesParams) => {
     { key: 'driver_message_4', text: t('DRIVER_MESSAGE_4', 'driver_message_4') }
   ]
 
+  const adminMessageList: any = [
+    { key: 'message_1', text: t('ADMIN_MESSAGE_1', 'admin_message_1') },
+    { key: 'message_2', text: t('ADMIN_MESSAGE_2', 'admin_message_2') },
+    { key: 'message_3', text: t('ADMIN_MESSAGE_3', 'admin_message_3') },
+    { key: 'message_4', text: t('ADMIN_MESSAGE_4', 'admin_message_4') }
+  ]
+
   const handleClickQuickMessage = (text: string) => {
     setMessage && setMessage(`${message}${text}`)
   }
@@ -317,71 +353,6 @@ const ChatUI = (props: MessagesParams) => {
     }
   };
 
-  const getStatus = (status: number, attribute: any) => {
-    const hour = Math.trunc(status / 60);
-    const min = Math.round((status / 60 - hour) * 60);
-
-    if (attribute === 'status') {
-      switch (status) {
-        case 0:
-          return 'ORDER_STATUS_PENDING';
-        case 1:
-          return 'ORDERS_COMPLETED';
-        case 2:
-          return 'ORDER_REJECTED';
-        case 3:
-          return 'ORDER_STATUS_IN_BUSINESS';
-        case 4:
-          return 'ORDER_READY';
-        case 5:
-          return 'ORDER_REJECTED_RESTAURANT';
-        case 6:
-          return 'ORDER_STATUS_CANCELLEDBYDRIVER';
-        case 7:
-          return 'ORDER_STATUS_ACCEPTEDBYRESTAURANT';
-        case 8:
-          return 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER';
-        case 9:
-          return 'ORDER_PICKUP_COMPLETED_BY_DRIVER';
-        case 10:
-          return 'ORDER_PICKUP_FAILED_BY_DRIVER';
-        case 11:
-          return 'ORDER_DELIVERY_COMPLETED_BY_DRIVER';
-        case 12:
-          return 'ORDER_DELIVERY_FAILED_BY_DRIVER';
-        case 13:
-          return 'PREORDER';
-        case 14:
-          return 'ORDER_NOT_READY';
-        case 15:
-          return 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER';
-        case 16:
-          return 'ORDER_STATUS_CANCELLED_BY_CUSTOMER';
-        case 17:
-          return 'ORDER_NOT_PICKEDUP_BY_CUSTOMER';
-        case 18:
-          return 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS';
-        case 19:
-          return 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER';
-        case 20:
-          return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS';
-        case 21:
-          return 'ORDER_CUSTOMER_ARRIVED_BUSINESS';
-        case 22:
-          return 'ORDER_LOOKING_FOR_DRIVER'
-        case 23:
-          return 'ORDER_DRIVER_ON_WAY'
-        default:
-          return ``;
-      }
-    }
-
-    if (attribute === 'prepared_in' || attribute === 'delivered_in') {
-      return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min} ${status > 60 ? 'hours' : 'minutes'
-        }`;
-    }
-  };
-
   const onSubmit = (values: any) => {
     handleSend && handleSend();
     setImage && setImage(null);
@@ -403,28 +374,16 @@ const ChatUI = (props: MessagesParams) => {
           numberOfLines={3}
           style={{ ...styles.firstMessageText, textAlign: 'center' }}>
           {message.change?.attribute !== 'driver_id'
-            ? `${t('ORDER', 'Order')} ${t(
-              message.change.attribute.toUpperCase(),
-              message.change.attribute,
-            )} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null
-              ? t(
-                getStatus(
-                  parseInt(message.change.old, 10),
-                  message.change?.attribute,
-                ),
-              )
-              : '0'
-            } ${t('TO', 'to')} ${t(
-              getStatus(
-                parseInt(message.change.new, 10),
-                message.change?.attribute,
-              ),
-            )}`
+            ?
+            `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
+              `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
+              `${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+            }`
             : message.change.new
-              ? `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''
-              } ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''
-              }`
-              : `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
+              ?
+              `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+              :
+              `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
         </OText>
         <OText size={10} color={'#aaa'} style={{ alignSelf: 'flex-start' }}>
           {parseTime(message?.created_at, { outputFormat: 'hh:mma' })}
@@ -474,7 +433,8 @@ const ChatUI = (props: MessagesParams) => {
   };
 
   useEffect(() => {
-    if (user.level === 2) setMessageList(storeMessageList)
+    if (user.level === 0) setMessageList(adminMessageList)
+    else if (user.level === 2) setMessageList(storeMessageList)
     else if (user.level === 4) setMessageList(driverMessageList)
     else setMessageList([])
   }, [user])
@@ -532,12 +492,12 @@ const ChatUI = (props: MessagesParams) => {
           image: message.source,
           system: message.type === 1,
           user: {
-            _id: message.author.id,
-            name: message.author.name,
+            _id: message.author?.id,
+            name: message.author?.name,
             can_see: message?.can_see,
-            level: message.author.level,
+            level: message.author?.level,
             avatar:
-              message.author.id !== user?.id && type === USER_TYPE.DRIVER
+              message.author?.id !== user?.id && type === USER_TYPE.DRIVER
                 ? order?.driver?.photo
                 : order?.business?.logo,
           },
@@ -782,7 +742,7 @@ const ChatUI = (props: MessagesParams) => {
                 color: '#414954'
               }}
               style={{ ...styles.editButton }}
-              onClick={() => handleClickQuickMessage(quickMessage.text)}
+              onClick={() => handleClickQuickMessage(message?.length > 0 ? ' ' + quickMessage.text : quickMessage.text)}
             />
           </React.Fragment>
         ))}

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

@@ -327,6 +327,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
       justifyContent: 'center',
       paddingVertical: 10,
       paddingHorizontal: 80,
+      position: 'absolute'
     },
     showButton: {
       alignSelf: 'center',
@@ -490,14 +491,14 @@ export const DriverMap = (props: GoogleMapsParams) => {
             </View>
           </View>
         </View>
-        <View style={styles.buttonContainer}>
+        <View style={{
+          ...styles.buttonContainer,
+          bottom: showAcceptOrReject ? 80 : 0
+        }}>
           <OButton
             imgRightSrc=''
             textStyle={{ color: theme.colors.white }}
-            style={{
-              ...styles.showButton,
-              bottom: showAcceptOrReject ? 80 : 0
-            }}
+            style={styles.showButton}
             onClick={() => showLocation({
               latitude: destination.latitude,
               longitude: destination.longitude,

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

@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import { RefreshControl, ScrollView, View } from 'react-native'
+import { OText } from '../shared'
+import { useLanguage, useSession } from 'ordering-components/native'
+import { DayContainer } from './styles'
+import { useTheme } from 'styled-components/native'
+export const DriverSchedule = (props: any) => {
+    const { schedule } = props
+    const [, t] = useLanguage()
+    const theme = useTheme()
+    const [, { refreshUserInfo }] = useSession()
+    const [refreshing] = useState(false);
+
+    const daysOfWeek = [
+        t('SUNDAY_ABBREVIATION', 'Sun'),
+        t('MONDAY_ABBREVIATION', 'Mon'),
+        t('TUESDAY_ABBREVIATION', 'Tues'),
+        t('WEDNESDAY_ABBREVIATION', 'Wed'),
+        t('THURSDAY_ABBREVIATION', 'Thur'),
+        t('FRIDAY_ABBREVIATION', 'Fri'),
+        t('SATURDAY_ABBREVIATION', 'Sat')
+    ]
+
+    const scheduleFormatted = ({ hour, minute }: any) => {
+        const checkTime = (val: number) => val < 10 ? `0${val}` : val
+        return `${checkTime(hour)}:${checkTime(minute)}`
+    }
+
+    return (
+        <ScrollView
+            refreshControl={<RefreshControl
+                refreshing={refreshing}
+                onRefresh={() => refreshUserInfo()}
+            />}
+        >
+            <OText size={24} style={{ paddingLeft: 30 }}>
+                {t('SCHEDULE', 'Schedule')}
+            </OText>
+            <View style={{ padding: 30 }}>
+                {schedule.map((item: any, i: number) => (
+                    <DayContainer key={daysOfWeek[i]}>
+                        <OText style={{ width: '20%' }} size={22} weight={700}>{daysOfWeek[i]}</OText>
+                        <View style={{ width: '80%', alignItems: 'center' }}>
+                            <>
+                                {item?.enabled ? (
+                                    <View>
+                                        {item?.lapses.map((lapse: any, i: number) => (
+                                            <View key={`${daysOfWeek[i]}_${i}`} style={{ marginTop: 3, marginBottom: 20, flexDirection: 'row', justifyContent: 'space-between' }}>
+                                                <OText size={18} style={{ width: '30%' }}>
+                                                    {scheduleFormatted(lapse.open)}
+                                                </OText>
+                                                <OText size={18} style={{ width: 15 }}>
+                                                    -
+                                                </OText>
+                                                <OText size={18} style={{ width: '30%' }}>
+                                                    {scheduleFormatted(lapse.close)}
+                                                </OText>
+                                            </View>
+                                        ))}
+                                    </View>
+                                ) : (
+                                    <OText size={18} style={{ marginTop: 3, marginBottom: 10 }} color={theme.colors.red}>{t('NOT_AVAILABLE', 'Not available')}</OText>
+                                )}
+                            </>
+                        </View>
+                    </DayContainer>
+                ))}
+            </View>
+        </ScrollView>
+    )
+}

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

@@ -0,0 +1,6 @@
+import styled from "styled-components/native";
+
+export const DayContainer = styled.View`
+    flex-direction: row;
+    width: 100%;
+`