ordering-ui-react-native 0.12.91 → 0.12.92

package/package.json

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