ordering-ui-react-native 0.15.91 → 0.15.92-release

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

@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
 import NavBar from '../NavBar'
 import { OText } from '../shared'
 import { LastOrders } from '../LastOrders'
+import { Container } from '../../layouts/Container'
 
 import {
   HelpSubItem,
@@ -15,13 +17,28 @@ export const Help = (props: HelpParams) => {
     navigation
   } = props
   const [, t] = useLanguage()
+  const [refreshing] = useState(false);
+  const [refresh, setRefresh] = useState(false)
 
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
   }
+
+  const handleOnRefresh = () => {
+    setRefresh(true)
+  }
+
   return (
-    <>
+    <Container
+      noPadding
+      refreshControl={
+				<RefreshControl
+					refreshing={refreshing}
+					onRefresh={() => handleOnRefresh()}
+				/>
+			}
+    >
       <NavBar
         title={t('HELP', 'Help')}
         titleAlign={'center'}
@@ -48,8 +65,8 @@ export const Help = (props: HelpParams) => {
 
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
-        <LastOrders {...props} onRedirect={onRedirect} />
+        <LastOrders {...props} onRedirect={onRedirect} refresh={refresh} setRefresh={setRefresh} />
       </LastOrdersContainer>
-    </>
+    </Container>
   )
 }

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

@@ -3,7 +3,8 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpAccountAndPaymentParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Content
@@ -38,10 +39,14 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   return (
     <>
       <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
         imgRightSrc={null}
         style={styles.btnBackArrow}
         onClick={() => goToBack()}
+        icon={AntDesignIcon}
+        iconProps={{
+          name: 'arrowleft',
+          size: 26
+        }}
       />
       <OText size={22} weight={600}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
       <Content>
@@ -65,4 +70,4 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
       </Content>
     </>
   )
-}
+}

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

@@ -3,10 +3,11 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpGuideParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
 import {
   Content
 } from './styles'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 export const HelpGuide = (props: HelpGuideParams) => {
   const {
@@ -37,10 +38,14 @@ export const HelpGuide = (props: HelpGuideParams) => {
   return (
     <>
       <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
         imgRightSrc={null}
         style={styles.btnBackArrow}
         onClick={() => goToBack()}
+        icon={AntDesignIcon}
+        iconProps={{
+          name: 'arrowleft',
+          size: 26
+        }}
       />
       <OText size={22} weight={600}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
       <Content>
@@ -64,4 +69,4 @@ export const HelpGuide = (props: HelpGuideParams) => {
       </Content>
     </>
   )
-}
+}

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

@@ -3,8 +3,9 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpOrderParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
 import { WebView } from 'react-native-webview'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Content
@@ -42,10 +43,14 @@ export const HelpOrder = (props: HelpOrderParams) => {
   return (
     <>
       <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
         imgRightSrc={null}
         style={styles.btnBackArrow}
         onClick={() => goToBack()}
+        icon={AntDesignIcon}
+        iconProps={{
+          name: 'arrowleft',
+          size: 26
+        }}
       />
       <OText size={22} weight={600}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       <Content>
@@ -76,4 +81,4 @@ export const HelpOrder = (props: HelpOrderParams) => {
       </Content>
     </>
   )
-}
+}

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

@@ -20,7 +20,10 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
     onBusinessClick,
     navigation,
     isLoading,
-    getBusinesses
+    getBusinesses,
+    favoriteIds,
+    setFavoriteIds,
+    handleUpdateBusinessList
   } = props;
 
   const [, t] = useLanguage()
@@ -33,6 +36,17 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
     getBusinesses(true)
   }, [isLoading])
 
+  useEffect(() => {
+    if (!businessesList?.businesses?.length) return
+    const ids = [...favoriteIds]
+    businessesList.businesses.forEach(business => {
+      if (business?.favorite) {
+        ids.push(business.id)
+      }
+    })
+    setFavoriteIds([...new Set(ids)])
+  }, [businessesList?.businesses?.length])
+
   return (
     <>
 
@@ -123,6 +137,9 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
                           handleCustomClick={onBusinessClick}
                           orderType={orderState?.options?.type}
                           navigation={navigation}
+                          favoriteIds={favoriteIds}
+                          setFavoriteIds={setFavoriteIds}
+                          handleUpdateBusinessList={handleUpdateBusinessList}
                         />
                       </View>
                     )

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

@@ -18,11 +18,15 @@ import {
   OrderContainer,
   OrderInfo
 } from './styles'
