ordering-ui-react-native 0.16.20 → 0.16.22-release

package/src/components/StripeElementsForm/index.tsx

@@ -7,7 +7,6 @@ import {
   useConfirmSetupIntent,
   createPaymentMethod
 } from '@stripe/stripe-react-native';
-import configs from '../../config.json'
 import { ErrorMessage } from './styles';
 
 import { StripeElementsForm as StripeFormController } from './naked';
@@ -26,7 +25,8 @@ const StripeElementsFormUI = (props: any) => {
     methodsPay,
     paymethod,
     onCancel,
-    cart
+    cart,
+    merchantId
   } = props;
 
   const theme = useTheme();
@@ -54,17 +54,25 @@ const StripeElementsFormUI = (props: any) => {
   }
 
   if (user?.address) {
-    billingDetails.addressLine1 = user?.address
-  }
+		billingDetails.address = {
+      line1: user?.address
+    }
+	}
 
   const createPayMethod = async () => {
-    const params: any = { type: 'Card' }
-    if (Object.keys(billingDetails).length > 0) {
-      params.billingDetails = billingDetails
-    }
+    const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
+		if (Object.keys(billingDetails).length > 0) {
+			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+		}
     try {
       setCreatePmLoading(true)
-      const { paymentMethod } = await createPaymentMethod(params);
+      const { paymentMethod, error } = await createPaymentMethod(params);
+
+      if (error) {
+        setErrors(error?.message);
+        setCreatePmLoading(false)
+        return
+      }
 
       setCreatePmLoading(false)
       handleSource && handleSource({
@@ -87,10 +95,10 @@ const StripeElementsFormUI = (props: any) => {
       createPayMethod();
       return
     }
-    const params: any = { type: 'Card' }
-    if (Object.keys(billingDetails).length > 0) {
-      params.billingDetails = billingDetails
-    }
+    const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
+		if (Object.keys(billingDetails).length > 0) {
+			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+		}
     try {
       const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
@@ -126,12 +134,13 @@ const StripeElementsFormUI = (props: any) => {
     <View style={styles.container}>
       {publicKey ? (
         <View style={{ flex: 1 }}>
-          <StripeProvider 
+          <StripeProvider
             publishableKey={publicKey}
-            merchantIdentifier={`merchant.${configs.apple_app_id}`}
+            merchantIdentifier={`merchant.${merchantId}`}
+            urlScheme={merchantId}
           >
             {methodsPay?.includes(paymethod) ? (
-              <StripeMethodForm 
+              <StripeMethodForm
                 handleSource={handleSource}
                 onCancel={onCancel}
                 cart={cart}

package/src/components/VerifyPhone/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 43px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -20,7 +20,6 @@ export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  flex-wrap: wrap;
 `
 
 export const WrappCountdown = styled.View`

package/src/components/shared/OBottomPopup.tsx

@@ -4,14 +4,18 @@ const deviceHeight = Dimensions.get('window').height
 
 interface Props {
   open: boolean;
+  containerStyle: any;
   title?: string;
+  titleStyle?: any;
   children?: any;
   onClose?: any;
 }
 const OBottomPopup = (props: Props) => {
   const {
     open,
+    containerStyle,
     title,
+    titleStyle,
     onClose,
     children
   } = props
@@ -29,9 +33,9 @@ const OBottomPopup = (props: Props) => {
         >
           <View style={styles.touchableOutsideStyle} />
         </TouchableWithoutFeedback>
-        <View style={styles.bottomContainer}>
+        <View style={{ ...styles.bottomContainer, ...containerStyle }}>
           <View>
-            <Text style={styles.titleStyle}>
+            <Text style={{ ...styles.titleStyle, ...titleStyle }}>
               {title}
             </Text>
             {children}

package/src/index.tsx

@@ -36,6 +36,7 @@ import { LogoutButton } from './components/LogoutButton';
 import { Messages } from './components/Messages';
 import { MomentOption } from './components/MomentOption';
 import NavBar from './components/NavBar';
+import { NotificationSetting } from './components/NotificationSetting'
 import { NotFoundSource } from './components/NotFoundSource';
 import { OrderCreating } from './components/OrderCreating';
 import { OrderDetails } from './components/OrderDetails';
@@ -136,6 +137,7 @@ export {
   Messages,
   MomentOption,
   NavBar,
+  NotificationSetting,
   NotFoundSource,
   OrderCreating,
   OrderDetails,

package/src/pages/BusinessesListing.tsx

@@ -1,24 +1,25 @@
-import React, {useEffect} from 'react'
+import React, { useEffect } from 'react'
 import { BusinessesListing as BusinessListingController } from '../components/BusinessesListing'
 import styled from 'styled-components/native'
 import { useTheme } from 'styled-components/native'
 
 const BusinessesListing = (props: any) => {
   const theme = useTheme()
-  const businessId =  props.route.params?.businessId
+  const businessId = props.route.params?.businessId
   const categoryId = props.route.params?.categoryId
-  const productId =  props.route.params?.productId
-  const store =  props.route.params?.store
+  const productId = props.route.params?.productId
+  const store = props.route.params?.store
 
   useEffect(() => {
-    if(store){
-      props.navigation.navigate('Business', {store,businessId,categoryId,productId})
+    if (store) {
+      props.navigation.navigate('Business', { store, businessId, categoryId, productId })
       return
     }
   }, [businessId, categoryId, productId, store])
 
   const BusinessesListingProps = {
     ...props,
+    navigation: props?.navigation,
     isSearchByName: true,
     isSearchByDescription: true,
     propsToFetch: ['id', 'name', 'header', 'logo', 'ribbon', 'location', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug'],

package/src/pages/OrderDetails.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { OrderDetails as OrderDetailsController } from '../components/OrderDetails'
 import { SafeAreaContainer } from '../layouts/SafeAreaContainer'
 
-const OrderDetails = ({ navigation, route } : any) => {
+const OrderDetails = ({ navigation, route }: any) => {
   const orderDetailsProps = {
     navigation,
     orderId: route.params?.orderId,

package/src/pages/ReviewDriver.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { Platform } from 'react-native';
 import styled from 'styled-components/native';
-import {ReviewDriver as ReviewDriverController} from '../components/ReviewDriver'
+import { ReviewDriver as ReviewDriverController } from '../components/ReviewDriver'
 import { SafeAreaContainer } from '../layouts/SafeAreaContainer';
 
 const KeyboardView = styled.KeyboardAvoidingView`
   flex: 1;
 `;
 
-const ReviewDriver = ({navigation, route} : any) => {
+const ReviewDriver = ({ navigation, route }: any) => {
   const reviewDriverProps = {
     navigation,
     order: route?.params?.order,

package/src/pages/ReviewOrder.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { Platform } from 'react-native';
 import styled from 'styled-components/native';
-import {ReviewOrder as ReviewOrderController} from '../components/ReviewOrder'
+import { ReviewOrder as ReviewOrderController } from '../components/ReviewOrder'
 import { SafeAreaContainer } from '../layouts/SafeAreaContainer';
 
 const KeyboardView = styled.KeyboardAvoidingView`
   flex: 1;
 `;
 
-const ReviewOrder = ({navigation, route} : any) => {
+const ReviewOrder = ({ navigation, route }: any) => {
   const reviewOrderProps = {
     navigation,
     order: route?.params?.order,

package/src/theme.json

@@ -19,7 +19,6 @@
     "backgroundPage": "#FFFFFF",
     "colorPage": "#333",
     "red": "#D83520",
-    "skyBlue": "#1977F2",
     "white": "#fff",
     "whiteGray": "#f7f6f3",
     "dusk": "rgb(65,77,107)",

package/src/types/@fatnlazycat/react-native-recaptcha-v3/index.d.ts

@@ -0,0 +1 @@
+declare module '@fatnlazycat/react-native-recaptcha-v3'

package/src/types/index.tsx

@@ -17,6 +17,8 @@ export interface LoginParams {
   handleSendVerifyCode?: any;
   handleCheckPhoneCode?: any;
   notificationState?: any;
+  handleReCaptcha?: (token: string) => void;
+  enableReCaptcha?: any;
 }
 export interface ProfileParams {
   navigation?: any;
@@ -99,6 +101,8 @@ export interface SignupParams {
   handleSendVerifyCode?: any;
   handleCheckPhoneCode?: any;
   notificationState?: any;
+  enableReCaptcha?: boolean;
+  handleReCaptcha?: (token: string) => void;
 }
 
 export interface PhoneInputParams {
@@ -248,8 +252,8 @@ export interface OrdersOptionParams {
   navigation?: any,
   loadOrders?: any,
   setOrderList?: any,
-  setOrdersLength?: ({activeOrdersLength, previousOrdersLength} : {activeOrdersLength: number, previousOrdersLength: number}) => void,
-  ordersLength: {activeOrdersLength: number, previousOrdersLength: number}
+  setOrdersLength?: ({ activeOrdersLength, previousOrdersLength }: { activeOrdersLength: number, previousOrdersLength: number }) => void,
+  ordersLength: { activeOrdersLength: number, previousOrdersLength: number }
 }
 export interface ActiveOrdersParams {
   orders?: any,
@@ -347,7 +351,7 @@ export interface MessagesParams {
   messages?: any,
   message?: string,
   image?: string,
-  messagesToShow?: any ,
+  messagesToShow?: any,
   sendMessage?: any,
   handleSend?: () => {},
   setImage?: (image: string | null) => {},
@@ -416,7 +420,7 @@ export interface UpsellingProductsParams {
   setOpenUpselling?: any;
   onRedirect?: any;
   businessId?: number;
-  cartProducts?: Array<any>; 
+  cartProducts?: Array<any>;
   handleUpsellingPage: () => void;
   openUpselling: boolean;
   canOpenUpselling?: boolean;
@@ -424,16 +428,16 @@ export interface UpsellingProductsParams {
 }
 
 export interface GoogleMapsParams {
-  location: {lat: number, lng: number}
-  handleChangeAddressMap?: (address : any, details : any) => void
-  setErrors?: (error : string) => void
+  location: { lat: number, lng: number }
+  handleChangeAddressMap?: (address: any, details: any) => void
+  setErrors?: (error: string) => void
   maxLimitLocation?: number
   readOnly?: boolean
   markerTitle?: string,
   saveLocation?: boolean,
   isSetInputs?: boolean,
   locations?: Array<any>,
-  setSaveLocation?: (val : boolean) => void,
+  setSaveLocation?: (val: boolean) => void,
   handleToggleMap?: () => void
 }
 
@@ -481,7 +485,7 @@ export interface HelpAccountAndPaymentParams {
 
 export interface StripeMethodFormParams {
   cart: any;
-  handleSource: ({id, card} : {id : string, card : any}) => void;
+  handleSource: ({ id, card }: { id: string, card: any }) => void;
   onCancel: () => void;
   setErrors: (error: string) => void;
   paymethod: string;

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)

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

@@ -67,11 +67,11 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
       shadowColor: '#000',
       shadowOffset: {
         width: 0,
-        height: 1.5,
+        height: business?.logo ? 1.5 : 0,
       },
       shadowOpacity: 0.21,
       shadowRadius: 3,
-      elevation: 7,
+      elevation: business?.logo ? 7 : 0,
     },
     header: {
       flexDirection: 'row',

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

@@ -44,33 +44,6 @@ 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) => {
@@ -97,6 +70,33 @@ const ChatUI = (props: MessagesParams) => {
   const theme = useTheme();
   const [messageList, setMessageList] = useState<any>([])
 
+  const ORDER_STATUS: any = {
+    0: t('ORDER_STATUS_PENDING', 'Order status pending'),
+    1: t('ORDERS_COMPLETED', 'Order completed'),
+    2: t('ORDER_REJECTED', 'Order rejected'),
+    3: t('ORDER_STATUS_IN_BUSINESS', 'Order status in business'),
+    4: t('ORDER_READY', 'Order ready'),
+    5: t('ORDER_REJECTED_RESTAURANT', 'Order rejected by restaurant'),
+    6: t('ORDER_STATUS_CANCELLEDBYDRIVER', 'Order status cancelled by driver'),
+    7: t('ORDER_STATUS_ACCEPTEDBYRESTAURANT', 'Order status accepted by restaurant'),
+    8: t('ORDER_CONFIRMED_ACCEPTED_BY_DRIVER', 'Order confirmed accepted by driver'),
+    9: t('ORDER_PICKUP_COMPLETED_BY_DRIVER', 'Order pickup completed by driver'),
+    10: t('ORDER_PICKUP_FAILED_BY_DRIVER', 'Order pickup failed by driver'),
+    11: t('ORDER_DELIVERY_COMPLETED_BY_DRIVER', 'Order delivery completed by driver'),
+    12: t('ORDER_DELIVERY_FAILED_BY_DRIVER', 'Order delivery failed by driver'),
+    13: t('PREORDER', 'Preorder'),
+    14: t('ORDER_NOT_READY', 'Order not ready'),
+    15: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer'),
+    16: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', 'Order status cancelled by customer'),
+    17: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer'),
+    18: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', 'Order driver almost arrived to business'),
+    19: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', 'Order driver almost arrived to customer'),
+    20: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Order customer almost arrived to business'),
+    21: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Order customer arrived to business'),
+    22: t('ORDER_LOOKING_FOR_DRIVER', 'Order looking for driver'),
+    23: t('ORDER_DRIVER_ON_WAY', 'Driver on way')
+  }
+
   const storeMessageList: any = [
     { key: 'store_message_1', text: t('STORE_MESSAGE_1', 'store_message_1') },
     { key: 'store_message_2', text: t('STORE_MESSAGE_2', 'store_message_2') },
@@ -111,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}`)
   }
@@ -370,7 +377,7 @@ const ChatUI = (props: MessagesParams) => {
             ?
             `${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.old !== null && ORDER_STATUS[parseInt(message.change.old, 10)]} ${t('TO', 'to')} ${ORDER_STATUS[parseInt(message.change.new, 10)]}`
             }`
             : message.change.new
               ?
@@ -426,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])
@@ -484,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,
           },
@@ -734,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

@@ -13,6 +13,7 @@ import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
 import { FloatingButton } from '../FloatingButton';
 import { showLocation } from 'react-native-map-link';
+import { transformDistance } from '../../utils';
 
 export const DriverMap = (props: GoogleMapsParams) => {
   const {
@@ -56,6 +57,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
     content: Array<string>;
     key?: string | null;
   }>({ open: false, content: [], key: null });
+  const distanceUnit = configState?.configs?.distance_unit?.value
 
   const {
     hasLocation,
@@ -475,9 +477,10 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 src={theme.images.general.arrow_distance}
                 style={styles.arrowDistance}
               />
-              <OText size={12} numberOfLines={3}>{`${(
-                distancesFromTwoPlacesKm * 3280.84
-              ).toFixed(0)} ${t('FT', 'Ft')}`}</OText>
+              <OText size={12} numberOfLines={3}>
+                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`} 
+              </OText>
+
             </View>
             <View style={{ width: '75%', paddingRight: 20 }}>
               <OText
@@ -485,8 +488,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 size={13}
                 numberOfLines={2}
                 adjustsFontSizeToFit>
-                {`${travelTime.toFixed(2)} - ${isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')
-                  } ${distancesFromTwoPlacesKm.toFixed(2)} km`}
+                {`${travelTime.toFixed(2)} - ${isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')}`}
               </OText>
             </View>
           </View>

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%;
+`