ordering-ui-react-native 0.15.54 → 0.15.55-release

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

@@ -1,18 +1,66 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, Dimensions, Platform } from 'react-native';
-import { useLanguage } from 'ordering-components/native';
+import { useForm, Controller } from 'react-hook-form';
+import { useLanguage, useApi } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { LogoWrapper, Container, BackgroundImage } from './styles';
-import { OButton, OIcon, OText } from '../shared';
+import { LogoWrapper, Container, BackgroundImage, FormInput } from './styles';
+import { OButton, OIcon, OText, OInput } from '../shared';
 import { _setStoreData } from '../../providers/StoreUtil';
 
 export const Home = (props: any) => {
-  const { onNavigationRedirect } = props;
+  const { onNavigationRedirect, useRootPoint } = props;
   const safeHeight = Platform.OS === 'ios' ? 80 : 40;
 
   const theme = useTheme();
+  const [ordering, { setOrdering }] = useApi();
   const [, t] = useLanguage();
+  const { control, handleSubmit, errors } = useForm();
 
+
+  const styles = StyleSheet.create({
+    logo: {
+      height: 65,
+      width: 300,
+    },
+    wrapperContent: {
+      width: '100%',
+    },
+    wrapperText: {
+      marginBottom: 20,
+    },
+    textTitle: {
+      fontWeight: '600',
+      fontStyle: 'normal',
+      fontSize: 50,
+    },
+    textSubtitle: {
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      fontSize: 14,
+    },
+    wrapperBtn: {
+      marginBottom: 20
+    },
+    btn: {
+      borderRadius: 7.6,
+      marginTop: 20,
+    },
+    btnText: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 18,
+    },
+    input: {
+      borderWidth: 1,
+      borderRadius: 7.6,
+      borderColor: Object.keys(errors).length > 0 ? theme.colors.error : theme.colors.inputSignup,
+      backgroundColor: theme.colors.transparent,
+    },
+  });
+
+  const [projectName, setProjectName] = useState<any>(null)
+  const [isLoadingProject, setLoadingProject] = useState(false)
   const [orientation, setOrientation] = useState(
     Dimensions.get('window').width < Dimensions.get('window').height
       ? 'Portrait'
@@ -34,6 +82,27 @@ export const Home = (props: any) => {
     }
   });
 
+  const onSubmit = (values: any) => {
+    setLoadingProject(true)
+    setProjectName(values)
+    setOrdering({ ...ordering, project: values?.project_name })
+    _setStoreData('project_name', values?.project_name)
+  };
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setProjectName(null)
+      setLoadingProject(false)
+    }
+  }, [errors])
+
+  useEffect(() => {
+    if (ordering?.project === projectName?.project_name) {
+      setLoadingProject(false)
+      onNavigationRedirect('Login')
+    }
+  }, [ordering])
+
   return (
     <Container height={windowHeight - safeHeight} orientation={orientation}>
       <BackgroundImage
@@ -54,58 +123,62 @@ export const Home = (props: any) => {
             </OText>
           </View>
 
-          <View style={styles.wrapperBtn}>
-            <OButton
-              text={t('LOGIN', 'Login')}
-              textStyle={{
-                ...styles.btnText,
-                color: theme.colors.inputTextColor,
-              }}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-              style={styles.btn}
-              imgRightSrc={false}
-              onClick={() => onNavigationRedirect('Login')}
-            />
-          </View>
+          <>
+            {useRootPoint && (
+              <FormInput>
+                <Controller
+                  control={control}
+                  name='project_name'
+                  rules={{ required: t(`VALIDATION_ERROR_PROJECT_NAME_REQUIRED`, 'The field project name is required') }}
+                  defaultValue=""
+                  render={({ onChange, value }: any) => (
+                    <OInput
+                      name='project_name'
+                      placeholderTextColor={theme.colors.arrowColor}
+                      placeholder={t('PROJECT_NAME', 'Project Name')}
+                      icon={theme.images.general.project}
+                      iconColor={theme.colors.arrowColor}
+                      onChange={(e: any) => onChange(e?.target?.value)}
+                      selectionColor={theme.colors.primary}
+                      color={theme.colors.white}
+                      value={value}
+                      style={styles.input}
+                      returnKeyType='done'
+                      autoCorrect={false}
+                      autoCapitalize='none'
+                      blurOnSubmit={false}
+                      onSubmitEditing={() => handleSubmit(onSubmit)()}
+                    />
+                  )}
+                />
+              </FormInput>
+            )}
+            {Object.keys(errors).length > 0 && (
+              <OText
+                color={theme.colors.white}
+                style={{ alignSelf: 'center', marginTop: 5 }}
+              >
+                {errors['project_name'].message}
+              </OText>
+            )}
+            <View style={styles.wrapperBtn}>
+              <OButton
+                text={useRootPoint ? t('SET_PROJECT', 'Set project') : t('LOGIN', 'Login')}
+                textStyle={{
+                  ...styles.btnText,
+                  color: theme.colors.inputTextColor,
+                }}
+                bgColor={theme.colors.primary}
+                borderColor={theme.colors.primary}
+                isLoading={isLoadingProject}
+                style={styles.btn}
+                imgRightSrc={false}
+                onClick={() => useRootPoint ? handleSubmit(onSubmit)() : onNavigationRedirect('Login')}
+              />
+            </View>
+          </>
         </View>
       </BackgroundImage>
     </Container>
   );
 };
