ChargEco/Strides-SPAPP/app/pages/vouchers/VoucherDetails.js

/**
 * 代金券详情页面
 * @邠心vbe on 2024/04/17
 */
import React, { Component } from 'react';
import { View, StyleSheet, Text, TouchableOpacity, ScrollView } from 'react-native';
import TextView from '../../components/TextView';
import apiVoucher from '../../api/apiVoucher';
import Dialog from '../../components/Dialog';
import utils from '../../utils/utils';
import VbeSkeleton from '../../components/VbeSkeleton';

export default class VoucherDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      voucherId: "",
      voucherInfo: {}
    };
  }

  componentDidMount() {
    const params = this.props.route.params;
    if (params.id) {
      this.setState({
        voucherId: params.id
      }, () => {
        this.getVoucherDetail();
      })
    }
  }

  getVoucherDetail() {
    apiVoucher.getVoucherInfo(this.state.voucherId).then(res => {
      if (res.data) {
        this.setState({
          voucherInfo: res.data
        })
      }
    }).catch(err => {
      toastShort(err)
    }).finally(() => {
      this.setState({
        loading: false
      })
    });
  }

  getDaysText() {
    if (this.state.voucherInfo.eligibleForUsageOn) {
      if (typeof this.state.voucherInfo.eligibleForUsageOn == 'string') {
        this.state.voucherInfo.eligibleForUsageOn = this.state.voucherInfo.eligibleForUsageOn.split(",");
      }
      return this.state.voucherInfo.eligibleForUsageOn.join(", ");
    } else {
      return "Every day";
    }
  }

  getTypeText() {
    if (this.state.voucherInfo.chargeType) {
      return this.state.voucherInfo.chargeType;
    } else {
      return "AC & DC";
    }
  }

  toSiteDetail(id) {
    utils.toChargeDetailPage(id, "view");
  }

  render() {
    if (this.state.loading) {
      return (
        <VbeSkeleton
          style={styles.loadingView}
          viewStyle={styles.container}
          layout={[
            {width: '100%', height: 20},
            {width: '50%', height: 20, marginTop: 8},
            {width: '30%', height: 18, marginTop: 32},
            {width: '100%', height: 15, marginTop: 16},
            {width: '100%', height: 15, marginTop: 8},
            {width: '60%', height: 15, marginTop: 8},
            {width: '30%', height: 18, marginTop: 24},
            {width: '100%', height: 15, marginTop: 8},
            {width: '100%', height: 15, marginTop: 8},
            {width: '60%', height: 15, marginTop: 8},
            {width: '30%', height: 18, marginTop: 24},
            {width: '100%', height: 15, marginTop: 8},
            {width: '100%', height: 15, marginTop: 8},
            {width: '60%', height: 15, marginTop: 8},
            {width: '30%', height: 18, marginTop: 24},
            {width: '100%', height: 15, marginTop: 8},
            {width: '100%', height: 15, marginTop: 8},
            {width: '60%', height: 15, marginTop: 8},
            {width: '30%', height: 18, marginTop: 24},
            {width: '100%', height: 15, marginTop: 8},
            {width: '100%', height: 15, marginTop: 8},
            {width: '60%', height: 15, marginTop: 8}
          ]}/>
      )
    }
    return (
      <ScrollView
        style={styles.container}
        contentContainerStyle={$padding(16)}>
        <TextView style={styles.voucherName}>{this.state.voucherInfo.voucherName}</TextView>
        <EndView half/>
        <TextView style={styles.labelText}>{$t("voucher.voucherType")}</TextView>
        <TextView style={styles.valueText}>{this.state.voucherInfo.voucherType}</TextView>

        <TextView style={styles.labelText}>{$t("voucher.description")}</TextView>
        <TextView style={styles.valueText}>{this.state.voucherInfo.voucherDesc}</TextView>

        <TextView style={styles.labelText}>{$t("voucher.validityPeriod")}</TextView>
        <TextView style={styles.valueText}>{this.state.voucherInfo.validityPeriod}</TextView>

        <TextView style={styles.labelText}>{$t("voucher.voucherCondition")}</TextView>
        <View style={styles.olView}>
          <View style={ui.flexc}>
            <MaterialIcons
              style={styles.circleIcon}
              name="circle"
              color={textPrimary}
              size={6}/>
            <TextView style={styles.valueText}>
              {$t("voucher.conditionDays")} <Text style={ui.bold}>{this.getDaysText()}</Text>
            </TextView>
          </View>
          <View style={ui.flexc}>
            <MaterialIcons
              style={styles.circleIcon}
              name="circle"
              color={textPrimary}
              size={6}/>
            <TextView style={styles.valueText}>
              {$t("voucher.conditionTime")} <Text style={ui.bold}>{this.state.voucherInfo.eligibleForUsageDuring}</Text>
            </TextView>
          </View>
          <View style={ui.flexc}>
            <MaterialIcons
              style={styles.circleIcon}
              name="circle"
              color={textPrimary}
              size={6}/>
            <TextView style={styles.valueText}>
              <Text style={ui.bold}>{this.getTypeText()}</Text> {$t("voucher.conditionTypeOnly")}
            </TextView>
          </View>
          <View style={ui.flexc}>
            <MaterialIcons
              style={styles.circleIcon}
              name="circle"
              color={textPrimary}
              size={6}/>
            <TextView style={styles.valueText}>
              {$t("voucher.conditionCountry")} <Text style={ui.bold}>{this.state.voucherInfo.country}</Text>
            </TextView>
          </View>
          <View style={ui.flexc}>
            <MaterialIcons
              style={styles.circleIcon}
              name="circle"
              color={textPrimary}
              size={6}/>
            <TextView style={styles.valueText}>
              {$t("voucher.conditionMinSpend")} <Text style={ui.bold}>{this.state.voucherInfo.minimumSpend}</Text>
            </TextView>
          </View>
        </View>

        <TextView style={styles.labelText}>{$t("voucher.siteEligibility")}</TextView>
        <View style={styles.olView}>
          { this.state.voucherInfo.siteNames?.map((item, index) => (
            <TouchableOpacity
              style={styles.siteRow}
              onPress={() => this.toSiteDetail(item.sitePk)}
              key={index}>
              <MaterialIcons
                style={styles.circleIcon}
                name="circle"
                color={textPrimary}
                size={6}/>
              <TextView style={ui.link}>{item?.siteName}</TextView>
            </TouchableOpacity>
            ))
          }
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: pageBackground
  },
  loadingView: {
    flex: 1,
    padding: 16,
    justifyContent: 'flex-start',
    backgroundColor: pageBackground
  },
  voucherName: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold',
    paddingTop: 4,
    paddingBottom: 12,
    borderBottomWidth: 2,
    borderColor: colorPrimary
  },
  labelText: {
    color: textPrimary,
    fontSize: 14,
    fontWeight: 'bold',
    paddingTop: 16
  },
  valueText: {
    color: textSecondary,
    fontSize: 14,
    paddingTop: 6
  },
  olView: {
    paddingTop: 6,
    paddingLeft: 8
  },
  circleIcon: {
    paddingTop: 3,
    paddingRight: 8
  },
  siteRow: {
    paddingTop: 4,
    paddingBottom: 4,
    flexDirection: 'row'
  }
})