autodisol/components/VehicleInformation.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

var _AirlineSeatReclineNormal = _interopRequireDefault(require("@material-ui/icons/AirlineSeatReclineNormal"));

var _CalendarToday = _interopRequireDefault(require("@material-ui/icons/CalendarToday"));

var _ColorLens = _interopRequireDefault(require("@material-ui/icons/ColorLens"));

var _DirectionsCar = _interopRequireDefault(require("@material-ui/icons/DirectionsCar"));

var _EuroSymbol = _interopRequireDefault(require("@material-ui/icons/EuroSymbol"));

var _EvStation = _interopRequireDefault(require("@material-ui/icons/EvStation"));

var _Fingerprint = _interopRequireDefault(require("@material-ui/icons/Fingerprint"));

var _LocalActivity = _interopRequireDefault(require("@material-ui/icons/LocalActivity"));

var _LocalShipping = _interopRequireDefault(require("@material-ui/icons/LocalShipping"));

var _Receipt = _interopRequireDefault(require("@material-ui/icons/Receipt"));

var _Schedule = _interopRequireDefault(require("@material-ui/icons/Schedule"));

var _moment = _interopRequireDefault(require("moment"));

var _numeral = _interopRequireDefault(require("numeral"));

var _gearboxIconInline = _interopRequireDefault(require("./assets/gearboxIcon.inline.svg"));

var _mileageIconInline = _interopRequireDefault(require("./assets/mileageIcon.inline.svg"));

var _leafIconInline = _interopRequireDefault(require("./assets/leafIcon.inline.svg"));

var _i18n = require("../i18n");

