react-native-unit-components 1.9.1 → 1.11.0

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

@@ -8,10 +8,12 @@ import type { UnitEvent, UnitMessage } from './unitMessages';
 import type { AccountEvent, AccountMessage } from './accountMessage';
 import type { CheckEvent, CheckMessage } from './checkMessage';
 import type { ActivityEvent, ActivityMessage } from './activityMessage';
+import type { MultipleCardsEvent, MultipleCardsMessage } from './multipleCardsMessage';
 
 export type WebViewMessageType =
   | PageMessage
   | CardMessage
+  | MultipleCardsMessage
   | UnitMessage
   | PaymentMessage
   | AccountMessage
@@ -22,6 +24,7 @@ type WebViewEvent =
   | PageEvent
   | UnitEvent
   | CardEvent
+  | MultipleCardsEvent
   | BookPaymentEvent
   | PaymentMessage
   | ACHEvent

package/src/messages/webMessages/multipleCardsMessage.ts

@@ -0,0 +1,9 @@
+import type { UNCardData } from '../../types/shared';
+
+export enum MultipleCardsMessage {
+  UNIT_MULTIPLE_CARDS_CARD_CLICKED = 'unitMultipleCardsCardClicked',
+}
+
+export type MultipleCardsCardClickedEvent = UNCardData;
+
+export type MultipleCardsEvent = MultipleCardsCardClickedEvent

package/src/messages/webMessages/onLoadMessage.ts

@@ -1,16 +1,27 @@
-import type {UNAccountData, UNCounterpartyAccountData, UNCardData, UNError, UNOnLoadResponseData } from '../../types/shared';
+import type {
+  UNAccountData,
+  UNCounterpartyAccountData,
+  UNCardData,
+  UNError,
+  UNOnLoadResponseData,
+} from '../../types/shared';
 import type { UNAuthorizationData } from '../../types/shared/authorization.types';
 import type { UNTransactionData } from '../../types/shared/transactions.types';
 
 export enum RESPONSE_KEYS {
   errors = 'errors',
   card = 'cardResult',
+  cards = 'cardsResult',
   account = 'accountResult',
   counterpartyAccount = 'counterpartyResult',
   transactions = 'transactionsResult',
-  authorization = 'authorizationResult'
+  authorizations = 'authorizationsResult',
+  repayment = 'repaymentResult'
 }
 
+export type CardsOnLoadResponse = {
+  [RESPONSE_KEYS.cards]: UNOnLoadResponseData<[UNCardData]>
+}
 export type CardOnLoadResponse = {
   [RESPONSE_KEYS.card]: UNOnLoadResponseData<UNCardData>
 }
@@ -29,12 +40,13 @@ export type ACHOnLoadResponse = {
 }
 
 export type ActivityOnLoadResponse = {
-  [RESPONSE_KEYS.authorization]: UNOnLoadResponseData<UNAuthorizationData>,
-  [RESPONSE_KEYS.transactions]: UNOnLoadResponseData<UNTransactionData>
+  [RESPONSE_KEYS.authorizations]: UNOnLoadResponseData<[UNAuthorizationData]>,
+  [RESPONSE_KEYS.transactions]: UNOnLoadResponseData<[UNTransactionData]>
 }
 
 export type UnitOnLoadResponseSuccessData =
   | CardOnLoadResponse
+  | CardsOnLoadResponse
   | ACHOnLoadResponse
   | AccountsOnLoadResponse
   | AccountOnLoadResponse

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';

package/src/networking/requests/UNWalletPayloadRequest.ts

@@ -1,6 +1,14 @@
 import axios from 'axios';
 import { APIHeaders, UNIT_SECURE_URL } from '../common/UNNetworkConstants';
 import type { UNEnvironment } from '../../unitSdkManager/UnitSdkManager';
+import type { UNMobileWalletPayload } from '../../helpers/pushProvisioningService/types';
+import type { UNError, UNErrorData } from '../../types/shared/error.types';
+
+const isUNMobileWalletPayload = (object: any): object is UNMobileWalletPayload => {
+  return 'data' in object &&
+    'attributes' in object.data &&
+    'payload' in object.data.attributes;
+};
 
 // TODO: use apiClient class for handling requests.
 
