ordering-ui-react-native 0.12.94 → 0.12.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.94",
+  "version": "0.12.98",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/LoginForm/index.tsx

@@ -418,6 +418,7 @@ const LoginFormUI = (props: LoginParams) => {
         open={isModalVisible}
         onClose={() => setIsModalVisible(false)}
         entireModal
+        title={t('VERIFY_PHONE', 'Verify Phone')}
       >
         <VerifyPhone
           phone={phoneInputData.phone}
@@ -426,6 +427,7 @@ const LoginFormUI = (props: LoginParams) => {
           handleCheckPhoneCode={handleCheckPhoneCode}
           setCheckPhoneCodeState={setCheckPhoneCodeState}
           handleVerifyCodeClick={handleVerifyCodeClick}
+          onClose={() => setIsModalVisible(false)}
         />
       </OModal>
       <Spinner visible={isLoadingSocialButton} />
@@ -440,4 +442,4 @@ export const LoginForm = (props: any) => {
     handleSuccessLogin: () => _removeStoreData('isGuestUser')
   };
   return <LoginFormController {...loginProps} />;
-};
+};

package/src/components/VerifyPhone/index.tsx

@@ -1,5 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { Pressable, StyleSheet, TextInput } from 'react-native';
+import React, { useEffect, useState, useRef } from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+  TextInput,
+  Pressable,
+} from 'react-native';
 import { useLanguage } from 'ordering-components/native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { getTraduction } from '../../utils'
