ChargEco/Strides-APP/app/pages/chargeV3/ChargingStartView.js

/**
 * V4充电页：扫码认证之后-充电开始之前
 * @邠心vbe on 2024/05/15
 */
import React from 'react';
import { StyleSheet, View } from 'react-native';
import Button from '../../components/Button';
import { ChargeStyle } from '../chargeV2/Charging';
import { PageList } from '../Router';
import TextView from '../../components/TextView';
import utils from '../../utils/utils';

export default ChargingStartView = ({
  isPrivate,
  stationInfo={},
  onEnterStation,
  canIntoCharging=false,
  onIntoCharging
}) => (
  <View>
    <View style={{minHeight: $vht(80)}}>
      <EndView/>
      <View style={ui.flexcc}>
        <MaterialIcons
          name="info-outline"
          size={20}
          color="#ED3F3F"/>
        <TextView style={styles.gstText}>{$t('charging.tipsRatesTax2')}</TextView>
      </View>
      <View style={ui.flexc}>
        <MaterialCommunityIcons
          name="ev-plug-type2"
          size={24}
          color={textPrimary}
        />
        <TextView style={styles.title}>{$t('charging.acChargers')}</TextView>
      </View>
      { stationInfo.acRates?.length > 0
        ? stationInfo.acRates.map((item, index) => {
            return (
              <View key={index} style={styles.connectorInfoItem}>
                <View style={styles.infoGroup}>
                  <TextView style={styles.infoText}>{item.typePower}</TextView>
                </View>
                <View style={styles.infoGroup}>
                  <TextView style={styles.infoText}>{item.rates}</TextView>
                </View>
                <View style={styles.infoGroup}>
                  <MaterialCommunityIcons
                    name="circle"
                    size={10}
                    color={colorAccent}/>
                  <TextView style={[styles.infoText, {paddingLeft: 4}]}>{item.connectorCount?.available + "/" + item.connectorCount?.all}</TextView>
                </View>
              </View>
            );
          })
        : <TextView style={ui.noData}>{$t('charging.noRates')}</TextView>
      }
      <View style={ui.flexc}>
        <MaterialCommunityIcons
          name="ev-plug-ccs2"
          size={24}
          color={textPrimary}
        />
        <TextView style={styles.title}>{$t('charging.dcChargers')}</TextView>
      </View>
      { stationInfo.dcRates?.length > 0
        ? stationInfo.dcRates.map((item, index) => {
            return (
              <View key={index} style={styles.connectorInfoItem}>
                <View style={styles.infoGroup}>
                  <TextView style={styles.infoText}>{item.typePower}</TextView>
                </View>
                <View style={styles.infoGroup}>
                  <TextView style={styles.infoText}>{item.rates}</TextView>
                </View>
                <View style={styles.infoGroup}>
                  <MaterialCommunityIcons
                    name="circle"
                    size={10}
                    color={colorAccent}/>
                  <TextView style={[styles.infoText, {paddingLeft: 4}]}>{item.connectorCount?.available + "/" + item.connectorCount?.all}</TextView>
                </View>
              </View>
            );
          })
        : <TextView style={ui.noData}>{$t('charging.noRates')}</TextView>
      }
      { isPrivate &&
        <View style={styles.privateView}> 
          <TextView style={styles.privateText}>{$t('charging.ratesPrivateNote')}</TextView>
        </View>
      }
      { utils.isNotEmpty(stationInfo.idleFee) && <>
        <View style={ui.flexc}>
          <MaterialCommunityIcons
            name="timeline-clock"
            size={24}
            color={"#ED3F3F"}
          />
          <TextView style={styles.title}>Idle Fee</TextView>
        </View>
        <TextView style={styles.discountText}>{"Grace Period of " + stationInfo.idleFee.gracePeriod + " Minutes. Rates are " + stationInfo.idleFee.idleFee + " per " + stationInfo.idleFee.everyMinute + ". Idle Fee is capped at " + stationInfo.idleFee.crapFee}</TextView>
      </>}
      { !!(stationInfo.hasDiscount) && <>
        <View style={ui.flexc}>
          <MaterialCommunityIcons
            name="brightness-percent"
            size={24}
            color={colorAccent}
          />
          <TextView style={styles.title}>{$t('charging.tipsDiscountTitle')}</TextView>
        </View>
        <TextView style={styles.discountText}>{$t('charging.tipsDiscount')}</TextView>
      </>}
    </View>
    {/* <Payment refreshId={refreshId}/> */}
    { canIntoCharging
    ? <Button
        style={styles.buttonView}
        borderRadius={4}
        text={$t('charging.btnIntoCharging')}
        //disabled={available}
        onClick={onIntoCharging}/>
    : <View style={styles.buttonGroup}>
        <Button
          style={styles.buttonLeft}
          text={$t('charging.enterStationId')}
          //disabled={available}
          onClick={onEnterStation}/>
        <Button
          style={styles.buttonRight}
          text={$t('charging.scanQR')}
          //disabled={available}
          onClick={() => {
            PagerUtil.onInnerScanQR();
            startPage(PageList.scanqr, {actionDetail: false, id: stationInfo?.id});
          }}/>
      </View>
    }
  </View>
);

const styles = StyleSheet.create({
  gstText: {
    color: '#ED3F3F',
    fontSize: 14,
    lineHeight: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    paddingLeft: 4
  },
  title: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingLeft: 8,
    paddingBottom: 16
  },
  connectorInfoItem: {
    ...$padding(8, 16),
    alignItems: 'center',
    flexDirection: 'row'
  },
  infoGroup: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row'
  },
  infoText: {
    color: textPrimary,
    fontSize: 12
  },
  updateTip: {
    color: '#aaa',
    fontSize: 10,
    textAlign: 'center',
    paddingTop: 32,
    paddingBottom: 16
  },
  privateView: {
    height: $vht(25),
    alignItems: 'center',
    justifyContent: 'center'
  },
  privateText: {
    color: '#FA5759'
  },
  buttonGroup: {
    marginTop: 16,
    marginBottom: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  buttonView: {
    marginTop: 16,
    marginBottom: 32
  },
  buttonLeft: {
    flex: 1,
    elevation: 1.5,
    borderRadius: 4,
    backgroundColor: colorPrimary
  },
  buttonRight: {
    flex: 1,
    marginLeft: 16,
    elevation: 1.5,
    borderRadius: 4
  },
  discountView: {
    borderWidth: 1,
    borderColor: colorAccent
  },
  discountText: {
    fontSize: 12,
    textAlign: 'left',
    color: textPrimary,
    ...$padding(2, 10)
  }
})