omnipay-reactnative-sdk 0.2.6 → 0.2.8
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/lib/commonjs/components/OmnipayProvider.js +20 -56
- package/lib/commonjs/components/OmnipayProvider.js.map +1 -1
- package/lib/commonjs/components/OmnipayView.js +12 -174
- package/lib/commonjs/components/OmnipayView.js.map +1 -1
- package/lib/commonjs/functions.js +65 -0
- package/lib/commonjs/functions.js.map +1 -0
- package/lib/commonjs/index.js +7 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/components/OmnipayProvider.js +20 -56
- package/lib/module/components/OmnipayProvider.js.map +1 -1
- package/lib/module/components/OmnipayView.js +11 -173
- package/lib/module/components/OmnipayView.js.map +1 -1
- package/lib/module/functions.js +57 -0
- package/lib/module/functions.js.map +1 -0
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/components/OmnipayProvider.d.ts +1 -1
- package/lib/typescript/components/OmnipayProvider.d.ts.map +1 -1
- package/lib/typescript/components/OmnipayView.d.ts +2 -8
- package/lib/typescript/components/OmnipayView.d.ts.map +1 -1
- package/lib/typescript/functions.d.ts +7 -0
- package/lib/typescript/functions.d.ts.map +1 -0
- package/lib/typescript/hooks/useOmnipay.d.ts +1 -1
- package/lib/typescript/index.d.ts +1 -0
- package/lib/typescript/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/OmnipayProvider.tsx +32 -60
- package/src/components/OmnipayView.tsx +9 -185
- package/src/functions.ts +49 -0
- package/src/index.tsx +1 -0
|
@@ -1,177 +1,15 @@
|
|
|
1
|
-
import React, { Fragment,
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
import { selectContactPhone } from 'react-native-select-contact';
|
|
5
|
-
const OmnipayView = _ref => {
|
|
1
|
+
import React, { Fragment, useEffect } from 'react';
|
|
2
|
+
import { useOmnipay } from '../hooks/useOmnipay';
|
|
3
|
+
export const Omnipay = _ref => {
|
|
6
4
|
let {
|
|
7
|
-
|
|
8
|
-
env,
|
|
9
|
-
publicKey,
|
|
10
|
-
phoneNumber,
|
|
11
|
-
view,
|
|
12
|
-
onEnterFullScreen,
|
|
13
|
-
onExitFullScreen
|
|
5
|
+
phoneNumber
|
|
14
6
|
} = _ref;
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
return 'https://sdk.omnipay.ng/';
|
|
24
|
-
}
|
|
25
|
-
const onWebviewMount = `
|
|
26
|
-
window.nativeOs = ${Platform.OS};
|
|
27
|
-
true;
|
|
28
|
-
`;
|
|
29
|
-
function postMessage(data) {
|
|
30
|
-
if (!webviewRef.current) {
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
try {
|
|
34
|
-
webviewRef.current.postMessage(JSON.stringify(data));
|
|
35
|
-
} catch (error) {}
|
|
36
|
-
}
|
|
37
|
-
async function onWebviewMessage(e) {
|
|
38
|
-
try {
|
|
39
|
-
if (e.nativeEvent && e.nativeEvent.data) {
|
|
40
|
-
const eventData = JSON.parse(e.nativeEvent.data);
|
|
41
|
-
const {
|
|
42
|
-
dataKey,
|
|
43
|
-
dataValue
|
|
44
|
-
} = eventData;
|
|
45
|
-
if (dataKey === 'chooseContact') {
|
|
46
|
-
const contactDetails = await getContact();
|
|
47
|
-
postMessage({
|
|
48
|
-
dataKey: 'contactSelected',
|
|
49
|
-
dataValue: contactDetails
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
if (dataKey === 'modalOpen') {
|
|
53
|
-
if (onEnterFullScreen) {
|
|
54
|
-
onEnterFullScreen();
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
if (dataKey === 'modalClosed') {
|
|
58
|
-
if (onExitFullScreen) {
|
|
59
|
-
onExitFullScreen();
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
if (dataKey === 'openLink') {
|
|
63
|
-
Linking.openURL(dataValue);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
} catch (error) {}
|
|
67
|
-
}
|
|
68
|
-
async function getContact() {
|
|
69
|
-
try {
|
|
70
|
-
const isPermissionGranted = await checkPermisionStatus();
|
|
71
|
-
if (!isPermissionGranted) {
|
|
72
|
-
return {
|
|
73
|
-
name: '',
|
|
74
|
-
phoneNumber: ''
|
|
75
|
-
};
|
|
76
|
-
}
|
|
77
|
-
const result = await selectContactPhone();
|
|
78
|
-
if (!result) {
|
|
79
|
-
return {
|
|
80
|
-
name: '',
|
|
81
|
-
phoneNumber: ''
|
|
82
|
-
};
|
|
83
|
-
}
|
|
84
|
-
let {
|
|
85
|
-
contact,
|
|
86
|
-
selectedPhone
|
|
87
|
-
} = result;
|
|
88
|
-
return {
|
|
89
|
-
name: contact.name,
|
|
90
|
-
phoneNumber: selectedPhone.number
|
|
91
|
-
};
|
|
92
|
-
} catch (error) {
|
|
93
|
-
return {
|
|
94
|
-
name: '',
|
|
95
|
-
phoneNumber: ''
|
|
96
|
-
};
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
async function checkPermisionStatus() {
|
|
100
|
-
if (Platform.OS === 'ios') {
|
|
101
|
-
return true;
|
|
102
|
-
}
|
|
103
|
-
if (PermissionsAndroid.PERMISSIONS.READ_CONTACTS) {
|
|
104
|
-
const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CONTACTS, {
|
|
105
|
-
title: 'Allow us access your contact list',
|
|
106
|
-
message: 'This will enable you choose a phone number to buy airtime or data for from your contact list',
|
|
107
|
-
buttonNegative: 'Cancel',
|
|
108
|
-
buttonPositive: 'OK'
|
|
109
|
-
});
|
|
110
|
-
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
|
|
111
|
-
return true;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
return false;
|
|
115
|
-
}
|
|
116
|
-
if (view !== 'bills') {
|
|
117
|
-
return /*#__PURE__*/React.createElement(Text, null, "Invalid view");
|
|
118
|
-
}
|
|
119
|
-
if (!publicKey.includes('OMNIPUBKEY_')) {
|
|
120
|
-
return /*#__PURE__*/React.createElement(Text, null, "Invalid public key");
|
|
121
|
-
}
|
|
122
|
-
if (phoneNumber.length !== 11) {
|
|
123
|
-
return /*#__PURE__*/React.createElement(Text, null, "Invalid phone number");
|
|
124
|
-
}
|
|
125
|
-
if (color.length < 3) {
|
|
126
|
-
return /*#__PURE__*/React.createElement(Text, null, "Invalid color");
|
|
127
|
-
}
|
|
128
|
-
if (!['dev', 'prod'].includes(env)) {
|
|
129
|
-
return /*#__PURE__*/React.createElement(Text, null, "Invalid environment");
|
|
130
|
-
}
|
|
131
|
-
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(View, {
|
|
132
|
-
style: styles.full
|
|
133
|
-
}, /*#__PURE__*/React.createElement(WebView, {
|
|
134
|
-
source: {
|
|
135
|
-
uri: webUrl
|
|
136
|
-
},
|
|
137
|
-
style: styles.webview,
|
|
138
|
-
injectedJavaScriptBeforeContentLoaded: onWebviewMount,
|
|
139
|
-
onMessage: onWebviewMessage,
|
|
140
|
-
ref: webviewRef,
|
|
141
|
-
onLoadEnd: () => setWebviewStatus('success')
|
|
142
|
-
}), webviewStatus === 'loading' && /*#__PURE__*/React.createElement(View, {
|
|
143
|
-
style: styles.webviewLoader
|
|
144
|
-
}, /*#__PURE__*/React.createElement(ActivityIndicator, {
|
|
145
|
-
size: "small",
|
|
146
|
-
color: color
|
|
147
|
-
}))));
|
|
7
|
+
const {
|
|
8
|
+
initiateBills
|
|
9
|
+
} = useOmnipay();
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
initiateBills(phoneNumber);
|
|
12
|
+
}, [phoneNumber]);
|
|
13
|
+
return /*#__PURE__*/React.createElement(Fragment, null);
|
|
148
14
|
};
|
|
149
|
-
const styles = StyleSheet.create({
|
|
150
|
-
hide: {
|
|
151
|
-
display: 'none'
|
|
152
|
-
},
|
|
153
|
-
full: {
|
|
154
|
-
flex: 1,
|
|
155
|
-
width: '100%',
|
|
156
|
-
height: '100%'
|
|
157
|
-
},
|
|
158
|
-
webview: {
|
|
159
|
-
flex: 1,
|
|
160
|
-
width: '100%',
|
|
161
|
-
height: '100%'
|
|
162
|
-
},
|
|
163
|
-
webviewLoader: {
|
|
164
|
-
zIndex: 3,
|
|
165
|
-
backgroundColor: 'white',
|
|
166
|
-
alignItems: 'center',
|
|
167
|
-
justifyContent: 'center',
|
|
168
|
-
flex: 1,
|
|
169
|
-
width: '100%',
|
|
170
|
-
height: '100%',
|
|
171
|
-
position: 'absolute',
|
|
172
|
-
top: 0,
|
|
173
|
-
left: 0
|
|
174
|
-
}
|
|
175
|
-
});
|
|
176
|
-
export default OmnipayView;
|
|
177
15
|
//# sourceMappingURL=OmnipayView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Fragment","
|
|
1
|
+
{"version":3,"names":["React","Fragment","useEffect","useOmnipay","Omnipay","phoneNumber","initiateBills"],"sourceRoot":"../../src","sources":["OmnipayView.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,UAAU,QAAQ,qBAAqB;AAOhD,OAAO,MAAMC,OAAO,GAAG,QAEU;EAAA,IAFT;IACpBC;EACU,CAAC;EACX,MAAM;IAAEC;EAAc,CAAC,GAAGH,UAAU,EAAE;EAEtCD,SAAS,CAAC,MAAM;IACZI,aAAa,CAACD,WAAW,CAAC;EAC9B,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAIjB,oBACI,oBAAC,QAAQ,OAEE;AAEnB,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { PermissionsAndroid, Platform } from "react-native";
|
|
2
|
+
import { selectContactPhone } from "react-native-select-contact";
|
|
3
|
+
export async function checkPermisionStatus() {
|
|
4
|
+
if (Platform.OS === 'ios') {
|
|
5
|
+
return true;
|
|
6
|
+
}
|
|
7
|
+
if (PermissionsAndroid.PERMISSIONS.READ_CONTACTS) {
|
|
8
|
+
const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CONTACTS, {
|
|
9
|
+
title: 'Allow us access your contact list',
|
|
10
|
+
message: 'This will enable you choose a phone number to buy airtime or data for from your contact list',
|
|
11
|
+
buttonNegative: 'Cancel',
|
|
12
|
+
buttonPositive: 'OK'
|
|
13
|
+
});
|
|
14
|
+
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
|
|
15
|
+
return true;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
export async function getContact() {
|
|
21
|
+
try {
|
|
22
|
+
const isPermissionGranted = await checkPermisionStatus();
|
|
23
|
+
if (!isPermissionGranted) {
|
|
24
|
+
return {
|
|
25
|
+
name: '',
|
|
26
|
+
phoneNumber: ''
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
const result = await selectContactPhone();
|
|
30
|
+
if (!result) {
|
|
31
|
+
return {
|
|
32
|
+
name: '',
|
|
33
|
+
phoneNumber: ''
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
let {
|
|
37
|
+
contact,
|
|
38
|
+
selectedPhone
|
|
39
|
+
} = result;
|
|
40
|
+
return {
|
|
41
|
+
name: contact.name,
|
|
42
|
+
phoneNumber: selectedPhone.number
|
|
43
|
+
};
|
|
44
|
+
} catch (error) {
|
|
45
|
+
return {
|
|
46
|
+
name: '',
|
|
47
|
+
phoneNumber: ''
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
export function getWebHost(env) {
|
|
52
|
+
if (env === 'dev') {
|
|
53
|
+
return 'https://omnipay-websdk.vercel.app/';
|
|
54
|
+
}
|
|
55
|
+
return 'https://sdk.omnipay.ng/';
|
|
56
|
+
}
|
|
57
|
+
//# sourceMappingURL=functions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["PermissionsAndroid","Platform","selectContactPhone","checkPermisionStatus","OS","PERMISSIONS","READ_CONTACTS","granted","request","title","message","buttonNegative","buttonPositive","RESULTS","GRANTED","getContact","isPermissionGranted","name","phoneNumber","result","contact","selectedPhone","number","error","getWebHost","env"],"sourceRoot":"../../src","sources":["functions.ts"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,QAAQ,QAAQ,cAAc;AAC3D,SAASC,kBAAkB,QAAQ,6BAA6B;AAEhE,OAAO,eAAeC,oBAAoB,GAAG;EACzC,IAAIF,QAAQ,CAACG,EAAE,KAAK,KAAK,EAAE;IACvB,OAAO,IAAI;EACf;EACA,IAAIJ,kBAAkB,CAACK,WAAW,CAACC,aAAa,EAAE;IAC9C,MAAMC,OAAO,GAAG,MAAMP,kBAAkB,CAACQ,OAAO,CAC5CR,kBAAkB,CAACK,WAAW,CAACC,aAAa,EAC5C;MACIG,KAAK,EAAE,mCAAmC;MAC1CC,OAAO,EACH,8FAA8F;MAClGC,cAAc,EAAE,QAAQ;MACxBC,cAAc,EAAE;IACpB,CAAC,CACJ;IACD,IAAIL,OAAO,KAAKP,kBAAkB,CAACa,OAAO,CAACC,OAAO,EAAE;MAChD,OAAO,IAAI;IACf;EACJ;EACA,OAAO,KAAK;AAChB;AAEA,OAAO,eAAeC,UAAU,GAAG;EAC/B,IAAI;IACA,MAAMC,mBAAmB,GAAG,MAAMb,oBAAoB,EAAE;IACxD,IAAI,CAACa,mBAAmB,EAAE;MACtB,OAAO;QAAEC,IAAI,EAAE,EAAE;QAAEC,WAAW,EAAE;MAAG,CAAC;IACxC;IACA,MAAMC,MAAM,GAAG,MAAMjB,kBAAkB,EAAE;IACzC,IAAI,CAACiB,MAAM,EAAE;MACT,OAAO;QAAEF,IAAI,EAAE,EAAE;QAAEC,WAAW,EAAE;MAAG,CAAC;IACxC;IACA,IAAI;MAAEE,OAAO;MAAEC;IAAc,CAAC,GAAGF,MAAM;IACvC,OAAO;MAAEF,IAAI,EAAEG,OAAO,CAACH,IAAI;MAAEC,WAAW,EAAEG,aAAa,CAACC;IAAO,CAAC;EACpE,CAAC,CAAC,OAAOC,KAAK,EAAE;IACZ,OAAO;MAAEN,IAAI,EAAE,EAAE;MAAEC,WAAW,EAAE;IAAG,CAAC;EACxC;AACJ;AAEA,OAAO,SAASM,UAAU,CAACC,GAAmB,EAAE;EAC5C,IAAIA,GAAG,KAAK,KAAK,EAAE;IACf,OAAO,oCAAoC;EAC/C;EACA,OAAO,yBAAyB;AACpC"}
|
package/lib/module/index.js
CHANGED
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["OmnipayProvider","useOmnipay"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,UAAU,QAAQ,oBAAoB"}
|
|
1
|
+
{"version":3,"names":["OmnipayProvider","useOmnipay","Omnipay"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,OAAO,QAAQ,0BAA0B"}
|
|
@@ -6,7 +6,7 @@ declare type OmnipayProviderProps = {
|
|
|
6
6
|
children: React.ReactElement | React.ReactElement[];
|
|
7
7
|
};
|
|
8
8
|
export declare type OmnipayContextType = {
|
|
9
|
-
initiateBills: (
|
|
9
|
+
initiateBills: (phoneNumber: string) => void;
|
|
10
10
|
};
|
|
11
11
|
export declare const OmnipayContext: React.Context<OmnipayContextType | null>;
|
|
12
12
|
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,KAAwC,MAAM,OAAO,CAAC;AAK7D,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,
|
|
1
|
+
{"version":3,"file":"OmnipayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,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;AAED,eAAO,MAAM,cAAc,0CAAuD,CAAC;AAEnF,eAAO,MAAM,eAAe,wCAAyC,oBAAoB,gBA6GxF,CAAC"}
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
declare type OmnipayProps = {
|
|
2
|
-
color: string;
|
|
3
|
-
env: 'dev' | 'prod';
|
|
4
|
-
publicKey: string;
|
|
5
2
|
phoneNumber: string;
|
|
6
|
-
view: 'bills';
|
|
7
|
-
onEnterFullScreen?: () => void;
|
|
8
|
-
onExitFullScreen?: () => void;
|
|
9
3
|
};
|
|
10
|
-
declare const
|
|
11
|
-
export
|
|
4
|
+
export declare const Omnipay: ({ phoneNumber, }: OmnipayProps) => JSX.Element;
|
|
5
|
+
export {};
|
|
12
6
|
//# sourceMappingURL=OmnipayView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OmnipayView.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayView.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"OmnipayView.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayView.tsx"],"names":[],"mappings":"AAGA,aAAK,YAAY,GAAG;IAChB,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AAGF,eAAO,MAAM,OAAO,qBAEjB,YAAY,KAAG,WAcjB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare function checkPermisionStatus(): Promise<boolean>;
|
|
2
|
+
export declare function getContact(): Promise<{
|
|
3
|
+
name: string;
|
|
4
|
+
phoneNumber: string;
|
|
5
|
+
}>;
|
|
6
|
+
export declare function getWebHost(env: "prod" | "dev"): "https://omnipay-websdk.vercel.app/" | "https://sdk.omnipay.ng/";
|
|
7
|
+
//# sourceMappingURL=functions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../src/functions.ts"],"names":[],"mappings":"AAGA,wBAAsB,oBAAoB,qBAoBzC;AAED,wBAAsB,UAAU;;;GAe/B;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,oEAK7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useCallback, useRef, useState } from 'react';
|
|
2
|
-
import { ActivityIndicator, Linking,
|
|
2
|
+
import { ActivityIndicator, Linking, Platform, StyleSheet, View } from 'react-native';
|
|
3
3
|
import WebView, { WebViewMessageEvent } from 'react-native-webview';
|
|
4
|
-
import {
|
|
4
|
+
import { getContact } from '../functions';
|
|
5
5
|
|
|
6
6
|
type OmnipayProviderProps = {
|
|
7
7
|
publicKey: string
|
|
@@ -17,23 +17,25 @@ type PostMessage = {
|
|
|
17
17
|
type Status = 'error' | 'loading' | 'success';
|
|
18
18
|
|
|
19
19
|
export type OmnipayContextType = {
|
|
20
|
-
initiateBills: (
|
|
20
|
+
initiateBills: (phoneNumber: string) => void;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
export const OmnipayContext = React.createContext<OmnipayContextType | null>(null);
|
|
24
24
|
|
|
25
25
|
export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProviderProps) => {
|
|
26
|
-
const [webviewUrl, setWebviewUrl] = useState("");
|
|
27
26
|
const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
|
|
28
27
|
const [useFullscreen, setUseFullScreen] = useState(false);
|
|
29
28
|
const webviewRef = useRef<WebView>(null);
|
|
30
29
|
const webHost = getWebHost();
|
|
31
30
|
const webviewStyle = getWebviewStyle();
|
|
31
|
+
const [webviewUrl, setWebviewUrl] = useState(webHost);
|
|
32
|
+
const isNoviewLoaded = !webviewUrl.includes("view");
|
|
32
33
|
|
|
33
34
|
console.log(useFullscreen)
|
|
34
35
|
|
|
36
|
+
|
|
35
37
|
function getWebviewStyle() {
|
|
36
|
-
if (
|
|
38
|
+
if (isNoviewLoaded) {
|
|
37
39
|
return { opacity: 0, height: 0, width: 0, flex: 0 };
|
|
38
40
|
}
|
|
39
41
|
return styles.webview;
|
|
@@ -87,49 +89,13 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
|
|
|
87
89
|
} catch (error) { }
|
|
88
90
|
}
|
|
89
91
|
|
|
90
|
-
async function getContact() {
|
|
91
|
-
try {
|
|
92
|
-
const isPermissionGranted = await checkPermisionStatus();
|
|
93
|
-
if (!isPermissionGranted) {
|
|
94
|
-
return { name: '', phoneNumber: '' };
|
|
95
|
-
}
|
|
96
|
-
const result = await selectContactPhone();
|
|
97
|
-
if (!result) {
|
|
98
|
-
return { name: '', phoneNumber: '' };
|
|
99
|
-
}
|
|
100
|
-
let { contact, selectedPhone } = result;
|
|
101
|
-
return { name: contact.name, phoneNumber: selectedPhone.number };
|
|
102
|
-
} catch (error) {
|
|
103
|
-
return { name: '', phoneNumber: '' };
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
92
|
|
|
107
|
-
async function checkPermisionStatus() {
|
|
108
|
-
if (Platform.OS === 'ios') {
|
|
109
|
-
return true;
|
|
110
|
-
}
|
|
111
|
-
if (PermissionsAndroid.PERMISSIONS.READ_CONTACTS) {
|
|
112
|
-
const granted = await PermissionsAndroid.request(
|
|
113
|
-
PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
|
|
114
|
-
{
|
|
115
|
-
title: 'Allow us access your contact list',
|
|
116
|
-
message:
|
|
117
|
-
'This will enable you choose a phone number to buy airtime or data for from your contact list',
|
|
118
|
-
buttonNegative: 'Cancel',
|
|
119
|
-
buttonPositive: 'OK',
|
|
120
|
-
}
|
|
121
|
-
);
|
|
122
|
-
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
|
|
123
|
-
return true;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
return false;
|
|
127
|
-
}
|
|
128
93
|
|
|
129
94
|
const _initiateBills = useCallback(
|
|
130
95
|
(
|
|
131
96
|
phoneNumber: string
|
|
132
97
|
) => {
|
|
98
|
+
console.log(phoneNumber)
|
|
133
99
|
if (phoneNumber) {
|
|
134
100
|
if (phoneNumber.length === 11) {
|
|
135
101
|
const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
@@ -143,23 +109,26 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
|
|
|
143
109
|
|
|
144
110
|
return (
|
|
145
111
|
<OmnipayContext.Provider value={{ initiateBills: _initiateBills }}>
|
|
146
|
-
{
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
112
|
+
<View style={{ flex: 1, backgroundColor: "red", height: "100%" }}>
|
|
113
|
+
<WebView
|
|
114
|
+
source={{
|
|
115
|
+
uri: webviewUrl,
|
|
116
|
+
}}
|
|
117
|
+
style={webviewStyle}
|
|
118
|
+
injectedJavaScriptBeforeContentLoaded={onWebviewMount}
|
|
119
|
+
onMessage={onWebviewMessage}
|
|
120
|
+
ref={webviewRef}
|
|
121
|
+
onLoadStart={() => setWebviewStatus("loading")}
|
|
122
|
+
onLoadEnd={() => setWebviewStatus('success')}
|
|
123
|
+
/>
|
|
124
|
+
{webviewStatus === 'loading' && !isNoviewLoaded && (
|
|
125
|
+
<View style={styles.webviewLoader}>
|
|
126
|
+
<ActivityIndicator size="small" color={color} />
|
|
127
|
+
</View>
|
|
128
|
+
)}
|
|
129
|
+
|
|
130
|
+
{children}
|
|
131
|
+
</View>
|
|
163
132
|
</OmnipayContext.Provider>
|
|
164
133
|
);
|
|
165
134
|
};
|
|
@@ -176,7 +145,10 @@ const styles = StyleSheet.create({
|
|
|
176
145
|
webview: {
|
|
177
146
|
flex: 1,
|
|
178
147
|
width: '100%',
|
|
179
|
-
height:
|
|
148
|
+
height: 900,
|
|
149
|
+
// position: "absolute",
|
|
150
|
+
// top: 0,
|
|
151
|
+
// left: 0
|
|
180
152
|
},
|
|
181
153
|
webviewLoader: {
|
|
182
154
|
zIndex: 3,
|