react-native-unit-components 0.1.0 → 1.0.1

package/src/helpers/{BottomSheet.tsx → BottomSheet/BottomSheet.tsx}

@@ -4,14 +4,17 @@ import {
   BackHandler,
   Dimensions,
   Easing,
-  // Keyboard,
+  Image,
+  KeyboardAvoidingView,
   LayoutChangeEvent,
   PanResponder,
-  StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
 import PropTypes from 'prop-types';
+import { CloseIcon } from '../../assets/images';
+import { BOTTOM_SHEET_MAX_PRECANTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import { getStylesObject } from './BottomSheet.styles';
 
 export interface BottomSheetProps {
   isOpen: boolean
@@ -19,69 +22,75 @@ export interface BottomSheetProps {
   sliderMaxHeight: number
   onOpen: () => void
   onClose: () => void
+  height: number,
   animationDuration: number,
   expandToMaxHeightEnabled: boolean
+  handleWebViewScroll: () => void
+  shouldEnableBottomSheetScroll: boolean
 }
 
 const BottomSheet = (props: BottomSheetProps) => {
   const panelHeightValue = useRef(new Animated.Value(props.sliderMaxHeight)).current;
   const fadeAnim = useRef(new Animated.Value(0)).current;
+  const styles = getStylesObject(fadeAnim);
+  const [isPanelOpened, setIsPanelOpened] = useState(props.isOpen);
+  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
 
-  const [isPanelOpened, setIsPanelOpened] = useState(props.isOpen)
-  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined)
+  const [currentHeight, setCurrentHeight] = useState<number>(props.sliderMaxHeight);
 
-  const [currentHeight, setCurrentHeight] = useState<number>(props.sliderMaxHeight)
-
-  const [dy, setDy] = useState(0)
+  const [dy, setDy] = useState(0);
 
   const _parentPanResponder = PanResponder.create({
     onMoveShouldSetPanResponderCapture: (_, gestureState) => {
-      return Math.abs(gestureState.dy) > 10
+      return props.shouldEnableBottomSheetScroll && Math.abs(gestureState.dy) > 10;
     },
     onPanResponderMove(_, gestureState) {
-      if (currentHeight + gestureState.dy < 0) return
-      if (!props.expandToMaxHeightEnabled && currentHeight + gestureState.dy < sliderMaxHeight - contentHeight!) return
-      panelHeightValue.setValue(currentHeight + gestureState.dy)
-      setDy(gestureState.dy)
+      if (props.shouldEnableBottomSheetScroll && gestureState.dy < 5) {
+        props.handleWebViewScroll();
+      }
+      if (currentHeight + gestureState.dy < 0) return;
+      if (!props.expandToMaxHeightEnabled && contentHeight && currentHeight + gestureState.dy < sliderMaxHeight - contentHeight) return;
+      panelHeightValue.setValue(currentHeight + gestureState.dy);
+      setDy(gestureState.dy);
     },
     onPanResponderRelease: () => {
       if (dy > 0) {
-        collapse()
+        collapse();
       } else if (!props.expandToMaxHeightEnabled) {
-        setToContentHeight(contentHeight!)
+        contentHeight && setToContentHeight(contentHeight);
       } else if (dy < 0) {
-        expand()
+        expand();
       } else {
-        expand()
+        expand();
       }
     }
   });
 
   useEffect(() => {
     if (props.isOpen && !isPanelOpened) {
-      fadeIn()
+      fadeIn();
     } else if (isPanelOpened) {
-      setContentHeight(0)
-      _dismiss()
+      setContentHeight(0);
+      _dismiss();
     }
-  }, [props.isOpen])
+  }, [props.isOpen]);
 
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', _onBackPress);
-    const id = panelHeightValue.addListener(e => setCurrentHeight(e.value))
+    const id = panelHeightValue.addListener(e => setCurrentHeight(e.value));
 
     return (() => {
       BackHandler.removeEventListener('hardwareBackPress', _onBackPress);
-      panelHeightValue.removeListener(id)
-    })
-  }, [])
+      panelHeightValue.removeListener(id);
+    });
+  }, []);
 
   const fadeIn = () => {
     Animated.timing(fadeAnim, {
       toValue: 0.3,
       duration: 500,
       useNativeDriver: false
-    }).start(() => { setIsPanelOpened(true) });
+    }).start(() => { setIsPanelOpened(true); });
   };
 
   const fadeOut = () => {
@@ -90,8 +99,8 @@ const BottomSheet = (props: BottomSheetProps) => {
       duration: 500,
       useNativeDriver: false
     }).start(() => {
-      setIsPanelOpened(false)
-      props.onClose()
+      setIsPanelOpened(false);
+      props.onClose();
     });
   };
 
