@krowdy-ui/views/esm/JobDetail/JobDetail.js

React components that implement Google's Material Design.

import _typeof from "@babel/runtime/helpers/esm/typeof";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _excluded = ["children"];
import React from 'react';
import PropTypes from 'prop-types';
import XDate from 'xdate';
import { Typography, Button, Grid, Divider, List, ListItem, ListItemText, Chip, Paper, ListItemAvatar, Avatar } from '@krowdy-ui/core';
import BusinessIcon from '@material-ui/icons/Business';
import { withStyles } from '@krowdy-ui/styles';
import clsx from 'clsx';
import keyBy from '../utils/keyBy';
import { AccessTimeThin as AccessTimeThinIcon, AddCircleOutlinedThin as AddCircleOutlinedThinIcon, ComputerThin as ComputerThinIcon, DressHookThin as DressHookIcon, DriveEtaOutlinedThin as DriveEtaOutlinedThinIcon, EmojiPeopleOutlinedThin as EmojiPeopleOutlinedThinIcon, LanguageThin as LanguageThinIcon, PayrollThin as PayrollThinIcon, PetsOutlinedThin as PetsOutlinedThinIcon, TrainingThin as TrainingThinIcon } from '@krowdy-ui/icons';
export var styles = function styles(theme) {
  var _contentJobDetail, _defaultBtnPostular, _titleJob;

  return {
    avatar: {
      backgroundColor: 'transparent',
      color: theme.palette.secondary[200],
      height: 26,
      width: 26
    },
    benefitList: _defineProperty({
      display: 'grid',
      gap: theme.spacing(1),
      gridTemplateColumns: '1fr'
    }, theme.breakpoints.up('sm'), {
      gridTemplateColumns: '1fr 1fr'
    }),
    btnPostular: {},
    chips: {
      '&:nth-last-child(1)': {
        marginRight: 0
      },
      margin: '5px 5px 5px 0',
      maxWidth: '100%'
    },
    contentCompany: _defineProperty({
      '& > a': {
        marginLeft: theme.spacing(1)
      },
      alignItems: 'flex-end',
      display: 'flex'
    }, theme.breakpoints.down('xs'), {
      alignItems: 'center'
    }),
    contentCompanyLogo: {
      '& > img': {
        display: 'block',
        width: '100%'
      },
      alignItems: 'center',
      backgroundColor: theme.palette.secondary[10] || '#F2F4F7',
      border: '1px solid rgb(234, 234, 234)',
      borderRadius: 6,
      display: 'flex',
      height: 47,
      justifyContent: 'center',
      width: 47
    },
    contentJobDetail: (_contentJobDetail = {
      '& > *': {
        margin: theme.spacing(2, 0)
      }
    }, _defineProperty(_contentJobDetail, theme.breakpoints.down('xs'), {
      marginLeft: theme.spacing(2),
      marginRight: theme.spacing(2),
      paddingBottom: theme.spacing(5)
    }), _defineProperty(_contentJobDetail, "backgroundColor", 'white'), _defineProperty(_contentJobDetail, "margin", theme.spacing(0, 5)), _defineProperty(_contentJobDetail, "padding", theme.spacing(1.5)), _defineProperty(_contentJobDetail, "width", '100%'), _contentJobDetail),
    contentOptions: {
      '& > div': {
        alignItems: 'center',
        color: theme.palette.primary.main,
        display: 'flex'
      },
      display: 'flex',
      flexWrap: 'wrap'
    },
    contentTitle: {
      display: 'flex'
    },
    custom: {
      backgroundColor: 'white',
      bottom: 0,
      display: 'none',
      flex: '1 1 0',
      left: 0,
      position: 'fixed',
      right: 0,
      width: '100%',
      zIndex: 1
    },
    defaultBtnPostular: (_defaultBtnPostular = {}, _defineProperty(_defaultBtnPostular, theme.breakpoints.down('xs'), {
      backgroundColor: 'white',
      bottom: 0,
      flex: '1 1 0',
      left: 0,
      padding: theme.spacing(2),
      position: 'fixed',
      right: 0,
      width: '100%',
      zIndex: 1
    }), _defineProperty(_defaultBtnPostular, '& button', _defineProperty({}, theme.breakpoints.down('xs'), {
      width: '100%'
    })), _defineProperty(_defaultBtnPostular, "alignItems", 'flex-end'), _defineProperty(_defaultBtnPostular, "display", 'flex'), _defineProperty(_defaultBtnPostular, "flex", '1 0 1'), _defineProperty(_defaultBtnPostular, "flexDirection", 'column'), _defaultBtnPostular),
    descriptionEmpty: {
      '& > img': {
        maxWidth: '100%'
      },
      alignItems: 'center',
      display: 'flex',
      flexDirection: 'column'
    },
    fixedCard: _defineProperty({}, theme.breakpoints.down('xs'), {
      '& $custom': {
        display: 'block'
      },
      '& $defaultBtnPostular': {
        display: 'none'
      }
    }),
    gridDescription: {
      '@media (min-width: 767px)': {
        marginTop: theme.spacing(7.5)
      },
      marginTop: theme.spacing(3.5)
    },
    headerJob: _defineProperty({
      display: 'flex',
      flexDirection: 'column'
    }, theme.breakpoints.up('sm'), {
      flexDirection: 'row'
    }),
    headerLeft: {
      flex: '1'
    },
    iconCompany: {
      // color: '#595959'
      color: theme.palette.secondary[200] || '#99A9C2'
    },
    iconDetail: {
      marginRight: theme.spacing(1)
    },
    itemList: {
      '& > div': {
        fontWeight: 'normal',
        wordBreak: 'break-word'
      },
      display: 'list-item',
      fontSize: '.8rem',
      fontWeight: 'bold',
      padding: theme.spacing(.75),
      wordBreak: 'break-word'
    },
    itemOptions: {
      marginRight: theme.spacing(2.5),
      marginTop: theme.spacing(1)
    },
    list: {
      display: 'block',
      listStyleType: 'disc',
      margin: 0,
      paddingLeft: theme.spacing(5)
    },
    listCompetitions: {
      display: 'list-item',
      fontSize: '.8rem',
      fontWeight: 'normal',
      padding: theme.spacing(.75),
      wordBreak: 'break-word'
    },
    listItem: {
      border: "1px solid ".concat(theme.palette.secondary[50]),
      borderRadius: theme.shape.borderRadius,
      padding: theme.spacing(1.5)
    },
    listItemAvatar: {
      minWidth: 36
    },
    sectionInformation: {
      margin: theme.spacing(5, 0)
    },
    seeMoreCompany: {
      color: theme.palette.primary.main,
      cursor: 'pointer',
      fontSize: '.8rem',
      marginLeft: theme.spacing(1.25)
    },
    subTitle: {
      color: theme.palette.grey[600],
      fontSize: 10,
      marginTop: theme.spacing(1),
      textAlign: 'center',
      width: 145
    },
    svgIcon: {
      color: theme.palette.secondary[200]
    },
    textDescription: {
      fontSize: '.8rem',
      marginTop: theme.spacing(1.5),
      wordBreak: 'break-word'
    },
    textDetail: {
      fontSize: '.8rem'
    },
    textEndJob: {
      fontSize: 12,
      marginTop: theme.spacing(.5),
      paddingRight: theme.spacing(.5)
    },
    titleCompany: {
      '&.no-visible': {
        fontSize: '1rem'
      },
      fontSize: '1.4rem',
      fontWeight: 'bold',
      lineHeight: 1,
      marginLeft: theme.spacing(1)
    },
    titleJob: (_titleJob = {
      // '&:first-letter': {
      //   textTransform: 'uppercase'
      // },
      fontSize: '2.5rem'
    }, _defineProperty(_titleJob, theme.breakpoints.down('xs'), {
      fontSize: 44
    }), _defineProperty(_titleJob, "wordBreak", 'break-word'), _titleJob),
    titleSection: {
      fontSize: '1.2rem'
    }
  };
};

