ordering-ui-react-native 0.21.19 → 0.21.20

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 (9) hide show
  1. package/package.json +1 -1
  2. package/themes/business/src/components/Chat/index.tsx +2 -1
  3. package/themes/business/src/components/MessagesOption/index.tsx +20 -93
  4. package/themes/business/src/components/PreviousMessages/FooterMessageComponent.tsx +103 -0
  5. package/themes/business/src/components/PreviousMessages/index.tsx +97 -55
  6. package/themes/business/src/components/PreviousOrders/OrderItem.tsx +11 -5
  7. package/themes/business/src/components/PreviousOrders/OrderList.tsx +88 -0
  8. package/themes/business/src/components/PreviousOrders/index.tsx +132 -172
  9. package/themes/business/src/types/index.tsx +6 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.21.19",
3
+ "version": "0.21.20",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/business/src/components/Chat/index.tsx CHANGED
@@ -312,7 +312,8 @@ const ChatUI = (props: MessagesParams) => {
312
312
  quality: 1
313
313
  },
314
314
  (response: any) => {
315
- const image = response.assets[0];
315
+ const image = response.assets?.[0];
316
+ if (!image) return
316
317
  if (image.didCancel) {
317
318
  console.log('User cancelled image picker');
318
319
  } else if (image.errorMessage) {
package/themes/business/src/components/MessagesOption/index.tsx CHANGED
@@ -2,20 +2,17 @@ import React, { useState, useEffect } from 'react';
2
2
  import {
3
3
  View,
4
4
  Pressable,
5
- StyleSheet,
6
- Dimensions,
7
- ScrollView,
8
- RefreshControl,
5
+ StyleSheet
9
6
  } from 'react-native';
10
7
  import { Contacts, useLanguage } from 'ordering-components/native';
11
8
  import { useTheme } from 'styled-components/native';
12
- import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
13
- import { OText, OButton } from '../shared';
9
+ import { OText } from '../shared';
14
10
  import { NotFoundSource } from '../NotFoundSource';
15
11
  import { PreviousMessages } from '../PreviousMessages';
16
12
  import { FiltersTab, TabsContainer, TagsContainer, Tag } from './styles';
17
13
  import { MessagesOptionParams } from '../../types';
18
14
  import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
15
+
19
16
  const MessagesOptionUI = (props: MessagesOptionParams) => {
20
17
  const {
21
18
  orders,
@@ -65,12 +62,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
65
62
  ),
66
63
  );
67
64
 
68
- const [orientation, setOrientation] = useState(
69
- Dimensions.get('window').width < Dimensions.get('window').height
70
- ? 'Portrait'
71
- : 'Landscape',
72
- );
73
-
74
65
  const getTagFilter = (key: number) => {
75
66
  return tags.find(value => value.key === key)?.text;
76
67
  };
@@ -114,14 +105,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
114
105
  );
115
106
  }, [orders]);
116
107
 
117
- Dimensions.addEventListener('change', ({ window: { width, height } }) => {
118
- if (width < height) {
119
- setOrientation('Portrait');
120
- } else {
121
- setOrientation('Landscape');
122
- }
123
- });
124
-
125
108
  const styles = StyleSheet.create({
126
109
  header: {
127
110
  marginBottom: 25,
@@ -242,35 +225,28 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
242
225
  !error
243
226
  ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
244
227
  : error[0]?.message ||
245
- error[0] ||
246
- t('NETWORK_ERROR', 'Network Error')
228
+ error[0] ||
229
+ t('NETWORK_ERROR', 'Network Error')
247
230
  }
248
231
  image={theme.images.general.notFound}
249
232
  conditioned={false}
250
233
  />
251
234
  )}
252
-
253
- <ScrollView
254
- showsVerticalScrollIndicator={false}
255
- style={{ flex: 1 }}
256
- refreshControl={<RefreshControl
257
- refreshing={refreshing}
258
- onRefresh={() => getOrders?.()}
259
- />}
260
- >
261
- {!reload &&
262
- !error &&
263
- values.length > 0 &&
264
- JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) && (
265
- <PreviousMessages
266
- orders={values}
267
- setOrders={setOrders}
268
- messages={messages}
269
- onNavigationRedirect={onNavigationRedirect}
270
- />
271
- )}
272
-
273
- {/* {!reload &&
235
+ <PreviousMessages
236
+ orders={values}
237
+ messages={messages}
238
+ onNavigationRedirect={onNavigationRedirect}
239
+ getOrders={getOrders}
240
+ pagination={pagination}
241
+ loading={loading}
242
+ reload={reload}
243
+ tabs={tabs}
244
+ tabsFilter={tabsFilter}
245
+ setOrders={setOrders}
246
+ loadMore={loadMore}
247
+ error={error}
248
+ />
249
+ {/* {!reload &&
274
250
  !error &&
275
251
  orders.length > 0 &&
276
252
  JSON.stringify(tabsFilter) === JSON.stringify(tabs[1].tags) && (
@@ -283,55 +259,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
283
259
  onNavigationRedirect={onNavigationRedirect}
284
260
  />
285
261
  )} */}
