omnipay-reactnative-sdk 0.3.5 → 0.3.6

package/src/components/OmnipayProvider.tsx

@@ -1,226 +1,234 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, Linking, Platform, StyleSheet, View, Modal, ScrollView, Dimensions, TouchableOpacity, Image } from 'react-native';
+import React, { useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Linking,
+  Platform,
+  StyleSheet,
+  View,
+  Modal,
+  ScrollView,
+  Dimensions,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
 import WebView, { WebViewMessageEvent } from 'react-native-webview';
 import { getContact } from '../functions';
 
 type OmnipayProviderProps = {
-    publicKey: string
-    env: 'dev' | 'prod';
-    color: string;
-    children: React.ReactElement | React.ReactElement[]
-}
+  publicKey: string;
+  env: 'dev' | 'prod';
+  color: string;
+  children: React.ReactElement | React.ReactElement[];
+};
 
 type PostMessage = {
-    [key: string]: unknown;
+  [key: string]: unknown;
 };
 
 type Status = 'error' | 'loading' | 'success';
 
 export type OmnipayContextType = {
-    initiateBills: (phoneNumber: string) => void;
-}
+  initiateBills: (phoneNumber: string) => void;
+};
 
 let defaultValue = {
-    initiateBills: () => null,
-}
-
-export const OmnipayContext = React.createContext<OmnipayContextType | null>(defaultValue);
-
-export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProviderProps) => {
-    const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
-    const [isVisible, setIsVisible] = useState(false);
-    const webviewRef = useRef<WebView>(null);
-    const webHost = getWebHost();
-    const [webviewUrl, setWebviewUrl] = useState(webHost);
-    const showWebview = webviewUrl.includes("view") && isVisible;
-    const [containerOffset, setContainerOffset] = useState(30);
-
-    useEffect(() => {
-        if (!publicKey) {
-            console.warn("Omnipay error: Public key is required")
-        }
-        if (!["prod", "dev"].includes(env)) {
-            console.warn("Omnipay error: Invalid environment")
-        }
-        if (color.length < 3) {
-            console.warn("Omnipay error: Invalid color ")
-        }
-    }, [publicKey, env, color])
-
+  initiateBills: () => null,
+};
 
-    function getWebviewStyle() {
-        if (!showWebview) {
-            return { opacity: 0, height: 0, width: 0, flex: 0 };
-        }
-        return styles.webview;
+export const OmnipayContext = React.createContext<OmnipayContextType | null>(
+  defaultValue
+);
+
+export const OmnipayProvider = ({
+  children,
+  publicKey,
+  env,
+  color,
+}: OmnipayProviderProps) => {
+  const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
+  const [isVisible, setIsVisible] = useState(false);
+  const webviewRef = useRef<WebView>(null);
+  const webHost = getWebHost();
+  const [webviewUrl, setWebviewUrl] = useState(webHost);
+  const showWebview = webviewUrl.includes('view') && isVisible;
+  const [containerOffset, setContainerOffset] = useState(30);
+  const isValidEnv = ['prod', 'dev'].includes(env);
+  const isValidColor = color.length > 2;
+
+  function getWebviewStyle() {
+    if (!showWebview) {
+      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/';
+  function getWebHost() {
+    if (env === 'dev') {
+      return 'https://omnipay-websdk.vercel.app/';
     }
+    return 'https://sdk.omnipay.ng/';
+  }
 
-
-    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) { }
+  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,
+          });
+        }
 