@@ -28,9 +36,22 @@ export const getMobileWalletPayload = async (customerToken: string, cardId: stri
       {
         headers: headers,
       });
-    const encryptedPayload = response.data.data.attributes.payload;
-    return encryptedPayload;
-  } catch (error) {
-    return Promise.reject(error);
+    if (!isUNMobileWalletPayload(response.data)) {
+      const error: UNErrorData = {title: `Couldn't get mobile wallet payload. Status:${response.status} Response data:${response.data}`};
+      throw error;
+    } else {
+      const encryptedPayload = response.data.data.attributes.payload;
+      return encryptedPayload;
+    }
+  } catch (error: unknown) {
+    // Converts the error into a UNError
+    if (axios.isAxiosError<UNError>(error) && error.response) {
+      const unErrors = error.response.data;
+      throw unErrors;
+    } else if (error instanceof Error)  {
+      const unexpectedError: UNErrorData = {title: 'Unexpected error', error: error};
+      throw unexpectedError;
+    }
+    throw {title: `Unexpected error: ${error}`};
   }
 };

package/src/scripts/html/bodyScript.ts

@@ -36,6 +36,7 @@ export const LISTENERS = {
   `,
   requestRefresh: `
     window.addEventListener("${UnitMessage.UNIT_REQUEST_REFRESH}", (e) => {
+      if (e.detail.fromSDK) { return }
       postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_REFRESH}", details:  e.detail  })
     });
   `,
@@ -47,7 +48,11 @@ export const LISTENERS = {
   `,
   requestCloseFlow: `
     window.addEventListener("${UnitMessage.UNIT_REQUEST_CLOSE_FLOW}", (e) => {
-      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_CLOSE_FLOW}" })
+    // Add a delay of 200 milliseconds to allow the SDK to finish processing prior events that require a Promise before closing the flow
+    setTimeout(() => {
+        postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_CLOSE_FLOW}" });
+    }, 200);
+
     });
   `,
   requestOpenLink: `
@@ -85,6 +90,12 @@ export const LISTENERS = {
     postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_EXTERNAL_SDK}", details: e.detail })
   });
   `,
+
+  unitRequestLeftToSpendDetails: `
+  window.addEventListener("${UnitMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS}", (e) => {
+    postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS}", details: e.detail })
+  });
+  `,
   unitPaymentCreated: `
   window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
     const response = e.detail
@@ -95,6 +106,17 @@ export const LISTENERS = {
       })
   });
   `,
+  unitPaymentInitialStageBackButtonClicked: `
+  window.addEventListener("unitPaymentInitialStageBackButtonClicked", (e) => {
+    postMessageToSDK({ type: "${PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED}", details: { data: e.detail }})
+  });
+  `,
+
+  unitPaymentFinalStageDoneButtonClicked: `
+   window.addEventListener("unitPaymentFinalStageDoneButtonClicked", (e) => {
+    postMessageToSDK({ type: "${PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED}", details: { data: e.detail }})
+   });
+  `,
   unitPlaidTokenCreated: `
   window.addEventListener("${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", (e) => {
     const response = e.detail
@@ -130,17 +152,23 @@ export const DISPATCH_RENDERING_EVENT = `
 `;
 
 export const DISPATCH_REQUEST_REFRESH = `
-    const dispatchRefreshEvent = (details) => {
-    const event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}",{ detail: JSON.parse(details) })
-    window.dispatchEvent(event)
+  const dispatchRefreshEvent = (details) => {
+    let event;
+    // we are adding "fromSDK" param to avoid infinite loop
+    if (details) {
+        event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}",{ detail: {...JSON.parse(details), fromSDK: true} });
+    } else {
+        event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}", { detail: { fromSDK: true }});
     }
+    window.dispatchEvent(event)
+  }
 `;
 
 export const DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT = `
-    const dispatchActivityFilterChangedEvent = (details) => {
-      const event = new CustomEvent("${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}",{ detail: details });
-      window.dispatchEvent(event);
-    }
+  const dispatchActivityFilterChangedEvent = (details) => {
+    const event = new CustomEvent("unitActivityFiltersChanged",{ detail: details});
+    window.dispatchEvent(event);
+  }
 `;
 
 export const DISPATCH_PLAID_RESPONSE = `

