omnipay-reactnative-sdk 0.3.5 → 0.3.7

package/src/components/OmnipayView.tsx

@@ -1,160 +1,155 @@
 import React, { Fragment, useRef, useState } from 'react';
 import {
-    StyleSheet,
-    View,
-    Platform,
-    ActivityIndicator,
-    Text,
-    Linking,
+  StyleSheet,
+  View,
+  Platform,
+  ActivityIndicator,
+  Text,
+  Linking,
 } from 'react-native';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
-import { getContact, getWebHost } from "../functions"
+import { getContact, getWebHost } from '../functions';
 
 type OmnipayProps = {
-    color: string;
-    env: 'dev' | 'prod';
-    publicKey: string;
-    phoneNumber: string;
-    view: 'bills';
-    onEnterFullScreen?: () => void;
-    onExitFullScreen?: () => void;
+  color: string;
+  env: 'dev' | 'prod';
+  publicKey: string;
+  phoneNumber: string;
+  view: 'bills';
+  onEnterFullScreen?: () => void;
+  onExitFullScreen?: () => void;
 };
 
 type PostMessage = {
-    [key: string]: unknown;
+  [key: string]: unknown;
 };
 
 type Status = 'error' | 'loading' | 'success';
 
 export const Omnipay = ({
-    color,
-    env,
-    publicKey,
-    phoneNumber,
-    view,
-    onEnterFullScreen,
-    onExitFullScreen,
+  color,
+  env,
+  publicKey,
+  phoneNumber,
+  view,
+  onEnterFullScreen,
+  onExitFullScreen,
 }: OmnipayProps): JSX.Element => {
+  const webviewRef = useRef<WebView>(null);
+  const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
+  const webHost = getWebHost(env);
+  const webUrl = `${webHost}?theme=${color}&view=${view}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
 
-    const webviewRef = useRef<WebView>(null);
-    const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
-    const webHost = getWebHost(env);
-    const webUrl = `${webHost}?theme=${color}&view=${view}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
-
-
-
-    const onWebviewMount = `
+  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) { }
+  function postMessage(data: PostMessage) {
+    if (!webviewRef.current) {
+      return;
     }
-
-
-    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>
-    );
+    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) {}
+  }
+
+  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,
-    },
+  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/functions.ts

@@ -1,49 +1,48 @@
-import { PermissionsAndroid, Platform } from "react-native";
-import { selectContactPhone } from "react-native-select-contact";
+import { PermissionsAndroid, Platform } from 'react-native';
+import { selectContactPhone } from 'react-native-select-contact';
 
 export async function checkPermisionStatus() {
-    if (Platform.OS === 'ios') {
-        return true;
+  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;
     }
-    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;
+  }
+  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: '' };
+  try {
+    const isPermissionGranted = await checkPermisionStatus();
+    if (!isPermissionGranted) {
+      return { name: '', phoneNumber: '' };
     }
-}
-
-export function getWebHost(env: "prod" | "dev") {
-    if (env === 'dev') {
-        return 'https://omnipay-websdk.vercel.app/';
+    const result = await selectContactPhone();
+    if (!result) {
+      return { name: '', phoneNumber: '' };
     }
-    return 'https://sdk.omnipay.ng/';
+    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/hooks/useOmnipay.tsx

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

package/src/index.tsx

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