ordering-ui-react-native 0.12.92 → 0.12.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.92",
+  "version": "0.12.96",
   "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/NotFoundSource/index.tsx

@@ -6,7 +6,7 @@ import { useTheme } from 'styled-components/native';
 import { NotFound, NotFoundImage } from './styles';
 
 export const NotFoundSource = (props: NotFoundSourceParams) => {
-  const { image, content, btnTitle, conditioned, onClickButton } = props;
+  const { image, content, btnTitle, conditioned, onClickButton, textSize } = props;
   const theme = useTheme();
 
   const errorImage = image || theme.images.general.notFound;
@@ -21,7 +21,7 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
       {content && conditioned && !errorImage && (
         <OText
           color={theme.colors.textSecondary}
-          size={18}
+          size={textSize ?? 18}
           style={{ textAlign: 'center' }}>
           {content}
         </OText>
@@ -29,7 +29,7 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
       {content && !conditioned && (
         <OText
           color={theme.colors.textSecondary}
-          size={18}
+          size={textSize ?? 18}
           style={{ textAlign: 'center' }}>
           {content}
         </OText>

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

@@ -3,14 +3,15 @@ import styled from 'styled-components/native';
 export const FiltersTab = styled.View`
   margin-bottom: 20px;
   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 +54,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/business/src/types/index.tsx

@@ -232,6 +232,7 @@ export interface NotFoundSourceParams {
   conditioned?: boolean;
   onClickButton?: any;
   children?: any;
+  textSize?: number;
 }
 export interface MessagesOptionParams {
   orders?: any;

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/single-business/src/components/ProductForm/index.tsx

@@ -567,86 +567,87 @@ export const ProductOptionsUI = (props: any) => {
 
       {!loading && !error && product && (
         <ProductActions>
-          <OText size={16} lineHeight={24} weight={'600'}>
-            {productCart.total ? parsePrice(productCart?.total) : ''}
-          </OText>
           {productCart && !isSoldOut && maxProductQuantity > 0 && (
-            <View style={styles.quantityControl}>
-              <TouchableOpacity
-                onPress={decrement}
-                disabled={productCart.quantity === 1 || isSoldOut}>
-                <OIcon
-                  src={theme.images.general.minus}
-                  width={16}
-                  color={
-                    productCart.quantity === 1 || isSoldOut
-                      ? theme.colors.backgroundGray
-                      : theme.colors.backgroundDark
-                  }
-                />
-              </TouchableOpacity>
-              <OText
-                size={12}
-                lineHeight={18}
-                style={{ minWidth: 29, textAlign: 'center' }}>
-                {productCart.quantity}
+            <>
+              <OText size={16} lineHeight={24} weight={'600'}>
+                {productCart.total ? parsePrice(productCart?.total) : ''}
               </OText>
-              <TouchableOpacity
-                onPress={increment}
-                disabled={
-                  maxProductQuantity <= 0 ||
-                  productCart.quantity >= maxProductQuantity ||
-                  isSoldOut
-                }>
-                <OIcon
-                  src={theme.images.general.plus}
-                  width={16}
-                  color={
+              <View style={styles.quantityControl}>
+                <TouchableOpacity
+                  onPress={decrement}
+                  disabled={productCart.quantity === 1 || isSoldOut}>
+                  <OIcon
+                    src={theme.images.general.minus}
+                    width={16}
+                    color={
+                      productCart.quantity === 1 || isSoldOut
+                        ? theme.colors.backgroundGray
+                        : theme.colors.backgroundDark
+                    }
+                  />
+                </TouchableOpacity>
+                <OText
+                  size={12}
+                  lineHeight={18}
+                  style={{ minWidth: 29, textAlign: 'center' }}>
+                  {productCart.quantity}
+                </OText>
+                <TouchableOpacity
+                  onPress={increment}
+                  disabled={
                     maxProductQuantity <= 0 ||
-                      productCart.quantity >= maxProductQuantity ||
-                      isSoldOut
-                      ? theme.colors.backgroundGray
-                      : theme.colors.backgroundDark
-                  }
-                />
-              </TouchableOpacity>
-            </View>
+                    productCart.quantity >= maxProductQuantity ||
+                    isSoldOut
+                  }>
+                  <OIcon
+                    src={theme.images.general.plus}
+                    width={16}
+                    color={
+                      maxProductQuantity <= 0 ||
+                        productCart.quantity >= maxProductQuantity ||
+                        isSoldOut
+                        ? theme.colors.backgroundGray
+                        : theme.colors.backgroundDark
+                    }
+                  />
+                </TouchableOpacity>
+              </View>
+            </>
           )}
           <View
-            style={{
-              width: isSoldOut || maxProductQuantity <= 0 ? '100%' : '40%',
-            }}>
+            style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : '40%'}}
+          >
             {productCart &&
               !isSoldOut &&
               maxProductQuantity > 0 &&
               auth &&
-              orderState.options?.address_id && (
-                <OButton
-                  onClick={() => handleSaveProduct()}
-                  imgRightSrc=""
-                  text={`${orderState.loading
-                    ? t('LOADING', 'Loading')
-                    : editMode
-                      ? t('UPDATE', 'Update')
-                      : t('ADD', 'Add')
-                    }`}
-                  textStyle={{
-                    color: saveErrors ? theme.colors.primary : theme.colors.white,
-                  }}
-                  style={{
-                    backgroundColor: saveErrors ? theme.colors.white : theme.colors.primary,
-                    borderColor: saveErrors ? theme.colors.white : theme.colors.primary,
-                    opacity: saveErrors ? 0.3 : 1,
-                    borderRadius: 7.6,
-                    height: 44,
-                    shadowOpacity: 0,
-                    borderWidth: 1,
-                  }}
-                />
-              )}
-            {auth &&
-              !orderState.options?.address_id &&
-              (orderState.loading ? (
+              orderState.options?.address_id &&
+            (
+              <OButton
+                onClick={() => handleSaveProduct()}
+                imgRightSrc=""
+                text={`${orderState.loading
+                  ? t('LOADING', 'Loading')
+                  : editMode
+                    ? t('UPDATE', 'Update')
+                    : t('ADD', 'Add')
+                  }`}
+                textStyle={{
+                  color: saveErrors ? theme.colors.primary : theme.colors.white,
+                }}
+                style={{
+                  backgroundColor: saveErrors ? theme.colors.white : theme.colors.primary,
+                  borderColor: saveErrors ? theme.colors.white : theme.colors.primary,
+                  opacity: saveErrors ? 0.3 : 1,
+                  borderRadius: 7.6,
+                  height: 44,
+                  shadowOpacity: 0,
+                  borderWidth: 1,
+                }}
+              />
+            )}
+            {auth && !orderState.options?.address_id &&(
+              orderState.loading ? (
                 <OButton
                   isDisabled
                   text={t('LOADING', 'Loading')}
@@ -654,7 +655,8 @@ export const ProductOptionsUI = (props: any) => {
                 />
               ) : (
                 <OButton onClick={navigation.navigate('AddressList')} />
-              ))}
+              ))
+            }
             {(!auth || isSoldOut || maxProductQuantity <= 0) && (
               <OButton
                 isDisabled={isSoldOut || maxProductQuantity <= 0}
@@ -669,6 +671,7 @@ export const ProductOptionsUI = (props: any) => {
                 style={{
                   borderColor: theme.colors.primary,
                   backgroundColor: theme.colors.white,
+                  borderRadius: 8
                 }}
               />
             )}