omnipay-reactnative-sdk 1.1.5 → 1.1.7

package/lib/module/components/views/BvnVerification.js

@@ -0,0 +1,124 @@
+import React, { Fragment, useRef, useState } from 'react';
+import { ActivityIndicator, Platform, StyleSheet, Text, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { serverSdkBaseUrl } from '../../lib/config';
+export const BvnVerification = _ref => {
+  let {
+    color,
+    env,
+    publicKey,
+    phoneNumber,
+    onVerificationSuccessful,
+    onClose,
+    customerRef
+  } = _ref;
+  const webviewRef = useRef(null);
+  const [webviewStatus, setWebviewStatus] = useState('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) {
+    try {
+      if (e.nativeEvent && e.nativeEvent.data) {
+        const eventData = JSON.parse(e.nativeEvent.data);
+        const {
+          dataKey
+        } = eventData;
+        if (dataKey === 'bvn.verified') {
+          if (onVerificationSuccessful) {
+            onVerificationSuccessful();
+          }
+          return;
+        }
+        if (dataKey === 'close.bvnverification') {
+          if (onClose) {
+            onClose();
+          }
+          return;
+        }
+      }
+    } catch (error) {}
+  }
+  if (!publicKey.includes('OMNIPUBKEY_')) {
+    return /*#__PURE__*/React.createElement(Text, null, "Invalid public key");
+  }
+  if (color.length < 3) {
+    return /*#__PURE__*/React.createElement(Text, null, "Invalid color");
+  }
+  if (!['dev', 'prod'].includes(env)) {
+    return /*#__PURE__*/React.createElement(Text, null, "Invalid environment");
+  }
+  if (!customerRef) {
+    if (!phoneNumber) {
+      return /*#__PURE__*/React.createElement(Text, null, "Phone number is required");
+    }
+    if ((phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.length) < 10) {
+      return /*#__PURE__*/React.createElement(Text, null, "Invalid phone number");
+    }
+  }
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles.full
+  }, /*#__PURE__*/React.createElement(WebView, {
+    source: {
+      uri: webUrl
+    },
+    style: styles.webview,
+    injectedJavaScriptBeforeContentLoaded: onWebviewMount,
+    onMessage: onWebviewMessage,
+    ref: webviewRef,
+    onLoadEnd: () => setWebviewStatus('success')
+  }), webviewStatus === 'loading' && /*#__PURE__*/React.createElement(View, {
+    style: styles.webviewLoader
+  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: "small",
+    color: color
+  }))));
+};
+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
+  }
+});
+//# sourceMappingURL=BvnVerification.js.map

package/lib/module/components/views/BvnVerification.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Fragment","useRef","useState","ActivityIndicator","Platform","StyleSheet","Text","View","WebView","serverSdkBaseUrl","BvnVerification","color","env","publicKey","phoneNumber","onVerificationSuccessful","onClose","customerRef","webviewRef","webviewStatus","setWebviewStatus","webHost","getWebHost","webUrl","getWebUrl","onWebviewMount","OS","themeColor","includes","split","onWebviewMessage","e","nativeEvent","data","eventData","JSON","parse","dataKey","error","length","styles","full","uri","webview","webviewLoader","create","hide","display","flex","width","height","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["BvnVerification.tsx"],"mappings":"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"}

package/lib/module/components/views/PaylaterAgreement.js

@@ -0,0 +1,123 @@
+import React, { Fragment, useRef, useState } from 'react';
+import { ActivityIndicator, Platform, StyleSheet, Text, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { serverSdkBaseUrl } from '../../lib/config';
+export const PaylaterAgreement = _ref => {
+  let {
+    color,
+    env,
+    publicKey,
+    phoneNumber,
+    onAgreementAccepted,
+    customerRef,
+    amount,
+    lenderId,
+    feesId,
+    sublimitId,
+    onClose
+  } = _ref;
+  const webviewRef = useRef(null);
+  const [webviewStatus, setWebviewStatus] = useState('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}paylater/agreement?theme=${themeColor}&publicKey=${publicKey}&phoneNumber=${phoneNumber || ''}&customerRef=${customerRef || ''}&amount=${amount}&lenderId=${lenderId || ''}&feesId=${feesId || ''}&sublimitId=${sublimitId || ''}`;
+  }
+  async function onWebviewMessage(e) {
+    try {
+      if (e.nativeEvent && e.nativeEvent.data) {
+        const eventData = JSON.parse(e.nativeEvent.data);
+        const {
+          dataKey,
+          dataValue
+        } = eventData;
+        if (dataKey === 'agreement.accepted') {
+          onAgreementAccepted({
+            agreementId: dataValue.agreementId
+          });
+          return;
+        }
+        if (dataKey === 'close.agreement') {
+          if (onClose) {
+            onClose();
+          }
+          return;
+        }
+        return;
+      }
+    } catch (error) {}
+  }
+  if (!publicKey.includes('OMNIPUBKEY_')) {
+    return /*#__PURE__*/React.createElement(Text, null, "Invalid public key");
+  }
+  if (color.length < 3) {
+    return /*#__PURE__*/React.createElement(Text, null, "Invalid color");
+  }
+  if (!['dev', 'prod'].includes(env)) {
+    return /*#__PURE__*/React.createElement(Text, null, "Invalid environment");
+  }
+  if (!customerRef) {
+    if (!phoneNumber) {
+      return /*#__PURE__*/React.createElement(Text, null, "Phone number is required");
+    }
+    if ((phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.length) < 10) {
+      return /*#__PURE__*/React.createElement(Text, null, "Invalid phone number");
+    }
+  }
+  if (!amount || isNaN(Number(amount)) || Number(amount) <= 0) {
+    return /*#__PURE__*/React.createElement(Text, null, "Amount is required and should be greater than 0");
+  }
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles.full
+  }, /*#__PURE__*/React.createElement(WebView, {
+    source: {
+      uri: webUrl
+    },
+    style: styles.webview,
+    injectedJavaScriptBeforeContentLoaded: onWebviewMount,
+    onMessage: onWebviewMessage,
+    ref: webviewRef,
+    onLoadEnd: () => setWebviewStatus('success')
+  }), webviewStatus === 'loading' && /*#__PURE__*/React.createElement(View, {
+    style: styles.webviewLoader
+  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: "small",
+    color: color
+  }))));
+};
+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
+  }
+});
+//# sourceMappingURL=PaylaterAgreement.js.map

