Changement de la page Help pour intéger les pages comment faire un cv video

nextjs/components/organisms/AccountEtape1.js

@@ -41,7 +41,7 @@ const styles = theme => ({
         },
     },
     textFieldSmall: {
-        width: '32%',
+        width: '48%',
         '&:disabled': {
             color: theme.palette.secondary.dark,
         },

nextjs/components/organisms/AccountEtape3.js

@@ -149,7 +149,7 @@ class Etape3 extends React.Component {
               </CardActions>
               <CardContent>
                 <Typography>
-                  <a href={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink} target="_blank">Lien vers le cv téléchargé</a><br />
+                  <a href={publicRuntimeConfig.frontServerUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink} target="_blank">Lien vers le cv téléchargé</a><br />
                 {/* <a href="https://www.permatheque.fr/PDF/mansobufukuoka-larevolutiondunseulbrindepaille.pdf" target="_blank">lien</a> */}
                 </Typography>
               </CardContent>

nextjs/components/organisms/AccountProfile.js

@@ -253,8 +253,8 @@ const AccountProfile = props => {
                                     variant="body1">
                                     <MailIcon className={classes.menuButton}/> : {user.email}<br/>
                                     <PhoneIcon className={classes.menuButton}/> : {user.phone}<br/>
-                                    <LinkedInIcon className={classes.menuButton}/> : {(user.linkedin && user.linkedin !='' && user.linkedin != 'null') ? <a href={user.linkedin} target="_blank">{user.linkedin}</a> : 'Non renseigné'}<br/>
-                                    <PublicIcon className={classes.menuButton}/> : {(user.website && user.website !='' && user.website != 'null') ? <a href={user.website} target="_blank">{user.website}</a> : 'Non renseigné'}
+                                    <LinkedInIcon className={classes.menuButton}/> : {(user.linkedin && user.linkedin !='' && user.linkedin != 'null') ? <a href={user.linkedin} target="_blank">Lien sur mon linkendIn</a> : 'Non renseigné'}<br/>
+                                    <PublicIcon className={classes.menuButton}/> : {(user.website && user.website !='' && user.website != 'null') ? <a href={user.website} target="_blank">Lien sur mon site</a> : 'Non renseigné'}
                                 </Typography>
                                 <Typography className={classes.dateText} color="textSecondary" variant="body1"></Typography>
                             </div>

nextjs/components/organisms/Header.js

@@ -394,7 +394,7 @@ class Header extends React.Component {
                       </a>
                     </div>
                     <div className={classes.recruteurLinkGroup}>
-                      <a href={publicRuntimeConfig.symfonyUrl + "faire-offre-emploi-video"} className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                      <a href={publicRuntimeConfig.symphonyUrl } className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <SupervisorAccountIcon className={classes.icon} />
                         <ListItemText classes={{ primary: classes.ListItemText }} primary='Recruteurs'>
                         </ListItemText>
@@ -452,7 +452,7 @@ class Header extends React.Component {
                   <Divider light={true} />
 
                   <div className={classes.linkGroup}>
-                    <a href={publicRuntimeConfig.symfonyUrl + "/faire-offre-emploi-video"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
+                    <a href={publicRuntimeConfig.symphonyUrl + "/faire-offre-emploi-video"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
                       <WorkOutlineIcon className={classes.icon} />
                       <ListItemText primary='Connexion recruteurs'>
                       </ListItemText>
@@ -464,7 +464,7 @@ class Header extends React.Component {
             {!!!this.props.loading && !!this.props.fetched &&
               <Fragment>
                 {this.props.user.picture ?
-                  <img alt="talents-tube" src={publicRuntimeConfig.symfonyUrl +publicRuntimeConfig.postedContentUrl+ this.props.user.picture} className={classes.menuAvatar} />
+                  <img alt="talents-tube" src={publicRuntimeConfig.symphonyUrl +publicRuntimeConfig.postedContentUrl+ this.props.user.picture} className={classes.menuAvatar} />
                   :
                   <img alt="talents-tube" src='/static/images/default/account-avatar-default.svg' className={classes.menuAvatar} />
                 }
@@ -605,7 +605,7 @@ class Header extends React.Component {
               </section>
               <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
 
-                <a href={publicRuntimeConfig.symfonyUrl + "/faire-offre-emploi-video"} className={classes.desktopMenuItem}>
+                <a href={publicRuntimeConfig.symphonyUrl + "/faire-offre-emploi-video"} className={classes.desktopMenuItem}>
                   <ListItemText primary='Espace recruteurs'>
                   </ListItemText>
                   <ArrowForward className={classes.icon} />

nextjs/components/organisms/OffreDetail.js

@@ -336,11 +336,11 @@ function OffreDetail(props) {
                                 </a>
                                 <div className={classes.infoContainer}>
                                     <Typography gutterBottom className={classes.offreTitle}>
-                                         {offre.title} {/*- publié le <Moment format="DD/MM/YYYY" date={offre.published_at} /> */}
+                                         {offre.title}   {/*- publié le <Moment format="DD/MM/YYYY" date={offre.published_at} /> */}
                                     </Typography>
                                     <a href={entrepriseLink} >
                                         <Typography gutterBottom variant="subtitle1" className={classes.companyName}>
-                                            {offre.company.brand_name && offre.company.brand_name}
+                                        {offre.beneficiaire ? offre.beneficiaire : offre.company.brand_name ? offre.company.brand_name : ""} 
                                         </Typography>
                                     </a>
                                     {offre.is_promoted && (

nextjs/components/organisms/OffreRow.js

@@ -144,14 +144,14 @@ class OffreRowComponent extends React.Component {
                 variant="h6"
                 component="h3"
                 className={classes.jobTitle}>
-                {rowData.title}
+                {rowData.title} 
               </Typography>
               <Typography
                 variant="headline"
                 variant="h6"
                 component="h4"
                 className={classes.companyTitle}>
-                {!!companyR.brand_name?companyR.brand_name:"-"}
+                {rowData.beneficiaire ? "Pour le compte de "+rowData.beneficiaire : companyR.brand_name ? companyR.brand_name : "Non renseigné"} 
               </Typography>
               <div>
                 {rowData.is_promoted && (

nextjs/components/organisms/ShortVideoHooker.js

@@ -8,6 +8,7 @@ import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
 
 import VideoVimeo from '../atoms/VideoVimeo'
 
+
 const styles = theme => ({
     root: {
         position: 'relative',
@@ -169,7 +170,7 @@ class ShortVideoHooker extends Component {
 
         return (
             <div className={classes.video}>
-                <VideoVimeo classesOverride={ classes.videoVimeo } videoId={videoList[this.state.i].vimeoId} title={videoList[this.state.i].title}
+                {/* <VideoVimeo classesOverride={ classes.videoVimeo } videoId={videoId} 
                     options={`?byline=0&title=0&background=1&autoplay=1&mute=1`} />
                 <section className={classes.text}>
                     <Typography gutterBottom
@@ -199,7 +200,7 @@ class ShortVideoHooker extends Component {
                     >
                         Voir l'offre
                 </Button>
-                </Link>
+                </Link> */}
             </div>
         )
     }

nextjs/components/organisms/TileOffre.js

@@ -59,7 +59,7 @@ class TileOffre extends React.Component {
                         component="h4"
                         align="center"
                         className={classes.companyTitle}>
-                        {tile.company.brand_name && tile.company.brand_name}
+                        {tile.company.brand_name && tile.company.brand_name} {tile.beneficiaire && " / "+tile.beneficiaire }
                     </Typography>
                     <Typography
                         gutterBottom

nextjs/data/api.js

@@ -73,7 +73,7 @@ export default {
 
         //offset is the index position of the first element to start requesting at 
         // use 0|1 for isPromoted
-        fetchAds: ({ limit = null, order = "", keyword = "", offset = 1, status = 'PUBLISHED', isPromoted = null, isEmphasis = null }) => {
+        fetchAds: ({ limit = null, order = "", keyword = "", offset = 1, status = 'PUBLISHED', isPromoted = false, isEmphasis = false }) => {
             isPromoted = isPromoted !== null ? isPromoted * 1 : isPromoted;
             isEmphasis = isEmphasis !== null ? isEmphasis * 1 : isEmphasis;
 

nextjs/pages/Entreprise.js

@@ -357,9 +357,9 @@ class Entreprise extends React.Component {
 
     render() {
         const { classes, company } = this.props;
-        const logoUrl = (company.logo ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + company.logo : publicRuntimeConfig.symfonyUrl + "/img/default_picture_svg")
+        const logoUrl = (company.logo ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + company.logo : publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg")
 
-        const DefaultUrl = publicRuntimeConfig.symfonyUrl + "/img/default_picture_svg"
+        const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
         const imgUrl = (company.presentation_video && company.presentation_video.thumbnails[0] && company.presentation_video.thumbnails[0].sizes[2]) ? company.presentation_video.thumbnails[0].sizes[2].link : DefaultUrl
 
         const offre = (company.count_ads == 1) ? company.count_ads + ' offre' : company.count_ads + ' offres'

nextjs/pages/Help.js

@@ -8,8 +8,8 @@ import { withStyles } from '@material-ui/core/styles';
 import Layout from "../components/templates/Layout"
 import Footer from '../components/organisms/Footer';
 import Link from 'next/link';
-import Head from 'next/head'
-import VideoVimeo from './../components/atoms/VideoVimeo'
+import Head from 'next/head';
+import VideoVimeo from './../components/atoms/VideoVimeo';
 
 const styles = theme => ({
   root: {
@@ -128,7 +128,35 @@ function Help(props) {
           gutterBottom>
           Suivez nos conseils pour postuler simplement aux offres d’emploi. La vidéo de motivation vous permet de dévoiler votre personnalité, vos compétences, votre parcours, vos valeurs, vos soft-skills, votre ambition,…. et bien plus encore.
         </Typography>
-      
+        <Typography gutterBottom component="h2"
+          className={classes.subTitle}>
+           Comment réussir votre CV vidéo
+        </Typography>
+        <Typography
+          className={classes.text}
+          gutterBottom>
+          Suivez ce <a href="https://blog.talentstube.com/faire-cv-video" target="_blank" >lien</a>
+        </Typography>
+
+        <Typography gutterBottom component="h2"
+          className={classes.subTitle}>
+           Accompagnement à la création d'un CV vidéo professionnel
+        </Typography>
+        <Typography
+          className={classes.text}
+          gutterBottom>
+          Suivez ce <a href="https://blog.talentstube.com/accompagnement-cv-video" target="_blank" >lien</a>
+        </Typography>
+
+        <Typography gutterBottom component="h2"
+          className={classes.subTitle}>
+          Pourquoi faire un CV vidéo ?
+        </Typography>
+        <Typography
+          className={classes.text}
+          gutterBottom>
+          Suivez ce <a href="https://blog.talentstube.com/faire-cv-video" target="_blank" >lien</a>
+        </Typography>
        
         
       </section>

nextjs/pages/faire-cv-video.js

@@ -0,0 +1,357 @@
+/* eslint-disable jsx-a11y/anchor-is-valid 
+
+*/
+
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+import Layout from "../components/templates/Layout"
+import Footer from '../components/organisms/Footer';
+import Head from 'next/head'
+import VideoVimeo from './../components/atoms/VideoVimeo'
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Grid from '@material-ui/core/Grid';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.spacing(2),
+    [theme.breakpoints.up('sm')]: {
+      margin: 'auto',
+      padding: '0 20vw',
+      paddingBottom: theme.spacing(5),
+    },
+  },
+  title: {
+    fontFamily: 'Dosis',
+    fontSize: '1.5em',
+    fontWeight: '600',
+    padding: theme.spacing(3, 0),
+    [theme.breakpoints.up('sm')]: {
+      paddingTop: theme.spacing(6),
+    },
+  },
+  subTitle: {
+    fontSize: '1.1em',
+    fontWeight: '500',
+    padding: theme.spacing(2, 0),
+  },
+  text: {
+    fontSize: '0.9em',
+    fontWeight: '300',
+  },
+  teamworkingImg: {
+    padding: theme.spacing(2, 0),
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: 'inherit',
+    },
+  },
+  captureImg: {
+    padding: theme.spacing(2),
+    width: '100%',
+    objectFit: 'contain',
+  },
+  button: {
+    textTransform: 'inherit',
+    margin: theme.spacing(4,8),
+    padding: theme.spacing(1.2, 2),
+    borderRadius: '3px',
+  },
+  primary: {
+    color: theme.palette.primary.main,
+  },
+  bold: {
+    fontWeight: '500',
+  },
+  video: {
+    display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        paddingBottom: '55%', /* 16:9  58%*/
+        '& iframe': {
+            position: 'absolute',
+            top: 0,
+            left: 'calc(50% - 50vw)',
+            width: '100vw',
+            height: '100%',
+        },
+        [theme.breakpoints.up('md')]: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            paddingBottom: '55%', /* 16:9 */
+            '& iframe': {
+                position: 'absolute',
+                top: 0,
+                left: 'calc(50% - 27vw)',
+                width: '54vw',
+                height: '100%',
+            },
+        },
+  },
+  containerReactApp: {
+        width:'100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: '10vh',
+        paddingTop: theme.spacing(4),
+        backgroundColor: theme.palette.primary.main,
+        [theme.breakpoints.down('xs')]: {
+            height: '4vh',
+        },
+        [theme.breakpoints.up('md')]: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-around',
+            height: '4vh',
+            padding: theme.spacing(6, 1),
+            position: 'relative',
+        },
+    },
+  titleReactApp: {
+        fontFamily: 'Dosis',
+        fontSize: '1.5em',
+        fontWeight: '600',
+        paddingTop: theme.spacing(4),
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(4),
+        [theme.breakpoints.up('md')]: {
+            order: 1,
+            width: '20%',
+            textAlign: 'left',
+        },
+    },
+    buttonReactApp: {
+        textTransform: 'inherit',
+        margin: theme.spacing(0, 8),
+        padding: theme.spacing(1.2, 2),
+        [theme.breakpoints.up('md')]: {
+            order: 3,
+            margin: 'inherit',
+            marginRight: '5vw',
+        },
+    },
+    paper: {
+        padding: '6px 16px',
+      },
+    secondaryTail: {
+    backgroundColor: theme.palette.secondary.main,
+    },
+
+    media: {
+        width:350,
+        height: 140,
+    },
+
+});
+
+function Help(props) {
+  const { classes } = props;
+
+  return (
+    <Layout>
+    <Head>
+      <title key="title">Recrutement vidéo : fonctionnement – Talents Tube</title>
+    </Head>
+      <section className={classes.root}>
+        <Typography gutterBottom component="h1"
+          className={classes.title}>
+          Comment réussir votre CV vidéo <span className={classes.primary}>?</span>
+        </Typography>
+
+        <Typography
+          className={classes.text}
+          gutterBottom>
+          Le CV vidéo est <span className={classes.bold}>le meilleur moyen de mettre en image et d’illustrer votre expérience</span>, vos compétences et votre personnalité. S'il est de plus en plus prisé chez les recruteurs et les candidats, certains codes sont tout de même à respecter. Afin de réussir votre CV vidéo et mettre toutes les chances de votre côté, suivez les conseils de Talents Tube !
+        </Typography>
+        {/* <Typography gutterBottom component="h2"
+          className={classes.subTitle}>
+          Comment postuler à une offre d’emploi en vidéo
+        </Typography> */}
+        <VideoVimeo classesOverride={classes.videoVimeo} videoId="286344340" autoplay='0' />
+        <Typography
+          className={classes.text}
+          gutterBottom>
+         
+        </Typography>
+        <div  className={classes.containerReactApp}>
+        
+                        <Typography
+                            gutterBottom
+                            color="secondary"
+                            align="center"
+                            component="h3"
+                            className={classes.titleReactApp}
+                        >
+                            Écrivez un scénario
+                        </Typography>
+                        
+
+        </div>
+        <Grid container spacing={3}>
+        <Card className={classes.root}>
+            <CardActionArea>
+                <CardMedia
+                className={classes.media}
+                image=""
+                title="Contemplative Reptile"
+                />
+                <CardContent>
+                <Typography gutterBottom variant="h5" component="h2">
+                Écrivez un scénario
+                </Typography>
+                <Typography variant="body2" color="textSecondary" component="p">
+                Le scénario est le premier élément indispensable. Hiérarchisez toutes les informations que vous souhaitez aborder :
+                <ul>
+                <li> Présentation</li> 
+                <li>Formations </li>
+                <li>Expériences </li>
+                <li>Compétences </li>
+                <li>Personnalité </li>
+                <li>Loisirs / Passions </li>
+                </ul>
+                </Typography>
+                </CardContent>
+            </CardActionArea>
+            <CardActions>
+                <Button size="small" color="primary">
+                Share
+                </Button>
+                <Button size="small" color="primary">
+                Learn More
+                </Button>
+            </CardActions>
+        </Card>
+        </Grid>
+        <Grid container spacing={3}>
+            <Card className={classes.root}>
+                <CardActionArea>
+                    <CardMedia
+                    className={classes.media}
+                    image=""
+                    title="Contemplative Reptile"
+                    />
+                    <CardContent>
+                    <Typography gutterBottom variant="h5" component="h2">
+                    Passez à la réalisation
+                    </Typography>
+                    <Typography variant="body2" color="textSecondary" component="p">
+                    Le scénario est le premier élément indispensable. Hiérarchisez toutes les informations que vous souhaitez aborder :
+                    <ul>
+                    <li> Présentation</li> 
+                    <li>Formations </li>
+                    <li>Expériences </li>
+                    <li>Compétences </li>
+                    <li>Personnalité </li>
+                    <li>Loisirs / Passions </li>
+                    </ul>
+                    </Typography>
+                    </CardContent>
+                </CardActionArea>
+                <CardActions>
+                    <Button size="small" color="primary">
+                    Share
+                    </Button>
+                    <Button size="small" color="primary">
+                    Learn More
+                    </Button>
+                </CardActions>
+            </Card>
+
+            <Card className={classes.root}>
+                <CardActionArea>
+                    <CardMedia
+                    className={classes.media}
+                    image=""
+                    title="Contemplative Reptile"
+                    />
+                    <CardContent>
+                    <Typography gutterBottom variant="h5" component="h2">
+                    Passez à la réalisation
+                    </Typography>
+                    <Typography variant="body2" color="textSecondary" component="p">
+                    Le scénario est le premier élément indispensable. Hiérarchisez toutes les informations que vous souhaitez aborder :
+                    <ul>
+                    <li> Présentation</li> 
+                    <li>Formations </li>
+                    <li>Expériences </li>
+                    <li>Compétences </li>
+                    <li>Personnalité </li>
+                    <li>Loisirs / Passions </li>
+                    </ul>
+                    </Typography>
+                    </CardContent>
+                </CardActionArea>
+                <CardActions>
+                    <Button size="small" color="primary">
+                    Share
+                    </Button>
+                    <Button size="small" color="primary">
+                    Learn More
+                    </Button>
+                </CardActions>
+            </Card>
+
+            <Card className={classes.root}>
+                <CardActionArea>
+                    <CardMedia
+                    className={classes.media}
+                    image=""
+                    title="Contemplative Reptile"
+                    />
+                    <CardContent>
+                    <Typography gutterBottom variant="h5" component="h2">
+                    Passez à la réalisation
+                    </Typography>
+                    <Typography variant="body2" color="textSecondary" component="p">
+                    Le scénario est le premier élément indispensable. Hiérarchisez toutes les informations que vous souhaitez aborder :
+                    <ul>
+                    <li> Présentation</li> 
+                    <li>Formations </li>
+                    <li>Expériences </li>
+                    <li>Compétences </li>
+                    <li>Personnalité </li>
+                    <li>Loisirs / Passions </li>
+                    </ul>
+                    </Typography>
+                    </CardContent>
+                </CardActionArea>
+                <CardActions>
+                    <Button size="small" color="primary">
+                    Share
+                    </Button>
+                    <Button size="small" color="primary">
+                    Learn More
+                    </Button>
+                </CardActions>
+            </Card>
+        </Grid>
+        
+      </section>
+      <Footer />
+    </Layout>
+  );
+}
+
+Help.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Help);

webRTC/components/social.js

@@ -61,10 +61,10 @@ class Image extends React.Component {
         ],
 
         links: [
-            'https://www.talentstube.com/entreprise/5-e-declic/',
-            'https://www.facebook.com/edeclic/',
-            'https://twitter.com/edeclic',
-            'https://www.linkedin.com/company/edeclic/',
+            '#',
+            '#',
+            '#',
+            '#',
             // 
         ],