omnipay-reactnative-sdk 0.2.3 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omnipay-reactnative-sdk",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Omnipay react native sdk",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/OmnipayProvider.tsx

@@ -0,0 +1,193 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { ActivityIndicator, Linking, PermissionsAndroid, Platform, StyleSheet, View } from 'react-native';
+import WebView, { WebViewMessageEvent } from 'react-native-webview';
+import { selectContactPhone } from 'react-native-select-contact';
+
+type OmnipayProviderProps = {
+    publicKey: string
+    env: 'dev' | 'prod';
+    color: string;
+    children: React.ReactElement | React.ReactElement[]
+}
+
+type PostMessage = {
+    [key: string]: unknown;
+};
+
+type Status = 'error' | 'loading' | 'success';
+
+export type OmnipayContextType = {
+    initiateBills: (color: string, phoneNumber: string) => void;
+}
+
+export const OmnipayContext = React.createContext<OmnipayContextType | null>(null);
+
+export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProviderProps) => {
+    const [webviewUrl, setWebviewUrl] = useState("");
+    const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
+    const [useFullscreen, setUseFullScreen] = useState(false);
+    const webviewRef = useRef<WebView>(null);
+    const webHost = getWebHost();
+    const webviewStyle = getWebviewStyle();
+
+    console.log(useFullscreen)
+
+    function getWebviewStyle() {
+        if (webviewUrl === "") {
+            return { opacity: 0, height: 0, width: 0, flex: 0 };
+        }
+        return styles.webview;
+    }
+
+    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 === 'openLink') {
+                    Linking.openURL(dataValue);
+                }
+                if (dataKey === 'modalOpen') {
+                    setUseFullScreen(true)
+                }
+                if (dataKey === 'modalClosed') {
+                    setUseFullScreen(false)
+                }
+            }
+        } catch (error) { }
+    }
+
+    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: '' };
+        }
+    }
+
+    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;
+    }
+
+    const _initiateBills = useCallback(
+        (
+            phoneNumber: string
+        ) => {
+            if (phoneNumber) {
+                if (phoneNumber.length === 11) {
+                    const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
+                    setWebviewUrl(webUrl)
+                }
+            }
+        },
+        []
+    );
+
+
+    return (
+        <OmnipayContext.Provider value={{ initiateBills: _initiateBills }}>
+            {children}
+            <WebView
+                source={{
+                    uri: webviewUrl,
+                }}
+                style={webviewStyle}
+                injectedJavaScriptBeforeContentLoaded={onWebviewMount}
+                onMessage={onWebviewMessage}
+                ref={webviewRef}
+                onLoadStart={() => setWebviewStatus("loading")}
+                onLoadEnd={() => setWebviewStatus('success')}
+            />
+            {webviewStatus === 'loading' && webviewUrl !== "" && (
+                <View style={styles.webviewLoader}>
+                    <ActivityIndicator size="small" color={color} />
+                </View>
+            )}
+        </OmnipayContext.Provider>
+    );
+};
+
+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,
+    },
+});

package/src/components/OmnipayView.tsx

@@ -0,0 +1,204 @@
+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';
+
+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,
+    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) { }
+    }
+
+    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: '' };
+        }
+    }
+
+    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/hooks/useOmnipay.tsx

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { OmnipayContext, OmnipayContextType } from 'src/components/OmnipayProvider';
+
+export function useOmnipay() {
+    const { initiateBills } = useContext(OmnipayContext) as OmnipayContextType;
+    return {
+        initiateBills: initiateBills
+    }
+};

package/src/index.tsx

@@ -1,204 +1,5 @@
-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 { OmnipayProvider } from "./components/OmnipayProvider";
+import OmnipayView from "./components/OmnipayView";
 
-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 Omnipay = ({
-  color,
-  env,
-  publicKey,
-  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) {}
-  }
-
-  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: '' };
-    }
-  }
-
-  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 Omnipay;
+export { OmnipayProvider };
+export { OmnipayView }