ChargEco/Strides-APP/app/pages/chargingV2/StepStart.js

/**
 * 新充电流程：充电前的模块
 * @邠心vbe on 2023/06/20
 */
import React from 'react';
import { View, Image, StyleSheet, ScrollView, Pressable } from 'react-native';
import app from '../../../app.json';
import Button, { ElevationObject } from '../../components/Button';
import TextView from '../../components/TextView';
import { ChargeStyle } from '../chargeV2/Charging';
import { PaymentList } from '../chargeV2/Payment';
import DiscountView from './DiscountView';
import PaymentListV2 from '../chargeV2/PaymentListV2';
import PagerUtil from '../chargeV2/PagerUtil';
import utils from '../../utils/utils';
import DialogIdleFee from './DialogIdleFee';

export default StepStart = ({
  idleFeeConfig,
  connectorInfo={},
  currentPayment,
  onPaymentMethodChanged,
  onAuthenticate,
  selectedVoucher={}
}) => {
  return (
    <ScrollView
      style={ui.flex1}
      contentContainerStyle={$padding(16)}>
      <View style={ui.center}>
        <Image
          style={styles.stepImage}
          resizeMode="contain"
          source={require('../../images/site/charging-status-unknow.png')}/>
        <TextView style={styles.stepTitle}>{$t('charging.stepInsertConnector')}</TextView>
        <TextView style={styles.stepDesc}>{$t('charging.stepInsertConnectorDesc')}</TextView>
      </View>
      <View style={styles.infoRow}>
        <View style={styles.infoCard}>
          <TextView style={styles.infoTitle}>{$t('charging.labelType')}</TextView>
          <TextView
            numberOfLines={1}
            ellipsizeMode="tail"
            style={styles.infoText}>{connectorInfo.chargeType}{connectorInfo.wattage || "AC22"}</TextView>
          <TextView style={styles.infoDesc}></TextView>
        </View>
        <View style={styles.infoCard}>
          <TextView style={styles.infoTitle}>{$t('charging.labelPower')}</TextView>
          <TextView
            numberOfLines={1}
            ellipsizeMode="tail"
            style={styles.infoText}>{connectorInfo.wattage || "0"} kW{/*connectorInfo.rateType*/}</TextView>
          <TextView style={styles.infoDesc}></TextView>
        </View>
      </View>
      <View style={styles.infoRow}>
        <View style={styles.infoCard}>
          <DiscountView visible={connectorInfo.hasDiscount}/>
          <TextView style={styles.infoTitle}>{$t('charging.labelRate')}</TextView>
          {/* <Text
            numberOfLines={1}
            ellipsizeMode="tail"
            style={styles.infoText}>{connectorInfo.rate || "0.00"}/{connectorInfo.rateType || "kWh"}</Text> */}
          <TextView
            numberOfLines={2}
            ellipsizeMode="tail"
            style={styles.infoText}>{connectorInfo.rates || "S$0.00/kWh"}</TextView>
          {(app.modules.nationally && connectorInfo.rates != connectorInfo.userRates) && (
            <TextView
              numberOfLines={1}
              ellipsizeMode="tail"
              style={styles.infoDesc}>({connectorInfo.userRates || "S$0.00/kWh"})</TextView>)
          }
        </View>
        <View style={styles.infoCard}>
          <TextView style={styles.infoTitle}>{$t('charging.labelStatus')}</TextView>
          <TextView
            style={[ChargeStyle.statusAuthenticated, styles.infoStatus]}>
            {$t('charging.statusAvailable')}
          </TextView>
        </View>
      </View>
      <EndView/>
      { (idleFeeConfig && idleFeeConfig.idleFee) &&
        <DialogIdleFee idleFeeConfig={idleFeeConfig}/>
      }
      <View style={ui.flexc}>
        <TextView style={[styles.label, ui.flex1]}>{$t('charging.paymentMethod')}</TextView>
        { app.v3.vouchers &&
          <TextView style={[styles.label, {flex: 1, paddingLeft: 16}]}>{$t('voucher.vouchers')}</TextView>
        }
      </View>
      
      <View style={ui.flexc}>
        <View style={ui.flex1}>
          { app.charge.paymentMethod
          ? <PaymentListV2
              payType={currentPayment}
              chargeBoxId={connectorInfo.chargeBoxId}
              onMethodChange={onPaymentMethodChanged}/>
          : <PaymentList
              payType={currentPayment}
              onMethodChange={onPaymentMethodChanged}/>
          }
        </View>
        { app.v3.vouchers &&
          <Pressable
            style={styles.voucherLayout}
            onPress={() => PagerUtil.toSelectVoucher(connectorInfo.chargeBoxId, connectorInfo.connectorId)}>
            <MaterialCommunityIcons
              name="ticket-percent"
              size={35}
              color={colorAccent}/>
            { utils.isNotEmpty(selectedVoucher.userVoucherId)
              ? <View style={styles.vouchersView}>
                  <TextView
                    style={styles.voucherName}
                    numberOfLines={1}>
                    {selectedVoucher.voucherName}
                  </TextView>
                  <TextView
                    style={styles.voucherDesc}
                    numberOfLines={1}>
                    {selectedVoucher.voucherDesc}
                  </TextView>
                </View>
              : <View style={styles.vouchersView}>
                  <TextView style={styles.selectText}>{$t("voucher.selectVoucher")}</TextView>
                </View>
              }
              <FontAwesome6
                name={"angle-right"}
                size={16}
                color={colorCancel}
              />
          </Pressable>
        }
      </View>
      
      <Button
        style={styles.buttonView}
        text={$t('charging.btnAuthenticate')}
        elevation={1.5}
        borderRadius={6}
        onClick={onAuthenticate}/>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  stepImage: {
    width: $vw(70),
    height: $vw(16),
    margin: 16
  },
  stepTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: colorAccent
  },
  stepDesc: {
    color: textPrimary,
    fontSize: 16,
    textAlign: 'center',
    ...$padding(0, 32, 48)
  },
  infoRow: {
    marginLeft: 16,
    marginBottom: 16,
    flexDirection: 'row'
  },
  infoCard: {
    flex: 1,
    paddingTop: 12,
    paddingBottom: 12,
    borderRadius: 10,
    marginRight: 16,
    overflow: 'hidden',
    alignItems: 'center',
    ...ElevationObject(5),
    backgroundColor: colorLight,
  },
  infoTitle: {
    color: textPrimary,
    fontSize: 12,
    paddingTop: 1
  },
  infoText: {
    color: textPrimary,
    fontSize: 15,
    textAlign: 'center',
    fontWeight: 'bold',
    ...$padding(12, 6)
  },
  infoDesc: {
    color: textPrimary,
    fontSize: 12,
    marginTop: -12,
    paddingBottom: 8
  },
  infoStatus: {
    fontSize: 16,
    fontWeight: 'bold',
    ...$padding(16, 8)
  },
  label: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingBottom: 8
  },
  buttonView: {
    marginTop: 8,
    marginBottom: 16
  },
  voucherLayout: {
    flex: 1,
    padding: 12,
    maxWidth: $vw(50) - 24,
    borderRadius: 10,
    marginLeft: 16,
    marginBottom: 12,
    alignItems: 'center',
    flexDirection: 'row',
    ...ElevationObject(5),
    backgroundColor: colorLight,
  },
  vouchersView: {
    flex: 1,
    paddingLeft: 8,
    flexWrap: 'wrap',
    alignItems: 'center',
    flexDirection: 'row'
  },
  selectText: {
    flex: 1,
    color: textSecondary,
    fontSize: 15,
    fontWeight: 'bold'
  },
  voucherName: {
    color: textPrimary,
    fontSize: 15,
    paddingLeft: 8,
    fontWeight: 'bold'
  },
  voucherDesc: {
    color: textSecondary,
    fontSize: 12,
    paddingLeft: 8,
    paddingRight: 16
  }
})