var Div = function Div(_ref) {
  var children = _ref.children,
      props = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement("div", props, children);
};

var _ref5 = /*#__PURE__*/React.createElement(Divider, null);

var _ref7 = /*#__PURE__*/React.createElement("img", {
  alt: "without-description",
  src: "//s3.amazonaws.com/cdn.krowdy.com/media/images/empty-job.png"
});

var _ref8 = /*#__PURE__*/React.createElement(Typography, {
  align: "center",
  color: "info",
  variant: "body3"
}, "Sin descripci\xF3n");

var _ref9 = /*#__PURE__*/React.createElement(Divider, null);

var _ref10 = /*#__PURE__*/React.createElement(Divider, null);

var JobDetail = function JobDetail(props) {
  var hiddenButton = props.hiddenButton,
      jobId = props.jobId,
      classes = props.classes,
      title = props.title,
      _props$competencies = props.competencies,
      competencies = _props$competencies === void 0 ? [] : _props$competencies,
      closed = props.closed,
      description = props.description,
      basicEdition = props.basicEdition,
      _props$benefits = props.benefits,
      benefits = _props$benefits === void 0 ? [] : _props$benefits,
      _props$userInJob = props.userInJob,
      userInJob = _props$userInJob === void 0 ? false : _props$userInJob,
      _props$company = props.company,
      company = _props$company === void 0 ? {} : _props$company,
      _props$detailJob = props.detailJob,
      detailJob = _props$detailJob === void 0 ? [] : _props$detailJob,
      expirationDate = props.expirationDate,
      _props$disabledPerson = props.disabledPerson;
  _props$disabledPerson = _props$disabledPerson === void 0 ? {} : _props$disabledPerson;
  var visibleDisabled = _props$disabledPerson.visible,
      acceptedDisabled = _props$disabledPerson.accepted,
      _props$requirements = props.requirements,
      requirements = _props$requirements === void 0 ? [] : _props$requirements,
      _props$onClickPostula = props.onClickPostulation,
      onClickPostulation = _props$onClickPostula === void 0 ? function () {} : _props$onClickPostula,
      onViewCompany = props.onViewCompany,
      _props$visibleInforma = props.visibleInformation,
      visibleInformation = _props$visibleInforma === void 0 ? false : _props$visibleInforma,
      variant = props.variant,
      fixedCard = props.fixedCard,
      fixedCardCustomComponent = props.fixedCardCustomComponent,
      _props$fixedCardCusto = props.fixedCardCustomStyle,
      fixedCardCustomStyle = _props$fixedCardCusto === void 0 ? {} : _props$fixedCardCusto,
      customTitleButton = props.customTitleButton,
      subTitle = props.subTitle,
      isPreview = props.isPreview,
      hiddenHeaderJob = props.hiddenHeaderJob;

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      imageFailed = _React$useState2[0],
      setImageFailed = _React$useState2[1];

  React.useEffect(function () {
    setImageFailed(false);
  }, [jobId]);
  var timeToDown, isFinalized;

  if (expirationDate) {
    var expDate = new XDate(expirationDate); // DEVUELVE 2019-12-29 10:38:20

    var expDateFormat = new XDate(expDate.getFullYear(), expDate.getMonth(), expDate.getDate()); // DEVUELVE 2019-12-29

    var today = new XDate(); // DEVUELVE 2019-12-30 10:38:20

    var todayFormat = new XDate(today.getFullYear(), today.getMonth(), today.getDate()); // DEVUELVE 2019-12-30

    timeToDown = todayFormat.diffDays(expDateFormat);
    isFinalized = expirationDate ? new XDate().getTime() >= new XDate(Number(expirationDate)).getTime() : false;
  }

  var renderItemRequirement = function renderItemRequirement(requirement) {
    switch (requirement.title.toLowerCase()) {
      case 'carreras':
        return requirement.value.map(function (career, indexCareer) {
          return /*#__PURE__*/React.createElement(Chip // className={classes.requirementsChip}
          , {
            className: classes.chips,
            color: "primary",
            key: "career-".concat(indexCareer),
            label: career,
            size: "small",
            variant: "outlined"
          });
        });

      case 'idioma':
        return requirement.value.map(function (idioma, indexIdioma) {
          return /*#__PURE__*/React.createElement(Typography // className={classes.requirementsSubtitle}
          // component='span'
          , {
            key: "idioma-".concat(indexIdioma)
          }, idioma);
        });

      default:
        return requirement.value;
    }
  };

  var handleErrorImage = function handleErrorImage() {
    setImageFailed(true);
  };

  var CustomComponent = React.useMemo(function () {
    return fixedCardCustomComponent ? fixedCardCustomComponent : 'div';
  }, [fixedCardCustomComponent]);
  var iconByTitle = React.useMemo(function () {
    return keyBy([{
      icon: /*#__PURE__*/React.createElement(LanguageThinIcon, {
        className: classes.svgIcon
      }),
      title: 'Trabajo remoto'
    }, {
      icon: /*#__PURE__*/React.createElement(PayrollThinIcon, {
        className: classes.svgIcon
      }),
      title: 'Planilla'
    }, {
      icon: /*#__PURE__*/React.createElement(AddCircleOutlinedThinIcon, {
        className: classes.svgIcon
      }),
      title: 'Seguro de Salud'
    }, {
      icon: /*#__PURE__*/React.createElement(AccessTimeThinIcon, {
        className: classes.svgIcon
      }),
      title: 'Horario flexible'
    }, {
      icon: /*#__PURE__*/React.createElement(ComputerThinIcon, {
        className: classes.svgIcon
      }),
      title: 'Computadora'
    }, {
      icon: /*#__PURE__*/React.createElement(TrainingThinIcon, {
        className: classes.svgIcon
      }),
      title: 'Capacitaciones'
    }, {
      icon: /*#__PURE__*/React.createElement(DressHookIcon, {
        className: classes.svgIcon
      }),
      title: 'Vestimenta informal'
    }, {
      icon: /*#__PURE__*/React.createElement(DriveEtaOutlinedThinIcon, {
        className: classes.svgIcon
      }),
      title: 'Estacionamiento'
    }, {
      icon: /*#__PURE__*/React.createElement(EmojiPeopleOutlinedThinIcon, {
        className: classes.svgIcon
      }),
      title: 'Actividades recreativas'
    }, {
      icon: /*#__PURE__*/React.createElement(PetsOutlinedThinIcon, {
        className: classes.svgIcon
      }),
      title: 'Empresa pet friendly'
    }], 'title');
  }, [classes.svgIcon]);
  var ContainerRoot = React.useMemo(function () {
    return isPreview ? Div : Paper;
  }, [isPreview]);
  var basicEditionFiltered = React.useMemo(function () {
    return !basicEdition ? null : basicEdition.filter(function (_ref2) {
      var visible = _ref2.visible,
          description = _ref2.description;
      return visible && description;
    });
  }, [basicEdition]);
  var filteredBenefits = React.useMemo(function () {
    return benefits.filter(function (_ref3) {
      var title = _ref3.title;
      return title;
    });
  }, [benefits]);
  return /*#__PURE__*/React.createElement(ContainerRoot, {
    className: classes.contentJobDetail,
    variant: variant
  }, !hiddenHeaderJob && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
    container: true
  }, /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: 12
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.headerJob
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.headerLeft
  }, /*#__PURE__*/React.createElement(Typography, {
    className: classes.titleJob,
    variant: "h1"
  }, title)), !isPreview ? /*#__PURE__*/React.createElement("div", {
    className: clsx(fixedCard && classes.fixedCard)
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.defaultBtnPostular
  }, !hiddenButton && /*#__PURE__*/React.createElement(Button, {
    color: "primary",
    disabled: isFinalized === undefined ? closed : isFinalized || closed,
    onClick: onClickPostulation,
    size: "large",
    variant: "contained"
  }, customTitleButton ? customTitleButton : closed || isFinalized ? 'Finalizado' : userInJob ? 'Ver postulación' : 'Postular'), subTitle ? /*#__PURE__*/React.createElement(Typography, {
    className: classes.subTitle
  }, subTitle) : null, isFinalized === undefined ? null : timeToDown > 0 && timeToDown <= 14 ? /*#__PURE__*/React.createElement(Typography, {
    className: classes.textEndJob,
    component: "span"
  }, "Finaliza ", "en ".concat(timeToDown, " d\xEDa").concat(timeToDown === 1 ? '' : 's'), ".") : timeToDown === 0 && !isFinalized ? /*#__PURE__*/React.createElement(Typography, {
    className: classes.textEndJob,
    variant: "subtitle2"
  }, "Finaliza hoy") : null), /*#__PURE__*/React.createElement(CustomComponent, {
    className: classes.custom,
    style: fixedCardCustomStyle
  }, fixedCard)) : null))), /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: 12
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.contentCompany
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.contentCompanyLogo
  }, company.company_logo && visibleInformation && !imageFailed ? /*#__PURE__*/React.createElement("img", {
    alt: "company logo",
    onError: handleErrorImage,
    src: company.company_logo
  }) : /*#__PURE__*/React.createElement(BusinessIcon, {
    className: classes.iconCompany
  })), !visibleInformation ? /*#__PURE__*/React.createElement(Typography, {
    className: "".concat(classes.titleCompany, " no-visible")
  }, "Confidencial") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
    className: classes.titleCompany
  }, company.company_name), onViewCompany && !isPreview ? /*#__PURE__*/React.createElement(Typography, {
    className: classes.seeMoreCompany,
    onClick: onViewCompany
  }, "Ver m\xE1s") : null))), description ? /*#__PURE__*/React.createElement(Grid, {
    item: true
  }, _typeof(description) === 'object' ? description : /*#__PURE__*/React.createElement(Typography, {
    className: classes.textDescription,
    component: "div",
    dangerouslySetInnerHTML: {
      __html: description
    },
    variant: "body3"
  })) : null, /*#__PURE__*/React.createElement(Grid, {
    className: classes.contentOptions,
    item: true,
    xs: 12
  }, detailJob.map(function (_ref4, index) {
    var icon = _ref4.icon,
        text = _ref4.text;
    return /*#__PURE__*/React.createElement("div", {
      className: classes.itemOptions,
      key: "option-".concat(index)
    }, /*#__PURE__*/React.createElement(Typography, {
      className: classes.iconDetail
    }, icon), /*#__PURE__*/React.createElement(Typography, {
      className: classes.textDetail,
      color: "body",
      variant: "h6"
    }, text));
  }))), filteredBenefits.length ? /*#__PURE__*/React.createElement(React.Fragment, null, !hiddenHeaderJob && _ref5, /*#__PURE__*/React.createElement("section", {
    className: classes.sectionInformation
  }, /*#__PURE__*/React.createElement(Typography, {
    className: classes.titleSection,
    variant: "h5"
  }, "Beneficios"), /*#__PURE__*/React.createElement(List, {
    className: classes.benefitList
  }, filteredBenefits.map(function (_ref6, index) {
    var title = _ref6.title;
    return /*#__PURE__*/React.createElement(ListItem, {
      className: classes.listItem,
      key: "benefit-".concat(index)
    }, /*#__PURE__*/React.createElement(ListItemAvatar, {
      className: classes.listItemAvatar
    }, /*#__PURE__*/React.createElement(Avatar, {
      className: classes.avatar
    }, iconByTitle[title] ? iconByTitle[title].icon : /*#__PURE__*/React.createElement(LanguageThinIcon, {
      className: classes.svgIcon
    }))), /*#__PURE__*/React.createElement(ListItemText, {
      primary: title,
      primaryTypographyProps: {
        variant: 'body2'
      }
    }));
  })))) : null, !basicEditionFiltered ? null : /*#__PURE__*/React.createElement(Grid, {
    className: classes.gridDescription,
    item: true,
    xs: 12
  }, basicEditionFiltered.length > 0 ? basicEditionFiltered.map(function (item, key) {
    return /*#__PURE__*/React.createElement("section", {
      className: classes.sectionInformation,
      key: "information-".concat(key)
    }, /*#__PURE__*/React.createElement(Typography, {
      className: classes.titleSection,
      variant: "h4"
    }, item.title), item.description ? /*#__PURE__*/React.createElement(Typography, {
      className: classes.textDescription,
      component: "div",
      dangerouslySetInnerHTML: {
        __html: item.description
      },
      variant: "body2"
    }) : null);
  }) : hiddenHeaderJob ? null : /*#__PURE__*/React.createElement("div", {
    className: classes.descriptionEmpty
  }, _ref7, _ref8)), competencies.length ? /*#__PURE__*/React.createElement(React.Fragment, null, _ref9, /*#__PURE__*/React.createElement("section", {
    className: classes.sectionInformation
  }, /*#__PURE__*/React.createElement(Typography, {
    className: classes.titleSection,
    variant: "h5"
  }, "Competencias"), /*#__PURE__*/React.createElement(List, {
    className: classes.list
  }, competencies.map(function (competency, index) {
    return /*#__PURE__*/React.createElement(ListItem, {
      className: classes.listCompetitions,
      key: "competency-".concat(index)
    }, competency.title);
  })))) : null, requirements.length || visibleDisabled ? /*#__PURE__*/React.createElement(React.Fragment, null, _ref10, /*#__PURE__*/React.createElement("section", {
    className: classes.sectionInformation
  }, /*#__PURE__*/React.createElement(Typography, {
    className: classes.titleSection,
    variant: "h5"
  }, "Requerimientos"), /*#__PURE__*/React.createElement(List, {
    className: classes.list
  }, requirements.map(function (requirement, index) {
    return /*#__PURE__*/React.createElement(ListItem, {
      className: classes.itemList,
      key: "requirement-".concat(index)
    }, requirement.title, /*#__PURE__*/React.createElement("div", null, renderItemRequirement(requirement)));
  }), visibleDisabled ? /*#__PURE__*/React.createElement(ListItem, {
    className: classes.itemList
  }, "Apto para discapacitados", /*#__PURE__*/React.createElement("div", null, acceptedDisabled ? 'Si' : 'No')) : null))) : null);
};