package/lib/module/components/views/PaylaterAgreement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Fragment","useRef","useState","ActivityIndicator","Platform","StyleSheet","Text","View","WebView","serverSdkBaseUrl","PaylaterAgreement","color","env","publicKey","phoneNumber","onAgreementAccepted","customerRef","amount","lenderId","feesId","sublimitId","onClose","webviewRef","webviewStatus","setWebviewStatus","webHost","getWebHost","webUrl","getWebUrl","onWebviewMount","OS","themeColor","includes","split","onWebviewMessage","e","nativeEvent","data","eventData","JSON","parse","dataKey","dataValue","agreementId","error","length","isNaN","Number","styles","full","uri","webview","webviewLoader","create","hide","display","flex","width","height","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["PaylaterAgreement.tsx"],"mappings":"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"}

package/lib/typescript/components/OmnipayView.d.ts

@@ -20,6 +20,30 @@ declare const Omnipay: {
         }) => void) | undefined;
         onClose?: (() => void) | undefined;
     }) => JSX.Element;
+    BvnVerification: ({ color, env, publicKey, phoneNumber, onVerificationSuccessful, onClose, customerRef, }: {
+        color: string;
+        env: "prod" | "dev";
+        publicKey: string;
+        phoneNumber?: string | undefined;
+        customerRef?: string | undefined;
+        onVerificationSuccessful?: (() => void) | undefined;
+        onClose?: (() => void) | undefined;
+    }) => JSX.Element;
+    PaylaterAgreement: ({ color, env, publicKey, phoneNumber, onAgreementAccepted, customerRef, amount, lenderId, feesId, sublimitId, onClose, }: {
+        color: string;
+        env: "prod" | "dev";
+        publicKey: string;
+        phoneNumber?: string | undefined;
+        customerRef?: string | undefined;
+        amount: number;
+        lenderId?: string | undefined;
+        feesId?: string | undefined;
+        sublimitId?: string | undefined;
+        onAgreementAccepted: ({ agreementId }: {
+            agreementId: string;
+        }) => void;
+        onClose?: (() => void) | undefined;
+    }) => JSX.Element;
 };
 export default Omnipay;
 //# sourceMappingURL=OmnipayView.d.ts.map

package/lib/typescript/components/OmnipayView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OmnipayView.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayView.tsx"],"names":[],"mappings":"AAcA,aAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,cAAc,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAQF,QAAA,MAAM,OAAO;yFAQV,YAAY,GAAG,WAAW;;;;;;;;;;;;CA6G5B,CAAC;AA+BF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"OmnipayView.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayView.tsx"],"names":[],"mappings":"AAgBA,aAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,cAAc,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAQF,QAAA,MAAM,OAAO;yFAQV,YAAY,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6G5B,CAAC;AAiCF,eAAe,OAAO,CAAC"}

package/lib/typescript/components/views/BvnVerification.d.ts

@@ -0,0 +1,12 @@
+declare type OmnipayProps = {
+    color: string;
+    env: 'dev' | 'prod';
+    publicKey: string;
+    phoneNumber?: string;
+    customerRef?: string;
+    onVerificationSuccessful?: () => void;
+    onClose?: () => void;
+};
+export declare const BvnVerification: ({ color, env, publicKey, phoneNumber, onVerificationSuccessful, onClose, customerRef, }: OmnipayProps) => JSX.Element;
+export {};
+//# sourceMappingURL=BvnVerification.d.ts.map

package/lib/typescript/components/views/BvnVerification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BvnVerification.d.ts","sourceRoot":"","sources":["../../../../src/components/views/BvnVerification.tsx"],"names":[],"mappings":"AAWA,aAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAIF,eAAO,MAAM,eAAe,4FAQzB,YAAY,KAAG,WA6FjB,CAAC"}

