ordering-ui-react-native 0.14.46 → 0.14.49
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/kiosk/src/components/Intro/index.tsx +78 -76
- package/themes/kiosk/src/components/shared/OButton.tsx +18 -5
- package/themes/original/src/components/BusinessesListing/index.tsx +100 -75
- package/themes/original/src/components/Cart/index.tsx +122 -24
- package/themes/original/src/components/Cart/styles.tsx +8 -1
- package/themes/original/src/components/OrderDetails/index.tsx +114 -42
- package/themes/original/src/components/OrderDetails/styles.tsx +8 -1
- package/themes/original/src/components/OrderSummary/index.tsx +132 -23
- package/themes/original/src/components/OrderSummary/styles.tsx +7 -0
- package/themes/original/src/components/TaxInformation/index.tsx +59 -27
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
|
-
import { StyleSheet, View, RefreshControl, ScrollView } from 'react-native';
|
|
2
|
+
import { StyleSheet, View, RefreshControl, ScrollView, Pressable } from 'react-native';
|
|
3
3
|
import { useLanguage } from 'ordering-components/native';
|
|
4
4
|
import { useTheme } from 'styled-components/native';
|
|
5
5
|
|
|
@@ -41,64 +41,15 @@ const Intro = (props: any): React.ReactElement => {
|
|
|
41
41
|
/>
|
|
42
42
|
}
|
|
43
43
|
>
|
|
44
|
-
<
|
|
45
|
-
{orientationState.orientation ===
|
|
46
|
-
|
|
47
|
-
style={{
|
|
48
|
-
height: orientationState?.dimensions?.height - _offset,
|
|
49
|
-
padding: 4,
|
|
50
|
-
justifyContent: 'space-around',
|
|
51
|
-
alignItems: 'center'
|
|
52
|
-
}}
|
|
53
|
-
>
|
|
54
|
-
<OImage
|
|
55
|
-
source={theme.images.logos.logotype}
|
|
56
|
-
width={(orientationState?.dimensions?.width * 0.4) - _offset}
|
|
57
|
-
height={orientationState?.dimensions?.height * 0.1}
|
|
58
|
-
/>
|
|
59
|
-
|
|
60
|
-
<OImage
|
|
61
|
-
source={theme.images.general.homeHero}
|
|
62
|
-
width={orientationState?.dimensions?.width}
|
|
63
|
-
height={orientationState?.dimensions?.height * 0.6}
|
|
64
|
-
/>
|
|
65
|
-
|
|
66
|
-
<OButton
|
|
67
|
-
text={t('TOUCH_TO_ORDER', 'Touch to order')}
|
|
68
|
-
parentStyle={{
|
|
69
|
-
alignItems: 'center',
|
|
70
|
-
width: orientationState?.dimensions?.width - _offset
|
|
71
|
-
}}
|
|
72
|
-
onClick={goBusiness}
|
|
73
|
-
/>
|
|
74
|
-
<LanguageSelector />
|
|
75
|
-
</View>
|
|
76
|
-
) : (
|
|
77
|
-
<View
|
|
78
|
-
style={{
|
|
79
|
-
flexDirection: 'row',
|
|
80
|
-
justifyContent: 'flex-start',
|
|
81
|
-
alignItems: 'center',
|
|
82
|
-
padding: 0,
|
|
83
|
-
margin: 0
|
|
84
|
-
}}
|
|
85
|
-
>
|
|
86
|
-
<OImage
|
|
87
|
-
source={theme.images.general.homeHeroLandscape}
|
|
88
|
-
width={orientationState?.dimensions?.width * 0.40}
|
|
89
|
-
height={orientationState?.dimensions?.height * 1.1}
|
|
90
|
-
style={{ bottom: 100, right: 100 }}
|
|
91
|
-
resizeMode='cover'
|
|
92
|
-
/>
|
|
93
|
-
|
|
44
|
+
<Pressable onPress={goBusiness}>
|
|
45
|
+
<Container nopadding={orientationState.orientation === LANDSCAPE}>
|
|
46
|
+
{orientationState.orientation === PORTRAIT ? (
|
|
94
47
|
<View
|
|
95
48
|
style={{
|
|
96
|
-
height: orientationState?.dimensions?.height,
|
|
97
|
-
|
|
49
|
+
height: orientationState?.dimensions?.height - _offset,
|
|
50
|
+
padding: 4,
|
|
98
51
|
justifyContent: 'space-around',
|
|
99
|
-
alignItems: 'center'
|
|
100
|
-
paddingBottom: '5%',
|
|
101
|
-
paddingTop: '10%',
|
|
52
|
+
alignItems: 'center'
|
|
102
53
|
}}
|
|
103
54
|
>
|
|
104
55
|
<OImage
|
|
@@ -107,31 +58,82 @@ const Intro = (props: any): React.ReactElement => {
|
|
|
107
58
|
height={orientationState?.dimensions?.height * 0.1}
|
|
108
59
|
/>
|
|
109
60
|
|
|
110
|
-
<
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
61
|
+
<OImage
|
|
62
|
+
source={theme.images.general.homeHero}
|
|
63
|
+
width={orientationState?.dimensions?.width}
|
|
64
|
+
height={orientationState?.dimensions?.height * 0.6}
|
|
65
|
+
/>
|
|
66
|
+
|
|
67
|
+
<OButton
|
|
68
|
+
text={t('TOUCH_TO_ORDER', 'Touch to order')}
|
|
69
|
+
parentStyle={{
|
|
70
|
+
alignItems: 'center',
|
|
71
|
+
width: orientationState?.dimensions?.width - _offset
|
|
72
|
+
}}
|
|
73
|
+
onClick={goBusiness}
|
|
74
|
+
/>
|
|
75
|
+
<LanguageSelector />
|
|
76
|
+
</View>
|
|
77
|
+
) : (
|
|
78
|
+
<View
|
|
79
|
+
style={{
|
|
80
|
+
flexDirection: 'row',
|
|
81
|
+
justifyContent: 'flex-start',
|
|
82
|
+
alignItems: 'center',
|
|
83
|
+
padding: 0,
|
|
84
|
+
margin: 0
|
|
85
|
+
}}
|
|
86
|
+
>
|
|
87
|
+
<OImage
|
|
88
|
+
source={theme.images.general.homeHeroLandscape}
|
|
89
|
+
width={orientationState?.dimensions?.width * 0.40}
|
|
90
|
+
height={orientationState?.dimensions?.height * 1.1}
|
|
91
|
+
style={{ bottom: 100, right: 100 }}
|
|
92
|
+
resizeMode='cover'
|
|
93
|
+
/>
|
|
114
94
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
95
|
+
<View
|
|
96
|
+
style={{
|
|
97
|
+
height: orientationState?.dimensions?.height,
|
|
98
|
+
width: '50%',
|
|
99
|
+
justifyContent: 'space-around',
|
|
100
|
+
alignItems: 'center',
|
|
101
|
+
paddingBottom: '5%',
|
|
102
|
+
paddingTop: '10%',
|
|
103
|
+
}}
|
|
104
|
+
>
|
|
105
|
+
<OImage
|
|
106
|
+
source={theme.images.logos.logotype}
|
|
107
|
+
width={(orientationState?.dimensions?.width * 0.4) - _offset}
|
|
108
|
+
height={orientationState?.dimensions?.height * 0.1}
|
|
123
109
|
/>
|
|
124
|
-
|
|
110
|
+
|
|
111
|
+
<View style={{
|
|
112
|
+
justifyContent: 'space-around',
|
|
113
|
+
alignItems: 'center'
|
|
114
|
+
}}>
|
|
115
|
+
|
|
116
|
+
<OButton
|
|
117
|
+
style={styles.buttonLandStyle}
|
|
118
|
+
text={t('TOUCH_ANYWHERE_TO_ORDER', 'Touch anywhere to order')}
|
|
119
|
+
parentStyle={{
|
|
120
|
+
alignItems: 'center',
|
|
121
|
+
width: orientationState?.dimensions?.width - _offset
|
|
122
|
+
}}
|
|
123
|
+
onClick={goBusiness}
|
|
124
|
+
/>
|
|
125
|
+
<LanguageSelector />
|
|
126
|
+
</View>
|
|
125
127
|
</View>
|
|
126
128
|
</View>
|
|
127
|
-
|
|
128
|
-
)}
|
|
129
|
+
)}
|
|
129
130
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
131
|
+
<LogoutPopup
|
|
132
|
+
open={showLogoutPopup}
|
|
133
|
+
onClose={() => setShowLogoutPopup(false)}
|
|
134
|
+
/>
|
|
135
|
+
</Container>
|
|
136
|
+
</Pressable>
|
|
135
137
|
</ScrollView>
|
|
136
138
|
);
|
|
137
139
|
};
|
|
@@ -10,6 +10,8 @@ import {
|
|
|
10
10
|
|
|
11
11
|
import * as React from 'react';
|
|
12
12
|
import styled from 'styled-components/native';
|
|
13
|
+
import AntDesignIcon from 'react-native-vector-icons/AntDesign'
|
|
14
|
+
import { Icon, IconProps } from 'react-native-vector-icons/Icon';
|
|
13
15
|
|
|
14
16
|
const StyledButton = styled.View<Props>`
|
|
15
17
|
background-color: ${(props: any) => props.theme.colors.primary};
|
|
@@ -77,17 +79,19 @@ interface Props {
|
|
|
77
79
|
isCircle?: boolean;
|
|
78
80
|
bgColor?: string;
|
|
79
81
|
borderColor?: string;
|
|
82
|
+
iconProps?: IconProps;
|
|
83
|
+
IconCustom?: React.FunctionComponent
|
|
80
84
|
}
|
|
81
85
|
|
|
82
86
|
const OButton = (props: Props): React.ReactElement => {
|
|
83
87
|
if (props.isDisabled) {
|
|
84
88
|
return (
|
|
85
89
|
<View style={props.parentStyle}>
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
90
|
+
<StyledButtonDisabled style={props.style}>
|
|
91
|
+
<StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
|
|
92
|
+
{props.text}
|
|
93
|
+
</StyledTextDisabled>
|
|
94
|
+
</StyledButtonDisabled>
|
|
91
95
|
</View>
|
|
92
96
|
);
|
|
93
97
|
}
|
|
@@ -111,6 +115,15 @@ const OButton = (props: Props): React.ReactElement => {
|
|
|
111
115
|
{props.imgLeftSrc ? (
|
|
112
116
|
<StyledImage style={props.imgLeftStyle} source={props.imgLeftSrc} />
|
|
113
117
|
) : null}
|
|
118
|
+
{props.iconProps ? (
|
|
119
|
+
<>
|
|
120
|
+
{props?.IconCustom ? (
|
|
121
|
+
<props.IconCustom {...props.iconProps} />
|
|
122
|
+
) : (
|
|
123
|
+
<AntDesignIcon {...props.iconProps} />
|
|
124
|
+
)}
|
|
125
|
+
</>
|
|
126
|
+
) : null}
|
|
114
127
|
{props.text ? (
|
|
115
128
|
<StyledText style={props.textStyle}>{props.text}</StyledText>
|
|
116
129
|
) : null}
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
ScrollView,
|
|
8
8
|
Platform,
|
|
9
9
|
TouchableOpacity,
|
|
10
|
+
RefreshControl
|
|
10
11
|
} from 'react-native';
|
|
11
12
|
import {
|
|
12
13
|
BusinessList as BusinessesListingController,
|
|
@@ -57,11 +58,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
|
|
|
57
58
|
handleBusinessClick,
|
|
58
59
|
paginationProps,
|
|
59
60
|
handleChangeSearch,
|
|
60
|
-
|
|
61
|
+
businessId
|
|
61
62
|
} = props;
|
|
62
63
|
|
|
63
64
|
const theme = useTheme();
|
|
64
65
|
const isFocused = useIsFocused();
|
|
66
|
+
const [refreshing] = useState(false);
|
|
65
67
|
|
|
66
68
|
const styles = StyleSheet.create({
|
|
67
69
|
container: {
|
|
@@ -142,15 +144,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
|
|
|
142
144
|
};
|
|
143
145
|
|
|
144
146
|
const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
147
|
+
const R = 6371 // km
|
|
148
|
+
const dLat = convertToRadian(lat2 - lat1)
|
|
149
|
+
const dLon = convertToRadian(lon2 - lon1)
|
|
150
|
+
const curLat1 = convertToRadian(lat1)
|
|
151
|
+
const curLat2 = convertToRadian(lat2)
|
|
152
|
+
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
|
|
153
|
+
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
|
|
154
|
+
return R * c
|
|
155
|
+
}
|
|
154
156
|
|
|
155
157
|
useEffect(() => {
|
|
156
158
|
if (businessesList.businesses.length > 0) {
|
|
@@ -162,6 +164,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
|
|
|
162
164
|
setFeaturedBusinesses(ary);
|
|
163
165
|
}
|
|
164
166
|
}, [businessesList.businesses]);
|
|
167
|
+
|
|
165
168
|
// const resetInactivityTimeout = () => {
|
|
166
169
|
// clearTimeout(timerId.current)
|
|
167
170
|
// timerId.current = setInterval(() => {
|
|
@@ -173,21 +176,37 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
|
|
|
173
176
|
// resetInactivityTimeout()
|
|
174
177
|
// }, [])
|
|
175
178
|
|
|
179
|
+
const handleOnRefresh = () => {
|
|
180
|
+
const hasMore = !(
|
|
181
|
+
paginationProps.totalPages === paginationProps.currentPage
|
|
182
|
+
);
|
|
183
|
+
if (!businessesList.loading && hasMore) {
|
|
184
|
+
getBusinesses();
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
176
188
|
useEffect(() => {
|
|
177
189
|
Geolocation.getCurrentPosition((pos) => {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
190
|
+
const crd = pos.coords
|
|
191
|
+
const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
|
|
192
|
+
if (distance > 20) setIsFarAway(true)
|
|
181
193
|
else setIsFarAway(false)
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
194
|
+
}, (err) => {
|
|
195
|
+
console.log(`ERROR(${err.code}): ${err.message}`)
|
|
196
|
+
}, {
|
|
197
|
+
enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
|
|
198
|
+
})
|
|
199
|
+
}, [orderState?.options?.address?.location])
|
|
188
200
|
|
|
189
201
|
return (
|
|
190
|
-
<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
|
|
202
|
+
<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
|
|
203
|
+
refreshControl={
|
|
204
|
+
<RefreshControl
|
|
205
|
+
refreshing={refreshing}
|
|
206
|
+
onRefresh={() => handleOnRefresh()}
|
|
207
|
+
/>
|
|
208
|
+
}
|
|
209
|
+
>
|
|
191
210
|
<HeaderWrapper
|
|
192
211
|
source={theme.images.backgrounds.business_list_header}
|
|
193
212
|
style={{ paddingTop: top + 20 }}>
|
|
@@ -257,72 +276,78 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
|
|
|
257
276
|
/>
|
|
258
277
|
</WrapMomentOption>
|
|
259
278
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
279
|
+
{!businessId && (
|
|
280
|
+
<SearchBar
|
|
281
|
+
onSearch={handleChangeSearch}
|
|
282
|
+
searchValue={searchValue}
|
|
283
|
+
lazyLoad
|
|
284
|
+
isCancelXButtonShow={!!searchValue}
|
|
285
|
+
borderStyle={styles.borderStyle}
|
|
286
|
+
onCancel={() => handleChangeSearch('')}
|
|
287
|
+
placeholder={t('SEARCH', 'Search')}
|
|
288
|
+
height={26}
|
|
289
|
+
inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
|
|
290
|
+
/>
|
|
291
|
+
)}
|
|
273
292
|
|
|
274
293
|
</View>
|
|
275
294
|
</OrderControlContainer>
|
|
276
295
|
</HeaderWrapper>
|
|
277
|
-
{
|
|
278
|
-
|
|
279
|
-
<
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
handleCustomClick={handleBusinessClick}
|
|
297
|
-
orderType={orderState?.options?.type}
|
|
298
|
-
/>
|
|
299
|
-
{bAry.length > 1 && (
|
|
296
|
+
{
|
|
297
|
+
isFocused && (
|
|
298
|
+
<OrderProgressWrapper>
|
|
299
|
+
<OrderProgress
|
|
300
|
+
{...props}
|
|
301
|
+
/>
|
|
302
|
+
</OrderProgressWrapper>
|
|
303
|
+
)
|
|
304
|
+
}
|
|
305
|
+
{
|
|
306
|
+
!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
|
|
307
|
+
<FeaturedWrapper>
|
|
308
|
+
<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
|
|
309
|
+
<ScrollView
|
|
310
|
+
showsHorizontalScrollIndicator={false}
|
|
311
|
+
nestedScrollEnabled
|
|
312
|
+
horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
|
|
313
|
+
{featuredBusiness.map((bAry: any, idx) => (
|
|
314
|
+
<View key={'f-listing_' + idx}>
|
|
300
315
|
<BusinessFeaturedController
|
|
301
|
-
key={bAry[
|
|
302
|
-
business={bAry[
|
|
316
|
+
key={bAry[0].id}
|
|
317
|
+
business={bAry[0]}
|
|
303
318
|
handleCustomClick={handleBusinessClick}
|
|
304
319
|
orderType={orderState?.options?.type}
|
|
305
320
|
/>
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
321
|
+
{bAry.length > 1 && (
|
|
322
|
+
<BusinessFeaturedController
|
|
323
|
+
key={bAry[1].id}
|
|
324
|
+
business={bAry[1]}
|
|
325
|
+
handleCustomClick={handleBusinessClick}
|
|
326
|
+
orderType={orderState?.options?.type}
|
|
327
|
+
/>
|
|
328
|
+
)}
|
|
329
|
+
</View>
|
|
330
|
+
))}
|
|
331
|
+
</ScrollView>
|
|
332
|
+
</FeaturedWrapper>
|
|
333
|
+
)
|
|
334
|
+
}
|
|
312
335
|
<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
336
|
+
{
|
|
337
|
+
!businessId && !props.franchiseId && (
|
|
338
|
+
<HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
|
|
339
|
+
)
|
|
340
|
+
}
|
|
316
341
|
<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
|
|
317
342
|
<ListWrapper>
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
343
|
+
{!businessId && (
|
|
344
|
+
<BusinessTypeFilter
|
|
345
|
+
images={props.images}
|
|
346
|
+
businessTypes={props.businessTypes}
|
|
347
|
+
defaultBusinessType={props.defaultBusinessType}
|
|
348
|
+
handleChangeBusinessType={handleChangeBusinessType}
|
|
349
|
+
/>
|
|
350
|
+
)}
|
|
326
351
|
{!businessesList.loading && businessesList.businesses.length === 0 && (
|
|
327
352
|
<NotFoundSource
|
|
328
353
|
content={t(
|