react-native-unit-components/lib/module/components/UNWirePaymentComponent/UNWirePaymentComponent.js

Unit React Native components

import { WebComponent } from '../../webComponent/WebComponent';
import React, { useState } from 'react';
import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
import { withReduxStore } from '../../helpers/store/helpers';
import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
import { PageMessage } from '../../messages/webMessages/pageMessage';
import { getWirePaymentParams, getWirePaymentScript } from './UNWirePaymentComponent.utils';
import { UNBaseView } from '../../nativeComponents/UNBaseView';
import { ensureArray } from '../../utils/onLoadMessages.utils';
const UNWirePaymentComponent = props => {
  const [height, setHeight] = useState(0);
  const [presentationMode, setPresentationMode] = useState(PresentationMode.Inherit);
  const handleUnitOnLoad = response => {
    if (!props.onLoad) {
      return;
    }
    if (RESPONSE_KEYS.errors in response) {
      props.onLoad(response);
      return;
    }
    if (RESPONSE_KEYS.account in response) {
      const account = response[RESPONSE_KEYS.account].data;
      const paymentOnLoad = {
        data: ensureArray(account)
      };
      props.onLoad(paymentOnLoad);
      return;
    }
    console.error('On Load Error: unexpected response type');
    return;
  };
  const handleWebViewMessage = message => {
    if (!message || !message.details) return;
    switch (message.type) {
      case PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED:
        {
          props.onInitialStageBackButtonClicked && props.onInitialStageBackButtonClicked();
          break;
        }
      case PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED:
        {
          props.onFinalStageDoneButtonClicked && props.onFinalStageDoneButtonClicked();
          break;
        }
      case PaymentMessage.PAYMENT_CREATED:
        props.onPaymentCreated && props.onPaymentCreated(message.details.data);
        break;
      case UnitComponentsMessage.UNIT_ON_LOAD:
        handleUnitOnLoad(message.details);
        break;
      case PageMessage.PAGE_HEIGHT:
        {
          const currentHeight = message.details.height;
          setHeight(currentHeight);
          if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
            setPresentationMode(PresentationMode.Default);
          }
          break;
        }
    }
  };
  const style = presentationMode === PresentationMode.Inherit ? {
    flex: 1
  } : {
    height: height
  };
  return /*#__PURE__*/React.createElement(UNBaseView, {
    style: style,
    fallback: /*#__PURE__*/React.createElement(React.Fragment, null)
  }, /*#__PURE__*/React.createElement(WebComponent, {
    type: WebComponentType.wirePayment,
    presentationMode: presentationMode,
    params: getWirePaymentParams(props),
    script: getWirePaymentScript(),
    onMessage: message => handleWebViewMessage(message),
    isScrollable: true,
    theme: props.theme,
    language: props.language
  }));
};
export default withReduxStore(UNWirePaymentComponent);
//# sourceMappingURL=UNWirePaymentComponent.js.map