@@ -17,6 +24,7 @@ import {
 import { useTheme } from 'styled-components/native';
 
 const TIME_COUNTDOWN = 60 * 10 // 10 minutes
+const CODE_LENGTH = 4;
 
 export const VerifyPhone = (props: any) => {
   const {
@@ -26,36 +34,91 @@ export const VerifyPhone = (props: any) => {
     checkPhoneCodeState,
     setCheckPhoneCodeState,
     handleCheckPhoneCode,
-    handleVerifyCodeClick
+    handleVerifyCodeClick,
+    onClose
   } = props
 
   const theme = useTheme();
-
-  const styles = StyleSheet.create({
-    inputStyle: {
-      width: 80,
-      height: 80,
-      marginBottom: 25,
-      borderWidth: 1,
-      borderColor: theme.colors.disabled,
+  const [, t] = useLanguage()
+  const ref = useRef<TextInput>(null);
+
+  const style = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    inputsContainer: {
+      width: '80%',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    inputContainer: {
+      borderWidth: 2,
       borderRadius: 20,
-      textAlign: 'center',
-      fontSize: 40
-    }
+      padding: 20,
+      borderColor: theme.colors.disabled,
+    },
+    inputContainerFocused: {
+      borderColor: theme.colors.primary,
+    },
+    inputText: {
+      fontSize: 24,
+    },
+    hiddenCodeInput: {
+      position: 'absolute',
+      height: 0,
+      width: 0,
+      opacity: 0,
+    },
   });
 
-  const [, t] = useLanguage()
-
   const [timer, setTimer] = useState(`${TIME_COUNTDOWN / 60}:00`)
-  const [verifyCode, setVerifyCode] = useState({ 0: '', 1: '', 2: '', 3: '' })
   const [isSendCodeAgain, setIsSendCodeAgain] = useState(false)
-
-  const lastNumbers = phone?.cellphone &&
-    `${phone?.cellphone.charAt(phone?.cellphone.length-2)}${phone?.cellphone.charAt(phone?.cellphone.length-1)}`
-
-  const handleChangeCode = (val: number, i: number) => {
-    setVerifyCode({ ...verifyCode, [i]: val })
-  }
+  const [code, setCode] = useState('');
+  const [containerIsFocused, setContainerIsFocused] = useState(false);
+
+  const codeDigitsArray = new Array(CODE_LENGTH).fill(0);
+  const phoneLength = phone?.cellphone.split('').length
+  const lastNumbers = phone?.cellphone && phone?.cellphone.split('').fill('*', 0, phoneLength - 2).join('')
+
+  const handleOnPress = () => {
+    setContainerIsFocused(true);
+    ref?.current?.focus();
+  };
+
+  const handleOnBlur = () => {
+    setContainerIsFocused(false);
+  };
+
+  const toDigitInput = (_value: number, idx: number) => {
+    const emptyInputChar = '0';
+    const digit = code[idx] || emptyInputChar;
+
+    const isCurrentDigit = idx === code.length;
+    const isLastDigit = idx === CODE_LENGTH - 1;
+    const isCodeFull = code.length === CODE_LENGTH;
+
+    const isFocused = isCurrentDigit || (isLastDigit && isCodeFull);
+
+    const containerStyle =
+      containerIsFocused && isFocused
+        ? {...style.inputContainer, ...style.inputContainerFocused}
+        : style.inputContainer;
+
+    return (
+      <View key={idx} style={containerStyle}>
+        <Text
+          style={{
+            ...style.inputText,
+            color: code[idx] ? theme.colors.black : theme.colors.disabled
+          }}
+        >
+          {digit}
+        </Text>
+      </View>
+    );
+  };
 
   const checkResult = (result: any) => {
     if (!result) return
@@ -106,27 +169,28 @@ export const VerifyPhone = (props: any) => {
   }, [isSendCodeAgain])
 
   useEffect(() => {
-    const codes = Object.keys(verifyCode).length
-    const isFullInputs = codes && Object.values(verifyCode).every(val => val)
-    if (codes === 4 && isFullInputs) {
+    if (code.length === CODE_LENGTH) {
       const values = {
         ...formValues,
         cellphone: phone.cellphone,
         country_phone_code: `+${phone.country_phone_code}`,
-        code: Object.values(verifyCode).join().replace(/,/g, '')
+        code
       }
       handleCheckPhoneCode && handleCheckPhoneCode(values)
     }
-  }, [verifyCode])
+  }, [code]);
+
+  useEffect(() => {
+    if (verifyPhoneState?.result?.error) {
+      onClose && onClose()
+    }
+  }, [verifyPhoneState]);
 
   return (
     <Container>
-      <OText size={30} style={{ textAlign: 'left' }}>
-        {t('VERIFY_PHONE', 'Verify Phone')}
-      </OText>
       {lastNumbers && (
-        <OText size={20} color={theme.colors.disabled}>
-          {`${t('MESSAGE_ENTER_VERIFY_CODE', 'Please, enter the verification code we sent to your mobile ending with')} **${lastNumbers}`}
+        <OText size={18} color={theme.colors.disabled}>
+          {`${t('MESSAGE_ENTER_VERIFY_CODE', 'Please, enter the verification code we sent to your mobile ending with')} ${lastNumbers}`}
         </OText>
       )}
       <WrappCountdown>
@@ -140,30 +204,34 @@ export const VerifyPhone = (props: any) => {
         </CountDownContainer>
       </WrappCountdown>
       <InputsSection>
-        {[...Array(4),].map((_: any, i: number) => (
+        <SafeAreaView style={style.container}>
+          <Pressable style={style.inputsContainer} onPress={handleOnPress} disabled={code.length === CODE_LENGTH}>
+            {codeDigitsArray.map(toDigitInput)}
+          </Pressable>
           <TextInput
-            key={i}
-            keyboardType='number-pad'
-            placeholder={'0'}
-            style={styles.inputStyle}
-            onChangeText={(val: any) => handleChangeCode(val, i)}
-            maxLength={1}
-            editable={timer !== '00:00'}
+            ref={ref}
+            value={code}
+            placeholder='0'
+            onChangeText={setCode}
+            onSubmitEditing={handleOnBlur}
+            keyboardType="number-pad"
+            returnKeyType="done"
+            textContentType="oneTimeCode"
+            maxLength={CODE_LENGTH}
+            style={style.hiddenCodeInput}
           />
-        ))}
+        </SafeAreaView>
       </InputsSection>
-      {(verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState) &&
-        !(verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState)?.loading &&
-        (verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState)?.result?.error &&
-        (verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState).result?.result &&
+      {checkPhoneCodeState &&
+        !checkPhoneCodeState?.loading &&
+        checkPhoneCodeState?.result?.error &&
+        checkPhoneCodeState?.result?.result &&
       (
         <ErrorSection>
-          {checkResult((
-            verifyPhoneState?.result?.error ? verifyPhoneState : checkPhoneCodeState
-          ).result?.result)?.map((e: any, i: number) => (
+          {checkResult((checkPhoneCodeState).result?.result)?.map((e: any, i: number) => (
             <OText
               key={i}
-              size={20}
+              size={16}
               color={theme.colors.error}
             >
               {`* ${getTraduction(e, t)}`}

package/src/components/VerifyPhone/styles.tsx

@@ -2,9 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding-top: 5px;
-  padding-left: 20px;
-  padding-right: 20px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -14,24 +12,26 @@ export const CountDownContainer = styled.View`
   margin: 0 auto;
   display: flex;
   justify-content: center;
+  align-items: center;
+  width: 80%;
 `
 
 export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  margin-bottom: 30px;
 `
 
 export const WrappCountdown = styled.View`
-  padding-top: 20px;
   padding-bottom: 20px;
+  padding-top: 20px;
 `
 
 export const InputsSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  padding-bottom: 20px;
 `
 
 export const ErrorSection = styled.View`

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

@@ -16,7 +16,8 @@ import {
   IconWrapper,
   ModalContainer,
   ModalTitle,
-  FilterBtnWrapper
+  FilterBtnWrapper,
+  TabPressable
 } from './styles';
 import { PreviousOrders } from '../PreviousOrders';
 import { OrdersOptionParams } from '../../types';
@@ -324,7 +325,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           horizontal
           nestedScrollEnabled={true}
         >
-          <TabsContainer width={WIDTH_SCREEN}>
+          <TabsContainer>
             {isLogisticActivated && (
               <Pressable
                 style={styles.pressable}
@@ -344,15 +345,16 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
               </Pressable>
             )}
             {tabs.map((tab: any) => (
-              <Pressable
+              <TabPressable
                 key={tab.key}
-                style={styles.pressable}
-                onPress={() => setCurrentTabSelected(tab?.title)}>
+                onPress={() => setCurrentTabSelected(tab?.title)}
+                isSelected={tab.title === currentTabSelected ? 1 : 0}
+              >
                 <OText
                   style={{
                     ...styles.tab,
                     fontSize: tab.title === currentTabSelected ? 16 : 14,
-                    borderBottomWidth: tab.title === currentTabSelected ? 1 : 0,
+                    borderBottomWidth: Platform.OS === 'ios' && tab.title === currentTabSelected ? 1 : 0,
                   }}
                   color={
                     tab.title === currentTabSelected
@@ -363,7 +365,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 >
                   {tab.text}
                 </OText>
-              </Pressable>
+              </TabPressable>
             ))}
           </TabsContainer>
         </ScrollView>

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

@@ -2,15 +2,17 @@ import styled from 'styled-components/native';
 
 export const FiltersTab = styled.View`
   margin-bottom: 20px;
+  min-height: 30px;
   max-height: 35px;
+  flex: 1;
 `;
 
 export const TabsContainer = styled.View`
-  width: ${({ width }: { width: number }) => `${width-42}px`};
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   border-bottom-width: 1px;
+  flex: 1;
   border-bottom-color: ${(props: any) => props.theme.colors.tabBar};
 `;
 
@@ -53,3 +55,10 @@ export const FilterBtnWrapper = styled.TouchableOpacity`
   justify-content: space-between;
   margin-bottom: 24px;
 `
+
+export const TabPressable = styled.Pressable`
+  align-items: center;
+  border-color: ${(props: any) => props.theme.colors.textGray};
+  border-bottom-width: ${(props: any) => props.isSelected ? '1px' : '0px'};
+  padding-horizontal: 10px;
+`

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

@@ -1,41 +1,49 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { useLanguage, BusinessMenuListing } from 'ordering-components/native'
-import { OModal, OText } from '../shared'
+import { OText } from '../shared'
 import { BusinessMenuListParams } from '../../types'
-import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'
+import { View, StyleSheet, Dimensions } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-import { MenuListWrapper, DropOption } from './styles'
+import SelectDropdown from 'react-native-select-dropdown'
+
+const windowHeight = Dimensions.get('window').height;
 
 const BusinessMenuListUI = (props: BusinessMenuListParams) => {
   const {
-    menu,
     businessMenuList,
     setMenu
   } = props
 
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [isShowMenuList, setIsShowMenuList] = useState(false)
 
   const styles = StyleSheet.create({
+    container: {
+      height: windowHeight
+    },
     selectOption: {
       backgroundColor: theme.colors.backgroundGray100,
       borderRadius: 7.6,
       paddingVertical: 10,
       paddingHorizontal: 14,
-      flexDirection: 'row',
+      flexDirection: 'row-reverse',
       alignItems: 'center',
       justifyContent: 'space-between',
-      height: 44
+      height: 44,
+      width: '100%'
     }
 	})
 
-  const handleClickMenu = (option: any) => {
-    setMenu(option)
-    setIsShowMenuList(false)
+  const dropDownIcon = () => {
+    return (
+      <IconAntDesign
+        name='down'
+        color={theme.colors.textThird}
+        size={16}
+      />
+    )
   }
 
   return (
@@ -47,82 +55,62 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
           </View>
         </Placeholder>
       ) : (
-        <TouchableOpacity onPress={() => setIsShowMenuList(true)}>
-          <View style={styles.selectOption}>
-            <OText
-              size={14}
-              color={theme.colors.disabled}
-              style={{
-                lineHeight: 24,
-                flex: 1
-              }}
-              numberOfLines={1}
-              ellipsizeMode="tail"
-            >
-              {menu?.name || t('MENU_NAME', 'Menu name')}
-            </OText>
-            <IconAntDesign
-              name='down'
-              color={theme.colors.textThird}
-              size={16}
-            />
-          </View>
-        </TouchableOpacity>
-      )}
+        <>
+          {
+            businessMenuList?.menus && businessMenuList?.menus.length > 0 && (
+              <SelectDropdown
+                defaultButtonText={t('MENU_NAME', 'Menu name')}
+                data={businessMenuList?.menus}
+                disabled={businessMenuList?.loading || businessMenuList?.menus?.length === 0}
+                onSelect={(selectedItem, index) => {
+                  setMenu(selectedItem)
+                }}
+                buttonTextAfterSelection={(selectedItem, index) => {
+                  return selectedItem.name
+                }}
+                rowTextForSelection={(item, index) => {
+                  return item.name
+                }}
+                buttonStyle={styles.selectOption}
+                buttonTextStyle={{
+                  color: theme.colors.disabled,
+                  fontSize: 14,
+                  textAlign: 'left',
+                  marginHorizontal: 0
+                }}
+                dropdownStyle={{
+                  borderRadius: 8,
+                  borderColor: theme.colors.lightGray,
+                  marginTop: 5,
+                  maxHeight: 160
+                }}
+                rowStyle={{
+                  borderBottomColor: theme.colors.backgroundGray100,
+                  backgroundColor: theme.colors.backgroundGray100,
+                  height: 40,
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                  paddingTop: 8,
+                  paddingHorizontal: 14
+                }}
+                rowTextStyle={{
+                  color: theme.colors.disabled,
+                  fontSize: 14,
+                  marginHorizontal: 0
+                }}
+                renderDropdownIcon={() => dropDownIcon()}
+                dropdownOverlayColor='transparent'
+              />
+            )
+          }
 
-      <OModal
-        open={isShowMenuList}
-        onClose={() => setIsShowMenuList(false)}
-        customClose
-        entireModal
-      >
-        <MenuListWrapper>
-          <TouchableOpacity onPress={() => setIsShowMenuList(false)} style={{ marginBottom: 12 }}>
-            <IconAntDesign
-              name='close'
-              color={theme.colors.textThird}
-              style={{ marginLeft: 7 }}
-              size={24}
-            />
-          </TouchableOpacity>
-          {businessMenuList?.menus && businessMenuList?.menus.length > 0 && businessMenuList.menus.map((option: any, index: number) => (
-            <TouchableOpacity
-              key={index}
-              onPress={() => handleClickMenu(option)}
-            >
-              <DropOption
-                selected={option.id === menu.id}
-              >
-                <View style={{ marginRight: 10 }}>
-                  {option.id === menu.id ? (
-                    <MaterialCommunityIcons
-                      name='radiobox-marked'
-                      size={24}
-                      color={theme.colors.primary}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name='radiobox-blank'
-                      size={24}
-                      color={theme.colors.arrowColor}
-                    />
-                  )}
-                </View>
-                <Text
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                  style={{flex: 1}}
-                >{option.name}</Text>
-              </DropOption>
-            </TouchableOpacity>
-          ))}
           {businessMenuList?.menus && businessMenuList?.menus.length === 0 && (
             <View>
               <OText>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
             </View>
           )}
-        </MenuListWrapper>
-      </OModal>
+        </>
+      )}
     </>
 
   )

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

@@ -1,15 +0,0 @@
-import styled from 'styled-components/native'
-
-export const MenuListWrapper = styled.ScrollView`
-  padding: 20px 40px 30px 40px;
-`
-
-export const DropOption = styled.View`
-  padding: 10px;
-  margin-bottom: 5px;
-  font-size: 16px;
-  border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
-  flex-direction: row;
-  align-items: center;
-`

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

@@ -1,16 +1,16 @@
 import React, { useState, useEffect } from 'react'
-import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'
+import { TouchableOpacity, StyleSheet, View, Dimensions } from 'react-native'
 import { useLanguage, useUtils, useConfig, useOrder, MomentOption } from 'ordering-components/native'
-import { OButton, OModal, OText } from '../shared'
+import { OButton, OText } from '../shared'
 import { useTheme } from 'styled-components/native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import FastImage from 'react-native-fast-image'
 import CalendarStrip from 'react-native-calendar-strip'
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 import { BusinessMenuList } from '../BusinessMenuList'
 import Spinner from 'react-native-loading-spinner-overlay'
 import { BusinessPreorderParams } from '../../types'
 import moment from 'moment'
+import SelectDropdown from 'react-native-select-dropdown'
 import {
   PreOrderContainer,
   BusinessInfoWrapper,
@@ -19,11 +19,11 @@ import {
   OrderTimeWrapper,
   TimeListWrapper,
   TimeContentWrapper,
-  TimeItem,
-  PreorderTypeListWrapper,
-  DropOption
+  TimeItem
 } from './styles'
 
+const windowHeight = Dimensions.get('window').height;
+
 const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const {
     goToBack,
@@ -42,14 +42,18 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [{ optimizeImage, parseTime }] = useUtils()
   const [{ configs }] = useConfig()
   const [orderState] = useOrder()
-  const [selectedPreorderType, setSelectedPreorderType] = useState({ key: 'business_hours', name: t('BUSINESS_HOURS', 'Business hours') })
-  const [isPreorderTypeList, setIsPreorderTypeList] = useState(false)
+  const [selectedPreorderType, setSelectedPreorderType] = useState(0)
   const [menu, setMenu] = useState({})
   const [timeList, setTimeList] = useState<any>([])
   const [selectDate, setSelectedDate] = useState<any>(null)
   const [datesWhitelist, setDateWhitelist] = useState<any>([{start: null, end: null}])
 
   const styles = StyleSheet.create({
+    container: {
+      height: windowHeight,
+      paddingVertical: 30,
+      paddingHorizontal: 40
+    },
 		businessLogo: {
 			backgroundColor: 'white',
 			width: 60,
@@ -68,10 +72,11 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       borderRadius: 7.6,
       paddingVertical: 10,
       paddingHorizontal: 14,
-      flexDirection: 'row',
+      flexDirection: 'row-reverse',
       alignItems: 'center',
       justifyContent: 'space-between',
-      height: 44
+      height: 44,
+      width: '100%'
     },
     calendar: {
       paddingBottom: 15,
@@ -123,30 +128,14 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       color: '#B1BCCC',
       fontSize: 14,
       fontWeight: '500'
-    },
-    wrapperIcon: {
-      overflow: 'hidden',
-      backgroundColor: 'transparent',
-      marginBottom: 12,
-      width: 25,
-      height: 25,
-      marginStart: 7,
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: 99999
     }
 	})
 
   const preorderTypeList = [
-    { key: 'business_menu', name: t('BUSINESS_MENU', 'Business menu') },
-    { key: 'business_hours', name: t('BUSINESS_HOURS', 'Business hours') }
+    { key: 'business_hours', name: t('BUSINESS_HOURS', 'Business hours') },
+    { key: 'business_menu', name: t('BUSINESS_MENU', 'Business menu') }
   ]
 
-  const handleClickPreorderType = (option: any) => {
-    setSelectedPreorderType(option)
-    setIsPreorderTypeList(false)
-  }
-
   const getTimes = (curdate: any, menu: any) => {
     const date = new Date()
     var dateSeleted = new Date(curdate)
@@ -239,6 +228,16 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     handleBusinessClick && handleBusinessClick(business)
   }
 
+  const dropDownIcon = () => {
+    return (
+      <IconAntDesign
+        name='down'
+        color={theme.colors.textThird}
+        size={16}
+      />
+    )
+  }
+
   useEffect(() => {
     if (hoursList.length === 0) return
     if (Object.keys(menu).length > 0) {
@@ -262,7 +261,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   }, [selectDate, hoursList, menu])
 
   useEffect(() => {
-    if (selectedPreorderType.key === 'business_hours' && Object.keys(menu).length > 0) setMenu({})
+    if (selectedPreorderType === 0 && Object.keys(menu).length > 0) setMenu({})
   }, [selectedPreorderType])
 
   useEffect(() => {
@@ -275,7 +274,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   return (
     <>
-      <PreOrderContainer contentContainerStyle={{ paddingVertical: 30, paddingHorizontal: 40 }}>
+      <PreOrderContainer contentContainerStyle={{ paddingVertical: 32, paddingHorizontal: 40 }}>
         <TouchableOpacity onPress={() => goToBack && goToBack()} style={{ marginBottom: 12 }}>
           <IconAntDesign
             name='close'
@@ -313,26 +312,50 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
           >
             {t('PREORDER_TYPE', 'Preorder type')}
           </OText>
-          <TouchableOpacity onPress={() => setIsPreorderTypeList(true)}>
-            <View style={styles.selectOption}>
-              <OText
-                size={14}
-                color={theme.colors.disabled}
-                style={{
-                  lineHeight: 24
-                }}
-              >
-                {selectedPreorderType.name}
-              </OText>
-              <IconAntDesign
-                name='down'
-                color={theme.colors.textThird}
-                size={16}
-              />
-            </View>
-          </TouchableOpacity>
+          <SelectDropdown
+            defaultValueByIndex={selectedPreorderType}
+            data={preorderTypeList}
+            // disabled={orderState.loading}
+            onSelect={(selectedItem, index) => {
+              setSelectedPreorderType(index)
+            }}
+            buttonTextAfterSelection={(selectedItem, index) => {
+              return selectedItem.name
+            }}
+            rowTextForSelection={(item, index) => {
+              return item.name
+            }}
+            buttonStyle={styles.selectOption}
+            buttonTextStyle={{
+              color: theme.colors.disabled,
+              fontSize: 14,
+              textAlign: 'left',
+              marginHorizontal: 0
+            }}
+            dropdownStyle={{
+              borderRadius: 8,
+              borderColor: theme.colors.lightGray,
+              marginTop: 5
+            }}
+            rowStyle={{
+              borderBottomColor: theme.colors.backgroundGray100,
+              backgroundColor: theme.colors.backgroundGray100,
+              height: 40,
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+              paddingTop: 8,
+              paddingHorizontal: 14
+            }}
+            rowTextStyle={{
+              color: theme.colors.disabled,
+              fontSize: 14,
+              marginHorizontal: 0
+            }}
+            renderDropdownIcon={() => dropDownIcon()}
+            dropdownOverlayColor='transparent'
+          />
         </PreorderTypeWrapper>
-        {selectedPreorderType?.key === 'business_menu' && (
+        {selectedPreorderType === 1 && (
           <MenuWrapper>
             <OText
               size={16}
@@ -415,51 +438,6 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
         />
       </PreOrderContainer>
       <Spinner visible={orderState.loading} />
-      <OModal
-        open={isPreorderTypeList}
-        onClose={() => setIsPreorderTypeList(false)}
-        customClose
-        entireModal
-      >
-        <PreorderTypeListWrapper contentContainerStyle={{ paddingVertical: 20, paddingHorizontal: 40}}>
-          <TouchableOpacity onPress={() => setIsPreorderTypeList(false)} style={styles.wrapperIcon}>
-            <IconAntDesign
-              name='close'
-              color={theme.colors.textThird}
-              size={24}
-            />
-          </TouchableOpacity>
-          {preorderTypeList?.map((option: any, index: number) => (
-            <TouchableOpacity
-              key={index}
-              onPress={() => handleClickPreorderType(option)}
-              style={{ zIndex: 99999 }}
-            >
-              <DropOption
-                numberOfLines={1}
-                selected={option.key === selectedPreorderType.key}
-              >
-                <View style={{ marginRight: 10 }}>
-                  {option.key === selectedPreorderType.key ? (
-                    <MaterialCommunityIcons
-                      name='radiobox-marked'
-                      size={24}
-                      color={theme.colors.primary}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name='radiobox-blank'
-                      size={24}
-                      color={theme.colors.arrowColor}
-                    />
-                  )}
-                </View>
-                <Text>{option.name}</Text>
-              </DropOption>
-            </TouchableOpacity>
-          ))}
-        </PreorderTypeListWrapper>
-      </OModal>
     </>
   )
 }

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

@@ -42,15 +42,3 @@ export const TimeItem = styled.View`
     background: #F5F9FF;
   `}
 `
-
-export const PreorderTypeListWrapper = styled.ScrollView``
-
-export const DropOption = styled.View`
-  padding: 10px;
-  margin-bottom: 5px;
-  font-size: 16px;
-  border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
-  flex-direction: row;
-  align-items: center;
-`

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

@@ -149,6 +149,7 @@ const OrderMessageUI = (props: any) => {
 	} = props;
 	const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
 	const [openModalForDriver, setOpenModalForDriver] = useState(false);
+	const [openMessages, setOpenMessages] = useState({ business: false, driver: false });
 	const [unreadAlert, setUnreadAlert] = useState({
 		business: false,
 		driver: false,
@@ -163,6 +164,11 @@ const OrderMessageUI = (props: any) => {
 		setOpenMessges(false)
 	}
 
+	const handleOpenMessages = (data: any) => {
+		setOpenMessages(data)
+		readMessages && readMessages();
+	}
+
 	useEffect(() => {
 		if (messagesReadList?.length) {
 			openModalForBusiness
@@ -184,19 +190,24 @@ const OrderMessageUI = (props: any) => {
 		};
 	}, []);
 
+	useEffect(() => {
+		handleOpenMessages({ driver: false, business: true })
+	}, [])
+
 	return (
 		<>
-			{(order?.business && !order?.driver) && (
-				<Messages
-					orderId={order?.id}
-					messages={messages}
-					order={order}
-					setMessages={setMessages}
-					readMessages={readMessages}
-					isMeesageListing
-					onClose={() => handleClose()}
-				/>
-			)}
+			<Messages
+				orderId={order?.id}
+				messages={messages}
+				order={order}
+				setMessages={setMessages}
+				readMessages={readMessages}
+				business={openMessages.business}
+				driver={openMessages.driver}
+				onMessages={setOpenMessages}
+				isMeesageListing
+				onClose={() => handleClose()}
+			/>
 		</>
 
 	)
@@ -212,7 +223,10 @@ export const OrderListing = (props: OrdersOptionParams) => {
 			initialPage: 1,
 			pageSize: 10,
 			controlType: 'infinity'
-		}
+		},
+		profileMessages: true,
+		orderBy: 'last_direct_message_at',
+		orderDirection: 'asc'
 	}
 	return <OrderList {...OrderListingProps} />
 }
@@ -258,10 +272,6 @@ export const MessageListing = (props: MessageListingParams) => {
 		}
 	}, [orderListStatus, selectedOrderId])
 
-	useEffect(() => {
-
-	}, [orderListStatus])
-
 	return (
 		<MessageListingWrapper>
 			<NavBar

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

@@ -21,11 +21,15 @@ const MessagesUI = (props: MessagesParams) => {
 		message,
 		messagesToShow,
 		sendMessage,
+		setCanRead,
 		setMessage,
 		handleSend,
 		setImage,
 		readMessages,
 		onClose,
+		business,
+		driver,
+		onMessages,
 		isMeesageListing
 	} = props
 
@@ -161,18 +165,18 @@ const MessagesUI = (props: MessagesParams) => {
 
 	useEffect(() => {
 		let newMessages: Array<any> = []
-		const console = `${t('ORDER_PLACED_FOR', 'Order placed for')} ${parseDate(order?.created_at)} ${t('VIA', 'Via')} ${order?.app_id ? t(order?.app_id.toUpperCase(), order?.app_id) : t('OTHER', 'Other')}`
+		const _console = `${t('ORDER_PLACED_FOR', 'Order placed for')} ${parseDate(order?.created_at)} ${t('VIA', 'Via')} ${order?.app_id ? t(order?.app_id.toUpperCase(), order?.app_id) : t('OTHER', 'Other')}`
 		const firstMessage = {
 			_id: 0,
-			text: console,
+			text: _console,
 			createdAt: order?.created_at,
 			system: true
 		}
+		const newMessage: any = [];
 		messages.messages.map((message: any) => {
-			let newMessage
-			if (message.type !== 0 && (messagesToShow?.messages?.length || (message?.can_see?.includes('2')) || (message?.can_see?.includes('4') && type === USER_TYPE.DRIVER))) {
-				newMessage = {
-					_id: message.id,
+			if (business && message.type !== 0 && (messagesToShow?.messages?.length || message?.can_see?.includes('2'))) {
+				newMessage.push({
+					_id: message?.id,
 					text: message.type === 1 ? messageConsole(message) : message.comment,
 					createdAt: message.type !== 0 && message.created_at,
 					image: message.source,
@@ -182,15 +186,30 @@ const MessagesUI = (props: MessagesParams) => {
 						name: message.author.name,
 						avatar: message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo
 					}
-				}
+				});
+			}
+
+			if (driver && message.type !== 0 && (messagesToShow?.messages?.length || message?.can_see?.includes('4'))) {
+				newMessage.push({
+					_id: message?.id,
+					text: message.type === 1 ? messageConsole(message) : message.comment,
+					createdAt: message.type !== 0 && message.created_at,
+					image: message.source,
+					system: message.type === 1,
+					user: {
+						_id: message.author.id,
+						name: message.author.name,
+						avatar: message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo
+					}
+				});
 			}
+
 			if (message.type === 0) {
-				newMessage = firstMessage
+				newMessage.push(firstMessage);
 			}
-			newMessages = [...newMessages, newMessage]
 		})
-		setFormattedMessages([...newMessages.reverse()])
-	}, [messages.messages.length])
+		setFormattedMessages(newMessage.reverse())
+	}, [messages.messages.length, business, driver])
 
 	useEffect(() => {
 		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
@@ -205,6 +224,11 @@ const MessagesUI = (props: MessagesParams) => {
 		}
 	}, [])
 
+	useEffect(() => {
+		if (business) setCanRead({ business: true, administrator: true, customer: true, driver: false })
+		else if (driver) setCanRead({ business: false, administrator: true, customer: true, driver: true })
+	}, [business, driver])
+
 	const RenderActions = (props: any) => {
 		return (
 			<Actions
@@ -422,23 +446,39 @@ const MessagesUI = (props: MessagesParams) => {
 							</TouchableOpacity>
 							<OText size={18}>{t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</OText>
 						</View>
-						<View>
+						<View style={{ ...styles.typeWraper }}>
 							{order.business && (
-								<OIcon
-									url={order?.business?.logo}
-									width={32}
-									height={32}
-									style={{ borderRadius: 7.6 }}
-								/>
+								<TouchableOpacity
+									onPress={() => onMessages({ business: true, driver: false })}
+								>
+									<MessageTypeItem
+										active={business}
+									>
+										<OIcon
+											url={order?.business?.logo}
+											width={32}
+											height={32}
+											style={{ borderRadius: 32 }}
+										/>
+									</MessageTypeItem>
+								</TouchableOpacity>
 							)}
 
 							{order?.driver && (
-								<OIcon
-									url={order?.driver?.photo}
-									width={32}
-									height={32}
-									style={{ borderRadius: 7.6 }}
-								/>
+								<TouchableOpacity
+									onPress={() => onMessages({ business: false, driver: true })}
+								>
+									<MessageTypeItem
+										active={driver}
+									>
+										<OIcon
+											url={order?.driver?.photo}
+											width={32}
+											height={32}
+											style={{ borderRadius: 32 }}
+										/>
+									</MessageTypeItem>
+								</TouchableOpacity>
 							)}
 						</View>
 					</ProfileMessageHeader>
@@ -509,6 +549,11 @@ const styles = StyleSheet.create({
 		overflow: 'hidden',
 		width: 35,
 		marginVertical: 18,
+	},
+	typeWraper: {
+		flexDirection: 'row',
+		height: 45,
+		alignItems: 'center'
 	}
 
 })

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

@@ -1,5 +1,6 @@
 
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
+
 
 export const Wrapper = styled.View`
   flex: 1;
@@ -24,4 +25,18 @@ export const ProfileMessageHeader = styled.View`
   align-items: center;
   padding-bottom: 0px;
   padding-horizontal: 20px;
+`
+export const MessageTypeItem = styled.View`
+  justify-content: center;
+  align-items: center;
+  padding-horizontal: 5px;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  margin-right: 5px;
+  border-radius: 7.6px;
+  overflow: hidden;
+  
+  ${({ active }: any) => active && css`
+    background-color: ${(props: any) => props.theme.colors.whiteGray};
+  `}
 `

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

@@ -338,7 +338,11 @@ export interface MessagesParams {
 	setMessages?: () => {},
 	readMessages?: () => {},
 	onClose?: () => void,
-	isMeesageListing?: boolean
+	isMeesageListing?: boolean,
+	setCanRead?: any,
+	business: boolean,
+	driver: boolean,
+	onMessages?: any
 }
 export interface ViewInterface {
 	navigation?: any;