ordering-ui-react-native 0.15.36 → 0.15.39

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 (7) hide show
  1. package/package.json +1 -1
  2. package/themes/original/index.tsx +11 -1
  3. package/themes/original/src/components/BusinessController/index.tsx +5 -3
  4. package/themes/original/src/components/BusinessListingSearch/index.tsx +4 -0
  5. package/themes/original/src/components/BusinessMenuList/index.tsx +11 -4
  6. package/themes/original/src/components/BusinessPreorder/index.tsx +141 -121
  7. package/themes/original/src/components/ProductForm/index.tsx +16 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.15.36",
3
+ "version": "0.15.39",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/original/index.tsx CHANGED
@@ -7,11 +7,15 @@ import { SignupForm } from './src/components/SignupForm';
7
7
  import { ActiveOrders } from './src/components/ActiveOrders';
8
8
  import { AddressList } from './src/components/AddressList';
9
9
  import { AppleLogin } from './src/components/AppleLogin';
10
+ import { BusinessBasicInformation } from './src/components/BusinessBasicInformation';
11
+ import { BusinessProductsCategories } from './src/components/BusinessProductsCategories';
12
+ import { BusinessProductsList } from './src/components/BusinessProductsList';
10
13
  import { BusinessesListing } from './src/components/BusinessesListing';
11
14
  import { BusinessProductsListing } from './src/components/BusinessProductsListing';
12
15
  import { CartContent } from './src/components/CartContent';
13
16
  import { BusinessCart } from './src/components/BusinessCart';
14
17
  import { Checkout } from './src/components/Checkout';
18
+ import { FloatingButton } from './src/components/FloatingButton';
15
19
  import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
16
20
  import { MomentOption } from './src/components/MomentOption';
17
21
  import { OrdersOption } from './src/components/OrdersOption';
@@ -33,6 +37,7 @@ import { HelpOrder } from './src/components/HelpOrder';
33
37
  import { NetworkError } from './src/components/NetworkError';
34
38
  import { NotFoundSource } from './src/components/NotFoundSource';
35
39
  import { OrderTypeSelector } from './src/components/OrderTypeSelector';
40
+ import { SearchBar } from './src/components/SearchBar';
36
41
  import { Wallets } from './src/components/Wallets';
37
42
  import { PaymentOptionWallet } from './src/components/PaymentOptionWallet';
38
43
  import { ProductForm } from './src/components/ProductForm';
@@ -94,7 +99,7 @@ export {
94
99
  BusinessMenuList,
95
100
  UserProfile,
96
101
  MessageListing,
97
- Messages,
102
+ Messages,
98
103
  Help,
99
104
  HelpAccountAndPayment,
100
105
  HelpGuide,
@@ -108,6 +113,11 @@ export {
108
113
  UpsellingProducts,
109
114
  UserVerification,
110
115
  BusinessListingSearch,
116
+ BusinessBasicInformation,
117
+ BusinessProductsCategories,
118
+ BusinessProductsList,
119
+ FloatingButton,
120
+ SearchBar,
111
121
 
112
122
  // OComponents
113
123
  Toast,
package/themes/original/src/components/BusinessController/index.tsx CHANGED
@@ -192,9 +192,11 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
192
192
  </View>
193
193
  ) : (
194
194
  <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>
195
+ {orderState?.options?.type === 1 && (
196
+ <OText size={10} color={theme.colors.textSecondary}>
197
+ {`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
198
+ </OText>
199
+ )}
198
200
  <OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
199
201
  orderState?.options?.type === 1
200
202
  ? (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/ProductForm/index.tsx CHANGED
@@ -46,7 +46,6 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
46
46
  import { NotFoundSource } from '../NotFoundSource';
47
47
  import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
48
48
  import { useState } from 'react';
49
-
50
49
  const windowHeight = Dimensions.get('window').height;
51
50
  const windowWidth = Dimensions.get('window').width;
52
51
 
@@ -291,15 +290,23 @@ export const ProductOptionsUI = (props: any) => {
291
290
  if (img?.video) {
292
291
  const keys = img?.video.split('/')
293
292
  let _videoId = keys[keys.length - 1]
293
+
294
294
  if (_videoId.includes('watch')) {
295
- const __url = _videoId.split('=')[1]
296
- _videoId = __url
295
+ const __url = _videoId.split('=')[1]
296
+ _videoId = __url
297
+ } else if (_videoId.includes('?')) {
298
+ const __url = _videoId.split('?')[0]
299
+ _videoId = __url
300
+ }
301
+
302
+ if (_videoId.search(/&/i) >= 0) {
303
+ _videoId = _videoId.split('&')[0]
304
+ } else if (_videoId.search(/\?/i) >= 0) {
305
+ _videoId = _videoId.split('?')[0]
297
306
  }
298
- if (_videoId.includes('?')) {
299
- const __url = _videoId.split('?')[0]
300
- _videoId = __url
307
+ if ((_videoId.length === 11)) {
308
+ videoList.push(_videoId)
301
309
  }
302
- videoList.push(_videoId)
303
310
  }
304
311
  }
305
312
  }
@@ -338,9 +345,9 @@ export const ProductOptionsUI = (props: any) => {
338
345
  </OText>
339
346
  </TouchableOpacity>
340
347
  )}
341
- {options.map(({ id, name, respect_to }: any) => (
348
+ {options.map(({ id, name, respect_to, suboptions }: any) => (
342
349
  <React.Fragment key={`cont_key_${id}`}>
343
- {respect_to == null && (
350
+ {respect_to == null && suboptions?.length > 0 && (
344
351
  <TouchableOpacity
345
352
  key={`eopt_key_${id}`}
346
353
  onPress={() => setSelectedOpt(id)}