ordering-ui-react-native 0.12.46 → 0.12.50

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.12.46",
3
+ "version": "0.12.50",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
@@ -132,7 +132,7 @@ export const ProductOptionsUI = (props: any) => {
132
132
  ) : (
133
133
  <>
134
134
  <View style={{ flexDirection: 'column', width: '100%' }}>
135
- <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}{'price'}</OText>
135
+ <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}</OText>
136
136
  <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10 }}>
137
137
  <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
138
138
  <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'}>
@@ -214,7 +214,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
214
214
  if (actions && action === 'accept') {
215
215
  const interval = setTimeout(() => {
216
216
  timerRef?.current?.focus?.()
217
- }, 250)
217
+ }, 200)
218
218
  return () => {
219
219
  clearTimeout(interval)
220
220
  }
@@ -225,7 +225,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
225
225
  <KeyboardAvoidingView
226
226
  enabled
227
227
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
228
- style={{ flex: 1, paddingHorizontal: 30, paddingTop: 30, marginTop: top, marginBottom: bottom, justifyContent: 'space-between' }}>
228
+ style={{ flex: 1, paddingHorizontal: 30, paddingVertical: 30, marginTop: top, marginBottom: bottom, justifyContent: 'space-between' }}>
229
229
  <View>
230
230
  <OIconButton
231
231
  icon={theme.images.general.arrow_left}
@@ -369,6 +369,8 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
369
369
  placeholderTextColor={theme.colors.textGray}
370
370
  color={theme.colors.textGray}
371
371
  onEndEditing={handleFixTime}
372
+ onSubmitEditing={() => handleAcceptOrReject()}
373
+ onBlur={() => actions && action === 'accept' && timerRef?.current?.focus?.()}
372
374
  />
373
375
 
374
376
  {showTextArea && (
@@ -384,7 +386,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
384
386
  value={comments}
385
387
  onChange={setComments}
386
388
  />
387
- <View style={{ height: 20 }} />
388
389
  </Comments>
389
390
  )}
390
391
  </Content>
@@ -33,4 +33,5 @@ export const Action = styled.View``;
33
33
 
34
34
  export const Comments = styled.View`
35
35
  margin-top: 20px;
36
+ padding-bottom: 40px;
36
37
  `;
@@ -157,9 +157,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
157
157
  : '';
158
158
 
159
159
  const customerName = !!order?.customer?.name
160
- ? `${order?.customer?.name} ${order?.customer?.middle_name || ''} ${
161
- order?.customer?.lastname || ''
162
- } ${order?.customer?.second_lastname || ''} \n`
160
+ ? `${order?.customer?.name} ${order?.customer?.middle_name || ''} ${order?.customer?.lastname || ''
161
+ } ${order?.customer?.second_lastname || ''} \n`
163
162
  : '';
164
163
 
165
164
  const customerEmail = !!order?.customer.email
@@ -183,26 +182,25 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
183
182
  : '';
184
183
 
185
184
  const payment = order?.paymethod?.name
186
- ? `${order?.paymethod?.name} - ${
187
- order.delivery_type === 1
188
- ? t('DELIVERY', 'Delivery')
189
- : order.delivery_type === 2
190
- ? t('PICKUP', 'Pickup')
191
- : order.delivery_type === 3
185
+ ? `${order?.paymethod?.name} - ${order.delivery_type === 1
186
+ ? t('DELIVERY', 'Delivery')
187
+ : order.delivery_type === 2
188
+ ? t('PICKUP', 'Pickup')
189
+ : order.delivery_type === 3
192
190
  ? t('EAT_IN', 'Eat in')
193
191
  : order.delivery_type === 4
194
- ? t('CURBSIDE', 'Curbside')
195
- : t('DRIVER_THRU', 'Driver thru')
196
- }\n`
192
+ ? t('CURBSIDE', 'Curbside')
193
+ : t('DRIVER_THRU', 'Driver thru')
194
+ }\n`
197
195
  : '';
198
196
 