-    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') {
-                    setContainerOffset(0)
-                }
-                if (dataKey === 'modalClosed') {
-                    setContainerOffset(30)
-                }
-            }
-        } catch (error) { }
+        if (dataKey === 'openLink') {
+          Linking.openURL(dataValue);
+        }
+        if (dataKey === 'modalOpen') {
+          setContainerOffset(0);
+        }
+        if (dataKey === 'modalClosed') {
+          setContainerOffset(30);
+        }
+      }
+    } catch (error) {}
+  }
+
+  const _initiateBills = (phoneNumber: string) => {
+    if (phoneNumber) {
+      if (phoneNumber.length === 11) {
+        const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
+        setWebviewUrl(webUrl);
+        setIsVisible(true);
+        return;
+      }
     }
-
-
-
-    const _initiateBills = useCallback(
-        (
-            phoneNumber: string
-        ) => {
-            if (phoneNumber) {
-                if (phoneNumber.length === 11) {
-                    const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
-                    setWebviewUrl(webUrl);
-                    setIsVisible(true);
-                    return;
-                }
-            }
-            console.warn("Omnipay error: Invalid phone number")
-        },
-        []
-    );
-
-    const webviewStyle = getWebviewStyle();
-    const isPropsValid = color.length > 2 && !!publicKey && ["prod", "dev"].includes(env)
-
-    return (
-        <OmnipayContext.Provider value={{ initiateBills: _initiateBills }}>
-            {isPropsValid &&
-                <>
-                    {webviewUrl.includes("view") &&
-                        <Modal visible={showWebview} style={styles.modal}>
-                            <View style={styles.backdrop}>
-                                <ScrollView style={[styles.container, { paddingTop: containerOffset }]}>
-                                    <WebView
-                                        source={{
-                                            uri: webviewUrl,
-                                        }}
-                                        style={webviewStyle}
-                                        injectedJavaScriptBeforeContentLoaded={onWebviewMount}
-                                        onMessage={onWebviewMessage}
-                                        ref={webviewRef}
-                                        onLoadStart={() => { setWebviewStatus("loading") }}
-                                        onLoadEnd={() => setWebviewStatus('success')}
-                                    />
-                                    {containerOffset !== 0 && webviewStatus === "success" &&
-                                        <TouchableOpacity style={styles.close} onPress={() => setIsVisible(false)}>
-                                            <Image source={require("../assets/cancel.png")} style={styles.closeIcon} />
-                                        </TouchableOpacity>
-                                    }
-                                </ScrollView>
-                            </View>
-                        </Modal>
-                    }
-                    {webviewStatus === 'loading' && showWebview && (
-                        <View style={styles.webviewLoader}>
-                            <ActivityIndicator size="small" color={color} />
-                        </View>
-                    )}
-                </>
-            }
-            {children}
-        </OmnipayContext.Provider>
-    );
+    console.warn('Omnipay error: Invalid phone number');
+  };
+
+  const webviewStyle = getWebviewStyle();
+  const isPropsValid = isValidColor && !!publicKey && isValidEnv;
+
+  return (
+    <OmnipayContext.Provider value={{ initiateBills: _initiateBills }}>
+      {isPropsValid && (
+        <>
+          {webviewUrl.includes('view') && (
+            <Modal visible={showWebview} style={styles.modal}>
+              <View style={styles.backdrop}>
+                <ScrollView
+                  style={[styles.container, { paddingTop: containerOffset }]}
+                >
+                  <WebView
+                    source={{
+                      uri: webviewUrl,
+                    }}
+                    style={webviewStyle}
+                    injectedJavaScriptBeforeContentLoaded={onWebviewMount}
+                    onMessage={onWebviewMessage}
+                    ref={webviewRef}
+                    onLoadStart={() => {
+                      setWebviewStatus('loading');
+                    }}
+                    onLoadEnd={() => setWebviewStatus('success')}
+                  />
+                  {containerOffset !== 0 && webviewStatus === 'success' && (
+                    <TouchableOpacity
+                      style={styles.close}
+                      onPress={() => setIsVisible(false)}
+                    >
+                      <Image
+                        source={require('../assets/cancel.png')}
+                        style={styles.closeIcon}
+                      />
+                    </TouchableOpacity>
+                  )}
+                </ScrollView>
+              </View>
+            </Modal>
+          )}
+          {webviewStatus === 'loading' && showWebview && (
+            <View style={styles.webviewLoader}>
+              <ActivityIndicator size="small" color={color} />
+            </View>
+          )}
+        </>
+      )}
+      {children}
+    </OmnipayContext.Provider>
+  );
 };
 
 const styles = StyleSheet.create({
-    hide: {
-        display: 'none',
-    },
-    full: {
-        flex: 1,
-        width: '100%',
-        height: '100%',
-    },
-    webview: {
-        flex: 1,
-        width: '100%',
-        height: Dimensions.get("window").height - 110,
-        backgroundColor: "white",
-    },
-    webviewLoader: {
-        zIndex: 3,
-        backgroundColor: 'white',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flex: 1,
-        width: '100%',
-        height: '100%',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-    },
-    backdrop: {
-        backgroundColor: "rgba(0,0,0, 0.48)",
-        flex: 1,
-        justifyContent: "flex-end",
-        position: "relative",
-        height: "100%"
-    },
-    container: {
-        backgroundColor: "white",
-        borderTopRightRadius: 20,
-        borderTopLeftRadius: 20,
-        maxHeight: Dimensions.get("window").height - 110,
-        flex: 1,
-        position: "relative"
-    },
-    modal: {
-        flex: 1,
-        backgroundColor: "red",
-        height: "100%",
-        width: "100%"
-    },
-    close: {
-        position: "absolute",
-        top: -10,
-        right: 20
-    },
-    closeIcon: {
-        height: 12,
-        width: 12
-    }
-});
+  hide: {
+    display: 'none',
+  },
+  full: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  webview: {
+    flex: 1,
+    width: '100%',
+    height: Dimensions.get('window').height - 110,
+    backgroundColor: 'white',
+  },
+  webviewLoader: {
+    zIndex: 3,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  backdrop: {
+    backgroundColor: 'rgba(0,0,0, 0.48)',
+    flex: 1,
+    justifyContent: 'flex-end',
+    position: 'relative',
+    height: '100%',
+  },
+  container: {
+    backgroundColor: 'white',
+    borderTopRightRadius: 20,
+    borderTopLeftRadius: 20,
+    maxHeight: Dimensions.get('window').height - 110,
+    flex: 1,
+    position: 'relative',
+  },
+  modal: {
+    flex: 1,
+    backgroundColor: 'white',
+    height: '100%',
+    width: '100%',
+  },
+  close: {
+    position: 'absolute',
+    top: -10,
+    right: 20,
+  },
+  closeIcon: {
+    height: 12,
+    width: 12,
+  },
+});