var _propTypes = _interopRequireDefault(require("prop-types"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var translations = {
  VP: {
    fr: 'Véhicule particulier',
    en: 'Particular vehicle',
    es: 'Vehículo privado'
  },
  VU: {
    fr: 'Véhicule utilitaire',
    en: 'Commercial vehicle',
    es: 'Vehículo utilitario'
  },
  VASP: {
    fr: 'Véhicule automoteur spécialisé',
    en: 'Specialized motor vehicle',
    es: 'Vehiculo especializado'
  },
  EL: {
    fr: 'Electrique',
    en: 'Electric',
    es: 'Electrico'
  },
  ET: {
    fr: 'Ethanol',
    en: 'Ethanol',
    es: 'Etanol'
  },
  GO: {
    fr: 'Diesel',
    en: 'Diesel',
    es: 'Diesel'
  },
  GH: {
    fr: 'Hybride Diesel',
    en: 'Diesel Hybrid',
    es: 'Híbrido diesel'
  },
  GF: {
    fr: 'Diesel GPL',
    en: 'Diesel LGP',
    es: 'Diesel GLP'
  },
  H2: {
    fr: 'Hydrogène',
    en: 'Hydrogen',
    es: 'Hidrógeno'
  },
  LPG: {
    fr: 'GPL',
    en: 'LGP',
    es: 'GLP'
  },
  GN: {
    fr: 'Gaz naturel',
    en: 'Natural gas',
    es: 'Gas natural'
  },
  ES: {
    fr: 'Essence',
    en: 'Gasoline',
    es: 'Gasolina'
  },
  EH: {
    fr: 'Hybride Essence',
    en: 'Gasoline hybrid',
    es: 'Híbrido gasolina'
  },
  EG: {
    fr: 'Essence GPL',
    en: 'Gasoline LPG',
    es: 'Gasolina GLP'
  },
  doors: {
    fr: 'portes',
    en: 'doors',
    es: 'puertas'
  },
  seats: {
    fr: 'places',
    en: 'seats',
    es: 'asientos'
  },
  releaseDate: {
    fr: 'Date M.E.C.',
    en: 'Release date',
    es: 'Fecha de puesta en circulación'
  },
  mileage: {
    fr: 'Kilométrage',
    en: 'Mileage',
    es: 'Kilometraje'
  },
  'delivery mileage': {
    fr: 'Km livraison',
    en: 'Delivery mileage',
    es: 'Kilometraje a la entrega'
  },
  'delivery date': {
    fr: 'Date de livraison',
    en: 'Delivery date',
    es: 'Fecha de entrega'
  },
  AT: {
    fr: 'Automatique',
    en: 'Automatic',
    es: 'Automática'
  },
  MT: {
    fr: 'Boite manuelle',
    en: 'Manual gearbox',
    es: 'Caja manual'
  },
  ST: {
    fr: 'Sequentielle',
    en: 'Sequential gearbox',
    es: 'Caja secuencial'
  },
  RT: {
    fr: 'Boîte de vitesses robotisée',
    en: 'Robotic gearbox',
    es: 'Caja de cambios robótica'
  },
  CVT: {
    fr: 'Boîte de vitesses CVT',
    en: 'CVT gearbox',
    es: 'Caja de cambios CVT'
  },
  NONE: {
    fr: '--',
    en: '--',
    es: '--'
  },
  'euro standard': {
    fr: 'Norme Euro',
    en: 'Euro standard',
    es: 'Norma Euro'
  },
  'first sell price': {
    fr: 'Prix neuf',
    en: 'First sell price',
    es: 'Nueavo precio'
  },
  NATCode: {
    fr: 'NATCode',
    en: 'NATCode',
    es: 'NATCode'
  },
  VIN: {
    fr: 'V.I.N.',
    en: 'V.I.N.',
    es: 'V.I.N.'
  },
  'last registration date': {
    fr: 'Date certif. immat.',
    en: 'Registration certificate date',
    es: 'Fecha de certificado de matriculación'
  },
  SALOON: {
    fr: 'Berline',
    en: 'Saloon',
    es: 'Sedán'
  },
  SEDAN: {
    fr: 'Berline',
    en: 'Saloon',
    es: 'Sedán'
  },
  COMMERCIAL: {
    fr: 'Véhicule utilitaire',
    en: 'Commercial vehicle',
    es: 'Vehículo utilitario'
  },
  COUPE: {
    fr: 'Coupé',
    en: 'Coupe',
    es: 'Cupé'
  },
  CONVERTIBLE: {
    fr: 'Cabriolet',
    en: 'Convertible',
    es: 'Descapotable'
  },
  PICKUP: {
    fr: 'Pick-up,',
    en: 'Pickup,',
    es: 'Camioneta,'
  },
  BUS: {
    fr: 'Bus',
    en: 'Bus',
    es: 'Bus'
  },
  TRUCK: {
    fr: 'Camion',
    en: 'Truck',
    es: 'Camión'
  },
  MINIBUS: {
    fr: 'Minibus',
    en: 'Minibus',
    es: 'Microbús'
  },
  BREAK: {
    fr: 'Break',
    en: 'Break',
    es: 'Break'
  },
  MPV: {
    fr: 'Multi-usages',
    en: 'Multipurpose',
    es: 'Multipropósito'
  },
  ALLROAD: {
    fr: 'Tout-terrain',
    en: 'All road',
    es: 'Todoterreno'
  },
  CTTE: {
    fr: 'Camionnette',
    en: 'Van',
    es: 'Furgoneta'
  },
  UNKNOWN: {
    fr: 'Carrosserie inconnue',
    en: 'Unknown body',
    es: 'Carrocería desconocida'
  }
};
var allInformation = [{
  key: 'releaseDate',
  icon: function icon() {
    return _react["default"].createElement(_CalendarToday["default"], {
      fontSize: "small"
    });
  },
  vehicleInfo: function vehicleInfo(_ref) {
    var releaseDate = _ref.releaseDate,
        translate = _ref.translate;
    var formattedDate = "".concat(releaseDate ? (0, _moment["default"])(releaseDate).format('DD/MM/YYYY') : '--');
    return "".concat(translate('releaseDate'), " : ").concat(formattedDate);
  }
}, {
  key: 'mileage',
  icon: function icon(_ref2) {
    var rest = _extends({}, _ref2);

    return _react["default"].createElement(_mileageIconInline["default"], _extends({
      fontSize: "small"
    }, rest));
  },
  vehicleInfo: function vehicleInfo(_ref3) {
    var currentKm = _ref3.currentKm,
        translate = _ref3.translate;
    var formattedMileage = "".concat(currentKm ? "".concat((0, _numeral["default"])(currentKm).format(), " km") : '--');
    return "".concat(translate('mileage'), " : ").concat(formattedMileage);
  }
}, {
  key: 'deliveryMileage',
  icon: function icon() {
    return _react["default"].createElement(_LocalShipping["default"], {
      fontSize: "small"
    });
  },
  vehicleInfo: function vehicleInfo(_ref4) {
    var deliveryKm = _ref4.deliveryKm,
        translate = _ref4.translate;
    var formattedMileage = "".concat(deliveryKm ? "".concat((0, _numeral["default"])(deliveryKm).format(), " km") : '--');
    return "".concat(translate('delivery mileage'), " : ").concat(formattedMileage);
  }
}, {
  key: 'deliveryDate',
  icon: function icon() {
    return _react["default"].createElement(_Schedule["default"], {
      fontSize: "small"
    });
  },
  vehicleInfo: function vehicleInfo(_ref5) {
    var deliveryDate = _ref5.deliveryDate,
        translate = _ref5.translate;
    var formattedDate = "".concat(deliveryDate ? (0, _moment["default"])(deliveryDate).format('DD/MM/YYYY') : '--');
    return "".concat(translate('delivery date'), " : ").concat(formattedDate);
  }
}, {
  key: 'energy',
  icon: function icon() {
    return _react["default"].createElement(_EvStation["default"], {
      fontSize: "small"
    });
  },
  vehicleInfo: function vehicleInfo(_ref6) {
    var energy = _ref6.energy,
        taxPower = _ref6.taxPower,
        kwPower = _ref6.kwPower,
        translate = _ref6.translate;
    var formattedEnergy = energy ? translate(energy) : '--';
    var formattedKwPower = kwPower ? "".concat(kwPower, " kw") : '--';
    var formattedTaxPower = taxPower ? "".concat(taxPower, " CV") : '--';
    return "".concat(formattedEnergy, " / ").concat(formattedKwPower, " / ").concat(formattedTaxPower);
  }
}, {
  key: 'body',
  icon: function icon() {
    return _react["default"].createElement(_DirectionsCar["default"], {
      fontSize: "small"
    });
  },
  vehicleInfo: function vehicleInfo(_ref7) {
    var body = _ref7.body,
        type = _ref7.type,
        translate = _ref7.translate;
    return "".concat(body ? translate(body) : '--', " / ").concat(type ? translate(type) : '--');
  }
}, {
  key: 'doorsAndSeats',
  icon: function icon() {
    return _react["default"].createElement(_AirlineSeatReclineNormal["default"], {
      fontSize: "small"
    });
  },
  vehicleInfo: function vehicleInfo(_ref8) {
    var doors = _ref8.doors,
        seats = _ref8.seats,
        translate = _ref8.translate;
    var formattedDoors = doors ? "".concat(doors, " ").concat(translate('doors')) : '--';
    var formattedSeats = seats ? "".concat(seats, " ").concat(translate('seats')) : '--';
    return "".concat(formattedDoors, " / ").concat(formattedSeats);
  }
}, {
  key: 'gears',
  icon: function icon() {
    return _react["default"].createElement(_gearboxIconInline["default"], null);
  },
  vehicleInfo: function vehicleInfo(_ref9) {
    var gearbox = _ref9.gearbox,
        hpPower = _ref9.hpPower,
        translate = _ref9.translate;
    var formattedHpPower = "".concat(hpPower ? "".concat(hpPower, " ch") : '--');
    var formattedGearbox = gearbox ? translate(gearbox) : '--';
    return "".concat(formattedHpPower, " / ").concat(formattedGearbox);
  }
}, {
  key: 'co2',
  icon: function icon() {
    return _react["default"].createElement(_leafIconInline["default"], {
      fontSize: "small"
    });
  },
  vehicleInfo: function vehicleInfo(_ref10) {
    var co2 = _ref10.co2,
        euroStandard = _ref10.euroStandard,
        translate = _ref10.translate;
    var formattedCo2 = "".concat(co2 ? "".concat(co2, " g/Km") : '--');
    var formattedEuroStandard = "".concat(translate('euro standard'), " : ").concat(euroStandard || '--');
    return "".concat(formattedCo2, " / ").concat(formattedEuroStandard);
  }
}, {
  key: 'lastRegDate',
  icon: function icon() {
    return _react["default"].createElement(_Receipt["default"], {
      fontSize: "small"
    });
  },
  vehicleInfo: function vehicleInfo(_ref11) {
    var lastRegDate = _ref11.lastRegDate,
        translate = _ref11.translate;
    var formattedDate = "".concat(lastRegDate ? (0, _moment["default"])(lastRegDate).format('DD/MM/YYYY') : '--');
    return "".concat(translate('last registration date'), " : ").concat(formattedDate);
  }
}, {
  key: 'color',
  icon: function icon() {
    return _react["default"].createElement(_ColorLens["default"], {
      fontSize: "small"
    });
  },
  vehicleInfo: function vehicleInfo(_ref12) {
    var color = _ref12.color;
    return color || '--';
  }
}, {
  key: 'vin',
  icon: function icon() {
    return _react["default"].createElement(_Fingerprint["default"], {
      fontSize: "small"
    });
  },
  vehicleInfo: function vehicleInfo(_ref13) {
    var vin = _ref13.vin,
        translate = _ref13.translate;
    return "".concat(translate('VIN'), " : ").concat(vin || '--');
  }
}, {
  key: 'firstSellPrice',
  icon: function icon() {
    return _react["default"].createElement(_EuroSymbol["default"], {
      fontSize: "small"
    });
  },
  vehicleInfo: function vehicleInfo(_ref14) {
    var firstSellPrice = _ref14.firstSellPrice,
        translate = _ref14.translate;
    var formattedPrice = "".concat(translate('first sell price'), " : ").concat(firstSellPrice ? (0, _numeral["default"])(firstSellPrice).format() : '--', " \u20AC");
    return "".concat(formattedPrice);
  }
}, {
  key: 'natcode',
  icon: function icon() {
    return _react["default"].createElement(_LocalActivity["default"], {
      fontSize: "small"
    });
  },
  vehicleInfo: function vehicleInfo(_ref15) {
    var catalogId = _ref15.catalogId,
        translate = _ref15.translate;
    return "".concat(translate('NATCode'), " : ").concat(catalogId || '--');
  }
}];
var configLanguage = (0, _i18n.getLanguage)(); // One can use "exclude" and "only" parameters (Array<string>) to choose which fields are displayed
// and "important" parameter to choose which fields are set highlighted
// Possible keys of these three parameters are :
// body | energy | doorsAndSeats | releaseDate | mileage | deliveryMileage | deliveryDate ...
// ... gears | co2 | firstSellPrice | natcode | color | vin

var VehicleInformationJSX = function VehicleInformationJSX(_ref16) {
  var css = _ref16.classes,
      storyLanguage = _ref16.storyLanguage,
      exclude = _ref16.exclude,
      only = _ref16.only,
      important = _ref16.important,
      className = _ref16.className,
      style = _ref16.style,
      rest = _objectWithoutProperties(_ref16, ["classes", "storyLanguage", "exclude", "only", "important", "className", "style"]);

  var translate = function translate(key) {
    var _storyLanguage;

    return (0, _i18n.getTranslation)(translations, (_storyLanguage = storyLanguage) !== null && _storyLanguage !== void 0 ? _storyLanguage : configLanguage, key);
  };

  var filteredInformation = allInformation;

  if (exclude && (exclude === null || exclude === void 0 ? void 0 : exclude.length) > 0) {
    filteredInformation = allInformation.filter(function (_ref17) {
      var key = _ref17.key;
      return !exclude.includes(key);
    });
  }

  if (only && (only === null || only === void 0 ? void 0 : only.length) > 0) {
    filteredInformation = allInformation.filter(function (_ref18) {
      var key = _ref18.key;
      return only.includes(key);
    });
  }

  return _react["default"].createElement(_Grid["default"], _extends({
    item: true
  }, {
    className: className,
    style: style
  }), filteredInformation.map(function (_ref19) {
    var key = _ref19.key,
        Icon = _ref19.icon,
        VehicleInfo = _ref19.vehicleInfo;
    return _react["default"].createElement(_Typography["default"], _extends({
      variant: "body1",
      style: {
        display: 'flex',
        alignItems: 'center'
      },
      className: important && important.includes(key) ? css.important : ''
    }, {
      key: key
    }), _react["default"].createElement("span", {
      className: css.icon
    }, _react["default"].createElement(Icon, {
      className: css.greyIcon
    })), _react["default"].createElement(VehicleInfo, _extends({
      translate: translate
    }, rest)));
  }));
};

VehicleInformationJSX.propTypes = {
  classes: _propTypes["default"].object.isRequired,
  storyLanguage: _propTypes["default"].string,
  exclude: _propTypes["default"].arrayOf(_propTypes["default"].string.isRequired),
  only: _propTypes["default"].arrayOf(_propTypes["default"].string.isRequired),
  important: _propTypes["default"].arrayOf(_propTypes["default"].string.isRequired),
  className: _propTypes["default"].string,
  style: _propTypes["default"].object
};
var VehicleInformation = (0, _withStyles["default"])(function (theme) {
  return {
    icon: {
      marginRight: '1rem',
      display: 'inline-flex',
      '& svg': {
        width: '1rem',
        height: '1rem',
        fill: theme.palette.secondary.dark
      }
    },
    greyIcon: {
      '& path': {
        stroke: theme.palette.secondary.dark
      }
    },
    important: {
      fontWeight: 900,
      fontSize: '1.125rem',
      margin: '4px 0'
    }
  };
})(VehicleInformationJSX);
var _default = VehicleInformation;
exports["default"] = _default;