199
197
  const getSuboptions = (suboptions: any) => {
200
198
  const array: any = []
201
199
  suboptions?.length > 0 &&
202
- suboptions?.map((suboption: any) => {
203
- const string = `${getFormattedSubOptionName(suboption)}`
204
- array.push(string)
205
- })
200
+ suboptions?.map((suboption: any) => {
201
+ const string = `${getFormattedSubOptionName(suboption)}`
202
+ array.push(string)
203
+ })
206
204
 
207
205
  return array.join('')
208
206
  }
@@ -211,12 +209,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
211
209
  const array: any = [];
212
210
 
213
211
  options?.length &&
214
- options?.map((option: any) => {
215
- const string =
216
- ` ${option.name}\n ${getSuboptions(option.suboptions)}`;
212
+ options?.map((option: any) => {
213
+ const string =
214
+ ` ${option.name}\n ${getSuboptions(option.suboptions)}`;
217
215
 
218
- array.push(string)
219
- })
216
+ array.push(string)
217
+ })
220
218
 
221
219
  if (productComment) {
222
220
  array.push(` ${t('COMMENT', 'Comment')}\n ${productComment}\n`)
@@ -415,7 +413,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
415
413
  onClickButton={() => navigation.navigate('Orders')}
416
414
  />
417
415
  )}
418
-
419
416
  {order && Object.keys(order).length > 0 && (error?.length < 1 || !error) && (
420
417
  <View style={{ flex: 1 }}>
421
418
  <OrderHeaderComponent
@@ -423,6 +420,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
423
420
  handleOpenMapView={handleOpenMapView}
424
421
  handleOpenMessagesForBusiness={handleOpenMessagesForBusiness}
425
422
  getOrderStatus={getOrderStatus}
423
+ handleViewSummaryOrder={handleViewSummaryOrder}
424
+ handleCopyClipboard={handleCopyClipboard}
426
425
  handleArrowBack={handleArrowBack}
427
426
  />
428
427
  <OrderDetailsContainer
@@ -468,7 +467,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
468
467
  <OText>
469
468
  {itemsDrivers.length > 0
470
469
  ? order?.driver?.name ||
471
- t('SELECT_DRIVER', 'Select Driver')
470
+ t('SELECT_DRIVER', 'Select Driver')
472
471
  : t('WITHOUT_DRIVERS', 'Without drivers')}
473
472
  </OText>
474
473
  <OIcon
@@ -515,66 +514,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
515
514
  </AssignDriver>
516
515
  )}
517
516
 
518
- {order?.status === 7 && (
519
- <Pickup>
520
- <OButton
521
- style={styles.btnPickUp}
522
- textStyle={{ color: theme.colors.primary }}
523
- text={t('READY_FOR_PICKUP', 'Ready for pickup')}
524
- onClick={() =>
525
- handleChangeOrderStatus && handleChangeOrderStatus(4)
526
- }
527
- imgLeftStyle={{ tintColor: theme.colors.backArrow }}
528
- imgRightSrc={false}
529
- isLoading={loading}
530
- />
531
- </Pickup>
532
- )}
533
-
534
- {order?.status === 4 && ![1].includes(order?.delivery_type) && (
535
- <Pickup>
536
- <OButton
537
- style={{
538
- ...styles.btnPickUp,
539
- backgroundColor: theme.colors.green,
540
- }}
541
- textStyle={{ color: theme.colors.white }}
542
- text={t(
543
- 'PICKUP_COMPLETED_BY_CUSTOMER',
544
- 'Pickup completed by customer',
545
- )}
546
- onClick={() =>
547
- handleChangeOrderStatus && handleChangeOrderStatus(15)
548
- }
549
- imgLeftStyle={{ tintColor: theme.colors.backArrow }}
550
- imgRightSrc={false}
551
- isLoading={loading}
552
- />
553
- </Pickup>
554
- )}
555
-
556
- {order?.status === 4 && ![1].includes(order?.delivery_type) && (
557
- <Pickup>
558
- <OButton
559
- style={{
560
- ...styles.btnPickUp,
561
- backgroundColor: theme.colors.red,
562
- }}
563
- textStyle={{ color: theme.colors.white }}
564
- text={t(
565
- 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
566
- 'Order not picked up by customer',
567
- )}
568
- onClick={() =>
569
- handleChangeOrderStatus && handleChangeOrderStatus(17)
570
- }
571
- imgLeftStyle={{ tintColor: theme.colors.backArrow }}
572
- imgRightSrc={false}
573
- isLoading={loading}
574
- />
575
- </Pickup>
576
- )}
577
-
578
517
  <OModal
