ordering-ui-react-native 0.14.63 → 0.14.66
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/src/components/PaymentOptionsWebView/index.tsx +124 -123
- package/themes/original/src/components/BusinessesListing/index.tsx +29 -19
- package/themes/original/src/components/MomentOption/index.tsx +1 -1
- package/themes/original/src/components/ProductOptionSubOption/index.tsx +3 -2
package/package.json
CHANGED
|
@@ -5,146 +5,147 @@ import WebView from 'react-native-webview';
|
|
|
5
5
|
import { ActivityIndicator } from 'react-native-paper';
|
|
6
6
|
|
|
7
7
|
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
ToastType,
|
|
9
|
+
useToast,
|
|
10
|
+
useApi,
|
|
11
|
+
useLanguage,
|
|
12
|
+
useConfig
|
|
13
13
|
} from 'ordering-components/native';
|
|
14
14
|
|
|
15
15
|
import { OText } from '../shared';
|
|
16
16
|
|
|
17
17
|
interface PaymentOptionsWebViewParams {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
18
|
+
onNavigationRedirect?: Function,
|
|
19
|
+
uri?: any,
|
|
20
|
+
user?: any,
|
|
21
|
+
token?: any,
|
|
22
|
+
cart?: any,
|
|
23
|
+
currency?: any,
|
|
24
|
+
webviewPaymethod?: any,
|
|
25
|
+
setShowGateway?: any,
|
|
26
|
+
setOpenOrderCreating?: any,
|
|
27
|
+
locationId?: any
|
|
28
28
|
}
|
|
29
29
|
export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
30
|
+
const {
|
|
31
|
+
onNavigationRedirect,
|
|
32
|
+
uri,
|
|
33
|
+
user,
|
|
34
|
+
token,
|
|
35
|
+
cart,
|
|
36
|
+
currency,
|
|
37
|
+
webviewPaymethod,
|
|
38
|
+
setShowGateway,
|
|
39
|
+
setOpenOrderCreating,
|
|
40
|
+
locationId
|
|
41
|
+
} = props
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
const webviewRef = useRef<any>(null)
|
|
44
|
+
const [, { showToast }] = useToast();
|
|
45
|
+
const [ordering] = useApi()
|
|
46
|
+
const [{ configs }] = useConfig();
|
|
47
|
+
const [, t] = useLanguage();
|
|
48
48
|
|
|
49
|
-
|
|
50
|
-
const [progClr, setProgClr] = useState('#424242');
|
|
51
|
-
const [prog, setProg] = useState(true);
|
|
52
49
|
|
|
53
|
-
|
|
50
|
+
const [progClr, setProgClr] = useState('#424242');
|
|
51
|
+
const [prog, setProg] = useState(true);
|
|
52
|
+
|
|
53
|
+
const handleCloseWebview = () => {
|
|
54
54
|
setProg(true);
|
|
55
55
|
setShowGateway({ open: false, closedByUser: true })
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
const onMessage = (e: any) => {
|
|
59
|
+
if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
|
|
60
|
+
let payment = JSON.parse(e.nativeEvent.data);
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
if (payment === 'api error') {
|
|
63
|
+
setShowGateway({ closedByUser: true, open: false })
|
|
64
|
+
setProg(true);
|
|
65
|
+
}
|
|
66
66
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
setProg(true);
|
|
76
|
-
setShowGateway({ closedByUser: false, open: false })
|
|
77
|
-
}
|
|
67
|
+
if (payment) {
|
|
68
|
+
if (payment.error) {
|
|
69
|
+
showToast(ToastType.Error, payment.result)
|
|
70
|
+
setOpenOrderCreating && setOpenOrderCreating(false)
|
|
71
|
+
} else if (payment?.result?.order?.uuid) {
|
|
72
|
+
showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
|
|
73
|
+
onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, isFromCheckout: true })
|
|
78
74
|
}
|
|
79
|
-
|
|
75
|
+
setProg(true);
|
|
76
|
+
setShowGateway({ closedByUser: false, open: false })
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
80
|
|
|
81
|
-
|
|
81
|
+
return (
|
|
82
82
|
<View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
83
|
+
<Icon
|
|
84
|
+
name="x"
|
|
85
|
+
size={35}
|
|
86
|
+
style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
|
|
87
|
+
onPress={handleCloseWebview}
|
|
88
|
+
/>
|
|
89
|
+
<OText
|
|
90
|
+
style={{
|
|
91
|
+
textAlign: 'center',
|
|
92
|
+
fontSize: 16,
|
|
93
|
+
fontWeight: 'bold',
|
|
94
|
+
color: '#00457C',
|
|
95
|
+
marginBottom: 5,
|
|
96
|
+
marginTop: 10
|
|
97
|
+
}}>
|
|
98
|
+
{webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (t('SQUARE_PAYMENT', 'Square payment'))}
|
|
99
|
+
</OText>
|
|
100
|
+
<View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
|
|
101
|
+
<ActivityIndicator size={24} color={progClr} />
|
|
102
|
+
</View>
|
|
103
|
+
<WebView
|
|
104
|
+
source={{ uri: uri }}
|
|
105
|
+
onMessage={onMessage}
|
|
106
|
+
ref={webviewRef}
|
|
107
|
+
javaScriptEnabled={true}
|
|
108
|
+
javaScriptEnabledAndroid={true}
|
|
109
|
+
cacheEnabled={false}
|
|
110
|
+
cacheMode='LOAD_NO_CACHE'
|
|
111
|
+
style={{ flex: 1 }}
|
|
112
|
+
onShouldStartLoadWithRequest={() => true}
|
|
113
|
+
onLoadStart={() => {
|
|
114
|
+
setProg(true);
|
|
115
|
+
setProgClr('#424242');
|
|
116
|
+
}}
|
|
117
|
+
onLoadProgress={() => {
|
|
118
|
+
setProg(true);
|
|
119
|
+
setProgClr('#00457C');
|
|
120
|
+
}}
|
|
121
|
+
onLoad={() => {
|
|
122
|
+
setProg(true);
|
|
123
|
+
setProgClr('#00457C');
|
|
124
|
+
}}
|
|
125
|
+
onLoadEnd={(e) => {
|
|
126
|
+
const messageParams = locationId ? { locationId, clientId: webviewPaymethod?.credentials?.application_id } : {}
|
|
127
|
+
const message = {
|
|
128
|
+
action: 'init',
|
|
129
|
+
data: {
|
|
130
|
+
urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
|
|
131
|
+
urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
|
|
132
|
+
payData: {
|
|
133
|
+
paymethod_id: webviewPaymethod?.id,
|
|
134
|
+
amount: cart?.balance ?? cart?.total,
|
|
135
|
+
delivery_zone_id: cart?.delivery_zone_id,
|
|
136
|
+
user_id: user?.id,
|
|
137
|
+
user_name: user?.name
|
|
138
|
+
},
|
|
139
|
+
currency: configs?.stripe_currency?.value || currency,
|
|
140
|
+
userToken: token,
|
|
141
|
+
clientId: webviewPaymethod?.credentials?.client_id,
|
|
142
|
+
...messageParams
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
setProg(false);
|
|
146
|
+
webviewRef?.current?.postMessage?.(JSON.stringify(message))
|
|
147
|
+
}}
|
|
148
|
+
/>
|
|
149
149
|
</View>
|
|
150
|
-
)
|
|
150
|
+
)
|
|
151
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useEffect, useState } from 'react';
|
|
1
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
2
2
|
import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
|
|
3
3
|
import Geolocation from '@react-native-community/geolocation'
|
|
4
4
|
import {
|
|
@@ -44,7 +44,7 @@ import { BusinessFeaturedController } from '../BusinessFeaturedController';
|
|
|
44
44
|
import { HighestRatedBusinesses } from '../HighestRatedBusinesses';
|
|
45
45
|
import { getTypesText, convertToRadian } from '../../utils';
|
|
46
46
|
import { OrderProgress } from '../OrderProgress';
|
|
47
|
-
import { useIsFocused } from '@react-navigation/native';
|
|
47
|
+
import { useFocusEffect, useIsFocused } from '@react-navigation/native';
|
|
48
48
|
|
|
49
49
|
const PIXELS_TO_SCROLL = 1000;
|
|
50
50
|
|
|
@@ -115,15 +115,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
|
|
|
115
115
|
const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
|
|
116
116
|
const [isFarAway, setIsFarAway] = useState(false)
|
|
117
117
|
|
|
118
|
-
|
|
118
|
+
const timerId = useRef<any>(false)
|
|
119
119
|
// const panResponder = useRef(
|
|
120
|
-
//
|
|
121
|
-
//
|
|
122
|
-
//
|
|
123
|
-
//
|
|
124
|
-
//
|
|
125
|
-
//
|
|
126
|
-
//
|
|
120
|
+
// PanResponder.create({
|
|
121
|
+
// onMoveShouldSetPanResponder: (e, gestureState) => {
|
|
122
|
+
// const { dx, dy } = gestureState;
|
|
123
|
+
// resetInactivityTimeout()
|
|
124
|
+
// return (Math.abs(dx) > 20) || (Math.abs(dy) > 20);
|
|
125
|
+
// },
|
|
126
|
+
// })
|
|
127
127
|
// ).current
|
|
128
128
|
|
|
129
129
|
const configTypes =
|
|
@@ -165,16 +165,18 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
|
|
|
165
165
|
}
|
|
166
166
|
}, [businessesList.businesses]);
|
|
167
167
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
168
|
+
const resetInactivityTimeout = () => {
|
|
169
|
+
clearTimeout(timerId.current)
|
|
170
|
+
timerId.current = setInterval(() => {
|
|
171
|
+
if (!businessesList.loading) {
|
|
172
|
+
getBusinesses(true)
|
|
173
|
+
}
|
|
174
|
+
}, 300000)
|
|
175
|
+
}
|
|
174
176
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
177
|
+
useEffect(() => {
|
|
178
|
+
resetInactivityTimeout()
|
|
179
|
+
}, [])
|
|
178
180
|
|
|
179
181
|
const handleOnRefresh = () => {
|
|
180
182
|
if (!businessesList.loading) {
|
|
@@ -195,6 +197,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
|
|
|
195
197
|
})
|
|
196
198
|
}, [orderState?.options?.address?.location])
|
|
197
199
|
|
|
200
|
+
useFocusEffect(
|
|
201
|
+
useCallback(() => {
|
|
202
|
+
getBusinesses(true)
|
|
203
|
+
resetInactivityTimeout()
|
|
204
|
+
return () => clearTimeout(timerId.current)
|
|
205
|
+
}, [navigation])
|
|
206
|
+
)
|
|
207
|
+
|
|
198
208
|
return (
|
|
199
209
|
<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
|
|
200
210
|
refreshControl={
|
|
@@ -277,7 +277,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
|
|
|
277
277
|
style={{ marginEnd: 24 }}
|
|
278
278
|
/>
|
|
279
279
|
)}
|
|
280
|
-
<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM
|
|
280
|
+
<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM D, yyyy h:mm A')} + delivery time)`}</OText>
|
|
281
281
|
</WrapSelectOption>
|
|
282
282
|
<WrapSelectOption
|
|
283
283
|
onPress={() => setOptionSelected({ isAsap: false, isSchedule: true })}
|
|
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
|
|
|
2
2
|
import {
|
|
3
3
|
useUtils,
|
|
4
4
|
useLanguage,
|
|
5
|
-
ProductOptionSuboption as ProductSubOptionController
|
|
5
|
+
ProductOptionSuboption as ProductSubOptionController
|
|
6
6
|
} from 'ordering-components/native'
|
|
7
7
|
import { useTheme } from 'styled-components/native';
|
|
8
8
|
import { StyleSheet } from 'react-native'
|
|
@@ -139,7 +139,8 @@ const styles = StyleSheet.create({
|
|
|
139
139
|
export const ProductOptionSubOption = (props: any) => {
|
|
140
140
|
const productOptionSubOptionProps = {
|
|
141
141
|
...props,
|
|
142
|
-
UIComponent: ProductOptionSubOptionUI
|
|
142
|
+
UIComponent: ProductOptionSubOptionUI,
|
|
143
|
+
isOrigin: true
|
|
143
144
|
}
|
|
144
145
|
|
|
145
146
|
return (
|