ordering-ui-react-native 0.21.99-release → 0.22.0-release

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 (5) hide show
  1. package/package.json +1 -1
  2. package/themes/original/src/components/BusinessPreorder/index.tsx +28 -21
  3. package/themes/original/src/components/MomentOption/TimeListItem.tsx +56 -0
  4. package/themes/original/src/components/MomentOption/index.tsx +66 -54
  5. package/themes/original/src/components/MomentSelector/index.tsx +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.21.99-release",
3
+ "version": "0.22.0-release",
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/BusinessPreorder/index.tsx CHANGED
@@ -43,7 +43,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
43
43
  getActualSchedule,
44
44
  isAsap,
45
45
  cateringPreorder,
46
- preorderLeadTime
46
+ preorderLeadTime,
47
+ preorderMaximumDays
47
48
  } = props
48
49
 
49
50
  const theme = useTheme()
@@ -263,14 +264,23 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
263
264
  if (cateringPreorder) {
264
265
  let _timeLists = []
265
266
  const schedule = business && getActualSchedule()
266
- if (!schedule && cateringPreorder && Object.keys(business)?.length > 0) {
267
+ if (!schedule && business) {
268
+ setTimeList([])
267
269
  return
268
270
  }
271
+
269
272
  _timeLists = hoursList
270
- .filter(hour => ((Object.keys(business || {})?.length === 0) || schedule?.lapses?.some((lapse: any) =>
271
- moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${lapse.open.hour}:${lapse.open.minute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${lapse.close.hour}:${lapse.close.minute}`))) &&
272
- moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
273
- (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
273
+ .filter(hour => {
274
+ return (Object.keys(business || {})?.length === 0 || schedule?.lapses?.some((lapse: any) => {
275
+ const openHour = lapse.open.hour < 10 ? `0${lapse.open.hour}` : lapse.open.hour
276
+ const openMinute = lapse.open.minute < 10 ? `0${lapse.open.minute}` : lapse.open.minute
277
+ const closeHour = lapse.close.hour < 10 ? `0${lapse.close.hour}` : lapse.close.hour
278
+ const closeMinute = lapse.close.minute < 10 ? `0${lapse.close.minute}` : lapse.close.minute
279
+ return moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${openHour}:${openMinute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${closeHour}:${closeMinute}`)
280
+ })) &&
281
+ (moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`)) &&
282
+ (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder)
283
+ })
274
284
  .map(hour => {
275
285
  return {
276
286
  value: hour.startTime,
@@ -298,7 +308,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
298
308
  const _times = getTimes(selectDate, selectedMenu)
299
309
  setTimeList(_times)
300
310
  }
301
- }, [selectDate, menu, business, cateringPreorder, hoursList, dateSelected])
311
+ }, [selectDate, menu, JSON.stringify(datesWhitelist), JSON.stringify(business), cateringPreorder, JSON.stringify(hoursList), dateSelected])
302
312
 
303
313
  useEffect(() => {
304
314
  if (selectedPreorderType === 0 && Object.keys(menu).length > 0) setMenu({})
@@ -314,8 +324,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
314
324
  }, [dateSelected])
315
325
 
316
326
  useEffect(() => {
317
- setLocalMoment(moment, t)
318
- }, [])
327
+ setLocalMoment(moment, t)
328
+ }, [])
319
329
 
320
330
  useFocusEffect(
321
331
  React.useCallback(() => {
@@ -441,22 +451,18 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
441
451
  {selectDate && datesWhitelist[0]?.start !== null && (
442
452
  <CalendarStrip
443
453
  scrollable
444
- style={styles.calendar}
445
- calendarHeaderContainerStyle={styles.calendarHeaderContainer}
446
- calendarHeaderStyle={styles.calendarHeader}
447
- dateNumberStyle={styles.dateNumber}
448
- dateNameStyle={styles.dateName}
449
- iconContainer={{ flex: 0.1 }}
450
- highlightDateNameStyle={styles.highlightDateName}
451
- highlightDateNumberStyle={styles.highlightDateNumber}
452
- dayContainerStyle={{ height: '100%' }}
453
- highlightDateContainerStyle={{ height: '100%' }}
454
454
  calendarHeaderFormat='MMMM, YYYY'
455
455
  iconStyle={{ borderWidth: 1 }}
456
456
  selectedDate={selectDate}
457
457
  datesWhitelist={datesWhitelist}
458
+ highlightDateNameStyle={styles.highlightDateName}
459
+ highlightDateNumberStyle={styles.highlightDateNumber}
460
+ minDate={moment()}
461
+ maxDate={cateringPreorder ? moment().add(preorderMaximumDays, 'days') : undefined}
458
462
  disabledDateNameStyle={styles.disabledDateName}
459
463
  disabledDateNumberStyle={styles.disabledDateNumber}
464
+ dateNumberStyle={styles.dateNumber}
465
+ dateNameStyle={styles.dateName}
460
466
  disabledDateOpacity={0.6}
461
467
  onDateSelected={(date) => onSelectDate(date)}
462
468
  leftSelector={<LeftSelector />}
@@ -565,9 +571,10 @@ export const BusinessPreorder = (props: any) => {
565
571
 
566
572
  const splitCateringValue = (configName: string) =>
567
573
  Object.values(props?.business?.configs || {})
568
- ?.find(config => config?.key === configName)
574
+ ?.find((config : any) => config?.key === configName)
569
575
  ?.value?.split('|')
570
- ?.find(val => val.includes(cateringTypeString || ''))?.split(',')[1]
576
+ ?.find((val : any) => val.includes(cateringTypeString || ''))?.split(',')[1]
577
+
571
578
  const preorderSlotInterval = parseInt(splitCateringValue('preorder_slot_interval'))
572
579
  const preorderLeadTime = parseInt(splitCateringValue('preorder_lead_time'))
573
580
  const preorderTimeRange = parseInt(splitCateringValue('preorder_time_range'))
package/themes/original/src/components/MomentOption/TimeListItem.tsx ADDED
@@ -0,0 +1,56 @@
1
+ import React from 'react'
2
+ import { Pressable } from 'react-native'
3
+ import {
4
+ TimeItem,
5
+ } from './styles'
6
+ import { OIcon, OText } from '../shared'
7
+ import { useTheme } from 'styled-components/native'
8
+
9
+ const timeListItemPropsAreEqual = (prevProps: any, nextProps: any) => {
10
+ return JSON.stringify(prevProps.time) === JSON.stringify(nextProps.time) &&
11
+ JSON.stringify(prevProps.selectedTime) === JSON.stringify(nextProps.selectedTime) &&
12
+ JSON.stringify(prevProps.cateringPreorder) === JSON.stringify(nextProps.cateringPreorder)
13
+ }
14
+ export const TimeListItem = React.memo((props : any) => {
15
+ const {
16
+ time,
17
+ selectedTime,
18
+ handleChangeTimeSelected,
19
+ cateringPreorder
20
+ } = props
21
+ const theme = useTheme()
22
+
23
+ return (
24
+ <Pressable onPress={() => handleChangeTimeSelected(time.value)}>
25
+ <TimeItem
26
+ active={selectedTime === time.value}
27
+ cateringPreorder={cateringPreorder}
28
+ >
29
+ {cateringPreorder && (
30
+ <>
31
+ {selectedTime === time.value ? (
32
+ <OIcon
33
+ src={theme.images.general.option_checked}
34
+ width={18}
35
+ style={{ marginEnd: 24, bottom: 2 }}
36
+ />
37
+ ) : (
38
+ <OIcon
39
+ src={theme.images.general.option_normal}
40
+ width={18}
41
+ style={{ marginEnd: 24, bottom: 2 }}
42
+ />
43
+ )}
44
+ </>
45
+ )}
46
+ <OText
47
+ size={cateringPreorder ? 18 : 16}
48
+ color={selectedTime === time.value ? theme.colors.primary : theme.colors.textNormal}
49
+ style={{
50
+ lineHeight: 24
51
+ }}
52
+ >{time.text} {cateringPreorder && `- ${time.endText}`}</OText>
53
+ </TimeItem>
54
+ </Pressable>
55
+ )
56
+ }, timeListItemPropsAreEqual)
package/themes/original/src/components/MomentOption/index.tsx CHANGED
@@ -30,6 +30,7 @@ import {
30
30
  } from './styles';
31
31
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
32
32
  import { monthsEnum, setLocalMoment } from '../../utils';
33
+ import { TimeListItem } from './TimeListItem';
33
34
 
34
35
  const MomentOptionUI = (props: MomentOptionParams) => {
35
36
  const {
@@ -161,6 +162,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
161
162
  const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
162
163
  const [selectDate, setSelectedDate] = useState<any>(dateSelected)
163
164
  const [timeList, setTimeList] = useState<any>(hoursList)
165
+ const [nextTime, setNextTime] = useState(null)
166
+
164
167
  const goToBack = () => navigation?.canGoBack() && navigation.goBack();
165
168
 
166
169
  const _handleAsap = () => {
@@ -256,7 +259,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
256
259
  setDateWhitelist([{ start: _minDate, end: _maxDate }])
257
260
  }
258
261
  }
259
- }, [JSON.stringify(datesList), preorderMinimumDays, preorderMaximumDays, cateringPreorder])
262
+ }, [JSON.stringify(datesList), preorderMinimumDays, preorderMaximumDays])
260
263
 
261
264
  useEffect(() => {
262
265
  if (dateSelected) {
@@ -278,13 +281,21 @@ const MomentOptionUI = (props: MomentOptionParams) => {
278
281
  let _timeLists = []
279
282
  const schedule = business && getActualSchedule()
280
283
  if (!schedule && business) {
284
+ setTimeList([])
281
285
  return
282
286
  }
283
287
  _timeLists = hoursList
284
- .filter(hour => (!business || schedule?.lapses?.some((lapse: any) =>
285
- moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${lapse.open.hour}:${lapse.open.minute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${lapse.close.hour}:${lapse.close.minute}`))) &&
286
- moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
287
- (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
288
+ .filter(hour => {
289
+ return (Object.keys(business || {})?.length === 0 || schedule?.lapses?.some((lapse: any) => {
290
+ const openHour = lapse.open.hour < 10 ? `0${lapse.open.hour}` : lapse.open.hour
291
+ const openMinute = lapse.open.minute < 10 ? `0${lapse.open.minute}` : lapse.open.minute
292
+ const closeHour = lapse.close.hour < 10 ? `0${lapse.close.hour}` : lapse.close.hour
293
+ const closeMinute = lapse.close.minute < 10 ? `0${lapse.close.minute}` : lapse.close.minute
294
+ return moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${openHour}:${openMinute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${closeHour}:${closeMinute}`)
295
+ })) &&
296
+ (moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`)) &&
297
+ (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder)
298
+ })
288
299
  .map(hour => {
289
300
  return {
290
301
  value: hour.startTime,
@@ -321,12 +332,29 @@ const MomentOptionUI = (props: MomentOptionParams) => {
321
332
  }
322
333
  }))
323
334
  }
324
- }, [dateSelected, JSON.stringify(hoursList), JSON.stringify(datesWhitelist), cateringPreorder, JSON.stringify(business)])
335
+ }, [dateSelected, hoursList?.length, JSON.stringify(datesWhitelist), JSON.stringify(business)])
325
336
 
