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.
Files changed (24) hide show
  1. package/package.json +1 -1
  2. package/themes/business/index.tsx +2 -0
  3. package/themes/business/src/components/OrderDetails/Business.tsx +1 -0
  4. package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx +85 -17
  5. package/themes/business/src/components/OrdersListManager/index.tsx +871 -0
  6. package/themes/business/src/components/OrdersListManager/styles.tsx +123 -0
  7. package/themes/business/src/components/OrdersListManager/utils.tsx +216 -0
  8. package/themes/business/src/components/OrdersOption/index.tsx +1 -1
  9. package/themes/business/src/components/PreviousOrders/index.tsx +25 -8
  10. package/themes/original/src/components/BusinessController/index.tsx +25 -17
  11. package/themes/original/src/components/BusinessProductsList/index.tsx +1 -1
  12. package/themes/original/src/components/BusinessProductsListing/index.tsx +11 -23
  13. package/themes/original/src/components/BusinessesListing/index.tsx +16 -30
  14. package/themes/original/src/components/Checkout/index.tsx +2 -2
  15. package/themes/original/src/components/HighestRatedBusinesses/index.tsx +97 -89
  16. package/themes/original/src/components/Messages/index.tsx +28 -24
  17. package/themes/original/src/components/OrderProgress/index.tsx +1 -1
  18. package/themes/original/src/components/OrdersOption/index.tsx +2 -2
  19. package/themes/original/src/components/PreviousOrders/index.tsx +1 -1
  20. package/themes/original/src/components/ProductForm/styles.tsx +2 -1
  21. package/themes/original/src/components/ReviewOrder/index.tsx +10 -9
  22. package/themes/original/src/components/ReviewProducts/index.tsx +1 -1
  23. package/themes/original/src/components/UserProfile/index.tsx +4 -6
  24. package/themes/original/src/types/index.tsx +9 -1
@@ -1,8 +1,8 @@
1
1
  import React, { useEffect } from 'react';
2
2
  import {
3
- BusinessList as BusinessesListingController,
3
+ BusinessList as BusinessesListingController,
4
4
  useLanguage,
5
- useOrder
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
- const [orderState] = useOrder();
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
- <ListWrapper>
39
- <OText size={16} mBottom={5} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('HIGHEST_RATED', 'Highest rated')}</OText>
40
- <OText size={12}>{t('TOP_RATINGS_AND_GREAT_SERVICE', 'Top ratings and great service')}</OText>
41
- <ScrollView
42
- showsHorizontalScrollIndicator={false}
43
- nestedScrollEnabled
44
- horizontal
45
- style={{ height: 300 }}
46
- >
47
- {businessesList.loading ? (
48
- <>
49
- {[
50
- ...Array(10).keys()
51
- ].map((item, i) => (
52
- <Placeholder
53
- Animation={Fade}
54
- key={i}
55
- style={{
56
- marginTop: 20,
57
- width: windowWidth - 100,
58
- paddingHorizontal: 5,
59
- height: '100%'
60
- }}>
61
- <View style={{ width: '100%' }}>
62
- <PlaceholderLine
63
- height={150}
64
- style={{ marginBottom: 20, borderRadius: 8 }}
65
- />
66
- <View style={{ paddingHorizontal: 10 }}>
67
- <View
68
- style={{
69
- flexDirection: 'row',
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={30}
86
- style={{ marginBottom: 10 }}
72
+ width={40}
73
+ style={{ marginBottom: 15 }}
87
74
  />
88
75
  <PlaceholderLine
89
76
  height={15}
90
- width={80}
91
- style={{ marginBottom: 10 }}
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
- </Placeholder>
96
- ))}
97
- </>
98
- ) : (
99
- <>
100
- {businessesList.businesses.length > 0 ? (
101
- businessesList.businesses?.map(
102
- (business: any) => (
103
- <View
104
- key={business.id}
105
- style={{
106
- width: windowWidth - 100,
107
- paddingHorizontal: 5,
108
- height: '100%'
109
- }}
110
- >
111
- <BusinessController
112
- business={business}
113
- isBusinessOpen={business?.open}
114
- handleCustomClick={onBusinessClick}
115
- orderType={orderState?.options?.type}
116
- navigation={navigation}
117
- />
118
- </View>
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
- <NotFoundSource />
123
- )}
124
- </>
130
+ }
131
+ </ScrollView>
132
+ </ListWrapper>
125
133
  )}
126
- </ScrollView>
127
- </ListWrapper>
134
+ </>
135
+ )}
128
136
  </>
129
137
  )
130
138
  }
131
139
 
132
140
  export const HighestRatedBusinesses = (props: any) => {
133
- const highestRatedBusinessesProps = {
134
- ...props,
135
- UIComponent: HighestRatedBusinessesUI,
141
+ const highestRatedBusinessesProps = {
142
+ ...props,
143
+ UIComponent: HighestRatedBusinessesUI,
136
144
  initialOrderByValue: 'rating'
137
- };
145
+ };
138
146
 
139
- return <BusinessesListingController {...highestRatedBusinessesProps} />;
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
- <Send
337
- {...props}
338
- disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
339
- alwaysShowSend
340
- containerStyle={styles.containerSend}
341
- >
342
- <OIconButton
343
- onClick={onSubmit}
344
- style={{
345
- height: 44,
346
- width: 44,
347
- borderRadius: 7.6,
348
- opacity: (sendMessage?.loading || (message === '' && !image) || messages?.loading) ? 0.4 : 1,
349
- borderColor: theme.colors.primary,
350
- backgroundColor: theme.colors.primary,
351
- }}
352
- iconStyle={{ marginTop: 3, marginRight: 2 }}
353
- icon={theme.images.general.enter}
354
- disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
355
- disabledColor={theme.colors.white}
356
- />
357
- </Send>
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, 15, 18, 19, 20, 21, 22, 23],
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, 15, 18, 19, 20, 21, 22, 23]
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.business?.logo,
88
+ logo: order?.business?.logo,
89
89
  driver: order?.driver,
90
90
  products: order?.products,
91
91
  review: order?.review,
@@ -6,9 +6,10 @@ export const WrapHeader = styled.View`
6
6
  `
7
7
 
8
8
  export const TopActions = styled.TouchableOpacity`
9
- height: 44px;
9
+ height: 60px;
10
10
  justify-content: center;
11
11
  padding-horizontal: 30px;
12
+ width: 80px;
12
13
  `;
13
14
 
14
15
  export const TopHeader = styled.View`
@@ -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, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
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, pointerColor: 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 + extraComment
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
- imgRightSrc={theme.images.general.arrow_right}
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.map((product: any) => (
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
- <View style={styles.photo}>
145
- {user?.photo ? (
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
- <Ionicons name='person-outline' size={50} style={{ marginRight: 10 }} />
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;