ordering-ui-react-native 0.12.9 → 0.12.10

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 (16) hide show
  1. package/package.json +1 -1
  2. package/themes/single-business/src/components/ActiveOrders/index.tsx +20 -19
  3. package/themes/single-business/src/components/BusinessProductsListing/index.tsx +4 -4
  4. package/themes/single-business/src/components/Cart/index.tsx +39 -47
  5. package/themes/single-business/src/components/Cart/styles.tsx +1 -0
  6. package/themes/single-business/src/components/LoginForm/index.tsx +147 -89
  7. package/themes/single-business/src/components/LoginForm/styles.tsx +33 -28
  8. package/themes/single-business/src/components/OrderDetails/index.tsx +32 -12
  9. package/themes/single-business/src/components/OrdersOption/index.tsx +50 -50
  10. package/themes/single-business/src/components/OrdersOption/styles.tsx +1 -1
  11. package/themes/single-business/src/components/PreviousOrders/index.tsx +97 -83
  12. package/themes/single-business/src/components/ReviewOrder/index.tsx +299 -274
  13. package/themes/single-business/src/components/ReviewOrder/styles.tsx +23 -26
  14. package/themes/single-business/src/components/UpsellingProducts/index.tsx +230 -189
  15. package/themes/single-business/src/components/UpsellingProducts/styles.tsx +24 -18
  16. package/themes/single-business/src/types/index.tsx +10 -2
package/themes/single-business/src/components/OrderDetails/index.tsx CHANGED
@@ -53,6 +53,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
53
53
  messagesReadList,
54
54
  isFromCheckout,
55
55
  driverLocation,
56
+ onNavigationRedirect
56
57
  } = props;
57
58
 
58
59
  const theme = useTheme();
@@ -92,6 +93,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
92
93
 
93
94
  const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
94
95
  const [openModalForDriver, setOpenModalForDriver] = useState(false);
96
+ const [isReviewed, setIsReviewed] = useState(false)
95
97
  const [unreadAlert, setUnreadAlert] = useState({
96
98
  business: false,
97
99
  driver: false,
@@ -394,18 +396,36 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
394
396
  ? parseDate(order?.delivery_datetime_utc)
395
397
  : parseDate(order?.delivery_datetime, { utc: false })}
396
398
  </OText>
397
- <TouchableOpacity
398
- activeOpacity={0.7}
399
- style={{ marginTop: 6 }}
400
- onPress={() => { }}>
401
- <OText
402
- size={10}
403
- lineHeight={15}
404
- color={theme.colors.textSecondary}
405
- style={{ textDecorationLine: 'underline' }}>
406
- {t('REVIEW_ORDER', 'Review order')}
407
- </OText>
408
- </TouchableOpacity>
399
+ {(
400
+ parseInt(order?.status, 10) === 1 ||
401
+ parseInt(order?.status, 10) === 11 ||
402
+ parseInt(order?.status, 10) === 15
403
+ ) && !order.review && !isReviewed && (
404
+ <TouchableOpacity
405
+ activeOpacity={0.7}
406
+ style={{ marginTop: 6 }}
407
+ onPress={() => onNavigationRedirect('ReviewOrder', {
408
+ order: {
409
+ id: order?.id,
410
+ business_id: order?.business_id,
411
+ logo: order.business?.logo,
412
+ driver: order?.driver,
413
+ products: order?.products,
414
+ review: order?.review,
415
+ user_review: order?.user_review
416
+ },
417
+ setIsReviewed
418
+ })}
419
+ >
420
+ <OText
421
+ size={10}
422
+ lineHeight={15}
423
+ color={theme.colors.textSecondary}
424
+ style={{ textDecorationLine: 'underline' }}>
425
+ {t('REVIEW_ORDER', 'Review order')}
426
+ </OText>
427
+ </TouchableOpacity>
428
+ )}
409
429
 
410
430
  <StaturBar>
411
431
  <LinearGradient
package/themes/single-business/src/components/OrdersOption/index.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { useState, useEffect } from 'react'
2
2
  import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
3
- import { useFocusEffect } from '@react-navigation/native'
4
3
  import { OText } from '../shared'
5
4
  import { NotFoundSource } from '../NotFoundSource'
6
5
  import { ActiveOrders } from '../ActiveOrders'
@@ -32,7 +31,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
32
31
  ordersLength,
33
32
  setOrdersLength,
34
33
  businessId,
35
- preOrders
34
+ preOrders,
35
+ sortOrders
36
36
  } = props