+import { useEffect } from 'react'
 
 const LastOrdersUI = (props: LastOrdersParams) => {
   const {
     orderList,
-    onRedirect
+    onRedirect,
+    loadOrders,
+    refresh,
+    setRefresh
   } = props
   const { loading, error, orders } = orderList
 
@@ -46,6 +50,13 @@ const LastOrdersUI = (props: LastOrdersParams) => {
     onRedirect && onRedirect('OrderDetails', { orderId: uuid })
   }
 
+  useEffect(() => {
+		if(refresh){
+			loadOrders(false, false, false, true)
+			setRefresh && setRefresh(false)
+		}
+	}, [refresh])
+
   return (
     <>
       {loading ? (

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

@@ -15,7 +15,8 @@ export const Otp = (props: otpParams) => {
         setWillVerifyOtpState,
         onSubmit,
         handleLoginOtp,
-        setAlertState
+        setAlertState,
+        pinCount
     } = props
 
     const theme = useTheme();
@@ -65,7 +66,7 @@ export const Otp = (props: otpParams) => {
                 </OText>
                 <OTPInputView
                     style={{ width: '100%', height: 150 }}
-                    pinCount={6}
+                    pinCount={pinCount || 6}
                     codeInputFieldStyle={loginStyle.underlineStyleBase}
                     codeInputHighlightStyle={loginStyle.underlineStyleHighLighted}
                     onCodeFilled={(code: string) => handleLoginOtp(code)}

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

@@ -93,10 +93,17 @@ const LoginFormUI = (props: LoginParams) => {
 	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
+	const [tabLayouts, setTabLayouts] = useState<any>({})
+	const tabsRef = useRef<any>(null)
 
 	const theme = useTheme();
 	const isOtpEmail = loginTab === 'otp' && otpType === 'email'
 	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
+
+	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
+	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
+	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
 			backgroundColor: '#FFF',
@@ -146,9 +153,10 @@ const LoginFormUI = (props: LoginParams) => {
 	const passwordRef = useRef<any>({});
 	const recaptchaRef = useRef<any>({});
 
-	const handleChangeTab = (val: string) => {
+	const handleChangeTab = (val: string, otpType?: string) => {
 		props.handleChangeTab(val);
 		setPasswordSee(false);
+		handleCategoryScroll(otpType ? `${val}_${otpType}` : val)
 	};
 
 	const onSubmit = (values?: any) => {
@@ -231,7 +239,7 @@ const LoginFormUI = (props: LoginParams) => {
 	}
 
 	const handleChangeOtpType = (type: string) => {
-		handleChangeTab('otp')
+		handleChangeTab('otp', type)
 		setOtpType(type)
 	}
 
@@ -248,6 +256,20 @@ const LoginFormUI = (props: LoginParams) => {
 		})
 	}
 
+	const handleCategoryScroll = (opc: string) => {
+		tabsRef.current.scrollTo({
+			x: tabLayouts?.[opc]?.x - 40,
+			animated: true
+		})
+	}
+
+	const handleOnLayout = (event: any, opc: string) => {
+		const _tabLayouts = { ...tabLayouts }
+		const categoryKey = opc
+		_tabLayouts[categoryKey] = event.nativeEvent.layout
+		setTabLayouts(_tabLayouts)
+	}
+
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
 			setRecaptchaConfig({
@@ -329,11 +351,18 @@ const LoginFormUI = (props: LoginParams) => {
 				titleStyle={{ marginRight: 0, marginLeft: 0 }}
 			/>
 			<FormSide>
-				{((useLoginByEmail && useLoginByCellphone) || useLoginOtp) && (
+				{(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
 					<LoginWith>
-						<OTabs horizontal>
+						<OTabs
+							horizontal
+							showsHorizontalScrollIndicator={false}
+							ref={tabsRef}
+						>
 							{useLoginByEmail && (
-								<TabBtn onPress={() => handleChangeTab('email')}>
+								<TabBtn
+									onPress={() => handleChangeTab('email')}
+									onLayout={(event: any) => handleOnLayout(event, 'email')}
+								>
 									<OTab
 										style={{
 											borderBottomColor:
@@ -355,7 +384,10 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginByCellphone && (
-								<TabBtn onPress={() => handleChangeTab('cellphone')}>
+								<TabBtn
+									onPress={() => handleChangeTab('cellphone')}
+									onLayout={(event: any) => handleOnLayout(event, 'cellphone')}
+								>
 									<OTab
 										style={{
 											borderBottomColor:
@@ -377,7 +409,10 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpEmail && (
-								<TabBtn onPress={() => handleChangeOtpType('email')}>
+								<TabBtn
+									onPress={() => handleChangeOtpType('email')}
+									onLayout={(event: any) => handleOnLayout(event, 'otp_email')}
+								>
 									<OTab
 										style={{
 											borderBottomColor:
@@ -399,7 +434,10 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpCellphone && (
-								<TabBtn onPress={() => handleChangeOtpType('cellphone')}>
+								<TabBtn
+									onPress={() => handleChangeOtpType('cellphone')}
+									onLayout={(event: any) => handleOnLayout(event, 'otp_cellphone')}
+								>
 									<OTab
 										style={{
 											borderBottomColor:
@@ -669,7 +707,8 @@ const LoginFormUI = (props: LoginParams) => {
 							<ButtonsWrapper>
 								<SocialButtons>
 									{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-										configs?.facebook_id?.value && (
+										configs?.facebook_id?.value &&
+										facebookLoginEnabled && (
 											<FacebookLogin
 												notificationState={notificationState}
 												handleErrors={(err: any) => showToast(ToastType.Error, err)}
@@ -677,7 +716,7 @@ const LoginFormUI = (props: LoginParams) => {
 												handleSuccessFacebookLogin={handleSuccessFacebook}
 											/>
 										)}
-									{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+									{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
 										<GoogleLogin
 											notificationState={notificationState}
 											webClientId={configs?.google_login_client_id?.value}
@@ -686,7 +725,7 @@ const LoginFormUI = (props: LoginParams) => {
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
 									)}
-									{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+									{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && appleLoginEnabled && (
 										<AppleLogin
 											notificationState={notificationState}
 											handleErrors={(err: any) => showToast(ToastType.Error, err)}

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

@@ -5,6 +5,7 @@ import { launchImageLibrary } from 'react-native-image-picker'
 import { GiftedChat, Actions, ActionsProps, InputToolbar, Composer, Send, Bubble, MessageImage, InputToolbarProps, ComposerProps } from 'react-native-gifted-chat'
 import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard } from 'react-native'
 import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader, MessageTypeItem } from './styles'
@@ -36,7 +37,7 @@ const ORDER_STATUS: any = {
 	20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
 	21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
 	22: 'ORDER_LOOKING_FOR_DRIVER',
-  	23: 'ORDER_DRIVER_ON_WAY'
+	23: 'ORDER_DRIVER_ON_WAY'
 }
 
 const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
@@ -122,18 +123,17 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const messageConsole = (message: any) => {
 		return message.change?.attribute !== 'driver_id'
-		  ?
-		  `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${
-			filterSpecialStatus.includes(message.change.attribute) ? 
-			`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` : 
-			`${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
-		  }`
-		  : message.change.new
 			?
-			`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
-			:
-			`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
-	  }
+			`${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
+				`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
+				`${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+			}`
+			: message.change.new
+				?
+				`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+				:
+				`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
+	}
 
 	useEffect(() => {
 		let newMessages: Array<any> = []
@@ -402,7 +402,9 @@ const MessagesUI = (props: MessagesParams) => {
 			<Wrapper>
 				{!isMeesageListing ? (
 					<Header>
-						<OIconButton icon={theme.images.general.arrow_left} style={{ paddingStart: 10, borderColor: theme.colors.clear }} onClick={onClose} />
+						<TouchableOpacity onPress={onClose} style={{ paddingStart: 10, borderColor: theme.colors.clear }}>
+							<AntDesignIcon name='arrowleft' size={26} />
+						</TouchableOpacity>
 						<View style={{ marginRight: 10, shadowColor: theme.colors.black, shadowOpacity: 0.1, shadowOffset: { width: 0, height: 1 }, shadowRadius: 2 }}>
 							<OIcon
 								url={type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo}
@@ -419,10 +421,8 @@ const MessagesUI = (props: MessagesParams) => {
 				) : (
 					<ProfileMessageHeader>
 						<View style={{ ...styles.headerTitle }}>
-							<TouchableOpacity
-								style={styles.headerItem}
-								onPress={onClose}>
-								<OIcon src={theme.images.general.arrow_left} width={16} />
+							<TouchableOpacity onPress={onClose} style={styles.headerItem}>
+								<AntDesignIcon name='arrowleft' size={26} />
 							</TouchableOpacity>
 							<OText size={18}>{t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</OText>
 						</View>

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

@@ -0,0 +1,197 @@
+import React, { useEffect, useState } from 'react'
+import { StyleSheet, View, Platform } from 'react-native'
+import SelectDropdown from 'react-native-select-dropdown'
+import { useTheme } from 'styled-components/native'
+import {
+  MomentOption as MomentOptionController,
+  useConfig,
+  useUtils
+} from 'ordering-components/native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import { Container } from './styles'
+import moment from 'moment'
+
+const MomentSelectorUI = (props: any) => {
+  const {
+		datesList,
+		hoursList,
+		dateSelected,
+		timeSelected,
+		handleChangeDate,
+		handleChangeTime,
+  } = props
+
+  const theme = useTheme()
+  const { top } = useSafeAreaInsets()
+  const [{ configs }] = useConfig()
+  const [{ parseTime }] = useUtils()
+
+  const [customizedDateList, setCustomizedDateList] = useState([])
+  const [customizedTimeList, setCustomizedTimeList] = useState([])
+
+  const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
+  const styles = StyleSheet.create({
+    selectOption: {
+      width: '100%',
+      backgroundColor: theme.colors.backgroundGray100,
+      paddingVertical: 5,
+      paddingHorizontal: 14,
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: 30
+    },
+    selectWrapper: {
+      flex: 1
+    }
+  })
+
+  useEffect(() => {
+    const updatedDatesList = datesList?.map((date: any) => {
+      return { value: moment(date).format('MMM DD, YYYY'), key: date }
+    })
+    setCustomizedDateList(updatedDatesList)
+  }, [datesList])
+
+  useEffect(() => {
+    if (hoursList?.length > 0) {
+      
+      const updatedHoursList = hoursList?.map((hour: any) => {
+        const timeValue = is12hours ? (
+          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' })
+          )
+          return { value: timeValue, key: hour.startTime }
+        })
+      setCustomizedTimeList(updatedHoursList)
+    }
+  }, [hoursList])
+
+  const dropDownIcon = () => {
+    return (
+      <IconAntDesign
+        name='down'
+        color={theme.colors.textThird}
+        size={12}
+      />
+    )
+  }
+
+  return (
+    <Container>
+      <View style={styles.selectWrapper}>
+        <SelectDropdown
+          defaultValue={customizedDateList?.find((item: any) => item.key === dateSelected)}
+          data={customizedDateList}
+          onSelect={(selectedItem, index) => {
+            handleChangeDate(selectedItem?.key)
+          }}
+          buttonTextAfterSelection={(selectedItem, index) => {
+            return selectedItem?.value
+          }}
+          rowTextForSelection={(item, index) => {
+            return item.value
+          }}
+          buttonStyle={{borderTopLeftRadius: 7.6, borderBottomLeftRadius: 7.6, ...styles.selectOption}}
+          buttonTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            textAlign: 'left',
+            marginHorizontal: 0
+          }}
+          dropdownStyle={{
+            borderRadius: 8,
+            borderColor: theme.colors.lightGray,
+            marginTop: Platform.OS === 'ios' ? 12 : -top
+          }}
+          rowStyle={{
+            borderBottomColor: theme.colors.backgroundGray100,
+            backgroundColor: theme.colors.backgroundGray100,
+            height: 30,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            paddingTop: 8,
+            paddingHorizontal: 12
+          }}
+          rowTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            marginHorizontal: 0
+          }}
+          renderDropdownIcon={() => dropDownIcon()}
+          dropdownOverlayColor='transparent'
+        />
+      </View>
+      <View style={styles.selectWrapper}>
+        <SelectDropdown
+          defaultValue={customizedTimeList?.find((item: any) => item.key === timeSelected)}
+          data={customizedTimeList}
+          onSelect={(selectedItem, index) => {
+            handleChangeTime(selectedItem.key)
+          }}
+          buttonTextAfterSelection={(selectedItem, index) => {
+            return selectedItem.value
+          }}
+          rowTextForSelection={(item, index) => {
+            return item.value
+          }}
+          buttonStyle={{borderTopRightRadius: 7.6, borderBottomRightRadius: 7.6, ...styles.selectOption}}
+          buttonTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            textAlign: 'left',
+            marginHorizontal: 0
+          }}
+          dropdownStyle={{
+            borderRadius: 8,
+            borderColor: theme.colors.lightGray,
+            marginTop: Platform.OS === 'ios' ? 12 : -top
+          }}
+          rowStyle={{
+            borderBottomColor: theme.colors.backgroundGray100,
+            backgroundColor: theme.colors.backgroundGray100,
+            height: 30,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            paddingTop: 8,
+            paddingHorizontal: 14
+          }}
+          rowTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            marginHorizontal: 0
+          }}
+          renderDropdownIcon={() => dropDownIcon()}
+          dropdownOverlayColor='transparent'
+        />
+      </View>
+    </Container>
+  )
+}
+
+export const MomentSelector = (props: any) => {
+  const [{ configs }] = useConfig()
+
+  const limitDays = parseInt(configs?.max_days_preorder?.value, 10)
+
+  const currentDate = new Date()
+  const time = limitDays > 1
+    ? currentDate.getTime() + ((limitDays - 1) * 24 * 60 * 60 * 1000)
+    : limitDays === 1 ? currentDate.getTime() : currentDate.getTime() + (6 * 24 * 60 * 60 * 1000)
+
+  currentDate.setTime(time)
+  currentDate.setHours(23)
+  currentDate.setMinutes(59)
+
+  const businessPreorderProps = {
+    ...props,
+    UIComponent: MomentSelectorUI,
+    maxDate: currentDate
+  }
+  return <MomentOptionController {...businessPreorderProps} />
+}

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  flex-direction: row;
+  width: 100%;
+`