ordering-ui-react-native 0.21.50 → 0.21.51-release

package/themes/original/src/components/GiftCard/SingleGiftCard/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { useLanguage, useUtils, useEvent } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { View, StyleSheet } from 'react-native';
+import {
+	Placeholder,
+	PlaceholderLine,
+	Fade
+} from 'rn-placeholder';
+import FastImage from 'react-native-fast-image';
+import { OText } from '../../shared'
+
+import {
+  CardContainer
+} from './styles'
+
+export const SingleGiftCard = (props: any) => {
+  const {
+    card,
+    isSkeleton,
+    onNavigationRedirect
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [events] = useEvent()
+  const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
+
+  const styles = StyleSheet.create({
+    logo: {
+      borderRadius: 8,
+      width: 64,
+      height: 64
+    },
+    innerContainer: {
+      flexDirection: 'row',
+      marginBottom: 24
+    }
+  });
+
+  const getGiftCardStatus = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return t('PENDING', 'Pending')
+      case 'activated':
+        return t('REDEEMED', 'Redeemed')
+      default:
+        return status
+    }
+  }
+
+  const handleClickGiftCardOrder = (card: any) => {
+    onNavigationRedirect?.('OrderDetails', { orderId: card.order_product?.order_id });
+  }
+
+  return (
+    <CardContainer
+      activeOpacity={0.8}
+      onPress={() => handleClickGiftCardOrder(card)}
+    >
+      {isSkeleton ? (
+        <Placeholder style={{ marginBottom: 10 }} Animation={Fade}>
+          <View style={{ flexDirection: 'row' }}>
+            <View style={{ width: 64, marginRight: 14 }}>
+              <PlaceholderLine
+                width={100}
+                height={64}
+                style={{ marginRight: 10, marginBottom: 10 }}
+              />
+            </View>
+            <Placeholder style={{ paddingTop: 5 }}>
+              <PlaceholderLine width={60} style={{ marginBottom: 6}} />
+              <PlaceholderLine width={40} style={{ marginBottom: 6 }} />
+              <PlaceholderLine width={20} style={{ marginBottom: 0 }} />
+            </Placeholder>
+          </View>
+        </Placeholder>
+      ) : (
+        <View style={styles.innerContainer}>
+          <View>
+            <FastImage
+              style={styles.logo}
+              source={card?.order_product?.images ? {
+                uri: optimizeImage(card?.order_product?.images, 'h_86,c_limit')
+              } : theme?.images?.dummies?.businessLogo}
+              resizeMode={FastImage.resizeMode.cover}
+            />
+          </View>
+        <View style={{ flex: 1, marginLeft: 14 }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between'  }}>
+            <OText size={12} lineHeight={18}>{card?.order_product?.name}</OText>
+            <OText size={12} lineHeight={18}>{parsePrice(card?.order_product?.price)}</OText>
+          </View>
+          <OText size={10} color={theme.colors.textSecondary} lineHeight={15}>{parseDate(card?.created_at)}</OText>
+          <OText size={10} color={theme.colors.primary}>{getGiftCardStatus(card?.status)}</OText>
+        </View>
+        </View>
+      )}
+    </CardContainer>
+  )
+}

package/themes/original/src/components/GiftCard/SingleGiftCard/styles.tsx

@@ -0,0 +1,4 @@
+import styled from 'styled-components/native';
+
+export const CardContainer = styled.TouchableOpacity`  
+`

