@qore-id/react-native-qoreid-sdk 0.1.0-snapshot

package/src/qoreIdButton.android.tsx

@@ -0,0 +1,136 @@
+import React, {
+  RefObject,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
+import {
+  UIManager,
+  findNodeHandle,
+  requireNativeComponent,
+  View,
+  NativeEventEmitter,
+  NativeModules,
+} from 'react-native';
+import type { DataType, OnResultType, Options, IQoreIdButton } from './types';
+
+
+const QoreIdReactButtonManager = requireNativeComponent<{
+  style?: { width?: number; height?: number };
+}>('QoreIdReactButtonManager');
+
+const Button = forwardRef<
+  {
+    style?: { width?: number; height?: number };
+  },
+  any
+>((_props, ref) => {
+  return (
+    <>
+      <View
+        style={{
+          position: 'relative',
+          margin: 'auto',
+          height: 55,
+          borderWidth: 1,
+        }}
+      >
+        <QoreIdReactButtonManager
+          //@ts-ignore
+          ref={ref}
+        />
+      </View>
+    </>
+  );
+});
+
+function useQoreId(ref: RefObject<any>, options: Options) {
+  const onSubmitted = useCallback(
+    (data) => options.onSubmitted && options.onSubmitted(data),
+    [options]
+  );
+  const onError = useCallback(
+    (data) => options.onError && options.onError(data),
+    [options]
+  );
+
+  useEffect(() => {
+    const buttonStyles = JSON.stringify(options.buttonProps);
+    UIManager.dispatchViewManagerCommand(
+      findNodeHandle(ref.current),
+      // we are calling the 'create' command
+      //@ts-ignore
+      UIManager?.QoreIdReactButtonManager?.Commands?.create.toString(),
+      [findNodeHandle(ref.current), options.clientId, buttonStyles]
+    );
+  }, []);
+
+  useEffect(() => {
+    const eventEmitter = new NativeEventEmitter(NativeModules.QoreidSdk);
+    let eventListener = eventEmitter.addListener(
+      'onResult',
+      (event: OnResultType) => {
+        if (event?.code) {
+          onError && onError(event);
+          return;
+        }
+        onSubmitted && onSubmitted(event);
+      }
+    );
+
+    return () => {
+      eventListener.remove();
+    };
+  }, []);
+}
+
+const onChangeData = (ref: any, data: DataType) => {
+  const stringified = JSON.stringify(data);
+
+  return useEffect(() => {
+    UIManager.dispatchViewManagerCommand(
+      findNodeHandle(ref.current),
+      // we are calling the 'create' command
+      //@ts-ignore
+      UIManager?.QoreIdReactButtonManager?.Commands?.update.toString(),
+      [stringified]
+    );
+  }, [stringified]);
+};
+
+export const QoreIdButton: React.FC<IQoreIdButton> = (initialData) => {
+  const ref = useRef(null);
+
+  useQoreId(ref, {
+    clientId: initialData.clientId,
+    onError(data) {
+      initialData.onQoreIDSdkError && initialData.onQoreIDSdkError(data);
+    },
+    onSubmitted(data) {
+      initialData.onQoreIDSdkSubmitted &&
+        initialData.onQoreIDSdkSubmitted(data);
+    },
+    buttonProps: {
+      title: initialData.title,
+    },
+  });
+
+  onChangeData(ref, {
+    config: {
+      flowId: initialData.flowId || 0,
+      customerRef: initialData.customerReference,
+      productCode: initialData.productCode!,
+      clientId: initialData.clientId,
+    },
+    applicantData: {
+      ...initialData.applicantData,
+    },
+    addressData: {
+      ...initialData.addressData,
+    },
+    acceptedDocuments: initialData.ocrAcceptedDocuments?.split(','),
+    identityData: { ...initialData.identityData },
+  });
+  return <Button ref={ref} />;
+};

package/src/qoreIdButton.ios.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import { Text, Platform, Alert, SafeAreaView } from 'react-native';
+import WebView, { WebViewMessageEvent } from 'react-native-webview';
+import type { IQoreIdButton } from './types';
+import { Dimensions } from 'react-native';
+import { TouchableOpacity } from 'react-native';
+
+export const QoreIdButton: React.FC<IQoreIdButton> = (initialData) => {
+  const [canShowWebView, setCanShowWebView] = useState(false);
+
+  const toggleWebView = () => setCanShowWebView((prev) => !prev);
+
+  const onMessage = ({ nativeEvent }: WebViewMessageEvent) => {
+    let browserEventData = null as any;
+
+    try {
+      browserEventData = JSON.parse(nativeEvent?.data || '');
+    } catch (error: any) {
+      console.error(error.message);
+    }
+   
+    switch (browserEventData?.type) {
+      case 'qoreid:verificationSubmitted':
+        if (initialData.onQoreIDSdkSubmitted)
+          initialData.onQoreIDSdkSubmitted(browserEventData);
+        break;
+      case 'qoreid:verificationError':
+        if (initialData.onQoreIDSdkError)
+          initialData.onQoreIDSdkError(browserEventData);
+        break;
+      case 'qoreid:verificationClosed':
+        setCanShowWebView(false);
+        if (initialData.onQoreIDSdkClosed)
+          initialData.onQoreIDSdkClosed(browserEventData);
+        break;
+    }
+  };
+
+  const html = `
+        <!DOCTYPE html>
+            <html>
+              <head>
+                <meta charset="UTF-8" />
+                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                <meta name="description" content="QoreID Web SDK" />
+                <title>QoreID | Web SDK</title>
+              </head>
+              <body>
+                <qoreid-button
+                  id="QoreIDButton"
+                  title="Verify"
+                  sdkSource="${Platform.OS === 'ios' ? 'ios_sdk' : 'android_sdk'}"
+                  flowId="${initialData.flowId || 0}"
+                  clientId="${initialData.clientId}"
+                  productCode="${initialData.productCode}"
+                  customerReference="${initialData.customerReference}"
+                  applicantData='{"firstname": "${
+                    initialData?.applicantData?.firstName
+                  }", "middlename": "${
+                    initialData?.applicantData?.middleName
+                  }", "lastname": "${initialData?.applicantData?.lastName}", "gender": "${
+                    initialData?.applicantData?.gender
+                  }", "phone": "${initialData?.applicantData?.phoneNumber}", "email": "${
+                    initialData?.applicantData?.email
+                  }"}'
+                  identityData='{"idType": "${
+                    initialData?.identityData?.idType
+                  }", "idNumber": "${initialData?.identityData?.idNumber}"}'
+                  addressData='{"address": "${
+                    initialData?.addressData?.address
+                  }", "city": "${initialData?.addressData?.city}", "lgaName": "${
+                    initialData?.addressData?.lga
+                  }"}'
+                  ocrAcceptedDocuments="${initialData?.ocrAcceptedDocuments}"
+                  onQoreIDSdkSubmitted="({type, detail})=>window.ReactNativeWebView.postMessage(JSON.stringify({ type, ...detail }))"
+                  onQoreIDSdkError="({type, detail})=>window.ReactNativeWebView.postMessage(JSON.stringify({ type, ...detail }))"
+                  onQoreIDSdkClosed="({type, detail})=>window.ReactNativeWebView.postMessage(JSON.stringify({ type, ...detail }))" 
+                />
+                <script
+                  type="text/javascript"
+                  src="https://dev-qoreid.verifynow.ng/qoreid-sdk/qoreid.js"
+                ></script>
+              </body>
+            </html>
+            `;
+  
+
+  if (!(initialData.productCode && initialData.clientId) && canShowWebView) {
+    Alert.alert(
+      'Initialization Error',
+      'Missing required fiels. e.g product code, customer ref, client Id'
+    );
+    setCanShowWebView(false);
+    return null;
+  }
+
+  if (canShowWebView) {
+    return (
+      <SafeAreaView
+        style={{
+          flex: 1,
+          alignSelf: 'stretch',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+        }}
+      >
+        <WebView
+          mixedContentMode="compatibility"
+          style={{
+            flex: 1,
+            marginTop: 40,
+            height: Dimensions.get('window').height,
+            width: Dimensions.get('screen').width,
+          }}
+          bounces={false}
+          scalesPageToFit={true}
+          javaScriptEnabled={true}
+          originWhitelist={['*']}
+          useWebView2={true}
+          useWebKit={true}
+          onMessage={onMessage}
+          source={{
+            html,
+          }}
+          onError={console.error}
+        />
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    (initialData.render && initialData.render({ onPress: toggleWebView })) || (
+      <TouchableOpacity
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingHorizontal: 10,
+          paddingVertical: 5,
+        }}
+        onPress={toggleWebView}
+      >
+        <Text style={{ color: 'blue' }}>Start QoreID</Text>
+      </TouchableOpacity>
+    )
+  );
+};