package/lib/typescript/components/views/PaylaterAgreement.d.ts

@@ -0,0 +1,19 @@
+declare type AgreementSubmittedType = {
+    agreementId: string;
+};
+declare type OmnipayProps = {
+    color: string;
+    env: 'dev' | 'prod';
+    publicKey: string;
+    phoneNumber?: string;
+    customerRef?: string;
+    amount: number;
+    lenderId?: string;
+    feesId?: string;
+    sublimitId?: string;
+    onAgreementAccepted: ({ agreementId }: AgreementSubmittedType) => void;
+    onClose?: () => void;
+};
+export declare const PaylaterAgreement: ({ color, env, publicKey, phoneNumber, onAgreementAccepted, customerRef, amount, lenderId, feesId, sublimitId, onClose, }: OmnipayProps) => JSX.Element;
+export {};
+//# sourceMappingURL=PaylaterAgreement.d.ts.map

package/lib/typescript/components/views/PaylaterAgreement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaylaterAgreement.d.ts","sourceRoot":"","sources":["../../../../src/components/views/PaylaterAgreement.tsx"],"names":[],"mappings":"AAWA,aAAK,sBAAsB,GAAG;IAC5B,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACvE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAIF,eAAO,MAAM,iBAAiB,6HAY3B,YAAY,KAAG,WA+FjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omnipay-reactnative-sdk",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "Omnipay react native sdk",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -70,16 +70,17 @@
     "react": "18.1.0",
     "react-native": "0.70.3",
     "react-native-builder-bob": "^0.20.0",
+    "react-native-share": "^10.2.1",
     "release-it": "^15.0.0",
-    "typescript": "^4.5.2",
-    "react-native-share": "^10.2.1"
+    "typescript": "^4.5.2"
   },
   "resolutions": {
     "@types/react": "17.0.21"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-share": "^10.2.1"
   },
   "jest": {
     "preset": "react-native",

package/src/components/OmnipayProvider.tsx

@@ -152,7 +152,6 @@ export const OmnipayProvider = ({
   async function startPosTransaction({
     amount,
     purchaseType,
-    color,
     print,
     rrn,
     stan,
@@ -281,7 +280,7 @@ export const OmnipayProvider = ({
     try {
       const { fileName = '', image = '' } = JSON.parse(receiptData);
       await Share.open({
-        url: `data:image/jpeg;base64,${image}`,
+        url: image,
         filename: Platform.OS === 'android' ? fileName : `${fileName}.jpg`,
       });
     } catch (error) {
@@ -371,6 +370,7 @@ export const OmnipayProvider = ({
                 <View
                   style={[
                     styles.container,
+                    /* eslint-disable react-native/no-inline-styles */
                     { paddingTop: isWalletView ? 0 : containerOffset },
                   ]}
                 >

package/src/components/OmnipayView.tsx

@@ -11,6 +11,8 @@ import { WebView, WebViewMessageEvent } from 'react-native-webview';
 import { clientSdkBaseUrl, serverSdkBaseUrl } from '../lib/config';
 import { getContact } from '../functions';
 import { Registration } from './views/Registration';
+import { BvnVerification } from './views/BvnVerification';
+import { PaylaterAgreement } from './views/PaylaterAgreement';
 
 type OmnipayProps = {
   color: string;
@@ -176,4 +178,6 @@ const styles = StyleSheet.create({
 });
 
 Omnipay.Registration = Registration;
+Omnipay.BvnVerification = BvnVerification;
+Omnipay.PaylaterAgreement = PaylaterAgreement;
 export default Omnipay;

package/src/components/views/BvnVerification.tsx

@@ -0,0 +1,153 @@
+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 '../../lib/config';
+
+type OmnipayProps = {
+  color: string;
+  env: 'dev' | 'prod';
+  publicKey: string;
+  phoneNumber?: string;
+  customerRef?: string;
+  onVerificationSuccessful?: () => void;
+  onClose?: () => void;
+};
+
+type Status = 'error' | 'loading' | 'success';
+
+export const BvnVerification = ({
+  color,
+  env,
+  publicKey,
+  phoneNumber,
+  onVerificationSuccessful,
+  onClose,
+  customerRef,
+}: 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 } = eventData;
+
+        if (dataKey === 'bvn.verified') {
+          if (onVerificationSuccessful) {
+            onVerificationSuccessful();
+          }
+          return;
+        }
+        if (dataKey === 'close.bvnverification') {
+          if (onClose) {
+            onClose();
+          }
+          return;
+        }
+      }
+    } catch (error) {}
+  }
+
+  if (!publicKey.includes('OMNIPUBKEY_')) {
+    return <Text>Invalid public key</Text>;
+  }
+
+  if (color.length < 3) {
+    return <Text>Invalid color</Text>;
+  }
+
+  if (!['dev', 'prod'].includes(env)) {
+    return <Text>Invalid environment</Text>;
+  }
+
+  if (!customerRef) {
+    if (!phoneNumber) {
+      return <Text>Phone number is required</Text>;
+    }
+    if (phoneNumber?.length < 10) {
+      return <Text>Invalid phone number</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,
+  },
+});