579
518
  open={openModalForBusiness}
580
519
  order={order}
@@ -636,7 +575,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
636
575
  {order &&
637
576
  Object.keys(order).length > 0 &&
638
577
  getOrderStatus(order?.status, t)?.value ===
639
- t('PENDING', 'Pending') && (
578
+ t('PENDING', 'Pending') && (
640
579
  <FloatingButton
641
580
  btnText={t('REJECT', 'Reject')}
642
581
  isSecondaryBtn={false}
@@ -649,24 +588,37 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
649
588
  widthButton={'45%'}
650
589
  />
651
590
  )}
652
-
653
- {order &&
654
- Object.keys(order).length > 0 &&
655
- getOrderStatus(order?.status, t)?.value !==
656
- t('PENDING', 'Pending') && (
657
- <FloatingButton
658
- btnText={t('COPY', 'Copy')}
659
- isSecondaryBtn={false}
660
- colorTxt1={theme.colors.primary}
661
- secondButtonClick={handleViewSummaryOrder}
662
- firstButtonClick={handleCopyClipboard}
663
- secondBtnText={t('PRINT', 'Print')}
664
- secondButton={true}
665
- firstColorCustom="transparent"
666
- secondColorCustom={theme.colors.primary}
667
- widthButton={'45%'}
668
- />
669
- )}
591
+ {order?.status === 7 && (
592
+ <FloatingButton
593
+ btnText={t('READY_FOR_PICKUP', 'Ready for pickup')}
594
+ colorTxt1={theme.colors.primary}
595
+ color={theme.colors.btnBGWhite}
596
+ firstButtonClick={() => handleChangeOrderStatus?.(4)}
597
+ widthButton={'100%'}
598
+ disabled={loading}
599
+ />
600
+ )}
601
+ {order?.status === 4 && ![1].includes(order?.delivery_type) && (
602
+ <FloatingButton
603
+ btnText={t(
604
+ 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
605
+ 'Order not picked up by customer',
606
+ )}
607
+ isSecondaryBtn={false}
608
+ colorTxt1={theme.colors.white}
609
+ secondButtonClick={() => handleChangeOrderStatus?.(15)}
610
+ firstButtonClick={() => handleChangeOrderStatus?.(17)}
611
+ secondBtnText={t(
612
+ 'PICKUP_COMPLETED_BY_CUSTOMER',
613
+ 'Pickup completed by customer',
614
+ )}
615
+ secondButton={true}
616
+ firstColorCustom={theme.colors.red}
617
+ secondColorCustom={theme.colors.green}
618
+ widthButton={'45%'}
619
+ disabled={loading}
620
+ />
621
+ )}
670
622
  </View>
671
623
  )}
672
624
  </>
@@ -27,7 +27,9 @@ interface OrderHeader {
27
27
  handleOpenMapView?: any,
28
28
  handleOpenMessagesForBusiness?: any,
29
29
  getOrderStatus?: any,
30
- logisticOrderStatus?: Array<number>
30
+ logisticOrderStatus?: Array<number>,
31
+ handleViewSummaryOrder: any;
32
+ handleCopyClipboard: any
31
33
  }
32
34
 
33
35
  export const OrderHeaderComponent = (props: OrderHeader) => {
@@ -37,7 +39,9 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
37
39
  handleOpenMapView,
38
40
  handleOpenMessagesForBusiness,
39
41
  getOrderStatus,
40
- logisticOrderStatus
42
+ logisticOrderStatus,
43
+ handleViewSummaryOrder,
44
+ handleCopyClipboard
41
45
  } = props
42
46
  const theme = useTheme();
43
47
  const [, t] = useLanguage();
@@ -46,7 +50,8 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
46
50
  const styles = StyleSheet.create({
47
51
  icons: {
48
52
  maxWidth: 40,
49
- height: 25,
53
+ height: 40,
54
+ padding: 10,
50
55
  alignItems: 'flex-end',
51
56
  },
52
57
  })
