omnipay-reactnative-sdk 0.3.0 → 0.3.2
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/README.md +29 -11
- package/lib/commonjs/assets/cancel.png +0 -0
- package/lib/commonjs/components/OmnipayProvider.js +76 -18
- package/lib/commonjs/components/OmnipayProvider.js.map +1 -1
- package/lib/commonjs/hooks/useOmnipay.js +1 -1
- package/lib/commonjs/hooks/useOmnipay.js.map +1 -1
- package/lib/module/assets/cancel.png +0 -0
- package/lib/module/components/OmnipayProvider.js +78 -20
- package/lib/module/components/OmnipayProvider.js.map +1 -1
- package/lib/module/hooks/useOmnipay.js +1 -1
- package/lib/module/hooks/useOmnipay.js.map +1 -1
- package/lib/typescript/components/OmnipayProvider.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/assets/cancel.png +0 -0
- package/src/components/OmnipayProvider.tsx +92 -32
- package/src/hooks/useOmnipay.tsx +1 -1
package/README.md
CHANGED
|
@@ -24,6 +24,9 @@ Make sure your manifest files includes permission to read contacts
|
|
|
24
24
|
Also add this for Android 11+ support below the application tag in your AndroidManifest.xml file
|
|
25
25
|
|
|
26
26
|
```sh
|
|
27
|
+
<application>
|
|
28
|
+
......
|
|
29
|
+
</application>
|
|
27
30
|
<queries>
|
|
28
31
|
<intent>
|
|
29
32
|
<action android:name="android.intent.action.VIEW" />
|
|
@@ -49,7 +52,8 @@ android.enableJetifier=true
|
|
|
49
52
|
## Usage
|
|
50
53
|
|
|
51
54
|
```js
|
|
52
|
-
|
|
55
|
+
// usage with Omnipay component
|
|
56
|
+
import { Omnipay } from 'omnipay-reactnative-sdk';
|
|
53
57
|
|
|
54
58
|
<Omnipay
|
|
55
59
|
color="#FD7A23"
|
|
@@ -57,20 +61,34 @@ import Omnipay from 'omnipay-reactnative-sdk';
|
|
|
57
61
|
phoneNumber="08020001111"
|
|
58
62
|
publicKey="OMNIPUBKEY_HZA3ERGYEE5XUFGTZDQV_MNKRSTA3-TU"
|
|
59
63
|
view="bills"
|
|
60
|
-
onEnterFullScreen={()=> hideExtraUiElements()}
|
|
61
|
-
onExitFullScreen={()=> unhideExtraUiElements()}
|
|
64
|
+
onEnterFullScreen={() => hideExtraUiElements()}
|
|
65
|
+
onExitFullScreen={() => unhideExtraUiElements()}
|
|
62
66
|
/>;
|
|
63
67
|
|
|
68
|
+
// usage with useOmnipay hook
|
|
69
|
+
import { OmnipayProvider, useOmnipay } from 'omnipay-reactnative-sdk';
|
|
70
|
+
|
|
71
|
+
// Wrap your parent component with OmnipayProvider like below
|
|
72
|
+
<OmnipayProvider publicKey="OMNIPUBKEY_HZA3ERGYEE5XUFGTZDQV_MNKRSTA3-TU" env="dev" color="red">
|
|
73
|
+
{/* the rest of your app */}
|
|
74
|
+
</OmnipayProvider>
|
|
75
|
+
|
|
76
|
+
// import useOmnipay hook in the
|
|
77
|
+
const { initiateBills } = useOmnipay();
|
|
78
|
+
|
|
79
|
+
initiateBills("08020001111") //08020001111 is the customer phone number
|
|
80
|
+
|
|
81
|
+
|
|
64
82
|
```
|
|
65
83
|
|
|
66
84
|
### Properties
|
|
67
85
|
|
|
68
|
-
| Name
|
|
69
|
-
|
|
|
70
|
-
| color
|
|
71
|
-
| env
|
|
72
|
-
| phoneNumber
|
|
73
|
-
| publicKey
|
|
74
|
-
| view
|
|
86
|
+
| Name | Type | Description |
|
|
87
|
+
| ----------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
88
|
+
| color | String | color of primary buttons and links |
|
|
89
|
+
| env | String | dev or prod |
|
|
90
|
+
| phoneNumber | String | phone number of the customer |
|
|
91
|
+
| publicKey | String | public key of the company on omnipay |
|
|
92
|
+
| view | String | the view to render. it accepts only bills |
|
|
75
93
|
| onEnterFullScreen | Function | the sdk uses a webview to render the content and might not neccesarily fill up the whole screen. This will be called whenever the sdk needs to show a modal. Other ui elements can be hidden at this point so the modal of the sdk can take up the full width and height of the screen |
|
|
76
|
-
| onExitFullScreen
|
|
94
|
+
| onExitFullScreen | Function | this is when the hidden elements can be made visible again as the sdk is no longer displaying a modal |
|
|
Binary file
|
|
@@ -11,7 +11,10 @@ var _functions = require("../functions");
|
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
13
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
14
|
-
|
|
14
|
+
let defaultValue = {
|
|
15
|
+
initiateBills: () => null
|
|
16
|
+
};
|
|
17
|
+
const OmnipayContext = /*#__PURE__*/_react.default.createContext(defaultValue);
|
|
15
18
|
exports.OmnipayContext = OmnipayContext;
|
|
16
19
|
const OmnipayProvider = _ref => {
|
|
17
20
|
let {
|
|
@@ -24,9 +27,20 @@ const OmnipayProvider = _ref => {
|
|
|
24
27
|
const [isVisible, setIsVisible] = (0, _react.useState)(false);
|
|
25
28
|
const webviewRef = (0, _react.useRef)(null);
|
|
26
29
|
const webHost = getWebHost();
|
|
27
|
-
const webviewStyle = getWebviewStyle();
|
|
28
30
|
const [webviewUrl, setWebviewUrl] = (0, _react.useState)(webHost);
|
|
29
|
-
const showWebview =
|
|
31
|
+
const showWebview = webviewUrl.includes("view") && isVisible;
|
|
32
|
+
const [containerOffset, setContainerOffset] = (0, _react.useState)(30);
|
|
33
|
+
(0, _react.useEffect)(() => {
|
|
34
|
+
if (!publicKey) {
|
|
35
|
+
console.warn("Public key is required");
|
|
36
|
+
}
|
|
37
|
+
if (["prod", "dev"].includes(env)) {
|
|
38
|
+
console.warn("Invalid environment");
|
|
39
|
+
}
|
|
40
|
+
if (color.length < 3) {
|
|
41
|
+
console.warn("Inavlid color");
|
|
42
|
+
}
|
|
43
|
+
}, [publicKey, env, color]);
|
|
30
44
|
function getWebviewStyle() {
|
|
31
45
|
if (!showWebview) {
|
|
32
46
|
return {
|
|
@@ -74,13 +88,16 @@ const OmnipayProvider = _ref => {
|
|
|
74
88
|
if (dataKey === 'openLink') {
|
|
75
89
|
_reactNative.Linking.openURL(dataValue);
|
|
76
90
|
}
|
|
77
|
-
if (dataKey === 'modalOpen') {
|
|
78
|
-
|
|
91
|
+
if (dataKey === 'modalOpen') {
|
|
92
|
+
setContainerOffset(0);
|
|
93
|
+
}
|
|
94
|
+
if (dataKey === 'modalClosed') {
|
|
95
|
+
setContainerOffset(30);
|
|
96
|
+
}
|
|
79
97
|
}
|
|
80
98
|
} catch (error) {}
|
|
81
99
|
}
|
|
82
100
|
const _initiateBills = (0, _react.useCallback)(phoneNumber => {
|
|
83
|
-
console.log(phoneNumber);
|
|
84
101
|
if (phoneNumber) {
|
|
85
102
|
if (phoneNumber.length === 11) {
|
|
86
103
|
const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
@@ -89,15 +106,21 @@ const OmnipayProvider = _ref => {
|
|
|
89
106
|
}
|
|
90
107
|
}
|
|
91
108
|
}, []);
|
|
109
|
+
const webviewStyle = getWebviewStyle();
|
|
110
|
+
const isPropsValid = color.length > 2 && !!publicKey && ["prod", "dev"].includes(env);
|
|
92
111
|
return /*#__PURE__*/_react.default.createElement(OmnipayContext.Provider, {
|
|
93
112
|
value: {
|
|
94
113
|
initiateBills: _initiateBills
|
|
95
114
|
}
|
|
115
|
+
}, isPropsValid && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, webviewUrl.includes("view") && /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
|
|
116
|
+
visible: showWebview,
|
|
117
|
+
style: styles.modal
|
|
96
118
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
97
|
-
style:
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
119
|
+
style: styles.backdrop
|
|
120
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
|
|
121
|
+
style: [styles.container, {
|
|
122
|
+
paddingTop: containerOffset
|
|
123
|
+
}]
|
|
101
124
|
}, /*#__PURE__*/_react.default.createElement(_reactNativeWebview.default, {
|
|
102
125
|
source: {
|
|
103
126
|
uri: webviewUrl
|
|
@@ -106,14 +129,22 @@ const OmnipayProvider = _ref => {
|
|
|
106
129
|
injectedJavaScriptBeforeContentLoaded: onWebviewMount,
|
|
107
130
|
onMessage: onWebviewMessage,
|
|
108
131
|
ref: webviewRef,
|
|
109
|
-
onLoadStart: () =>
|
|
132
|
+
onLoadStart: () => {
|
|
133
|
+
setWebviewStatus("loading");
|
|
134
|
+
},
|
|
110
135
|
onLoadEnd: () => setWebviewStatus('success')
|
|
111
|
-
}),
|
|
136
|
+
}), containerOffset !== 0 && webviewStatus === "success" && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
137
|
+
style: styles.close,
|
|
138
|
+
onPress: () => setIsVisible(false)
|
|
139
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
|
|
140
|
+
source: require("../assets/cancel.png"),
|
|
141
|
+
style: styles.closeIcon
|
|
142
|
+
}))))), webviewStatus === 'loading' && showWebview && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
112
143
|
style: styles.webviewLoader
|
|
113
144
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
|
|
114
145
|
size: "small",
|
|
115
146
|
color: color
|
|
116
|
-
})), children)
|
|
147
|
+
}))), children);
|
|
117
148
|
};
|
|
118
149
|
exports.OmnipayProvider = OmnipayProvider;
|
|
119
150
|
const styles = _reactNative.StyleSheet.create({
|
|
@@ -128,12 +159,9 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
128
159
|
webview: {
|
|
129
160
|
flex: 1,
|
|
130
161
|
width: '100%',
|
|
131
|
-
height:
|
|
132
|
-
|
|
133
|
-
// top: 0,
|
|
134
|
-
// left: 0
|
|
162
|
+
height: _reactNative.Dimensions.get("window").height - 110,
|
|
163
|
+
backgroundColor: "white"
|
|
135
164
|
},
|
|
136
|
-
|
|
137
165
|
webviewLoader: {
|
|
138
166
|
zIndex: 3,
|
|
139
167
|
backgroundColor: 'white',
|
|
@@ -145,6 +173,36 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
145
173
|
position: 'absolute',
|
|
146
174
|
top: 0,
|
|
147
175
|
left: 0
|
|
176
|
+
},
|
|
177
|
+
backdrop: {
|
|
178
|
+
backgroundColor: "rgba(0,0,0, 0.48)",
|
|
179
|
+
flex: 1,
|
|
180
|
+
justifyContent: "flex-end",
|
|
181
|
+
position: "relative",
|
|
182
|
+
height: "100%"
|
|
183
|
+
},
|
|
184
|
+
container: {
|
|
185
|
+
backgroundColor: "white",
|
|
186
|
+
borderTopRightRadius: 20,
|
|
187
|
+
borderTopLeftRadius: 20,
|
|
188
|
+
maxHeight: _reactNative.Dimensions.get("window").height - 110,
|
|
189
|
+
flex: 1,
|
|
190
|
+
position: "relative"
|
|
191
|
+
},
|
|
192
|
+
modal: {
|
|
193
|
+
flex: 1,
|
|
194
|
+
backgroundColor: "red",
|
|
195
|
+
height: "100%",
|
|
196
|
+
width: "100%"
|
|
197
|
+
},
|
|
198
|
+
close: {
|
|
199
|
+
position: "absolute",
|
|
200
|
+
top: -10,
|
|
201
|
+
right: 20
|
|
202
|
+
},
|
|
203
|
+
closeIcon: {
|
|
204
|
+
height: 12,
|
|
205
|
+
width: 12
|
|
148
206
|
}
|
|
149
207
|
});
|
|
150
208
|
//# sourceMappingURL=OmnipayProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["OmnipayContext","React","createContext","OmnipayProvider","children","publicKey","env","color","webviewStatus","setWebviewStatus","useState","isVisible","setIsVisible","webviewRef","useRef","webHost","getWebHost","
|
|
1
|
+
{"version":3,"names":["defaultValue","initiateBills","OmnipayContext","React","createContext","OmnipayProvider","children","publicKey","env","color","webviewStatus","setWebviewStatus","useState","isVisible","setIsVisible","webviewRef","useRef","webHost","getWebHost","webviewUrl","setWebviewUrl","showWebview","includes","containerOffset","setContainerOffset","useEffect","console","warn","length","getWebviewStyle","opacity","height","width","flex","styles","webview","onWebviewMount","Platform","OS","postMessage","data","current","JSON","stringify","error","onWebviewMessage","e","nativeEvent","eventData","parse","dataKey","dataValue","contactDetails","getContact","Linking","openURL","_initiateBills","useCallback","phoneNumber","webUrl","webviewStyle","isPropsValid","modal","backdrop","container","paddingTop","uri","close","require","closeIcon","webviewLoader","StyleSheet","create","hide","display","full","Dimensions","get","backgroundColor","zIndex","alignItems","justifyContent","position","top","left","borderTopRightRadius","borderTopLeftRadius","maxHeight","right"],"sourceRoot":"../../src","sources":["OmnipayProvider.tsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useOmnipay","initiateBills","useContext","OmnipayContext"],"sourceRoot":"../../src","sources":["useOmnipay.tsx"],"mappings":";;;;;;AAAA;AACA;AAEO,SAASA,UAAU,GAAG;EACzB,MAAM;IAAEC;EAAc,CAAC,GAAG,IAAAC,iBAAU,EAACC,+BAAc,CAAuB;EAC1E,OAAO;IACHF
|
|
1
|
+
{"version":3,"names":["useOmnipay","initiateBills","useContext","OmnipayContext"],"sourceRoot":"../../src","sources":["useOmnipay.tsx"],"mappings":";;;;;;AAAA;AACA;AAEO,SAASA,UAAU,GAAG;EACzB,MAAM;IAAEC;EAAc,CAAC,GAAG,IAAAC,iBAAU,EAACC,+BAAc,CAAuB;EAC1E,OAAO;IACHF;EACJ,CAAC;AACL;AAAC"}
|
|
Binary file
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import React, { useCallback, useRef, useState } from 'react';
|
|
2
|
-
import { ActivityIndicator, Linking, Platform, StyleSheet, View } from 'react-native';
|
|
1
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { ActivityIndicator, Linking, Platform, StyleSheet, View, Modal, ScrollView, Dimensions, TouchableOpacity, Image } from 'react-native';
|
|
3
3
|
import WebView from 'react-native-webview';
|
|
4
4
|
import { getContact } from '../functions';
|
|
5
|
-
|
|
5
|
+
let defaultValue = {
|
|
6
|
+
initiateBills: () => null
|
|
7
|
+
};
|
|
8
|
+
export const OmnipayContext = /*#__PURE__*/React.createContext(defaultValue);
|
|
6
9
|
export const OmnipayProvider = _ref => {
|
|
7
10
|
let {
|
|
8
11
|
children,
|
|
@@ -14,9 +17,20 @@ export const OmnipayProvider = _ref => {
|
|
|
14
17
|
const [isVisible, setIsVisible] = useState(false);
|
|
15
18
|
const webviewRef = useRef(null);
|
|
16
19
|
const webHost = getWebHost();
|
|
17
|
-
const webviewStyle = getWebviewStyle();
|
|
18
20
|
const [webviewUrl, setWebviewUrl] = useState(webHost);
|
|
19
|
-
const showWebview =
|
|
21
|
+
const showWebview = webviewUrl.includes("view") && isVisible;
|
|
22
|
+
const [containerOffset, setContainerOffset] = useState(30);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
if (!publicKey) {
|
|
25
|
+
console.warn("Public key is required");
|
|
26
|
+
}
|
|
27
|
+
if (["prod", "dev"].includes(env)) {
|
|
28
|
+
console.warn("Invalid environment");
|
|
29
|
+
}
|
|
30
|
+
if (color.length < 3) {
|
|
31
|
+
console.warn("Inavlid color");
|
|
32
|
+
}
|
|
33
|
+
}, [publicKey, env, color]);
|
|
20
34
|
function getWebviewStyle() {
|
|
21
35
|
if (!showWebview) {
|
|
22
36
|
return {
|
|
@@ -64,13 +78,16 @@ export const OmnipayProvider = _ref => {
|
|
|
64
78
|
if (dataKey === 'openLink') {
|
|
65
79
|
Linking.openURL(dataValue);
|
|
66
80
|
}
|
|
67
|
-
if (dataKey === 'modalOpen') {
|
|
68
|
-
|
|
81
|
+
if (dataKey === 'modalOpen') {
|
|
82
|
+
setContainerOffset(0);
|
|
83
|
+
}
|
|
84
|
+
if (dataKey === 'modalClosed') {
|
|
85
|
+
setContainerOffset(30);
|
|
86
|
+
}
|
|
69
87
|
}
|
|
70
88
|
} catch (error) {}
|
|
71
89
|
}
|
|
72
90
|
const _initiateBills = useCallback(phoneNumber => {
|
|
73
|
-
console.log(phoneNumber);
|
|
74
91
|
if (phoneNumber) {
|
|
75
92
|
if (phoneNumber.length === 11) {
|
|
76
93
|
const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
@@ -79,15 +96,21 @@ export const OmnipayProvider = _ref => {
|
|
|
79
96
|
}
|
|
80
97
|
}
|
|
81
98
|
}, []);
|
|
99
|
+
const webviewStyle = getWebviewStyle();
|
|
100
|
+
const isPropsValid = color.length > 2 && !!publicKey && ["prod", "dev"].includes(env);
|
|
82
101
|
return /*#__PURE__*/React.createElement(OmnipayContext.Provider, {
|
|
83
102
|
value: {
|
|
84
103
|
initiateBills: _initiateBills
|
|
85
104
|
}
|
|
105
|
+
}, isPropsValid && /*#__PURE__*/React.createElement(React.Fragment, null, webviewUrl.includes("view") && /*#__PURE__*/React.createElement(Modal, {
|
|
106
|
+
visible: showWebview,
|
|
107
|
+
style: styles.modal
|
|
86
108
|
}, /*#__PURE__*/React.createElement(View, {
|
|
87
|
-
style:
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
109
|
+
style: styles.backdrop
|
|
110
|
+
}, /*#__PURE__*/React.createElement(ScrollView, {
|
|
111
|
+
style: [styles.container, {
|
|
112
|
+
paddingTop: containerOffset
|
|
113
|
+
}]
|
|
91
114
|
}, /*#__PURE__*/React.createElement(WebView, {
|
|
92
115
|
source: {
|
|
93
116
|
uri: webviewUrl
|
|
@@ -96,14 +119,22 @@ export const OmnipayProvider = _ref => {
|
|
|
96
119
|
injectedJavaScriptBeforeContentLoaded: onWebviewMount,
|
|
97
120
|
onMessage: onWebviewMessage,
|
|
98
121
|
ref: webviewRef,
|
|
99
|
-
onLoadStart: () =>
|
|
122
|
+
onLoadStart: () => {
|
|
123
|
+
setWebviewStatus("loading");
|
|
124
|
+
},
|
|
100
125
|
onLoadEnd: () => setWebviewStatus('success')
|
|
101
|
-
}),
|
|
126
|
+
}), containerOffset !== 0 && webviewStatus === "success" && /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
127
|
+
style: styles.close,
|
|
128
|
+
onPress: () => setIsVisible(false)
|
|
129
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
|
130
|
+
source: require("../assets/cancel.png"),
|
|
131
|
+
style: styles.closeIcon
|
|
132
|
+
}))))), webviewStatus === 'loading' && showWebview && /*#__PURE__*/React.createElement(View, {
|
|
102
133
|
style: styles.webviewLoader
|
|
103
134
|
}, /*#__PURE__*/React.createElement(ActivityIndicator, {
|
|
104
135
|
size: "small",
|
|
105
136
|
color: color
|
|
106
|
-
})), children)
|
|
137
|
+
}))), children);
|
|
107
138
|
};
|
|
108
139
|
const styles = StyleSheet.create({
|
|
109
140
|
hide: {
|
|
@@ -117,12 +148,9 @@ const styles = StyleSheet.create({
|
|
|
117
148
|
webview: {
|
|
118
149
|
flex: 1,
|
|
119
150
|
width: '100%',
|
|
120
|
-
height:
|
|
121
|
-
|
|
122
|
-
// top: 0,
|
|
123
|
-
// left: 0
|
|
151
|
+
height: Dimensions.get("window").height - 110,
|
|
152
|
+
backgroundColor: "white"
|
|
124
153
|
},
|
|
125
|
-
|
|
126
154
|
webviewLoader: {
|
|
127
155
|
zIndex: 3,
|
|
128
156
|
backgroundColor: 'white',
|
|
@@ -134,6 +162,36 @@ const styles = StyleSheet.create({
|
|
|
134
162
|
position: 'absolute',
|
|
135
163
|
top: 0,
|
|
136
164
|
left: 0
|
|
165
|
+
},
|
|
166
|
+
backdrop: {
|
|
167
|
+
backgroundColor: "rgba(0,0,0, 0.48)",
|
|
168
|
+
flex: 1,
|
|
169
|
+
justifyContent: "flex-end",
|
|
170
|
+
position: "relative",
|
|
171
|
+
height: "100%"
|
|
172
|
+
},
|
|
173
|
+
container: {
|
|
174
|
+
backgroundColor: "white",
|
|
175
|
+
borderTopRightRadius: 20,
|
|
176
|
+
borderTopLeftRadius: 20,
|
|
177
|
+
maxHeight: Dimensions.get("window").height - 110,
|
|
178
|
+
flex: 1,
|
|
179
|
+
position: "relative"
|
|
180
|
+
},
|
|
181
|
+
modal: {
|
|
182
|
+
flex: 1,
|
|
183
|
+
backgroundColor: "red",
|
|
184
|
+
height: "100%",
|
|
185
|
+
width: "100%"
|
|
186
|
+
},
|
|
187
|
+
close: {
|
|
188
|
+
position: "absolute",
|
|
189
|
+
top: -10,
|
|
190
|
+
right: 20
|
|
191
|
+
},
|
|
192
|
+
closeIcon: {
|
|
193
|
+
height: 12,
|
|
194
|
+
width: 12
|
|
137
195
|
}
|
|
138
196
|
});
|
|
139
197
|
//# sourceMappingURL=OmnipayProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useRef","useState","ActivityIndicator","Linking","Platform","StyleSheet","View","WebView","getContact","OmnipayContext","createContext","OmnipayProvider","children","publicKey","env","color","webviewStatus","setWebviewStatus","isVisible","setIsVisible","webviewRef","webHost","getWebHost","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useEffect","useRef","useState","ActivityIndicator","Linking","Platform","StyleSheet","View","Modal","ScrollView","Dimensions","TouchableOpacity","Image","WebView","getContact","defaultValue","initiateBills","OmnipayContext","createContext","OmnipayProvider","children","publicKey","env","color","webviewStatus","setWebviewStatus","isVisible","setIsVisible","webviewRef","webHost","getWebHost","webviewUrl","setWebviewUrl","showWebview","includes","containerOffset","setContainerOffset","console","warn","length","getWebviewStyle","opacity","height","width","flex","styles","webview","onWebviewMount","OS","postMessage","data","current","JSON","stringify","error","onWebviewMessage","e","nativeEvent","eventData","parse","dataKey","dataValue","contactDetails","openURL","_initiateBills","phoneNumber","webUrl","webviewStyle","isPropsValid","modal","backdrop","container","paddingTop","uri","close","require","closeIcon","webviewLoader","create","hide","display","full","get","backgroundColor","zIndex","alignItems","justifyContent","position","top","left","borderTopRightRadius","borderTopLeftRadius","maxHeight","right"],"sourceRoot":"../../src","sources":["OmnipayProvider.tsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useContext","OmnipayContext","useOmnipay","initiateBills"],"sourceRoot":"../../src","sources":["useOmnipay.tsx"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,cAAc,QAA4B,+BAA+B;AAElF,OAAO,SAASC,UAAU,GAAG;EACzB,MAAM;IAAEC;EAAc,CAAC,GAAGH,UAAU,CAACC,cAAc,CAAuB;EAC1E,OAAO;IACHE
|
|
1
|
+
{"version":3,"names":["useContext","OmnipayContext","useOmnipay","initiateBills"],"sourceRoot":"../../src","sources":["useOmnipay.tsx"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,cAAc,QAA4B,+BAA+B;AAElF,OAAO,SAASC,UAAU,GAAG;EACzB,MAAM;IAAEC;EAAc,CAAC,GAAGH,UAAU,CAACC,cAAc,CAAuB;EAC1E,OAAO;IACHE;EACJ,CAAC;AACL;AAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OmnipayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"OmnipayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,aAAK,oBAAoB,GAAG;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAA;CACtD,CAAA;AAQD,oBAAY,kBAAkB,GAAG;IAC7B,aAAa,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAA;AAMD,eAAO,MAAM,cAAc,0CAA+D,CAAC;AAE3F,eAAO,MAAM,eAAe,wCAAyC,oBAAoB,gBAwIxF,CAAC"}
|
package/package.json
CHANGED
|
Binary file
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { useCallback, useRef, useState } from 'react';
|
|
2
|
-
import { ActivityIndicator, Linking, Platform, StyleSheet, View } from 'react-native';
|
|
1
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { ActivityIndicator, Linking, Platform, StyleSheet, View, Modal, ScrollView, Dimensions, TouchableOpacity, Image } from 'react-native';
|
|
3
3
|
import WebView, { WebViewMessageEvent } from 'react-native-webview';
|
|
4
4
|
import { getContact } from '../functions';
|
|
5
5
|
|
|
@@ -20,16 +20,32 @@ export type OmnipayContextType = {
|
|
|
20
20
|
initiateBills: (phoneNumber: string) => void;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
let defaultValue = {
|
|
24
|
+
initiateBills: () => null,
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export const OmnipayContext = React.createContext<OmnipayContextType | null>(defaultValue);
|
|
24
28
|
|
|
25
29
|
export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProviderProps) => {
|
|
26
30
|
const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
|
|
27
31
|
const [isVisible, setIsVisible] = useState(false);
|
|
28
32
|
const webviewRef = useRef<WebView>(null);
|
|
29
33
|
const webHost = getWebHost();
|
|
30
|
-
const webviewStyle = getWebviewStyle();
|
|
31
34
|
const [webviewUrl, setWebviewUrl] = useState(webHost);
|
|
32
|
-
const showWebview =
|
|
35
|
+
const showWebview = webviewUrl.includes("view") && isVisible;
|
|
36
|
+
const [containerOffset, setContainerOffset] = useState(30);
|
|
37
|
+
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
if (!publicKey) {
|
|
40
|
+
console.warn("Public key is required")
|
|
41
|
+
}
|
|
42
|
+
if (["prod", "dev"].includes(env)) {
|
|
43
|
+
console.warn("Invalid environment")
|
|
44
|
+
}
|
|
45
|
+
if (color.length < 3) {
|
|
46
|
+
console.warn("Inavlid color")
|
|
47
|
+
}
|
|
48
|
+
}, [publicKey, env, color])
|
|
33
49
|
|
|
34
50
|
|
|
35
51
|
function getWebviewStyle() {
|
|
@@ -39,6 +55,7 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
|
|
|
39
55
|
return styles.webview;
|
|
40
56
|
}
|
|
41
57
|
|
|
58
|
+
|
|
42
59
|
function getWebHost() {
|
|
43
60
|
if (env === 'dev') {
|
|
44
61
|
return 'https://omnipay-websdk.vercel.app/';
|
|
@@ -78,10 +95,10 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
|
|
|
78
95
|
Linking.openURL(dataValue);
|
|
79
96
|
}
|
|
80
97
|
if (dataKey === 'modalOpen') {
|
|
81
|
-
|
|
98
|
+
setContainerOffset(0)
|
|
82
99
|
}
|
|
83
100
|
if (dataKey === 'modalClosed') {
|
|
84
|
-
|
|
101
|
+
setContainerOffset(30)
|
|
85
102
|
}
|
|
86
103
|
}
|
|
87
104
|
} catch (error) { }
|
|
@@ -93,7 +110,6 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
|
|
|
93
110
|
(
|
|
94
111
|
phoneNumber: string
|
|
95
112
|
) => {
|
|
96
|
-
console.log(phoneNumber)
|
|
97
113
|
if (phoneNumber) {
|
|
98
114
|
if (phoneNumber.length === 11) {
|
|
99
115
|
const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
@@ -105,29 +121,45 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
|
|
|
105
121
|
[]
|
|
106
122
|
);
|
|
107
123
|
|
|
124
|
+
const webviewStyle = getWebviewStyle();
|
|
125
|
+
const isPropsValid = color.length > 2 && !!publicKey && ["prod", "dev"].includes(env)
|
|
108
126
|
|
|
109
127
|
return (
|
|
110
128
|
<OmnipayContext.Provider value={{ initiateBills: _initiateBills }}>
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
129
|
+
{isPropsValid &&
|
|
130
|
+
<>
|
|
131
|
+
{webviewUrl.includes("view") &&
|
|
132
|
+
<Modal visible={showWebview} style={styles.modal}>
|
|
133
|
+
<View style={styles.backdrop}>
|
|
134
|
+
<ScrollView style={[styles.container, { paddingTop: containerOffset }]}>
|
|
135
|
+
<WebView
|
|
136
|
+
source={{
|
|
137
|
+
uri: webviewUrl,
|
|
138
|
+
}}
|
|
139
|
+
style={webviewStyle}
|
|
140
|
+
injectedJavaScriptBeforeContentLoaded={onWebviewMount}
|
|
141
|
+
onMessage={onWebviewMessage}
|
|
142
|
+
ref={webviewRef}
|
|
143
|
+
onLoadStart={() => { setWebviewStatus("loading") }}
|
|
144
|
+
onLoadEnd={() => setWebviewStatus('success')}
|
|
145
|
+
/>
|
|
146
|
+
{containerOffset !== 0 && webviewStatus === "success" &&
|
|
147
|
+
<TouchableOpacity style={styles.close} onPress={() => setIsVisible(false)}>
|
|
148
|
+
<Image source={require("../assets/cancel.png")} style={styles.closeIcon} />
|
|
149
|
+
</TouchableOpacity>
|
|
150
|
+
}
|
|
151
|
+
</ScrollView>
|
|
152
|
+
</View>
|
|
153
|
+
</Modal>
|
|
154
|
+
}
|
|
155
|
+
{webviewStatus === 'loading' && showWebview && (
|
|
156
|
+
<View style={styles.webviewLoader}>
|
|
157
|
+
<ActivityIndicator size="small" color={color} />
|
|
158
|
+
</View>
|
|
159
|
+
)}
|
|
160
|
+
</>
|
|
161
|
+
}
|
|
162
|
+
{children}
|
|
131
163
|
</OmnipayContext.Provider>
|
|
132
164
|
);
|
|
133
165
|
};
|
|
@@ -144,10 +176,8 @@ const styles = StyleSheet.create({
|
|
|
144
176
|
webview: {
|
|
145
177
|
flex: 1,
|
|
146
178
|
width: '100%',
|
|
147
|
-
height:
|
|
148
|
-
|
|
149
|
-
// top: 0,
|
|
150
|
-
// left: 0
|
|
179
|
+
height: Dimensions.get("window").height - 110,
|
|
180
|
+
backgroundColor: "white",
|
|
151
181
|
},
|
|
152
182
|
webviewLoader: {
|
|
153
183
|
zIndex: 3,
|
|
@@ -161,4 +191,34 @@ const styles = StyleSheet.create({
|
|
|
161
191
|
top: 0,
|
|
162
192
|
left: 0,
|
|
163
193
|
},
|
|
194
|
+
backdrop: {
|
|
195
|
+
backgroundColor: "rgba(0,0,0, 0.48)",
|
|
196
|
+
flex: 1,
|
|
197
|
+
justifyContent: "flex-end",
|
|
198
|
+
position: "relative",
|
|
199
|
+
height: "100%"
|
|
200
|
+
},
|
|
201
|
+
container: {
|
|
202
|
+
backgroundColor: "white",
|
|
203
|
+
borderTopRightRadius: 20,
|
|
204
|
+
borderTopLeftRadius: 20,
|
|
205
|
+
maxHeight: Dimensions.get("window").height - 110,
|
|
206
|
+
flex: 1,
|
|
207
|
+
position: "relative"
|
|
208
|
+
},
|
|
209
|
+
modal: {
|
|
210
|
+
flex: 1,
|
|
211
|
+
backgroundColor: "red",
|
|
212
|
+
height: "100%",
|
|
213
|
+
width: "100%"
|
|
214
|
+
},
|
|
215
|
+
close: {
|
|
216
|
+
position: "absolute",
|
|
217
|
+
top: -10,
|
|
218
|
+
right: 20
|
|
219
|
+
},
|
|
220
|
+
closeIcon: {
|
|
221
|
+
height: 12,
|
|
222
|
+
width: 12
|
|
223
|
+
}
|
|
164
224
|
});
|
package/src/hooks/useOmnipay.tsx
CHANGED