package/src/react-native-qoreid-sdk.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from 'react';
+import { UIManager, findNodeHandle, requireNativeComponent, View, NativeEventEmitter, NativeModules, Platform } from 'react-native';
+

package/src/types.d.ts

@@ -0,0 +1,99 @@
+import type { GestureResponderEvent } from 'react-native';
+
+export interface DataType {
+  config: IConfig;
+  applicantData?: ApplicantData;
+  addressData?: AddressData;
+  acceptedDocuments?: string | string[];
+  identityData?: IdentityData
+}
+
+interface IConfig {
+  flowId?: number;
+  customerRef: string;
+  productCode: string;
+  clientId: string;
+}
+
+interface ApplicantData {
+  firstName?: string;
+  lastName?: string;
+  phoneNumber?: string;
+  email?: string;
+  dob?: string;
+  gender?: string;
+  middleName?: string;
+}
+
+interface IdentityData {
+  idType?: string;
+  idNumber?: string;
+}
+
+interface AddressData {
+  address?: string;
+  town?: string;
+  lga?: string;
+  city?: string;
+  state?: string;
+  region?: string;
+  district?: string;
+  virAddress?: string;
+}
+
+export interface OnResultType {
+  code: string;
+  data: string;
+  message: string;
+}
+
+export interface Options {
+  clientId: string;
+  onSubmitted?: (data: Omit<OnResultType, 'code'>) => void;
+  onError?: (data: OnResultType) => void;
+  buttonProps?: {
+    title?: string;
+    color?: string;
+    backgroundColor?: string;
+  };
+}
+
+
+
+export interface BrowserEventData {
+  type: string;
+  detail: any;
+}
+
+declare interface IQoreIdButton <T = JSX.Element>{
+  title?: string
+  sdkSource?: string
+  flowId?: number
+  clientId: string
+  productCode?: string
+  customerReference: string
+  applicantData?: {
+      firstName: string, 
+      middleName?: string,
+      lastName: string,
+      gender: 'male'|'female'|'others' | string,
+      phoneNumber?: string,
+      email?: string,
+  },
+  identityData?: {
+      idType: string,
+      idNumber: string,
+  },
+  addressData?: {
+      address: string,
+      city: string,
+      lga: string,
+  },
+  ocrAcceptedDocuments?: string,
+  onQoreIDSdkSubmitted: (data: BrowserEventData | Omit<OnResultType, 'code'>) => void;
+  onQoreIDSdkError: (data: BrowserEventData | OnResultType) => void;
+  onQoreIDSdkClosed: (data: BrowserEventData) => void;
+  /** Render custom button or a Pressable Component */
+  render?: ({onPress}:{onPress:(event: GestureResponderEvent) => void}) =>  T.onPress extends {onPress: (event: GestureResponderEvent) => void} ? T : never;
+}
+