286
-
287
- {(loading || reload) && (
288
- <>
289
- <View>
290
- {[...Array(5)].map((item, i) => (
291
- <Placeholder key={i} Animation={Fade}>
292
- <View
293
- style={{
294
- width: '100%',
295
- flexDirection: 'row',
296
- marginBottom: 10,
297
- }}>
298
- <PlaceholderLine
299
- width={orientation === 'Portrait' ? 22 : 11}
300
- height={74}
301
- style={{
302
- marginRight: 20,
303
- marginBottom: 20,
304
- borderRadius: 7.6,
305
- }}
306
- />
307
- <Placeholder>
308
- <PlaceholderLine width={30} style={{ marginTop: 5 }} />
309
- <PlaceholderLine width={50} />
310
- <PlaceholderLine width={20} />
311
- </Placeholder>
312
- </View>
313
- </Placeholder>
314
- ))}
315
- </View>
316
- </>
317
- )}
318
-
319
- {pagination?.totalPages &&
320
- !loading &&
321
- !reload &&
322
- JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) &&
323
- pagination?.currentPage < pagination?.totalPages && (
324
- <OButton
325
- onClick={() => loadMore && loadMore()}
326
- text={t('LOAD_MORE_ORDERS', 'Load more orders')}
327
- imgRightSrc={null}
328
- textStyle={styles.loadButtonText}
329
- style={styles.loadButton}
330
- bgColor={theme.colors.primary}
331
- borderColor={theme.colors.primary}
332
- />
333
- )}
334
- </ScrollView>
335
262
  </>
336
263
  );
337
264
  };
package/themes/business/src/components/PreviousMessages/FooterMessageComponent.tsx ADDED
@@ -0,0 +1,103 @@
1
+ import React, { useState } from 'react'
2
+ import { Dimensions, View, StyleSheet } from 'react-native'
3
+ import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
4
+ import { OButton } from '../shared'
5
+ import { useTheme } from 'styled-components/native'
6
+ import { useLanguage } from 'ordering-components/native'
7
+
8
+ export const FooterComponent = (props : any) => {
9
+ const {
10
+ loading,
11
+ reload,
12
+ pagination,
13
+ tabsFilter,
14
+ tabs,
15
+ loadMore
16
+ } = props
17
+
18
+ const theme = useTheme()
19
+ const [, t] = useLanguage()
20
+
21
+ const [orientation, setOrientation] = useState(
22
+ Dimensions.get('window').width < Dimensions.get('window').height
23
+ ? 'Portrait'
24
+ : 'Landscape',
25
+ );
26
+
27
+ Dimensions.addEventListener('change', ({ window: { width, height } }) => {
28
+ if (width < height) {
29
+ setOrientation('Portrait');
30
+ } else {
31
+ setOrientation('Landscape');
32
+ }
33
+ });
34
+
35
+ const styles = StyleSheet.create({
36
+ loadButton: {
37
+ borderRadius: 7.6,
38
+ height: 44,
39
+ marginRight: 10,
40
+ marginBottom: 10,
41
+ marginTop: 5,
42
+ },
43
+ loadButtonText: {
44
+ color: theme.colors.white,
45
+ fontFamily: 'Poppins',
46
+ fontStyle: 'normal',
47
+ fontWeight: 'normal',
48
+ fontSize: 18,
49
+ },
50
+ })
51
+
52
+ return (
53
+ <>
54
+ {(loading || reload) && (
55
+ <>
56
+ <View>
57
+ {[...Array(5)].map((item, i) => (
58
+ <Placeholder key={i} Animation={Fade}>
59
+ <View
60
+ style={{
61
+ width: '100%',
62
+ flexDirection: 'row',
63
+ marginBottom: 10,
64
+ }}>
65
+ <PlaceholderLine
66
+ width={orientation === 'Portrait' ? 22 : 11}
67
+ height={74}
68
+ style={{
69
+ marginRight: 20,
70
+ marginBottom: 20,
71
+ borderRadius: 7.6,
72
+ }}
73
+ />
74
+ <Placeholder>
75
+ <PlaceholderLine width={30} style={{ marginTop: 5 }} />
76
+ <PlaceholderLine width={50} />
77
+ <PlaceholderLine width={20} />
78
+ </Placeholder>
79
+ </View>
80
+ </Placeholder>
81
+ ))}
82
+ </View>
83
+ </>
84
+ )}
85
+
86
+ {pagination?.totalPages &&
87
+ !loading &&
88
+ !reload &&
89
+ JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) &&
90
+ pagination?.currentPage < pagination?.totalPages && (
91
+ <OButton
92
+ onClick={() => loadMore && loadMore()}
93
+ text={t('LOAD_MORE_ORDERS', 'Load more orders')}
94
+ imgRightSrc={null}
95
+ textStyle={styles.loadButtonText}
96
+ style={styles.loadButton}
97
+ bgColor={theme.colors.primary}
98
+ borderColor={theme.colors.primary}
99
+ />
100
+ )}
101
+ </>
102
+ )
103
+ }
package/themes/business/src/components/PreviousMessages/index.tsx CHANGED
@@ -1,17 +1,31 @@
1
- import React from 'react';
2
- import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
1
+ import React, { useState } from 'react';
2
+ import { StyleSheet, TouchableOpacity, FlatList, RefreshControl } from 'react-native';
3
3
  import { useTheme } from 'styled-components/native';
