Source: screens/dashboard/bank/forTermination.js

import React from 'react';
import { StyleSheet, View } from 'react-native';

import { dateFormat, findProductName } from '../../../utils/dashboard/dashboard';

import ColoredLabel from '../../../components/ColoredLabel';

/**
 * Component for dashboard showing orders that has a termination date.
 * @param {properties} props Component properties.
 * 
 * @memberof module:Components
 * @component
 * @example
 * <ForTermination
 *  deposit={{
      "expire": 2021-01-12T00:00:00.000Z,
      "productId": "3",
      "type": "FIXED",
      "volume": 15,
    }}
 *  date={new Date(2021-01-12T00:00:00.000Z)}
 *  ftKey={unqiue identifier}
 * />
 */
const ForTermination = props => {
  const { deposit, date, ftKey } = props;

  return (
    <View key={ftKey} style={styles.wrapper}>
      <ColoredLabel
        containerStyle={styles.date}
        textStyle={styles.dateText}
        labelText={dateFormat(date)}
      />
      <ColoredLabel
        containerStyle={styles.product}
        textStyle={styles.productText}
        labelText={findProductName(deposit.productId)}
      />
      <ColoredLabel
        containerStyle={styles.volume}
        textStyle={styles.volumeText}
        labelText={`${deposit.volume} mill.`}
      />
    </View>
  );
};

const primaryText = 'MuseoSansRounded-700';
const primaryTextBold = 'MuseoSansRounded-900';

const styles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
    marginTop: 20,
    justifyContent: 'space-around'
  },
  date: {
    width: 82,
    backgroundColor: '#FF6666',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 5,
    borderRadius: 5
  },
  dateText: {
    textAlign: 'center',
    fontFamily: primaryText
  },
  product: {
    borderRadius: 5,
    width: 60,
    backgroundColor: '#EEEEEE',
    alignContent: 'center',
    padding: 5
  },
  productText: {
    textAlign: 'center',
    fontFamily: primaryText
  },
  volume: {
    width: 60,
    backgroundColor: '#EBFFC8',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 5,
    borderRadius: 5
  },
  volumeText: {
    textAlign: 'center',
    color: '#00894B',
    fontFamily: primaryText
  }
});

export default ForTermination;