omnipay-reactnative-sdk 0.2.6 → 0.2.8

package/src/components/OmnipayView.tsx

@@ -1,204 +1,28 @@
-import React, { Fragment, useRef, useState } from 'react';
-import {
-    StyleSheet,
-    View,
-    Platform,
-    PermissionsAndroid,
-    ActivityIndicator,
-    Text,
-    Linking,
-} from 'react-native';
-import { WebView, WebViewMessageEvent } from 'react-native-webview';
-import { selectContactPhone } from 'react-native-select-contact';
+import React, { Fragment, useEffect } from 'react';
+import { useOmnipay } from '../hooks/useOmnipay';
 
 type OmnipayProps = {
-    color: string;
-    env: 'dev' | 'prod';
-    publicKey: string;
     phoneNumber: string;
-    view: 'bills';
-    onEnterFullScreen?: () => void;
-    onExitFullScreen?: () => void;
 };
 
-type PostMessage = {
-    [key: string]: unknown;
-};
-
-type Status = 'error' | 'loading' | 'success';
 
-const OmnipayView = ({
-    color,
-    env,
-    publicKey,
+export const Omnipay = ({
     phoneNumber,
-    view,
-    onEnterFullScreen,
-    onExitFullScreen,
 }: OmnipayProps): JSX.Element => {
-    const webviewRef = useRef<WebView>(null);
-    const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
-    const webHost = getWebHost();
-    const webUrl = `${webHost}?theme=${color}&view=${view}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
-
-    function getWebHost() {
-        if (env === 'dev') {
-            return 'https://omnipay-websdk.vercel.app/';
-        }
-        return 'https://sdk.omnipay.ng/';
-    }
-
-    const onWebviewMount = `
-      window.nativeOs = ${Platform.OS};
-      true;
-    `;
-
-    function postMessage(data: PostMessage) {
-        if (!webviewRef.current) {
-            return;
-        }
-        try {
-            webviewRef.current.postMessage(JSON.stringify(data));
-        } catch (error) { }
-    }
-
-    async function onWebviewMessage(e: WebViewMessageEvent) {
-        try {
-            if (e.nativeEvent && e.nativeEvent.data) {
-                const eventData = JSON.parse(e.nativeEvent.data);
-                const { dataKey, dataValue } = eventData;
-                if (dataKey === 'chooseContact') {
-                    const contactDetails = await getContact();
-                    postMessage({
-                        dataKey: 'contactSelected',
-                        dataValue: contactDetails,
-                    });
-                }
-                if (dataKey === 'modalOpen') {
-                    if (onEnterFullScreen) {
-                        onEnterFullScreen();
-                    }
-                }
-                if (dataKey === 'modalClosed') {
-                    if (onExitFullScreen) {
-                        onExitFullScreen();
-                    }
-                }
-                if (dataKey === 'openLink') {
-                    Linking.openURL(dataValue);
-                }
-            }
-        } catch (error) { }
-    }
+    const { initiateBills } = useOmnipay();
 
-    async function getContact() {
-        try {
-            const isPermissionGranted = await checkPermisionStatus();
-            if (!isPermissionGranted) {
-                return { name: '', phoneNumber: '' };
-            }
-            const result = await selectContactPhone();
-            if (!result) {
-                return { name: '', phoneNumber: '' };
-            }
-            let { contact, selectedPhone } = result;
-            return { name: contact.name, phoneNumber: selectedPhone.number };
-        } catch (error) {
-            return { name: '', phoneNumber: '' };
-        }
-    }
+    useEffect(() => {
+        initiateBills(phoneNumber)
+    }, [phoneNumber]);
 
-    async function checkPermisionStatus() {
-        if (Platform.OS === 'ios') {
-            return true;
-        }
-        if (PermissionsAndroid.PERMISSIONS.READ_CONTACTS) {
-            const granted = await PermissionsAndroid.request(
-                PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
-                {
-                    title: 'Allow us access your contact list',
-                    message:
-                        'This will enable you choose a phone number to buy airtime or data for from your contact list',
-                    buttonNegative: 'Cancel',
-                    buttonPositive: 'OK',
-                }
-            );
-            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
-                return true;
-            }
-        }
-        return false;
-    }
 
-    if (view !== 'bills') {
-        return <Text>Invalid view</Text>;
-    }
-
-    if (!publicKey.includes('OMNIPUBKEY_')) {
-        return <Text>Invalid public key</Text>;
-    }
-
-    if (phoneNumber.length !== 11) {
-        return <Text>Invalid phone number</Text>;
-    }
-
-    if (color.length < 3) {
-        return <Text>Invalid color</Text>;
-    }
-
-    if (!['dev', 'prod'].includes(env)) {
-        return <Text>Invalid environment</Text>;
-    }
 
     return (
         <Fragment>
-            <View style={styles.full}>
-                <WebView
-                    source={{
-                        uri: webUrl,
-                    }}
-                    style={styles.webview}
-                    injectedJavaScriptBeforeContentLoaded={onWebviewMount}
-                    onMessage={onWebviewMessage}
-                    ref={webviewRef}
-                    onLoadEnd={() => setWebviewStatus('success')}
-                />
-                {webviewStatus === 'loading' && (
-                    <View style={styles.webviewLoader}>
-                        <ActivityIndicator size="small" color={color} />
-                    </View>
-                )}
-            </View>
+
         </Fragment>
     );
 };
 
-const styles = StyleSheet.create({
-    hide: {
-        display: 'none',
-    },
-    full: {
-        flex: 1,
-        width: '100%',
-        height: '100%',
-    },
-    webview: {
-        flex: 1,
-        width: '100%',
-        height: '100%',
-    },
-    webviewLoader: {
-        zIndex: 3,
-        backgroundColor: 'white',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flex: 1,
-        width: '100%',
-        height: '100%',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-    },
-});
 
-export default OmnipayView;
+

package/src/functions.ts

@@ -0,0 +1,49 @@
+import { PermissionsAndroid, Platform } from "react-native";
+import { selectContactPhone } from "react-native-select-contact";
+
+export async function checkPermisionStatus() {
+    if (Platform.OS === 'ios') {
+        return true;
+    }
+    if (PermissionsAndroid.PERMISSIONS.READ_CONTACTS) {
+        const granted = await PermissionsAndroid.request(
+            PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
+            {
+                title: 'Allow us access your contact list',
+                message:
+                    'This will enable you choose a phone number to buy airtime or data for from your contact list',
+                buttonNegative: 'Cancel',
+                buttonPositive: 'OK',
+            }
+        );
+        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+            return true;
+        }
+    }
+    return false;
+}
+
+export async function getContact() {
+    try {
+        const isPermissionGranted = await checkPermisionStatus();
+        if (!isPermissionGranted) {
+            return { name: '', phoneNumber: '' };
+        }
+        const result = await selectContactPhone();
+        if (!result) {
+            return { name: '', phoneNumber: '' };
+        }
+        let { contact, selectedPhone } = result;
+        return { name: contact.name, phoneNumber: selectedPhone.number };
+    } catch (error) {
+        return { name: '', phoneNumber: '' };
+    }
+}
+
+export function getWebHost(env: "prod" | "dev") {
+    if (env === 'dev') {
+        return 'https://omnipay-websdk.vercel.app/';
+    }
+    return 'https://sdk.omnipay.ng/';
+}
+

package/src/index.tsx

@@ -1,2 +1,3 @@
 export { OmnipayProvider } from "./components/OmnipayProvider";
 export { useOmnipay } from './hooks/useOmnipay';
+export { Omnipay } from "./components/OmnipayView"