ordering-ui-react-native 0.16.85-release → 0.16.86-release

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.16.85-release",
3
+ "version": "0.16.86-release",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
@@ -7,13 +7,14 @@ import {
7
7
  View,
8
8
  KeyboardAvoidingView,
9
9
  TextInput,
10
- StyleSheet
10
+ StyleSheet,
11
+ TouchableOpacity
11
12
  } from 'react-native';
12
13
  import { useTheme } from 'styled-components/native';
13
14
  import SelectDropdown from 'react-native-select-dropdown'
14
15
  import { useLanguage } from 'ordering-components/native';
15
16
  import { Content, Timer, TimeField, Header, Comments, CommentsButtonGroup, TopActions } from './styles';
16
- import { OText, OButton, OTextarea, OIconButton } from '../shared';
17
+ import { OText, OButton, OTextarea, OIcon } from '../shared';
17
18
  import { AcceptOrRejectOrderParams } from '../../types';
18
19
 
19
20
  import { orderCommentList } from '../../../../../src/utils'
@@ -95,7 +96,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
95
96
  upper: {
96
97
  flex: 1,
97
98
  zIndex: 1001,
98
- paddingTop: isPage ? 30 : 50,
99
+ paddingTop: isPage ? 30 : 40,
99
100
  marginBottom: 10,
100
101
  backgroundColor: theme.colors.backgroundPage
101
102
  },
@@ -109,7 +110,18 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
109
110
  bottom: {
110
111
  textAlignVertical: "center",
111
112
  textAlign: "center",
112
- }
113
+ },
114
+ btnBackArrow: {
115
+ borderWidth: 0,
116
+ width: 32,
117
+ height: 32,
118
+ tintColor: theme.colors.textGray,
119
+ backgroundColor: theme.colors.clear,
120
+ borderColor: theme.colors.clear,
121
+ shadowColor: theme.colors.clear,
122
+ paddingLeft: 0,
123
+ paddingRight: 0
124
+ },
113
125
  })
114
126
 
115
127
  const handleFocus = () => {
@@ -299,18 +311,9 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
299
311
  <View style={styles.parent}>
300
312
  <View style={styles.upper}>
301
313
  <TopActions>
302
- <OIconButton
303
- icon={theme.images.general.arrow_left}
304
- borderColor={theme.colors.clear}
305
- iconStyle={{ width: 20, height: 20 }}
306
- style={{
307
- maxWidth: 40,
308
- height: 35,
309
- justifyContent: 'flex-end',
310
- marginBottom: 10,
311
- }}
312
- onClick={() => handleArrowBack()}
313
- />
314
+ <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
315
+ <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
316
+ </TouchableOpacity>
314
317
  <OText
315
318
  size={20}
316
319
  color={theme.colors.textGray}
@@ -518,7 +521,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
518
521
  imgRightSrc={null}
519
522
  style={{ borderRadius: 7, height: 45 }}
520
523
  parentStyle={{ width: '100%' }}
521
- textStyle={{color: '#FFF', fontSize: 18 }}
524
+ textStyle={{ color: '#FFF', fontSize: 18 }}
522
525
  isDisabled={!rejectReason && showTextArea}
523
526
  onClick={() => handleAcceptOrReject()}
524
527
  />
@@ -9,12 +9,15 @@ import {
9
9
 
10
10
  //Components
11
11
  import {
12
+ OIcon,
12
13
  OIconButton,
13
14
  OText,
14
15
  } from '../shared'
15
16
 
16
17
  import { useTheme } from 'styled-components/native';
17
- import { StyleSheet, View } from 'react-native';
18
+ import { StyleSheet, TouchableOpacity, View } from 'react-native';
19
+ import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
20
+ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
18
21
 
19
22
  import {
20
23
  useLanguage,
@@ -54,6 +57,19 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
54
57
  height: 40,
55
58
  padding: 10,
56
59
  alignItems: 'flex-end',
60
+ color: theme.colors.textGray,
61
+ },
62
+ btnBackArrow: {
63
+ borderWidth: 0,
64
+ width: 32,
65
+ height: 32,
66
+ tintColor: theme.colors.textGray,
67
+ backgroundColor: theme.colors.clear,
68
+ borderColor: theme.colors.clear,
69
+ shadowColor: theme.colors.clear,
70
+ paddingLeft: 0,
71
+ paddingRight: 0,
72
+ marginTop: 10
57
73
  },
58
74
  })
59
75
 
@@ -108,42 +124,30 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
108
124
  <>
