react-native-unit-components 1.0.2 → 1.0.4

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Dimensions, View } from 'react-native';
+import React, { useRef, useState } from 'react';
+import { Dimensions, NativeModule, View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
@@ -7,22 +7,28 @@ import EventBus from '../../helpers/EventBus';
 import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
 import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
-import { getCardParams, getCardScript, injectRefreshEventIfNeeded } from './UNCardComponent.utils';
+import { getCardParams, getCardScript, injectRefreshEventIfNeeded, launchStartCardProvisioning } from './UNCardComponent.utils';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
-import type { UNCardData } from '../../sharedTypes';
+import type { ResponseUnitOnLoadEvent, UNCardData } from '../../sharedTypes';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
-
+import { launchGetWallets } from './UNCardComponent.utils';
+import type { NativeModules } from 'react-native';
+import type { UNWallet } from 'src/sharedTypes/wallet.types';
+import { CardAddToWalletErrors, CardAddToWalletStatusEvent, CardGetAddToWalletStatusEvent, CardNativeMessage, CardStartPushProvisioningEvent } from '../../messages/nativeMessages/cardMessage';
+import type { BottomSheetSlotData } from '../UNBottomSheetComponent/UNBottomSheetComponent';
 export interface UNCardComponentProps {
   cardId: string;
   customerToken: string;
   theme?: string;
   onStatusChanged?: (card: UNCardData) => void;
+  pushProvisioningModule?: typeof NativeModules;
+  onLoad?: (response: ResponseUnitOnLoadEvent) => void
 }
 
 export const UNCardComponent = (props: UNCardComponentProps) => {
   const [height, setHeight] = useState(0);
-  const [requestRefreshEvent, setRequestRefreshEvent] = useState<RequestRefreshEvent | null>(null);
   const windowWidth = Dimensions.get('window').width;
+  const walletRef = useRef<UNWallet | null>(null);
 
   const webRef = useRef<WebView>(null);
 
@@ -33,26 +39,74 @@ export const UNCardComponent = (props: UNCardComponentProps) => {
   };
 
   const requestRefresh = (data: RequestRefreshEvent) => {
-    setRequestRefreshEvent(data);
+    injectRefreshEventIfNeeded(webRef.current, data, props.cardId);
+  };
+
+  const startPushProvisioning = async (data: CardStartPushProvisioningEvent) => {
+    if (data.cardId !== props.cardId) return;
+    onAddToWalletClicked();
+  };
+
+  const getAddToWalletStatus = (data: CardGetAddToWalletStatusEvent) => {
+    if (data.cardId !== props.cardId) return;
+    getWallets();
   };
 
   useListenerToBus([
     { busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged },
     { busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh },
+    { busEventKey: CardNativeMessage.CARD_START_PUSH_PROVISIONING, action: startPushProvisioning },
+    { busEventKey: CardNativeMessage.CARD_GET_ADD_TO_WALLET_STATUS, action: getAddToWalletStatus }
   ]);
 
-  useEffect(() => {
-    injectRefreshEventIfNeeded(webRef.current, requestRefreshEvent, props.cardId);
-  }, [requestRefreshEvent]);
-
   const handleMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+
     switch (message.type) {
-      case UnitMessage.UNIT_REQUEST_RENDERING:
-        EventBus.Instance.event(UnitMessage.UNIT_REQUEST_RENDERING, (message.details as RequestRenderingEvent).data);
+      case UnitMessage.UNIT_REQUEST_RENDERING: {
+        const event: BottomSheetSlotData = {
+          componentName: WebComponentType.card,
+          componentResourceId: props.cardId,
+          requestRenderingEvent: message.details as RequestRenderingEvent
+        };
+        EventBus.Instance.event(UnitMessage.UNIT_REQUEST_RENDERING, event);
         break;
+      }
       case PageMessage.PAGE_HEIGHT:
         setHeight((message.details as HeightEvent).height);
         break;
+      case UnitMessage.UNIT_ON_LOAD:
+        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);
+        break;
+    }
+  };
+
+  const getWallets = async () => {
+
+    try {
+
+      const walletResponse = await launchGetWallets(props.customerToken, props.cardId, props.pushProvisioningModule as NativeModule);
+
+      if (!walletResponse) return;
+
+      walletRef.current = walletResponse;
+
+      const walletStatus: CardAddToWalletStatusEvent = { status: walletResponse.status };
+      EventBus.Instance.event(CardNativeMessage.CARD_UPDATE_ADD_TO_WALLET_STATUS, walletStatus);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const onAddToWalletClicked = async () => {
+    try {
+      await launchStartCardProvisioning(props.pushProvisioningModule as NativeModule, walletRef.current);
+    } catch (error) {
+      if (error instanceof Error) {
+        const parsedError = JSON.parse(error.message);
+        if (parsedError.code === CardAddToWalletErrors.closedNativeWalletScreen) return;
+      }
+      console.log(error);
     }
   };
 

package/src/components/UNCardComponent/UNCardComponent.utils.ts

@@ -1,22 +1,23 @@
+import { DISPATCH_REQUEST_REFRESH } from './../../scripts/html/bodyScript';
 import type WebView from 'react-native-webview';
 import type { UNCardComponentProps } from './UNCardComponent';
 import { WebComponentType } from '../../webComponent/WebComponent';
-import { RequestRefreshEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import type { NativeModules } from 'react-native';
+import { getMobileWalletPayload } from './networking/requests/UNWalletPayloadRequest';
+import { UNWallet, UNWalletCode, UNWalletName } from '../../../src/sharedTypes/wallet.types';
+import type { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
 
 export const getCardParams = (props: UNCardComponentProps) => {
   return `
     card-id="${props.cardId}"
     customer-token="${props.customerToken}"
+    enable-mobile-wallet="${!!props.pushProvisioningModule}"
   `;
 };
 
 export const getCardScript = () => {
-  return `
-    const dispatchRefreshEvent = (details) => {
-    const event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}",{ detail: JSON.parse(details) })
-    window.dispatchEvent(event)
-    }
-  `;
+  return DISPATCH_REQUEST_REFRESH;
 };
 
 export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null, cardId: string) => {
@@ -24,3 +25,46 @@ export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRe
     currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
   }
 };
+
+export const launchGetWallets = async (customerToken: string, cardId: string, pushProvisioningModule: typeof NativeModules) => {
+  try {
+    const env = UnitSDK.getEnv();
+    if (!env) return null;
+
+    const encryptedPayload = await getMobileWalletPayload(customerToken, cardId, env);
+    if (!encryptedPayload) return null;
+
+    const walletsResponse = await pushProvisioningModule.launchGetWallets(JSON.stringify({ encPayload: encryptedPayload }));
+    const parsedWalletsResponse = JSON.parse(walletsResponse);
+    const wallets = parsedWalletsResponse.wallets;
+
+    if (!wallets) return null;
+    if (wallets[0].code === UNWalletCode.Apple) {
+      return ({ name: UNWalletName.Apple, code: UNWalletCode.Apple, status: wallets[0].status });
+    } else {
+      const googleWallet = wallets.filter((wallet: { name: UNWalletName }) => {
+        return wallet.name === UNWalletName.Google;
+      });
+      if (!googleWallet) return;
+      return ({ name: UNWalletName.Google, code: UNWalletCode.Google, status: googleWallet[0].status });
+    }
+  } catch (error) {
+    return Promise.reject(error);
+  }
+
+};
+
+export const launchStartCardProvisioning = async (pushProvisioningModule: typeof NativeModules, wallet: UNWallet | null) => {
+  try {
+    const response = await pushProvisioningModule.launchStartCardProvisioning(
+      JSON.stringify({
+        walletCode: wallet?.code,
+        walletName: wallet?.name
+      }));
+    return response;
+  }
+
+  catch (error) {
+    return Promise.reject(error);
+  }
+};

package/src/components/UNCardComponent/networking/common/UNNetworkConstants.ts

@@ -0,0 +1,11 @@
+import { UNEnvironment } from '../../../../unitSdkManager/UnitSdkManager';
+
+export const APIHeaders = {
+  AUTHORIZATION: 'Authorization',
+  CONTENT_TYPE: 'application/vnd.api+json',
+};
+
+export const UNIT_SECURE_URL = {
+  [UNEnvironment.sandbox]: 'https://secure.api.s.unit.sh',
+  [UNEnvironment.production]: 'https://secure.api.unit.co'
+};

package/src/components/UNCardComponent/networking/requests/UNWalletPayloadRequest.ts

@@ -0,0 +1,32 @@
+import axios from 'axios';
+import { APIHeaders, UNIT_SECURE_URL } from '../common/UNNetworkConstants';
+import { UNEnvironment, UnitSDK } from 'react-native-unit-components';
+
+export const getMobileWalletPayload = async (customerToken: string, cardId: string, env: UNEnvironment) => {
+  const headers = {
+    'Content-Type': APIHeaders.CONTENT_TYPE,
+    'Authorization': `Bearer ${customerToken}`,
+  };
+
+  const data = {
+    data: {
+      attributes: {
+        signedNonce: UnitSDK.getSignedNonce(),
+      },
+    },
+  };
+
+  const baseURL = `${UNIT_SECURE_URL[env as keyof typeof UNEnvironment]}/cards/${cardId}/mobile-wallet-payload`;
+  try {
+    const response = await axios.post(
+      baseURL,
+      data,
+      {
+        headers: headers,
+      });
+    const encryptedPayload = response.data.data.attributes.payload;
+    return encryptedPayload;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};

package/src/components/index.ts

@@ -2,3 +2,4 @@ export * from './UNCardComponent/UNCardComponent';
 export * from './UNBottomSheetComponent/UNBottomSheetComponent';
 export * from './UNBookPaymentComponent/UNBookPaymentComponent';
 export * from './UNActivityComponent/UNActivityComponent';
+export * from './UNAccountComponent/UNAccountComponent';

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

@@ -1,5 +1,5 @@
 import { Dimensions, StyleSheet } from 'react-native';
-import { BOTTOM_SHEET_MAX_PRECANTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import { BOTTOM_SHEET_MAX_PERCENTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
 import { VARIABLES } from '../../styles/variables';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -20,7 +20,7 @@ export const getStylesObject = (fadeAnim: any) => {
     container: {
       position: 'relative',
       flex: 1,
-      marginTop: Dimensions.get('window').height * (1 - BOTTOM_SHEET_MAX_PRECANTAGE_SIZE),
+      marginTop: Dimensions.get('window').height * (1 - BOTTOM_SHEET_MAX_PERCENTAGE_SIZE),
       shadowColor: VARIABLES.COLORS.BLACK,
       shadowOffset: {
         width: 0,

package/src/helpers/BottomSheet/BottomSheet.tsx

@@ -13,8 +13,9 @@ import {
 } 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 { BOTTOM_SHEET_MAX_PERCENTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
 import { getStylesObject } from './BottomSheet.styles';
+import { useAppStateListener } from '../../hooks/useAppStateListener';
 
 export interface BottomSheetProps {
   isOpen: boolean
@@ -40,6 +41,8 @@ const BottomSheet = (props: BottomSheetProps) => {
 
   const [dy, setDy] = useState(0);
 
+  const isAppActive = useAppStateListener();
+
   const _parentPanResponder = PanResponder.create({
     onMoveShouldSetPanResponderCapture: (_, gestureState) => {
       return props.shouldEnableBottomSheetScroll && Math.abs(gestureState.dy) > 10;
@@ -66,6 +69,13 @@ const BottomSheet = (props: BottomSheetProps) => {
     }
   });
 
+  useEffect(() => {
+    if (!isAppActive && isPanelOpened) {
+      setContentHeight(0);
+      _dismiss(false);
+    }
+  }, [isAppActive]);
+
   useEffect(() => {
     if (props.isOpen && !isPanelOpened) {
       fadeIn();
@@ -86,21 +96,27 @@ const BottomSheet = (props: BottomSheetProps) => {
   }, []);
 
   const fadeIn = () => {
+    setIsPanelOpened(true);
     Animated.timing(fadeAnim, {
       toValue: 0.3,
       duration: 500,
       useNativeDriver: false
-    }).start(() => { setIsPanelOpened(true); });
+    }).start();
   };
 
-  const fadeOut = () => {
+  const fadeOut = (withTimeout = true) => {
+    /*
+      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(() => {
-      setIsPanelOpened(false);
-      props.onClose();
+      withTimeout && props.onClose();
     });
   };
 
@@ -115,7 +131,7 @@ const BottomSheet = (props: BottomSheetProps) => {
 
   const expand = () => {
     const { animationDuration } = props;
-
+    props.onOpen();
     if (contentHeight && currentHeight > (sliderMaxHeight - contentHeight)) {
       setToContentHeight(contentHeight);
       return;
@@ -150,7 +166,7 @@ const BottomSheet = (props: BottomSheetProps) => {
     setToContentHeight(newContentHeight);
   };
 
-  const _dismiss = () => {
+  const _dismiss = (withTimeout = true) => {
     const { animationDuration } = props;
     Animated.timing(panelHeightValue, {
       duration: animationDuration,
@@ -160,7 +176,7 @@ const BottomSheet = (props: BottomSheetProps) => {
     }).start(() => {
       null;
     });
-    fadeOut();
+    fadeOut(withTimeout);
   };
 
   const {
@@ -172,7 +188,7 @@ const BottomSheet = (props: BottomSheetProps) => {
     <>
       <TouchableOpacity
         style={styles.outsideContainer} activeOpacity={1}
-        onPress={_dismiss}
+        onPress={() => _dismiss()}
       >
         <Animated.View
           style={styles.animation}
@@ -195,7 +211,7 @@ const BottomSheet = (props: BottomSheetProps) => {
           <TouchableOpacity
             activeOpacity={1}
             style={styles.closeButton}
-            onPress={_dismiss}
+            onPress={() => _dismiss()}
           >
             <Image source={CloseIcon} />
           </TouchableOpacity>
@@ -206,7 +222,7 @@ const BottomSheet = (props: BottomSheetProps) => {
             <KeyboardAvoidingView
               behavior="padding"
               style={{ height: props.height }}
-              keyboardVerticalOffset={props.height * (1 - BOTTOM_SHEET_MAX_PRECANTAGE_SIZE)}
+              keyboardVerticalOffset={props.height * (1 - BOTTOM_SHEET_MAX_PERCENTAGE_SIZE)}
             >
               {children}
             </KeyboardAvoidingView>
@@ -231,7 +247,7 @@ BottomSheet.propTypes = {
 BottomSheet.defaultProps = {
   children: <View />,
   isOpen: true,
-  sliderMaxHeight: Dimensions.get('window').height * BOTTOM_SHEET_MAX_PRECANTAGE_SIZE,
+  sliderMaxHeight: Dimensions.get('window').height * BOTTOM_SHEET_MAX_PERCENTAGE_SIZE,
   animationDuration: 200,
   onOpen: () => null,
   onClose: () => null,

package/src/helpers/EventBus.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { NativeMessage } from '../messages/nativeMessages';
+import type { NativeMessageType } from '../messages/nativeMessages';
 import type { WebViewMessageType } from '../messages/webMessages';
 
-export type BusEventKey = NativeMessage | WebViewMessageType
+export type BusEventKey = NativeMessageType | WebViewMessageType
 
 export default class EventBus {
   private static _instance: EventBus;
@@ -17,7 +17,7 @@ export default class EventBus {
     return this._instance || (this._instance = new this());
   }
 
-  public event(event: BusEventKey, data: any) {
+  public event(event: BusEventKey, data?: any) {
     const listeners = this.eventListeners[event.valueOf()];
     if (Array.isArray(listeners)) {
       listeners.map(listener => {

package/src/messages/nativeMessages/cardMessage.ts

@@ -0,0 +1,37 @@
+export enum CardNativeMessage {
+  CARD_GET_ADD_TO_WALLET_STATUS = 'cardGetAddToWalletStatus',
+  CARD_UPDATE_ADD_TO_WALLET_STATUS = 'cardUpdateAddToWalletStatus',
+  CARD_START_PUSH_PROVISIONING = 'cardStartPushProvisioning'
+}
+
+export enum CardAddToWalletStatus {
+  pending,
+  readyToProvisioning = 'ReadyToProvision',
+  addedToWallet = 'AlreadyProvisioned',
+  iosProvisionedInCurrentDevice = 'ProvisionedInCurrentDevice',
+  iosProvisionedInPairedDevice = 'ProvisionedInPairedDevice',
+  androidNotInstalled = 'NotInstalled',
+  androidWalletSetupNotCompleted = 'WalletSetupNotCompleted',
+  androidWalletAppUpdateAvailable = 'WalletAppUpdateAvailable'
+
+}
+
+export enum CardAddToWalletErrors {
+  closedNativeWalletScreen = 'VP_ERROR_302'
+}
+export interface CardAddToWalletStatusEvent {
+  status: CardAddToWalletStatus
+}
+
+export interface CardGetAddToWalletStatusEvent {
+  cardId: string
+}
+
+export interface CardStartPushProvisioningEvent {
+  cardId: string
+}
+
+export type CardNativeEvent =
+  | CardAddToWalletStatusEvent
+  | CardGetAddToWalletStatusEvent
+  | CardStartPushProvisioningEvent

package/src/messages/nativeMessages/index.ts

@@ -1,4 +1,15 @@
-export enum NativeMessage {
-  IS_SCRIPT_FETCHED = 'isScriptFetched',
-  IS_SDK_INITIALIZED = 'isSdkInitialized'
+import type { CardNativeEvent, CardNativeMessage } from './cardMessage';
+import type { SDKEvent, SDKMessage } from './sdkMessage';
+
+export type NativeMessageType =
+  | SDKMessage
+  | CardNativeMessage
+
+export type NativeEvent =
+  | CardNativeEvent
+  | SDKEvent
+
+export interface NativeMessage {
+  type: NativeMessageType,
+  details?: NativeEvent
 }

package/src/messages/nativeMessages/sdkMessage.ts

@@ -0,0 +1,11 @@
+export enum SDKMessage {
+  IS_SCRIPT_FETCHED = 'isScriptFetched',
+  IS_SDK_INITIALIZED = 'isSdkInitialized',
+}
+
+export interface SdkScriptFetched {
+  unitScript: string
+}
+
+export type SDKEvent =
+  | SdkScriptFetched

package/src/messages/webMessages/unitMessages.ts

@@ -1,18 +1,21 @@
+import type { ResponseUnitOnLoadEvent } from '../../sharedTypes';
+
 export enum UnitMessage {
   UNIT_REQUEST_RENDERING = 'unitRequestRendering',
   UNIT_REQUEST_REFRESH = 'unitRequestRefresh',
   UNIT_REQUEST_CLOSE_FLOW = 'unitRequestCloseFlow',
   UNIT_REQUEST_OPEN_LINK = 'unitRequestOpenLink',
-  UNIT_ON_LOAD = 'unitOnLoad'
+  UNIT_ON_LOAD = 'unitOnLoad',
+  UNIT_REQUEST_DOWNLOAD = 'unitRequestDownload'
 }
-
-export interface RequestRenderingData {
-  nativePlace: string;
-  nativeComponent: string;
+export interface RequestRenderingEvent {
+  data: RequestRenderingEventData
 }
 
-export interface RequestRenderingEvent {
-  data: string;
+export interface RequestRenderingEventData {
+  actionType?: string,
+  nativePlace: string,
+  nativeComponent: string,
 }
 
 export interface RequestRefreshEvent {
@@ -26,7 +29,17 @@ export interface RequestOpenLinkEvent {
   target: string
 }
 
+export interface RequestDownloadEvent {
+  url: string
+  accessToken: string
+  fileType: string
+  responseType: string
+  fileName: string
+}
+
 export type UnitEvent =
   | RequestRenderingEvent
   | RequestRefreshEvent
   | RequestOpenLinkEvent
+  | ResponseUnitOnLoadEvent
+  | RequestDownloadEvent

package/src/scripts/html/bodyScript.ts

@@ -21,20 +21,25 @@ export const POST_PAGE_HEIGHT = `
 `;
 
 export const LISTENERS = {
-  isPageLoaded:`
+  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) }})
+      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_RENDERING}", details: { data: e.detail }})
+    });
+  `,
+  requestRefresh: `
+    window.addEventListener("${UnitMessage.UNIT_REQUEST_REFRESH}", (e) => {
+      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_REFRESH}", details:  e.detail  })
     });
   `,
   onLoad: `
     window.addEventListener("${UnitMessage.UNIT_ON_LOAD}", (e) => {
       postHeight()
-      postMessageToSDK({ type: "${UnitMessage.UNIT_ON_LOAD}" })
+      postMessageToSDK({ type: "${UnitMessage.UNIT_ON_LOAD}", details: e.detail })
     });
   `,
   requestCloseFlow: `
@@ -47,6 +52,11 @@ export const LISTENERS = {
       postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_OPEN_LINK}", details: e.detail })
     });
   `,
+  unitRequestDownload: `
+    window.addEventListener("${UnitMessage.UNIT_REQUEST_DOWNLOAD}", (e) => {
+      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_DOWNLOAD}", details: e.detail })
+    });
+  `,
   cardStatusChange: `
     window.addEventListener("${CardMessage.CARD_STATUS_CHANGED}", (e) => {
       const response = e.detail
@@ -59,9 +69,16 @@ export const LISTENERS = {
   `
 };
 
-export const DISPTACH_RENDERING_EVENT = `
+export const DISPATCH_RENDERING_EVENT = `
   const dispatchRenderingEvent = (details) => {
     const event = new CustomEvent("${UnitMessage.UNIT_REQUEST_RENDERING}",{ detail: JSON.parse(details) })
     window.dispatchEvent(event)
   }
 `;
+
+export const DISPATCH_REQUEST_REFRESH = `
+    const dispatchRefreshEvent = (details) => {
+    const event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}",{ detail: JSON.parse(details) })
+    window.dispatchEvent(event)
+    }
+`;

package/src/sharedTypes/bookPayment.types.ts

@@ -1,9 +1,9 @@
-import type { Tags, Relationship } from "./types"
+import type { Tags, Relationship } from './types';
 
-type BookPaymentStatus = "Sent" | "Rejected"
+type BookPaymentStatus = 'Sent' | 'Rejected'
 
 export type UNBookPaymentData = {
-  type: "bookPayment",
+  type: 'bookPayment',
   id: string,
   attributes: {
     createdAt: string | Date,

package/src/sharedTypes/card.types.ts

@@ -1,12 +1,12 @@
-import type { Address, FullName, Limits, Relationship, Tags } from "./types"
+import type { Address, FullName, Limits, Relationship, Tags } from './types';
 
 export type UNCardData = IndividualDebitCard | BusinessDebitCard
 
-type CardStatus =  "Active" | "Inactive" | "Stolen" | "Lost" | "Frozen" | "ClosedByCustomer" | "SuspectedFraud"
+type CardStatus =  'Active' | 'Inactive' | 'Stolen' | 'Lost' | 'Frozen' | 'ClosedByCustomer' | 'SuspectedFraud'
 
-type IndividualDebitCard = {
+export type IndividualDebitCard = {
   id: string,
-  type: "individualDebitCard" | "individualVirtualDebitCard",
+  type: 'individualDebitCard' | 'individualVirtualDebitCard',
   attributes: {
     createdAt: string,
     last4Digits: string,
@@ -27,9 +27,9 @@ type IndividualDebitCard = {
   }
 }
 
-type BusinessDebitCard = {
+export type BusinessDebitCard = {
   id: string,
-  type: "businessDebitCard" | "businessVirtualDebitCard",
+  type: 'businessDebitCard' | 'businessVirtualDebitCard',
   attributes: {
     fullName: FullName,
     dateOfBirth: string,

package/src/sharedTypes/index.ts

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

package/src/sharedTypes/onLoadResponse.types.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import type { UNCardData } from '../sharedTypes';
+
+export type SuccessResponseUnitOnLoad = {
+  /*
+   Object since the current response data types from 'Activities' and 'BookPayment' do not have documentation.
+   When things are determined, we may update it
+  */
+  data: UNCardData | Object,
+  included: [Object],
+  errors: null
+}
+
+export type ErrorResponseUnitOnLoad = {
+  errors: [
+    {
+      status: string,
+      title: string,
+      detail?: string,
+      details?: string,
+      meta?: Record<string, string>
+    }
+  ]
+}
+export type ResponseUnitOnLoadEvent =
+  | SuccessResponseUnitOnLoad
+  | ErrorResponseUnitOnLoad