ordering-ui-react-native 0.14.91 → 0.14.92

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 (18) hide show
  1. package/package.json +1 -1
  2. package/src/DeliveryApp.tsx +2 -1
  3. package/src/assets/images/no-network.png +0 -0
  4. package/src/theme.json +2 -1
  5. package/themes/business/index.tsx +2 -0
  6. package/themes/business/src/components/NetworkError/index.tsx +61 -0
  7. package/themes/business/src/components/NetworkError/styles.tsx +11 -0
  8. package/themes/business/src/types/index.tsx +4 -0
  9. package/themes/kiosk/index.tsx +2 -0
  10. package/themes/kiosk/src/components/NetworkError/index.tsx +60 -0
  11. package/themes/kiosk/src/components/NetworkError/styles.tsx +11 -0
  12. package/themes/kiosk/src/types/index.d.ts +4 -0
  13. package/themes/original/index.tsx +2 -0
  14. package/themes/original/src/components/NetworkError/index.tsx +61 -0
  15. package/themes/original/src/components/NetworkError/styles.tsx +11 -0
  16. package/themes/original/src/components/OrdersOption/index.tsx +29 -22
  17. package/themes/original/src/components/OrdersOption/styles.tsx +1 -0
  18. package/themes/original/src/types/index.tsx +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.14.91",
3
+ "version": "0.14.92",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/src/DeliveryApp.tsx CHANGED
@@ -88,7 +88,8 @@ theme.images = {
88
88
  close: require('./assets/icons/close.png'),
89
89
  orderCreating: require('./assets/images/order-creating.png'),
90
90
  orderSuccess: require('./assets/images/order-success.png'),
91
- newOrder: require('./assets/images/new-order.png')
91
+ newOrder: require('./assets/images/new-order.png'),
92
+ noNetwork: require('./assets/images/no-network.png')
92
93
  },
93
94
  order: {
94
95
  status0: require('./assets/images/status-0.png'),
package/src/assets/images/no-network.png ADDED
Binary file
package/src/theme.json CHANGED
@@ -93,7 +93,8 @@
93
93
  "close": "",
94
94
  "orderCreating": "",
95
95
  "orderSuccess": "",
96
- "newOrder": ""
96
+ "newOrder": "",
97
+ "noNetwork": ""
97
98
  },
