ChargEco/Strides-APP/app/pages/chargingV3/ConnectorInfo.js

import React from 'react';
import { StyleSheet, View } from 'react-native';
import DiscountView from './DiscountView';
import TextView from '../../components/TextView';
import { ChargeStyle } from '../chargeV2/Charging';
import app from '../../../app.json';
import utils from '../../utils/utils';

export default ConnectorInfo = ({
  isCharging=false,
  connectorInfo={}
}) => {
  return (
    isCharging
    ? <View>
        <View style={styles.infoRow}>
          <View style={styles.infoCard}>
            <TextView style={styles.infoTitle}>{$t('charging.labelTimeElapsed')}</TextView>
            <TextView
              numberOfLines={1}
              ellipsizeMode="tail"
              style={styles.infoText}>{utils.minutes2HHMM(connectorInfo?.timeElapsed ?? 0)}</TextView>
            <TextView style={styles.infoDesc}></TextView>
          </View>
          <View style={styles.infoCard}>
            <TextView style={styles.infoTitle}>{$t('charging.labelTotalkWh')}</TextView>
            <TextView
              numberOfLines={1}
              ellipsizeMode="tail"
              style={styles.infoText}>{connectorInfo.totalKWhDelivered || "0"} kWh</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>
            <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.labelTotalCharges')}</TextView>
            <TextView
              numberOfLines={2}
              ellipsizeMode="tail"
              style={styles.infoText}>{connectorInfo.totalCharges || "S$ 0.0"}</TextView>
            {(app.modules.nationally && connectorInfo.totalCharges != connectorInfo.userTotalCharges) && (
              <TextView
                numberOfLines={1}
                ellipsizeMode="tail"
                style={styles.infoDesc}>({connectorInfo.userTotalCharges || "S$ 0.0"})</TextView>)
            }
          </View>
        </View>
      </View>
    : <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 || "AC"}</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')*/}
            {connectorInfo.status}
          </TextView>
        </View>
      </View>
    </View>
)}

const styles = StyleSheet.create({
  infoRow: {
    marginLeft: 24,
    marginBottom: 24,
    flexDirection: 'row'
  },
  infoCard: {
    flex: 1,
    paddingTop: 12,
    paddingBottom: 12,
    borderRadius: 10,
    marginRight: 32,
    overflow: 'hidden',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: textCancel,
    //...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)
  }
})