react-native-unit-components/src/components/UNBottomSheetComponent/UNBottomSheetComponent.utils.ts

Unit React Native components

import { LISTENERS } from './../../scripts/html/bodyScript';
import type WebView from 'react-native-webview';
import type { RequestRenderingEvent } from '../../messages/webMessages/unitComponentsMessages';
import { webViewId } from '../../scripts/html/bodyHtml';
import {
  BottomSheetNativeACHCreditComponentType,
  BottomSheetNativeACHDebitComponentType,
  BottomSheetNativeAddToWalletComponentType,
  BottomSheetNativeBookPaymentComponentType,
  BottomSheetNativeCheckDepositComponentType,
  BottomSheetNativeComponentType,
  BottomSheetNativePlaceType,
  BottomSheetNativeWirePaymentComponentType,
  BottomSheetSlotData,
} from '../../types/internal/bottomSheet.types';
import { WebComponentType } from '../../types/internal/webComponent.types';
import { parseUNAccountFilters } from '../../types/shared';

export const getBottomSheetScript = () => {
  return LISTENERS.requestRefresh;
};

export const renderingBottomSheetRequest = (currentWebView: WebView, renderingRequest: RequestRenderingEvent) => {
  currentWebView?.injectJavaScript(`
    document.activeElement && document.activeElement.blur();
    dispatchRenderingEvent('${JSON.stringify(renderingRequest.data)}');
  `);
};

export const resetHtml = (currentWebView: WebView) => {
  currentWebView?.injectJavaScript(`
    document.activeElement && document.activeElement.blur();
    document.getElementById('${webViewId}').style.height = null;
  `);
};

export const injectHtmlFullScreenHeight = (currentWebView: WebView | null, bottomSheetHeight: number) => {
  currentWebView && currentWebView?.injectJavaScript(`
    document.getElementById('${webViewId}').style.height = '${bottomSheetHeight}px';
  `);
};

const getParamsFromRequestRenderingEvent = (event: RequestRenderingEvent): string | null => {
  const eventString = event.data.nativeComponent;
  const componentName = event.data.nativeComponentName;
  const regexStringParams = `(<${componentName})(.*?)(><\\/${componentName}>)`;
  const regexParams = new RegExp(regexStringParams);
  const matchParams = eventString?.match(regexParams);
  if (matchParams && matchParams[2]) {
    return matchParams[2];
  }
  return null;
};

const extractValueFromRequestRenderingEvent = (event: RequestRenderingEvent, key: string): string | undefined => {
  const paramsString = getParamsFromRequestRenderingEvent(event);

  const regexString = `${key}=([^\\ \\s]+)`;
  const regex = new RegExp(regexString);
  const match = paramsString?.match(regex);
  if (match && match[1]) {
    return match[1];
  } else {
    return undefined;
  }
};

const getAddToWalletComponentDataFromEvent = (event: BottomSheetSlotData, customerToken: string): BottomSheetNativeAddToWalletComponentType | null => {
  const cardId = event.componentResourceId ?? extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'card-id');
  if (!cardId) {
    console.error('componentResourceId is missing in getAddToWalletComponentDataFromEvent and no cardId in requestRenderingEvent');
    return null;
  }
  return {
    type: BottomSheetNativeComponentType.AddToWalletComponent,
    props: {
      cardId: cardId,
      customerToken: customerToken,
    },
  };
};

const getACHCreditComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeACHCreditComponentType | null => {
  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
  const fee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'fee');
  const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
  const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');
  const withPlaid = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'with-plaid');
  const plaidLinkCustomizationName = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-link-customization-name');
  const isAutoFocus = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'is-auto-focus');
  const sameDay = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'same-day');
  const plaidAccountFiltersAsString = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-account-filters');
  const plaidAccountFiltersArray = parseUNAccountFilters(plaidAccountFiltersAsString);

  return {
    type: BottomSheetNativeComponentType.ACHCreditComponent,
    props: {
      accountId: accountId,
      fee: fee ? parseInt(fee) : undefined,
      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
      withPlaid: withPlaid ? withPlaid === 'true' : undefined,
      plaidAccountFilters: plaidAccountFiltersArray,
      plaidLinkCustomizationName: plaidLinkCustomizationName,
      isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
      sameDay: sameDay ? sameDay === 'true' : undefined,
    },
  };
};

const getACHDebitComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeACHDebitComponentType | null => {
  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
  const fee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'fee');
  const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
  const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');
  const plaidLinkCustomizationName = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-link-customization-name');
  const isAutoFocus = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'is-auto-focus');
  const sameDay = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'same-day');
  const plaidAccountFiltersAsString = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-account-filters');
  const plaidAccountFiltersArray = parseUNAccountFilters(plaidAccountFiltersAsString);

  return {
    type: BottomSheetNativeComponentType.ACHDebitComponent,
    props: {
      accountId: accountId,
      fee: fee ? parseInt(fee) : undefined,
      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
      plaidAccountFilters: plaidAccountFiltersArray,
      plaidLinkCustomizationName: plaidLinkCustomizationName,
      isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
      sameDay: sameDay ? sameDay === 'true' : undefined,
    },
  };
};

const getCheckDepositComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeCheckDepositComponentType | null => {
  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
  const fee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'fee');
  const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
  const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');
  if (!accountId) {
    console.error('accountId is missing in getCheckDepositComponentDataFromEvent');
    return null;
  }
  return {
    type: BottomSheetNativeComponentType.CheckDepositComponent,
    props: {
      accountId: accountId,
      fee: fee ? parseInt(fee) : undefined,
      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
    },
  };
};

const getBookPaymentComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeBookPaymentComponentType | null => {
  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
  const counterPartyAccountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'counterparty-account-id');
  const counterPartyName = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'counterparty-name');
  const isSameCustomer = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'is-same-customer');
  const isAutoFocus = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'is-auto-focus');
  const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
  const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');

  return {
    type: BottomSheetNativeComponentType.BookPaymentComponent,
    props: {
      accountId: accountId,
      counterPartyAccountId: counterPartyAccountId,
      counterPartyName: counterPartyName,
      isSameCustomer: isSameCustomer ? isSameCustomer === 'true' : undefined,
      isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
    },
  };
};

const getWirePaymentComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeWirePaymentComponentType | null => {
  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
  const fee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'fee');
  const isAutoFocus = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'is-auto-focus');
  const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
  const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');

  if (!accountId) {
    console.error('accountId is missing in getWirePaymentComponentDataFromEvent');
    return null;
  }
  return {
    type: BottomSheetNativeComponentType.WirePaymentComponent,
    props: {
      accountId: accountId,
      fee: fee ? parseInt(fee) : undefined,
      isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
    },
  };
};

export const getNativeComponentDataFromEvent = (event: BottomSheetSlotData) => {
  let componentData = null;
  let nativePlace = BottomSheetNativePlaceType.modal;
  const requestRenderingEventData = event.requestRenderingEvent.data;

  const customerToken = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'customer-token');
  if (!customerToken) {
    console.error('customerToken is missing in getNativeComponentDataFromEvent');
    return null;
  }

  switch (requestRenderingEventData.nativeComponentName) {
    case WebComponentType.cardAction:
      if (requestRenderingEventData.nativeComponent?.includes('action=AddToWallet')) {
        nativePlace = BottomSheetNativePlaceType.overFullScreen;
        componentData = getAddToWalletComponentDataFromEvent(event, customerToken);
      }
      break;
    case WebComponentType.achCreditPayment:
      componentData = getACHCreditComponentDataFromEvent(event);
      break;

    case WebComponentType.achDebitPayment:
      componentData = getACHDebitComponentDataFromEvent(event);
      break;

    case WebComponentType.checkDeposit:
      componentData = getCheckDepositComponentDataFromEvent(event);
      break;

    case WebComponentType.bookPayment:
      componentData = getBookPaymentComponentDataFromEvent(event);
      break;

    case WebComponentType.wirePayment:
      componentData = getWirePaymentComponentDataFromEvent(event);
      break;

    default:
      break;
  }

  if (!componentData) {
    return null;
  }
  return {
    component: componentData,
    nativePlace: nativePlace,
  };
};