4
4
  import { useLanguage, useUtils } from 'ordering-components/native';
5
5
  import { Card, Logo, Information, Header, Badge } from './styles';
6
6
  import { OIcon, OText } from '../shared';
7
7
  import { PreviousMessagesParams } from '../../types';
8
+ import { FooterComponent } from './FooterMessageComponent';
8
9
 
9
10
  export const PreviousMessages = (props: PreviousMessagesParams) => {
10
- const { orders, onNavigationRedirect, setOrders } = props;
11
+ const {
12
+ orders,
13
+ onNavigationRedirect,
14
+ setOrders,
15
+ getOrders,
16
+ pagination,
17
+ loading,
18
+ reload,
19
+ tabs,
20
+ loadMore,
21
+ tabsFilter,
22
+ error
23
+ } = props;
11
24
 
12
25
  const [, t] = useLanguage();
13
26
  const theme = useTheme();
14
27
  const [{ parseDate, optimizeImage }] = useUtils();
28
+ const [refreshing] = useState(false);
15
29
 
16
30
  const handlePressOrder = (order: any) => {
17
31
  const uuid = order?.id;
@@ -253,63 +267,91 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
253
267
  fontStyle: 'normal',
254
268
  fontWeight: 'normal',
255
269
  color: theme.colors.orderTypeColor,
256
- },
270
+ }
257
271
  });
258
272
 