-
-const styles = StyleSheet.create({
-  logo: {
-    height: 65,
-    width: 300,
-  },
-  wrapperContent: {
-    width: '100%',
-  },
-  wrapperText: {
-    marginBottom: 20,
-  },
-  textTitle: {
-    fontWeight: '600',
-    fontStyle: 'normal',
-    fontSize: 50,
-  },
-  textSubtitle: {
-    fontWeight: 'normal',
-    fontStyle: 'normal',
-    fontSize: 14,
-  },
-  wrapperBtn: {
-    marginBottom: 20,
-  },
-  btn: {
-    borderRadius: 7.6,
-    marginTop: 20,
-  },
-  btnText: {
-    fontFamily: 'Poppins',
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: 18,
-  },
-});

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
@@ -25,3 +25,10 @@ export const BackgroundImage = styled.ImageBackground`
   align-items: center;
   padding: 20px 40px;
 `;
+
+export const FormInput = styled.View`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 50px;
+`;

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

@@ -8,6 +8,8 @@ import {
   ScrollView,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
+import Recaptcha from 'react-native-recaptcha-that-works'
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
   ToastType,
@@ -25,6 +27,7 @@ import {
   TabsContainer,
   OrSeparator,
   LineSeparator,
+  RecaptchaButton
 } from './styles';
 import { _setStoreData } from '../../providers/StoreUtil'
 import { OText, OButton, OInput, OIconButton, OModal } from '../shared';
@@ -47,7 +50,10 @@ const LoginFormUI = (props: LoginParams) => {
     handleCheckPhoneCode,
     setCheckPhoneCodeState,
     allowedLevels,
-    useRootPoint
+    useRootPoint,
+    notificationState,
+		handleReCaptcha,
+		enableReCaptcha
   } = props;
 
   const [ordering, { setOrdering }] = useApi();
@@ -61,6 +67,7 @@ const LoginFormUI = (props: LoginParams) => {
   const inputRef = useRef<any>(null);
   const inputMailRef = useRef<any>(null);
 
+  const [projectName, setProjectName] = useState({name: '', isFocued: false});
   const [passwordSee, setPasswordSee] = useState(false);
   const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -84,6 +91,50 @@ const LoginFormUI = (props: LoginParams) => {
   const [submitted, setSubmitted] = useState(false);
   const [formValues, setFormValues] = useState(null);
 
+  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+
+  const recaptchaRef = useRef<any>({});
+
+  const handleOpenRecaptcha = () => {
+		setRecaptchaVerified(false)
+	  	if (!recaptchaConfig?.siteKey) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+			return
+		}
+		if (!recaptchaConfig?.baseUrl) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+			return
+		}
+		recaptchaRef.current.open()
+  	}
+
+	const onRecaptchaVerify = (token: any) => {
+		setRecaptchaVerified(true)
+		handleReCaptcha(token)
+	}
+
+	useEffect(() => {
+		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+			setRecaptchaConfig({
+				siteKey: configs?.security_recaptcha_site_key?.value || null,
+				baseUrl: configs?.security_recaptcha_base_url?.value || null
+			})
+		}
+	}, [configs, enableReCaptcha])
+
+  useEffect(() => {
+    const projectInputInterval = setInterval(() => {
+      if (projectName.name && useRootPoint && projectName.isFocued) {
+        setOrdering({
+          ...ordering,
+          project: projectName.name
+        })
+      }
+    }, 1500)
+    return () => clearInterval(projectInputInterval);
+  }, [projectName])
+
   const getTraduction = (key: string) => {
     const keyList: any = {
       // Add the key and traduction that you need below
@@ -465,6 +516,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.general.project}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
+                    setProjectName({name: e?.target?.value, isFocued: true})
                     onChange(e?.target?.value);
                     setSubmitted(false);
                   }}
