ordering-ui-react-native 0.21.25 → 0.21.26-release

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

@@ -11,6 +11,8 @@ import {
   useToast,
   useLanguage,
   useUtils,
+  useConfig,
+  useValidationFields
 } from 'ordering-components/native';
 import {
   CenterView,
@@ -23,6 +25,7 @@ import { LogoutButton } from '../LogoutButton';
 import { LanguageSelector } from '../LanguageSelector';
 import { UserFormDetailsUI } from '../UserFormDetails';
 import { DriverSchedule } from '../DriverSchedule'
+import { PrinterSettings } from '../PrinterSettings'
 import ToggleSwitch from 'toggle-switch-react-native';
 import { UDWrapper } from '../UserFormDetails/styles';
 import {
@@ -39,7 +42,6 @@ import { NotFoundSource } from '../NotFoundSource';
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 const ProfileUI = (props: ProfileParams) => {
   const {
-    navigation,
     formState,
     isEdit,
     validationFields,
@@ -47,16 +49,17 @@ const ProfileUI = (props: ProfileParams) => {
     toggleIsEdit,
     cleanFormState,
     handleToggleAvalaibleStatusDriver,
-    userState,
-    isAvailableLoading,
     isAlsea,
-    isHideDriverStatus
+    isShowDriverStatus,
+    navigation
   } = props;
 
-  const [{ user }] = useSession();
-  const [state, t] = useLanguage();
+  const [{ user, sessionLoading }] = useSession();
+  const [, t] = useLanguage();
   const [, { showToast }] = useToast();
   const [{ optimizeImage }] = useUtils();
+  const [{ configs }] = useConfig();
+  const [{ loading }, { loadOriginalValidationFields }] = useValidationFields()
   const { errors } = useForm();
   const theme = useTheme();
 
@@ -68,10 +71,11 @@ const ProfileUI = (props: ProfileParams) => {
     },
   });
   const [phoneUpdate, setPhoneUpdate] = useState(false);
+  const [userState, setUserState] = useState(props.userState)
   const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
   const [phoneToShow, setPhoneToShow] = useState('');
   const [openModal, setOpenModal] = useState(false)
-
+  const allowDriverUpdateData = user?.level !== 4 || configs?.allow_driver_update_data?.value === "1"
   useEffect(() => {
     if (phoneInputData.phone.cellphone) {
       const codeNumberPhone = phoneInputData.phone.cellphone.slice(0, 3);
@@ -116,14 +120,15 @@ const ProfileUI = (props: ProfileParams) => {
         maxWidth: 200,
         includeBase64: true,
       },
-      (response: any) => {
-        if (response.didCancel) {
+      (image: any) => {
+        const response = image?.assets?.[0];
+        if (response?.didCancel) {
           console.log('User cancelled image picker');
-        } else if (response.errorMessage) {
+        } else if (response?.errorMessage) {
           console.log('ImagePicker Error: ', response.errorMessage);
           showToast(ToastType.Error, response.errorMessage);
         } else {
-          if (response.uri) {
+          if (response?.uri) {
             const url = `data:${response.type};base64,${response.base64}`;
             handleButtonUpdateClick(null, true, url);
           } else {
@@ -207,6 +212,22 @@ const ProfileUI = (props: ProfileParams) => {
     }
   }, [user?.country_phone_code]);
 
+  useEffect(() => {
+    setUserState({ ...userState, ...props.userState })
+  }, [props.userState])
+
+  useEffect(() => {
+    if (!user?.id) return
+
+    setUserState({
+      ...userState,
+      result: {
+        error: true,
+        result: user
+      }
+    })
+  }, [user, props.isFocused])
+
   const styles = StyleSheet.create({
     label: {
       color: theme.colors.textGray,
@@ -243,19 +264,21 @@ const ProfileUI = (props: ProfileParams) => {
 
   return (
     <>
-      {validationFields?.error && (
+      {validationFields?.error && !loading && (
         <NotFoundSource
           content={
-            validationFields?.error[0] ||
-            validationFields?.error[0]?.message ||
+            validationFields?.error?.[0] ||
+            validationFields?.error?.[0]?.message ||
             t('NETWORK_ERROR', 'Network Error')
           }
           image={theme.images.general.notFound}
           conditioned={false}
+          onClickButton={() => loadOriginalValidationFields({ forceLoading: true })}
+          btnTitle={t('REFRESH_PROFILE', 'Refresh profile')}
         />
       )}
 
-      {(formState?.loading || state?.loading) && !validationFields.error && (
+      {(formState?.loading || sessionLoading) && !validationFields.error && (
         <View
           style={{
             backgroundColor: theme.colors.backgroundLight,
@@ -326,7 +349,7 @@ const ProfileUI = (props: ProfileParams) => {
         </View>
       )}
 
-      {!formState?.loading && !state?.loading && !validationFields.error && (
+      {!(formState?.loading || sessionLoading) && !validationFields.error && (
         <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
           <CenterView>
             <OIcon
@@ -336,17 +359,18 @@ const ProfileUI = (props: ProfileParams) => {
               height={150}
               style={{ borderRadius: 7.2 }}
             />
-
-            <OIconButton
-              icon={theme.images.general.camera}
-              borderColor={theme.colors.clear}
-              iconStyle={{ width: 21, height: 21 }}
-              style={{ maxWidth: 40 }}
-              onClick={() => handleImagePicker()}
-            />
+            {allowDriverUpdateData && (
+              <OIconButton
+                icon={theme.images.general.camera}
+                borderColor={theme.colors.clear}
+                iconStyle={{ width: 21, height: 21 }}
+                style={{ maxWidth: 40 }}
+                onClick={() => handleImagePicker()}
+              />
+            )}
           </CenterView>
 
-          {user?.level === 4 && !isHideDriverStatus && (
+          {user?.level === 4 && (
             <EnabledStatusDriver>
               <View style={{ flex: 1 }}>
                 <OText
@@ -354,29 +378,33 @@ const ProfileUI = (props: ProfileParams) => {
                   adjustsFontSizeToFit
                   style={{ ...styles.label, paddingHorizontal: 0 }}>
                   {t(
-                    'AVAILABLE_TO_RECEIVE_ORDERS',
-                    'Available to receive orders',
+                    `${!isShowDriverStatus ? 'NOT_' : ''}AVAILABLE_TO_RECEIVE_ORDERS`,
+                    `${!isShowDriverStatus ? 'You are not ' : ''}Available to receive orders`
                   )}
                 </OText>
               </View>
 
-              {userState.loadingDriver ? (
-                <ActivityIndicator size="small" color={theme.colors.primary} />
-              ) : (
-                <ToggleSwitch
-                  isOn={userState?.result?.result?.available}
-                  onColor={theme.colors.primary}
-                  offColor={theme.colors.offColor}
-                  size="small"
-                  onToggle={() =>
-                    handleToggleAvalaibleStatusDriver &&
-                    handleToggleAvalaibleStatusDriver(
-                      !userState?.result?.result?.available,
-                    )
-                  }
-                  disabled={userState?.loading}
-                  animationSpeed={200}
-                />
+              {isShowDriverStatus && (
+                <>
+                  {userState.loadingDriver ? (
+                    <ActivityIndicator size="small" color={theme.colors.primary} />
+                  ) : (
+                    <ToggleSwitch
+                      isOn={userState?.result?.result?.available}
+                      onColor={theme.colors.primary}
+                      offColor={theme.colors.offColor}
+                      size="small"
+                      onToggle={() =>
+                        handleToggleAvalaibleStatusDriver &&
+                        handleToggleAvalaibleStatusDriver(
+                          !userState?.result?.result?.available,
+                        )
+                      }
+                      disabled={userState?.loading}
+                      animationSpeed={200}
+                    />
+                  )}
+                </>
               )}
             </EnabledStatusDriver>
           )}
@@ -462,6 +490,7 @@ const ProfileUI = (props: ProfileParams) => {
                 handleCancelEdit={handleCancelEdit}
                 toggleIsEdit={toggleIsEdit}
                 isAlsea={isAlsea}
+                allowDriverUpdateData={allowDriverUpdateData}
               />
             </View>
           )}
@@ -479,9 +508,34 @@ const ProfileUI = (props: ProfileParams) => {
               />
             </EditButton>
           )}
-          <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
+          {!props.isBusinessApp ? (
+            <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <OText size={16}>{t('SCHEDULE', 'Schedule')}</OText>
+                <AntDesignIcon size={18} name='right' />
+              </View>
+              <View style={{
+                borderBottomColor: theme.colors.tabBar,
+                borderBottomWidth: 1,
+                marginTop: 10
+              }} />
+            </Pressable>
+          ) : (
+            <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <OText size={16}>{t('PRINTER_SETTINGS', 'Printer Settings')}</OText>
+                <AntDesignIcon size={18} name='right' />
+              </View>
+              <View style={{
+                borderBottomColor: theme.colors.tabBar,
+                borderBottomWidth: 1,
+                marginTop: 10
+              }} />
+            </Pressable>
+          )}
+          <Pressable style={{ marginBottom: 10 }} onPress={() => navigation.navigate('Sessions')}>
             <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-              <OText size={16}>{t('SCHEDULE', 'Schedule')}</OText>
+              <OText size={16}>{t('SESSIONS', 'Sessions')}</OText>
               <AntDesignIcon size={18} name='right' />
             </View>
             <View style={{
@@ -501,7 +555,11 @@ const ProfileUI = (props: ProfileParams) => {
             entireModal
             hideIcons
           >
-            <DriverSchedule schedule={user?.schedule} />
+            {props.isBusinessApp ? (
+              <PrinterSettings onClose={() => setOpenModal(false)} />
+            ) : (
+              <DriverSchedule schedule={user?.schedule} />
+            )}
           </OModal>
         </ScrollView>
       )}

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

@@ -0,0 +1,171 @@
+import React, { useState } from 'react'
+import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components/native'
+import { TouchableOpacity, View, StyleSheet } from 'react-native'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTheme } from 'styled-components/native'
+import RNRestart from 'react-native-restart'
+import { OModal, OButton, OText, OIcon } from '../shared'
+
+import {
+  Container,
+  ModalContainer,
+  ModalTitle,
+  StatusItemWrapper,
+  StatusText
+} from './styles'
+
+const SocketStatusUI = (props: any) => {
+  const {
+    socketStatus,
+    connectedDate
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const [openModal, setOpenModal] = useState(false)
+
+  const styles = StyleSheet.create({
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginBottom: 30,
+      marginTop: 30
+    },
+  })
+
+  const getStatusColor = (status: number) => {
+    switch (status) {
+      case 0:
+        return '#FF9922';
+      case 1:
+        return '#00D27A';
+      case 2:
+        return '#E63757';
+      default:
+        return '#FF9922';
+    }
+  }
+
+  return (
+    <Container>
+      <TouchableOpacity
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.inputChat,
+          borderRadius: 7.6,
+          marginVertical: 10,
+          paddingVertical: 10,
+          paddingHorizontal: 15,
+        }}
+        activeOpacity={0.6}
+        onPress={() => setOpenModal(true)}
+      >
+        <OText
+          style={{ color: theme.colors.backArrow, fontSize: 16, marginBottom: 0, lineHeight: 16 }}
+        >
+          {t('CONNECTION_STATUS_SHORT', 'Status')}
+        </OText>
+        <MaterialIcon
+          name='circle'
+          size={12}
+          color={getStatusColor(socketStatus)}
+          style={{ marginLeft: 8 }}
+        />
+      </TouchableOpacity>
+
+      <OModal
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+        entireModal
+        customClose
+      >
+        <ModalContainer nestedScrollEnabled={true}>
+          <TouchableOpacity
+            onPress={() => setOpenModal(false)}
+            style={styles.btnBackArrow}
+          >
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
+          <View>
+            <ModalTitle>{t('CONNECTION_STATUS', 'Connection status')}</ModalTitle>
+            <OText style={{ marginBottom: 20 }}>
+              {t('LAST_UPDATE', 'Last update')}: {parseDate(connectedDate)}
+            </OText>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(1)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('OK', 'Ok')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_OK', 'The websocket works normally.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(0)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('CONNECTING', 'Connecting')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_CONNECTING', 'The websocket is connecting.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(2)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('DISCONNECTED', 'Disconnected')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_DISCONNECTED', 'The server is slow, please reload.')}</OText>
+              </View>
+            </StatusItemWrapper>
+
+            <View style={{ flexDirection: 'row', marginTop: 50 }}>
+              <OButton
+                onClick={() => setOpenModal(false)}
+                bgColor={theme.colors.white}
+                borderColor={theme.colors.primary}
+                textStyle={{ color: theme.colors.primary }}
+                style={{ borderRadius: 8, height: 48 }}
+                text={t('CLOSE', 'Close')}
+              />
+               <OButton
+                onClick={() => RNRestart.Restart()}
+                borderColor={theme.colors.primary}
+                textStyle={{ color: theme.colors.white }}
+                style={{ borderRadius: 8, marginLeft: 16, height: 48 }}
+                text={t('UPDATE', 'Update')}
+              />
+            </View>
+          </View>
+        </ModalContainer>
+      </OModal>
+    </Container>
+  )
+}
+
+export const WebsocketStatus = (props: any) => {
+  const socketProps = {
+    ...props,
+    UIComponent: SocketStatusUI
+  }
+  return <WebsocketStatusController {...socketProps} />
+}

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  display: flex;
+  flex-direction: column;
+`
+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: 10px;
+`
+export const StatusItemWrapper = styled.View`
+  flex-direction: row;
+  margin-bottom: 16px;
+`
+export const StatusText = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  color: ${(props: any) => props.theme.colors.textGray};
+`

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

@@ -64,6 +64,7 @@ interface Props extends TextInputProps {
   onSubmitEditing?: any;
   blurOnSubmit?: any;
   color?: any;
+  isValueSync?: boolean
 }
 
 const OInput = (props: Props): React.ReactElement => {
@@ -118,6 +119,7 @@ const OInput = (props: Props): React.ReactElement => {
         selectionColor={props.selectionColor}
         color={props.color}
         maxLength={props.maxLength || 1000}
+        value={props.isValueSync && props.value}
       />
 
       {props.iconRight && (

package/themes/business/src/hooks/useLocation.tsx

@@ -48,8 +48,8 @@ export const useLocation = () => {
       GeoLocation.getCurrentPosition(
         ({ coords }) => {
           resolve({
-            latitude: coords.latitude,
-            longitude: coords.longitude,
+            latitude: typeof coords.latitude === 'number' && !Number.isNaN(coords.latitude) ? coords.latitude : 0,
+            longitude: typeof coords.longitude === 'number' && !Number.isNaN(coords.longitude) ? coords.longitude : 0,
             speed: coords.speed,
           });
         },
@@ -63,9 +63,10 @@ export const useLocation = () => {
     watchId.current = GeoLocation.watchPosition(
       ({ coords }) => {
         if (!isMounted.current) return;
+        if (typeof coords.latitude !== 'number' || typeof coords.longitude !== 'number') return
         const location: Location = {
-          latitude: coords.latitude,
-          longitude: coords.longitude,
+          latitude: coords.latitude || 0,
+          longitude: coords.longitude || 0,
           speed: coords.speed,
         };
         setUserLocation(location);

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

@@ -57,7 +57,9 @@ export interface ProfileParams {
   showField?: any;
   isRequiredField?: any;
   isAlsea?: boolean;
-  isHideDriverStatus?: boolean;
+  isShowDriverStatus?: boolean;
+  isFocused?: boolean;
+  isBusinessApp?: boolean;
 }
 
 export interface AddressListParams {
@@ -173,6 +175,7 @@ export interface BusinessControllerParams {
   isBusinessOpen?: boolean;
   businessWillCloseSoonMinutes?: number;
   updateBusiness?: (id: any, value: any) => {};
+  navigation?: any;
 }
 export interface BusinessProductsListingParams {
   navigation?: any;
@@ -301,6 +304,7 @@ export interface OrdersOptionParams {
   filtered?: any;
   handleClickOrder?: any;
   orderGroupStatusCustom?: {
+    active?: Array<number>;
     pending?: Array<number>;
     inProgress?: Array<number>;
     completed?: Array<number>;
@@ -388,7 +392,7 @@ export interface OrderDetailsParams {
   urlToShare?: string;
   messages?: any;
   handleAssignDriver?: (id: any) => {};
-  handleChangeOrderStatus?: (status: any) => {};
+  handleChangeOrderStatus?: (status: any, isAcceptOrReject: any) => {};
   order?: any;
   isFromRoot?: any;
   handleOrderRedirect?: () => {};
@@ -492,6 +496,7 @@ export interface FloatingButtonParams {
   firstColorCustom?: string;
   secondColorCustom?: string;
   paddingBottomIos?: any;
+  isHideRejectButtons?: boolean
 }
 export interface MomentOptionParams {
   navigation: any;
@@ -626,3 +631,11 @@ export interface OrderDetailsLogisticParams {
   orderAssingId: number,
   order: any
 }
+
+export interface SessionsParams {
+  navigation: any,
+  sessionsList: any,
+  actionState: any,
+  handleDeleteSession: any,
+  handleDeleteAllSessions: any
+}

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

@@ -146,6 +146,11 @@ export const transformCountryCode = (countryCode: number) => {
   return code?.countryCode;
 };
 
+export const findExitingCode = (countryCode: string) => {
+  const code = CODES.find((code: any) => code.countryCode === (countryCode || '').toUpperCase())
+  return code?.countryCode
+}
+
 /**
  * Function to check if a number is decimal or not
  * @param {*} value number to check if decimal or not

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

package/themes/kiosk/src/components/Checkout/index.tsx

@@ -50,6 +50,12 @@ const CheckoutUI = (props: any) => {
     }
   }, [cart])
 
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    }
+  }, [cart])
+
   return (
     <>
       <PaymentOptions

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

@@ -52,7 +52,7 @@ const LoginFormUI = (props: LoginParams) => {
   } = props;
 
   const theme = useTheme()
-  const [{ configs }] = useConfig()
+  const [{ configs }, { refreshConfigs }] = useConfig()
   const [ordering, { setOrdering }] = useApi();
   const [, { showToast }] = useToast();
   const [, t] = useLanguage();
@@ -347,13 +347,16 @@ const LoginFormUI = (props: LoginParams) => {
           project: projectName
         })
       }
-      if (isDeviceLoginEnabled) {
-        props.handleChangeTab('device_code')
-      }
     }, 1500)
     return () => clearTimeout(projectInputTimeout);
   }, [projectName, isDeviceLoginEnabled])
 
+  useEffect(() => {
+    if (ordering?.project) {
+      refreshConfigs()
+    }
+  }, [ordering?.project])
+
   const logo = (
     <LogoWrapper>
       <OIcon src={theme.images.logos.logotype} style={styles.logo} />