package/src/slices/BottomSheetSlice.ts

@@ -0,0 +1,72 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from '../store';
+import { BottomSheetNativePlaceType, ScrollState } from '../types/internal/bottomSheet.types';
+
+export interface BottomSheetState {
+  isBottomSheetActive: boolean;
+  isComponentLoading?: boolean;
+  shouldShowBottomSheet?: boolean;
+  nativePlace?: BottomSheetNativePlaceType;
+  componentHeight?: number;
+  shouldEnableBottomSheetScroll: boolean;
+  scrollState?: ScrollState;
+}
+
+const initialState: BottomSheetState = {
+  isBottomSheetActive: false,
+  isComponentLoading: false,
+  shouldShowBottomSheet: false,
+  shouldEnableBottomSheetScroll: true,
+  nativePlace: BottomSheetNativePlaceType.overFullScreen,
+  componentHeight: 0,
+};
+
+const BottomSheetSlice = createSlice({
+  name: 'BottomSheet',
+  initialState: initialState,
+  reducers: {
+    setIsBottomSheetActive(state, action: PayloadAction<boolean>) {
+      state.isBottomSheetActive = action.payload;
+    },
+    setIsComponentLoading(state, action: PayloadAction<boolean>) {
+      state.isComponentLoading = action.payload;
+    },
+    setShouldShowBottomSheet(state, action: PayloadAction<boolean>) {
+      state.shouldShowBottomSheet = action.payload;
+    },
+
+    setNativePlace(state, action: PayloadAction<BottomSheetNativePlaceType>) {
+      state.nativePlace = action.payload;
+    },
+    setComponentHeight(state, action: PayloadAction<number>) {
+      state.componentHeight = action.payload;
+    },
+    setShouldEnableBottomSheetScroll(state, action: PayloadAction<boolean>) {
+      state.shouldEnableBottomSheetScroll = action.payload;
+    },
+
+    setScrollState(state, action: PayloadAction<ScrollState>) {
+      state.scrollState = action.payload;
+    },
+
+    resetBottomSheetSlice(state) {
+      //resets all besides is active to avoid loops in useEffects invoked by closing the flow
+      state.isComponentLoading = initialState.isComponentLoading;
+      state.shouldShowBottomSheet = initialState.shouldShowBottomSheet;
+      state.nativePlace = initialState.nativePlace;
+      state.componentHeight = initialState.componentHeight;
+      state.shouldEnableBottomSheetScroll = initialState.shouldEnableBottomSheetScroll;
+      state.scrollState = initialState.scrollState;
+    },
+  },
+
+});
+
+export const {
+  setIsBottomSheetActive, setIsComponentLoading,
+  setShouldShowBottomSheet, setNativePlace,
+  setComponentHeight,
+  setShouldEnableBottomSheetScroll, setScrollState, resetBottomSheetSlice,
+} = BottomSheetSlice.actions;
+export const selectConfiguration = (state: RootState) => state.bottomSheet;
+export default BottomSheetSlice.reducer;

package/src/slices/ConfigurationSlice.ts

@@ -0,0 +1,31 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from '../store';
+
+export interface ConfigurationState {
+  unitScript?: string;
+  theme?: string;
+  language?: string;
+}
+
+const initialState: ConfigurationState = {};
+
+const ConfigurationSlice = createSlice({
+  name: 'Configuration',
+  initialState: initialState,
+  reducers: {
+    setUnitScript(state, action: PayloadAction<string | undefined>) {
+      state.unitScript = action.payload;
+    },
+    setTheme(state, action: PayloadAction<string | undefined>) {
+      state.theme = action.payload;
+    },
+    setLanguage(state, action: PayloadAction<string | undefined>) {
+      state.language = action.payload;
+    },
+  },
+
+});
+
+export const { setUnitScript, setLanguage, setTheme } = ConfigurationSlice.actions;
+export const selectConfiguration = (state: RootState) => state.configuration;
+export default ConfigurationSlice.reducer;

package/src/slices/SharedEventsSlice.ts