37
37
 
38
38
  const theme = useTheme()
@@ -45,7 +45,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
45
45
  ? theme.images.general.emptyActiveOrders
46
46
  : theme.images.general.emptyPastOrders
47
47
 
48
- const orders = customArray || values || []
48
+ let [orders, setOrders] = useState(values)
49
49
 
50
50
  const [reorderLoading, setReorderLoading] = useState(false)
51
51
  const [isLoadingFirstRender, setIsLoadingFirstRender] = useState(false)
@@ -99,44 +99,44 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
99
99
  return objectStatus && objectStatus
100
100
  }
101
101
 
102
- useFocusEffect(
103
- React.useCallback(() => {
104
- loadOrders && loadOrders()
105
- setIsLoadingFirstRender(false)
106
- return () => {
107
- setIsLoadingFirstRender(true)
108
- }
109
- }, [navigation])
110
- )
111
-
112
102
  useEffect(() => {
113
103
  setOrdersLength && setOrdersLength({
114
104
  ...ordersLength,
115
- [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: orders.length
105
+ [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: values.length
116
106
  })
117
- }, [orders.length])
107
+ }, [values.length])
118
108
 
109
+ useEffect(() => {
110
+ setOrders(
111
+ sortOrders(
112
+ values.filter((order: any) => orderStatus.includes(order.status))
113
+ )
114
+ )
115
+ }, [values])
119
116
 
