react-native-unit-components/lib/module/components/UNBottomSheetComponent/UNBottomSheetComponent.utils.js

Unit React Native components

import { LISTENERS } from './../../scripts/html/bodyScript';
import { webViewId } from '../../scripts/html/bodyHtml';
import { BottomSheetNativeComponentType, BottomSheetNativePlaceType } from '../../types/internal/bottomSheet.types';
import { WebComponentType } from '../../types/internal/webComponent.types';
import { parseUNAccountFilters, parseUNCreateCardTypes } from '../../types/shared';
export const getBottomSheetScript = () => {
  return LISTENERS.requestRefresh;
};
export const renderingBottomSheetRequest = (currentWebView, renderingRequest) => {
  currentWebView?.injectJavaScript(`
    document.activeElement && document.activeElement.blur();
    dispatchRenderingEvent('${JSON.stringify(renderingRequest.data)}');
  `);
};
export const resetHtml = currentWebView => {
  currentWebView?.injectJavaScript(`
    document.activeElement && document.activeElement.blur();
    document.getElementById('${webViewId}').style.height = null;
  `);
};
export const injectHtmlFullScreenHeight = (currentWebView, bottomSheetHeight) => {
  currentWebView && currentWebView?.injectJavaScript(`
    document.getElementById('${webViewId}').style.height = '${bottomSheetHeight}px';
  `);
};
const getParamsFromRequestRenderingEvent = event => {
  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, key) => {
  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, customerToken) => {
  const cardId = event.componentResourceId ?? extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'card-id');
  const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
  const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
  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,
      theme: theme,
      language: language
    }
  };
};
const getACHCreditComponentDataFromEvent = event => {
  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
  const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
  const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
  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 showSameDaySelection = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'show-same-day-selection');
  const plaidAccountFiltersAsString = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-account-filters');
  const plaidAccountFiltersArray = parseUNAccountFilters(plaidAccountFiltersAsString);
  return {
    type: BottomSheetNativeComponentType.ACHCreditComponent,
    props: {
      accountId: accountId,
      theme: theme,
      language: language,
      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,
      showSameDaySelection: showSameDaySelection ? showSameDaySelection === 'true' : undefined
    }
  };
};
const getACHDebitComponentDataFromEvent = event => {
  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
  const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
  const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
  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 showSameDaySelection = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'show-same-day-selection');
  const plaidAccountFiltersAsString = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-account-filters');
  const plaidAccountFiltersArray = parseUNAccountFilters(plaidAccountFiltersAsString);
  return {
    type: BottomSheetNativeComponentType.ACHDebitComponent,
    props: {
      accountId: accountId,
      theme: theme,
      language: language,
      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
      plaidAccountFilters: plaidAccountFiltersArray,
      plaidLinkCustomizationName: plaidLinkCustomizationName,
      isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
      sameDay: sameDay ? sameDay === 'true' : undefined,
      showSameDaySelection: showSameDaySelection ? showSameDaySelection === 'true' : undefined
    }
  };
};
const getCheckDepositComponentDataFromEvent = event => {
  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
  const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
  const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
  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,
      theme: theme,
      language: language,
      fee: fee ? parseInt(fee) : undefined,
      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined
    }
  };
};
const getBookPaymentComponentDataFromEvent = event => {
  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
  const counterPartyAccountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'counterparty-account-id');
  const counterPartyName = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'counterparty-name');
  const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
  const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
  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,
      theme: theme,
      language: language,
      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 => {
  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
  const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
  const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
  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,
      theme: theme,
      language: language,
      isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined
    }
  };
};
const getCreateCardComponentDataFromEvent = event => {
  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
  const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
  const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
  const virtualCardFee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'virtual-card-fee');
  const physicalCardFee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'physical-card-fee');
  const cardTypesAsString = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'card-types');
  const cardTypes = parseUNCreateCardTypes(cardTypesAsString);
  return {
    type: BottomSheetNativeComponentType.CreateCardComponent,
    props: {
      accountId: accountId,
      theme: theme,
      language: language,
      cardTypes: cardTypes,
      physicalCardFee: physicalCardFee ? parseInt(physicalCardFee) : undefined,
      virtualCardFee: virtualCardFee ? parseInt(virtualCardFee) : undefined
    }
  };
};
export const getNativeComponentDataFromEvent = event => {
  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;
    case WebComponentType.createCard:
      componentData = getCreateCardComponentDataFromEvent(event);
      break;
    default:
      break;
  }
  if (!componentData) {
    return null;
  }
  return {
    component: componentData,
    nativePlace: nativePlace
  };
};
//# sourceMappingURL=UNBottomSheetComponent.utils.js.map