package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/index.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect } from 'react';
+import { useLanguage, GiftCardOrdersList as GiftCardOrdersListController } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import {
+	Placeholder,
+	PlaceholderLine,
+	Fade
+} from 'rn-placeholder';
+import { SingleGiftCard } from '../SingleGiftCard';
+import { OButton, OText } from '../../shared';
+import {
+  ProductsListContainer,
+  SingleGiftCardWrapper,
+  WrappButton
+} from './styles'
+
+const VerticalGiftCardOrdersLayoutUI = (props: any) => {
+  const {
+    giftCards,
+    paginationProps,
+    loadMoreOrders,
+    title,
+    setIsEmpty,
+    onNavigationRedirect
+  } = props
+
+	const theme = useTheme();
+  const [, t] = useLanguage()
+
+  useEffect(() => {
+    if (giftCards.loading) return
+    if (giftCards.list?.length === 0) setIsEmpty(true)
+  }, [giftCards])
+
+  return (
+    <ProductsListContainer>
+      {
+        giftCards.loading ? (
+          <Placeholder Animation={Fade} style={{ marginVertical: 16 }}>
+            <PlaceholderLine width={30} height={16} />
+          </Placeholder>
+        ) : giftCards.list?.length > 0 && (
+        <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={24} style={{ marginTop: 24 }}>{title}</OText>
+      )}
+      {giftCards.list.map(card => (
+        <SingleGiftCardWrapper key={card.id}>
+          <SingleGiftCard
+            card={card}
+            onNavigationRedirect={onNavigationRedirect}
+          />
+        </SingleGiftCardWrapper>
+      ))}
+      {giftCards.loading && (
+        [...Array(10).keys()].map(i => (
+          <SingleGiftCardWrapper key={i}>
+            <SingleGiftCard
+              isSkeleton
+            />
+          </SingleGiftCardWrapper>
+        ))
+      )}
+      {paginationProps.totalPages && paginationProps.currentPage < paginationProps.totalPages && (
+        <WrappButton>
+          <OButton
+						onClick={loadMoreOrders}
+						text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+						imgRightSrc={null}
+						textStyle={{ color: theme.colors.white }}
+						style={{ borderRadius: 7.6, shadowOpacity: 0 }}
+					/>
+        </WrappButton>
+      )}
+    </ProductsListContainer>
+  )
+}
+
+export const VerticalGiftCardOrdersLayout = (props: any) => {
+  const giftCardsProps = {
+    ...props,
+    UIComponent: VerticalGiftCardOrdersLayoutUI
+  }
+  return <GiftCardOrdersListController {...giftCardsProps} />
+}

package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/styles.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components/native';
+
+export const ProductsListContainer = styled.View`  
+`
+export const WrappButton = styled.View`
+  margin-bottom: 24px;
+`
+export const SingleGiftCardWrapper = styled.View`  
+`

package/themes/original/src/components/GoogleMap/index.tsx

@@ -8,7 +8,6 @@ import Alert from '../../../../../src/providers/AlertProvider'
 import { OIcon } from '../shared';
 
 export const GoogleMap = (props: GoogleMapsParams) => {
-
   const {
     location,
     handleChangeAddressMap,
@@ -21,7 +20,10 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     locations,
     isIntGeoCoder,
     businessZones,
-    delta
+    delta,
+    autoCompleteAddress,
+    setAutoCompleteAddress,
+    manualZoom
   } = props
 
   const [, t] = useLanguage()
@@ -59,7 +61,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     strokeWidth: 2
   }
 
