ChargEco/Strides-APP/app/pages/charging/StepStartView.js

/**
 * 充电页：扫码认证之后-充电开始之前
 * @邠心vbe on 2023/03/10
 */
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import Button from '../../components/Button';
import { ChargeStyle, TypeImage } from '../chargeV2/Charging';
import { PageList } from '../Router';

export default StepStartView = ({
  isPrivate,
  stationInfo={},
  onEnterStation,
  canIntoCharging=false,
  onIntoCharging
}) => (
  <View>
    <View style={{minHeight: $vht(80)}}>
      <Text style={styles.gstText}>{$t('charging.tipsRatesTax')}</Text>
      <Text style={styles.title}>{$t('charging.acChargers')} ({(stationInfo?.acConnector?.available ?? "0") + $t('charging.numberAvailable')})</Text>
      { stationInfo.acRates?.length > 0
        ? stationInfo.acRates.map((item, index) => {
            return (
              <View key={index} style={ChargeStyle.stationInfoView}>
                <Image
                  style={ChargeStyle.infoIcon}
                  source={TypeImage.AC}/>
                <View style={ChargeStyle.infoGroup}>
                  <Text style={ChargeStyle.infoText}>{item.type}</Text>
                  <Text style={ChargeStyle.infoTitle}>{$t('charging.labelType')}</Text>
                </View>
                <View style={ChargeStyle.infoGroup}>
                  <Text style={ChargeStyle.infoText}>{item.rates}</Text>
                  <Text style={ChargeStyle.infoTitle}>{$t('charging.labelRate')}</Text>
                </View>
                <View style={ChargeStyle.infoGroup}>
                  <Text style={ChargeStyle.infoText}>{item.power}</Text>
                  <Text style={ChargeStyle.infoTitle}>{$t('charging.labelPower')}</Text>
                </View>
                <View style={ChargeStyle.infoGroup}>
                  { item?.connectorCount?.available > 0
                    ? <Text style={[ChargeStyle.infoStatus, ChargeStyle.statusAvailable]}>{$t('charging.statusAvailable')}</Text>
                    : <Text style={[ChargeStyle.infoStatus, ChargeStyle.statusUnavailable]}>{$t('charging.statusUnavailable')}</Text>
                  }
                  <Text style={ChargeStyle.infoTitle}>{$t('charging.labelStatus')}</Text>
                </View>
              </View>
            );
          })
        : <Text style={ui.noData}>{$t('charging.noRates')}</Text>
      }
      <Text style={styles.title}>{$t('charging.dcChargers')} ({(stationInfo?.dcConnector?.available ?? "0") + $t('charging.numberAvailable')})</Text>
      { stationInfo.dcRates?.length > 0
        ? stationInfo.dcRates.map((item, index) => {
            return (
              <View key={index} style={ChargeStyle.stationInfoView}>
                <Image
                  style={ChargeStyle.infoIcon}
                  source={TypeImage.DC}/>
                <View style={ChargeStyle.infoGroup}>
                  <Text style={ChargeStyle.infoText}>{item.type}</Text>
                  <Text style={ChargeStyle.infoTitle}>{$t('charging.labelType')}</Text>
                </View>
                <View style={ChargeStyle.infoGroup}>
                  <Text style={ChargeStyle.infoText}>{item.rates}</Text>
                  <Text style={ChargeStyle.infoTitle}>{$t('charging.labelRate')}</Text>
                </View>
                <View style={ChargeStyle.infoGroup}>
                  <Text style={ChargeStyle.infoText}>{item.power}</Text>
                  <Text style={ChargeStyle.infoTitle}>{$t('charging.labelPower')}</Text>
                </View>
                <View style={ChargeStyle.infoGroup}>
                  { item?.connectorCount?.available > 0
                    ? <Text style={[ChargeStyle.infoStatus, ChargeStyle.statusAvailable]}>{$t('charging.statusAvailable')}</Text>
                    : <Text style={[ChargeStyle.infoStatus, ChargeStyle.statusUnavailable]}>{$t('charging.statusUnavailable')}</Text>
                  }
                  <Text style={ChargeStyle.infoTitle}>{$t('charging.labelStatus')}</Text>
                </View>
              </View>
            );
          })
        : <Text style={ui.noData}>{$t('charging.noRates')}</Text>
      }
      { isPrivate &&
        <View style={styles.privateView}> 
          <Text style={styles.privateText}>{$t('charging.ratesPrivateNote')}</Text>
        </View>
      }
    </View>
    {/* <Payment refreshId={refreshId}/> */}
    { canIntoCharging
    ? <Button
        style={styles.buttonView}
        text={$t('charging.btnIntoCharging')}
        //disabled={available}
        onClick={onIntoCharging}/>
    : <View style={styles.buttonGroup}>
        <Button
          style={styles.buttonLeft}
          text={$t('charging.scanQR')}
          //disabled={available}
          onClick={() => {
            startPage(PageList.scanqr, {actionDetail: false, id: stationInfo?.id});
          }}/>
        <Button
          style={styles.buttonRight}
          text={$t('charging.enterStationId')}
          //disabled={available}
          onClick={onEnterStation}/>
      </View>
    }
  </View>
);

const styles = StyleSheet.create({
  gstText: {
    color: '#EF3340',
    fontSize: 16,
    paddingTop: 16,
    fontWeight: 'bold',
    textAlign: 'center'
  },
  title: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingBottom: 16
  },
  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,
  },
  buttonRight: {
    flex: 1,
    marginLeft: 16,
    elevation: 1.5
  },
})