@@ -493,6 +545,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.logos.emailInputIcon}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
+                    setProjectName({...projectName, isFocued: false})
                     handleChangeInputEmail(e, onChange);
                   }}
                   selectionColor={theme.colors.primary}
@@ -590,7 +643,7 @@ const LoginFormUI = (props: LoginParams) => {
 
           {onNavigationRedirect && (
             <Pressable
-              style={{ marginRight: 'auto', marginBottom: 35 }}
+              style={{ marginRight: 'auto', marginBottom: 20 }}
               onPress={() => onNavigationRedirect('Forgot')}>
               <OText style={styles.textForgot}>
                 {t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')}
@@ -598,6 +651,39 @@ const LoginFormUI = (props: LoginParams) => {
             </Pressable>
           )}
 
+          {enableReCaptcha && (
+            <>
+              <TouchableOpacity
+                style={{ marginBottom: 15 }}
+                onPress={handleOpenRecaptcha}
+              >
+                <RecaptchaButton>
+                  {recaptchaVerified ? (
+                    <MaterialCommunityIcons
+                      name="checkbox-marked"
+                      size={26}
+                      color={theme.colors.primary}
+                    />
+                  ) : (
+                    <MaterialCommunityIcons
+                      name="checkbox-blank-outline"
+                      size={26}
+                      color={theme.colors.mediumGray}
+                    />
+                  )}
+                  <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+                </RecaptchaButton>
+              </TouchableOpacity>
+              <Recaptcha
+                ref={recaptchaRef}
+                siteKey={recaptchaConfig?.siteKey}
+                baseUrl={recaptchaConfig?.baseUrl}
+                onVerify={onRecaptchaVerify}
+                onExpire={() => setRecaptchaVerified(false)}
+              />
+            </>
+					)}
+
           <OButton
             onClick={handleLogin}
             text={t('LOGIN', 'Login')}
@@ -657,6 +743,7 @@ const LoginFormUI = (props: LoginParams) => {
 export const LoginForm = (props: any) => {
   const loginProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI,
   };
 

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

@@ -46,3 +46,9 @@ export const LineSeparator = styled.View`
   height: 1px;
   background-color: ${(props: any) => props.theme.colors.disabled};
 `;
+
+export const RecaptchaButton = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+`

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

@@ -15,7 +15,7 @@ const LogoutButtonUI = (props: any) => {
     const data = await _retrieveStoreData('notification_state');
     const res = await handleLogoutClick(data);
     if (res) {
-      _clearStoreData({ excludedKeys: ['project_name'] });
+      _clearStoreData({ excludedKeys: ['isTutorial'] });
     }
   };
 

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

@@ -1,50 +1,57 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { useEvent, useLanguage, useUtils, useSession, useApi, NewOrderNotification as NewOrderNotificationController } from 'ordering-components/native'
+import React, { useState, useEffect } from 'react'
+import moment from 'moment'
 import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
-import { OText, OIcon } from '../shared'
-import { useTheme } from 'styled-components/native'
+import Sound from 'react-native-sound'
 import Icon from 'react-native-vector-icons/Feather'
+import { useTheme } from 'styled-components/native'
+import { useEvent, useLanguage, useSession, useApi, NewOrderNotification as NewOrderNotificationController } from 'ordering-components/native'
+
+import { OText, OIcon } from '../shared'
 import { NotificationContainer } from './styles'
-import Sound from 'react-native-sound'
-import moment from 'moment'
 import { useLocation } from '../../hooks/useLocation'
-import { useFocusEffect } from '@react-navigation/core'
+
 Sound.setCategory('Playback')
 
 const windowWidth = Dimensions.get('screen').width
 
 const NewOrderNotificationUI = (props: any) => {
+  const { isBusinessApp } = props
   const [events] = useEvent()
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ user, token }] = useSession()
   const [ordering] = useApi()
-  const [{ getTimeAgo }] = useUtils()
   const { getCurrentLocation } = useLocation();
-  const [modalOpen, setModalOpen] = useState(false)
-  const [newOrderId, setNewOrderId] = useState(null)
-  const [messageOrderId, setMessageOrderId] = useState(null)
   const [soundTimeout, setSoundTimeout] = useState<any>(null)
-  const [isFocused, setIsFocused] = useState(false)
-  const [currentChange, setCurrentChange] = useState(1)
+  let [currentEvent, setCurrentEvent] = useState<any>(null)
+
+  const evtList: any = {
+    1: {
+      event: 'messages',
+      message: t('NEW_MESSAGES_RECEIVED', 'New messages have been received!'),
+      message2: t('ORDER_N_UNREAD_MESSAGES', 'Order #_order_id_ has unread messages.').replace('_order_id_', currentEvent?.orderId),
+    },
+    2: {
+      event: 'order_added',
+      message: t('NEW_ORDERS_RECEIVED', 'New orders have been received!'),
+      message2: t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', currentEvent?.orderId),
+    },
+    3: {
+      event: 'order_updated',
+      message: t('NEW_ORDERS_UPDATED', 'New orders have been updated!'),
+      message2: t('ORDER_N_UPDATED', 'Order #_order_id_ has been updated.').replace('_order_id_', currentEvent?.orderId),
+    },
+  }
 
-  const notificationSound = new Sound(theme.sounds.notification, error => {
-    if (error) {
-      console.log('failed to load the sound', error);
-      return
-    }
-    console.log('loaded successfully');
-  });
+  const notificationSound = new Sound(theme.sounds.notification, (e) => { console.log(e) });
 
   const handlePlayNotificationSound = () => {
+    if (currentEvent) return
     let times = 0
     const _timeout = setInterval(function () {
       notificationSound.play(success => {
         if (success) {
-          console.log('successfully finished playing');
           times = times + 1
-        } else {
-          console.log('playback failed due to audio decoding errors');
         }
       })
       setSoundTimeout(_timeout)
@@ -57,67 +64,57 @@ const NewOrderNotificationUI = (props: any) => {
 
   const handleCloseModal = () => {
     clearInterval(soundTimeout)
-    setModalOpen(false)
-    setNewOrderId(null)
-    setMessageOrderId(null)
+    currentEvent = null
+    setCurrentEvent({ evt: null })
   }
 
-  const handleNotification = (order: any) => {
-    setModalOpen(true)
-    clearInterval(soundTimeout)
-    setCurrentChange(1)
+  const handleEventNotification = async (evtType: number, value: any) => {
+    if (value?.driver) {
+      try {
+        const location = await getCurrentLocation()
+        await fetch(`${ordering.root}/users/${user.id}/locations`, {
+          method: 'POST',
+          body: JSON.stringify({
+            location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
+          }),
+          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
+        })
+      } catch (error) {
+          console.log(error)
+      }
+      const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
+      const assignedSecondsDiff = duration.asSeconds()
+      if (assignedSecondsDiff < 5 && !isBusinessApp) {
+        handlePlayNotificationSound()
+        clearInterval(soundTimeout)
+        currentEvent = { evt: 2, orderId: value?.id }
+        setCurrentEvent({ evt: 2, orderId: value?.id })
+      }
+    }
+    if (evtType === 3 || value.author_id === user.id) return
     handlePlayNotificationSound()
-    setNewOrderId(order.id)
-  }
-
-  const handleMessageNotification = (message: any) => {
-    const { order_id: orderId } = message;
-    if (!modalOpen) setModalOpen(true)
     clearInterval(soundTimeout)
-    setCurrentChange(2)
-    handlePlayNotificationSound()
-    setMessageOrderId(orderId)
+    currentEvent = {
+      evt: evtType,
+      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
+    }
+    setCurrentEvent({
+      evt: evtType,
+      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
+    })
   }
 
   useEffect(() => {
-    events.on('order_added_noification', handleNotification)
-    events.on('message_added_noification', handleMessageNotification)
+    events.on('message_added_notification', (o: any) => handleEventNotification(1, o))
+    events.on('order_added_notification', (o: any) => handleEventNotification(2, o))
+    events.on('order_updated_notification', (o: any) => handleEventNotification(3, o))
     return () => {
-      events.off('order_added_noification', handleNotification)
-      events.off('message_added_noification', handleMessageNotification)
+      events.off('message_added_notification', (o: any) => handleEventNotification(1, o))
+      events.off('order_added_notification', (o: any) => handleEventNotification(2, o))
+      events.off('order_updated_notification', (o: any) => handleEventNotification(3, o))
     }
   }, [])
 
-  const handleUpdateOrder = useCallback(async (order: any) => {
-    if (order?.driver) {
-      const location = await getCurrentLocation()
-      await fetch(`${ordering.root}/users/${user.id}/locations`, {
-        method: 'POST',
-        body: JSON.stringify({
-          location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
-        }),
-        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
-      })
-      const assignedTimeDiff = moment.utc(order?.driver?.last_order_assigned_at).local().fromNow()
-      if (assignedTimeDiff === 'a few seconds ago') {
-        clearInterval(soundTimeout)
-        handlePlayNotificationSound()
-        setNewOrderId(order.id)
-        if(isFocused){
-          setModalOpen(true)
-        }
-      }
-    }
-  }, [newOrderId, notificationSound, soundTimeout])
-
-  useEffect(() => {
-    if (user?.level !== 4) return
-    events.on('order_updated_noification', handleUpdateOrder)
-    return () => {
-      events.off('order_updated_noification', handleUpdateOrder)
-    }
-  }, [handleUpdateOrder, user])
-
   useEffect(() => {
     notificationSound.setVolume(1);
     return () => {
@@ -125,21 +122,12 @@ const NewOrderNotificationUI = (props: any) => {
     }
   }, [])
 
-  useFocusEffect(
-    useCallback(() => {
-      setIsFocused(true)
-      return () => {
-        setIsFocused(false)
-      }
-    }, [])
-  )
-
   return (
     <>
       <Modal
         animationType='slide'
         transparent={true}
-        visible={modalOpen}
+        visible={!!currentEvent?.orderId}
       >
         <NotificationContainer>
           <View style={styles.modalView}>
@@ -147,40 +135,26 @@ const NewOrderNotificationUI = (props: any) => {
               style={styles.wrapperIcon}
               onPress={() => handleCloseModal()}
             >
-              <Icon
-                name="x"
-                size={30}
-              />
+              <Icon name="x" size={30} />
             </TouchableOpacity>
             <OText
               size={18}
               color={theme.colors.textGray}
               weight={600}
             >
-              {currentChange === 1 ? t('NEW_ORDRES_RECEIVED', 'New orders have been received!') : t('NEW_MESSAGES_RECEIVED', 'New messages have been received!')}
+              {evtList[currentEvent?.evt]?.message}
             </OText>
             <OIcon
               src={theme.images.general.newOrder}
               width={250}
               height={200}
             />
-            {newOrderId !== null && (
-              <OText
-                color={theme.colors.textGray}
-                mBottom={15}
-              >
-                {t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', newOrderId)}
-              </OText>
-            )}
-
-            {messageOrderId  !== null && (
-              <OText
-                color={theme.colors.textGray}
-                mBottom={15}
-              >
-                {t('ORDER_N_UNREAD_MESSAGES', 'Order #_order_id_ has unread messages.').replace('_order_id_', messageOrderId)}
-              </OText>
-            )}
+            <OText
+              color={theme.colors.textGray}
+              mBottom={15}
+            >
+              {evtList[currentEvent?.evt]?.message2}
+            </OText>
           </View>
         </NotificationContainer>
       </Modal>

package/themes/business/src/components/OrderDetails/Business.tsx

@@ -335,7 +335,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         addressName: order?.business?.address,
         zipcode: order?.business?.zipcode
       },
-      icon: order?.business?.logo || theme.images.dummies.businessLogo,
+      icon: order?.business?.logo || 'https://res.cloudinary.com/demo/image/fetch/c_thumb,g_face,r_max/https://res.cloudinary.com/ordering2/image/upload/v1654619525/hzegwosnplvrbtjkpfi6.png',
       level: 2,
     },
     {
@@ -439,7 +439,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <>
               <OrderContentComponent order={order} />
               {(order?.status === 7 || order?.status === 4) &&
-                order?.delivery_type === 1 && (
+                order?.delivery_type === 1 && configs?.assign_driver_enabled?.value === '1' && (
                   <AssignDriver>
                     <OText style={{ marginBottom: 5 }} size={16} weight="600">
                       {t('ASSIGN_DRIVER', 'Assign driver')}