109
125
  {!props.isCustomView && (
110
126
  <Header>
111
- <OIconButton
112
- icon={theme.images.general.arrow_left}
113
- iconStyle={{ width: 20, height: 20 }}
114
- borderColor={theme.colors.clear}
115
- style={{ ...styles.icons, justifyContent: 'flex-end' }}
116
- onClick={() => handleArrowBack()}
117
- />
118
-
127
+ <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
128
+ <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
129
+ </TouchableOpacity>
119
130
  {(!order?.isLogistic || (!logisticOrderStatus?.includes(order?.status) && !order?.order_group)) && (
120
131
  <Actions>
121
132
  {getOrderStatus(order?.status, t)?.value !==
122
133
  t('PENDING', 'Pending') && (
123
134
  <>
124
- <OIconButton
125
- icon={theme.images.general.copy}
126
- iconStyle={{
127
- width: 20,
128
- height: 25,
129
- top: 2,
130
- tintColor: theme.colors.backArrow,
131
- }}
132
- borderColor={theme.colors.clear}
133
- style={styles.icons}
134
- onClick={() => handleCopyClipboard?.()}
135
- />
136
- <OIconButton
137
- icon={theme.images.general.print}
138
- iconStyle={{
139
- width: 25,
140
- height: 22,
141
- tintColor: theme.colors.backArrow,
142
- }}
143
- borderColor={theme.colors.clear}
144
- style={styles.icons}
145
- onClick={() => handleViewSummaryOrder?.()}
146
- />
135
+ <TouchableOpacity onPress={() => handleCopyClipboard?.()}>
136
+ <MaterialCommunityIcons
137
+ name='content-copy'
138
+ color={theme.colors.textGray}
139
+ size={20}
140
+ style={styles.icons}
141
+ />
142
+ </TouchableOpacity>
143
+ <TouchableOpacity onPress={() => handleViewSummaryOrder?.()}>
144
+ <SimpleLineIcons
145
+ name='printer'
146
+ color={theme.colors.textGray}
147
+ size={20}
148
+ style={styles.icons}
149
+ />
150
+ </TouchableOpacity>
147
151
  </>
148
152
  )}
149
153
  <OIconButton
@@ -151,7 +155,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
151
155
  iconStyle={{
152
156
  width: 20,
153
157
  height: 20,
154
- tintColor: theme.colors.backArrow,
158
+ tintColor: theme.colors.textGray,
155
159
  }}
156
160
  borderColor={theme.colors.clear}
157
161
  style={styles.icons}
@@ -163,7 +167,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
163
167
  iconStyle={{
164
168
  width: 20,
165
169
  height: 20,
166
- tintColor: theme.colors.backArrow,
170
+ tintColor: theme.colors.textGray,
167
171
  }}
168
172
  borderColor={theme.colors.clear}
169
173
  style={styles.icons}
@@ -193,29 +197,22 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
193
197
  {getOrderStatus(order?.status, t)?.value !==
194
198
  t('PENDING', 'Pending') && (
195
199
  <>
196
- <OIconButton
197
- icon={theme.images.general.copy}
198
- iconStyle={{
199
- width: 20,
200
- height: 25,
201
- top: 2,
202
- tintColor: theme.colors.backArrow,
203
- }}
204
- borderColor={theme.colors.clear}
205
- style={styles.icons}
206
- onClick={() => handleCopyClipboard?.()}
207
- />
208
- <OIconButton
209
- icon={theme.images.general.print}
210
- iconStyle={{
211
- width: 25,
212
- height: 22,
213
- tintColor: theme.colors.backArrow,
214
- }}
215
- borderColor={theme.colors.clear}
216
- style={styles.icons}
217
- onClick={() => handleViewSummaryOrder?.()}
218
- />
200
+ <TouchableOpacity onPress={() => handleCopyClipboard?.()}>
201
+ <MaterialCommunityIcons
202
+ name='content-copy'
203
+ color={theme.colors.textGray}
204
+ size={20}
205
+ style={styles.icons}
206
+ />
207
+ </TouchableOpacity>
208
+ <TouchableOpacity onPress={() => handleViewSummaryOrder?.()}>
209
+ <SimpleLineIcons
210
+ name='printer'
211
+ color={theme.colors.textGray}
212
+ size={20}
213
+ style={styles.icons}
214
+ />
215
+ </TouchableOpacity>
219
216
  </>
220
217
  )}
221
218
  <OIconButton
@@ -223,7 +220,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
223
220
  iconStyle={{
224
221
  width: 20,
225
222
  height: 20,
226
- tintColor: theme.colors.backArrow,
223
+ tintColor: theme.colors.textGray,
227
224
  }}
228
225
  borderColor={theme.colors.clear}
229
226
  style={styles.icons}
@@ -235,7 +232,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
235
232
  iconStyle={{
236
233
  width: 20,
237
234
  height: 20,
238
- tintColor: theme.colors.backArrow,
235
+ tintColor: theme.colors.textGray,
239
236
  }}
240
237
  borderColor={theme.colors.clear}
241
238
  style={styles.icons}
@@ -1,7 +1,7 @@
1
1
  import React, { useState, useEffect } from 'react';
2
2
  import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
3
3
  import { Chat } from '../Chat';
4
- import { StyleSheet, View, BackHandler } from 'react-native';
4
+ import { StyleSheet, View, BackHandler, TouchableOpacity } from 'react-native';
5
5
  import {
6
6
  useLanguage,
7
7
  OrderDetails as OrderDetailsController,
@@ -9,7 +9,7 @@ import {
9
9
  } from 'ordering-components/native';
10
10
  import { useUtils } from 'ordering-components/native';
11
11
 
12
- import { OIcon, OIconButton, OText } from '../shared';
12
+ import { OIcon, OText } from '../shared';
13
13
  import { OrderDetailsParams } from '../../types';
14
14
  import { USER_TYPE } from '../../config/constants';
15
15
  import { useTheme } from 'styled-components/native';
@@ -146,13 +146,6 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
146
146
  shadowRadius: 3.84,
147
147
  elevation: 3,
148
148
  },
149
- cancelBtn: {
150
- marginRight: 5,
151
- zIndex: 10000,
152
- height: 30,
153
- width: 20,
154
- justifyContent: 'flex-end',
155
- },
156
149
  modalText: {
157
150
  fontFamily: 'Poppins',
158
151
  fontStyle: 'normal',
@@ -161,6 +154,18 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
161
154
  textAlign: 'center',
162
155
  zIndex: 10,
163
156
  },
157
+ btnBackArrow: {
158
+ borderWidth: 0,
159
+ width: 32,
160
+ height: 32,
161
+ tintColor: theme.colors.textGray,
162
+ backgroundColor: theme.colors.clear,
163
+ borderColor: theme.colors.clear,
164
+ shadowColor: theme.colors.clear,
165
+ paddingLeft: 0,
166
+ paddingRight: 0,
167
+ marginTop: 10
168
+ },
164
169
  });
165
170
 
166
171
  return (
@@ -260,13 +265,9 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
260
265
  <>
261
266
  <View style={styles.titleSection}>
262
267
  <View style={styles.titleGroups}>
263
- <OIconButton
264
- icon={theme.images.general.arrow_left}
265
- iconStyle={{ width: 23, height: 23 }}
266
- borderColor={theme.colors.clear}
267
- style={styles.cancelBtn}
268
- onClick={handleArrowBack}
269
- />
268
+ <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
269
+ <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
270
+ </TouchableOpacity>
270
271
 
271
272
  <OText size={16} style={styles.modalText} adjustsFontSizeToFit>
272
273
  {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order?.id}`}
@@ -292,7 +293,7 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
292
293
  <OIcon
293
294
  url={optimizeImage(
294
295
  order?.customer?.photo ||
295
- theme?.images?.dummies?.customerPhoto,
296
+ theme?.images?.dummies?.customerPhoto,
296
297
  'h_300,c_limit',
297
298
  )}
298
299
  style={styles.titleIcons}
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useState, useRef } from 'react';
2
- import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform } from 'react-native';
2
+ import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform, TouchableOpacity } from 'react-native';
3
3
  import { useLanguage, useUtils, useToast, OrderListGroups, useConfig } from 'ordering-components/native';
4
4
  import SelectDropdown from 'react-native-select-dropdown'
5
5
  import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -239,6 +239,19 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
239
239
  overflow: 'hidden',
240
240
  minHeight: 155
241
241
  },
242
+ btnBackArrow: {
243
+ borderWidth: 0,
244
+ width: 32,
245
+ height: 32,
246
+ tintColor: theme.colors.textGray,
247
+ backgroundColor: theme.colors.clear,
248
+ borderColor: theme.colors.clear,
249
+ shadowColor: theme.colors.clear,
250
+ paddingLeft: 0,
251
+ paddingRight: 0,
252
+ marginBottom: 30,
253
+ marginTop: 30
254
+ },
242
255
  rowStyle: {
243
256
  display: 'flex',
244
257
  borderBottomWidth: 0,
@@ -696,20 +709,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
696
709
  <ModalContainer
697
710
  nestedScrollEnabled={true}
698
711
  >
699
- <OIconButton
700
- icon={theme.images.general.arrow_left}
701
- borderColor={theme.colors.clear}
702
- iconColor={theme.colors.backArrow}
703
- iconStyle={{ width: 20, height: 13 }}
704
- style={{
705
- maxWidth: 40,
706
- height: 35,
707
- justifyContent: 'flex-end',
708
- marginBottom: 30,
709
- marginTop: 30
710
- }}
711
- onClick={() => handleClose()}
712
- />
712
+ <TouchableOpacity onPress={() => handleClose()} style={styles.btnBackArrow}>
713
+ <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
714
+ </TouchableOpacity>
713
715
  {openSearchModal && (
714
716
  <SearchModalContent>
715
717
  <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
@@ -88,6 +88,18 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
88
88
  marginBottom: 10,
89
89
  backgroundColor: theme.colors.lightGray
90
90
  },
91
+ btnBackArrow: {
92
+ borderWidth: 0,
93
+ width: 32,
94
+ height: 32,
95
+ tintColor: theme.colors.textGray,
96
+ backgroundColor: theme.colors.clear,
97
+ borderColor: theme.colors.clear,
98
+ shadowColor: theme.colors.clear,
99
+ paddingLeft: 0,
100
+ paddingRight: 0,
101
+ marginBottom: 20
102
+ },
91
103
  inputTextArea: {
92
104
  borderColor: theme.colors.lightGray,
93
105
  borderRadius: 8,
@@ -179,18 +191,9 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
179
191
  }}
180
192
  >
181
193
  <View>
182
- <OIconButton
183
- icon={theme.images.general.arrow_left}
184
- borderColor={theme.colors.clear}
185
- iconStyle={{ width: 20, height: 16 }}
186
- style={{
187
- maxWidth: 40,
188
- height: 20,
189
- justifyContent: 'flex-end',
190
- marginBottom: 20,
191
- }}
192
- onClick={() => closeModal()}
193
- />
194
+ <TouchableOpacity onPress={() => closeModal()} style={styles.btnBackArrow}>
195
+ <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
196
+ </TouchableOpacity>
194
197
  <OText
195
198
  size={20}
196
199
  weight="600"
@@ -744,6 +744,7 @@ const CheckoutUI = (props: any) => {
744
744
  setIsOpen(false)
745
745
  handlePlaceOrder(null, true)
746
746
  }}
747
+ setIsOpen={setIsOpen}
747
748
  />
748
749
  </View>
749
750
  </OModal>
@@ -34,7 +34,8 @@ const UserDetailsUI = (props: any) => {
34
34
  isCheckout,
35
35
  handleSendVerifyCode,
36
36
  verifyPhoneState,
37
- setFormState
37
+ setFormState,
38
+ setIsOpen
38
39
  } = props
39
40
 
40
41
  const theme = useTheme();
@@ -209,6 +210,7 @@ const UserDetailsUI = (props: any) => {
209
210
  isCheckout={isCheckout}
210
211
  setWillVerifyOtpState={setWillVerifyOtpState}
211
212
  setIsSubmit={setIsSubmit}
213
+ setIsOpen={setIsOpen}
212
214
  />
213
215
  )}
214
216
  </UDContainer>
@@ -30,7 +30,8 @@ export const UserFormDetailsUI = (props: any) => {
30
30
  hideUpdateButton,
31
31
  setWillVerifyOtpState,
32
32
  handlePlaceOrderAsGuest,
33
- isCheckout
33
+ isCheckout,
34
+ setIsOpen
34
35
  } = props;
35
36
 
36
37
  const theme = useTheme();
@@ -221,10 +222,7 @@ export const UserFormDetailsUI = (props: any) => {
221
222
  formState.result?.result &&
222
223
  showToast(ToastType.Error, formState.result?.result[0]);
223
224
  if (isCheckout) {
224
- setAlertState({
225
- open: true,
226
- content: formState.result?.result[0]
227
- })
225
+ setIsOpen && setIsOpen(false)
228
226
  cleanFormState && cleanFormState({ changes: {} })
229
227
  }
230
228
  }
@@ -476,13 +474,7 @@ export const UserFormDetailsUI = (props: any) => {
476
474
  />
477
475
  </ScrollView>
478
476
  </OModal>
479
- <Alert
480
- open={alertState.open}
481
- title=''
482
- content={[alertState.content]}
483
- onAccept={() => setAlertState({ open: false, content: '' })}
484
- onClose={() => setAlertState({ open: false, content: '' })}
485
- />
477
+
486
478
  </>
487
479
  );
488
480
  };