omnipay-reactnative-sdk 1.0.3 → 1.0.5

package/src/components/views/Registration.tsx

@@ -0,0 +1,163 @@
+import React, { Fragment, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { serverSdkBaseUrl } from 'src/lib/config';
+
+type RegisterSuccessType = {
+  customerRef: string;
+  walletId: string;
+};
+
+type OmnipayProps = {
+  color: string;
+  env: 'dev' | 'prod';
+  publicKey: string;
+  phoneNumber: string;
+  onRegistrationSuccessful?: ({
+    customerRef,
+    walletId,
+  }: RegisterSuccessType) => void;
+  onClose?: () => void;
+};
+
+// type PostMessage = {
+//   [key: string]: unknown;
+// };
+
+type Status = 'error' | 'loading' | 'success';
+
+export const Registration = ({
+  color,
+  env,
+  publicKey,
+  phoneNumber,
+  onRegistrationSuccessful,
+  onClose,
+}: OmnipayProps): JSX.Element => {
+  const webviewRef = useRef<WebView>(null);
+  const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
+  const webHost = getWebHost();
+  const webUrl = getWebUrl();
+
+  const onWebviewMount = `
+        window.nativeOs = ${Platform.OS};
+        true;
+      `;
+
+  function getWebHost() {
+    return serverSdkBaseUrl[env];
+  }
+
+  function getWebUrl() {
+    const themeColor = color.includes('#') ? color.split('#')[1] : color;
+    return `${webHost}auth/register?theme=${themeColor}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
+  }
+
+  //   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;
+
+        const { action, details } = JSON.parse(dataValue);
+
+        if (dataKey === 'customer.registered') {
+          if (onRegistrationSuccessful) {
+            onRegistrationSuccessful({
+              customerRef: details.customerRef,
+              walletId: details.walletId,
+            });
+          }
+          return;
+        }
+        if (action === 'close.registration') {
+          if (onClose) {
+            onClose();
+          }
+          return;
+        }
+      }
+    } catch (error) {}
+  }
+
+  if (!publicKey.includes('OMNIPUBKEY_')) {
+    return <Text>Invalid public key</Text>;
+  }
+
+  if (phoneNumber.length < 10) {
+    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,
+  },
+});

package/src/index.tsx

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

package/src/lib/colors.ts

@@ -0,0 +1,27 @@
+export const colors = {
+  10: 'rgba(166, 130, 255, 0.1)',
+  20: 'rgba(166, 130, 255, 0.2)',
+  30: 'rgba(166, 130, 255, 0.3)',
+  40: 'rgba(166, 130, 255, 0.4)',
+  50: 'rgba(166, 130, 255, 0.10)',
+  100: '#F0E6FF',
+  200: '#DFCDFF',
+  300: '#CEB3FF',
+  400: '#BFA1FF',
+  500: '#A682FF',
+  600: '#a27dff',
+  700: '#5C41B7',
+  800: '#3E2993',
+  900: '#29187A',
+  1500: '#FF9900',
+  black: '#1E3565',
+  secondary: '#E06900',
+  light: 'rgb(83, 100, 113)',
+  iconColor: 'rgba(35, 47, 73, 0.6)',
+  bgColor: '#D7EEEB',
+  grey: '#61728F',
+  danger: '#E32828',
+  black500: '#1A1D1F',
+  black600: '#3E4554',
+  darkGrey: '#6F767E',
+};

package/src/lib/config.ts

@@ -0,0 +1,9 @@
+export const serverSdkBaseUrl = {
+  dev: 'https://dev.omnipay-sdk.pages.dev/',
+  prod: 'https://omnipay-sdk.pages.dev/',
+};
+
+export const clientSdkBaseUrl = {
+  dev: 'https://omnipay-websdk.vercel.app/',
+  prod: 'https://sdk.omnipay.ng/',
+};