@@ -99,17 +108,17 @@ const BottomSheet = (props: BottomSheetProps) => {
     Animated.timing(panelHeightValue, {
       duration: props.animationDuration,
       easing: Easing.quad,
-      toValue: sliderMaxHeight - contentHeight!,
+      toValue: sliderMaxHeight - contentHeight,
       useNativeDriver: false,
-    }).start()
-  }
+    }).start();
+  };
 
   const expand = () => {
     const { animationDuration } = props;
 
-    if (currentHeight > (sliderMaxHeight - contentHeight!)) {
-      setToContentHeight(contentHeight!)
-      return
+    if (contentHeight && currentHeight > (sliderMaxHeight - contentHeight)) {
+      setToContentHeight(contentHeight);
+      return;
     }
 
     Animated.timing(panelHeightValue, {
@@ -117,32 +126,16 @@ const BottomSheet = (props: BottomSheetProps) => {
       easing: Easing.quad,
       toValue: 0,
       useNativeDriver: false,
-    }).start()
-  }
+    }).start();
+  };
 
   const collapse = () => {
-    if (currentHeight > (sliderMaxHeight - contentHeight!)) {
-      _dismiss()
-      return
+    if (contentHeight && currentHeight > (sliderMaxHeight - contentHeight)) {
+      _dismiss();
+      return;
     }
 
-    setToContentHeight(contentHeight!)
-
-    // Animated.timing(panelHeightValue, {
-    //   duration: animationDuration,
-    //   easing: Easing.quad,
-    //   toValue: sliderMaxHeight - contentHeight!,
-    //   useNativeDriver: false,
-    // }).start(() => {
-    //   const isPanelOpenedNewValue = !isPanelOpened
-    //   setIsPanelOpened(isPanelOpenedNewValue)
-    //   if (isPanelOpenedNewValue) {
-    //     // onOpen();
-    //   } else {
-    //     // onClose();
-    //     Keyboard.dismiss();
-    //   }
-    // });
+    contentHeight && setToContentHeight(contentHeight);
   };
 
   const _onBackPress = () => {
@@ -151,24 +144,24 @@ const BottomSheet = (props: BottomSheetProps) => {
   };
 
   const _setSize = (e: LayoutChangeEvent) => {
-    let newContentHeight = e.nativeEvent.layout.height
-    if (newContentHeight !== 0) newContentHeight += 42;
+    const newContentHeight = e.nativeEvent.layout.height;
 
-    setContentHeight(newContentHeight)
-    setToContentHeight(newContentHeight)
+    setContentHeight(newContentHeight);
+    setToContentHeight(newContentHeight);
   };
 
   const _dismiss = () => {
-    const { animationDuration } = props
+    const { animationDuration } = props;
     Animated.timing(panelHeightValue, {
       duration: animationDuration,
       easing: Easing.quad,
       toValue: sliderMaxHeight,
       useNativeDriver: false,
     }).start(() => {
-    })
-    fadeOut()
-  }
+      null;
+    });
+    fadeOut();
+  };
 
   const {
     sliderMaxHeight,
@@ -178,11 +171,11 @@ const BottomSheet = (props: BottomSheetProps) => {
   return (
     <>
       <TouchableOpacity
-        style={{ position: 'absolute', top: 0, bottom: 0, right: 0, left: 0 }} activeOpacity={1}
+        style={styles.outsideContainer} activeOpacity={1}
         onPress={_dismiss}
       >
         <Animated.View
-          style={{ backgroundColor: 'black', flex: 1, opacity: fadeAnim }}
+          style={styles.animation}
         >
         </Animated.View>
       </TouchableOpacity>
@@ -199,22 +192,30 @@ const BottomSheet = (props: BottomSheetProps) => {
         <View
           style={styles.outerContent}
         >
-          <TouchableOpacity activeOpacity={1}>
-            <View style={styles.lineContainer}>
-              <View style={styles.line} />
-            </View>
+          <TouchableOpacity
+            activeOpacity={1}
+            style={styles.closeButton}
+            onPress={_dismiss}
+          >
+            <Image source={CloseIcon} />
           </TouchableOpacity>
+
           <View
             onLayout={_setSize}
-            style={[styles.innerContent]}
           >
-            {children}
+            <KeyboardAvoidingView
+              behavior="padding"
+              style={{ height: props.height }}
+              keyboardVerticalOffset={props.height * (1 - BOTTOM_SHEET_MAX_PRECANTAGE_SIZE)}
+            >
+              {children}
+            </KeyboardAvoidingView>
           </View>
         </View>
       </Animated.View>
     </>
   );
-}
+};
 
 BottomSheet.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node]),
@@ -230,48 +231,11 @@ BottomSheet.propTypes = {
 BottomSheet.defaultProps = {
   children: <View />,
   isOpen: true,
-  sliderMaxHeight: Dimensions.get('window').height * 0.95,
+  sliderMaxHeight: Dimensions.get('window').height * BOTTOM_SHEET_MAX_PRECANTAGE_SIZE,
   animationDuration: 200,
   onOpen: () => null,
   onClose: () => null,
   expandToMaxHeightEnabled: false
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 60,
-    paddingHorizontal: 12,
-    shadowColor: '#000000',
-    shadowOffset: {
-      width: 0,
-      height: 6,
-    },
-    shadowOpacity: 0.37,
-    shadowRadius: 7.49,
-    elevation: 12,
-    borderTopLeftRadius: 15,
-    borderTopRightRadius: 15,
-    backgroundColor: '#ffffff',
-  },
-  lineContainer: {
-    borderTopLeftRadius: 30,
-    borderTopRightRadius: 30,
-    alignItems: 'center'
-  },
-  line: {
-    width: 35,
-    height: 4,
-    borderRadius: 2,
-    marginTop: 18,
-    backgroundColor: '#D5DDE0',
-  },
-  outerContent: {
-    flex: -1,
-  },
-  innerContent: {
-    flex: -1,
-  },
-});
-
 export default BottomSheet;

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/pageMessage.ts

@@ -1,6 +1,6 @@
 export enum PageMessage {
   PAGE_LOADED = 'pageLoaded',
-  PAGE_HEIGHT = 'pageHeight'
+  PAGE_HEIGHT = 'pageHeight',
 }
 
 export interface HeightEvent {

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/nativeComponent/UNNativeAddToWalletButton.tsx

@@ -0,0 +1,12 @@
+import {
+  requireNativeComponent,
+} from 'react-native';
+
+type UnitAddToWalletButtonViewProps = {
+  style: object;
+  onAddToWalletClicked: () => void;
+};
+
+const UnitAddToWalletButtonView = requireNativeComponent<UnitAddToWalletButtonViewProps>('UnitAddToWalletButtonView');
+
+export default UnitAddToWalletButtonView;

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
+  }
+}