react-native-unit-components 0.1.0 → 1.0.0

package/src/helpers/EventBus.ts

@@ -1,13 +1,13 @@
-export enum BusEvent {
-  REQUEST_RENDERING = 'unitRequestRendering',
-  CARD_STATUS_CHANGED = 'cardStatusChanged',
-  REQUEST_REFRESH = 'requestRefresh'
-}
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { NativeMessage } from '../messages/nativeMessages';
+import type { WebViewMessageType } from '../messages/webMessages';
+
+export type BusEventKey = NativeMessage | WebViewMessageType
 
 export default class EventBus {
   private static _instance: EventBus;
 
-  private eventListeners: { [name: string]: Array<(data: any) => void> } = {}
+  private eventListeners: { [name: string]: Array<(data: any) => void> } = {};
 
   private constructor() {
     this.eventListeners = {};
@@ -17,19 +17,19 @@ export default class EventBus {
     return this._instance || (this._instance = new this());
   }
 
-  public event(event: BusEvent, data: any) {
-    let listeners = this.eventListeners[event.valueOf()];
+  public event(event: BusEventKey, data: any) {
+    const listeners = this.eventListeners[event.valueOf()];
     if (Array.isArray(listeners)) {
       listeners.map(listener => {
         if (typeof listener === 'function') {
           listener(data);
         }
-      })
+      });
     }
   }
 
-  public addListener(event: BusEvent, listener: (data: any) => void) {
-    let listeners = this.eventListeners[event.valueOf()];
+  public addListener(event: BusEventKey, listener: (data: any) => void) {
+    const listeners = this.eventListeners[event.valueOf()];
     if (Array.isArray(listeners)) {
       listeners.push(listener);
     } else {
@@ -39,14 +39,14 @@ export default class EventBus {
 
   public removeListener(listener: (data: any) => void) {
     Object.keys(this.eventListeners).map(eventName => {
-      let listeners = this.eventListeners[eventName];
+      const listeners = this.eventListeners[eventName];
       if (listeners) {
         this._remove(listeners, listener);
         if (listeners.length === 0) {
           delete this.eventListeners[eventName];
         }
       }
-    })
+    });
   }
 
   private _remove(array: Array<(data: any) => void>, item: (data: string) => void) {

package/src/hooks/listenerToBus.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect } from 'react';
+import EventBus, { BusEventKey } from '../helpers/EventBus';
+
+type Listener = {
+  busEventKey: BusEventKey,
+  action: (data: any) => void
+}
+
+export const useListenerToBus = (listeners: Listener[]) => {
+  useEffect(() => {
+    {
+      listeners.map((listener: {busEventKey: BusEventKey, action: (data: any) => void}) => {
+        EventBus.Instance.addListener(listener.busEventKey, listener.action);
+      });
+    }
+    return (() => {
+      listeners.map((listener: {busEventKey: BusEventKey, action: (data: any) => void}) => {
+        EventBus.Instance.removeListener(listener.action);
+      });
+    });
+  }, []);
+};

package/src/hooks/useAppStateListener.ts

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useRef, useState } from 'react';
+import { AppState, AppStateStatus } from 'react-native';
+
+const getIsAppActive = (currentAppState: AppStateStatus) => {
+  return currentAppState !== 'background' && currentAppState !== 'inactive';
+};
+
+export const useAppStateListener = () => {
+  const appState = useRef(AppState.currentState);
+  const [isAppActive, setIsAppActive] = useState<boolean>(getIsAppActive(appState.current));
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      appState.current = nextAppState;
+      setIsAppActive(getIsAppActive(appState.current));
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return isAppActive;
+};

package/src/index.tsx

@@ -1 +1,5 @@
-export * from './components'
+export * from './components';
+
+export * from './sharedTypes';
+
+export { UnitSDK, UNEnvironment } from './unitSdkManager/UnitSdkManager';

package/src/messages/nativeMessages/index.ts

@@ -0,0 +1,3 @@
+export enum NativeMessage {
+  IS_SCRIPT_FETCHED = 'isScriptFetched'
+}

package/src/messages/webMessages/bookPaymentMessage.ts

@@ -0,0 +1,12 @@
+import type { UNBookPaymentData } from '../../sharedTypes';
+
+export enum BookPaymentMessage {
+  PAYMENT_CREATED = 'unitPaymentCreated'
+}
+
+export interface PaymentCreatedEvent {
+  data: UNBookPaymentData
+}
+
+export type BookPaymentEvent =
+| PaymentCreatedEvent

package/src/{webComponent → messages}/webMessages/cardMessage.ts

@@ -1,9 +1,11 @@
+import type { UNCardData } from '../../sharedTypes';
+
 export enum CardMessage {
-  CARD_STATUS_CHANGE = 'cardStatusChanged'
+  CARD_STATUS_CHANGED = 'unitCardStatusChanged'
 }
 
 export interface CardStatusChangedEvent {
-  card: any;
+  card: UNCardData;
 }
 
 export type CardEvent =

package/src/messages/webMessages/index.ts

@@ -0,0 +1,21 @@
+import type { BookPaymentEvent, BookPaymentMessage } from './bookPaymentMessage';
+import type { CardEvent, CardMessage } from './cardMessage';
+import type { PageEvent, PageMessage } from './pageMessage';
+import type { UnitEvent, UnitMessage } from './unitMessages';
+
+export type WebViewMessageType =
+  | PageMessage
+  | CardMessage
+  | UnitMessage
+  | BookPaymentMessage
+
+type WebViewEvent =
+  | PageEvent
+  | UnitEvent
+  | CardEvent
+  | BookPaymentEvent
+
+export interface WebViewMessage {
+  type: WebViewMessageType,
+  details?: WebViewEvent
+}

package/src/{webComponent → messages}/webMessages/unitMessages.ts

@@ -10,6 +10,7 @@ export interface RequestRenderingData {
   nativePlace: string;
   nativeComponent: string;
 }
+
 export interface RequestRenderingEvent {
   data: string;
 }

package/src/nativeComponenet/NativeComponentExample.tsx

@@ -6,8 +6,8 @@ import {
 } from 'react-native';
 
 const LINKING_ERROR =
-  `The package 'unit-react-native-components' doesn't seem to be linked. Make sure: \n\n` +
-  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  'The package \'react-native-unit-components\' doesn\'t seem to be linked. Make sure: \n\n' +
+  Platform.select({ ios: '- You have run \'pod install\'\n', default: '' }) +
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo managed workflow\n';
 

package/src/scripts/html/bodyHtml.ts

@@ -0,0 +1,46 @@
+export const webViewId = 'webViewContainer';
+
+export enum PresentationMode {
+  /*
+    CoverInjectedHeight - give id (<webViewId> param) to enable style injection to the root. Then cover the injected height.
+
+    Inherit -  inherit the parent size by style of 100 view height
+
+    Default - return the unit component script
+  */
+
+  CoverInjectedHeight = 'coverInjectedHeight',
+  Inherit = 'inherit',
+  Default = 'deafult'
+}
+
+export const getHtmlBody = (unitComponent: string, unitComponentProps?: string, presentationMode?: PresentationMode) => {
+  const currentComponent = `<${unitComponent} ${unitComponentProps || ''}> </${unitComponent}>`;
+
+  switch (presentationMode) {
+    case PresentationMode.CoverInjectedHeight:
+      return getCoverInjectedHeightBodyScript(currentComponent);
+    case PresentationMode.Inherit:
+      return getInheritParentSizeScript(currentComponent);
+    default:
+      return currentComponent;
+  }
+};
+
+const getCoverInjectedHeightBodyScript = (currentUnitScript: string) => {
+  return `
+    <div id=${webViewId}>
+      <div style="height: 100%; display: block; padding: 1px;">
+        ${currentUnitScript}
+      </div>
+    </div>
+  `;
+};
+
+const getInheritParentSizeScript = (currentUnitScript: string) => {
+  return `
+    <div style="height: 100vh">
+      ${currentUnitScript}
+    </div>
+  `;
+};

package/src/scripts/html/bodyScript.ts

@@ -0,0 +1,67 @@
+import { CardMessage } from '../../messages/webMessages/cardMessage';
+import { PageMessage } from '../../messages/webMessages/pageMessage';
+import { UnitMessage } from '../../messages/webMessages/unitMessages';
+
+export const POST_MESSAGE_TO_SDK = `
+  const postMessageToSDK = (message) => {
+    if ('ReactNativeWebView' in window) {
+    const messageString = JSON.stringify(message)
+    window['ReactNativeWebView'].postMessage(messageString)
+    }
+  }
+`;
+
+export const POST_PAGE_HEIGHT = `
+  const postHeight = () => {
+    setTimeout(() => {
+      const height = window.document.documentElement.getBoundingClientRect().height
+      postMessageToSDK({ type: "${PageMessage.PAGE_HEIGHT}", details: { height } })
+    })
+  }
+`;
+
+export const LISTENERS = {
+  isPageLoaded:`
+    window.addEventListener('DOMContentLoaded', e => {
+      postMessageToSDK({ type: "${PageMessage.PAGE_LOADED}" })
+    });
+  `,
+  requestRendering: `
+    window.addEventListener("${UnitMessage.UNIT_REQUEST_RENDERING}", (e) => {
+      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_RENDERING}", details: { data: JSON.stringify(e.detail) }})
+    });
+  `,
+  onLoad: `
+    window.addEventListener("${UnitMessage.UNIT_ON_LOAD}", (e) => {
+      postHeight()
+      postMessageToSDK({ type: "${UnitMessage.UNIT_ON_LOAD}" })
+    });
+  `,
+  requestCloseFlow: `
+    window.addEventListener("${UnitMessage.UNIT_REQUEST_CLOSE_FLOW}", (e) => {
+      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_CLOSE_FLOW}" })
+    });
+  `,
+  requestOpenLink: `
+    window.addEventListener("${UnitMessage.UNIT_REQUEST_OPEN_LINK}", (e) => {
+      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_OPEN_LINK}", details: e.detail })
+    });
+  `,
+  cardStatusChange: `
+    window.addEventListener("${CardMessage.CARD_STATUS_CHANGED}", (e) => {
+      const response = e.detail
+      response.then((data) => {
+        postMessageToSDK({ type: "${CardMessage.CARD_STATUS_CHANGED}", details:  { card: JSON.stringify(data.data) }})
+      }).catch((e) => {
+        console.log(e)
+      })
+  });
+  `
+};
+
+export const DISPTACH_RENDERING_EVENT = `
+  const dispatchRenderingEvent = (details) => {
+    const event = new CustomEvent("${UnitMessage.UNIT_REQUEST_RENDERING}",{ detail: JSON.parse(details) })
+    window.dispatchEvent(event)
+  }
+`;

package/src/sharedTypes/bookPayment.types.ts

@@ -0,0 +1,27 @@
+import type { Tags, Relationship } from "./types"
+
+type BookPaymentStatus = "Sent" | "Rejected"
+
+export type UNBookPaymentData = {
+  type: "bookPayment",
+  id: string,
+  attributes: {
+    createdAt: string | Date,
+    status: BookPaymentStatus,
+    reason: string,
+    direction: 'Debit' | 'Credit',
+    description: string,
+    transactionSummaryOverride?: string,
+    amount: string,
+    tags: Tags,
+  },
+  relationships: {
+    account: Relationship,
+    customer?: Relationship,
+    customers?: Relationship,
+    counterpartyAccount: Relationship,
+    counterpartyCustomer: Relationship,
+    transaction: Relationship,
+    recurringPayment: Relationship
+  }
+}

package/src/sharedTypes/card.types.ts

@@ -0,0 +1,59 @@
+import type { Address, FullName, Limits, Relationship, Tags } from "./types"
+
+export type UNCardData = IndividualDebitCard | BusinessDebitCard
+
+type CardStatus =  "Active" | "Inactive" | "Stolen" | "Lost" | "Frozen" | "ClosedByCustomer" | "SuspectedFraud"
+
+type IndividualDebitCard = {
+  id: string,
+  type: "individualDebitCard" | "individualVirtualDebitCard",
+  attributes: {
+    createdAt: string,
+    last4Digits: string,
+    expirationDate: string,
+    status: CardStatus,
+    shippingAddress?: Address, /* not exists in virtual card */
+    updatedAt?: string,
+    design?: string,
+    additionalEmbossedText?: string,
+    idempotencyKey?: string,
+    tags?: Tags,
+    limits?: Limits,
+    printOnlyBusinessName?: boolean
+  },
+  relationships: {
+    account: Relationship,
+    customer: Relationship
+  }
+}
+
+type BusinessDebitCard = {
+  id: string,
+  type: "businessDebitCard" | "businessVirtualDebitCard",
+  attributes: {
+    fullName: FullName,
+    dateOfBirth: string,
+    address: Address,
+    shippingAddress?: Address,
+    phone: string,
+    email: string,
+    createdAt: string,
+    last4Digits: string,
+    expirationDate: string,
+    status: CardStatus,
+    updatedAt?: string,
+    ssn?: string,
+    passport?: string,
+    nationality?: string,
+    design?: string,
+    additionalEmbossedText?: string,
+    idempotencyKey?: string,
+    tags?: Record<string, string>
+    limits?: Limits,
+    printOnlyBusinessName?: boolean
+  },
+  relationships: {
+    account: Relationship,
+    customer: Relationship
+  }
+}

package/src/sharedTypes/index.ts

@@ -0,0 +1,2 @@
+export * from './bookPayment.types';
+export * from './card.types';

package/src/sharedTypes/types.ts

@@ -0,0 +1,35 @@
+export type Address = {
+  street: string,
+  street2?: string,
+  city: string,
+  state: string,
+  postalCode: string,
+  country: string
+}
+
+export type Limits = {
+  dailyWithdrawal?: string | number,
+  dailyPurchase?: string | number,
+  monthlyWithdrawal?: string | number,
+  monthlyPurchase?: string | number,
+}
+
+type Data = {
+  type: string,
+  id: string
+}
+
+export type Relationship = {
+  data:
+    | null
+    | []
+    | Data
+    | Data[]
+}
+
+export type FullName = {
+  first: string,
+  last: string
+}
+
+export type Tags = Record<string, string> // TODO: specify Tag type

package/src/styles/variables.ts

@@ -0,0 +1,9 @@
+export const VARIABLES = {
+  COLORS: {
+    WHITE: '#ffffff',
+    BLACK: '#000000',
+    BLUE: '#005fF0',
+    GREY: '#bbbbbb',
+    SILVER_FLAKE: '#D5DDE0'
+  }
+};

package/src/unitSdkManager/UnitSdk.api.ts

@@ -0,0 +1,31 @@
+import EventBus from '../helpers/EventBus';
+import { NativeMessage } from '../messages/nativeMessages';
+import { UnitSDK, UNIT_SCRIPT_URL } from './UnitSdkManager';
+
+let isLoadingScript = false;
+
+/** globalUnitScript is exported ONLY to our project components **/
+export let globalUnitScript = '';
+
+export const fetchUnitScript = async () => {
+  const env = UnitSDK.getEnv();
+  if (isLoadingScript || globalUnitScript || !env) {
+    // init function is called and success OR in progress
+    return null;
+  }
+  isLoadingScript = true;
+  try {
+    const unitScriptRes = await fetch(UNIT_SCRIPT_URL[env]);
+    const unitScript = await unitScriptRes.text();
+    if (unitScript) {
+      EventBus.Instance.event(NativeMessage.IS_SCRIPT_FETCHED, { unitScript });
+      globalUnitScript = unitScript;
+    }
+    return null;
+  } catch (e) {
+    console.log(e);
+    return null;
+  } finally {
+    isLoadingScript = false;
+  }
+};

package/src/unitSdkManager/UnitSdkManager.ts

@@ -0,0 +1,33 @@
+import { fetchUnitScript } from './UnitSdk.api';
+
+export enum UNEnvironment {
+  sandbox = 'sandbox',
+  production = 'production'
+}
+
+export const UNIT_SCRIPT_URL = {
+  [UNEnvironment.sandbox]: 'https://ui.s.unit.sh/components.js',
+  [UNEnvironment.production]: 'https://ui.unit.co/components.js'
+};
+export class UnitSDK {
+  protected static env?: UNEnvironment;
+  protected static theme?: string;
+
+  public static init = async (env: UNEnvironment, theme: string) => {
+    try {
+      this.env = env;
+      this.theme = theme;
+      await fetchUnitScript();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  public static getEnv = () => {
+    return this.env;
+  };
+
+  public static getTheme = () => {
+    return this.theme;
+  };
+}

package/src/webComponent/WebComponent.tsx

@@ -1,75 +1,73 @@
 import React, { useEffect, useState } from 'react';
-import { Dimensions } from 'react-native';
-import {
-  WebView,
-  WebViewMessageEvent
-} from 'react-native-webview'
-import EventBus, { BusEvent } from '../helpers/EventBus';
-
-import html from './html';
-import type { CardEvent, CardMessage } from './webMessages/cardMessage';
-import type { PageEvent, PageMessage } from './webMessages/pageMessage';
-import { RequestRefreshEvent, UnitEvent, UnitMessage } from './webMessages/unitMessages';
-
-export type WebViewMessageType =
-  | PageMessage
-  | CardMessage
-  | UnitMessage
-
-type WebViewEvent =
-  | PageEvent
-  | UnitEvent
-  | CardEvent
-
-export interface WebViewMessage {
-  type: WebViewMessageType,
-  details?: WebViewEvent
-}
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import EventBus from '../helpers/EventBus';
+import html, { HTML_PLACEHOLDER } from './html';
+import { RequestRefreshEvent, UnitMessage } from '../messages/webMessages/unitMessages';
+import { useListenerToBus } from '../hooks/listenerToBus';
+import type { WebViewMessage } from '../messages/webMessages';
+import { getHtmlBody, PresentationMode } from '../scripts/html/bodyHtml';
+import { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api';
+import { NativeMessage } from '../messages/nativeMessages';
 
 export interface WebComponentProps {
   type: WebComponentType;
+  presentationMode?: PresentationMode,
   params?: string;
-  onMessage: (message: WebViewMessage) => void;
+  onMessage?: (message: WebViewMessage) => void;
   script?: string;
+  width?: number;
+  shouldEnableWebViewScroll?: boolean;
 }
 
 export enum WebComponentType {
   card = 'unit-elements-card',
+  bookPayment = 'unit-elements-book-payment',
+  activity = 'unit-elements-activity',
   slot = 'unit-elements-sdk-slot'
 }
 
-export const WebComponent = React.forwardRef<WebView, WebComponentProps>((props, webRef) => {
-  const [sourceHtml, setSourceHtml] = useState<string | null>(null)
+export const WebComponent = React.forwardRef<WebView, WebComponentProps>(function WebComponent(props, webRef) {
+  const [unitScript, setUnitScript] = useState<string | undefined>(globalUnitScript);
+  const [sourceHtml, setSourceHtml] = useState<string | null>(null);
 
-  const windowWidth = Dimensions.get('window').width;
+  const listenerAction = (data: { unitScript?: string }) => {
+    setUnitScript(data.unitScript);
+  };
+
+  useListenerToBus([{ busEventKey: NativeMessage.IS_SCRIPT_FETCHED, action: listenerAction }]);
 
   useEffect(() => {
-    const component: string = props.type.valueOf()
-    let newHtml = html.replace('<COMPONENT>', `<${component} ${props.params || ''}> </${component}>`)
-    newHtml = newHtml.replace('<SCRIPT_FROM_NATIVE>', props.script || '')
-    setSourceHtml(newHtml)
-  }, [props.params])
+    if (!unitScript) {
+      fetchUnitScript();
+      return;
+    }
 
-  const onMessage = (e: WebViewMessageEvent) => {
-    const message = JSON.parse(e.nativeEvent.data) as WebViewMessage
+    let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), props.params, props.presentationMode));
+    newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
+    setSourceHtml(newHtml);
 
+  }, [props.params, unitScript]);
+
+  const onMessage = (e: WebViewMessageEvent) => {
+    const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;
     if (message.type == UnitMessage.UNIT_REQUEST_REFRESH && message.details) {
-      EventBus.Instance.event(BusEvent.REQUEST_REFRESH, message.details as RequestRefreshEvent)
+      EventBus.Instance.event(UnitMessage.UNIT_REQUEST_REFRESH, message.details as RequestRefreshEvent);
     } else {
-      props.onMessage(message)
+      props.onMessage && props.onMessage(message);
     }
-  }
+  };
 
-  if (!sourceHtml) return null
+  if (!sourceHtml) return null;
 
   return (
     <WebView
       ref={webRef}
       cacheEnabled={false}
-      scrollEnabled={false}
+      scrollEnabled={props.shouldEnableWebViewScroll}
       overScrollMode="never"
-      style={{ width: windowWidth }}
+      injectedJavaScript={unitScript}
+      style={{ width: props.width ?? '100%', flex: 1 }}
       source={{ html: sourceHtml }}
       onMessage={onMessage} />
-  )
-})
+  );
+});