package/src/utils.ts

@@ -0,0 +1,73 @@
+const acceptedDocuments = {
+  Nigeria: [
+    'DRIVERS_LICENSE_NGA',
+    'VOTERS_CARD_NGA',
+    'NIN_SLIP_NGA',
+    'PASSPORT_NGA',
+  ],
+  Ghana: [
+    'DRIVERS_LICENSE_GHA',
+    'NHIS_CARD_GHA',
+    'ECOWAS_CARD_GHA',
+    'SOCIAL_SECURITY_GHA',
+    'VOTERS_CARD_GHA',
+    'PASSPORT_GHA',
+    'GHANA_CARD_GHA',
+  ],
+  Kenya: [
+    'DRIVERS_LICENSE_KEN',
+    'NATIONAL_ID_KEN',
+    'REFUGEE_ID_KEN',
+    'PASSPORT_KEN',
+  ],
+};
+
+const productCodes = [
+  'alien_card',
+  'brs',
+  'business_address',
+  'bvn_basic',
+  'bvn_boolean',
+  'bvn_nuban',
+  'bvn_premium',
+  'cac_basic',
+  'cac_premium',
+  'drivers_license',
+  'employment',
+  'guarantor',
+  'face_verification_bvn',
+  'face_verification_drivers_license',
+  'face_verification_nin',
+  'face_verification_passport_ng',
+  'face_verification_passport_ke',
+  'face_verification_vnin',
+  'individual_address',
+  'kenya_id',
+  'license_plate_basic',
+  'license_plate_premium',
+  'liveness',
+  'liveness_bvn',
+  'liveness_drivers_license',
+  'liveness_nin',
+  'liveness_ocr',
+  'liveness_passport_ng',
+  'liveness_vnin',
+  'nin',
+  'nin_phone',
+  'nuban',
+  'ocr',
+  'passport_ng',
+  'passport_ke',
+  'property',
+  'tin',
+  // "vehicle",
+  'verifind',
+  'verifind_4d',
+  'vin',
+  'virtual_nin',
+];
+
+export const utils = {
+  productCodes,
+  acceptedDocuments,
+};