process.env.NODE_ENV !== "production" ? JobDetail.propTypes = {
  basicEdition: PropTypes.array,
  benefits: PropTypes.array,

  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css) below for more details.
   */
  classes: PropTypes.object,
  closed: PropTypes.bool,
  company: PropTypes.object,
  competencies: PropTypes.array,
  customTitleButton: PropTypes.string,
  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  // _id
  detailJob: PropTypes.array,
  disabledPerson: PropTypes.object,
  expirationDate: PropTypes.string,
  fixedCard: PropTypes.node,
  fixedCardCustomComponent: PropTypes.node,
  fixedCardCustomStyle: PropTypes.object,
  hiddenButton: PropTypes.bool,
  hiddenHeaderJob: PropTypes.bool,
  isPreview: PropTypes.bool,
  jobId: PropTypes.string,
  onClickPostulation: PropTypes.func,
  // status: PropTypes.string
  onViewCompany: PropTypes.func,
  requirements: PropTypes.array,
  subTitle: PropTypes.string,
  title: PropTypes.string,
  userInJob: PropTypes.bool,
  variant: PropTypes.string,
  visibleInformation: PropTypes.bool
} : void 0;
JobDetail.muiName = 'JobDetail';
export default withStyles(styles, {
  name: 'KrowdyJobDetail'
})(JobDetail);