1096 lines
48 KiB
JavaScript
1096 lines
48 KiB
JavaScript
import React, { Fragment } from 'react'
|
||
import { withStyles } from '@material-ui/core/styles';
|
||
import getConfig from 'next/config'
|
||
import Typography from '@material-ui/core/Typography';
|
||
import Button from '@material-ui/core/Button';
|
||
import Avatar from '@material-ui/core/Avatar';
|
||
import Chip from '@material-ui/core/Chip';
|
||
import KeyboardArrowleftIcon from '@material-ui/icons/PlayArrowRounded';
|
||
import IconText from '../atoms/IconText';
|
||
import IconTextInline from './../atoms/IconTextInline';
|
||
import SocialShare from './SocialShare';
|
||
import _ from "lodash/string";
|
||
import Ar from "lodash/array";
|
||
import Hidden from '@material-ui/core/Hidden';
|
||
import Link from 'next/link'
|
||
import { isWidthUp } from '@material-ui/core/withWidth'
|
||
import JobPosting from '../atoms/JobPosting'
|
||
import StickyBox from "react-sticky-box";
|
||
const styles = theme => ({
|
||
primary: {
|
||
color: theme.palette.primary.main,
|
||
},
|
||
root: {
|
||
position: 'relative',
|
||
textAlign: 'center',
|
||
paddingTop: theme.spacing(10),
|
||
justifyContent: 'center',
|
||
},
|
||
lien:{
|
||
textDecoration:'none'
|
||
},
|
||
container: {
|
||
padding: theme.spacing(0, 1),
|
||
[theme.breakpoints.up('md')]: {
|
||
padding: '0 5px',
|
||
},
|
||
},
|
||
headerContainer: {
|
||
display: 'flex',
|
||
alignItems: 'flex-start',
|
||
justifyContent: 'flex-start',
|
||
margin: theme.spacing(0, 0),
|
||
},
|
||
headerContainerMobile: {
|
||
display: 'inline',
|
||
// top : '-20px',
|
||
// marginLeft : '20px'
|
||
|
||
},
|
||
headerContainerDesktop: {
|
||
display: 'flex',
|
||
alignItems: 'flex-start',
|
||
justifyContent: 'space-between',
|
||
margin: theme.spacing(0, 0),
|
||
[theme.breakpoints.up('md')]: {
|
||
padding: '10px 5px',
|
||
},
|
||
'& button': {
|
||
marginRight: 0,
|
||
},
|
||
},
|
||
offerInfoContainer: {
|
||
display: 'flex',
|
||
},
|
||
buttonContainer: {
|
||
alignItems: 'right',
|
||
},
|
||
infoContainer: {
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
margin: theme.spacing(0, 1.5),
|
||
'& a': {
|
||
textDecoration: 'none',
|
||
color: theme.palette.primary.dark,
|
||
}
|
||
},
|
||
infoContainerMobile: {
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
padding: '20px',
|
||
'& a': {
|
||
textDecoration: 'none',
|
||
color: theme.palette.primary.dark,
|
||
}
|
||
},
|
||
logoContainer: {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
width: 60,
|
||
height: 60,
|
||
backgroundColor: 'white',
|
||
boxShadow: '0px 6px 15px rgba(30, 35, 39, 0.10)',
|
||
border: 'solid 5px white',
|
||
borderRadius: '5px',
|
||
|
||
},
|
||
IconTextContainer: {
|
||
// paddingTop: theme.spacing(1.5, 0),
|
||
// height: '100%',
|
||
},
|
||
IconTextContainerDesktop: {
|
||
display: '',
|
||
alignItems: 'center',
|
||
// justifyContent: 'flex-start',
|
||
width: '100%',
|
||
borderBottom: '1px solid #E8E8E9',
|
||
paddingBottom: '15px',
|
||
marginBottom: '10px'
|
||
},
|
||
IconTextContainerMobile: {
|
||
alignItems: 'center',
|
||
// justifyContent: 'flex-start',
|
||
|
||
borderTop: '1px solid #E8E8E9',
|
||
borderBottom: '1px solid #E8E8E9',
|
||
padding: '20px',
|
||
|
||
|
||
},
|
||
contentContainer: {
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'flex-start',
|
||
justifyContent: 'flex-start',
|
||
top:'40px',
|
||
margin: theme.spacing(0, 1),
|
||
},
|
||
contentContainerMobile: {
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'flex-start',
|
||
justifyContent: 'flex-start',
|
||
top:'100px',
|
||
paddingTop:'100px',
|
||
margin: theme.spacing(0, 1),
|
||
},
|
||
tagsContainer: {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
flexWrap: 'wrap',
|
||
width: '100%',
|
||
[theme.breakpoints.up('md')]: {
|
||
justifyContent: 'flex-start',
|
||
},
|
||
},
|
||
shareContainer: {
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignSelf: 'center',
|
||
textAlign:'center'
|
||
},
|
||
discoverContainerCompany: {
|
||
backgroundColor: theme.palette.background.grey,
|
||
paddingBottom: theme.spacing(2),
|
||
'& section': {
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: theme.palette.background.grey,
|
||
},
|
||
boxShadow: '0px 0px 0px rgba(30, 35, 39, 0.15)',
|
||
// transform: 'translateY(-0px)',
|
||
// transition: 'transform 0.25s, box-shadow ease-out',
|
||
|
||
'&:hover': {
|
||
boxShadow: '0px 0px 0px rgba(30, 35, 39, 0.15)',
|
||
// transform: 'translateY(-5px)',
|
||
transition: 'transform 0.5s, box-shadow 2s',
|
||
'& .cardHover': {
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
},
|
||
},
|
||
},
|
||
discoverContainerImage: {
|
||
cursor: 'pointer',
|
||
position: 'relative',
|
||
height:'auto',
|
||
'& img': {
|
||
width: '100%',
|
||
borderRadius: '5px',
|
||
filter: 'brightness(60%)',
|
||
'&:hover': {
|
||
filter: 'brightness(55%)',
|
||
},
|
||
},
|
||
[theme.breakpoints.up('md')]: {
|
||
width: '100%',
|
||
},
|
||
},
|
||
|
||
discoverContainerTerritory: {
|
||
|
||
paddingBottom: theme.spacing(10),
|
||
[theme.breakpoints.up('md')]: {
|
||
paddingTop: theme.spacing(2),
|
||
paddingBottom: theme.spacing(8),
|
||
},
|
||
},
|
||
discoverTerritoryContentContainer: {
|
||
boxShadow: '0px 0px 10px rgba(30, 35, 39, 0.10)',
|
||
},
|
||
logo: {
|
||
width: '120px',
|
||
height: '120px',
|
||
marginBottom:'20px',
|
||
border: 'solid 5px white',
|
||
display: 'flex',
|
||
boxShadow: '0px 6px 15px rgba(30, 35, 39, 0.10)',
|
||
alignItems: 'center',
|
||
borderRadius: '5px',
|
||
backgroundColor: 'white'
|
||
|
||
},
|
||
logoMobile: {
|
||
width: '80px',
|
||
height: '80px',
|
||
marginTop:'20px',
|
||
border: 'solid 5px white',
|
||
display: 'flex',
|
||
boxShadow: '0px 6px 15px rgba(30, 35, 39, 0.10)',
|
||
alignItems: 'center',
|
||
borderRadius: '5px',
|
||
backgroundColor: 'white'
|
||
},
|
||
stickyContainer:{
|
||
// margin: '10px 0px',
|
||
borderBottom: '1px solid #E8E8E9',
|
||
marginBottom: '20px',
|
||
paddingBottom: '5px',
|
||
},
|
||
stickySeparation:{
|
||
|
||
// borderBottom: '1px solid #E8E8E9',
|
||
// paddingBottom: '20px',
|
||
|
||
},
|
||
stickyTitle:{
|
||
fontWeight: '600',
|
||
fontSize: '1.250em',
|
||
marginBottom:'10px',
|
||
color: '#1E2327',
|
||
},
|
||
stickyEntreprise:{
|
||
fontWeight: '400',
|
||
fontSize: '1em',
|
||
marginBottom:'20px',
|
||
color: '#1E2327',
|
||
},
|
||
MuiAvatarImg: {
|
||
objectFit: 'contain',
|
||
},
|
||
title: {
|
||
fontSize: '1.875em',
|
||
fontWeight: '600',
|
||
marginTop:'10px',
|
||
marginBottom:'20px',
|
||
paddingRight:'20px',
|
||
color: '#1E2327',
|
||
|
||
[theme.breakpoints.up('md')]: {
|
||
paddingTop: theme.spacing(2),
|
||
},
|
||
},
|
||
|
||
offreTitle: {
|
||
[theme.breakpoints.up('md')]: {
|
||
fontSize: '1.3em',
|
||
fontWeight: '600',
|
||
},
|
||
},
|
||
discoverTitle: {
|
||
padding: theme.spacing(3, 0),
|
||
},
|
||
voirEntreprise: {
|
||
fontSize: '1.625em',
|
||
fontWeight: '600',
|
||
position: 'absolute',
|
||
top: '20px',
|
||
left: '40px',
|
||
right: '40px',
|
||
color: '#fff',
|
||
textAlign:'left',
|
||
lineHeight : '40px',
|
||
marginBottom : '40px'
|
||
|
||
},
|
||
voirEntrepriseMobile: {
|
||
fontSize: '1.125em',
|
||
fontWeight: '600',
|
||
position: 'absolute',
|
||
top: '20px',
|
||
left: '40px',
|
||
right: '40px',
|
||
color: '#fff',
|
||
textAlign:'left',
|
||
lineHeight : '40px',
|
||
marginBottom : '40px'
|
||
|
||
},
|
||
voirTerritoire: {
|
||
fontSize: '1.625em',
|
||
fontWeight: '600',
|
||
position: 'absolute',
|
||
top: '-20px',
|
||
left: '40px',
|
||
right: '40px',
|
||
color: '#fff',
|
||
textAlign:'left',
|
||
lineHeight : '40px',
|
||
marginBottom : '40px'
|
||
|
||
},
|
||
voirTerritoireMobile: {
|
||
fontSize: '1.125em',
|
||
fontWeight: '600',
|
||
position: 'absolute',
|
||
top: '-20px',
|
||
left: '40px',
|
||
right: '40px',
|
||
color: '#fff',
|
||
textAlign:'left',
|
||
lineHeight : '40px',
|
||
marginBottom : '40px'
|
||
|
||
},
|
||
contentText: {
|
||
width:"95%",
|
||
fontSize: '1em',
|
||
fontWeight: '300',
|
||
padding: theme.spacing(1, 0),
|
||
whiteSpace: 'pre-line',
|
||
textAlign: 'justify',
|
||
lineHeight : '1.5em',
|
||
color: '#1E2327'
|
||
},
|
||
ul:{
|
||
lineHeight : '5em',
|
||
},
|
||
contentCondition: {
|
||
fontSize: '1em',
|
||
fontWeight: '300',
|
||
textTransform: 'uppercase',
|
||
textAlign: 'center',
|
||
padding: theme.spacing(1.5, 0),
|
||
},
|
||
contentShare: {
|
||
fontSize: '1em',
|
||
fontWeight: '500',
|
||
textAlign: 'center',
|
||
marginTop:'30px'
|
||
},
|
||
companyName: {
|
||
fontSize: '1.3em',
|
||
fontWeight: '400',
|
||
[theme.breakpoints.up('md')]: {
|
||
fontSize: '1em',
|
||
},
|
||
},
|
||
iconText: {
|
||
marginLeft: 0,
|
||
justifyContent: 'flex-start',
|
||
fontWeight: '400',
|
||
padding: theme.spacing(0.25, 0),
|
||
},
|
||
iconTextDesktop: {
|
||
marginLeft: 0,
|
||
justifyContent: 'flex-start',
|
||
padding: theme.spacing(0.25, 0),
|
||
width: 'inherit',
|
||
},
|
||
iconTextIcon: {
|
||
color: "#1E2327",
|
||
fontSize: '1em',
|
||
fontWeight: '400',
|
||
paddingLeft: '0px',
|
||
|
||
},
|
||
iconTextText: {
|
||
fontWeight: 'lighter',
|
||
color: "#000",
|
||
fontSize: '1em',
|
||
paddingLeft: theme.spacing(1),
|
||
// borderBottom: '1px solid #E8E8E9',
|
||
paddingBottom: '1px',
|
||
verticalAlign: 'middle',
|
||
fontWeight: '400',
|
||
},
|
||
|
||
tags: {
|
||
color: theme.palette.primary.dark,
|
||
fontWeight: '300',
|
||
backgroundColor: theme.palette.tags.main,
|
||
textTransform: 'capitalize',
|
||
margin: theme.spacing(1),
|
||
},
|
||
shareIcons: {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
button: {
|
||
textTransform: 'inherit',
|
||
marginLeft: theme.spacing(1),
|
||
marginRight: theme.spacing(1),
|
||
padding: theme.spacing(1.2, 2),
|
||
color: theme.palette.secondary.main,
|
||
backgroundColor: theme.palette.primary.important,
|
||
},
|
||
chip: {
|
||
color: theme.palette.secondary.main,
|
||
backgroundColor: theme.palette.secondary.important,
|
||
padding: theme.spacing(1),
|
||
margin: theme.spacing(1, 0),
|
||
fontSize: '1em',
|
||
[theme.breakpoints.up('md')]: {
|
||
marginRight: 'auto',
|
||
},
|
||
},
|
||
pourvu: {
|
||
|
||
padding: '9.6px 16px',
|
||
margin: '35px 0',
|
||
textAlign : 'center',
|
||
|
||
},
|
||
pourvuButton:{
|
||
textTransform: 'inherit',
|
||
},
|
||
videoOffre: {
|
||
[theme.breakpoints.up('md')]: {
|
||
paddingBottom: '35%', /* 16:9 */
|
||
},
|
||
},
|
||
videoTerritory: {
|
||
paddingBottom: '56% !important',
|
||
[theme.breakpoints.up('md')]: {
|
||
paddingBottom: '56% !important',
|
||
}
|
||
},
|
||
territoryTitle: {
|
||
fontWeight: '500',
|
||
padding: theme.spacing(2),
|
||
paddingBottom: 0,
|
||
background: theme.palette.background.default,
|
||
},
|
||
territoryType: {
|
||
fontWeight: '200',
|
||
padding: theme.spacing(2),
|
||
paddingTop: 0,
|
||
background: theme.palette.background.default,
|
||
borderBottomLeftRadius: '5px',
|
||
borderBottomRightRadius: '5px',
|
||
},
|
||
|
||
card: {
|
||
textAlign: 'center',
|
||
display: 'flex',
|
||
//minHeight: '21vh',
|
||
// maxHeight: '32vh',
|
||
borderRadius: '5px',
|
||
width: '100%',
|
||
cursor: 'pointer',
|
||
boxShadow: '0px 0px 0px rgba(30, 35, 39, 0.15)',
|
||
// transform: 'translateY(-0px)',
|
||
// transition: 'transform 0.25s, box-shadow ease-out',
|
||
|
||
'&:hover': {
|
||
boxShadow: '0px 0px 0px rgba(30, 35, 39, 0.15)',
|
||
// transform: 'translateY(-5px)',
|
||
transition: 'transform 0.5s, box-shadow 2s',
|
||
'& .cardHover': {
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
},
|
||
},
|
||
'& > div': {
|
||
padding: '0 !important',
|
||
},
|
||
[theme.breakpoints.up('md')]: {
|
||
minHeight: '65vh',
|
||
// maxHeight: '20vh',
|
||
},
|
||
// margin: '1vh 2vh 1vh 2vh',
|
||
// [theme.breakpoints.up('sm')]: {
|
||
// margin: '1vh 0 1vh 0',
|
||
// },
|
||
},
|
||
content: {
|
||
//display: 'flex',
|
||
// alignItems: 'center',
|
||
width: '100%',
|
||
borderRadius: '5px',
|
||
backgroundColor: 'rgba(30,35,39,0.4)',
|
||
// padding: 0,
|
||
},
|
||
cover: {
|
||
position: 'relative',
|
||
width: '100%',
|
||
height: '100%',
|
||
// backgroundPosition: 'center',
|
||
// backgroundSize: 'cover',
|
||
// backgroundRepeat: 'no-repeat',
|
||
backgroundBlendMode: 'darken',
|
||
backgroundColor: 'rgba(30,35,39,0.25)',
|
||
// transition: 'background-color 1s',
|
||
// [theme.breakpoints.up('md')]: {
|
||
// width: '100%',
|
||
// },
|
||
|
||
|
||
},
|
||
iconPlay: {
|
||
fontSize: '2em',
|
||
color: theme.palette.background.grey,
|
||
position: 'absolute',
|
||
bottom: '60px',
|
||
left: '40px',
|
||
color: '#1E2327',
|
||
backgroundColor: '#fff',
|
||
borderRadius: '100px',
|
||
padding: '15px',
|
||
marginRight:'15px'
|
||
|
||
},
|
||
playerTexte: {
|
||
fontSize: '1.625em',
|
||
fontWeight: '600',
|
||
position: 'absolute',
|
||
bottom: '80px',
|
||
left: '120px',
|
||
color: '#fff',
|
||
},
|
||
iconPlayBas: {
|
||
fontSize: '2em',
|
||
color: theme.palette.background.grey,
|
||
position: 'absolute',
|
||
bottom: '40px',
|
||
left: '40px',
|
||
color: '#1E2327',
|
||
backgroundColor: '#fff',
|
||
borderRadius: '100px',
|
||
padding: '15px',
|
||
marginRight:'15px'
|
||
|
||
},
|
||
playerTexteBas: {
|
||
fontSize: '1.625em',
|
||
fontWeight: '600',
|
||
position: 'absolute',
|
||
bottom: '60px',
|
||
left: '120px',
|
||
color: '#fff',
|
||
},
|
||
iconPlayMobile: {
|
||
fontSize: '1.5em',
|
||
color: theme.palette.background.grey,
|
||
position: 'absolute',
|
||
bottom: '30px',
|
||
left: '20px',
|
||
color: '#1E2327',
|
||
backgroundColor: '#fff',
|
||
borderRadius: '100px',
|
||
padding: '10px',
|
||
marginRight:'15px'
|
||
|
||
},
|
||
playerTexteMobile: {
|
||
|
||
fontSize: '1em',
|
||
fontWeight: '600',
|
||
position: 'absolute',
|
||
bottom: '43px',
|
||
left: '80px',
|
||
color: '#fff',
|
||
},
|
||
iconPlayBasMobile: {
|
||
|
||
fontSize: '1.5em',
|
||
color: theme.palette.background.grey,
|
||
position: 'absolute',
|
||
bottom: '30px',
|
||
left: '20px',
|
||
color: '#1E2327',
|
||
backgroundColor: '#fff',
|
||
borderRadius: '100px',
|
||
padding: '15px',
|
||
marginRight:'15px'
|
||
|
||
},
|
||
playerTexteBasMobile: {
|
||
fontSize: '1em',
|
||
fontWeight: '600',
|
||
position: 'absolute',
|
||
bottom: '47px',
|
||
left: '80px',
|
||
color: '#fff',
|
||
},
|
||
|
||
poste: {
|
||
|
||
fontSize: '2.250em',
|
||
fontWeight: '600',
|
||
position: 'absolute',
|
||
top: '40px',
|
||
left: '30px',
|
||
right: '40px',
|
||
color: '#fff',
|
||
textAlign:'left',
|
||
lineHeight : '40px',
|
||
marginBottom : '40px',
|
||
padding:'10px'
|
||
},
|
||
posteMobile: {
|
||
// backgroundColor :'#000',
|
||
// opacity:'0.5',
|
||
fontSize: '1.250em',
|
||
fontWeight: '600',
|
||
position: 'absolute',
|
||
top: '30px',
|
||
left: '30px',
|
||
right: '30px',
|
||
color: '#fff',
|
||
textAlign:'left',
|
||
lineHeight : '20px',
|
||
marginBottom : '20px',
|
||
|
||
},
|
||
containerPoste:{
|
||
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'flex-start',
|
||
padding: theme.spacing(2),
|
||
width: '75%',
|
||
},
|
||
posteEntreprise: {
|
||
|
||
fontSize: '0.7em',
|
||
fontWeight: '600',
|
||
color: '#fff',
|
||
},
|
||
sticky: {
|
||
fontSize: '1.5em',
|
||
fontWeight: '500',
|
||
position: 'fixed',
|
||
top: 'calc(10% - 0.5em)',
|
||
left: 'calc(95% - 0.5em)',
|
||
textAlign: 'left',
|
||
},
|
||
listeCompetences:{
|
||
fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
|
||
fontWeight: '300',
|
||
fontSize: '1em',
|
||
lineHeight:'2em',
|
||
color: '#1E2327',
|
||
|
||
},
|
||
ulListeCompetences:{
|
||
paddingBottom:'30px',
|
||
}
|
||
|
||
})
|
||
|
||
const { publicRuntimeConfig } = getConfig()
|
||
|
||
function OffreDetail(props) {
|
||
let { classes, offre, isCandidature } = props;
|
||
const logoUrl = (offre.company ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + offre.company.logo : "https://blog.talentstube.com/wp-content/uploads/2021/01/default_picture_company.jpg")
|
||
const DefaultUrl = "https://blog.talentstube.com/wp-content/uploads/2021/01/default_picture_company.jpg"
|
||
const imgUrl = (offre.company && offre.company.presentation_video && offre.company.presentation_video.thumbnails && offre.company.presentation_video.thumbnails[0] && offre.company.presentation_video.thumbnails[0].sizes[3]) ? offre.company.presentation_video.thumbnails[0].sizes[3].link : DefaultUrl
|
||
const imgUrlDesktop = (offre.company && offre.company.presentation_video && offre.company.presentation_video.thumbnails && offre.company.presentation_video.thumbnails[0] && offre.company.presentation_video.thumbnails[0].sizes[3]) ? offre.company.presentation_video.thumbnails[0].sizes[3].link : DefaultUrl
|
||
const imgUrlOffre = (offre && offre.video && offre.video.thumbnails && offre.video.thumbnails[0] && offre.video.thumbnails[0].sizes[3]) ? offre.video.thumbnails[0].sizes[3].link : DefaultUrl
|
||
const imgUrlDesktopOffre = (offre && offre.video && offre.video.thumbnails && offre.video.thumbnails[0] && offre.video.thumbnails[0].sizes[3]) ? offre.video.thumbnails[0].sizes[3].link : DefaultUrl
|
||
const imgUrlTerritoire = (offre.territories && offre.territories[0] && offre.territories[0].territory && offre.territories[0].territory.presentation_video.thumbnails && offre.territories[0].territory.presentation_video.thumbnails[0] && offre.territories[0].territory.presentation_video.thumbnails[0].sizes[3]) ? offre.territories[0].territory.presentation_video.thumbnails[0].sizes[3].link : DefaultUrl
|
||
const imgUrlDesktopTerritoire = (offre.territories && offre.territories[0] && offre.territories[0].territory.presentation_video && offre.territories[0].territory.presentation_video.thumbnails && offre.territories[0].territory.presentation_video.thumbnails[0] && offre.territories[0].territory.presentation_video.thumbnails[0].sizes[3]) ? offre.territories[0].territory.presentation_video.thumbnails[0].sizes[3].link : DefaultUrl
|
||
const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Offre/${offre.id}-${_.kebabCase(offre.title)}`;
|
||
const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`);
|
||
const territoryVideoUrlTab = (offre.territories && offre.territories[0] && offre.territories[0].territory) ? offre.territories[0].territory.presentation_video.cdn_url.split('/') : '';
|
||
const territoryVideoId = territoryVideoUrlTab[2]
|
||
let jobVille=""
|
||
let jobDpt=""
|
||
let jobPays=""
|
||
let jobContract =""
|
||
let tempsType =""
|
||
let tempsTypeFr =""
|
||
let nombreHeure =""
|
||
let dureeContrat =""
|
||
let teletravail =""
|
||
offre.location && offre.location.gmap_address.address_components[0] ? jobVille = offre.location.gmap_address.address_components[0].long_name: jobVille=""
|
||
offre.location && offre.location.gmap_address.address_components[1] ? jobDpt = offre.location.gmap_address.address_components[1].long_name: jobDpt=""
|
||
offre.location && offre.location.gmap_address.address_components[3] ? jobPays = offre.location.gmap_address.address_components[3].long_name: jobPays=""
|
||
// offre.location.gmap_address ? jobAdr = location.gmap_address.adr_address: jobAdr=""
|
||
offre.extra && offre.extra.contract_type ? jobContract = offre.extra.contract_type : jobContract =""
|
||
offre.extra && offre.extra.temps_type ? tempsType = offre.extra.temps_type : tempsType =""
|
||
console.log("competences!!");
|
||
//console.log(offre.competences);
|
||
var competences = [];
|
||
|
||
if(offre.competences){
|
||
for (var i = 0; i < offre.competences.length; i++) {
|
||
//console.log(offre.competences[i]);
|
||
// console.log("competences "+i);
|
||
// console.log(offre.competences[i]);
|
||
|
||
for (const property in offre.competences[i]) {
|
||
console.log(` ${offre.competences[i][property]}`);
|
||
competences.push(offre.competences[i][property]);
|
||
|
||
}
|
||
}
|
||
}
|
||
const listItems = competences.map((number) =>
|
||
<li className={classes.listeCompetences}>{number}</li>
|
||
);
|
||
offre.extra && offre.extra.teletravail ? teletravail = offre.extra.teletravail : teletravail =""
|
||
//gestion du type de temps de travail
|
||
if(tempsType=="PART_TIME"){
|
||
tempsTypeFr="Temps partiel"
|
||
}else if(tempsType=="FULL_TIME") {
|
||
tempsTypeFr="Temps plein"
|
||
}else if(tempsType=="MIX_TIME") {
|
||
|
||
}
|
||
//gestion du nombre d'heure
|
||
if(offre.extra && offre.extra.nombre_heure && offre.extra.nombre_heure!=0 && tempsType=="PART_TIME"){
|
||
nombreHeure=" ("+offre.extra.nombre_heure+" h/semaine)";
|
||
}
|
||
//gestion de la duree de contrat
|
||
if(offre.extra && offre.extra.duree_contrat && offre.extra.duree_contrat!=0 && jobContract=="CDD"){
|
||
dureeContrat=" ("+offre.extra.duree_contrat+" mois)";;
|
||
}
|
||
//gestion du télétravail
|
||
if(offre.extra && offre.extra.teletravail=='tele_occasionel'){
|
||
teletravail='Télétravail occasionnel';
|
||
}else if(offre.extra && offre.extra.teletravail=='tele_partiel'){
|
||
teletravail='Télétravail partiel';
|
||
}else if(offre.extra && offre.extra.teletravail=='tele_total'){
|
||
teletravail='Télétravail total';
|
||
}else{
|
||
teletravail=null;
|
||
}
|
||
|
||
const imgDefaultUrl = "https://blog.talentstube.com/wp-content/uploads/2021/01/default_picture_company.jpg"
|
||
{/* CONST MARQUE EMPLOYEUR */}
|
||
const marqueEmployeur = offre.company && offre.company.presentation_video && !offre.is_promoted && (
|
||
<div className={classes.container + ' ' + classes.discoverContainerCompany}>
|
||
<section>
|
||
|
||
|
||
{/* <a href={entrepriseLink}> */}
|
||
{/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
|
||
<link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktop : imgUrl}/>
|
||
<Link href={`/Player?id=${offre.company.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&typeEntite=Entreprise&nameCompany=${offre.company.brand_name}&nameOffre=`} >
|
||
<div className={classes.discoverContainerImage}>
|
||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
|
||
<Typography variant="h3" component="h3" gutterBottom className={ classes.voirEntreprise} align="center">
|
||
Découvrir l'entreprise {offre.company.brand_name && offre.company.brand_name}
|
||
</Typography>
|
||
<KeyboardArrowleftIcon className={classes.iconPlayBas} />
|
||
<Typography variant="h3" component="h3" className={classes.playerTexteBas}>
|
||
Lire la vidéo
|
||
</Typography>
|
||
</div>
|
||
</Link>
|
||
{/* </a> */}
|
||
</section>
|
||
</div>
|
||
)
|
||
{/* FIN CONST MARQUE EMPLOYEUR */}
|
||
{/* CONST TERRITOIRE */}
|
||
|
||
{/* FIN CONST TERRITOIRE */}
|
||
{/* CONST DESCRIPTIF */}
|
||
const descriptif = <section>
|
||
<Typography variant="h1" component="h1" gutterBottom className={classes.title}>
|
||
Descriptif de l’annonce
|
||
</Typography>
|
||
{/* <SimpleCollapse> */}
|
||
<Typography gutterBottom className={classes.contentText}>
|
||
<div
|
||
dangerouslySetInnerHTML={{
|
||
__html: offre.description
|
||
}}></div>
|
||
</Typography></section>
|
||
{/* FIN CONST DESCRIPTIF */}
|
||
{/* CONST COMPETENCES */}
|
||
const competencesAffichage = competences.length>0 && (
|
||
<section >
|
||
<Typography variant="h2" component="h2" gutterBottom className={classes.title}>
|
||
Compétences recherchées
|
||
</Typography>
|
||
<ul className={classes.ulListeCompetences}>{listItems}</ul>
|
||
|
||
</section>
|
||
)
|
||
{/*FIN CONST COMPETENCES */}
|
||
return (
|
||
|
||
<Fragment>
|
||
{/* {offre.public_tag.map((label, index) => {
|
||
descriptionSEO += label+", "
|
||
})} */}
|
||
{/* PARTIE REFERENCEMENT GENERAL (FACEBOOK, GOOGLE, TWITTER LINKENDIN) */}
|
||
|
||
{/* PARTIE REFERENCEMENT GOOGLE JOBS */}
|
||
<JobPosting job_title={offre.title}
|
||
job_description={offre.description}
|
||
job_brand= {offre.company && offre.company.brand_name && offre.company.brand_name}
|
||
job_brand_link= {entrepriseLink}
|
||
job_title = {offre.title}
|
||
job_location = {offre.location && offre.location.gmap_address.formatted_address}
|
||
job_ville = {jobVille}
|
||
job_dept = {jobDpt}
|
||
job_pays = {jobPays}
|
||
job_adr = {offre.location && offre.location.gmap_address.formatted_address}
|
||
job_date = {offre.published_at}
|
||
job_date_fin = {offre.unpublished_at}
|
||
job_temps_type= {tempsType}
|
||
job_contract_type= {jobContract}
|
||
></JobPosting>
|
||
<Hidden smDown>
|
||
{/* PARTIE DESKTOP */}
|
||
<div style={{ width:'100%', justifyContent: 'center', display: 'flex', marginTop:'100px' }}>
|
||
<div style={{ width:'1200px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'flex-start' }}>
|
||
<div style={{width:'67%' }}>
|
||
{offre.video && (
|
||
|
||
<Fragment>
|
||
|
||
{/* <VideoVimeo {...isCandidature == 'true' ? 'classes={{ video: classes.videoOffre }}' : ''} videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} autoplay='1' /> */}
|
||
<div className={classes.contentContainer}>
|
||
<link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktopOffre : imgUrlOffre}/>
|
||
<Link href={`/Player?id=${offre.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.video.cdn_url, '/'))}&typeEntite=Offre&nameCompany=${offre.company && offre.company.brand_name}&nameOffre=${offre.title}`} >
|
||
<div className={classes.discoverContainerImage}>
|
||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktopOffre : imgUrlOffre} alt={offre.company.brand_name && offre.company.brand_name} />
|
||
<div className={classes.containerPoste}>
|
||
|
||
<Typography variant="h4" component="h1" gutterBottom className={classes.poste}>
|
||
{offre.title} <br></br>
|
||
<span className={classes.posteEntreprise}>{offre.company.brand_name ? offre.company.brand_name : ""}</span>
|
||
</Typography>
|
||
|
||
</div>
|
||
<KeyboardArrowleftIcon className={classes.iconPlay} />
|
||
<Typography variant="h3" component="h3" className={classes.playerTexte}>
|
||
Lire la vidéo.
|
||
</Typography>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className={classes.container}>
|
||
|
||
|
||
{/* PARTIE DETAIL ANNONCE */}
|
||
<div className={classes.contentContainer}>
|
||
{/* PARTIE DESCRIPTIF */}
|
||
{descriptif}
|
||
{/* <section className={classes.tagsContainer}>
|
||
{offre.public_tag.map((label, index) => {
|
||
return (
|
||
<Chip label={label} className={classes.tags} key={index} />
|
||
);
|
||
})}
|
||
</section> */}
|
||
{/* </SimpleCollapse> */}
|
||
{/* PARTIE compétences */}
|
||
{competencesAffichage}
|
||
|
||
</div>
|
||
</div>
|
||
{/* PARTIE MARQUE EMPLOYEUR */}
|
||
{offre.company.presentation_video && !offre.is_promoted && (
|
||
<div className={classes.container + ' ' + classes.discoverContainerCompany}>
|
||
<section>
|
||
|
||
|
||
{/* <a href={entrepriseLink}> */}
|
||
{/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
|
||
<link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktop : imgUrl}/>
|
||
<Link href={`/Player?id=${offre.company.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&typeEntite=Entreprise&nameCompany=${offre.company.brand_name}&nameOffre=`} >
|
||
<div className={classes.discoverContainerImage}>
|
||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
|
||
<Typography variant="h3" component="h3" gutterBottom className={ classes.voirEntreprise} align="center">
|
||
Découvrir l'entreprise {offre.company.brand_name && offre.company.brand_name}
|
||
</Typography>
|
||
<KeyboardArrowleftIcon className={classes.iconPlayBas} />
|
||
<Typography variant="h3" component="h3" className={classes.playerTexteBas}>
|
||
Lire la vidéo
|
||
</Typography>
|
||
</div>
|
||
</Link>
|
||
{/* </a> */}
|
||
</section>
|
||
</div>
|
||
)}
|
||
{/* PARTIE TERRITOIRE DESKTOP*/}
|
||
{offre.territories && territoryVideoId && (
|
||
<div className={classes.container + ' ' + classes.discoverContainerTerritory}>
|
||
<section>
|
||
<link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire}/>
|
||
<Link href={`/Player?id=${offre.territories[0].territory.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${territoryVideoId}&typeEntite=Territoire&nameCompany=${offre.territories[0].territory.brand_name}&nameOffre=`} >
|
||
<div className={classes.discoverContainerImage}>
|
||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''} />
|
||
<Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirTerritoire} align="center">
|
||
Découvrir le territoire {(offre.territories) ? offre.territories[0].territory.brand_name : ''}
|
||
</Typography>
|
||
<KeyboardArrowleftIcon className={classes.iconPlayBas} />
|
||
<Typography variant="h3" component="h3" className={classes.playerTexteBas}>
|
||
Lire la vidéo
|
||
</Typography>
|
||
</div>
|
||
</Link>
|
||
</section>
|
||
</div>
|
||
)}
|
||
</Fragment>
|
||
)}
|
||
</div>
|
||
{/* PARTIE STICKY */}
|
||
|
||
<StickyBox offsetTop={100} style={{width: '33%', marginLeft: '40px', padding: '0px 15px', position: 'sticky', top: '100px'}}>
|
||
|
||
<section className={classes.stickyContainer}>
|
||
<a href={entrepriseLink} className={classes.lien}>
|
||
<Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }}
|
||
src={logoUrl} alt={offre.company && offre.company.brand_name && offre.company.brand_name} />
|
||
</a>
|
||
<Typography variant="h4" component="h4" className={classes.stickyTitle}>
|
||
{offre.title}
|
||
</Typography>
|
||
<a href={entrepriseLink} className={classes.lien}>
|
||
<Typography variant="h5" component="h5" className={classes.stickyEntreprise}>
|
||
{offre.company && offre.company.brand_name && offre.company.brand_name}
|
||
</Typography>
|
||
</a>
|
||
</section>
|
||
|
||
<section className={classes.IconTextContainerDesktop}>
|
||
|
||
<IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="assignment" text={offre.extra && offre.extra.contract_type+dureeContrat} />
|
||
{tempsTypeFr ?<IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={tempsTypeFr+nombreHeure } />:""}
|
||
<IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={offre.location && offre.location.gmap_address.formatted_address} />
|
||
{teletravail && (<IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="home" text={teletravail} /> )}
|
||
{offre.beneficiaire && (<IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={offre.beneficiaire} /> )}
|
||
</section>
|
||
|
||
<section >
|
||
</section>
|
||
{!offre.is_promoted && (
|
||
<div className={classes.shareContainer}>
|
||
<a href={`/Reponse?adId=${offre.id}`} className={classes.lien}>
|
||
<Button
|
||
cyp="ButtonApply"
|
||
variant="contained"
|
||
className={classes.button}>
|
||
Postuler
|
||
</Button>
|
||
</a>
|
||
|
||
|
||
<Typography gutterBottom className={classes.contentShare}>
|
||
Partager l'offre sur votre réseau
|
||
</Typography>
|
||
<section className={classes.ShareIcons}>
|
||
<SocialShare url={socialShareUrl} />
|
||
</section>
|
||
</div>
|
||
)}
|
||
{offre.is_promoted && (
|
||
<section className={classes.pourvu}>
|
||
<Button variant="contained" disabled className={classes.pourvuButton}>
|
||
Offre pourvue
|
||
</Button>
|
||
</section>
|
||
// <Chip label="Pourvue" className={classes.chip} />
|
||
)}
|
||
</StickyBox>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Hidden>
|
||
{/* PARTIE MOBILE */}
|
||
<Hidden mdUp>
|
||
<section className={classes.contentContainerMobile}>
|
||
<link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktopOffre : imgUrlOffre}/>
|
||
<Link href={`/Player?id=${offre.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.video && offre.video.cdn_url, '/'))}&typeEntite=Offre&nameCompany=${offre.company && offre.company.brand_name}&nameOffre=${offre.title}`} >
|
||
<div className={classes.discoverContainerImage}>
|
||
<img src={isWidthUp('xs', props.width) ? imgUrlDesktopOffre : imgUrlOffre} alt={offre.company && offre.company.brand_name && offre.company.brand_name} />
|
||
<div >
|
||
|
||
<Typography variant="h1" component="h1" gutterBottom className={classes.posteMobile}>
|
||
{offre.title} <br></br>
|
||
<span className={classes.posteEntreprise}>{offre.company && offre.company.brand_name ? offre.company.brand_name : ""}</span>
|
||
</Typography>
|
||
|
||
</div>
|
||
<KeyboardArrowleftIcon className={classes.iconPlayMobile} />
|
||
<Typography variant="h3" component="h3" className={classes.playerTexteMobile}>
|
||
Lire la vidéo
|
||
</Typography>
|
||
</div>
|
||
</Link>
|
||
</section>
|
||
<section className={classes.headerContainerMobile}>
|
||
<div className={classes.infoContainerMobile}>
|
||
|
||
<a href={entrepriseLink} className={classes.lien}>
|
||
<Avatar className={classes.logoMobile} classes={{ img: classes.MuiAvatarImg }}
|
||
src={logoUrl} alt="companylogo" />
|
||
</a>
|
||
|
||
</div>
|
||
<div className={classes.infoContainerMobile}>
|
||
<Typography gutterBottom variant="h4" component="h4" className={classes.title}>
|
||
{offre.title}
|
||
</Typography>
|
||
<a href={entrepriseLink} className={classes.lien}>
|
||
<Typography gutterBottom variant="subtitle1" className={classes.text}>
|
||
{offre.company && offre.company.brand_name && offre.company.brand_name}
|
||
</Typography>
|
||
</a>
|
||
{/* ville */}
|
||
</div>
|
||
|
||
</section>
|
||
<section className={classes.IconTextContainerMobile}>
|
||
{offre.is_promoted && (<Chip label="Offre pourvue" className={classes.chip} />)}
|
||
{offre.extra && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="assignment" text={offre.extra.contract_type+dureeContrat} />)}
|
||
{tempsTypeFr && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={tempsTypeFr+nombreHeure} />)}
|
||
{offre.location && offre.location.gmap_address && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={offre.location.gmap_address.formatted_address} />)}
|
||
{teletravail && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="home" text={teletravail} />)}
|
||
{offre.beneficiaire && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={offre.beneficiaire} />)}
|
||
</section>
|
||
<section className={classes.IconTextContainerMobile}>
|
||
{/* PARTIE DESCRIPTIF */}
|
||
{descriptif}
|
||
{/* PARTIE competences */}
|
||
{competencesAffichage}
|
||
</section>
|
||
<section>
|
||
{/* PARTIE MARQUE EMPLOYEUR MOBILE*/}
|
||
{offre.company && offre.company.presentation_video && !offre.is_promoted && (
|
||
<div className={classes.container + ' ' + classes.discoverContainerCompany}>
|
||
<section>
|
||
|
||
|
||
{/* <a href={entrepriseLink}> */}
|
||
{/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
|
||
<link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktop : imgUrl}/>
|
||
<Link href={`/Player?id=${offre.company.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&typeEntite=Entreprise&nameCompany=${offre.company.brand_name}&nameOffre=`} >
|
||
<div className={classes.discoverContainerImage}>
|
||
<img src={isWidthUp('xs', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
|
||
<Typography variant="h3" component="h3" gutterBottom className={ classes.voirEntrepriseMobile} align="center">
|
||
Découvrir l'entreprise {offre.company.brand_name && offre.company.brand_name}
|
||
</Typography>
|
||
<KeyboardArrowleftIcon className={classes.iconPlayBasMobile} />
|
||
<Typography variant="h3" component="h3" className={classes.playerTexteBasMobile}>
|
||
Lire la vidéo
|
||
</Typography>
|
||
</div>
|
||
</Link>
|
||
{/* </a> */}
|
||
</section>
|
||
</div>
|
||
)}
|
||
{/* PARTIE TERRITOIRE MOBILE*/}
|
||
{offre.territories && territoryVideoId && (
|
||
<div className={classes.container + ' ' + classes.discoverContainerTerritory}>
|
||
<section>
|
||
<link rel="preload" as="image" href={isWidthUp('xs', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire}/>
|
||
<Link href={`/Player?id=${offre.territories[0].territory.id}&url=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${territoryVideoId}&typeEntite=Territoire&nameCompany=${offre.territories[0].territory.brand_name}&nameOffre=${offre.title}`} >
|
||
<div className={classes.discoverContainerImage}>
|
||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''} />
|
||
<Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirTerritoireMobile} align="center">
|
||
Découvrir le territoire {(offre.territories) ? offre.territories[0].territory.brand_name : ''}
|
||
</Typography>
|
||
<KeyboardArrowleftIcon className={classes.iconPlayBasMobile} />
|
||
<Typography variant="h3" component="h3" className={classes.playerTexteBasMobile}>
|
||
Lire la vidéo
|
||
</Typography>
|
||
</div>
|
||
</Link>
|
||
</section>
|
||
</div>
|
||
)}
|
||
</section>
|
||
</Hidden>
|
||
|
||
</Fragment>
|
||
)
|
||
}
|
||
export default withStyles(styles)(OffreDetail); |