ordering-ui-react-native 0.12.15 → 0.12.16

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 (13) hide show
  1. package/package.json +1 -1
  2. package/src/components/AddressList/index.tsx +3 -1
  3. package/src/config.json +2 -2
  4. package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx +1 -1
  5. package/themes/business/src/components/OrdersOption/index.tsx +108 -69
  6. package/themes/business/src/components/PreviousOrders/index.tsx +94 -69
  7. package/themes/business/src/components/PreviousOrders/styles.tsx +7 -0
  8. package/themes/business/src/components/ProductItemAccordion/index.tsx +27 -25
  9. package/themes/business/src/components/shared/OIcon.tsx +2 -0
  10. package/themes/kiosk/src/components/LanguageSelector/index.tsx +78 -58
  11. package/themes/kiosk/src/components/OrderDetails/index.tsx +3 -1
  12. package/themes/kiosk/src/components/ProductForm/index.tsx +123 -123
  13. package/themes/original/src/components/OrderProgress/index.tsx +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.12.15",
3
+ "version": "0.12.16",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/src/components/AddressList/index.tsx CHANGED
@@ -57,7 +57,7 @@ const AddressListUI = (props: AddressListParams) => {
57
57
 
58
58
  const [orderState] = useOrder()
59
59
  const [, t] = useLanguage()
60
- const [{ auth }] = useSession()
60
+ const [{ auth }, { logout }] = useSession()
61
61
  const [alert, setAlert] = useState<any>({ show: false })
62
62
 
63
63
  const onNavigatorRedirect = () => {
@@ -261,6 +261,8 @@ const AddressListUI = (props: AddressListParams) => {
261
261
  addressList.error[0] ||
262
262
  t('NETWORK_ERROR', 'Network Error, please reload the app')
263
263
  }
264
+ btnTitle={t('LOGIN', 'Login')}
265
+ onClickButton={() => logout()}
264
266
  />
265
267
  )
266
268
  )}
package/src/config.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "app_id": "react-native-app",
3
3
  "notification_app": "orderingapp",
4
4
  "app_name": "Ordering",
5
- "project": "reactdemo",
5
+ "project": "jorgev4",
6
6
  "api": {
7
- "url": "https://apiv4.ordering.co",
7
+ "url": "https://apiv4-staging.ordering.co",
8
8
  "language": "en",
9
9
  "version": "v400"
10
10
  },
