omnipay-reactnative-sdk 0.3.8 → 0.4.1
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 +6 -1
- package/lib/commonjs/components/OmnipayProvider.js +38 -14
- package/lib/commonjs/components/OmnipayProvider.js.map +1 -1
- package/lib/module/components/OmnipayProvider.js +38 -14
- package/lib/module/components/OmnipayProvider.js.map +1 -1
- package/lib/typescript/components/OmnipayProvider.d.ts +2 -1
- package/lib/typescript/components/OmnipayProvider.d.ts.map +1 -1
- package/lib/typescript/hooks/useOmnipay.d.ts +2 -1
- package/lib/typescript/hooks/useOmnipay.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/OmnipayProvider.tsx +52 -27
package/README.md
CHANGED
|
@@ -80,7 +80,11 @@ import { OmnipayProvider, useOmnipay } from 'omnipay-reactnative-sdk';
|
|
|
80
80
|
// import useOmnipay hook in the component you need to show the bills sdk in
|
|
81
81
|
const { initiateBills } = useOmnipay();
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
function onBillsClosed() {
|
|
84
|
+
console.log('sdk is closed..you can do some stuff');
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
initiateBills({ phoneNumber: '08020001111', onClose: onBillsClosed });
|
|
84
88
|
```
|
|
85
89
|
|
|
86
90
|
### Properties
|
|
@@ -94,3 +98,4 @@ initiateBills({ phoneNumber: '08020001111' });
|
|
|
94
98
|
| view | String | the view to render. it accepts only bills |
|
|
95
99
|
| 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 |
|
|
96
100
|
| onExitFullScreen | Function | this is when the hidden elements can be made visible again as the sdk is no longer displaying a modal |
|
|
101
|
+
| onClose | Function | this is used to notify you when the sdk closes |
|
|
@@ -32,6 +32,7 @@ const OmnipayProvider = _ref => {
|
|
|
32
32
|
const [containerOffset, setContainerOffset] = (0, _react.useState)(30);
|
|
33
33
|
const isValidEnv = ['prod', 'dev'].includes(env);
|
|
34
34
|
const isValidColor = color.length > 2;
|
|
35
|
+
const onCloseRef = (0, _react.useRef)(undefined);
|
|
35
36
|
function getWebviewStyle() {
|
|
36
37
|
if (!showWebview) {
|
|
37
38
|
return {
|
|
@@ -90,16 +91,25 @@ const OmnipayProvider = _ref => {
|
|
|
90
91
|
}
|
|
91
92
|
const _initiateBills = _ref2 => {
|
|
92
93
|
let {
|
|
93
|
-
phoneNumber
|
|
94
|
+
phoneNumber,
|
|
95
|
+
onClose
|
|
94
96
|
} = _ref2;
|
|
95
97
|
if (typeof phoneNumber === 'string' && phoneNumber.length === 11) {
|
|
96
98
|
const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
97
99
|
setWebviewUrl(webUrl);
|
|
98
100
|
setIsVisible(true);
|
|
101
|
+
onCloseRef.current = onClose;
|
|
99
102
|
return;
|
|
100
103
|
}
|
|
101
104
|
console.warn('Omnipay error: Invalid phone number');
|
|
102
105
|
};
|
|
106
|
+
function closeWebview() {
|
|
107
|
+
setIsVisible(false);
|
|
108
|
+
if (onCloseRef.current && typeof onCloseRef.current === 'function') {
|
|
109
|
+
onCloseRef.current();
|
|
110
|
+
onCloseRef.current = undefined;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
103
113
|
const webviewStyle = getWebviewStyle();
|
|
104
114
|
const isPropsValid = isValidColor && !!publicKey && isValidEnv;
|
|
105
115
|
return /*#__PURE__*/_react.default.createElement(OmnipayContext.Provider, {
|
|
@@ -111,10 +121,18 @@ const OmnipayProvider = _ref => {
|
|
|
111
121
|
style: styles.modal
|
|
112
122
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
113
123
|
style: styles.backdrop
|
|
114
|
-
}, /*#__PURE__*/_react.default.createElement(_reactNative.
|
|
124
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
115
125
|
style: [styles.container, {
|
|
116
126
|
paddingTop: containerOffset
|
|
117
127
|
}]
|
|
128
|
+
}, containerOffset !== 0 && webviewStatus === 'success' && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
129
|
+
style: styles.close,
|
|
130
|
+
onPress: closeWebview
|
|
131
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
|
|
132
|
+
source: require('../assets/cancel.png'),
|
|
133
|
+
style: styles.closeIcon
|
|
134
|
+
})), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
|
|
135
|
+
contentContainerStyle: styles.contentContainer
|
|
118
136
|
}, /*#__PURE__*/_react.default.createElement(_reactNativeWebview.default, {
|
|
119
137
|
source: {
|
|
120
138
|
uri: webviewUrl
|
|
@@ -127,18 +145,12 @@ const OmnipayProvider = _ref => {
|
|
|
127
145
|
setWebviewStatus('loading');
|
|
128
146
|
},
|
|
129
147
|
onLoadEnd: () => setWebviewStatus('success')
|
|
130
|
-
}),
|
|
131
|
-
style: styles.close,
|
|
132
|
-
onPress: () => setIsVisible(false)
|
|
133
|
-
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
|
|
134
|
-
source: require('../assets/cancel.png'),
|
|
135
|
-
style: styles.closeIcon
|
|
136
|
-
})), webviewStatus === 'loading' && showWebview && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
148
|
+
}), webviewStatus === 'loading' && showWebview && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
137
149
|
style: styles.webviewLoader
|
|
138
150
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
|
|
139
151
|
size: "small",
|
|
140
152
|
color: color
|
|
141
|
-
})))))), children);
|
|
153
|
+
}))))))), children);
|
|
142
154
|
};
|
|
143
155
|
exports.OmnipayProvider = OmnipayProvider;
|
|
144
156
|
const styles = _reactNative.StyleSheet.create({
|
|
@@ -153,7 +165,7 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
153
165
|
webview: {
|
|
154
166
|
flex: 1,
|
|
155
167
|
width: '100%',
|
|
156
|
-
height: _reactNative.Dimensions.get('window').height -
|
|
168
|
+
height: _reactNative.Dimensions.get('window').height - 100,
|
|
157
169
|
backgroundColor: 'white'
|
|
158
170
|
},
|
|
159
171
|
webviewLoader: {
|
|
@@ -179,7 +191,7 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
179
191
|
backgroundColor: 'white',
|
|
180
192
|
borderTopRightRadius: 20,
|
|
181
193
|
borderTopLeftRadius: 20,
|
|
182
|
-
maxHeight: _reactNative.Dimensions.get('window').height -
|
|
194
|
+
maxHeight: _reactNative.Dimensions.get('window').height - 100,
|
|
183
195
|
flex: 1,
|
|
184
196
|
position: 'relative'
|
|
185
197
|
},
|
|
@@ -191,12 +203,24 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
191
203
|
},
|
|
192
204
|
close: {
|
|
193
205
|
position: 'absolute',
|
|
194
|
-
top:
|
|
195
|
-
right:
|
|
206
|
+
top: 10,
|
|
207
|
+
right: 10,
|
|
208
|
+
backgroundColor: 'white',
|
|
209
|
+
height: 24,
|
|
210
|
+
width: 24,
|
|
211
|
+
borderRadius: 1000,
|
|
212
|
+
alignItems: 'center',
|
|
213
|
+
justifyContent: 'center',
|
|
214
|
+
zIndex: 2
|
|
196
215
|
},
|
|
197
216
|
closeIcon: {
|
|
198
217
|
height: 12,
|
|
199
218
|
width: 12
|
|
219
|
+
},
|
|
220
|
+
contentContainer: {
|
|
221
|
+
flex: 1,
|
|
222
|
+
height: _reactNative.Dimensions.get('window').height - 100,
|
|
223
|
+
position: 'relative'
|
|
200
224
|
}
|
|
201
225
|
});
|
|
202
226
|
//# sourceMappingURL=OmnipayProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
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","isValidEnv","isValidColor","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","phoneNumber","webUrl","console","warn","webviewStyle","isPropsValid","modal","backdrop","container","paddingTop","
|
|
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","isValidEnv","isValidColor","length","onCloseRef","undefined","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","phoneNumber","onClose","webUrl","console","warn","closeWebview","webviewStyle","isPropsValid","modal","backdrop","container","paddingTop","close","require","closeIcon","contentContainer","uri","webviewLoader","StyleSheet","create","hide","display","full","Dimensions","get","backgroundColor","zIndex","alignItems","justifyContent","position","top","left","borderTopRightRadius","borderTopLeftRadius","maxHeight","right","borderRadius"],"sourceRoot":"../../src","sources":["OmnipayProvider.tsx"],"mappings":"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"}
|
|
@@ -22,6 +22,7 @@ export const OmnipayProvider = _ref => {
|
|
|
22
22
|
const [containerOffset, setContainerOffset] = useState(30);
|
|
23
23
|
const isValidEnv = ['prod', 'dev'].includes(env);
|
|
24
24
|
const isValidColor = color.length > 2;
|
|
25
|
+
const onCloseRef = useRef(undefined);
|
|
25
26
|
function getWebviewStyle() {
|
|
26
27
|
if (!showWebview) {
|
|
27
28
|
return {
|
|
@@ -80,16 +81,25 @@ export const OmnipayProvider = _ref => {
|
|
|
80
81
|
}
|
|
81
82
|
const _initiateBills = _ref2 => {
|
|
82
83
|
let {
|
|
83
|
-
phoneNumber
|
|
84
|
+
phoneNumber,
|
|
85
|
+
onClose
|
|
84
86
|
} = _ref2;
|
|
85
87
|
if (typeof phoneNumber === 'string' && phoneNumber.length === 11) {
|
|
86
88
|
const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
87
89
|
setWebviewUrl(webUrl);
|
|
88
90
|
setIsVisible(true);
|
|
91
|
+
onCloseRef.current = onClose;
|
|
89
92
|
return;
|
|
90
93
|
}
|
|
91
94
|
console.warn('Omnipay error: Invalid phone number');
|
|
92
95
|
};
|
|
96
|
+
function closeWebview() {
|
|
97
|
+
setIsVisible(false);
|
|
98
|
+
if (onCloseRef.current && typeof onCloseRef.current === 'function') {
|
|
99
|
+
onCloseRef.current();
|
|
100
|
+
onCloseRef.current = undefined;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
93
103
|
const webviewStyle = getWebviewStyle();
|
|
94
104
|
const isPropsValid = isValidColor && !!publicKey && isValidEnv;
|
|
95
105
|
return /*#__PURE__*/React.createElement(OmnipayContext.Provider, {
|
|
@@ -101,10 +111,18 @@ export const OmnipayProvider = _ref => {
|
|
|
101
111
|
style: styles.modal
|
|
102
112
|
}, /*#__PURE__*/React.createElement(View, {
|
|
103
113
|
style: styles.backdrop
|
|
104
|
-
}, /*#__PURE__*/React.createElement(
|
|
114
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
105
115
|
style: [styles.container, {
|
|
106
116
|
paddingTop: containerOffset
|
|
107
117
|
}]
|
|
118
|
+
}, containerOffset !== 0 && webviewStatus === 'success' && /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
119
|
+
style: styles.close,
|
|
120
|
+
onPress: closeWebview
|
|
121
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
|
122
|
+
source: require('../assets/cancel.png'),
|
|
123
|
+
style: styles.closeIcon
|
|
124
|
+
})), /*#__PURE__*/React.createElement(ScrollView, {
|
|
125
|
+
contentContainerStyle: styles.contentContainer
|
|
108
126
|
}, /*#__PURE__*/React.createElement(WebView, {
|
|
109
127
|
source: {
|
|
110
128
|
uri: webviewUrl
|
|
@@ -117,18 +135,12 @@ export const OmnipayProvider = _ref => {
|
|
|
117
135
|
setWebviewStatus('loading');
|
|
118
136
|
},
|
|
119
137
|
onLoadEnd: () => setWebviewStatus('success')
|
|
120
|
-
}),
|
|
121
|
-
style: styles.close,
|
|
122
|
-
onPress: () => setIsVisible(false)
|
|
123
|
-
}, /*#__PURE__*/React.createElement(Image, {
|
|
124
|
-
source: require('../assets/cancel.png'),
|
|
125
|
-
style: styles.closeIcon
|
|
126
|
-
})), webviewStatus === 'loading' && showWebview && /*#__PURE__*/React.createElement(View, {
|
|
138
|
+
}), webviewStatus === 'loading' && showWebview && /*#__PURE__*/React.createElement(View, {
|
|
127
139
|
style: styles.webviewLoader
|
|
128
140
|
}, /*#__PURE__*/React.createElement(ActivityIndicator, {
|
|
129
141
|
size: "small",
|
|
130
142
|
color: color
|
|
131
|
-
})))))), children);
|
|
143
|
+
}))))))), children);
|
|
132
144
|
};
|
|
133
145
|
const styles = StyleSheet.create({
|
|
134
146
|
hide: {
|
|
@@ -142,7 +154,7 @@ const styles = StyleSheet.create({
|
|
|
142
154
|
webview: {
|
|
143
155
|
flex: 1,
|
|
144
156
|
width: '100%',
|
|
145
|
-
height: Dimensions.get('window').height -
|
|
157
|
+
height: Dimensions.get('window').height - 100,
|
|
146
158
|
backgroundColor: 'white'
|
|
147
159
|
},
|
|
148
160
|
webviewLoader: {
|
|
@@ -168,7 +180,7 @@ const styles = StyleSheet.create({
|
|
|
168
180
|
backgroundColor: 'white',
|
|
169
181
|
borderTopRightRadius: 20,
|
|
170
182
|
borderTopLeftRadius: 20,
|
|
171
|
-
maxHeight: Dimensions.get('window').height -
|
|
183
|
+
maxHeight: Dimensions.get('window').height - 100,
|
|
172
184
|
flex: 1,
|
|
173
185
|
position: 'relative'
|
|
174
186
|
},
|
|
@@ -180,12 +192,24 @@ const styles = StyleSheet.create({
|
|
|
180
192
|
},
|
|
181
193
|
close: {
|
|
182
194
|
position: 'absolute',
|
|
183
|
-
top:
|
|
184
|
-
right:
|
|
195
|
+
top: 10,
|
|
196
|
+
right: 10,
|
|
197
|
+
backgroundColor: 'white',
|
|
198
|
+
height: 24,
|
|
199
|
+
width: 24,
|
|
200
|
+
borderRadius: 1000,
|
|
201
|
+
alignItems: 'center',
|
|
202
|
+
justifyContent: 'center',
|
|
203
|
+
zIndex: 2
|
|
185
204
|
},
|
|
186
205
|
closeIcon: {
|
|
187
206
|
height: 12,
|
|
188
207
|
width: 12
|
|
208
|
+
},
|
|
209
|
+
contentContainer: {
|
|
210
|
+
flex: 1,
|
|
211
|
+
height: Dimensions.get('window').height - 100,
|
|
212
|
+
position: 'relative'
|
|
189
213
|
}
|
|
190
214
|
});
|
|
191
215
|
//# sourceMappingURL=OmnipayProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","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","isValidEnv","isValidColor","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","console","warn","webviewStyle","isPropsValid","modal","backdrop","container","paddingTop","
|
|
1
|
+
{"version":3,"names":["React","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","isValidEnv","isValidColor","length","onCloseRef","undefined","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","onClose","webUrl","console","warn","closeWebview","webviewStyle","isPropsValid","modal","backdrop","container","paddingTop","close","require","closeIcon","contentContainer","uri","webviewLoader","create","hide","display","full","get","backgroundColor","zIndex","alignItems","justifyContent","position","top","left","borderTopRightRadius","borderTopLeftRadius","maxHeight","right","borderRadius"],"sourceRoot":"../../src","sources":["OmnipayProvider.tsx"],"mappings":"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"}
|
|
@@ -7,9 +7,10 @@ declare type OmnipayProviderProps = {
|
|
|
7
7
|
};
|
|
8
8
|
declare type InitiateBillsType = {
|
|
9
9
|
phoneNumber: string;
|
|
10
|
+
onClose?: () => void;
|
|
10
11
|
};
|
|
11
12
|
export declare type OmnipayContextType = {
|
|
12
|
-
initiateBills: ({ phoneNumber }: InitiateBillsType) => void;
|
|
13
|
+
initiateBills: ({ phoneNumber, onClose }: InitiateBillsType) => void;
|
|
13
14
|
};
|
|
14
15
|
export declare const OmnipayContext: React.Context<OmnipayContextType | null>;
|
|
15
16
|
export declare const OmnipayProvider: ({ children, publicKey, env, color, }: OmnipayProviderProps) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OmnipayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAgBhD,aAAK,oBAAoB,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;CACrD,CAAC;AAQF,aAAK,iBAAiB,GAAG;IACvB,WAAW,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"OmnipayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAgBhD,aAAK,oBAAoB,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;CACrD,CAAC;AAQF,aAAK,iBAAiB,GAAG;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,aAAa,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACtE,CAAC;AAMF,eAAO,MAAM,cAAc,0CAE1B,CAAC;AAEF,eAAO,MAAM,eAAe,yCAKzB,oBAAoB,gBA0ItB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOmnipay.d.ts","sourceRoot":"","sources":["../../../src/hooks/useOmnipay.tsx"],"names":[],"mappings":"AAMA,wBAAgB,UAAU
|
|
1
|
+
{"version":3,"file":"useOmnipay.d.ts","sourceRoot":"","sources":["../../../src/hooks/useOmnipay.tsx"],"names":[],"mappings":"AAMA,wBAAgB,UAAU;;;;;EAKzB"}
|
package/package.json
CHANGED
|
@@ -29,10 +29,11 @@ type Status = 'error' | 'loading' | 'success';
|
|
|
29
29
|
|
|
30
30
|
type InitiateBillsType = {
|
|
31
31
|
phoneNumber: string;
|
|
32
|
+
onClose?: () => void;
|
|
32
33
|
};
|
|
33
34
|
|
|
34
35
|
export type OmnipayContextType = {
|
|
35
|
-
initiateBills: ({ phoneNumber }: InitiateBillsType) => void;
|
|
36
|
+
initiateBills: ({ phoneNumber, onClose }: InitiateBillsType) => void;
|
|
36
37
|
};
|
|
37
38
|
|
|
38
39
|
let defaultValue = {
|
|
@@ -58,6 +59,7 @@ export const OmnipayProvider = ({
|
|
|
58
59
|
const [containerOffset, setContainerOffset] = useState(30);
|
|
59
60
|
const isValidEnv = ['prod', 'dev'].includes(env);
|
|
60
61
|
const isValidColor = color.length > 2;
|
|
62
|
+
const onCloseRef = useRef<(() => void) | undefined>(undefined);
|
|
61
63
|
|
|
62
64
|
function getWebviewStyle() {
|
|
63
65
|
if (!showWebview) {
|
|
@@ -113,16 +115,25 @@ export const OmnipayProvider = ({
|
|
|
113
115
|
} catch (error) {}
|
|
114
116
|
}
|
|
115
117
|
|
|
116
|
-
const _initiateBills = ({ phoneNumber }: InitiateBillsType) => {
|
|
118
|
+
const _initiateBills = ({ phoneNumber, onClose }: InitiateBillsType) => {
|
|
117
119
|
if (typeof phoneNumber === 'string' && phoneNumber.length === 11) {
|
|
118
120
|
const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
119
121
|
setWebviewUrl(webUrl);
|
|
120
122
|
setIsVisible(true);
|
|
123
|
+
onCloseRef.current = onClose;
|
|
121
124
|
return;
|
|
122
125
|
}
|
|
123
126
|
console.warn('Omnipay error: Invalid phone number');
|
|
124
127
|
};
|
|
125
128
|
|
|
129
|
+
function closeWebview() {
|
|
130
|
+
setIsVisible(false);
|
|
131
|
+
if (onCloseRef.current && typeof onCloseRef.current === 'function') {
|
|
132
|
+
onCloseRef.current();
|
|
133
|
+
onCloseRef.current = undefined;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
126
137
|
const webviewStyle = getWebviewStyle();
|
|
127
138
|
const isPropsValid = isValidColor && !!publicKey && isValidEnv;
|
|
128
139
|
|
|
@@ -133,26 +144,13 @@ export const OmnipayProvider = ({
|
|
|
133
144
|
{webviewUrl.includes('view') && (
|
|
134
145
|
<Modal visible={showWebview} style={styles.modal}>
|
|
135
146
|
<View style={styles.backdrop}>
|
|
136
|
-
<
|
|
147
|
+
<View
|
|
137
148
|
style={[styles.container, { paddingTop: containerOffset }]}
|
|
138
149
|
>
|
|
139
|
-
<WebView
|
|
140
|
-
source={{
|
|
141
|
-
uri: webviewUrl,
|
|
142
|
-
}}
|
|
143
|
-
style={webviewStyle}
|
|
144
|
-
injectedJavaScriptBeforeContentLoaded={onWebviewMount}
|
|
145
|
-
onMessage={onWebviewMessage}
|
|
146
|
-
ref={webviewRef}
|
|
147
|
-
onLoadStart={() => {
|
|
148
|
-
setWebviewStatus('loading');
|
|
149
|
-
}}
|
|
150
|
-
onLoadEnd={() => setWebviewStatus('success')}
|
|
151
|
-
/>
|
|
152
150
|
{containerOffset !== 0 && webviewStatus === 'success' && (
|
|
153
151
|
<TouchableOpacity
|
|
154
152
|
style={styles.close}
|
|
155
|
-
onPress={
|
|
153
|
+
onPress={closeWebview}
|
|
156
154
|
>
|
|
157
155
|
<Image
|
|
158
156
|
source={require('../assets/cancel.png')}
|
|
@@ -160,12 +158,27 @@ export const OmnipayProvider = ({
|
|
|
160
158
|
/>
|
|
161
159
|
</TouchableOpacity>
|
|
162
160
|
)}
|
|
163
|
-
{
|
|
164
|
-
<
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
161
|
+
<ScrollView contentContainerStyle={styles.contentContainer}>
|
|
162
|
+
<WebView
|
|
163
|
+
source={{
|
|
164
|
+
uri: webviewUrl,
|
|
165
|
+
}}
|
|
166
|
+
style={webviewStyle}
|
|
167
|
+
injectedJavaScriptBeforeContentLoaded={onWebviewMount}
|
|
168
|
+
onMessage={onWebviewMessage}
|
|
169
|
+
ref={webviewRef}
|
|
170
|
+
onLoadStart={() => {
|
|
171
|
+
setWebviewStatus('loading');
|
|
172
|
+
}}
|
|
173
|
+
onLoadEnd={() => setWebviewStatus('success')}
|
|
174
|
+
/>
|
|
175
|
+
{webviewStatus === 'loading' && showWebview && (
|
|
176
|
+
<View style={styles.webviewLoader}>
|
|
177
|
+
<ActivityIndicator size="small" color={color} />
|
|
178
|
+
</View>
|
|
179
|
+
)}
|
|
180
|
+
</ScrollView>
|
|
181
|
+
</View>
|
|
169
182
|
</View>
|
|
170
183
|
</Modal>
|
|
171
184
|
)}
|
|
@@ -188,7 +201,7 @@ const styles = StyleSheet.create({
|
|
|
188
201
|
webview: {
|
|
189
202
|
flex: 1,
|
|
190
203
|
width: '100%',
|
|
191
|
-
height: Dimensions.get('window').height -
|
|
204
|
+
height: Dimensions.get('window').height - 100,
|
|
192
205
|
backgroundColor: 'white',
|
|
193
206
|
},
|
|
194
207
|
webviewLoader: {
|
|
@@ -214,7 +227,7 @@ const styles = StyleSheet.create({
|
|
|
214
227
|
backgroundColor: 'white',
|
|
215
228
|
borderTopRightRadius: 20,
|
|
216
229
|
borderTopLeftRadius: 20,
|
|
217
|
-
maxHeight: Dimensions.get('window').height -
|
|
230
|
+
maxHeight: Dimensions.get('window').height - 100,
|
|
218
231
|
flex: 1,
|
|
219
232
|
position: 'relative',
|
|
220
233
|
},
|
|
@@ -226,11 +239,23 @@ const styles = StyleSheet.create({
|
|
|
226
239
|
},
|
|
227
240
|
close: {
|
|
228
241
|
position: 'absolute',
|
|
229
|
-
top:
|
|
230
|
-
right:
|
|
242
|
+
top: 10,
|
|
243
|
+
right: 10,
|
|
244
|
+
backgroundColor: 'white',
|
|
245
|
+
height: 24,
|
|
246
|
+
width: 24,
|
|
247
|
+
borderRadius: 1000,
|
|
248
|
+
alignItems: 'center',
|
|
249
|
+
justifyContent: 'center',
|
|
250
|
+
zIndex: 2,
|
|
231
251
|
},
|
|
232
252
|
closeIcon: {
|
|
233
253
|
height: 12,
|
|
234
254
|
width: 12,
|
|
235
255
|
},
|
|
256
|
+
contentContainer: {
|
|
257
|
+
flex: 1,
|
|
258
|
+
height: Dimensions.get('window').height - 100,
|
|
259
|
+
position: 'relative',
|
|
260
|
+
},
|
|
236
261
|
});
|