Untitled

import { IBlock } from "../../../framework/src/IBlock";
import { Message } from "../../../framework/src/Message";
import { BlockComponent } from "../../../framework/src/BlockComponent";
import MessageEnum, {
  getName,
} from "../../../framework/src/Messages/MessageEnum";
import { runEngine } from "../../../framework/src/RunEngine";

// Customizable Area Start
import { imgPasswordInVisible, imgPasswordVisible } from "./assets";
const {PaymentRequest} = require("react-native-payments");
import * as RNLocalize from "react-native-localize";
// Customizable Area End

export const configJSON = require("./config");

export interface Props {
  navigation: any;
  id: string;
  // Customizable Area Start
  // Customizable Area End
}

interface S {
  txtInputValue: string;
  txtSavedValue: string;
  enableField: boolean;
  // Customizable Area Start
  amount: string | null;
  bundle: string;
  isVisible: boolean;
  duration: string;
  // Customizable Area End
}

interface SS {
  id: any;
  // Customizable Area Start
  // Customizable Area End
}

export default class ApplePayIntegrationController extends BlockComponent<
  Props,
  S,
  SS
> {
  // Customizable Area Start
  // Customizable Area End

  constructor(props: Props) {
    super(props);
    this.receive = this.receive.bind(this);

    // Customizable Area Start
    this.subScribedMessages = [
      getName(MessageEnum.AccoutLoginSuccess),
      // Customizable Area Start
      getName(MessageEnum.NavigationTargetMessage),
      getName(MessageEnum.SessionResponseData),
      getName(MessageEnum.NavigationPayLoadMessage)
      // Customizable Area End
    ];

    this.state = {
      txtInputValue: "",
      txtSavedValue: "A",
      enableField: false,
      // Customizable Area Start
      amount: '0',
      bundle: '0',
      isVisible: false,
      duration: '',
      // Customizable Area End
    };
    runEngine.attachBuildingBlock(this as IBlock, this.subScribedMessages);
    // Customizable Area End
  }

  async receive(from: string, message: Message) {
    runEngine.debugLog("Message Recived", message);

    if (message.id === getName(MessageEnum.AccoutLoginSuccess)) {
      let value = message.getData(getName(MessageEnum.AuthTokenDataMessage));

      this.showAlert(
        "Change Value",
        "From: " + this.state.txtSavedValue + " To: " + value
      );

      this.setState({ txtSavedValue: value });
    }

    // Customizable Area Start
    if(getName(MessageEnum.NavigationPayLoadMessage) === message.id) {
      const premiumData = message.getData(getName(MessageEnum.SessionResponseData));
      premiumData.amount && this.setState({
        amount: premiumData.amount,
        bundle: premiumData.bundle,
      })
    }
    // Customizable Area End
  }

  txtInputWebProps = {
    onChangeText: (text: string) => {
      this.setState({ txtInputValue: text });
    },
    secureTextEntry: false,
  };

  txtInputMobileProps = {
    ...this.txtInputWebProps,
    autoCompleteType: "email",
    keyboardType: "email-address",
  };

  txtInputProps = this.isPlatformWeb()
    ? this.txtInputWebProps
    : this.txtInputMobileProps;

  btnShowHideProps = {
    onPress: () => {
      this.setState({ enableField: !this.state.enableField });
      this.txtInputProps.secureTextEntry = !this.state.enableField;
      this.btnShowHideImageProps.source = this.txtInputProps.secureTextEntry
        ? imgPasswordVisible
        : imgPasswordInVisible;
    },
  };

  btnShowHideImageProps = {
    source: this.txtInputProps.secureTextEntry
      ? imgPasswordVisible
      : imgPasswordInVisible,
  };

  btnExampleProps = {
    onPress: () => this.doButtonPressed(),
  };

  doButtonPressed() {
    let message = new Message(getName(MessageEnum.AccoutLoginSuccess));
    message.addData(
      getName(MessageEnum.AuthTokenDataMessage),
      this.state.txtInputValue
    );
    this.send(message);
  }

  // web events
  setInputValue = (text: string) => {
    this.setState({ txtInputValue: text });
  };

  setEnableField = () => {
    this.setState({ enableField: !this.state.enableField });
  };

  // Customizable Area Start
  paymentRequest = async () => {
    const paymentMethodData = [{
      supportedMethods: [configJSON.applePay],
      data: {
        merchantIdentifier: configJSON.merchantIdentifier,
        supportedNetworks: [configJSON.visa, configJSON.masterCard, configJSON.amex],
        countryCode: 'US',
        currencyCode: 'USD'
      }
    }];

    const details = {
      id: configJSON.applePay,
      displayItems: [
        {
          label: configJSON.productName,
          amount: { currency: 'USD', value: Number(this.state.amount).toFixed(2) }
        }
      ],
      total: {
        label: configJSON.merchantName,
        amount: { currency: 'USD', value: Number(this.state.amount).toFixed(2) }
      }
    }
    try {
      const applePaymentRequest = new PaymentRequest(paymentMethodData, details);
      const canMakepayments = await applePaymentRequest.canMakePayments();
      if (canMakepayments) {
        const paymentDetails = await applePaymentRequest.show();
        if (paymentDetails) {
          paymentDetails.complete("success");
          this.paymentSuccessResponse(paymentDetails)
        } else {
          paymentDetails.complete("fail");
        }
      }
    } catch (error) {
      this.showAlert('',configJSON.paymentFaileMsg);
    }
  }

  paymentSuccessResponse = (paymentDetails: { _details: { paymentData: { data: string } } }) => {
    this.setState({isVisible: true})
    this.resetState();
  }

  handleAmount = (value: string) => {
    let price = value;
    //user can enter only decimal and dot
    if (value.match(configJSON.numberDotRex)) {
      //if user enter dot then add 0 before
      if (value.charAt(0) === '.') {
        price = '0' + value
      }
      this.setState({
        amount: price.toString()
      })
    }
  }

  disablePayButton = () => {
    return (this.state.amount === null || Number(this.state.amount).toFixed(2) === '0.00')
  }

  resetState = () => {
    this.setState({ amount: '' });
  }

  backNavigator() {
    this.props.navigation.goBack();
  }

  async modalHandler() {
    this.setState({isVisible: false})
    this.props.navigation.pop(1)
  }

  // Customizable Area End
}