package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx CHANGED
@@ -239,7 +239,7 @@ export const OrderContentComponent = (props: OrderContent) => {
239
239
  {t('ORDER_DETAILS', 'Order Details')}
240
240
  </OText>
241
241
 
242
- {order?.products?.length &&
242
+ {order?.products?.length > 0 &&
243
243
  order?.products.map((product: any, i: number) => (
244
244
  <ProductItemAccordion
245
245
  key={product?.id || i}
package/themes/business/src/components/OrdersOption/index.tsx CHANGED
@@ -69,7 +69,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
69
69
  filtered,
70
70
  onFiltered,
71
71
  handleClickOrder,
72
- isBusinessApp
72
+ handleClickLogisticOrder,
73
+ isBusinessApp,
74
+ logisticOrders,
75
+ loadLogisticOrders
73
76
  } = props;
74
77
 
75
78
  const defaultSearchList = {
@@ -124,6 +127,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
124
127
  zIndex: 100,
125
128
  borderColor: theme.colors.textGray,
126
129
  },
130
+ icon: {
131
+ paddingBottom: 10,
132
+ zIndex: 100,
133
+ marginBottom: 2,
134
+ },
127
135
  tagsContainer: {
128
136
  marginBottom: 20,
129
137
  },
@@ -171,7 +179,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
171
179
  const currentOrdersGroup = ordersGroup[currentTabSelected]
172
180
 
173
181
  const isEqual = (array1: any, array2: any) => {
174
- return array1.every((item: any) => array2.includes(item)) && array2.every((item: any) => array1.includes(item))
182
+ return array1?.every((item: any) => array2.includes(item)) && array2?.every((item: any) => array1.includes(item))
175
183
  }
176
184
 
177
185
  const handleLoadMore = () => {
@@ -337,6 +345,22 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
337
345
  nestedScrollEnabled={true}
338
346
  >
339
347
  <TabsContainer width={WIDTH_SCREEN}>
348
+ <Pressable
349
+ style={styles.pressable}
350
+ onPress={() => setCurrentTabSelected('logisticOrders')}>
351
+ <OIcon
352
+ src={theme.images?.general?.chronometer}
353
+ borderBottomWidth={currentTabSelected === 'logisticOrders' ? 1 : 0}
354
+ width={currentTabSelected === 'logisticOrders' ? 26 : 24}
355
+ height={currentTabSelected === 'logisticOrders' ? 26 : 24}
356
+ color={
357
+ currentTabSelected === 'logisticOrders'
358
+ ? theme.colors.textGray
359
+ : theme.colors.unselectText
360
+ }
361
+ style={styles.icon}
362
+ />
363
+ </Pressable>
340
364
  {tabs.map((tab: any) => (
341
365
  <Pressable
342
366
  key={tab.key}
@@ -363,71 +387,73 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
363
387
  </ScrollView>
364
388
  </FiltersTab>
365
389
  <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 250 }}>
366
- <View
367
- style={{
368
- display: 'flex',
369
- flexDirection: 'row',
370
- alignContent: 'center',
371
- alignItems: 'center',
372
- }}
373
- >
374
- {tagsList && tagsList?.length > 1 && (
375
- <View style={{ marginBottom: 20 }}>
376
- <Tag
377
- onPress={() => handleAllSelect()}
378
- isSelected={
379
- isEqual(currentOrdersGroup.currentFilter, tagsList)
380
- ? theme.colors.primary
381
- : theme.colors.tabBar
382
- }>
383
- <OText
384
- style={styles.tag}
385
- color={
390
+ {currentTabSelected !== 'logisticOrders' && (
391
+ <View
392
+ style={{
393
+ display: 'flex',
394
+ flexDirection: 'row',
395
+ alignContent: 'center',
396
+ alignItems: 'center',
397
+ }}
398
+ >
399
+ {tagsList && tagsList?.length > 1 && (
400
+ <View style={{ marginBottom: 20 }}>
401
+ <Tag
402
+ onPress={() => handleAllSelect()}
403
+ isSelected={
386
404
  isEqual(currentOrdersGroup.currentFilter, tagsList)
387
- ? theme.colors.white
388
- : theme.colors.black
405
+ ? theme.colors.primary
406
+ : theme.colors.tabBar
389
407
  }>
390
- {t('All', 'All')}
391
- </OText>
392
- </Tag>
393
- </View>
394
- )}
395
- <ScrollView
396
- ref={scrollRef}
397
- showsVerticalScrollIndicator={false}
398
- showsHorizontalScrollIndicator={false}
399
- contentContainerStyle={styles.tagsContainer}
400
- horizontal
401
- >
402
- {tagsList && tagsList.map((key: number) => (
403
- <Tag
404
- key={key}
405
- onPress={() => !currentOrdersGroup.loading && handleTagSelected(key)}
406
- isSelected={
407
- currentOrdersGroup.currentFilter.includes(key) &&
408
- !isEqual(currentOrdersGroup.currentFilter, tagsList)
409
- ? theme.colors.primary
410
- : theme.colors.tabBar
411
- }>
412
- <OText
413
- style={styles.tag}
414
- color={
408
+ <OText
409
+ style={styles.tag}
410
+ color={
411
+ isEqual(currentOrdersGroup.currentFilter, tagsList)
412
+ ? theme.colors.white
413
+ : theme.colors.black
414
+ }>
415
+ {t('All', 'All')}
416
+ </OText>
417
+ </Tag>
418
+ </View>
419
+ )}
420
+ <ScrollView
421
+ ref={scrollRef}
422
+ showsVerticalScrollIndicator={false}
423
+ showsHorizontalScrollIndicator={false}
424
+ contentContainerStyle={styles.tagsContainer}
425
+ horizontal
426
+ >
427
+ {tagsList && tagsList.map((key: number) => (
428
+ <Tag
429
+ key={key}
430
+ onPress={() => !currentOrdersGroup.loading && handleTagSelected(key)}
431
+ isSelected={
415
432
  currentOrdersGroup.currentFilter.includes(key) &&
416
433
  !isEqual(currentOrdersGroup.currentFilter, tagsList)
417
- ? theme.colors.white
418
- : theme.colors.black
434
+ ? theme.colors.primary
435
+ : theme.colors.tabBar
419
436
  }>
420
- {getOrderStatus(key)}
421
- {
422
- currentOrdersGroup.currentFilter.includes(key) &&
423
- !isEqual(currentOrdersGroup.currentFilter, tagsList) &&
424
- ' X'
425
- }
426
- </OText>
427
- </Tag>
428
- ))}
429
- </ScrollView>
430
- </View>
437
+ <OText
438
+ style={styles.tag}
439
+ color={
440
+ currentOrdersGroup.currentFilter.includes(key) &&
441
+ !isEqual(currentOrdersGroup.currentFilter, tagsList)
442
+ ? theme.colors.white
443
+ : theme.colors.black
444
+ }>
445
+ {getOrderStatus(key)}
446
+ {
447
+ currentOrdersGroup.currentFilter.includes(key) &&
448
+ !isEqual(currentOrdersGroup.currentFilter, tagsList) &&
449
+ ' X'
450
+ }
451
+ </OText>
452
+ </Tag>
453
+ ))}
454
+ </ScrollView>
455
+ </View>
456
+ )}
431
457
 
432
458
  <ScrollView
433
459
  ref={scrollListRef}
@@ -437,12 +463,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
437
463
  refreshControl={
438
464
  <RefreshControl
439
465
  refreshing={refreshing}
440
- onRefresh={() => loadOrders && loadOrders({ newFetch: true })}
466
+ onRefresh={() => {currentTabSelected === 'logisticOrders' ? loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true })}}
441
467
  />
442
468
  }
443
469
  >
444
- {!currentOrdersGroup.error?.length &&
445
- currentOrdersGroup.orders?.length > 0 &&
470
+ {!currentOrdersGroup?.error?.length &&
471
+ currentOrdersGroup?.orders?.length > 0 &&
472
+ currentTabSelected !== 'logisticOrders' &&
446
473
  (
447
474
  <PreviousOrders
448
475
  orders={currentOrdersGroup.orders}
@@ -451,9 +478,21 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
451
478
  handleClickOrder={handleClickOrder}
452
479
  />
453
480
  )}
454
-
455
- {(currentOrdersGroup?.loading ||
456
- currentOrdersGroup?.pagination?.total === null) &&
481
+ {!logisticOrders?.error?.length &&
482
+ logisticOrders?.orders?.length > 0 &&
483
+ currentTabSelected === 'logisticOrders' && (
484
+ <PreviousOrders
485
+ orders={logisticOrders.orders}
486
+ onNavigationRedirect={onNavigationRedirect}
487
+ getOrderStatus={getOrderStatus}
488
+ handleClickOrder={handleClickLogisticOrder}
489
+ isLogisticOrder
490
+ />
491
+ )
492
+ }
493
+ {((currentOrdersGroup?.loading ||
494
+ currentOrdersGroup?.pagination?.total === null) ||
495
+ (logisticOrders?.loading)) &&
457
496
  (
458
497
  <>
459
498
  <View>
@@ -605,7 +644,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
605
644
 
606
645
  export const OrdersOption = (props: OrdersOptionParams) => {
607
646
  const [, t] = useLanguage();
608
-
647
+ const theme = useTheme()
609
648
  const ordersProps = {
610
649
  ...props,
611
650
  UIComponent: OrdersOptionUI,
package/themes/business/src/components/PreviousOrders/index.tsx CHANGED
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
- import { StyleSheet, TouchableOpacity } from 'react-native';
2
+ import { StyleSheet, TouchableOpacity, View } from 'react-native';
3
3
  import { useTheme } from 'styled-components/native';
4
4
  import { useLanguage, useUtils } from 'ordering-components/native';
5
- import { OIcon, OText } from '../shared';
6
- import { Card, Logo, Information, MyOrderOptions, NotificationIcon } from './styles';
5
+ import { OButton, OIcon, OText } from '../shared';
6
+ import { Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder } from './styles';
7
7
  import EntypoIcon from 'react-native-vector-icons/Entypo'
8
8
 
9
9
  export const PreviousOrders = (props: any) => {
10
- const { orders, onNavigationRedirect, getOrderStatus, handleClickOrder } = props;
10
+ const { orders, onNavigationRedirect, getOrderStatus, handleClickOrder, isLogisticOrder } = props;
11
11
  const [, t] = useLanguage();
12
12
  const [{ parseDate, optimizeImage }] = useUtils();
13
13
  const theme = useTheme();
@@ -22,7 +22,7 @@ export const PreviousOrders = (props: any) => {
22
22
  cardButton: {
23
23
  flex: 1,
24
24
  minHeight: 64,
25
- marginBottom: 30,
25
+ marginBottom: isLogisticOrder ? 0 : 30,
26
26
  marginLeft: 3,
27
27
  },
28
28
  icon: {
@@ -79,73 +79,98 @@ export const PreviousOrders = (props: any) => {
79
79
  orders
80
80
  .filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
81
81
  .map((order: any) =>
82
- (
83
- <React.Fragment key={order.id}>
84
- <TouchableOpacity
85
- onPress={() => handlePressOrder(order)}
86
- style={styles.cardButton}
87
- activeOpacity={1}
88
- >
89
- <Card key={order.id}>
90
- {!!order.business?.logo && (
91
- <Logo style={styles.logo}>
92
- <OIcon
93
- url={optimizeImage(
94
- order.business?.logo,
95
- 'h_300,c_limit',
82
+ (
83
+ <React.Fragment key={order.id}>
84
+ <TouchableOpacity
85
+ onPress={() => handlePressOrder(order)}
86
+ style={styles.cardButton}
87
+ activeOpacity={1}
88
+ >
89
+ <Card key={order.id}>
90
+ {!!order.business?.logo && (
91
+ <Logo style={styles.logo}>
92
+ <OIcon
93
+ url={optimizeImage(
94
+ order.business?.logo,
95
+ 'h_300,c_limit',
96
+ )}
97
+ style={styles.icon}
98
+ />
99
+ </Logo>
100
+ )}
101
+ <Information>
102
+ <OText numberOfLines={1} style={styles.title}>
103
+ {order.business?.name}
104
+ </OText>
105
+ {order?.showNotification && (
106
+ <NotificationIcon>
107
+ <EntypoIcon
108
+ name="dot-single"
109
+ size={32}
110
+ color={theme.colors.primary}
111
+ />
112
+ </NotificationIcon>
96
113
  )}
97
- style={styles.icon}
114
+ <OText
115
+ style={styles.date}
116
+ numberOfLines={1}
117
+ adjustsFontSizeToFit
118
+ size={20}>
119
+ {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
120
+ {order?.delivery_datetime_utc
121
+ ? parseDate(order?.delivery_datetime_utc)
122
+ : parseDate(order?.delivery_datetime, { utc: false })}
123
+ </OText>
124
+ {!isLogisticOrder && (
125
+ <MyOrderOptions>
126
+ <OText
127
+ style={styles.orderType}
128
+ mRight={5}
129
+ numberOfLines={1}
130
+ adjustsFontSizeToFit
131
+ >
132
+ {order.delivery_type === 1
133
+ ? t('DELIVERY', 'Delivery')
134
+ : order.delivery_type === 2
135
+ ? t('PICKUP', 'Pickup')
136
+ : order.delivery_type === 3
137
+ ? t('EAT_IN', 'Eat in')
138
+ : order.delivery_type === 4
139
+ ? t('CURBSIDE', 'Curbside')
140
+ : t('DRIVER_THRU', 'Driver thru')}
141
+ {` · ${getOrderStatus(order.status)}`}
142
+ </OText>
143
+ </MyOrderOptions>
144
+ )}
145
+ </Information>
146
+ </Card>
147
+ </TouchableOpacity>
148
+ {isLogisticOrder && (
149
+ <AcceptOrRejectOrder>
150
+ <OButton
151
+ text={t('REJECT', 'Reject')}
152
+ onClick={() => console.log('reject')}
153
+ bgColor={theme.colors.danger}
154
+ borderColor={theme.colors.danger}
155
+ imgRightSrc={null}
156
+ style={{ borderRadius: 7 }}
157
+ parentStyle={{width: '45%'}}
158
+ textStyle={{ color: theme.colors.dangerText }}
159
+ />
160
+ <OButton
161
+ text={t('ACCEPT', 'Accept')}
162
+ onClick={() => console.log('Accept')}
163
+ bgColor={theme.colors.successOrder}
164
+ borderColor={theme.colors.successOrder}
165
+ imgRightSrc={null}
166
+ style={{ borderRadius: 7 }}
167
+ parentStyle={{width: '45%'}}
168
+ textStyle={{ color: theme.colors.successText }}
98
169
  />
99
- </Logo>
170
+ </AcceptOrRejectOrder>
100
171
  )}
101
- <Information>
102
- <OText numberOfLines={1} style={styles.title}>
103
- {order.business?.name}
104
- </OText>
105
- {order?.showNotification && (
106
- <NotificationIcon>
107
- <EntypoIcon
108
- name="dot-single"
109
- size={32}
110
- color={theme.colors.primary}
111
- />
112
- </NotificationIcon>
113
- )}
114
- <OText
115
- style={styles.date}
116
- numberOfLines={1}
117
- adjustsFontSizeToFit
118
- size={20}>
119
- {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
120
- {order?.delivery_datetime_utc
121
- ? parseDate(order?.delivery_datetime_utc)
122
- : parseDate(order?.delivery_datetime, { utc: false })}
123
- </OText>
124
-
125
- <MyOrderOptions>
126
- <OText
127
- style={styles.orderType}
128
- mRight={5}
129
- numberOfLines={1}
130
- adjustsFontSizeToFit
131
- >
132
- {order.delivery_type === 1
133
- ? t('DELIVERY', 'Delivery')
134
- : order.delivery_type === 2
135
- ? t('PICKUP', 'Pickup')
136
- : order.delivery_type === 3
137
- ? t('EAT_IN', 'Eat in')
138
- : order.delivery_type === 4
139
- ? t('CURBSIDE', 'Curbside')
140
- : t('DRIVER_THRU', 'Driver thru')}
141
- {` · ${getOrderStatus(order.status)}`}
142
- </OText>
143
- </MyOrderOptions>
144
- </Information>
145
- </Card>
146
- </TouchableOpacity>
147
- </React.Fragment>
148
- ))}
172
+ </React.Fragment>
173
+ ))}
149
174
  </>
150
175
  );
151
176
  };
package/themes/business/src/components/PreviousOrders/styles.tsx CHANGED
@@ -29,3 +29,10 @@ export const NotificationIcon = styled.View`
29
29
  position: absolute;
30
30
  left: 90%;
31
31
  `
32
+
33
+ export const AcceptOrRejectOrder = styled.View`
34
+ flex-direction: row;
35
+ justify-content: space-between;
36
+ flex: 1;
37
+ margin-bottom: 30px;
38
+ `
package/themes/business/src/components/ProductItemAccordion/index.tsx CHANGED
@@ -49,7 +49,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
49
49
  option.suboptions = Object.values(option.suboptions ?? {});
50
50
  return option;
51
51
  });
52
-
52
+ console.log(productInfo, ingredients, options)
53
53
  return {
54
54
  ...productInfo,
55
55
  ingredients,
@@ -60,11 +60,13 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
60
60
  return product;
61
61
  };
62
62
 
63
+ const parseOptions = typeof productInfo().options === 'string' ? JSON.parse(productInfo().options) : productInfo().options
64
+
63
65
  const getProductPrice = (product: any) => {
64
66
  let subOptionPrice = 0;
65
- if (product.options.length > 0) {
66
- for (const option of product.options) {
67
- for (const suboption of option.suboptions) {
67
+ if (product?.options?.length > 0 && product?.options?.suboptions?.length > 0) {
68
+ for (const option of product?.options) {
69
+ for (const suboption of option?.suboptions) {
68
70
  subOptionPrice += suboption.quantity * suboption.price;
69
71
  }
70
72
  }
@@ -98,8 +100,8 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
98
100
 
99
101
  useEffect(() => {
100
102
  if (
101
- productInfo().ingredients.length > 0 ||
102
- productInfo().options.length > 0 ||
103
+ productInfo?.()?.ingredients?.length > 0 ||
104
+ productInfo?.()?.options?.length > 0 ||
103
105
  product.comment !== ''
104
106
  ) {
105
107
  setActiveState(true);
@@ -150,12 +152,12 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
150
152
  </OText>
151
153
 
152
154
  {(
153
- productInfo().ingredients.length > 0 ||
154
- productInfo().options.length > 0 ||
155
+ productInfo?.()?.ingredients?.length > 0 ||
156
+ productInfo?.()?.options?.length > 0 ||
155
157
  product.comment
156
158
  ) && !isClickableEvent && (
157
- <MaterialCommunityIcon name="chevron-down" size={12} />
158
- )}
159
+ <MaterialCommunityIcon name="chevron-down" size={12} />
160
+ )}
159
161
  </View>
160
162
 
161
163
  <View
@@ -201,20 +203,20 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
201
203
  product?.valid_menu &&
202
204
  !product?.valid_quantity) ||
203
205
  (!product?.valid_menu && isCartProduct && !isCartPending)) && (
204
- <OText
205
- size={24}
206
- color={theme.colors.red}
207
- style={{ textAlign: 'center', marginTop: 10 }}>
208
- {t('NOT_AVAILABLE', 'Not available')}
209
- </OText>
210
- )}
206
+ <OText
207
+ size={24}
208
+ color={theme.colors.red}
209
+ style={{ textAlign: 'center', marginTop: 10 }}>
210
+ {t('NOT_AVAILABLE', 'Not available')}
211
+ </OText>
212
+ )}
211
213
  </Accordion>
212
214
 
213
215
  <View style={{ display: isActive ? 'flex' : 'none' }}>
214
216
  <Animated.View>
215
217
  <AccordionContent>
216
- {productInfo().ingredients.length > 0 &&
217
- productInfo().ingredients.some(
218
+ {productInfo?.()?.ingredients?.length > 0 &&
219
+ productInfo?.()?.ingredients?.some(
218
220
  (ingredient: any) => !ingredient.selected,
219
221
  ) && (
220
222
  <ProductOptionsList>
@@ -225,7 +227,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
225
227
  {t('INGREDIENTS', 'Ingredients')}:
226
228
  </OText>
227
229
 
228
- {productInfo().ingredients.map(
230
+ {productInfo?.()?.ingredients?.map(
229
231
  (ingredient: any) =>
230
232
  !ingredient.selected && (
231
233
  <OText
@@ -240,9 +242,9 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
240
242
  </ProductOptionsList>
241
243
  )}
242
244
 
243
- {productInfo().options.length > 0 && (
245
+ {parseOptions?.length > 0 && (
244
246
  <ProductOptionsList>
245
- {productInfo().options.map((option: any, i: number) => (
247
+ {parseOptions?.map((option: any, i: number) => (
246
248
  <ProductOption key={option.id + i}>
247
249
  <OText
248
250
  size={12}
@@ -263,9 +265,9 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
263
265
  position:
264
266
  suboption.position !== 'whole'
265
267
  ? t(
266
- suboption.position.toUpperCase(),
267
- suboption.position,
268
- )
268
+ suboption.position.toUpperCase(),
269
+ suboption.position,
270
+ )
269
271
  : '',
270
272
  price: parsePrice(suboption.price),
271
273
  })}
package/themes/business/src/components/shared/OIcon.tsx CHANGED
@@ -20,6 +20,7 @@ interface Props {
20
20
  cover?: boolean;
21
21
  children?: any;
22
22
  borderRadius?: number;
23
+ borderBottomWidth?: number
23
24
  }
24
25
 
25
26
  const OImage = (props: Props): React.ReactElement => {
@@ -30,6 +31,7 @@ const OImage = (props: Props): React.ReactElement => {
30
31
  borderRadius: props.style?.borderRadius,
31
32
  overflow: 'hidden',
32
33
  marginHorizontal: props.style?.marginHorizontal,
34
+ borderBottomWidth: props.borderBottomWidth
33
35
  }}>
34
36
  <SImage
35
37
  source={
package/themes/kiosk/src/components/LanguageSelector/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState } from 'react'
1
+ import React, { useEffect, useState } from 'react'
2
2
  import { TouchableOpacity, View, StyleSheet } from 'react-native'
3
3
  import { LanguageSelector as LanguageSelectorController, useLanguage } from 'ordering-components/native'
4
4
  import CountryPicker, { Flag } from 'react-native-country-picker-modal'
@@ -9,6 +9,7 @@ import { LanguageSelectorParams } from '../../types'
9
9
  import { OText } from '../shared'
10
10
  import MatarialIcon from "react-native-vector-icons/MaterialIcons"
11
11
  import { useTheme } from 'styled-components/native'
12
+ import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
12
13
  const LanguageSelectorUI = (props: LanguageSelectorParams) => {
13
14
  const {
14
15
  languagesState,
@@ -18,7 +19,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
18
19
 
19
20
  const theme = useTheme()
20
21
  const [{loading}] = useLanguage()
21
-
22
+ const [isLoading, setIsLoading] = useState(true)
22
23
  const styles = StyleSheet.create({
23
24
  closeIcon: {
24
25
  width: 48, marginLeft: 32
@@ -27,6 +28,15 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
27
28
  marginLeft: 40
28
29
  }
29
30
  })
31
+ useEffect(() => {
32
+ if (!isLoading) return
33
+ const loadingLanguage = setTimeout(() =>{
34
+ setIsLoading(false)
35
+ }, 1000);
36
+ return () => {
37
+ clearTimeout(loadingLanguage);
38
+ }
39
+ }, [])
30
40
 
31
41
  const _languages = languagesState?.languages?.map((language: any) => {
32
42
  return {
@@ -48,63 +58,73 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
48
58
  const currentLanguageData = _languages?.find((item:any) => item.value == currentLanguage);
49
59
 
50
60
  return (
51
- <Container>
52
- {languagesState?.languages && (
53
- <CountryPicker
54
- countryCode={currentLanguageData?.countryCode}
55
- visible={isCountryModalVisible}
56
- onClose={() => setCountryModalVisible(false)}
57
- withCountryNameButton
58
- countryCodes={countryCodes}
59
- closeButtonStyle={styles.closeIcon}
60
- renderFlagButton={() => (
61
- <TouchableOpacity
62
- onPress={() => setCountryModalVisible(true)}
63
- disabled={loading}
64
- >
65
- <LanguageItem>
66
- <Flag
67
- withEmoji
68
- flagSize={24}
69
- countryCode={currentLanguageData?.countryCode}
70
- />
71
- <OText color={theme.colors.primary}>{currentLanguageData?.label}</OText>
72
- <MatarialIcon name='keyboard-arrow-down' size={24}/>
73
- </LanguageItem>
74
- </TouchableOpacity>
61
+ <>
62
+ { isLoading ?
63
+ (<Container>
64
+ <Placeholder style={{ width: 130, paddingTop: 10 }} Animation={Fade}>
65
+ <PlaceholderLine height={15}/>
66
+ </Placeholder>
67
+ </Container>
68
+ ):(
69
+ <Container>
70
+ {languagesState?.languages && (
71
+ <CountryPicker
72
+ countryCode={currentLanguageData?.countryCode}
73
+ visible={isCountryModalVisible}
74
+ onClose={() => setCountryModalVisible(false)}
75
+ withCountryNameButton
76
+ countryCodes={countryCodes}
77
+ closeButtonStyle={styles.closeIcon}
78
+ renderFlagButton={() => (
79
+ <TouchableOpacity
80
+ onPress={() => setCountryModalVisible(true)}
81
+ disabled={loading}
82
+ >
83
+ <LanguageItem>
84
+ <Flag
85
+ withEmoji
86
+ flagSize={24}
87
+ countryCode={currentLanguageData?.countryCode}
88
+ />
89
+ <OText color={theme.colors.primary}>{currentLanguageData?.label}</OText>
90
+ <MatarialIcon name='keyboard-arrow-down' size={24}/>
91
+ </LanguageItem>
92
+ </TouchableOpacity>
93
+ )}
94
+ flatListProps={{
95
+ /* @ts-ignore */
96
+ keyExtractor: (item) => item.value,
97
+ data: _languages || [],
98
+ renderItem: ({item} : any) => (
99
+ <TouchableOpacity
100
+ onPress={() => {
101
+ /* @ts-ignore */
102
+ handleChangeLanguage(item.value);
103
+ setCountryModalVisible(false);
104
+ }}
105
+ disabled={loading}
106
+ >
107
+ <LanguageItem>
108
+ <View style={styles.flagsContainer} />
109
+ <Flag
110
+ withEmoji
111
+ flagSize={24}
112
+ /* @ts-ignore */
113
+ countryCode={item.countryCode}
114
+ />
115
+ <OText>{
116
+ /* @ts-ignore */
117
+ item.label
118
+ }</OText>
119
+ </LanguageItem>
120
+ </TouchableOpacity>
121
+ )
122
+ }}
123
+ />
75
124
  )}
76
- flatListProps={{
77
- /* @ts-ignore */
78
- keyExtractor: (item) => item.value,
79
- data: _languages || [],
80
- renderItem: ({item} : any) => (
81
- <TouchableOpacity
82
- onPress={() => {
83
- /* @ts-ignore */
84
- handleChangeLanguage(item.value);
85
- setCountryModalVisible(false);
86
- }}
87
- disabled={loading}
88
- >
89
- <LanguageItem>
90
- <View style={styles.flagsContainer} />
91
- <Flag
92
- withEmoji
93
- flagSize={24}
94
- /* @ts-ignore */
95
- countryCode={item.countryCode}
96
- />
97
- <OText>{
98
- /* @ts-ignore */
99
- item.label
100
- }</OText>
101
- </LanguageItem>
102
- </TouchableOpacity>
103
- )
104
- }}
105
- />
106
- )}
107
- </Container>
125
+ </Container>
126
+ )}
127
+ </>
108
128
  )
109
129
  }
110
130
 
package/themes/kiosk/src/components/OrderDetails/index.tsx CHANGED
@@ -33,7 +33,7 @@ import OptionSwitch, { Opt } from '../../components/shared/OOptionToggle';
33
33
  import { verifyDecimals } from '../../../../../src/utils'
34
34
  import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
35
35
  import { useTheme } from 'styled-components/native'
36
- import { _retrieveStoreData } from '../../../../../src/providers/StoreUtil';
36
+ import { _retrieveStoreData, _setStoreData } from '../../../../../src/providers/StoreUtil';
37
37
  import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
38
38
  import EvilIcons from 'react-native-vector-icons/EvilIcons'
39
39
  const _EMAIL = 'email';
@@ -218,6 +218,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
218
218
  }
219
219
  getCustomerName()
220
220
  const redirectHome = setTimeout(() =>{
221
+ _setStoreData('customer_name', {customerName: ''});
221
222
  navigation.reset({
222
223
  routes: [{ name: 'Intro' }],
223
224
  });
@@ -344,6 +345,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
344
345
  <OButton
345
346
  text={`${t('YOU_ARE_DONE', 'You are done! Click to close')}!`}
346
347
  onClick={() => {
348
+ _setStoreData('customer_name', {customerName: ''});
347
349
  navigation.reset({
348
350
  routes: [{ name: 'Intro' }],
349
351
  });
package/themes/kiosk/src/components/ProductForm/index.tsx CHANGED
@@ -230,139 +230,139 @@ export const ProductOptionsUI = (props: any) => {
230
230
 
231
231
  return (
232
232
  <>
233
- <Animated.View style={[styles.header, { height: headerHeight }]}>
234
- <Animated.View style={{ opacity: navBar1ContainerOpacity }}>
235
- <NavBar
236
- {...navBarProps}
237
- titleColor={theme.colors.white}
238
- {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left_white })}
239
- btnStyle={{
240
- width: 55,
241
- height: 55,
242
- backgroundColor: 'black',
243
- borderRadius: 100,
244
- opacity: 0.8,
245
- left: 20,
246
- }}
247
- imgLeftStyle={{ width: 27, height: 27 }}
248
- />
249
- </Animated.View>
250
- <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
251
- <NavBar
252
- {...navBarProps}
253
- {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left })}
254
- btnStyle={{
255
- width: 55,
256
- height: 55,
257
- backgroundColor: 'transparent',
258
- borderRadius: 100,
259
- left: 20,
260
- }}
261
- imgLeftStyle={{ width: 27, height: 27 }}
262
- />
263
- </Animated.View>
264
-
265
- <Animated.View style={{
266
- backgroundColor: 'white',
267
- width: orientationState?.dimensions?.width,
268
- opacity: collapsedBarContainerOpacity,
269
- }}>
270
- <View
271
- style={{
272
- flexDirection: 'row',
273
- alignItems: 'center',
274
- padding: 20,
275
- paddingTop: 0,
276
- paddingBottom: 10
277
- }}
278
- >
279
- <OImage
280
- source={{uri: product?.images}}
281
- width={70}
282
- height={70}
283
- resizeMode="cover"
284
- borderRadius={6}
233
+ <ScrollView
234
+ style={styles.mainContainer}
235
+ contentContainerStyle={styles.scrollContainer}
236
+ onScroll={Animated.event(
237
+ [{ nativeEvent: { contentOffset: { y: scrollY }} }],
238
+ {useNativeDriver: false})
239
+ }
240
+ scrollEventThrottle={16}
241
+ >
242
+ <Animated.View style={[styles.header, { height: headerHeight }]}>
243
+ <Animated.View style={{ opacity: navBar1ContainerOpacity }}>
244
+ <NavBar
245
+ {...navBarProps}
246
+ titleColor={theme.colors.white}
247
+ {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left_white })}
248
+ btnStyle={{
249
+ width: 55,
250
+ height: 55,
251
+ backgroundColor: 'black',
252
+ borderRadius: 100,
253
+ opacity: 0.8,
254
+ left: 20,
255
+ }}
256
+ imgLeftStyle={{ width: 27, height: 27 }}
257
+ />
258
+ </Animated.View>
259
+ <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
260
+ <NavBar
261
+ {...navBarProps}
262
+ {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left })}
263
+ btnStyle={{
264
+ width: 55,
265
+ height: 55,
266
+ backgroundColor: 'transparent',
267
+ borderRadius: 100,
268
+ left: 20,
269
+ }}
270
+ imgLeftStyle={{ width: 27, height: 27 }}
285
271
  />
286
- <OText
287
- size={orientationState?.dimensions?.width * 0.025}
288
- weight="bold"
289
- mLeft={20}
290
- numberOfLines={2}
272
+ </Animated.View>
273
+
274
+ <Animated.View style={{
275
+ backgroundColor: 'white',
276
+ width: orientationState?.dimensions?.width,
277
+ opacity: collapsedBarContainerOpacity,
278
+ }}>
279
+ <View
280
+ style={{
281
+ flexDirection: 'row',
282
+ alignItems: 'center',
283
+ padding: 20,
284
+ paddingTop: 0,
285
+ paddingBottom: 10
286
+ }}
291
287
  >
292
- {product?.name}
293
- </OText>
294
- </View>
295
- <View
296
- style={{
297
- position: 'absolute',
298
- bottom: -2,
299
- height: 1,
300
- backgroundColor: 'white',
301
- width: orientationState?.dimensions?.width,
302
- ...styles.shadow,
303
- }}
304
- />
305
- </Animated.View>
288
+ <OImage
289
+ source={{uri: product?.images}}
290
+ width={70}
291
+ height={70}
292
+ resizeMode="cover"
293
+ borderRadius={6}
294
+ />
295
+ <OText
296
+ size={orientationState?.dimensions?.width * 0.025}
297
+ weight="bold"
298
+ mLeft={20}
299
+ numberOfLines={2}
300
+ >
301
+ {product?.name}
302
+ </OText>
303
+ </View>
304
+ <View
305
+ style={{
306
+ position: 'absolute',
307
+ bottom: -2,
308
+ height: 1,
309
+ backgroundColor: 'white',
310
+ width: orientationState?.dimensions?.width,
311
+ ...styles.shadow,
312
+ }}
313
+ />
314
+ </Animated.View>
306
315
 
307
- <Animated.View style={{
308
- opacity: heroContainerOpacity,
309
- position: 'absolute',
310
- zIndex: -100,
311
- transform: [{translateY: heroTranslateY }],
312
- }}>
313
- <View
314
- style={{
315
- width: orientationState?.dimensions?.width,
316
- height: HEADER_EXPANDED_HEIGHT,
317
- position: 'absolute',
318
- zIndex: 1,
319
- backgroundColor: 'rgba(24, 28, 50, 0.4)',
320
- }}
321
- >
322
- <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex:1, justifyContent: 'center' }} />
316
+ <Animated.View style={{
317
+ opacity: heroContainerOpacity,
318
+ position: 'absolute',
319
+ zIndex: -100,
320
+ transform: [{translateY: heroTranslateY }],
321
+ }}>
322
+ <View
323
+ style={{
324
+ width: orientationState?.dimensions?.width,
325
+ height: HEADER_EXPANDED_HEIGHT,
326
+ position: 'absolute',
327
+ zIndex: 1,
328
+ backgroundColor: 'rgba(24, 28, 50, 0.4)',
329
+ }}
330
+ >
331
+ <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex:1, justifyContent: 'center' }} />
323
332
 
324
- </View>
333
+ </View>
325
334
 
326
- <Animated.View
327
- style={{
328
- transform: [{translateY: heroTranslateY }],
329
- width: orientationState?.dimensions?.width * 0.75,
330
- height: HEADER_EXPANDED_HEIGHT / 2,
331
- position: 'relative',
332
- top: HEADER_EXPANDED_HEIGHT / 3,
333
- zIndex: 100,
334
- padding: 20,
335
- }}
336
- >
337
- <OText
338
- color={theme.colors.white}
339
- size={orientationState?.dimensions?.width * 0.048}
340
- weight="bold"
341
- mBottom={10}
342
- numberOfLines={2}
335
+ <Animated.View
336
+ style={{
337
+ transform: [{translateY: heroTranslateY }],
338
+ width: orientationState?.dimensions?.width * 0.75,
339
+ height: HEADER_EXPANDED_HEIGHT / 2,
340
+ position: 'relative',
341
+ top: HEADER_EXPANDED_HEIGHT / 3,
342
+ zIndex: 100,
343
+ padding: 20,
344
+ }}
343
345
  >
344
- {product?.name || productCart?.name}
345
- </OText>
346
+ <OText
347
+ color={theme.colors.white}
348
+ size={orientationState?.dimensions?.width * 0.048}
349
+ weight="bold"
350
+ mBottom={10}
351
+ numberOfLines={2}
352
+ >
353
+ {product?.name || productCart?.name}
354
+ </OText>
346
355
 
347
- <OText
348
- color={theme.colors.white}
349
- numberOfLines={4}
350
- >
351
- {product?.description || productCart?.description}
352
- </OText>
356
+ <OText
357
+ color={theme.colors.white}
358
+ numberOfLines={4}
359
+ >
360
+ {product?.description || productCart?.description}
361
+ </OText>
362
+ </Animated.View>
353
363
  </Animated.View>
354
364
  </Animated.View>
355
- </Animated.View>
356
365
 
357
- <ScrollView
358
- style={styles.mainContainer}
359
- contentContainerStyle={styles.scrollContainer}
360
- onScroll={Animated.event(
361
- [{ nativeEvent: { contentOffset: { y: scrollY }} }],
362
- {useNativeDriver: false})
363
- }
364
- scrollEventThrottle={16}
365
- >
366
366
  {!isFromCheckout && (
367
367
  <Spinner visible={loading} />
368
368
  )}
package/themes/original/src/components/OrderProgress/index.tsx CHANGED
@@ -106,11 +106,11 @@ const OrderProgressUI = (props: any) => {
106
106
  const convertDiffToHours = (order: any) => {
107
107
  const time = order.delivery_type === 1 ? order?.business?.delivery_time : order?.business?.pickup_time
108
108
  const deliveryTime = order?.delivery_datetime_utc
109
- ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
110
- : parseDate(order?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD hh:mm A' })
109
+ ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD HH:mm' })
110
+ : parseDate(order?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD HH:mm' })
111
111
  const [hour, minute] = time.split(':')
112
112
  const result = time ? (parseInt(hour, 10) * 60) + parseInt(minute, 10) : 0
113
- const returnedDate = moment(new Date(deliveryTime)).add(result, 'minutes').format('hh:mm A')
113
+ const returnedDate = moment(deliveryTime).add(result, 'minutes').format('hh:mm A')
114
114
  return returnedDate
115
115
  }
116
116