ordering-ui-react-native 0.15.37 → 0.15.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/themes/original/src/components/BusinessController/index.tsx +6 -7
  3. package/themes/original/src/components/BusinessListingSearch/index.tsx +4 -0
  4. package/themes/original/src/components/BusinessMenuList/index.tsx +11 -4
  5. package/themes/original/src/components/BusinessPreorder/index.tsx +141 -121
  6. package/themes/original/src/components/BusinessesListing/index.tsx +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.15.37",
3
+ "version": "0.15.40",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/original/src/components/BusinessController/index.tsx CHANGED
@@ -45,9 +45,6 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
45
45
  const [orderState] = useOrder();
46
46
  const [, t] = useLanguage();
47
47
  const theme = useTheme()
48
- const [{ configs }] = useConfig();
49
- const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
50
-
51
48
  const styles = StyleSheet.create({
52
49
  headerStyle: {
53
50
  borderTopLeftRadius: 7.6,
@@ -115,7 +112,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
115
112
  };
116
113
 
117
114
  const handleBusinessClick = (selectedBusiness: any) => {
118
- if (business?.open || !isPreOrderSetting) handleClick && handleClick(selectedBusiness)
115
+ if (business?.open) handleClick && handleClick(selectedBusiness)
119
116
  else {
120
117
  navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
121
118
  }
@@ -192,9 +189,11 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
192
189
  </View>
193
190
  ) : (
194
191
  <View style={styles.bullet}>
195
- <OText size={10} color={theme.colors.textSecondary}>
196
- {`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
197
- </OText>
192
+ {orderState?.options?.type === 1 && (
193
+ <OText size={10} color={theme.colors.textSecondary}>
194
+ {`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
195
+ </OText>
196
+ )}
198
197
  <OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
199
198
  orderState?.options?.type === 1
200
199
  ? (businessDeliveryTime ?? business?.delivery_time)
package/themes/original/src/components/BusinessListingSearch/index.tsx CHANGED
@@ -137,6 +137,10 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
137
137
  }
138
138
  }, [filters, openFilters])
139
139
 
140
+ useEffect(() => {
141
+ handleSearchbusinessAndProducts(true)
142
+ }, [])
143
+
140
144
  const MaxSectionItem = ({ title, options, filter }: any) => {
141
145
  const parseValue = (option: number) => {
142
146
  return filter === 'max_distance'
package/themes/original/src/components/BusinessMenuList/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react'
1
+ import React, { useEffect } from 'react'
2
2
  import { useLanguage, BusinessMenuListing } from 'ordering-components/native'
3
3
  import { OText } from '../shared'
4
4
  import { BusinessMenuListParams } from '../../types'
@@ -19,7 +19,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
19
19
 
20
20
  const [, t] = useLanguage()
21
21
  const theme = useTheme()
22
- const {top} = useSafeAreaInsets()
22
+ const { top } = useSafeAreaInsets()
23
23
 
24
24
  const styles = StyleSheet.create({
25
25
  container: {
@@ -36,7 +36,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
36
36
  height: 44,
37
37
  width: '100%'
38
38
  }
39
- })
39
+ })
40
40
 
41
41
  const dropDownIcon = () => {
42
42
  return (
@@ -48,12 +48,18 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
48
48
  )
49
49
  }
50
50
 
