ordering-ui-react-native 0.15.29 → 0.15.32
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.
- package/package.json +1 -1
- package/themes/business/index.tsx +2 -0
- package/themes/business/src/components/OrderDetails/Business.tsx +1 -0
- package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx +85 -17
- package/themes/business/src/components/OrdersListManager/index.tsx +871 -0
- package/themes/business/src/components/OrdersListManager/styles.tsx +123 -0
- package/themes/business/src/components/OrdersListManager/utils.tsx +216 -0
- package/themes/business/src/components/OrdersOption/index.tsx +1 -1
- package/themes/business/src/components/PreviousOrders/index.tsx +25 -8
- package/themes/original/src/components/BusinessController/index.tsx +25 -17
- package/themes/original/src/components/BusinessProductsList/index.tsx +1 -1
- package/themes/original/src/components/BusinessProductsListing/index.tsx +11 -23
- package/themes/original/src/components/BusinessesListing/index.tsx +16 -30
- package/themes/original/src/components/Checkout/index.tsx +2 -2
- package/themes/original/src/components/HighestRatedBusinesses/index.tsx +97 -89
- package/themes/original/src/components/Messages/index.tsx +28 -24
- package/themes/original/src/components/OrderProgress/index.tsx +1 -1
- package/themes/original/src/components/OrdersOption/index.tsx +2 -2
- package/themes/original/src/components/PreviousOrders/index.tsx +1 -1
- package/themes/original/src/components/ProductForm/styles.tsx +2 -1
- package/themes/original/src/components/ReviewOrder/index.tsx +10 -9
- package/themes/original/src/components/ReviewProducts/index.tsx +1 -1
- package/themes/original/src/components/UserProfile/index.tsx +4 -6
- package/themes/original/src/types/index.tsx +9 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
2
|
import {
|
|
3
|
-
|
|
3
|
+
BusinessList as BusinessesListingController,
|
|
4
4
|
useLanguage,
|
|
5
|
-
|
|
5
|
+
useOrder
|
|
6
6
|
} from 'ordering-components/native';
|
|
7
7
|
import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
|
|
8
8
|
import { View, ScrollView, Platform, Dimensions } from 'react-native';
|
|
@@ -24,117 +24,125 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
|
|
|
24
24
|
} = props;
|
|
25
25
|
|
|
26
26
|
const [, t] = useLanguage()
|
|
27
|
-
|
|
27
|
+
const [orderState] = useOrder()
|
|
28
28
|
|
|
29
29
|
const windowWidth = Dimensions.get('window').width;
|
|
30
30
|
|
|
31
31
|
useEffect(() => {
|
|
32
|
-
if (businessesList?.loading || !isLoading) return
|
|
32
|
+
if (businessesList?.loading || !isLoading) return
|
|
33
33
|
getBusinesses(true)
|
|
34
34
|
}, [isLoading])
|
|
35
35
|
|
|
36
36
|
return (
|
|
37
37
|
<>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
justifyContent: 'space-between',
|
|
71
|
-
}}>
|
|
72
|
-
<PlaceholderLine
|
|
73
|
-
height={15}
|
|
74
|
-
width={40}
|
|
75
|
-
style={{ marginBottom: 15 }}
|
|
76
|
-
/>
|
|
77
|
-
<PlaceholderLine
|
|
78
|
-
height={15}
|
|
79
|
-
width={20}
|
|
80
|
-
style={{ marginBottom: 15 }}
|
|
81
|
-
/>
|
|
82
|
-
</View>
|
|
38
|
+
|
|
39
|
+
{businessesList.loading ? (
|
|
40
|
+
<>
|
|
41
|
+
<ScrollView
|
|
42
|
+
showsHorizontalScrollIndicator={false}
|
|
43
|
+
nestedScrollEnabled
|
|
44
|
+
horizontal
|
|
45
|
+
style={{ height: 300, paddingHorizontal: 40 }}
|
|
46
|
+
>
|
|
47
|
+
{[
|
|
48
|
+
...Array(10).keys()
|
|
49
|
+
].map((item, i) => (
|
|
50
|
+
<Placeholder
|
|
51
|
+
Animation={Fade}
|
|
52
|
+
key={i}
|
|
53
|
+
style={{
|
|
54
|
+
marginTop: 20,
|
|
55
|
+
width: windowWidth - 100,
|
|
56
|
+
paddingHorizontal: 5,
|
|
57
|
+
height: '100%'
|
|
58
|
+
}}>
|
|
59
|
+
<View style={{ width: '100%' }}>
|
|
60
|
+
<PlaceholderLine
|
|
61
|
+
height={150}
|
|
62
|
+
style={{ marginBottom: 20, borderRadius: 8 }}
|
|
63
|
+
/>
|
|
64
|
+
<View style={{ paddingHorizontal: 10 }}>
|
|
65
|
+
<View
|
|
66
|
+
style={{
|
|
67
|
+
flexDirection: 'row',
|
|
68
|
+
justifyContent: 'space-between',
|
|
69
|
+
}}>
|
|
83
70
|
<PlaceholderLine
|
|
84
71
|
height={15}
|
|
85
|
-
width={
|
|
86
|
-
style={{ marginBottom:
|
|
72
|
+
width={40}
|
|
73
|
+
style={{ marginBottom: 15 }}
|
|
87
74
|
/>
|
|
88
75
|
<PlaceholderLine
|
|
89
76
|
height={15}
|
|
90
|
-
width={
|
|
91
|
-
style={{ marginBottom:
|
|
77
|
+
width={20}
|
|
78
|
+
style={{ marginBottom: 15 }}
|
|
92
79
|
/>
|
|
93
80
|
</View>
|
|
81
|
+
<PlaceholderLine
|
|
82
|
+
height={15}
|
|
83
|
+
width={30}
|
|
84
|
+
style={{ marginBottom: 10 }}
|
|
85
|
+
/>
|
|
86
|
+
<PlaceholderLine
|
|
87
|
+
height={15}
|
|
88
|
+
width={80}
|
|
89
|
+
style={{ marginBottom: 10 }}
|
|
90
|
+
/>
|
|
94
91
|
</View>
|
|
95
|
-
</
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
92
|
+
</View>
|
|
93
|
+
</Placeholder>
|
|
94
|
+
))}
|
|
95
|
+
</ScrollView>
|
|
96
|
+
</>
|
|
97
|
+
) : (
|
|
98
|
+
<>
|
|
99
|
+
{businessesList.businesses.length > 0 && (
|
|
100
|
+
<ListWrapper>
|
|
101
|
+
<OText size={16} mBottom={5} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('HIGHEST_RATED', 'Highest rated')}</OText>
|
|
102
|
+
<OText size={12}>{t('TOP_RATINGS_AND_GREAT_SERVICE', 'Top ratings and great service')}</OText>
|
|
103
|
+
<ScrollView
|
|
104
|
+
showsHorizontalScrollIndicator={false}
|
|
105
|
+
nestedScrollEnabled
|
|
106
|
+
horizontal
|
|
107
|
+
style={{ height: 300 }}
|
|
108
|
+
>
|
|
109
|
+
{
|
|
110
|
+
businessesList.businesses?.map(
|
|
111
|
+
(business: any) => (
|
|
112
|
+
<View
|
|
113
|
+
key={business.id}
|
|
114
|
+
style={{
|
|
115
|
+
width: windowWidth - 100,
|
|
116
|
+
paddingHorizontal: 5,
|
|
117
|
+
height: '100%'
|
|
118
|
+
}}
|
|
119
|
+
>
|
|
120
|
+
<BusinessController
|
|
121
|
+
business={business}
|
|
122
|
+
isBusinessOpen={business?.open}
|
|
123
|
+
handleCustomClick={onBusinessClick}
|
|
124
|
+
orderType={orderState?.options?.type}
|
|
125
|
+
navigation={navigation}
|
|
126
|
+
/>
|
|
127
|
+
</View>
|
|
128
|
+
)
|
|
119
129
|
)
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
)}
|
|
124
|
-
</>
|
|
130
|
+
}
|
|
131
|
+
</ScrollView>
|
|
132
|
+
</ListWrapper>
|
|
125
133
|
)}
|
|
126
|
-
|
|
127
|
-
|
|
134
|
+
</>
|
|
135
|
+
)}
|
|
128
136
|
</>
|
|
129
137
|
)
|
|
130
138
|
}
|
|
131
139
|
|
|
132
140
|
export const HighestRatedBusinesses = (props: any) => {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
141
|
+
const highestRatedBusinessesProps = {
|
|
142
|
+
...props,
|
|
143
|
+
UIComponent: HighestRatedBusinessesUI,
|
|
136
144
|
initialOrderByValue: 'rating'
|
|
137
|
-
|
|
145
|
+
};
|
|
138
146
|
|
|
139
|
-
|
|
147
|
+
return <BusinessesListingController {...highestRatedBusinessesProps} />;
|
|
140
148
|
};
|
|
@@ -332,30 +332,34 @@ const MessagesUI = (props: MessagesParams) => {
|
|
|
332
332
|
)
|
|
333
333
|
)
|
|
334
334
|
|
|
335
|
-
const renderSend = (props: any) =>
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
335
|
+
const renderSend = (props: any) => {
|
|
336
|
+
const isDisabled = (sendMessage?.loading || (message === '' && !image) || messages?.loading)
|
|
337
|
+
return (
|
|
338
|
+
<Send
|
|
339
|
+
{...props}
|
|
340
|
+
disabled={isDisabled}
|
|
341
|
+
alwaysShowSend
|
|
342
|
+
containerStyle={styles.containerSend}
|
|
343
|
+
>
|
|
344
|
+
<OIconButton
|
|
345
|
+
onClick={onSubmit}
|
|
346
|
+
style={{
|
|
347
|
+
height: 44,
|
|
348
|
+
width: 44,
|
|
349
|
+
borderRadius: 7.6,
|
|
350
|
+
opacity: isDisabled ? 0.2 : 1,
|
|
351
|
+
borderColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
|
|
352
|
+
backgroundColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
|
|
353
|
+
}}
|
|
354
|
+
iconStyle={{ marginTop: 3, marginRight: 2 }}
|
|
355
|
+
icon={theme.images.general.enter}
|
|
356
|
+
iconColor={isDisabled ? '#000' : '#fff'}
|
|
357
|
+
disabled={isDisabled}
|
|
358
|
+
disabledColor={theme.colors.secondary}
|
|
359
|
+
/>
|
|
360
|
+
</Send>
|
|
361
|
+
)
|
|
362
|
+
}
|
|
359
363
|
|
|
360
364
|
const renderBubble = (props: any) => (
|
|
361
365
|
<Bubble
|
|
@@ -218,7 +218,7 @@ export const OrderProgress = (props: any) => {
|
|
|
218
218
|
const orderProgressProps = {
|
|
219
219
|
...props,
|
|
220
220
|
UIComponent: OrderProgressUI,
|
|
221
|
-
orderStatus: [0, 3, 4, 7, 8, 9, 13, 14,
|
|
221
|
+
orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
|
|
222
222
|
useDefualtSessionManager: true,
|
|
223
223
|
paginationSettings: {
|
|
224
224
|
initialPage: 1,
|
|
@@ -239,8 +239,8 @@ export const OrdersOption = (props: OrdersOptionParams) => {
|
|
|
239
239
|
...props,
|
|
240
240
|
UIComponent: OrdersOptionUI,
|
|
241
241
|
orderStatus: props.preOrders ? [13] : props.activeOrders
|
|
242
|
-
? [0, 3, 4, 7, 8, 9, 14,
|
|
243
|
-
: [1, 2, 5, 6, 10, 11, 12, 16, 17],
|
|
242
|
+
? [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
|
|
243
|
+
: [1, 2, 5, 6, 10, 11, 12, 15, 16, 17],
|
|
244
244
|
useDefualtSessionManager: true,
|
|
245
245
|
}
|
|
246
246
|
|
|
@@ -85,7 +85,7 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
|
|
|
85
85
|
order: {
|
|
86
86
|
id: order?.id,
|
|
87
87
|
business_id: order?.business_id,
|
|
88
|
-
logo: order
|
|
88
|
+
logo: order?.business?.logo,
|
|
89
89
|
driver: order?.driver,
|
|
90
90
|
products: order?.products,
|
|
91
91
|
review: order?.review,
|
|
@@ -43,7 +43,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
43
43
|
logoWrapper: {
|
|
44
44
|
shadowColor: theme.colors.black,
|
|
45
45
|
shadowRadius: 3,
|
|
46
|
-
shadowOffset: {width: 1, height: 4},
|
|
46
|
+
shadowOffset: { width: 1, height: 4 },
|
|
47
47
|
elevation: 3,
|
|
48
48
|
borderRadius: 8,
|
|
49
49
|
shadowOpacity: 0.1,
|
|
@@ -108,11 +108,11 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
const qualificationList = [
|
|
111
|
-
{ key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,
|
|
111
|
+
{ key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
|
|
112
112
|
{ key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
|
|
113
113
|
{ key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
|
|
114
114
|
{ key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
|
|
115
|
-
{ key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,
|
|
115
|
+
{ key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
|
|
116
116
|
]
|
|
117
117
|
|
|
118
118
|
const commentsList = reviewCommentList('order')
|
|
@@ -137,7 +137,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
137
137
|
return found
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
const handleContinueClick
|
|
140
|
+
const handleContinueClick = () => {
|
|
141
141
|
if (!order?.review) {
|
|
142
142
|
onSubmit()
|
|
143
143
|
} else {
|
|
@@ -183,7 +183,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
183
183
|
comments.map(comment => _comments += comment.content + '. ')
|
|
184
184
|
}
|
|
185
185
|
let _comment
|
|
186
|
-
_comment = _comments
|
|
186
|
+
_comment = _comments + extraComment
|
|
187
187
|
setStars({ ...stars, comments: _comment })
|
|
188
188
|
}, [comments, extraComment])
|
|
189
189
|
|
|
@@ -214,7 +214,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
214
214
|
<OText color={theme.colors.primary}>{t('ORDER_REVIEWED', 'This order has been already reviewed')}</OText>
|
|
215
215
|
</View>
|
|
216
216
|
) : (
|
|
217
|
-
<View style={{flex: 1, justifyContent: 'flex-end'}}>
|
|
217
|
+
<View style={{ flex: 1, justifyContent: 'flex-end' }}>
|
|
218
218
|
<FormReviews>
|
|
219
219
|
<OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_ORDER', 'How was your order?')}</OText>
|
|
220
220
|
<RatingBarContainer>
|
|
@@ -266,7 +266,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
266
266
|
style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
|
|
267
267
|
imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
|
|
268
268
|
imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
|
|
269
|
-
onClick={() => handleChangeComment(commentItem)
|
|
269
|
+
onClick={() => handleChangeComment(commentItem)}
|
|
270
270
|
/>
|
|
271
271
|
))}
|
|
272
272
|
</CommentsButtonGroup>
|
|
@@ -304,7 +304,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
304
304
|
textStyle={{ color: theme.colors.white, paddingRight: 10 }}
|
|
305
305
|
text={t('CONTINUE', 'Continue')}
|
|
306
306
|
style={{ borderRadius: 8 }}
|
|
307
|
-
|
|
307
|
+
imgRightSrc={theme.images.general.arrow_right}
|
|
308
308
|
imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
|
|
309
309
|
onClick={handleSubmit(handleContinueClick)}
|
|
310
310
|
/>
|
|
@@ -317,7 +317,8 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
|
|
|
317
317
|
export const ReviewOrder = (props: ReviewOrderParams) => {
|
|
318
318
|
const reviewOrderProps = {
|
|
319
319
|
...props,
|
|
320
|
-
UIComponent: ReviewOrderUI
|
|
320
|
+
UIComponent: ReviewOrderUI,
|
|
321
|
+
defaultStar: 5
|
|
321
322
|
}
|
|
322
323
|
return <ReviewOrderController {...reviewOrderProps} />
|
|
323
324
|
}
|
|
@@ -74,7 +74,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
|
|
|
74
74
|
titleWrapStyle={{ paddingHorizontal: 0 }}
|
|
75
75
|
titleStyle={{ marginRight: 0, marginLeft: 0 }}
|
|
76
76
|
/>
|
|
77
|
-
{order?.products
|
|
77
|
+
{order?.products?.map((product: any) => (
|
|
78
78
|
<SingleProductReview
|
|
79
79
|
key={product.id}
|
|
80
80
|
product={product}
|
|
@@ -141,8 +141,8 @@ const ProfileListUI = (props: ProfileParams) => {
|
|
|
141
141
|
{t('PROFILE', 'Profile')}
|
|
142
142
|
</OText>
|
|
143
143
|
<CenterView style={styles.pagePadding}>
|
|
144
|
-
|
|
145
|
-
{
|
|
144
|
+
{user?.photo && (
|
|
145
|
+
<View style={styles.photo}>
|
|
146
146
|
<FastImage
|
|
147
147
|
style={{ height: 60, width: 60, borderRadius: 8 }}
|
|
148
148
|
source={{
|
|
@@ -151,10 +151,8 @@ const ProfileListUI = (props: ProfileParams) => {
|
|
|
151
151
|
}}
|
|
152
152
|
resizeMode={FastImage.resizeMode.cover}
|
|
153
153
|
/>
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
)}
|
|
157
|
-
</View>
|
|
154
|
+
</View>
|
|
155
|
+
)}
|
|
158
156
|
<View style={{ flexBasis: '70%' }}>
|
|
159
157
|
<OText size={20} lineHeight={30} weight={Platform.OS === 'ios' ? '500' : 'bold'} color={theme.colors.textNormal}>{user?.name} {user?.lastname}</OText>
|
|
160
158
|
<TouchableOpacity onPress={() => navigation.navigate('ProfileForm', { ...detailProps })}>
|
|
@@ -166,7 +166,15 @@ export interface BusinessControllerParams {
|
|
|
166
166
|
businessWillCloseSoonMinutes?: number
|
|
167
167
|
isBusinessClose?: number,
|
|
168
168
|
navigation?: any,
|
|
169
|
-
style?: ViewStyle
|
|
169
|
+
style?: ViewStyle,
|
|
170
|
+
businessHeader?: string,
|
|
171
|
+
businessFeatured?: boolean,
|
|
172
|
+
businessLogo?: string,
|
|
173
|
+
businessReviews?: any,
|
|
174
|
+
businessDeliveryPrice?: number,
|
|
175
|
+
businessDeliveryTime?: string,
|
|
176
|
+
businessPickupTime?: string,
|
|
177
|
+
businessDistance?: number
|
|
170
178
|
}
|
|
171
179
|
export interface BusinessProductsListingParams {
|
|
172
180
|
navigation?: any;
|