326
337
  useEffect(() => {
327
338
  setLocalMoment(moment, t)
328
339
  }, [])
329
340
 
341
+ useEffect(() => {
342
+ if (preorderMinimumDays === 0 && preorderLeadTime === 0) return
343
+ const isToday = dateSelected === moment().format('YYYY-MM-DD')
344
+ if (isCart && isToday && !orderState?.loading && timeList?.length > 0) {
345
+ setNextTime(timeList?.[0] ?? null)
346
+ }
347
+ }, [timeList?.length])
348
+
349
+ useEffect(() => {
350
+ if (nextTime?.value && timeList?.length > 0 && isCart && !orderState?.loading && !(preorderMinimumDays === 0 && preorderLeadTime === 0)) {
351
+ const notime = timeList?.filter((_: any, i: number) => i !== 0)?.find?.((time: any) => time?.value === timeSelected)
352
+ if (!notime) {
353
+ handleChangeTime(nextTime?.value)
354
+ }
355
+ }
356
+ }, [nextTime?.value])
357
+
330
358
  return (
331
359
  <>
332
360
  <Container
@@ -399,26 +427,20 @@ const MomentOptionUI = (props: MomentOptionParams) => {
399
427
  {selectDate && datesWhitelist[0]?.start !== null && (
400
428
  <CalendarStrip
401
429
  scrollable
402
- style={styles.calendar}
403
- calendarHeaderContainerStyle={styles.calendarHeaderContainer}
404
- calendarHeaderStyle={styles.calendarHeader}
405
- dateNumberStyle={styles.dateNumber}
406
- dateNameStyle={styles.dateName}
407
- iconContainer={{ flex: 0.1 }}
408
- highlightDateNameStyle={styles.highlightDateName}
409
- highlightDateNumberStyle={styles.highlightDateNumber}
410
- dayContainerStyle={{ height: '100%' }}
411
- highlightDateContainerStyle={{ height: '100%' }}
412
430
  calendarHeaderFormat='MMMM, YYYY'
413
431
  iconStyle={{ borderWidth: 1 }}
414
432
  selectedDate={dateSelected}
415
433
  datesWhitelist={datesWhitelist}
434
+ highlightDateNumberStyle={styles.highlightDateNumber}
435
+ highlightDateNameStyle={styles.highlightDateName}
416
436
  minDate={moment()}
417
437
  maxDate={cateringPreorder ? moment().add(preorderMaximumDays, 'days') : undefined}
418
438
  disabledDateNameStyle={styles.disabledDateName}
419
439
  disabledDateNumberStyle={styles.disabledDateNumber}
420
440
  disabledDateOpacity={0.6}
421
- onDateSelected={(date) => onSelectDate(date)}
441
+ dateNumberStyle={styles.dateNumber}
442
+ dateNameStyle={styles.dateName}
443
+ onDateSelected={(date: any) => onSelectDate(date)}
422
444
  leftSelector={<LeftSelector />}
423
445
  rightSelector={<RightSelector />}
424
446
  />
@@ -426,44 +448,34 @@ const MomentOptionUI = (props: MomentOptionParams) => {
426
448
  </View>
427
449
  )}
428
450
  <TimeListWrapper nestedScrollEnabled={true} cateringPreorder={cateringPreorder}>
429
- <TimeContentWrapper>
430
- {timeList.map((time: any, i: number) => (
431
- <Pressable key={i} onPress={() => handleChangeTimeSelected(time.value)}>
432
- <TimeItem
433
- active={selectedTime === time.value}
451
+ {timeList?.length > 0 ? (
452
+ <TimeContentWrapper>
453
+ {timeList.map((time: any, i: number) => (
454
+ <TimeListItem
455
+ key={i}
456
+ time={time}
457
+ selectedTime={selectedTime}
458
+ handleChangeTimeSelected={handleChangeTimeSelected}
434
459
  cateringPreorder={cateringPreorder}
435
- >
436
- {cateringPreorder && (
437
- <>
438
- {selectedTime === time.value ? (
439
- <OIcon
440
- src={theme.images.general.option_checked}
441
- width={18}
442
- style={{ marginEnd: 24, bottom: 2 }}
443
- />
444
- ) : (
445
- <OIcon
446
- src={theme.images.general.option_normal}
447
- width={18}
448
- style={{ marginEnd: 24, bottom: 2 }}
449
- />
450
- )}
451
- </>
452
- )}
453
- <OText
454
- size={cateringPreorder ? 18 : 16}
455
- color={selectedTime === time.value ? theme.colors.primary : theme.colors.textNormal}
456
- style={{
457
- lineHeight: 24
458
- }}
459
- >{time.text} {cateringPreorder && `- ${time.endText}`}</OText>
460
- </TimeItem>
461
- </Pressable>
462
- ))}
463
- {timeList.length % 3 === 2 && (
464
- <TimeItem style={{ backgroundColor: 'transparent' }} />
465
- )}
466
- </TimeContentWrapper>
460
+ />
461
+ ))}
462
+ {timeList.length % 3 === 2 && (
463
+ <TimeItem style={{ backgroundColor: 'transparent' }} />
464
+ )}
465
+ </TimeContentWrapper>
466
+ ) : (
467
+ <OText
468
+ size={16}
469
+ style={{
470
+ fontWeight: '600',
471
+ lineHeight: 24,
472
+ marginBottom: 12,
473
+ textAlign: 'center'
474
+ }}
475
+ >
476
+ {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
477
+ </OText>
478
+ )}
467
479
  </TimeListWrapper>
468
480
  </OrderTimeWrapper>
469
481
  )}
package/themes/original/src/components/MomentSelector/index.tsx CHANGED
@@ -194,4 +194,4 @@ export const MomentSelector = (props: any) => {
194
194
  maxDate: currentDate
195
195
  }
196
196
  return <MomentOptionController {...businessPreorderProps} />
197
- }
197
+ }