259
- return (
260
- <>
261
- {orders?.length > 0 &&
262
- orders?.map((order: any) => (
263
- <TouchableOpacity
264
- key={order?.id}
265
- onPress={() => handlePressOrder(order)}
266
- style={styles.cardButton}
267
- activeOpacity={1}>
268
- <Card key={order?.id}>
269
- <Logo style={styles.logo}>
270
- <OIcon
271
- url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
272
- src={!order?.business?.logo && theme?.images?.dummies?.businessLogo}
273
- style={styles.icon}
274
- />
275
- </Logo>
276
- <Information>
277
- <Header>
278
- <OText numberOfLines={1} style={styles.title}>
279
- {order?.business?.name}
280
- </OText>
273
+ const MessageComponent = (props : any) => {
274
+ const order = props.item
275
+ return (
276
+ <>
277
+ {!reload &&
278
+ !error &&
279
+ JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) && (
280
+ <TouchableOpacity
281
+ key={order?.id}
282
+ onPress={() => handlePressOrder(order)}
283
+ style={styles.cardButton}
284
+ activeOpacity={1}>
285
+ <Card key={order?.id}>
286
+ <Logo style={styles.logo}>
287
+ <OIcon
288
+ url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
289
+ src={!order?.business?.logo && theme?.images?.dummies?.businessLogo}
290
+ style={styles.icon}
291
+ />
292
+ </Logo>
293
+ <Information>
294
+ <Header>
295
+ <OText numberOfLines={1} style={styles.title}>
296
+ {order?.business?.name}
297
+ </OText>
281
298
 
282
- {order?.unread_count > 0 && (
283
- <Badge>
284
- <OText size={14} style={styles.badge}>
285
- {order?.unread_count}
286
- </OText>
287
- </Badge>
288
- )}
289
- </Header>
299
+ {order?.unread_count > 0 && (
300
+ <Badge>
301
+ <OText size={14} style={styles.badge}>
302
+ {order?.unread_count}
303
+ </OText>
304
+ </Badge>
305
+ )}
306
+ </Header>
290
307
 
291
- <OText
292
- style={styles.date}
293
- numberOfLines={1}
294
- adjustsFontSizeToFit
295
- size={20}>
296
- {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
297
- {order?.delivery_datetime_utc
298
- ? parseDate(order?.delivery_datetime_utc)
299
- : parseDate(order?.delivery_datetime, { utc: false })}
300
- </OText>
308
+ <OText
309
+ style={styles.date}
310
+ numberOfLines={1}
311
+ adjustsFontSizeToFit
312
+ size={20}>
313
+ {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
314
+ {order?.delivery_datetime_utc
315
+ ? parseDate(order?.delivery_datetime_utc)
316
+ : parseDate(order?.delivery_datetime, { utc: false })}
317
+ </OText>
301
318
 
302
- <OText
303
- style={styles.orderType}
304
- mRight={5}
305
- numberOfLines={1}
306
- adjustsFontSizeToFit>
307
- {getOrderStatus(order?.status)?.value}
308
- </OText>
309
- </Information>
310
- </Card>
311
- </TouchableOpacity>
312
- ))}
319
+ <OText
320
+ style={styles.orderType}
321
+ mRight={5}
322
+ numberOfLines={1}
323
+ adjustsFontSizeToFit>
324
+ {getOrderStatus(order?.status)?.value}
325
+ </OText>
326
+ </Information>
327
+ </Card>
328
+ </TouchableOpacity>
329
+ )}
330
+ </>
331
+ )
332
+ }
333
+
334
+ return (
335
+ <>
336
+ <FlatList
337
+ data={orders}
338
+ renderItem={MessageComponent}
339
+ keyExtractor={(order) => order?.id}
340
+ showsVerticalScrollIndicator={false}
341
+ style={{ flex: 1 }}
342
+ refreshControl={<RefreshControl
343
+ refreshing={refreshing}
344
+ onRefresh={() => getOrders?.()}
345
+ />}
346
+ ListFooterComponent={<FooterComponent
347
+ loading={loading}
348
+ reload={reload}
349
+ pagination={pagination}
350
+ tabsFilter={tabsFilter}
351
+ tabs={tabs}
352
+ loadMore={loadMore}
353
+ />}
354
+ />
313
355
  </>
314
356
  );
315
357
  };
package/themes/business/src/components/PreviousOrders/OrderItem.tsx CHANGED
@@ -21,7 +21,13 @@ import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrienta
21
21
 
22
22
  const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
23
23
 
24
- export const OrderItem = (props: any) => {
24
+ function OrderItemPropsAreEqual(prevProps: any, nextProps: any) {
25
+ return JSON.stringify(prevProps.order) === JSON.stringify(nextProps.order) &&
26
+ JSON.stringify(prevProps._order) === JSON.stringify(nextProps._order) &&
27
+ prevProps.currentTabSelected === nextProps.currentTabSelected
28
+ }
29
+
30
+ export const OrderItem = React.memo((props: any) => {
25
31
  const {
26
32
  order,
27
33
  _order,
@@ -195,9 +201,9 @@ export const OrderItem = (props: any) => {
195
201
  adjustsFontSizeToFit
196
202
  >
197
203
  {(!!order?.order_group_id && order?.order_group && isLogisticOrder
198
- ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
199
- : (t('NO', 'Order No.') + order.id)
200
- ) + ' · '}
204
+ ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
205
+ : (t('NO', 'Order No.') + order.id)
206
+ ) + ' · '}
201
207
  {order?.delivery_datetime_utc
202
208
  ? parseDate(order?.delivery_datetime_utc)
203
209
  : parseDate(order?.delivery_datetime, { utc: false })}
@@ -246,4 +252,4 @@ export const OrderItem = (props: any) => {
246
252
  </Card>
247
253
  </TouchableOpacity>
248
254
  )
249
- }
255
+ }, OrderItemPropsAreEqual)
package/themes/business/src/components/PreviousOrders/OrderList.tsx ADDED
@@ -0,0 +1,88 @@
1
+ import React from 'react'
2
+ import { View } from 'react-native'
3
+ import { useTheme } from 'styled-components/native'
4
+ import { OButton } from '../shared';
5
+ import { useLanguage } from 'ordering-components/native'
6
+ import { OrderItem } from './OrderItem';
7
+ import { AcceptOrRejectOrder as AcceptOrRejectOrderStyle } from './styles';
8
+
9
+ function OrderListPropsAreEqual(prevProps: any, nextProps: any) {
10
+ return JSON.stringify(prevProps.order) === JSON.stringify(nextProps.order) &&
11
+ JSON.stringify(prevProps._order) === JSON.stringify(nextProps._order) &&
12
+ JSON.stringify(prevProps.currentOrdenSelected) === JSON.stringify(nextProps.currentOrdenSelected) &&
13
+ prevProps.currentTabSelected === nextProps.currentTabSelected
14
+ }
15
+
16
+ export const OrdersList = React.memo((props: any) => {
17
+ const {
18
+ order,
19
+ _order,
20
+ hideBtns,
21
+ currentOrdenSelected,
22
+ isLogisticOrder,
23
+ handlePressOrder,
24
+ currentTabSelected,
25
+ getOrderStatus,
26
+ handleClickLogisticOrder
27
+ } = props
28
+
29
+ const theme = useTheme()
30
+ const [, t] = useLanguage()
31
+
32
+ return (
33
+ <View
34
+ style={{
35
+ backgroundColor: currentOrdenSelected === order?.id ? theme.colors.gray100 : order?.locked && isLogisticOrder ? '#ccc' : '#fff',
36
+ marginBottom: isLogisticOrder ? 10 : 0
37
+ }}
38
+ >
39
+ <OrderItem
40
+ order={order}
41
+ _order={_order}
42
+ isLogisticOrder={isLogisticOrder}
43
+ handlePressOrder={handlePressOrder}
44
+ currentTabSelected={currentTabSelected}
45
+ getOrderStatus={getOrderStatus}
46
+ />
47
+ {isLogisticOrder && !hideBtns && (
48
+ <AcceptOrRejectOrderStyle>
49
+ {!!order?.order_group_id && !!order?.order_group ? (
50
+ <OButton
51
+ text={t('VIEW_ORDER', 'View order')}
52
+ onClick={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
53
+ bgColor={theme.colors.blueLight}
54
+ borderColor={theme.colors.blueLight}
55
+ imgRightSrc={null}
56
+ style={{ borderRadius: 7, height: 40 }}
57
+ parentStyle={{ width: '100%' }}
58
+ textStyle={{ color: theme?.colors?.white }}
59
+ />
60
+ ) : (
61
+ <>
62
+ <OButton
63
+ text={t('REJECT', 'Reject')}
64
+ onClick={() => handleClickLogisticOrder(2, _order?.id)}
65
+ bgColor={theme.colors.red}
66
+ borderColor={theme.colors.red}
67
+ imgRightSrc={null}
68
+ style={{ borderRadius: 7, height: 40 }}
69
+ parentStyle={{ width: '45%' }}
70
+ textStyle={{ color: theme.colors.white }}
71
+ />
72
+ <OButton
73
+ text={t('ACCEPT', 'Accept')}
74
+ onClick={() => handleClickLogisticOrder(1, _order?.id)}
75
+ bgColor={theme.colors.green}
76
+ borderColor={theme.colors.green}
77
+ imgRightSrc={null}
78
+ style={{ borderRadius: 7, height: 40 }}
79
+ parentStyle={{ width: '45%' }}
80
+ textStyle={{ color: theme.colors.white }}
81
+ />
82
+ </>
83
+ )}
84
+ </AcceptOrRejectOrderStyle>
85
+ )}
86
+ </View>
87
+ )
88
+ }, OrderListPropsAreEqual)
package/themes/business/src/components/PreviousOrders/index.tsx CHANGED
@@ -3,11 +3,11 @@ import { View } from 'react-native';
3
3
  import { useTheme } from 'styled-components/native';
4
4
  import { useLanguage } from 'ordering-components/native';
5
5
 
6
- import {AcceptOrRejectOrder as AcceptOrRejectOrderStyle } from './styles';
6
+ import { AcceptOrRejectOrder as AcceptOrRejectOrderStyle } from './styles';
7
7
 
8
8
  import { OButton, OModal } from '../shared';
9
- import { OrderItem } from './OrderItem'
10
9
  import { OrdersGroupedItem } from './OrdersGroupedItem'
10
+ import { OrdersList } from './OrderList';
11
11
  import { AcceptOrRejectOrder } from '../AcceptOrRejectOrder';
12
12
  import { ReviewCustomer } from '../ReviewCustomer';
13
13
  import { GoogleMap } from '../GoogleMap';
@@ -31,7 +31,7 @@ export const PreviousOrders = (props: any) => {
31
31
  const [, t] = useLanguage();
32
32
  const theme = useTheme();
33
33
 
34
- const [, setCurrentTime] = useState()
34
+ // const [, setCurrentTime] = useState()
35
35
  const [openModal, setOpenModal] = useState(false)
36
36
  const [openReviewModal, setOpenReviewModal] = useState({ order: null, ids: [], customerId: null })
37
37
  const [openMapViewModal, setOpenMapViewModal] = useState<any>({ open: false, customerLocation: null, locations: [] })
@@ -48,9 +48,9 @@ export const PreviousOrders = (props: any) => {
48
48
  if (props.handleClickEvent) {
49
49
  props.handleClickEvent({ ...order, isLogistic: isLogisticOrder })
50
50
  } else {
51
- if (isLogisticOrder){
51
+ if (isLogisticOrder) {
52
52
  onNavigationRedirect &&
53
- onNavigationRedirect('OrderDetailsLogistic', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
53
+ onNavigationRedirect('OrderDetailsLogistic', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
54
54
  } else {
55
55
  onNavigationRedirect &&
56
56
  onNavigationRedirect('OrderDetails', { order });
@@ -58,73 +58,13 @@ export const PreviousOrders = (props: any) => {
58
58
  }
59
59
  };
60
60
 
61
- const OrdersList = (props: any) => {
62
- const { order, _order, hideBtns } = props
63
- return (
64
- <View
65
- style={{
66
- backgroundColor: currentOrdenSelected === order?.id ? theme.colors.gray100 : order?.locked && isLogisticOrder ? '#ccc' : '#fff',
67
- marginBottom: isLogisticOrder ? 10 : 0
68
- }}
69
- >
70
- <OrderItem
71
- order={order}
72
- _order={_order}
73
- isLogisticOrder={isLogisticOrder}
74
- handlePressOrder={handlePressOrder}
75
- currentTabSelected={currentTabSelected}
76
- getOrderStatus={getOrderStatus}
77
- />
78
- {isLogisticOrder && !hideBtns && (
79
- <AcceptOrRejectOrderStyle>
80
- {!!order?.order_group_id && !!order?.order_group ? (
81
- <OButton
82
- text={t('VIEW_ORDER', 'View order')}
83
- onClick={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
84
- bgColor={theme.colors.blueLight}
85
- borderColor={theme.colors.blueLight}
86
- imgRightSrc={null}
87
- style={{ borderRadius: 7, height: 40 }}
88
- parentStyle={{ width: '100%' }}
89
- textStyle={{ color: theme?.colors?.white }}
90
- />
91
- ) : (
92
- <>
93
- <OButton
94
- text={t('REJECT', 'Reject')}
95
- onClick={() => handleClickLogisticOrder(2, _order?.id)}
96
- bgColor={theme.colors.red}
97
- borderColor={theme.colors.red}
98
- imgRightSrc={null}
99
- style={{ borderRadius: 7, height: 40 }}
100
- parentStyle={{ width: '45%' }}
101
- textStyle={{ color: theme.colors.white }}
102
- />
103
- <OButton
104
- text={t('ACCEPT', 'Accept')}
105
- onClick={() => handleClickLogisticOrder(1, _order?.id)}
106
- bgColor={theme.colors.green}
107
- borderColor={theme.colors.green}
108
- imgRightSrc={null}
109
- style={{ borderRadius: 7, height: 40 }}
110
- parentStyle={{ width: '45%' }}
111
- textStyle={{ color: theme.colors.white }}
112
- />
113
- </>
114
- )}
115
- </AcceptOrRejectOrderStyle>
116
- )}
117
- </View>
118
- )
119
- }
120
-
121
61
  const ordersGroupAction = (param1 = '', param2 = '', { order, action, body, ids }: any = {}) => {
122
62
  setOrderUpdateStatus({ ...orderUpdateStatus, action, ids, body, order })
123
63
  if (!param1) setOpenModal(true)
124
64
  if (param1) {
125
65
  setOpenModal(false)
126
66
  handleChangeOrderStatus &&
127
- handleChangeOrderStatus(param1, orderUpdateStatus.ids, param2)
67
+ handleChangeOrderStatus(param1, orderUpdateStatus.ids, param2)
128
68
  }
129
69
  }
130
70
 
@@ -159,7 +99,7 @@ export const PreviousOrders = (props: any) => {
159
99
  if (_order?.customer?.location) {
160
100
  locations.push({
161
101
  ..._order?.customer?.location,
162
- title: _order?.customer?.name ?? t('CUSTOMER', 'Customer'),
102
+ title: _order?.customer?.name ?? t('CUSTOMER', 'Customer'),
163
103
  address: {
164
104
  addressName: _order?.customer?.address,
165
105
  zipcode: _order?.customer?.zipcode
@@ -180,14 +120,14 @@ export const PreviousOrders = (props: any) => {
180
120
  })
181
121
  }
182
122
 
183
- useEffect(() => {
184
- const interval = setInterval(() => {
185
- const date: any = Date.now()
186
- setCurrentTime(date)
187
- }, slaSettingTime ?? 6000)
123
+ // useEffect(() => {
124
+ // const interval = setInterval(() => {
125
+ // const date: any = Date.now()
126
+ // setCurrentTime(date)
127
+ // }, slaSettingTime ?? 6000)
188
128
 
189
- return () => clearInterval(interval)
190
- }, [])
129
+ // return () => clearInterval(interval)
130
+ // }, [])
191
131
 
192
132
 
193
133
  return (
@@ -210,10 +150,21 @@ export const PreviousOrders = (props: any) => {
210
150
  ?.map((_order: any) => {
211
151
  const order_ = _order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order
212
152
  return (
213
- <OrdersList key={order_.id} order={order_} _order={_order} hideBtns />
153
+ <OrdersList
154
+ key={order_.id}
155
+ order={order_}
156
+ _order={_order}
157
+ hideBtns
158
+ currentOrdenSelected={currentOrdenSelected}
159
+ isLogisticOrder={isLogisticOrder}
160
+ handlePressOrder={handlePressOrder}
161
+ currentTabSelected={currentTabSelected}
162
+ getOrderStatus={getOrderStatus}
163
+ handleClickLogisticOrder={handleClickLogisticOrder}
164
+ />
214
165
  )
215
166
  }
216
- )
167
+ )
217
168
  }
218
169
  {_ordersGrouped[k][0]?.status === 0 && (
219
170
  <AcceptOrRejectOrderStyle>
@@ -268,109 +219,109 @@ export const PreviousOrders = (props: any) => {
268
219
  )}
269
220
  {(_ordersGrouped[k][0]?.status === 8 || _ordersGrouped[k][0]?.status === 18) &&
270
221
  _ordersGrouped[k][0]?.delivery_type === 1 &&
271
- (
272
- <AcceptOrRejectOrderStyle>
273
- <OButton
274
- text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
275
- bgColor={theme.colors.btnBGWhite}
276
- borderColor={theme.colors.btnBGWhite}
277
- imgRightSrc={null}
278
- style={{ borderRadius: 7, height: 40 }}
279
- parentStyle={{ width: '100%' }}
280
- textStyle={{ color: theme.colors.primary, fontSize: 12 }}
281
- onClick={() => handleChangeOrderStatus(
282
- 3,
283
- _ordersGrouped[k].map((o: any) => o.id),
284
- )}
285
- />
286
- </AcceptOrRejectOrderStyle>
287
- )}
222
+ (
223
+ <AcceptOrRejectOrderStyle>
224
+ <OButton
225
+ text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
226
+ bgColor={theme.colors.btnBGWhite}
227
+ borderColor={theme.colors.btnBGWhite}
228
+ imgRightSrc={null}
229
+ style={{ borderRadius: 7, height: 40 }}
230
+ parentStyle={{ width: '100%' }}
231
+ textStyle={{ color: theme.colors.primary, fontSize: 12 }}
232
+ onClick={() => handleChangeOrderStatus(
233
+ 3,
234
+ _ordersGrouped[k].map((o: any) => o.id),
235
+ )}
236
+ />
237
+ </AcceptOrRejectOrderStyle>
238
+ )}
288
239
  {_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 &&
289
- (
290
- <AcceptOrRejectOrderStyle>
291
- <OButton
292
- text={t('ORDER_NOT_READY', 'Order not ready')}
293
- bgColor={theme.colors.red}
294
- borderColor={theme.colors.red}
295
- imgRightSrc={null}
296
- style={{ borderRadius: 7, height: 40 }}
297
- parentStyle={{ width: '100%' }}
298
- textStyle={{ color: theme.colors.white, fontSize: 12 }}
299
- onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
300
- action: 'notReady',
301
- order: _ordersGrouped[k][0],
302
- ids: _ordersGrouped[k].map((o: any) => o.id),
303
- handleChangeOrderStatus
304
- })}
305
- />
306
- </AcceptOrRejectOrderStyle>
307
- )}
240
+ (
241
+ <AcceptOrRejectOrderStyle>
242
+ <OButton
243
+ text={t('ORDER_NOT_READY', 'Order not ready')}
244
+ bgColor={theme.colors.red}
245
+ borderColor={theme.colors.red}
246
+ imgRightSrc={null}
247
+ style={{ borderRadius: 7, height: 40 }}
248
+ parentStyle={{ width: '100%' }}
249
+ textStyle={{ color: theme.colors.white, fontSize: 12 }}
250
+ onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
251
+ action: 'notReady',
252
+ order: _ordersGrouped[k][0],
253
+ ids: _ordersGrouped[k].map((o: any) => o.id),
254
+ handleChangeOrderStatus
255
+ })}
256
+ />
257
+ </AcceptOrRejectOrderStyle>
258
+ )}
308
259
  {viewMapStatus.includes(_ordersGrouped[k][0]?.status) &&
309
260
  props.appTitle?.text?.includes('Business') &&
310
- (
311
- <View>
312
- <OButton
313
- text={t('TRACK_REAL_TIME_POSITION', 'Track real time position')}
314
- bgColor={theme.colors.primaryLight}
315
- borderColor={theme.colors.primaryLight}
316
- imgRightSrc={null}
317
- style={{ borderRadius: 7, height: 40 }}
318
- parentStyle={{ width: '100%' }}
319
- textStyle={{ color: theme.colors.primary, fontSize: 12 }}
320
- onClick={() => handleOpenMapView({ orders: _ordersGrouped[k] })}
321
- />
322
- </View>
323
- )}
261
+ (
262
+ <View>
263
+ <OButton
264
+ text={t('TRACK_REAL_TIME_POSITION', 'Track real time position')}
265
+ bgColor={theme.colors.primaryLight}
266
+ borderColor={theme.colors.primaryLight}
267
+ imgRightSrc={null}
268
+ style={{ borderRadius: 7, height: 40 }}
269
+ parentStyle={{ width: '100%' }}
270
+ textStyle={{ color: theme.colors.primary, fontSize: 12 }}
271
+ onClick={() => handleOpenMapView({ orders: _ordersGrouped[k] })}
272
+ />
273
+ </View>
274
+ )}
324
275
  {_ordersGrouped[k][0]?.status === 4 &&
325
276
  ![1].includes(_ordersGrouped[k][0]?.delivery_type) &&
326
- (
327
- <AcceptOrRejectOrderStyle>
328
- <OButton
329
- text={t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer')}
330
- bgColor={theme.colors.danger100}
331
- borderColor={theme.colors.danger100}
332
- imgRightSrc={null}
333
- style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
334
- parentStyle={{ width: '45%' }}
335
- textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
336
- onClick={() => handleChangeOrderStatus(
337
- 17,
338
- _ordersGrouped[k].map((o: any) => o.id),
339
- )}
340
- />
277
+ (
278
+ <AcceptOrRejectOrderStyle>
279
+ <OButton
280
+ text={t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer')}
281
+ bgColor={theme.colors.danger100}
282
+ borderColor={theme.colors.danger100}
283
+ imgRightSrc={null}
284
+ style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
285
+ parentStyle={{ width: '45%' }}
286
+ textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
287
+ onClick={() => handleChangeOrderStatus(
288
+ 17,
289
+ _ordersGrouped[k].map((o: any) => o.id),
290
+ )}
291
+ />
292
+ <OButton
293
+ text={t('PICKUP_COMPLETED_BY_CUSTOMER', 'Pickup completed by customer')}
294
+ bgColor={theme.colors.success100}
295
+ borderColor={theme.colors.success100}
296
+ imgRightSrc={null}
297
+ style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
298
+ parentStyle={{ width: '45%' }}
299
+ textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
300
+ onClick={() => handleChangeOrderStatus(
301
+ 15,
302
+ _ordersGrouped[k].map((o: any) => o.id),
303
+ )}
304
+ />
305
+ </AcceptOrRejectOrderStyle>
306
+ )}
307
+ {!_ordersGrouped[k][0]?.user_review &&
308
+ pastOrderStatuses.includes(_ordersGrouped[k][0]?.status) &&
309
+ (
341
310
  <OButton
342
- text={t('PICKUP_COMPLETED_BY_CUSTOMER', 'Pickup completed by customer')}
343
- bgColor={theme.colors.success100}
344
- borderColor={theme.colors.success100}
311
+ text={t('REVIEW_CUSTOMER', 'Review customer')}
312
+ bgColor={theme.colors.primary}
313
+ borderColor={theme.colors.primary}
345
314
  imgRightSrc={null}
346
- style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
347
- parentStyle={{ width: '45%' }}
348
- textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
349
- onClick={() => handleChangeOrderStatus(
350
- 15,
351
- _ordersGrouped[k].map((o: any) => o.id),
352
- )}
315
+ style={{ borderRadius: 8, height: 40 }}
316
+ parentStyle={{ width: '100%' }}
317
+ textStyle={{ color: theme.colors.white }}
318
+ onClick={() => setOpenReviewModal({
319
+ order: _ordersGrouped[k][0],
320
+ customerId: _ordersGrouped[k][0]?.customer_id,
321
+ ids: _ordersGrouped[k].map((o: any) => o.id)
322
+ })}
353
323
  />
354
- </AcceptOrRejectOrderStyle>
355
- )}
356
- {!_ordersGrouped[k][0]?.user_review &&
357
- pastOrderStatuses.includes(_ordersGrouped[k][0]?.status) &&
358
- (
359
- <OButton
360
- text={t('REVIEW_CUSTOMER', 'Review customer')}
361
- bgColor={theme.colors.primary}
362
- borderColor={theme.colors.primary}
363
- imgRightSrc={null}
364
- style={{ borderRadius: 8, height: 40 }}
365
- parentStyle={{ width: '100%' }}
366
- textStyle={{ color: theme.colors.white }}
367
- onClick={() => setOpenReviewModal({
368
- order: _ordersGrouped[k][0],
369
- customerId: _ordersGrouped[k][0]?.customer_id,
370
- ids: _ordersGrouped[k].map((o: any) => o.id)
371
- })}
372
- />
373
- )}
324
+ )}
374
325
  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && (
375
326
  <AcceptOrRejectOrderStyle>
376
327
  <OButton
@@ -440,7 +391,16 @@ export const PreviousOrders = (props: any) => {
440
391
  </View>
441
392
  ) : (
442
393
  <View key={order.id}>
443
- <OrdersList order={order} _order={_order} />
394
+ <OrdersList
395
+ order={order}
396
+ _order={_order}
397
+ currentOrdenSelected={currentOrdenSelected}
398
+ isLogisticOrder={isLogisticOrder}
399
+ handlePressOrder={handlePressOrder}
400
+ currentTabSelected={currentTabSelected}
401
+ getOrderStatus={getOrderStatus}
402
+ handleClickLogisticOrder={handleClickLogisticOrder}
403
+ />
444
404
  </View>
445
405
  )
446
406
  )
package/themes/business/src/types/index.tsx CHANGED
@@ -365,6 +365,12 @@ export interface PreviousMessagesParams {
365
365
  loadMessages?: (id: any) => {};
366
366
  handleReorder?: (order: any) => {};
367
367
  onNavigationRedirect?: (route: string, params?: any) => {};
368
+ getOrders?: any;
369
+ loading?: boolean;
370
+ reload?: boolean;
371
+ tabs?: any;
372
+ loadMore: any
373
+ error?: boolean
368
374
  }
369
375
  export interface OrderDetailsParams {
370
376
  handleUpdateLocationDriver?: () => {};