omnipay-reactnative-sdk 0.2.7 → 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 +16 -53
- package/lib/commonjs/components/OmnipayProvider.js.map +1 -1
- package/lib/commonjs/components/OmnipayView.js +12 -173
- 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 +4 -4
- package/lib/module/components/OmnipayProvider.js +16 -53
- package/lib/module/components/OmnipayProvider.js.map +1 -1
- package/lib/module/components/OmnipayView.js +11 -172
- 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 -1
- 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 +1 -7
- 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 -1
- package/lib/typescript/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/OmnipayProvider.tsx +29 -58
- package/src/components/OmnipayView.tsx +9 -184
- package/src/functions.ts +49 -0
- package/src/index.tsx +1 -1
|
@@ -1,176 +1,15 @@
|
|
|
1
|
-
import React, { Fragment,
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
import { selectContactPhone } from 'react-native-select-contact';
|
|
5
|
-
export 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
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","
|
|
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
|
-
export declare const
|
|
4
|
+
export declare const Omnipay: ({ phoneNumber, }: OmnipayProps) => JSX.Element;
|
|
11
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;AAChD,OAAO,EAAE,
|
|
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,7 +17,7 @@ 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);
|
|
@@ -33,6 +33,7 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
|
|
|
33
33
|
|
|
34
34
|
console.log(useFullscreen)
|
|
35
35
|
|
|
36
|
+
|
|
36
37
|
function getWebviewStyle() {
|
|
37
38
|
if (isNoviewLoaded) {
|
|
38
39
|
return { opacity: 0, height: 0, width: 0, flex: 0 };
|
|
@@ -88,49 +89,13 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
|
|
|
88
89
|
} catch (error) { }
|
|
89
90
|
}
|
|
90
91
|
|
|
91
|
-
async function getContact() {
|
|
92
|
-
try {
|
|
93
|
-
const isPermissionGranted = await checkPermisionStatus();
|
|
94
|
-
if (!isPermissionGranted) {
|
|
95
|
-
return { name: '', phoneNumber: '' };
|
|
96
|
-
}
|
|
97
|
-
const result = await selectContactPhone();
|
|
98
|
-
if (!result) {
|
|
99
|
-
return { name: '', phoneNumber: '' };
|
|
100
|
-
}
|
|
101
|
-
let { contact, selectedPhone } = result;
|
|
102
|
-
return { name: contact.name, phoneNumber: selectedPhone.number };
|
|
103
|
-
} catch (error) {
|
|
104
|
-
return { name: '', phoneNumber: '' };
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
92
|
|
|
108
|
-
async function checkPermisionStatus() {
|
|
109
|
-
if (Platform.OS === 'ios') {
|
|
110
|
-
return true;
|
|
111
|
-
}
|
|
112
|
-
if (PermissionsAndroid.PERMISSIONS.READ_CONTACTS) {
|
|
113
|
-
const granted = await PermissionsAndroid.request(
|
|
114
|
-
PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
|
|
115
|
-
{
|
|
116
|
-
title: 'Allow us access your contact list',
|
|
117
|
-
message:
|
|
118
|
-
'This will enable you choose a phone number to buy airtime or data for from your contact list',
|
|
119
|
-
buttonNegative: 'Cancel',
|
|
120
|
-
buttonPositive: 'OK',
|
|
121
|
-
}
|
|
122
|
-
);
|
|
123
|
-
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
|
|
124
|
-
return true;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
return false;
|
|
128
|
-
}
|
|
129
93
|
|
|
130
94
|
const _initiateBills = useCallback(
|
|
131
95
|
(
|
|
132
96
|
phoneNumber: string
|
|
133
97
|
) => {
|
|
98
|
+
console.log(phoneNumber)
|
|
134
99
|
if (phoneNumber) {
|
|
135
100
|
if (phoneNumber.length === 11) {
|
|
136
101
|
const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
@@ -144,23 +109,26 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
|
|
|
144
109
|
|
|
145
110
|
return (
|
|
146
111
|
<OmnipayContext.Provider value={{ initiateBills: _initiateBills }}>
|
|
147
|
-
{
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
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>
|
|
164
132
|
</OmnipayContext.Provider>
|
|
165
133
|
);
|
|
166
134
|
};
|
|
@@ -177,7 +145,10 @@ const styles = StyleSheet.create({
|
|
|
177
145
|
webview: {
|
|
178
146
|
flex: 1,
|
|
179
147
|
width: '100%',
|
|
180
|
-
height:
|
|
148
|
+
height: 900,
|
|
149
|
+
// position: "absolute",
|
|
150
|
+
// top: 0,
|
|
151
|
+
// left: 0
|
|
181
152
|
},
|
|
182
153
|
webviewLoader: {
|
|
183
154
|
zIndex: 3,
|