-  const geocodePosition = (pos: { latitude: number, longitude: number }, isMovingRegion ?: boolean) => {
+  const geocodePosition = (pos: { latitude: number, longitude: number }, isMovingRegion?: boolean) => {
     Geocoder.from({
       latitude: pos.latitude,
       longitude: pos.longitude
@@ -84,7 +86,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         }
         handleChangeAddressMap && handleChangeAddressMap(address, details)
         setSaveLocation && setSaveLocation(false)
-        if(!isMovingRegion){ 
+        if (!isMovingRegion) {
           handleToggleMap && handleToggleMap()
         }
       } else {
@@ -95,7 +97,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     })
   }
 
-  const validateResult = (curPos: { latitude: number, longitude: number }) => {
+  const validateResult = (curPos: any) => {
     const loc1 = center
     const loc2 = curPos
     const distance = calculateDistance(loc1, loc2)
@@ -103,25 +105,33 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     if (!maxLimitLocation) {
       geocodePosition(curPos)
       setMarkerPosition(curPos)
-      setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
+      if (!autoCompleteAddress) {
+        setRegion({ longitude: curPos?.longitude || 0, latitude: curPos?.latitude || 0, latitudeDelta: curPos?.latitudeDelta || 0.0010, longitudeDelta: curPos?.longitudeDelta || (delta ?? 0.0010) * ASPECT_RATIO })
+      } else {
+        setRegion({ longitude: curPos?.longitude, latitude: curPos?.latitude, latitudeDelta: delta ?? 0.0010, longitudeDelta: (delta ?? 0.0010) * ASPECT_RATIO })
+      }
       return
     }
 
     const _maxLimitLocation = typeof maxLimitLocation === 'string' ? parseInt(maxLimitLocation, 10) : maxLimitLocation
 
     if (distance <= _maxLimitLocation) {
-      if (!aproxEqual(curPos.latitude, center.lat) || !aproxEqual(curPos.longitude, center.lng)){
+      if (!aproxEqual(curPos?.latitude, center.lat) || !aproxEqual(curPos?.longitude, center.lng)) {
         geocodePosition(curPos, true)
       }
       setMarkerPosition(curPos)
-      setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
+      if (!autoCompleteAddress) {
+        setRegion({ longitude: curPos?.longitude || 0, latitude: curPos?.latitude || 0, latitudeDelta: curPos?.latitudeDelta || 0.0010, longitudeDelta: curPos?.longitudeDelta || (delta ?? 0.0010) * ASPECT_RATIO })
+      } else {
+        setRegion({ longitude: curPos?.longitude, latitude: curPos?.latitude, latitudeDelta: delta ?? 0.0010, longitudeDelta: (delta ?? 0.0010) * ASPECT_RATIO })
+      }
     } else {
       setMapErrors && setMapErrors('ERROR_MAX_LIMIT_LOCATION')
       setMarkerPosition({ latitude: center.lat, longitude: center.lng })
     }
   }
 
-  const aproxEqual = (n1 : number, n2 : number, epsilon = 0.000001) => {
+  const aproxEqual = (n1: number, n2: number, epsilon = 0.000001) => {
     return Math.abs(n1 - n2) < epsilon
   }
 
@@ -182,11 +192,21 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }, [isIntGeoCoder])
 
   useEffect(() => {
-    mapRef.current.animateToRegion({
-      ...region,
+    const regionConfig = {
       latitude: location?.lat,
       longitude: location?.lng,
-    })
+      latitudeDelta: region?.latitudeDelta ?? delta ?? 0.0010,
+      longitudeDelta: region?.longitudeDelta ?? (delta ?? 0.0010) * ASPECT_RATIO
+    }
+
+    mapRef.current.animateToRegion(autoCompleteAddress
+      ? regionConfig
+      : { ...region, ...regionConfig }
+    )
+
+    if (autoCompleteAddress) {
+      setAutoCompleteAddress && setAutoCompleteAddress(false)
+    }
   }, [location])
 
   useEffect(() => {
@@ -197,11 +217,12 @@ export const GoogleMap = (props: GoogleMapsParams) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      if (mapRef.current && locations) {
+      if (mapRef.current && locations && !manualZoom) {
         fitAllMarkers()
       }
     }, 1000)
     if (locations) {
+      fitAllMarkers()
       SETMARKERS(locations)
     }
     return () => clearInterval(interval)
@@ -213,7 +234,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         provider={PROVIDER_GOOGLE}
         initialRegion={region}
         style={styles.map}
-        onRegionChangeComplete={!readOnly ? (coordinates) => handleChangeRegion(coordinates) : () => { }}
+        onRegionChangeComplete={!readOnly ? (coordinates) => { handleChangeRegion(coordinates) } : () => { }}
         zoomTapEnabled
         zoomEnabled
         zoomControlEnabled
@@ -249,7 +270,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           <React.Fragment key={i}>
             {businessZone?.type === 2 && Array.isArray(businessZone?.data) && (
               <Polygon
-                coordinates={businessZone?.data.map((item: any) => ({ latitude: item.lat, longitude: item.lng}))}
+                coordinates={businessZone?.data.map((item: any) => ({ latitude: item.lat, longitude: item.lng }))}
                 fillColor={fillStyles.fillColor}
                 strokeColor={fillStyles.strokeColor}
                 strokeWidth={fillStyles.strokeWidth}
@@ -257,7 +278,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
             {(businessZone.type === 1 && businessZone?.data?.center && businessZone?.data?.radio) && (
               <Circle
-                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng }}
                 radius={businessZone?.data.radio * 1000}
                 fillColor={fillStyles.fillColor}
                 strokeColor={fillStyles.strokeColor}
@@ -266,7 +287,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
             {(businessZone.type === 5 && businessZone?.data?.distance) && (
               <Circle
-                center={{ latitude: center.lat, longitude: center.lng}}
+                center={{ latitude: center.lat, longitude: center.lng }}
                 radius={businessZone?.data.distance * units[businessZone?.data?.unit]}
                 fillColor={fillStyles.fillColor}
                 strokeColor={fillStyles.strokeColor}
@@ -275,7 +296,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
           </React.Fragment>
         ))}
-      </MapView>
+      </MapView >
       <Alert
         open={alertState.open}
         onAccept={closeAlert}

package/themes/original/src/components/Help/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useTheme } from 'styled-components/native';
 import { Platform, RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
@@ -17,6 +18,7 @@ export const Help = (props: HelpParams) => {
     navigation
   } = props
   const [, t] = useLanguage()
+  const theme = useTheme()
   const [refreshing] = useState(false);
   const [refresh, setRefresh] = useState(false)
 
@@ -46,6 +48,11 @@ export const Help = (props: HelpParams) => {
         onActionLeft={goToBack}
         showCall={false}
         btnStyle={{ paddingLeft: 0 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <HelpSubItem
         onPress={() => onRedirect('HelpOrder')}

package/themes/original/src/components/HelpAccountAndPayment/index.tsx

@@ -37,6 +37,11 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
         onActionLeft={goToBack}
         btnStyle={{ paddingLeft: 0 }}
         showCall={false}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <Content>
         <OText mBottom={20}>

package/themes/original/src/components/HelpGuide/index.tsx

@@ -43,6 +43,11 @@ export const HelpGuide = (props: HelpGuideParams) => {
         onActionLeft={goToBack}
         btnStyle={{ paddingLeft: 0 }}
         showCall={false}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <Content>
         <OText mBottom={15}>

package/themes/original/src/components/HelpOrder/index.tsx

@@ -39,6 +39,11 @@ export const HelpOrder = (props: HelpOrderParams) => {
         onActionLeft={goToBack}
         btnStyle={{ paddingLeft: 0 }}
         showCall={false}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <Content>
         <OText mBottom={20}>

package/themes/original/src/components/HighestRatedBusinesses/index.tsx

@@ -56,7 +56,7 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
             showsHorizontalScrollIndicator={false}
             nestedScrollEnabled
             horizontal
-            style={{ height: 300, paddingHorizontal: 40 }}
+            style={{ height: 325, paddingHorizontal: 20 }}
           >
             {[
               ...Array(10).keys()
@@ -162,4 +162,4 @@ export const HighestRatedBusinesses = (props: any) => {
   };
 
   return <BusinessesListingController {...highestRatedBusinessesProps} />;
-}; 
+};

package/themes/original/src/components/HighestRatedBusinesses/styles.tsx

@@ -2,6 +2,6 @@ import styled from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
   padding-top: 30px;
 `;

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

@@ -18,12 +18,6 @@ export const Home = (props: any) => {
 	const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
 	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
 
-	useEffect(() => {
-		if (isAllowUnaddressOrderType) {
-			onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList')
-		}
-	}, [isAllowUnaddressOrderType])
-
 	return (
 		<View style={styles.container}>
 			<View>
@@ -62,13 +56,14 @@ export const Home = (props: any) => {
 					bgColor={theme.colors.primaryContrast}
 					borderColor={theme.colors.primaryContrast}
 					style={styles.buttons}
+					textStyle={{ color: 'black' }}
 					onClick={() => onNavigationRedirect('Signup')}
 					imgRightSrc={null}
 				/>
 				<TouchableOpacity
 					style={{ ...styles.textLink, marginTop: 12 }}
 					onPress={() =>
-						orderState?.options?.address?.address
+						orderState?.options?.address?.address || isAllowUnaddressOrderType
 							? onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true })
 							: onNavigationRedirect('AddressForm', { isGuestUser: true })
 					}>
@@ -92,7 +87,7 @@ const styles = StyleSheet.create({
 		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'space-between',
-		paddingHorizontal: 40,
+		paddingHorizontal: 20,
 	},
 	logo: {
 		marginTop: 64,

package/themes/original/src/components/LoginForm/Otp/index.tsx

@@ -40,19 +40,19 @@ export const Otp = (props: otpParams) => {
     onSubmit()
   }
 
-  const handleChangeCode = (code : string) => {
+  const handleChangeCode = (code: string) => {
     if (code?.length === pinCount) {
-      setCheckingCode(true)
+      setCheckingCode && setCheckingCode(true)
       handleLoginOtp(code)
       inputRef.current?.reset && inputRef.current.reset()
       setTimeout(() => inputRef.current?.focus && inputRef.current.focus(), 100)
     }
-    setOtpError(null)
+    setOtpError && setOtpError(null)
   }
 
   const handleCloseOtp = () => {
     setWillVerifyOtpState(false)
-    setOtpError(null)
+    setOtpError && setOtpError(null)
   }
 
   useEffect(() => {
@@ -108,18 +108,6 @@ export const Otp = (props: otpParams) => {
   return (
     <SafeAreaView style={{ flex: 1, backgroundColor: theme.colors.backgroundPage }}>
       <OTPContainer>
-        <View
-          style={loginStyle.closeContainer}>
-          <TouchableOpacity onPress={() => handleCloseOtp()} style={loginStyle.wrapperIcon}>
-            <OIcon
-              src={theme.images.general.close}
-              width={22}
-            />
-          </TouchableOpacity>
-          <OText size={22}>
-            {t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
-          </OText>
-        </View>
         <OText size={24}>
           {formatSeconds(otpLeftTime)}
         </OText>

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { StyleSheet, View, Keyboard, Modal } from 'react-native';
+import { StyleSheet, View, Keyboard, Modal, Platform } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
@@ -108,7 +108,7 @@ const LoginFormUI = (props: LoginParams) => {
 
 	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
 	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled)
 
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
@@ -412,6 +412,11 @@ const LoginFormUI = (props: LoginParams) => {
 					btnStyle={{ paddingLeft: 0 }}
 					titleWrapStyle={{ paddingHorizontal: 0 }}
 					titleStyle={{ marginRight: 0, marginLeft: 0 }}
+					buttonProps={{
+						bgColor: theme.colors.white,
+						borderColor: theme.colors.white,
+						textStyle: { color: theme.colors.btnFont }
+					}}
 				/>
 			)}
 			<FormSide>
@@ -630,6 +635,7 @@ const LoginFormUI = (props: LoginParams) => {
 												/>
 											)
 										}
+										autoCapitalize='none'
 										value={value}
 										forwardRef={passwordRef}
 										onChange={(val: any) => onChange(val)}
@@ -802,7 +808,7 @@ const LoginFormUI = (props: LoginParams) => {
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
 									)}
-									{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && appleLoginEnabled && (
+									{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
 										<AppleLogin
 											notificationState={notificationState}
 											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}

package/themes/original/src/components/MessageListing/index.tsx

@@ -237,6 +237,7 @@ export const MessageListing = (props: MessageListingParams) => {
 	const [seletedOrder, setSeletedOrder] = useState<any>()
 	const [openMessages, setOpenMessges] = useState(false)
 	const [, t] = useLanguage()
+	const theme = useTheme()
 
 	const goToBack = () => {
 		navigation?.canGoBack() && navigation.goBack()
@@ -265,6 +266,11 @@ export const MessageListing = (props: MessageListingParams) => {
 				showCall={false}
 				paddingTop={Platform.OS === 'ios' ? 20 : 10}
 				btnStyle={{ paddingLeft: 0 }}
+				buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
 			/>
 			<OrderListing
 				ordersLength={{ activeOrdersLength: 0, previousOrdersLength: 0 }}

package/themes/original/src/components/Messages/index.tsx

@@ -127,12 +127,12 @@ const MessagesUI = (props: MessagesParams) => {
 		return message.change?.attribute !== 'driver_id'
 			?
 			`${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?.attribute !== 'logistic_status'
-          ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])
-          : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status'
-            ? t(ORDER_STATUS[parseInt(message.change.new, 10)])
-            : getLogisticTag(message.change.new)}`
+				? `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}`
+				: `${message.change?.attribute !== 'logistic_status'
+					? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])
+					: message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status'
+						? t(ORDER_STATUS[parseInt(message.change.new, 10)])
+						: getLogisticTag(message.change.new)}`
 			}`
 			: message.change.new
 				?
@@ -461,7 +461,7 @@ const MessagesUI = (props: MessagesParams) => {
 										active={business}
 									>
 										<OIcon
-											url={order?.business?.logo || theme.images.dummies.businessLogo}
+											url={order?.business?.logo}
 											width={32}
 											height={32}
 											style={{ borderRadius: 32 }}
@@ -503,6 +503,7 @@ const MessagesUI = (props: MessagesParams) => {
 					scrollToBottom
 					renderAvatarOnTop
 					renderUsernameOnMessage
+					renderAvatar={() => null}
 					renderInputToolbar={renderInputToolbar}
 					renderComposer={renderComposer}
 					renderSend={renderSend}

package/themes/original/src/components/Messages/styles.tsx

@@ -10,7 +10,7 @@ export const Header = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   box-shadow: 0 2px 2px #0000001A;
   padding-bottom: 10px;
-  padding-horizontal: 20px;
+  padding-horizontal: 10px;
 `
 
 export const TitleHeader = styled.View``