ChargEco/Strides-APP/app/pages/payment/PayNow.js

/**
 * PayNow支付页面
 * @邠心vbe on 2021/05/12
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, ScrollView } from 'react-native';
import {CameraRoll} from "@react-native-camera-roll/camera-roll";
import ViewShot from "react-native-view-shot";
import Button from '../../components/Button';
import Dialog from '../../components/Dialog';
import { Balance } from '../wallet/Payment';
import {check, request, openSettings, PERMISSIONS, RESULTS} from 'react-native-permissions';
import TextView from '../../components/TextView';

export default class PayNow extends Component {
  constructor(props) {
    super(props);
    this.state = {
      amount: 0,
      base64: '',
      qrInfo: {
        merchantUEN: "",
        merchantName: "",
        paymentAmount: "",
        expirationTime: "",
        imageBase64Code: ""
      },
      isNewVersion: false
    };
    this.denied = true;
    this.viewShot = React.createRef();
  }

  componentDidMount() {
    if (this.props.route.params.info) {
      this.setState({
        qrInfo: this.props.route.params.info,
        isNewVersion: true
      })
      console.log("新版ANZ支付");
    } else if (this.props.route.params.amount) {
      this.setState({
        isNewVersion: false,
        amount: this.props.route.params?.amount,
        base64: 'data:image/png;base64,' + this.props.route.params.base64
      });
    }
  }

  savePhoto() {
    Dialog.showProgressDialog();
    this.viewShot.current.capture().then(uri => {
      Dialog.dismissLoading();
      CameraRoll.save(uri, { type: 'photo' });
      console.log("Save Photo with ", uri);
      toastShort($t('payment.successSave2gallery'));
    }).catch(errs => {
      toastShort(errs)
      Dialog.dismissLoading();
    });
  }

  getPermission() {
    request(
      isIOS 
    ? PERMISSIONS.IOS.PHOTO_LIBRARY_ADD_ONLY
    : PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE)
    .then(res => {
      console.log('getPermission', res)
      this.checkPermission();
    }).catch(errs => {
      console.info('getPermission', errs)
    });
  }

  checkPermission() {
    check(
      isIOS 
    ? PERMISSIONS.IOS.PHOTO_LIBRARY_ADD_ONLY
    : PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE)
    .then(res => {
      switch (res) {
        case RESULTS.UNAVAILABLE:
          console.log('此功能不可用（在此设备上/在此上下文中）');
          if (isIOS) {
            this.savePhoto();
          } else {
            toastShort($t('payment.errSave2gallery'));
          }
          break;
        case RESULTS.DENIED:
          console.log('权限未被请求/被拒绝，但可以请求');
          if (this.denied) {
            this.denied = false;
            this.getPermission();
          } else {
            this.denied = true;
            toastShort($t('payment.errSave2gallery'));
          }
          break;
        case RESULTS.LIMITED:
          console.log('权限是有限的：有些操作是可能的');
          this.savePhoto();
          break;
        case RESULTS.GRANTED:
          console.log('许可被授予');
          this.savePhoto();
          break;
        case RESULTS.BLOCKED:
          console.log('权限被拒绝，不再可请求');
          Dialog.showDialog({
            title: $t('common.error'),
            message: $t('payment.errSave2galleryPermission'),
            ok: $t('payment.btnSetting'),
            callback: btn => {
              if (btn == Dialog.BUTTON_OK) {
                console.log('ok');
                openSettings().catch(() => console.warn('cannot open settings'));
              }
            }
          });
          //toastShort('Save to gallery failed');
          break;
      }
    }).catch(err1 => {

    })
  }

  render() {
    if (this.state.isNewVersion) {
      return (
        <ScrollView
          style={styles.container}
          contentContainerStyle={ui.center}>
          <View style={styles.headerInfo}>
            <TextView style={styles.paymentTitle}>PAYMENT TO:</TextView>
            <TextView style={styles.paymentText}>{this.state.qrInfo.merchantName}</TextView>
            <TextView style={styles.paymentText}>({this.state.qrInfo.merchantUEN})</TextView>
          </View>
          <ViewShot
            ref={this.viewShot}
            style={styles.contentView2}
            options={{
              format: "png",
              quality: 1,
              fileName: "PayNow"
            }}>
            <View style={ui.center}>
              <EndView/>
              <Image
                source={require('../../images/tool-logo.png')}
                style={{width: $vw(50), height: $vw(11)}}
                resizeMode="contain"
              />
            </View>
            { this.state.qrInfo.imageBase64Code
            ? <Image
                style={styles.qrCode2}
                source={{uri: this.state.qrInfo.imageBase64Code}}/>
            : <View style={styles.qrCode2}></View>
            }
            <View style={$padding(0, 16, 16)}>
              <View style={ui.flexc}>
                <TextView style={styles.qrTextLabel}>PAYMENT AMOUNT:</TextView>
                <TextView style={styles.qrTextMsg}>{this.state.qrInfo.paymentAmount}</TextView>
              </View>
              <View style={ui.flexc}>
                <TextView style={styles.qrTextLabel}>EXPIRATION TIME:</TextView>
                <TextView style={styles.qrTextMsg}>{this.state.qrInfo.expirationTime}</TextView>
              </View>
            </View>
          </ViewShot>
          <View style={styles.button3}>
            <Button
              style={ui.flex1}
              text={$t('payment.btnSave2gallery')}
              elevation={1.5}
              onClick={() => {
                this.checkPermission();
              }}/>
          </View>
        </ScrollView>
      )
    } else {
      return (
        <ScrollView
          style={styles.container}>
          <View style={styles.headerView}>
            <Balance/>
          </View>
          <ViewShot
            ref={this.viewShot}
            style={styles.contentView}
            options={{
              format: "jpg",
              quality: 1
            }}>
            { this.state.base64
            ? <Image
                style={styles.qrCode}
                source={{uri: this.state.base64}}/>
            : <View style={styles.qrCode}></View>
            }
          </ViewShot>
          <Text style={styles.title}>{$t('payment.labelTopUpAmount')} {currency + ' ' + this.state.amount}</Text>
          <Text style={styles.tips}>{$t('payment.tipsQrPaymentSave')}</Text>
          <Text style={styles.tips}>{$t('payment.tipsQrPayment')}</Text>
          <View style={styles.button2}>
            <Button
              text={$t('payment.btnSave2gallery')}
              elevation={1.5}
              onClick={() => {
                this.checkPermission();
              }}/>
          </View>
          <View style={styles.button}>
            <Button
              text={$t('payment.paymentCompleted')}
              elevation={1.5}
              onClick={() => {
                goBack();
              }}/>
          </View>
          
        </ScrollView>
      );
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5'
  },
  headerView: {
    paddingBottom: 76,
    //backgroundColor: colorAccent
  },
  headerInfo: {
    ...$padding(32, 16),
    alignItems: 'center'
  },
  contentView: {
    marginTop: -88
  },
  contentView2: {
    padding: 8,
    marginTop: 8,
    borderRadius: 4,
    backgroundColor: colorLight
  },
  qrCode: {
    margin: 16,
    width: $vw(100) - 32,
    height: $vw(100) - 32,
    borderRadius: 4,
    backgroundColor: '#efefef'
  },
  qrCode2: {
    width: $vw(85) - 32,
    height: $vw(85) - 32,
    borderRadius: 4,
    backgroundColor: '#efefef'
  },
  title: {
    color: textPrimary,
    fontSize: 18,
    paddingBottom: 16,
    textAlign: 'center'
  },
  tips: {
    color: textPrimary,
    padding: 16,
  },
  button: {
    margin: 16,
    paddingBottom: 16
  },
  button2: {
    marginLeft: 16,
    marginRight: 16
  },
  button3: {
    ...$margin(56, 16, 40),
    flexDirection: 'row'
  },
  paymentTitle: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold'
  },
  paymentText: {
    color: textPrimary,
    fontSize: 15,
    paddingTop: 2
  },
  qrTextLabel: {
    color: textPrimary,
    padding: 2,
    fontSize: 11,
    fontWeight: 'bold'
  },
  qrTextMsg: {
    color: textPrimary,
    fontSize: 11,
    paddingLeft: 2
  }
})