@@ -0,0 +1,88 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from '../store';
+import type { UNAccountData, UNCardData } from '../types/shared';
+import type { ActivityFiltersChangedEvent } from '../messages/webMessages/activityMessage';
+import type { RequestRefreshEvent } from '../messages/webMessages/unitMessages';
+import type { BottomSheetNativeMessage } from '../messages/nativeMessages/bottomSheetMessage';
+import type { CardMessage } from '../messages/webMessages/cardMessage';
+import type { AccountMessage } from '../messages/webMessages/accountMessage';
+import type { ActivityMessage } from '../messages/webMessages/activityMessage';
+import type { UnitMessage } from '../messages/webMessages/unitMessages';
+import type { MultipleCardsMessage } from '../messages/webMessages/multipleCardsMessage';
+import { BottomSheetRenderingMessage } from '../messages/nativeMessages/bottomSheetMessage';
+
+type EmptyObj = Record<PropertyKey, never>;
+
+type MultipleCardsCardClickedEventState = {
+  key: MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED,
+  data: UNCardData
+}
+
+type CardStatusChangedEventState = {
+  key: CardMessage.CARD_STATUS_CHANGED,
+  data: UNCardData
+}
+
+type CardActivatedEventState = {
+  key: CardMessage.CARD_ACTIVATED,
+  data: UNCardData
+}
+
+type AccountChangedEventState = {
+  key: AccountMessage.UNIT_ACCOUNT_CHANGED,
+  data: UNAccountData
+}
+
+type ActivityFiltersChangedEventState = {
+  key: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED
+  data: ActivityFiltersChangedEvent
+}
+
+type RequestCloseBottomSheetFlowEventState = {
+  key: UnitMessage.UNIT_REQUEST_CLOSE_FLOW,
+  data: EmptyObj
+}
+
+type RequestRenderingBottomSheetEventState = {
+  key: BottomSheetNativeMessage.REQUEST_RENDERING,
+  data: BottomSheetRenderingMessage
+}
+
+type RequestRefreshEventState = {
+  key: UnitMessage.UNIT_REQUEST_REFRESH,
+  data: RequestRefreshEvent
+}
+
+//currently left state suffixes to avoid the duplication of the event names
+type SharedEvent =
+  | CardStatusChangedEventState
+  | CardActivatedEventState
+  | MultipleCardsCardClickedEventState
+  | AccountChangedEventState
+  | ActivityFiltersChangedEventState
+  | RequestCloseBottomSheetFlowEventState
+  | RequestRenderingBottomSheetEventState
+  | RequestRefreshEventState
+
+type SharedEventsState = {
+  event?: SharedEvent
+}
+
+const initialState: SharedEventsState = {};
+
+const SharedEventsSlice = createSlice({
+  name: 'SharedEvents',
+  initialState: initialState,
+  reducers: {
+    setEvent(state, action: PayloadAction<SharedEvent>) {
+      state.event = action.payload;
+    },
+  },
+
+});
+
+export const { setEvent } = SharedEventsSlice.actions;
+export const selectSharedEvents = (state: RootState) => state.sharedEvents;
+export default SharedEventsSlice.reducer;

package/src/store/store.ts

@@ -1,10 +1,16 @@
 import { configureStore } from '@reduxjs/toolkit';
 import wallet from '../slices/pushProvisioningSlice';
+import configuration from '../slices/ConfigurationSlice';
+import sharedEvents from '../slices/SharedEventsSlice';
+import bottomSheet from '../slices/BottomSheetSlice';
 
 export const store = configureStore({
   reducer: {
-    wallet
-  }
+    wallet,
+    configuration,
+    sharedEvents,
+    bottomSheet,
+  },
 });
 
 export type RootState = ReturnType<typeof store.getState>;

package/src/styles/variables.ts

@@ -4,6 +4,9 @@ export const VARIABLES = {
     BLACK: '#000000',
     BLUE: '#005fF0',
     GREY: '#bbbbbb',
-    SILVER_FLAKE: '#D5DDE0'
-  }
+    SILVER_FLAKE: '#D5DDE0',
+    PINK: '#FF00FF',
+    PURPLE: '#800080',
+    GREEN: '#008000',
+  },
 };