@@ -93,6 +98,34 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
93
98
  {
94
99
  (!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
95
100
  <Actions>
101
+ {getOrderStatus(order?.status, t)?.value !==
102
+ t('PENDING', 'Pending') && (
103
+ <>
104
+ <OIconButton
105
+ icon={theme.images.general.copy}
106
+ iconStyle={{
107
+ width: 20,
108
+ height: 25,
109
+ top: 2,
110
+ tintColor: theme.colors.backArrow,
111
+ }}
112
+ borderColor={theme.colors.clear}
113
+ style={styles.icons}
114
+ onClick={() => handleCopyClipboard()}
115
+ />
116
+ <OIconButton
117
+ icon={theme.images.general.print}
118
+ iconStyle={{
119
+ width: 25,
120
+ height: 22,
121
+ tintColor: theme.colors.backArrow,
122
+ }}
123
+ borderColor={theme.colors.clear}
124
+ style={styles.icons}
125
+ onClick={() => handleViewSummaryOrder()}
126
+ />
127
+ </>
128
+ )}
96
129
  <OIconButton
97
130
  icon={theme.images.general.map}
98
131
  iconStyle={{
@@ -28,14 +28,13 @@ export const OrderContent = styled.View`
28
28
  `;
29
29
 
30
30
  export const OrderHeader = styled.View`
31
- padding-vertical: 20px;
32
- border-bottom-width: 10px;
33
- border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
31
+ padding-top: 20px;
32
+ padding-bottom: 10px;
34
33
  `;
35
34
 
36
35
  export const OrderBusiness = styled.View`
37
36
  position: relative;
38
- bottom: 10px;
37
+ bottom: 20px;
39
38
  padding-vertical: 20px;
40
39
  flex-direction: column;
41
40
  border-bottom-width: 10px;
@@ -526,9 +526,9 @@ export interface TagsParams {
526
526
  interface actions {
527
527
  accept: string;
528
528
  reject: string;
529
- pickupFailed?: string;
530
- deliveryFailed?: string;
531
- notReady?: string;
529
+ pickupFailed: string;
530
+ deliveryFailed: string;
531
+ notReady: string;
532
532
  }
533
533
 
534
534
  interface textTranslate {
@@ -10,6 +10,7 @@ import {
10
10
  OrderInformation,
11
11
  BusinessInformation,
12
12
  Price,
13
+ LoadMore
13
14
  } from './styles';
14
15
  import { View, StyleSheet } from 'react-native';
15
16
  import { getGoogleMapImage } from '../../utils';
@@ -113,6 +114,18 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
113
114
  orders.map((order: any, index: any) => (
114
115
  <Order key={order?.id || order?.uuid} order={order} index={index} />
115
116
  ))}
117
+ {pagination?.totalPages && pagination?.currentPage < pagination?.totalPages && (
118
+ <LoadMore>
119
+ <OButton
120
+ bgColor={theme.colors.white}
121
+ textStyle={{ color: theme.colors.primary, fontSize: 14 }}
122
+ text={t('LOAD_MORE_ORDERS', 'Load more orders')}
123
+ borderColor={theme.colors.primary}
124
+ onClick={loadMoreOrders}
125
+ style={styles.loadMoreButton}
126
+ />
127
+ </LoadMore>
128
+ )}
116
129
  </ActiveOrdersContainer>
117
130
  <View
118
131
  style={{
@@ -140,4 +153,10 @@ const styles = StyleSheet.create({
140
153
  alignItems: 'center',
141
154
  minWidth: 230,
142
155
  },
156
+ loadMoreButton: {
157
+ width: 200,
158
+ height: 46,
159
+ marginLeft: 'auto',
160
+ marginRight: 'auto',
161
+ },
143
162
  });
@@ -42,3 +42,8 @@ export const Price = styled.View`
42
42
  margin-left: 10px;
43
43
  width: 30%;
44
44
  `
45
+ export const LoadMore = styled.View`
46
+ flex-direction: row;
47
+ justify-content: center;
48
+ margin-top: 10px;
49
+ `
@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components/native';
3
3
  export const Card = styled.TouchableOpacity`
4
4
  margin-vertical: 20px;
5
5
  border-radius: 7.6px;
6
- flex: 1;
7
6
  width: 100%;
8
- `;
7
+ position: relative;
8
+ `
9
9
 
10
10
  export const BusinessHero = styled.View`
11
11
  position: relative;
@@ -40,9 +40,9 @@ export const Metadata = styled.View`
40
40
  `;
41
41
 
42
42
  export const BusinessState = styled.View`
43
- position: absolute;
44
- top: 13px;
45
- end: 18px;
43
+ position: absolute;
44
+ top: 13px;
45
+ end: 18px;
46
46
  `
47
47
 
48
48
  export const BusinessLogo = styled.View`
@@ -29,7 +29,7 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
29
29
  const [, t] = useLanguage();
30
30
 
31
31
  const theme = useTheme();
32
- const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
32
+ const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
33
33
 
34
34
  const renderTypes = ({ item }: any) => {
35
35
  return (
@@ -110,17 +110,17 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
110
110
  entireModal
111
111
  >
112
112
  <ScrollView style={styles.allCategoriesContainer}>
113
- <OText
114
- size={20}
115
- mBottom={30}
116
- color={theme.colors.textSecondary}
117
- style={{ paddingHorizontal: 10 }}
118
- >
119
- {t('ALL_CATEGORIES', 'All categories')}
120
- </OText>
121
- <View style={styles.allCategoriesWrapper}>
122
- {typesState?.types.map((item: any) => (
123
- <TouchableOpacity
113
+ <OText
114
+ size={20}
115
+ mBottom={30}
116
+ color={theme.colors.textSecondary}
117
+ style={{ paddingHorizontal: 10 }}
118
+ >
119
+ {t('ALL_CATEGORIES', 'All categories')}
120
+ </OText>
121
+ <View style={styles.allCategoriesWrapper}>
122
+ {typesState?.types.map((item: any) => (
123
+ <TouchableOpacity
124
124
  key={item.id}
125
125
  style={styles.categoryStyle}
126
126
  onPress={() => {
@@ -149,9 +149,9 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
149
149
  {t(`BUSINESS_TYPE_${item.name.replace(/\s/g, '_').toUpperCase()}`, item.name)}
150
150
  </OText>
151
151
  </TouchableOpacity>
152
- ))}
153
- </View>
154
- </ScrollView>
152
+ ))}
153
+ </View>
154
+ </ScrollView>
155
155
  </OModal>
156
156
  </>
157
157
  );
@@ -178,7 +178,7 @@ const styles = StyleSheet.create({
178
178
  marginHorizontal: 10,
179
179
  marginBottom: 40
180
180
  },
181
- allCategoriesContainer : {
181
+ allCategoriesContainer: {
182
182
  paddingHorizontal: 30,
183
183
  paddingVertical: 30
184
184
  },
@@ -5,6 +5,7 @@ export const BCContainer = styled.View`
5
5
  width: 100%;
6
6
  justify-content: flex-start;
7
7
  text-align: center;
8
+ min-height: 45px;
8
9
  `
9
10
 
10
11
  export const BusinessCategories = styled.View`
@@ -281,15 +281,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
281
281
  />
282
282
  )}
283
283
  {businessesList.businesses?.map(
284
- (business: any) =>
285
- !business.featured && (
286
- <BusinessController
287
- key={business.id}
288
- business={business}
289
- handleCustomClick={handleBusinessClick}
290
- orderType={orderState?.options?.type}
291
- />
292
- ),
284
+ (business: any) => (
285
+ <BusinessController
286
+ key={business.id}
287
+ business={business}
288
+ handleCustomClick={handleBusinessClick}
289
+ orderType={orderState?.options?.type}
290
+ />
291
+ )
293
292
  )}
294
293
  {businessesList.loading && (
295
294
  <>
@@ -71,5 +71,6 @@ export const FeaturedWrapper = styled.View`
71
71
 
72
72
  export const OrderProgressWrapper = styled.View`
73
73
  margin-top: 37px;
74
+ margin-bottom: 20px;
74
75
  padding-horizontal: 40px;
75
76
  `