51
+ useEffect(() => {
52
+ if (!businessMenuList?.loading && businessMenuList?.menus?.length === 1){
53
+ setMenu(businessMenuList?.menus[0])
54
+ }
55
+ }, [businessMenuList?.menus])
56
+
51
57
  return (
52
58
  <>
53
59
  {businessMenuList.loading ? (
54
60
  <Placeholder Animation={Fade}>
55
61
  <View>
56
- <PlaceholderLine height={44}/>
62
+ <PlaceholderLine height={44} />
57
63
  </View>
58
64
  </Placeholder>
59
65
  ) : (
@@ -67,6 +73,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
67
73
  onSelect={(selectedItem, index) => {
68
74
  setMenu(selectedItem)
69
75
  }}
76
+ defaultValue={businessMenuList?.menus?.length === 1 && businessMenuList?.menus[0]}
70
77
  buttonTextAfterSelection={(selectedItem, index) => {
71
78
  return selectedItem.name
72
79
  }}
package/themes/original/src/components/BusinessPreorder/index.tsx CHANGED
@@ -51,7 +51,9 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
51
51
  const [selectDate, setSelectedDate] = useState<any>(null)
52
52
  const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
53
53
  const [isEnabled, setIsEnabled] = useState(false)
54
- const {top} = useSafeAreaInsets()
54
+ const { top } = useSafeAreaInsets()
55
+ const showOrderTime = (selectedPreorderType === 1 && Object.keys(menu)?.length > 0) || selectedPreorderType === 0
56
+ const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
55
57
  const styles = StyleSheet.create({
56
58
  container: {
57
59
  height: windowHeight,
@@ -300,60 +302,62 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
300
302
  />
301
303
  </View>
302
304
  </BusinessInfoWrapper>
303
- <PreorderTypeWrapper>
304
- <OText
305
- size={16}
306
- style={{
307
- fontWeight: '600',
308
- lineHeight: 24,
309
- marginBottom: 12
310
- }}
311
- >
312
- {t('PREORDER_TYPE', 'Preorder type')}
313
- </OText>
314
- <SelectDropdown
315
- defaultValueByIndex={selectedPreorderType}
316
- data={preorderTypeList}
317
- // disabled={orderState.loading}
318
- onSelect={(selectedItem, index) => {
319
- setSelectedPreorderType(index)
320
- }}
321
- buttonTextAfterSelection={(selectedItem, index) => {
322
- return selectedItem.name
323
- }}
324
- rowTextForSelection={(item, index) => {
325
- return item.name
326
- }}
327
- buttonStyle={styles.selectOption}
328
- buttonTextStyle={{
329
- color: theme.colors.disabled,
330
- fontSize: 14,
331
- textAlign: 'left',
332
- marginHorizontal: 0
333
- }}
334
- dropdownStyle={{
335
- borderRadius: 8,
336
- borderColor: theme.colors.lightGray,
337
- marginTop: Platform.OS === 'ios' ? 12 : -top
338
- }}
339
- rowStyle={{
340
- borderBottomColor: theme.colors.backgroundGray100,
341
- backgroundColor: theme.colors.backgroundGray100,
342
- height: 40,
343
- flexDirection: 'column',
344
- alignItems: 'flex-start',
345
- paddingTop: 8,
346
- paddingHorizontal: 14
347
- }}
348
- rowTextStyle={{
349
- color: theme.colors.disabled,
350
- fontSize: 14,
351
- marginHorizontal: 0
352
- }}
353
- renderDropdownIcon={() => dropDownIcon()}
354
- dropdownOverlayColor='transparent'
355
- />
356
- </PreorderTypeWrapper>
305
+ {isPreOrderSetting && (
306
+ <PreorderTypeWrapper>
307
+ <OText
308
+ size={16}
309
+ style={{
310
+ fontWeight: '600',
311
+ lineHeight: 24,
312
+ marginBottom: 12
313
+ }}
314
+ >
315
+ {t('PREORDER_TYPE', 'Preorder type')}
316
+ </OText>
317
+ <SelectDropdown
318
+ defaultValueByIndex={selectedPreorderType}
319
+ data={preorderTypeList}
320
+ // disabled={orderState.loading}
321
+ onSelect={(selectedItem, index) => {
322
+ setSelectedPreorderType(index)
323
+ }}
324
+ buttonTextAfterSelection={(selectedItem, index) => {
325
+ return selectedItem.name
326
+ }}
327
+ rowTextForSelection={(item, index) => {
328
+ return item.name
329
+ }}
330
+ buttonStyle={styles.selectOption}
331
+ buttonTextStyle={{
332
+ color: theme.colors.disabled,
333
+ fontSize: 14,
334
+ textAlign: 'left',
335
+ marginHorizontal: 0
336
+ }}
337
+ dropdownStyle={{
338
+ borderRadius: 8,
339
+ borderColor: theme.colors.lightGray,
340
+ marginTop: Platform.OS === 'ios' ? 12 : -top
341
+ }}
342
+ rowStyle={{
343
+ borderBottomColor: theme.colors.backgroundGray100,
344
+ backgroundColor: theme.colors.backgroundGray100,
345
+ height: 40,
346
+ flexDirection: 'column',
347
+ alignItems: 'flex-start',
348
+ paddingTop: 8,
349
+ paddingHorizontal: 14
350
+ }}
351
+ rowTextStyle={{
352
+ color: theme.colors.disabled,
353
+ fontSize: 14,
354
+ marginHorizontal: 0
355
+ }}
356
+ renderDropdownIcon={() => dropDownIcon()}
357
+ dropdownOverlayColor='transparent'
358
+ />
359
+ </PreorderTypeWrapper>
360
+ )}
357
361
  {selectedPreorderType === 1 && (
358
362
  <MenuWrapper>
359
363
  <OText
@@ -373,78 +377,94 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
373
377
  />
374
378
  </MenuWrapper>
375
379
  )}
376
- <OrderTimeWrapper>
380
+ {isPreOrderSetting && (
381
+ <OrderTimeWrapper>
382
+ <OText
383
+ size={16}
384
+ style={{
385
+ fontWeight: '600',
386
+ lineHeight: 24
387
+ }}
388
+ >
389
+ {t('ORDER_TIME', 'Order time')}
390
+ </OText>
391
+ <View style={{ flex: 1 }}>
392
+ {selectDate && datesWhitelist[0]?.start !== null && (
393
+ <CalendarStrip
394
+ scrollable
395
+ style={styles.calendar}
396
+ calendarHeaderContainerStyle={styles.calendarHeaderContainer}
397
+ calendarHeaderStyle={styles.calendarHeader}
398
+ dateNumberStyle={styles.dateNumber}
399
+ dateNameStyle={styles.dateName}
400
+ iconContainer={{ flex: 0.1 }}
401
+ highlightDateNameStyle={styles.highlightDateName}
402
+ highlightDateNumberStyle={styles.highlightDateNumber}
403
+ dayContainerStyle={{ height: '100%' }}
404
+ highlightDateContainerStyle={{ height: '100%' }}
405
+ calendarHeaderFormat='MMMM, YYYY'
406
+ iconStyle={{ borderWidth: 1 }}
407
+ selectedDate={selectDate}
408
+ datesWhitelist={datesWhitelist}
409
+ disabledDateNameStyle={styles.disabledDateName}
410
+ disabledDateNumberStyle={styles.disabledDateNumber}
411
+ disabledDateOpacity={0.6}
412
+ onDateSelected={(date) => onSelectDate(date)}
413
+ leftSelector={<LeftSelector />}
414
+ rightSelector={<RightSelector />}
415
+ />
416
+ )}
417
+ </View>
418
+ <TimeListWrapper nestedScrollEnabled={true}>
419
+ {(isEnabled && timeList?.length > 0) ? (
420
+ <TimeContentWrapper>
421
+ {timeList.map((time: any, i: number) => (
422
+ <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
423
+ <TimeItem active={timeSelected === time.value}>
424
+ <OText
425
+ size={14}
426
+ color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
427
+ style={{
428
+ lineHeight: 24
429
+ }}
430
+ >{time.text}</OText>
431
+ </TimeItem>
432
+ </TouchableOpacity>
433
+ ))}
434
+ {timeList.length % 3 === 2 && (
435
+ <TimeItem style={{ backgroundColor: 'transparent' }} />
436
+ )}
437
+ </TimeContentWrapper>
438
+ ) : (
439
+ <OText
440
+ size={16}
441
+ style={{
442
+ fontWeight: '600',
443
+ lineHeight: 24,
444
+ marginBottom: 12,
445
+ textAlign: 'center'
446
+ }}
447
+ >
448
+ {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
449
+ </OText>
450
+ )}
451
+ </TimeListWrapper>
452
+ </OrderTimeWrapper>
453
+ )}
454
+ {!isPreOrderSetting && (
377
455
  <OText
378
456
  size={16}
379
457
  style={{
380
458
  fontWeight: '600',
381
- lineHeight: 24
459
+ lineHeight: 24,
460
+ marginTop: 30,
461
+ marginBottom: 12,
462
+ textAlign: 'center'
382
463
  }}
383
- >
384
- {t('ORDER_TIME', 'Order time')}
464
+ >
465
+ {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
385
466
  </OText>
386
- <View style={{ flex: 1 }}>
387
- {selectDate && datesWhitelist[0]?.start !== null && (
388
- <CalendarStrip
389
- scrollable
390
- style={styles.calendar}
391
- calendarHeaderContainerStyle={styles.calendarHeaderContainer}
392
- calendarHeaderStyle={styles.calendarHeader}
393
- dateNumberStyle={styles.dateNumber}
394
- dateNameStyle={styles.dateName}
395
- iconContainer={{ flex: 0.1 }}
396
- highlightDateNameStyle={styles.highlightDateName}
397
- highlightDateNumberStyle={styles.highlightDateNumber}
398
- dayContainerStyle={{ height: '100%' }}
399
- highlightDateContainerStyle={{ height: '100%' }}
400
- calendarHeaderFormat='MMMM, YYYY'
401
- iconStyle={{ borderWidth: 1 }}
402
- selectedDate={selectDate}
403
- datesWhitelist={datesWhitelist}
404
- disabledDateNameStyle={styles.disabledDateName}
405
- disabledDateNumberStyle={styles.disabledDateNumber}
406
- disabledDateOpacity={0.6}
407
- onDateSelected={(date) => onSelectDate(date)}
408
- leftSelector={<LeftSelector />}
409
- rightSelector={<RightSelector />}
410
- />
411
- )}
412
- </View>
413
- <TimeListWrapper nestedScrollEnabled={true}>
414
- {(isEnabled && timeList?.length > 0) ? (
415
- <TimeContentWrapper>
416
- {timeList.map((time: any, i: number) => (
417
- <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
418
- <TimeItem active={timeSelected === time.value}>
419
- <OText
420
- size={14}
421
- color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
422
- style={{
423
- lineHeight: 24
424
- }}
425
- >{time.text}</OText>
426
- </TimeItem>
427
- </TouchableOpacity>
428
- ))}
429
- {timeList.length % 3 === 2 && (
430
- <TimeItem style={{ backgroundColor: 'transparent' }} />
431
- )}
432
- </TimeContentWrapper>
433
- ) : (
434
- <OText
435
- size={16}
436
- style={{
437
- fontWeight: '600',
438
- lineHeight: 24,
439
- marginBottom: 12,
440
- textAlign: 'center'
441
- }}
442
- >
443
- {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
444
- </OText>
445
- )}
446
- </TimeListWrapper>
447
- </OrderTimeWrapper>
467
+ )}
448
468
  <OButton
449
469
  text={t('GO_TO_MENU', 'Go to menu')}
450
470
  textStyle={{ color: 'white' }}
package/themes/original/src/components/BusinessesListing/index.tsx CHANGED
@@ -61,7 +61,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
61
61
  handleChangeSearch,
62
62
  businessId
63
63
  } = props;
64
-
65
64
  const theme = useTheme();
66
65
  const isFocused = useIsFocused();
67
66
  const appState = useRef(AppState.currentState)