ordering-ui-react-native 0.12.91 → 0.12.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.91",
+  "version": "0.12.95",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -98,6 +98,7 @@
     "react-native-restart": "^0.0.22",
     "react-native-safe-area-context": "^3.1.8",
     "react-native-screens": "^2.11.0",
+    "react-native-select-dropdown": "^1.7.0",
     "react-native-signature-canvas": "^4.3.0",
     "react-native-snap-carousel": "^3.9.1",
     "react-native-sound": "^0.11.1",

package/src/config.json

@@ -2,7 +2,7 @@
   "app_id": "react-native-app",
   "notification_app": "orderingapp",
   "app_name": "Ordering",
-  "project": "luisv4",
+  "project": "reactdemo",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

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/original/src/components/MomentOption/index.tsx

@@ -32,6 +32,8 @@ import {
 import CalendarPicker from 'react-native-calendar-picker';
 import { TouchableRipple } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import SelectDropdown from 'react-native-select-dropdown';
 
 const MomentOptionUI = (props: MomentOptionParams) => {
 	const {
@@ -171,7 +173,6 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 			},
 		};
 	};
-
 	return (
 		<>
 		<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
@@ -229,8 +230,56 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 						{datesList.length > 0 && (
 							<View style={styles.dateWrap}>
 								<View style={styles.dateLabel}>
-									<OText size={12} color={theme.colors.disabled}>{dateSelected}</OText>
+									<OText size={12} color={theme.colors.textNormal}>{dateSelected}</OText>
 								</View>
+								<SelectDropdown
+									defaultButtonText={timeSelected ? timeSelected : t('DELIVERY_TIME', 'Delivery Time')}
+									defaultValue={74}
+									data={hoursList}
+									disabled={orderState.loading}
+									onSelect={(selectedItem, index) => {
+										setSelectedTime(selectedItem.startTime)
+									}}
+									buttonTextAfterSelection={(selectedItem, index) => {
+										return `${selectedItem.startTime} - ${selectedItem.endTime}`
+									}}
+									rowTextForSelection={(item, index) => {
+										return `${item.startTime} - ${item.endTime}`
+									}}
+									buttonStyle={{
+										backgroundColor: theme.colors.white,
+										borderColor: theme.colors.border,
+										borderWidth: 1,
+										borderRadius: 8,
+										height: 40,
+										width: '100%',
+										flexDirection: 'column',
+										alignItems: 'flex-start',
+										marginBottom: 20
+									}}
+									buttonTextStyle={{
+										color: theme.colors.textNormal,
+										fontSize: 12,
+										paddingTop: 10
+									}}
+									dropdownStyle={{
+										borderRadius: 8,
+										borderColor: theme.colors.lightGray,
+									}}
+									rowStyle={{
+										borderBottomColor: theme.colors.white,
+										backgroundColor: theme.colors.white,
+										height: 40,
+										flexDirection: 'column',
+										alignItems: 'flex-start',
+										paddingTop: 8,
+										paddingLeft: 22
+									}}
+									rowTextStyle={{
+										color: theme.colors.textNormal,
+										fontSize: 14,
+									}}
+								/>							
 								<CalendarPicker
 									nextTitle=">"
 									width={width - 80}
@@ -264,50 +313,6 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 								/>
 							</View>
 						)}
-
-						{hoursList.length > 0 && optionSelected.isSchedule && (
-							<>
-								<TouchableRipple style={styles.timeLabel} onPress={() => { setToggleTime(!toggleTime) }}>
-									<>
-										<OIcon src={theme.images.general.clock} width={16} />
-										<OText style={{ flexGrow: 1, paddingHorizontal: 12 }} color={theme.colors.disabled}>{timeSelected ? timeSelected : t('DELIVERY_TIME', 'Delivery Time')}</OText>
-										<OIcon src={theme.images.general.arrow_down} width={16} style={{ transform: [{ rotate: toggleTime ? '180deg' : '0deg' }] }} />
-									</>
-								</TouchableRipple>
-								{toggleTime ? (
-
-									<WrapHours nestedScrollEnabled={true}>
-										<Hours name="hours">
-											{hoursList.map((hour: any, i: any) => (
-												<Hour
-													key={i}
-													onPress={() => setSelectedTime(hour.startTime)}
-													disabled={orderState.loading}
-													style={{ borderColor: selectedTime === hour.startTime ? theme.colors.primary : theme.colors.border }}
-												>
-													<OText
-														color={
-															selectedTime === hour.startTime
-																? theme.colors.primary
-																: theme.colors.textSecondary
-														}>
-														{configs?.format_time?.value === '12'
-															? hour.startTime.includes('12')
-																? `${hour.startTime}PM`
-																: parseTime(moment(hour.startTime, 'HH:mm'), {
-																	outputFormat: 'hh:mma',
-																})
-															: parseTime(moment(hour.startTime, 'HH:mm'), {
-																outputFormat: 'HH:mm',
-															})}
-													</OText>
-												</Hour>
-											))}
-										</Hours>
-									</WrapHours>
-								) : null}
-							</>
-						)}
 					</WrapDelveryTime>
 				)}
 			</View>

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