react-native-unit-components 1.10.0 → 1.11.0

package/src/flows/card/UNCardFlows.ts

@@ -1,29 +1,28 @@
-import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import {
-  BottomSheetRenderingType,
-  type WebComponentData,
-  type WebComponentRendering,
+  BottomSheetNativeComponentType, BottomSheetNativePlaceType,
+  BottomSheetRenderingType, NativeComponentRendering,
 } from '../../types/internal/bottomSheet.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
-import { useDispatch } from 'react-redux';
 import { setEvent } from '../../slices/SharedEventsSlice';
+import { store } from '../../store/store';
+import {
+  UNAddToWalletComponentProps,
+} from '../../nativeComponents/UNAddToWallet/UNAddToWalletComponent/UNAddToWalletComponent';
 
 export class UNCardFlows {
   public static startPushProvisioning = async (cardId: string, customerToken: string) => {
-    const dispatch = useDispatch(); //todo: can we use hook here?
     try {
-      const addToWalletComponentData: WebComponentData = {
-        type: WebComponentType.cardAction,
-        presentationMode: PresentationMode.CoverInjectedHeight,
-        params: `card-id=${cardId} customer-token=${customerToken} action=AddToWallet`,
-      };
-
-      const data: WebComponentRendering = {
-        type: BottomSheetRenderingType.WebComponent,
-        data: addToWalletComponentData,
+      const data: NativeComponentRendering = {
+        type: BottomSheetRenderingType.NativeComponent,
+        data: {
+          nativePlace: BottomSheetNativePlaceType.overFullScreen,
+          component: {
+            type: BottomSheetNativeComponentType.AddToWalletComponent,
+            props: { cardId: cardId, customerToken: customerToken } as UNAddToWalletComponentProps,
+          },
+        },
       };
-
-      dispatch(setEvent({ key: BottomSheetNativeMessage.START_FLOW, data }));
+      store.dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
     } catch (error) {
       console.error(error);
     }

package/src/helpers/BottomSheet/BottomSheet.styles.ts

@@ -1,5 +1,5 @@
-import { Dimensions, StyleSheet } from 'react-native';
-import { BOTTOM_SHEET_MAX_PERCENTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import { StyleSheet } from 'react-native';
+
 import { VARIABLES } from '../../styles/variables';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -10,7 +10,7 @@ export const getStylesObject = (fadeAnim: any) => {
       top: 0,
       bottom: 0,
       right: 0,
-      left: 0
+      left: 0,
     },
     animation: {
       backgroundColor: 'black',
@@ -20,7 +20,6 @@ export const getStylesObject = (fadeAnim: any) => {
     container: {
       position: 'relative',
       flex: 1,
-      marginTop: Dimensions.get('window').height * (1 - BOTTOM_SHEET_MAX_PERCENTAGE_SIZE),
       shadowColor: VARIABLES.COLORS.BLACK,
       shadowOffset: {
         width: 0,
@@ -32,12 +31,12 @@ export const getStylesObject = (fadeAnim: any) => {
       borderTopLeftRadius: 15,
       borderTopRightRadius: 15,
       backgroundColor: VARIABLES.COLORS.WHITE,
-      overflow: 'hidden'
+      overflow: 'hidden',
     },
     lineContainer: {
       borderTopLeftRadius: 30,
       borderTopRightRadius: 30,
-      alignItems: 'center'
+      alignItems: 'center',
     },
     line: {
       width: 35,
@@ -64,7 +63,7 @@ export const getStylesObject = (fadeAnim: any) => {
       padding: 7,
       top: 12,
       right: 12,
-      zIndex: 100
-    }
+      zIndex: 100,
+    },
   });
 };

package/src/helpers/BottomSheet/BottomSheet.tsx

@@ -2,35 +2,42 @@ import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import {
   Animated,
   BackHandler,
-  Dimensions,
   Easing,
   Image,
-  KeyboardAvoidingView,
   LayoutChangeEvent,
   PanResponder,
+  Platform,
   TouchableOpacity,
   View,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { CloseIcon } from '../../assets/images';
-import { BOTTOM_SHEET_MAX_PERCENTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import {
+  androidStatusBarHeight,
+  fullScreenHeight, isAndroid10AndAbove,
+  statusBarHeight,
+} from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
 import { getStylesObject } from './BottomSheet.styles';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
+import { BottomSheetNativePlaceType } from '../../types/internal/bottomSheet.types';
 
 export interface BottomSheetProps {
-  isOpen: boolean
-  children: ReactNode
-  sliderMaxHeight: number
-  onOpen: () => void
-  onClose: () => void
+  isOpen: boolean,
+  children: ReactNode,
+  onOpen: () => void,
+  onClose: () => void,
   height: number,
   animationDuration: number,
-  expandToMaxHeightEnabled: boolean
-  handleWebViewScroll: () => void
-  shouldEnableBottomSheetScroll: boolean
+  expandToMaxHeightEnabled: boolean,
+  handleWebViewScroll: () => void,
+  shouldEnableBottomSheetScroll: boolean,
+  nativePlace?: BottomSheetNativePlaceType,
+  isComponentLoading?: boolean,
+  sliderMaxHeight: number
 }
 
 const BottomSheet = (props: BottomSheetProps) => {
+  const isStatic = props.nativePlace === BottomSheetNativePlaceType.modal;
   const panelHeightValue = useRef(new Animated.Value(props.sliderMaxHeight)).current;
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const styles = getStylesObject(fadeAnim);
@@ -45,6 +52,7 @@ const BottomSheet = (props: BottomSheetProps) => {
 
   const _parentPanResponder = PanResponder.create({
     onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+      if (isStatic) return false;
       return props.shouldEnableBottomSheetScroll && Math.abs(gestureState.dy) > 10;
     },
     onPanResponderMove(_, gestureState) {
@@ -52,7 +60,7 @@ const BottomSheet = (props: BottomSheetProps) => {
         props.handleWebViewScroll();
       }
       if (currentHeight + gestureState.dy < 0) return;
-      if (!props.expandToMaxHeightEnabled && contentHeight && currentHeight + gestureState.dy < sliderMaxHeight - contentHeight) return;
+      if (!props.expandToMaxHeightEnabled && contentHeight && currentHeight + gestureState.dy < props.sliderMaxHeight - contentHeight) return;
       panelHeightValue.setValue(currentHeight + gestureState.dy);
       setDy(gestureState.dy);
     },
@@ -64,13 +72,13 @@ const BottomSheet = (props: BottomSheetProps) => {
       } else {
         expand();
       }
-    }
+    },
   });
 
   useEffect(() => {
     // on App Active State change reset the bottom-sheet
     setContentHeight(0);
-    _dismiss(false);
+    _dismiss();
   }, [isAppActive]);
 
   useEffect(() => {
@@ -97,31 +105,28 @@ const BottomSheet = (props: BottomSheetProps) => {
     Animated.timing(fadeAnim, {
       toValue: 0.3,
       duration: 500,
-      useNativeDriver: false
+      useNativeDriver: false,
     }).start();
   };
 
-  const fadeOut = (withTimeout = true) => {
+  const fadeOut = () => {
     /*
       withTimeout - most of the time we declare 'Close' after the animation is end.
       In a case that the app is not active we do it without timeout. (Otherwise a race condition may occur.)
     */
     setIsPanelOpened(false);
-    !withTimeout && props.onClose();
     Animated.timing(fadeAnim, {
       toValue: 0,
       duration: 500,
-      useNativeDriver: false
-    }).start(() => {
-      withTimeout && props.onClose();
-    });
+      useNativeDriver: false,
+    }).start();
   };
 
   const setToContentHeight = (contentHeight: number) => {
     Animated.timing(panelHeightValue, {
       duration: props.animationDuration,
       easing: Easing.quad,
-      toValue: sliderMaxHeight - contentHeight,
+      toValue: props.sliderMaxHeight - contentHeight,
       useNativeDriver: false,
     }).start();
   };
@@ -129,7 +134,7 @@ const BottomSheet = (props: BottomSheetProps) => {
   const expand = () => {
     const { animationDuration } = props;
     props.onOpen();
-    if (contentHeight && currentHeight > (sliderMaxHeight - contentHeight)) {
+    if (contentHeight && currentHeight > (props.sliderMaxHeight - contentHeight)) {
       setToContentHeight(contentHeight);
       return;
     }
@@ -143,7 +148,7 @@ const BottomSheet = (props: BottomSheetProps) => {
   };
 
   const collapse = () => {
-    if (contentHeight && currentHeight > (sliderMaxHeight - contentHeight)) {
+    if (contentHeight && currentHeight > (props.sliderMaxHeight - contentHeight)) {
       _dismiss();
       return;
     }
@@ -157,29 +162,28 @@ const BottomSheet = (props: BottomSheetProps) => {
 
   const _setSize = (e: LayoutChangeEvent) => {
     const newContentHeight = e.nativeEvent.layout.height;
-
     setContentHeight(newContentHeight);
     setToContentHeight(newContentHeight);
   };
 
-  const _dismiss = (withTimeout = true) => {
+  const _dismiss = () => {
     const { animationDuration } = props;
     Animated.timing(panelHeightValue, {
       duration: animationDuration,
       easing: Easing.quad,
-      toValue: sliderMaxHeight,
+      toValue: props.sliderMaxHeight,
       useNativeDriver: false,
     }).start(() => {
-      null;
+      props.onClose();
     });
-    fadeOut(withTimeout);
+    fadeOut();
   };
 
   const {
-    sliderMaxHeight,
     children,
   } = props;
 
+  const isModal = props.nativePlace === BottomSheetNativePlaceType.modal;
   return (
     <>
       <TouchableOpacity
@@ -195,10 +199,14 @@ const BottomSheet = (props: BottomSheetProps) => {
         {..._parentPanResponder.panHandlers}
         style={{
           ...styles.container,
-          height: sliderMaxHeight,
+          borderTopLeftRadius: isModal ? 0 : styles.container.borderTopLeftRadius,
+          borderTopRightRadius: isModal ? 0 : styles.container.borderTopRightRadius,
+          height: props.sliderMaxHeight,
+          marginTop: fullScreenHeight - props.sliderMaxHeight - ((!isModal && isAndroid10AndAbove) ? androidStatusBarHeight : 0),
           transform: [
             { translateY: panelHeightValue },
           ],
+          paddingTop: Platform.OS === 'ios' && isModal ? statusBarHeight : 0,
         }}
       >
         <View
@@ -215,13 +223,12 @@ const BottomSheet = (props: BottomSheetProps) => {
           <View
             onLayout={_setSize}
           >
-            <KeyboardAvoidingView
-              behavior="padding"
+            <View
               style={{ height: props.height }}
-              keyboardVerticalOffset={props.height * (1 - BOTTOM_SHEET_MAX_PERCENTAGE_SIZE)}
             >
               {children}
-            </KeyboardAvoidingView>
+            </View>
+
           </View>
         </View>
       </Animated.View>
@@ -232,22 +239,20 @@ const BottomSheet = (props: BottomSheetProps) => {
 BottomSheet.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node]),
   isOpen: PropTypes.bool,
-  sliderMaxHeight: PropTypes.number,
   animation: PropTypes.func,
   animationDuration: PropTypes.number,
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
-  expandToMaxHeightEnabled: PropTypes.bool
+  expandToMaxHeightEnabled: PropTypes.bool,
 };
 
 BottomSheet.defaultProps = {
   children: <View />,
   isOpen: true,
-  sliderMaxHeight: Dimensions.get('window').height * BOTTOM_SHEET_MAX_PERCENTAGE_SIZE,
   animationDuration: 200,
   onOpen: () => null,
   onClose: () => null,
-  expandToMaxHeightEnabled: false
+  expandToMaxHeightEnabled: false,
 };
 
 export default BottomSheet;

package/src/helpers/pushProvisioningService/hooks/useCardWallet.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState, useRef } from 'react';
-import { UNWalletCode, type UNWallet, UNWalletName } from '../../../types/shared/wallet.types';
+import { UNWalletCode, UNWalletName } from '../../../types/shared/wallet.types';
+import type { UNWallet } from '../../../types/shared/wallet.types';
 import { UnitSDK } from '../../../unitSdkManager/UnitSdkManager';
 import { getMobileWalletPayload } from '../../../networking/requests/UNWalletPayloadRequest';
 import { useSelector, useDispatch } from 'react-redux';
@@ -80,7 +81,7 @@ export const useCardWallet = (cardId: string) => {
   }, [signedNonce, cardId]);
 
   return {
-    currentUNWallet
+    currentUNWallet,
   };
 
 };

package/src/helpers/pushProvisioningService/startProvisioning.ts

@@ -9,12 +9,10 @@ export const launchStartCardProvisioning = async (wallet: UNWallet | null) => {
     const response = await pushProvisioningModule.launchStartCardProvisioning(
       JSON.stringify({
         walletCode: wallet?.code,
-        walletName: wallet?.name
+        walletName: wallet?.name,
       }));
     return response;
-  }
-
-  catch (error) {
-    return Promise.reject(error);
+  } catch (error) {
+    console.log('ERROR -pushProvisioningModule.launchStartCardProvisioning: ', error);
   }
 };

package/src/helpers/store/helpers.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { store } from '../../store';
 
-export const withReduxStore = <Props, >(Component: React.ComponentType<any>) => {
+export const withReduxStore = <Props,>(Component: React.ComponentType<any>) => {
   const Wrapper = (props: Props) => {
     return (
       <Provider store={store} >

package/src/messages/nativeMessages/bottomSheetMessage.ts

@@ -1,15 +1,15 @@
-import type {NativeComponentRendering, WebComponentRendering, SlotRendering } from '../../types/internal/bottomSheet.types';
+import type {
+  NativeComponentRendering,
+  SlotRendering,
+} from '../../types/internal/bottomSheet.types';
 
 export enum BottomSheetNativeMessage {
-  START_FLOW = 'startBottomSheetFlow',
+  REQUEST_RENDERING = 'requestRendering',
 }
 
 export enum CardAddToWalletErrors {
   closedNativeWalletScreen = 'VP_ERROR_302'
 }
 
-export type StartBottomSheetFlowMessage = SlotRendering | WebComponentRendering | NativeComponentRendering
-
-export type BottomSheetNativeEvent = |
-  StartBottomSheetFlowMessage
-  // BottomSheetChangeFlowMessage - probably, we want to add this message event in the future to alternate between flows
+export type BottomSheetRenderingMessage = SlotRendering | NativeComponentRendering
+export type BottomSheetNativeEvent = BottomSheetRenderingMessage

package/src/messages/webMessages/onLoadMessage.ts

@@ -15,7 +15,8 @@ export enum RESPONSE_KEYS {
   account = 'accountResult',
   counterpartyAccount = 'counterpartyResult',
   transactions = 'transactionsResult',
-  authorizations = 'authorizationsResult'
+  authorizations = 'authorizationsResult',
+  repayment = 'repaymentResult'
 }
 
 export type CardsOnLoadResponse = {
@@ -39,8 +40,8 @@ export type ACHOnLoadResponse = {
 }
 
 export type ActivityOnLoadResponse = {
-  [RESPONSE_KEYS.authorizations]: UNOnLoadResponseData<UNAuthorizationData>,
-  [RESPONSE_KEYS.transactions]: UNOnLoadResponseData<UNTransactionData>
+  [RESPONSE_KEYS.authorizations]: UNOnLoadResponseData<[UNAuthorizationData]>,
+  [RESPONSE_KEYS.transactions]: UNOnLoadResponseData<[UNTransactionData]>
 }
 
 export type UnitOnLoadResponseSuccessData =

package/src/messages/webMessages/paymentsMessage.ts

@@ -1,3 +1,5 @@
 export enum PaymentMessage {
-  PAYMENT_CREATED = 'unitPaymentCreated'
+  PAYMENT_CREATED = 'unitPaymentCreated',
+  FINAL_STAGE_DONE_BUTTON_CLICKED = 'unitPaymentFinalStageDoneButtonClicked',
+  INITIAL_STAGE_BACK_BUTTON_CLICKED = 'unitPaymentInitialStageBackButtonClicked',
 }

package/src/messages/webMessages/unitMessages.ts

@@ -1,4 +1,5 @@
 import type { UnitOnLoadResponseEvent } from './onLoadMessage';
+import { BottomSheetNativePlaceType } from '../../types/internal/bottomSheet.types';
 
 export enum UnitMessage {
   UNIT_REQUEST_RENDERING = 'unitRequestRendering',
@@ -9,41 +10,46 @@ export enum UnitMessage {
   UNIT_REQUEST_DOWNLOAD = 'unitRequestDownload',
   UNIT_PLAID_TOKEN_CREATED = 'unitPlaidLinkTokenCreated',
   UNIT_REQUEST_EXTERNAL_SDK = 'unitRequestExternalSdk',
+  UNIT_REQUEST_LEFT_TO_SPEND_DETAILS = 'unitRequestLeftToSpendDetails',
   UNIT_PLAID_RESPONSE = 'unitPlaidResponse',
-  PAGE_HEIGHT = 'PAGE_HEIGHT'
+}
+
+export enum UnitRequestRefreshEventTypes {
+  REQUEST_REFRESH_EVENT = 'requestRefreshEvent'
 }
 
 export interface RequestRenderingEvent {
-  data: RequestRenderingEventData
+  data: RequestRenderingEventData;
 }
 
 export interface RequestRenderingEventData {
   actionType?: string,
-  nativePlace: string,
+  nativePlace: BottomSheetNativePlaceType,
   nativeComponent: string,
 }
 
 export interface RequestRefreshEvent {
-  refEvent: string;
+  type: UnitRequestRefreshEventTypes.REQUEST_REFRESH_EVENT;
+  refEvent?: string;
   dependencies: string[];
-  resourceId: string;
+  resourceId?: string;
 }
 
 export interface RequestOpenLinkEvent {
   href: string;
-  target: string
+  target: string;
 }
 
 export interface RequestDownloadEvent {
-  url: string
-  accessToken: string
-  fileType: string
-  responseType: string
-  fileName: string
+  url: string;
+  accessToken: string;
+  fileType: string;
+  responseType: string;
+  fileName: string;
 }
 
 export interface PlaidTokenCreatedEvent {
-  linkToken: PlaidLinkTokenData
+  linkToken: PlaidLinkTokenData;
 }
 
 export interface PlaidLinkTokenData {
@@ -57,7 +63,7 @@ interface PlaidLinkTokenAttributes {
 }
 
 export interface RequestExternalSdkEvent {
-  type: string
+  type: string;
 }
 
 export type UnitEvent =

package/src/nativeComponents/UNAddToWallet/UNAddToWalletComponent/UNAddToWalletComponent.tsx

@@ -0,0 +1,93 @@
+import { withReduxStore } from '../../../helpers/store/helpers';
+import { ActivityIndicator } from 'react-native';
+import React, { useRef } from 'react';
+import { WebComponent } from '../../../webComponent/WebComponent';
+import { PresentationMode, WebComponentType } from '../../../types/internal/webComponent.types';
+import { UNCardAddToWalletStatus } from '../../../types/shared/wallet.types';
+import UnitAddToWalletButtonView from '../UnitAddToWalletButton';
+import WebView from 'react-native-webview';
+import { useDispatch } from 'react-redux';
+import {
+  getStylesObject,
+} from './UNAddToWalletBottomSheetItem.styles';
+import { useCardWallet } from '../../../helpers/pushProvisioningService/hooks/useCardWallet';
+import { getAddToWalletParams, getAddToWalletWindowParams } from './UNAddToWalletComponent.utils';
+import { WebViewMessage } from '../../../messages/webMessages';
+import { UnitMessage } from '../../../messages/webMessages/unitMessages';
+import { injectHtmlFullScreenHeight } from '../../../components/UNBottomSheetComponent/UNBottomSheetComponent.utils';
+import { setEvent } from '../../../slices/SharedEventsSlice';
+import {
+  overFullScreenHeight,
+} from '../../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import { launchStartCardProvisioning } from '../../../helpers/pushProvisioningService/startProvisioning';
+import { PageMessage } from '../../../messages/webMessages/pageMessage';
+
+export interface UNAddToWalletComponentProps {
+  customerToken: string;
+  cardId: string;
+}
+
+const UNAddToWalletComponent = (props: UNAddToWalletComponentProps) => {
+  const dispatch = useDispatch();
+  const webRef = useRef<WebView>(null);
+  const { currentUNWallet } = useCardWallet(props.cardId);
+  const styles = getStylesObject();
+
+  const shouldRenderAddToWalletWebView = () => {
+    return currentUNWallet &&
+      (currentUNWallet.status === UNCardAddToWalletStatus.readyToProvisioning ||
+        currentUNWallet.status === UNCardAddToWalletStatus.addedToWallet);
+  };
+  const handleAddToWalletClicked = () => {
+    if (!currentUNWallet) return;
+    launchStartCardProvisioning(currentUNWallet);
+  };
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.type) return;
+    switch (message.type) {
+      case PageMessage.PAGE_LOADED:
+        injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight);
+        break;
+      case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
+        dispatch(setEvent({
+          key: UnitMessage.UNIT_REQUEST_CLOSE_FLOW,
+          data: {},
+        }));
+        break;
+      default:
+        break;
+    }
+  };
+  const renderAddToWalletWebView = () => {
+    if (currentUNWallet == undefined || currentUNWallet?.status === UNCardAddToWalletStatus.pending) {
+      return <ActivityIndicator style={styles.loader} />;
+    }
+    return (
+      <>
+        {
+          shouldRenderAddToWalletWebView() &&
+          <WebComponent
+            ref={webRef}
+            type={WebComponentType.cardAction}
+            presentationMode={PresentationMode.CoverInjectedHeight}
+            params={getAddToWalletParams(props)}
+            isScrollable={false}
+            onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+            windowParams={getAddToWalletWindowParams(currentUNWallet)}
+          />
+        }
+
+        {
+          currentUNWallet?.status === UNCardAddToWalletStatus.readyToProvisioning &&
+          <UnitAddToWalletButtonView style={styles.addToWalletButton} onAddToWalletClicked={handleAddToWalletClicked} />
+        }
+      </>
+    );
+  };
+  return (
+    renderAddToWalletWebView()
+  );
+};
+
+export default withReduxStore<UNAddToWalletComponentProps>(UNAddToWalletComponent);

package/src/nativeComponents/UNAddToWallet/UNAddToWalletComponent/UNAddToWalletComponent.utils.ts

@@ -0,0 +1,15 @@
+import { UNAddToWalletComponentProps } from './UNAddToWalletComponent';
+import { UNCardAddToWalletStatus, UNWallet } from '../../../types/shared/wallet.types';
+
+export const getAddToWalletParams = (props: UNAddToWalletComponentProps) => {
+  return `
+  customer-token=${props.customerToken}
+  card-id=${props.cardId}
+  action=AddToWallet
+  `;
+};
+
+export const getAddToWalletWindowParams = (wallet?: UNWallet) => {
+  return `window.UnitMobileSDKConfig["isCardInWallet"] = ${wallet?.status === UNCardAddToWalletStatus.addedToWallet}`;
+
+};

package/src/nativeComponents/UNAddToWallet/UNAddToWalletComponent/index.ts

@@ -0,0 +1 @@
+export { default as UNAddToWalletComponent } from './UNAddToWalletComponent';