120
117
  return (
121
118
  <>
122
119
  <OptionTitle>
123
- {(!activeOrders || (activeOrders && ordersLength.activeOrdersLength > 0) || (ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength === 0)) && !isLoadingFirstRender && (
124
- <OText size={16} color={theme.colors.textPrimary} mBottom={10} style={activeOrders ? { paddingHorizontal: 0 } : {}}>
120
+ {orders.length > 0 && !isLoadingFirstRender && (
121
+ <OText
122
+ size={16}
123
+ color={theme.colors.textPrimary}
124
+ mBottom={10}
125
+ style={activeOrders ? { paddingHorizontal: 0 } : {}}
126
+ >
125
127
  {titleContent || (
126
- preOrders ? t('UPCOMING', 'UPCOMING')
128
+ preOrders ? t('UPCOMING', 'Upcoming')
127
129
  : activeOrders ? t('ACTIVE', 'Active')
128
130
  : t('PAST', 'Past'))}
129
131
  </OText>
130
132
  )}
131
133
  </OptionTitle>
132
- {!loading && orders.length === 0 && !isLoadingFirstRender && activeOrders && ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength !== 0 && (
133
- <NotFoundSource
134
- content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
135
- image={imageFails}
136
- conditioned
137
- />
138
- )}
139
- {!loading && orders.length === 0 && !isLoadingFirstRender && ordersLength.previousOrdersLength === 0 && (
134
+ {!loading &&
135
+ orders.length === 0 &&
136
+ !isLoadingFirstRender &&
137
+ ordersLength.previousOrdersLength === 0 &&
138
+ ordersLength.activeOrdersLength === 0 &&
139
+ (
140
140
  <NotFoundSource
141
141
  content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
142
142
  image={imageFails}
@@ -191,31 +191,31 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
191
191
  setScreen={setScreen}
192
192
  screen={screen}
193
193
  />
194
- ) : (
194
+ ) : (
195
195
  <>
196
- {preOrders ?
197
- <ActiveOrders
198
- orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
199
- pagination={pagination}
200
- loadMoreOrders={loadMoreOrders}
201
- reorderLoading={reorderLoading}
202
- customArray={customArray}
203
- getOrderStatus={getOrderStatus}
204
- onNavigationRedirect={onNavigationRedirect}
205
- setScreen={setScreen}
206
- screen={screen}
207
- isPreorders
208
- />
209
- : <PreviousOrders
210
- reorderLoading={reorderLoading}
211
- orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
212
- pagination={pagination}
213
- loadMoreOrders={loadMoreOrders}
214
- getOrderStatus={getOrderStatus}
215
- onNavigationRedirect={onNavigationRedirect}
216
- handleReorder={handleReorder}
217
- />
218
- }
196
+ {preOrders ?
197
+ <ActiveOrders
198
+ orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
199
+ pagination={pagination}
200
+ loadMoreOrders={loadMoreOrders}
201
+ reorderLoading={reorderLoading}
202
+ customArray={customArray}
203
+ getOrderStatus={getOrderStatus}
204
+ onNavigationRedirect={onNavigationRedirect}
205
+ setScreen={setScreen}
206
+ screen={screen}
207
+ isPreorders
208
+ />
209
+ : <PreviousOrders
210
+ reorderLoading={reorderLoading}
211
+ orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
212
+ pagination={pagination}
213
+ loadMoreOrders={loadMoreOrders}
214
+ getOrderStatus={getOrderStatus}
215
+ onNavigationRedirect={onNavigationRedirect}
216
+ handleReorder={handleReorder}
217
+ />
218
+ }
219
219
  </>
220
220
  )
221
221
  )}
package/themes/single-business/src/components/OrdersOption/styles.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import styled from 'styled-components/native'
2
2
 
3
3
  export const OptionTitle = styled.View`
4
- margin-top: 24px;
4
+ margin-top: 10px;
5
5
  `
package/themes/single-business/src/components/PreviousOrders/index.tsx CHANGED
@@ -73,21 +73,32 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
73
73
  const [reorderSelected, setReorderSelected] = useState<number | null>(null);
74
74
  const [{ parseDate, optimizeImage }] = useUtils();
75
75
  const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
76
+ const [isReviewedOrders, setIsReviewedOrders] = useState<Array<any>>([])
76
77
 
77
78
  const handleClickViewOrder = (uuid: string) => {
78
79
  onNavigationRedirect &&
79
80
  onNavigationRedirect('OrderDetails', { orderId: uuid });
80
81
  };
81
82
 
83
+ const handleReviewState = (orderId: any) => {
84
+ if (!orderId || isReviewedOrders.includes(orderId)) return
85
+ setIsReviewedOrders([ ...isReviewedOrders, orderId ])
86
+ }
87
+
82
88
  const handleClickOrderReview = (order: any) => {
83
89
  onNavigationRedirect &&
84
90
  onNavigationRedirect('ReviewOrder', {
85
- order: {
86
- id: order?.id,
87
- business_id: order?.business_id,
88
- logo: order.business?.logo,
89
- },
90
- });
91
+ order: {
92
+ id: order?.id,
93
+ business_id: order?.business_id,
94
+ logo: order.business?.logo,
95
+ driver: order?.driver,
96
+ products: order?.products,
97
+ review: order?.review,
98
+ user_review: order?.user_review
99
+ },
100
+ handleReviewState: handleReviewState
101
+ });
91
102
  };
92
103
 
93
104
  const formatDate = (date: string, option?: any) => {
@@ -100,82 +111,85 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
100
111
  };
101
112
 
102
113
  return (
103
- <View style={{ marginBottom: 30 }}>
104
- {orders.map((order: any) => (
105
- <TouchableOpacity
106
- onPress={() => handleClickViewOrder(order?.uuid)}
107
- activeOpacity={0.7}
108
- style={{ flexDirection: 'row' }}
109
- key={order.id}>
110
- <Card>
111
- {/* {!!order.business?.logo && (
112
- <Logo>
113
- <OIcon
114
- url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
115
- style={styles.logo}
116
- />
117
- </Logo>
118
- )} */}
119
- <Information>
120
- <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
121
- {`${t('ORDER_NO', 'Order No')}.${order.id}`}
122
- </OText>
123
- <OText
124
- size={10}
125
- lineHeight={21}
126
- color={theme.colors.textSecondary}
127
- style={{ marginVertical: 3 }}
128
- numberOfLines={1}>
129
- {order?.delivery_datetime_utc
130
- ? formatDate(order?.delivery_datetime_utc)
131
- : formatDate(order?.delivery_datetime, { utc: false })}
132
- </OText>
133
- <OText
134
- color={theme.colors.primary}
135
- size={10}
136
- lineHeight={15}
137
- numberOfLines={1}>
138
- {getOrderStatus(order.status)?.value}
139
- </OText>
140
- </Information>
141
- <Status>
142
- <OButton
143
- text={t('REORDER', 'Reorder')}
144
- imgRightSrc={''}
145
- textStyle={styles.buttonText}
146
- style={
147
- reorderLoading && order.id === reorderSelected
148
- ? styles.reorderLoading
149
- : styles.reorderbutton
150
- }
151
- onClick={() => handleReorderClick(order.id)}
152
- isLoading={reorderLoading && order.id === reorderSelected}
153
- />
154
- {allowedOrderStatus.includes(parseInt(order?.status)) &&
155
- !order.review && (
156
- <TouchableOpacity
157
- onPress={() => handleClickOrderReview(order)}
158
- style={styles.reviewButton}>
159
- <OText size={10} color={theme.colors.primary} numberOfLines={1}>
160
- {t('REVIEW', 'Review')}
161
- </OText>
162
- </TouchableOpacity>
163
- )}
164
- </Status>
165
- </Card>
166
- </TouchableOpacity>
167
- ))}
168
- {pagination.totalPages && pagination.currentPage < pagination.totalPages && (
169
- <WrappButton>
170
- <OButton
171
- onClick={loadMoreOrders}
172
- text={t('LOAD_MORE_ORDERS', 'Load more orders')}
173
- imgRightSrc={null}
174
- textStyle={{ color: theme.colors.white }}
175
- style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
176
- />
177
- </WrappButton>
178
- )}
179
- </View>
114
+ orders.length === 0 ? null : (
115
+ <View style={{ marginBottom: 30 }}>
116
+ {orders.map((order: any) => (
117
+ <TouchableOpacity
118
+ onPress={() => handleClickViewOrder(order?.uuid)}
119
+ activeOpacity={0.7}
120
+ style={{ flexDirection: 'row' }}
121
+ key={order.id}>
122
+ <Card>
123
+ {/* {!!order.business?.logo && (
124
+ <Logo>
125
+ <OIcon
126
+ url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
127
+ style={styles.logo}
128
+ />
129
+ </Logo>
130
+ )} */}
131
+ <Information>
132
+ <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
133
+ {`${t('ORDER_NO', 'Order No')}.${order.id}`}
134
+ </OText>
135
+ <OText
136
+ size={10}
137
+ lineHeight={21}
138
+ color={theme.colors.textSecondary}
139
+ style={{ marginVertical: 3 }}
140
+ numberOfLines={1}>
141
+ {order?.delivery_datetime_utc
142
+ ? formatDate(order?.delivery_datetime_utc)
143
+ : formatDate(order?.delivery_datetime, { utc: false })}
144
+ </OText>
145
+ <OText
146
+ color={theme.colors.primary}
147
+ size={10}
148
+ lineHeight={15}
149
+ numberOfLines={1}>
150
+ {getOrderStatus(order.status)?.value}
151
+ </OText>
152
+ </Information>
153
+ <Status>
154
+ <OButton
155
+ text={t('REORDER', 'Reorder')}
156
+ imgRightSrc={''}
157
+ textStyle={styles.buttonText}
158
+ style={
159
+ reorderLoading && order.id === reorderSelected
160
+ ? styles.reorderLoading
161
+ : styles.reorderbutton
162
+ }
163
+ onClick={() => handleReorderClick(order.id)}
164
+ isLoading={reorderLoading && order.id === reorderSelected}
165
+ />
166
+ {allowedOrderStatus.includes(parseInt(order?.status)) &&
167
+ !order.review && !isReviewedOrders.includes(order?.id) &&
168
+ (
169
+ <TouchableOpacity
170
+ onPress={() => handleClickOrderReview(order)}
171
+ style={styles.reviewButton}>
172
+ <OText size={10} color={theme.colors.primary} numberOfLines={1}>
173
+ {t('REVIEW', 'Review')}
174
+ </OText>
175
+ </TouchableOpacity>
176
+ )}
177
+ </Status>
178
+ </Card>
179
+ </TouchableOpacity>
180
+ ))}
181
+ {pagination.totalPages && pagination.currentPage < pagination.totalPages && (
182
+ <WrappButton>
183
+ <OButton
184
+ onClick={loadMoreOrders}
185
+ text={t('LOAD_MORE_ORDERS', 'Load more orders')}
186
+ imgRightSrc={null}
187
+ textStyle={{ color: theme.colors.white }}
188
+ style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
189
+ />
190
+ </WrappButton>
191
+ )}
192
+ </View>
193
+ )
180
194
  );
181
195
  };