98
99
  "order": {
99
100
  "status0": "",
package/themes/business/index.tsx CHANGED
@@ -10,6 +10,7 @@ import { LanguageSelector } from './src/components/LanguageSelector';
10
10
  import { LoginForm } from './src/components/LoginForm';
11
11
  import { LogoutButton } from './src/components/LogoutButton';
12
12
  import { MessagesOption } from './src/components/MessagesOption';
13
+ import { NetworkError } from './src/components/NetworkError';
13
14
  import { NotFoundSource } from './src/components/NotFoundSource';
14
15
  import { OrderMessage } from './src/components/OrderMessage';
15
16
  import { OrderDetailsBusiness } from './src/components/OrderDetails/Business';
@@ -77,6 +78,7 @@ export {
77
78
  MessagesOption,
78
79
  MapView,
79
80
  NewOrderNotification,
81
+ NetworkError,
80
82
  NotFoundSource,
81
83
  OrderDetailsBusiness,
82
84
  OrderDetailsDelivery,
package/themes/business/src/components/NetworkError/index.tsx ADDED
@@ -0,0 +1,61 @@
1
+ import React from 'react'
2
+ import { useLanguage } from 'ordering-components/native'
3
+ import { Dimensions } from 'react-native'
4
+ import RNRestart from 'react-native-restart'
5
+ import { OText, OIcon, OButton } from '../shared'
6
+ import { useTheme } from 'styled-components/native'
7
+ import { NoNetworkParams } from '../../types'
8
+ import {
9
+ Container,
10
+ ImageContainer
11
+ } from './styles'
12
+
13
+ export const NetworkError = (props: NoNetworkParams) => {
14
+ const {
15
+ image
16
+ } = props
17
+ const theme = useTheme()
18
+ const [, t] = useLanguage()
19
+
20
+ const noNetworkImage = image || theme.images.general.noNetwork
21
+ const deviceWidth = Dimensions.get('screen').width
22
+
23
+ return (
24
+ <Container>
25
+ <OText
26
+ color={theme.colors.darkText}
27
+ size={20}
28
+ weight='700'
29
+ style={{ marginBottom: 14 }}
30
+ >
31
+ {t('MOBILE_NO_INTERNET', 'No internet connection')}
32
+ </OText>
33
+ <OText
34
+ color={theme.colors.darkText}
35
+ size={14}
36
+ >
37
+ {t('NETWORK_OFFLINE_MESSAGE', 'Your connection appears to be off-line. Try to refresh the page')}
38
+ </OText>
39
+ <ImageContainer>
40
+ <OIcon
41
+ src={noNetworkImage}
42
+ width={(deviceWidth - 80) * 0.9}
43
+ height={(deviceWidth - 80) * 0.8}
44
+ />
45
+ <OButton
46
+ text={t('REFRESH', 'Refresh')}
47
+ bgColor={theme.colors.primary}
48
+ borderColor={theme.colors.primary}
49
+ style={{
50
+ borderRadius: 8,
51
+ marginTop: 45
52
+ }}
53
+ textStyle={{
54
+ color: theme.colors.white
55
+ }}
56
+ onClick={() => RNRestart.Restart()}
57
+ />
58
+ </ImageContainer>
59
+ </Container>
60
+ )
61
+ }
package/themes/business/src/components/NetworkError/styles.tsx ADDED
@@ -0,0 +1,11 @@
1
+ import styled from 'styled-components/native'
2
+
3
+ export const Container = styled.View`
4
+ flex: 1;
5
+ padding: 20px 40px;
6
+ `
7
+ export const ImageContainer = styled.View`
8
+ flex: 1;
9
+ align-items: center;
10
+ justify-content: center;
11
+ `
package/themes/business/src/types/index.tsx CHANGED
@@ -575,3 +575,7 @@ export interface ReviewCustomerParams {
575
575
  handleChangeQualification?: any,
576
576
  handleSendCustomerReview?: any,
577
577
  }
578
+
579
+ export interface NoNetworkParams {
580
+ image?: any;
581
+ }
package/themes/kiosk/index.tsx CHANGED
@@ -14,6 +14,7 @@ import { LanguageSelector } from './src/components/LanguageSelector'
14
14
  import { LoginForm } from './src/components/LoginForm'
15
15
  import { LogoutPopup } from './src/components/LogoutPopup'
16
16
  import Navbar from './src/components/NavBar'
17
+ import { NetworkError } from './src/components/NetworkError'
17
18
  import { NotFoundSource } from './src/components/NotFoundSource'
18
19
  import OptionCard from './src/components/OptionCard'
19
20
  import { OrderDetails } from './src/components/OrderDetails'
@@ -82,6 +83,7 @@ export {
82
83
  LoginForm,
83
84
  LogoutPopup,
84
85
  Navbar,
86
+ NetworkError,
85
87
  NotFoundSource,
86
88
  OptionCard,
87
89
  OrderDetails,
package/themes/kiosk/src/components/NetworkError/index.tsx ADDED
@@ -0,0 +1,60 @@
1
+ import React from 'react'
2
+ import { useLanguage } from 'ordering-components/native'
3
+ import { Dimensions } from 'react-native'
4
+ import RNRestart from 'react-native-restart'
5
+ import { OText, OIcon, OButton } from '../shared'
6
+ import { useTheme } from 'styled-components/native'
7
+ import { NoNetworkParams } from '../../types'
8
+ import {
9
+ Container,
10
+ ImageContainer
11
+ } from './styles'
12
+
13
+ export const NetworkError = (props: NoNetworkParams) => {
14
+ const {
15
+ image
16
+ } = props
17
+ const theme = useTheme()
18
+ const [, t] = useLanguage()
19
+
20
+ const noNetworkImage = image || theme.images.general.noNetwork
21
+ const deviceHeight = Dimensions.get('screen').height
22
+
23
+ return (
24
+ <Container>
25
+ <OText
26
+ size={20}
27
+ weight='700'
28
+ style={{ marginBottom: 14 }}
29
+ >
30
+ {t('MOBILE_NO_INTERNET', 'No internet connection')}
31
+ </OText>
32
+ <OText
33
+ size={14}
34
+ >
35
+ {t('NETWORK_OFFLINE_MESSAGE', 'Your connection appears to be off-line. Try to refresh the page')}
36
+ </OText>
37
+ <ImageContainer>
38
+ <OIcon
39
+ src={noNetworkImage}
40
+ width={(deviceHeight - 180) * 0.7}
41
+ height={(deviceHeight - 180) * 0.63}
42
+ />
43
+ <OButton
44
+ text={t('REFRESH', 'Refresh')}
45
+ bgColor={theme.colors.primary}
46
+ borderColor={theme.colors.primary}
47
+ style={{
48
+ borderRadius: 8,
49
+ marginTop: 45,
50
+ height: 44
51
+ }}
52
+ textStyle={{
53
+ color: theme.colors.white
54
+ }}
55
+ onClick={() => RNRestart.Restart()}
56
+ />
57
+ </ImageContainer>
58
+ </Container>
59
+ )
60
+ }
package/themes/kiosk/src/components/NetworkError/styles.tsx ADDED
@@ -0,0 +1,11 @@
1
+ import styled from 'styled-components/native'
2
+
3
+ export const Container = styled.View`
4
+ flex: 1;
5
+ padding: 20px 40px;
6
+ `
7
+ export const ImageContainer = styled.View`
8
+ flex: 1;
9
+ align-items: center;
10
+ justify-content: center;
11
+ `
package/themes/kiosk/src/types/index.d.ts CHANGED
@@ -473,3 +473,7 @@ export interface Cart {
473
473
  total: number;
474
474
  clearInactivityTimeout: any;
475
475
  }
476
+
477
+ export interface NoNetworkParams {
478
+ image?: any;
479
+ }
package/themes/original/index.tsx CHANGED
@@ -28,6 +28,7 @@ import { Help } from './src/components/Help';
28
28
  import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
29
29
  import { HelpGuide } from './src/components/HelpGuide';
30
30
  import { HelpOrder } from './src/components/HelpOrder';
31
+ import { NetworkError } from './src/components/NetworkError';
31
32
  import { NotFoundSource } from './src/components/NotFoundSource';
32
33
  import { OrderTypeSelector } from './src/components/OrderTypeSelector';
33
34
  import { Wallets } from './src/components/Wallets';
@@ -93,6 +94,7 @@ export {
93
94
  HelpAccountAndPayment,
94
95
  HelpGuide,
95
96
  HelpOrder,
97
+ NetworkError,
96
98
  NotFoundSource,
97
99
  OrderTypeSelector,
98
100
  Wallets,
package/themes/original/src/components/NetworkError/index.tsx ADDED
@@ -0,0 +1,61 @@
1
+ import React from 'react'
2
+ import { useLanguage } from 'ordering-components/native'
3
+ import { Dimensions } from 'react-native'
4
+ import RNRestart from 'react-native-restart'
5
+ import { OText, OIcon, OButton } from '../shared'
6
+ import { useTheme } from 'styled-components/native'
7
+ import { NoNetworkParams } from '../../types'
8
+ import {
9
+ Container,
10
+ ImageContainer
11
+ } from './styles'
12
+
13
+ export const NetworkError = (props: NoNetworkParams) => {
14
+ const {
15
+ image
16
+ } = props
17
+ const theme = useTheme()
18
+ const [, t] = useLanguage()
19
+
20
+ const noNetworkImage = image || theme.images.general.noNetwork
21
+ const deviceWidth = Dimensions.get('screen').width
22
+
23
+ return (
24
+ <Container>
25
+ <OText
26
+ color={theme.colors.textNormal}
27
+ size={20}
28
+ weight='700'
29
+ style={{ marginBottom: 14 }}
30
+ >
31
+ {t('MOBILE_NO_INTERNET', 'No internet connection')}
32
+ </OText>
33
+ <OText
34
+ color={theme.colors.textNormal}
35
+ size={14}
36
+ >
37
+ {t('NETWORK_OFFLINE_MESSAGE', 'Your connection appears to be off-line. Try to refresh the page')}
38
+ </OText>
39
+ <ImageContainer>
40
+ <OIcon
41
+ src={noNetworkImage}
42
+ width={(deviceWidth - 80) * 0.9}
43
+ height={(deviceWidth - 80) * 0.8}
44
+ />
45
+ <OButton
46
+ text={t('REFRESH', 'Refresh')}
47
+ bgColor={theme.colors.primary}
48
+ borderColor={theme.colors.primary}
49
+ style={{
50
+ borderRadius: 8,
51
+ marginTop: 45
52
+ }}
53
+ textStyle={{
54
+ color: theme.colors.white
55
+ }}
56
+ onClick={() => RNRestart.Restart()}
57
+ />
58
+ </ImageContainer>
59
+ </Container>
60
+ )
61
+ }
package/themes/original/src/components/NetworkError/styles.tsx ADDED
@@ -0,0 +1,11 @@
1
+ import styled from 'styled-components/native'
2
+
3
+ export const Container = styled.View`
4
+ flex: 1;
5
+ padding: 20px 40px;
6
+ `
7
+ export const ImageContainer = styled.View`
8
+ flex: 1;
9
+ align-items: center;
10
+ justify-content: center;
11
+ `
package/themes/original/src/components/OrdersOption/index.tsx CHANGED
@@ -95,7 +95,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
95
95
  { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
96
96
  { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
97
97
  { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
98
- { key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
98
+ { key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
99
99
  ]
100
100
 
101
101
  const objectStatus = orderStatus.find((o) => o.key === status)
@@ -105,9 +105,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
105
105
 
106
106
  useFocusEffect(
107
107
  React.useCallback(() => {
108
- loadOrders()
108
+ loadOrders()
109
109
  }, [navigation])
110
- )
110
+ )
111
111
 
112
112
  useEffect(() => {
113
113
  const hasMore = pagination?.totalPages && pagination?.currentPage !== pagination?.totalPages
@@ -126,27 +126,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
126
126
  } else if (!preOrders) {
127
127
  setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
128
128
  }
129
- }, [orders?.length])
129
+ }, [orders, activeOrders])
130
130
 
131
131
  return (
132
132
  <>
133
- <OptionTitle>
134
- <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
135
- {titleContent || (activeOrders
136
- ? t('ACTIVE', 'Active')
137
- : preOrders
138
- ? t('PREORDERS', 'Preorders')
139
- : t('PAST', 'Past'))}
140
- </OText>
141
- </OptionTitle>
142
- {!(activeOrders && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0) && !loading && orders.length === 0 && (
143
- <NotFoundSource
144
- content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
145
- image={imageFails}
146
- conditioned
147
- />
148
- )}
149
- {!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && activeOrders && (
133
+ {!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && !activeOrders && (
150
134
  <NoOrdersWrapper>
151
135
  <OText size={14} numberOfLines={1}>
152
136
  {t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
@@ -157,9 +141,32 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
157
141
  textStyle={{ color: 'white', fontSize: 14 }}
158
142
  style={{ borderRadius: 7.6, marginBottom: 10, marginTop: 10, height: 44, paddingLeft: 10, paddingRight: 10 }}
159
143
  />
160
-
144
+
161
145
  </NoOrdersWrapper>
162
146
  )}
147
+ {(ordersLength.activeOrdersLength > 0 || ordersLength.previousOrdersLength > 0) && (
148
+ <>
149
+ <OptionTitle>
150
+ <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
151
+ {titleContent || (activeOrders
152
+ ? t('ACTIVE', 'Active')
153
+ : preOrders
154
+ ? t('PREORDERS', 'Preorders')
155
+ : t('PAST', 'Past'))}
156
+ </OText>
157
+ </OptionTitle>
158
+ {!(ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0) &&
159
+ !loading &&
160
+ orders.filter((order: any) => orderStatus.includes(order.status)).length === 0 &&
161
+ (
162
+ <NotFoundSource
163
+ content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
164
+ image={imageFails}
165
+ conditioned
166
+ />
167
+ )}
168
+ </>
169
+ )}
163
170
  {loading && (
164
171
  <>
165
172
  {!activeOrders ? (
package/themes/original/src/components/OrdersOption/styles.tsx CHANGED
@@ -7,4 +7,5 @@ export const OptionTitle = styled.View`
7
7
  export const NoOrdersWrapper = styled.View`
8
8
  flex-direction: column;
9
9
  align-items: center;
10
+ margin-top: 50px;
10
11
  `
package/themes/original/src/types/index.tsx CHANGED
@@ -520,3 +520,6 @@ export interface MessageListingParams {
520
520
  navigation: any;
521
521
  franchiseId?: any;
522
522
  }
523
+ export interface NoNetworkParams {
524
+ image?: any,
525
+ }