Correctif suite a recette V2.8.2

nextjs/actions/ads.js

@@ -1,13 +1,13 @@
 import {
-  FETCH_ADS_REQUEST,
-  FETCH_ADS_SUCCESS,
-  FETCH_ADS_FAILURE,
-  FETCH_AD_REQUEST,
-  FETCH_AD_SUCCESS,
-  FETCH_AD_FAILURE,
-  FETCH_EMPHASIS_ADS_REQUEST,
-  FETCH_EMPHASIS_ADS_SUCCESS,
-  FETCH_EMPHASIS_ADS_FAILURE,
+  FETCH_JOBS_REQUEST,
+  FETCH_JOBS_SUCCESS,
+  FETCH_JOBS_FAILURE,
+  FETCH_JOB_REQUEST,
+  FETCH_JOB_SUCCESS,
+  FETCH_JOB_FAILURE,
+  FETCH_EMPHASIS_JOBS_REQUEST,
+  FETCH_EMPHASIS_JOBS_SUCCESS,
+  FETCH_EMPHASIS_JOBS_FAILURE,
   CLEAR_AD,
   COUNT_AD_VIEW,
   TOGGLE_PROMOTED_FILTER_ADS
@@ -28,52 +28,52 @@ export const togglePromotedFilterRequest = () => ({
 
 //Ads list
 
-export const fetchAdsRequest = (payload) => ({
-    type: FETCH_ADS_REQUEST,
+export const fetchJobsRequest = (payload) => ({
+    type: FETCH_JOBS_REQUEST,
     payload
   });
   
-  export const fetchAdsSuccess = res => ({
-    type: FETCH_ADS_SUCCESS,
+  export const fetchJobsSuccess = res => ({
+    type: FETCH_JOBS_SUCCESS,
     res
   });
   
-  export const fetchAdsFailure = res => ({
-    type: FETCH_ADS_FAILURE,
+  export const fetchJobsFailure = res => ({
+    type: FETCH_JOBS_FAILURE,
     res
   });
 
   //Ads list
   
-  export const fetchEmphasisAdsRequest = (payload) => ({
-      type: FETCH_EMPHASIS_ADS_REQUEST,
+  export const fetchEmphasisJobsRequest = (payload) => ({
+      type: FETCH_EMPHASIS_JOBS_REQUEST,
       payload
     });
     
-    export const fetchEmphasisAdsSuccess = res => ({
-      type: FETCH_EMPHASIS_ADS_SUCCESS,
+    export const fetchEmphasisJobsSuccess = res => ({
+      type: FETCH_EMPHASIS_JOBS_SUCCESS,
       res
     });
     
-    export const fetchEmphasisAdsFailure = res => ({
-      type: FETCH_EMPHASIS_ADS_FAILURE,
+    export const fetchEmphasisJobsFailure = res => ({
+      type: FETCH_EMPHASIS_JOBS_FAILURE,
       res
     });
 
   //Single ad
 
-  export const fetchAdRequest = payload => ({
-    type: FETCH_AD_REQUEST,
+  export const fetchJobRequest = payload => ({
+    type: FETCH_JOB_REQUEST,
     payload
   });
   
-  export const fetchAdSuccess = res => ({
-    type: FETCH_AD_SUCCESS,
+  export const fetchJobSuccess = res => ({
+    type: FETCH_JOB_SUCCESS,
     res
   });
   
-  export const fetchAdFailure = res => ({
-    type: FETCH_AD_FAILURE,
+  export const fetchJobFailure = res => ({
+    type: FETCH_JOB_FAILURE,
     res
   });
 

nextjs/actions/answer.js

@@ -2,9 +2,9 @@ import {
   POST_AD_ANSWER_REQUEST,
   POST_AD_ANSWER_FAILURE,
   POST_AD_ANSWER_SUCCESS,
-  FETCH_ADS_ANSWER_REQUEST,
-  FETCH_ADS_ANSWER_SUCCESS,
-  FETCH_ADS_ANSWER_FAILURE,
+  FETCH_JOBS_ANSWER_REQUEST,
+  FETCH_JOBS_ANSWER_SUCCESS,
+  FETCH_JOBS_ANSWER_FAILURE,
   FETCH_ANSWER_REQUEST,
   FETCH_ANSWER_SUCCESS,
   FETCH_ANSWER_FAILURE,
@@ -47,19 +47,19 @@ export const postMessageAnswerSuccess = res => ({
 });
 
 
-export const fetchAdsAnsweredRequest = payload => ({
-  type: FETCH_ADS_ANSWER_REQUEST,
+export const fetchJobsAnsweredRequest = payload => ({
+  type: FETCH_JOBS_ANSWER_REQUEST,
   payload
 });
 
-export const fetchAdsAnsweredSuccess = res => ({
-  type: FETCH_ADS_ANSWER_SUCCESS,
+export const fetchJobsAnsweredSuccess = res => ({
+  type: FETCH_JOBS_ANSWER_SUCCESS,
   res
 });
 
 
-export const fetchAdsAnsweredFailure = errors => ({
-  type: FETCH_ADS_ANSWER_FAILURE,
+export const fetchJobsAnsweredFailure = errors => ({
+  type: FETCH_JOBS_ANSWER_FAILURE,
   errors
 });
 

nextjs/actions/media.js

@@ -5,9 +5,6 @@ import {
     UPLOAD_MEDIA_PRES_REQUEST,
     UPLOAD_MEDIA_PRES_FAILURE,
     UPLOAD_MEDIA_PRES_SUCCESS,
-    UPLOAD_MEDIA_CV_REQUEST,
-    UPLOAD_MEDIA_CV_FAILURE,
-    UPLOAD_MEDIA_CV_SUCCESS,
   
   } from "../types";
   
@@ -41,19 +38,6 @@ import {
     res
   });
 
-  export const uploadMediaCv = payload => ({
-    type: UPLOAD_MEDIA_CV_REQUEST,
-    payload
-  });
-  
-  export const uploadMediaCvFailure = errors => ({
-    type: UPLOAD_MEDIA_CV_FAILURE,
-    errors
-  });
-  
-  export const uploadMediaCvSuccess = res => ({
-    type: UPLOAD_MEDIA_CV_SUCCESS,
-    res
-  });
+
   
 

nextjs/actions/mediaCv.js

@@ -0,0 +1,25 @@
+import {
+    UPLOAD_MEDIA_CV_REQUEST,
+    UPLOAD_MEDIA_CV_FAILURE,
+    UPLOAD_MEDIA_CV_SUCCESS,
+  
+  } from "../types";
+  
+
+
+  export const uploadMediaCv = payload => ({
+    type: UPLOAD_MEDIA_CV_REQUEST,
+    payload
+  });
+  
+  export const uploadMediaCvFailure = errors => ({
+    type: UPLOAD_MEDIA_CV_FAILURE,
+    errors
+  });
+  
+  export const uploadMediaCvSuccess = res => ({
+    type: UPLOAD_MEDIA_CV_SUCCESS,
+    res
+  });
+  
+

nextjs/components/atoms/ChatCard.js

@@ -69,13 +69,23 @@ export default function ChatCard(props) {
     
     return (
         <Fragment>
-            <ChatCardMessage side={bubbleSide} firstname={props.message.sender.firstname} lastname={props.message.sender.lastname} picture={userPicture} video={(props.message.video) ? true : false} message={(props.message.video) ? (<VideoVimeo classesOverride={ classes.videoVimeo } videoId={Ar.last(_.split(props.message.video.cdn_url, '/'))} />) : props.message.content} messageSenderClass={messageSenderClass} bubbleClass={bubbleClass}/>
+            <ChatCardMessage side={bubbleSide} firstname={props.message.sender.firstname} lastname={props.message.sender.lastname} picture={userPicture} 
+            video={
+                (props.message.video) 
+                ? true :
+                 false} 
+            message={
+                (props.message.video) 
+                ? (<VideoVimeo classesOverride={ classes.videoVimeo } videoId={Ar.last(_.split(props.message.video.cdn_url, '/'))} />) 
+                : props.message.content}
+            messageTexte = {props.message.content} 
+            messageSenderClass={messageSenderClass} bubbleClass={bubbleClass}/>
 
             <Typography
                 className={classes.messageDate}
                 align="center"
             >
-                Envoyée le  {(new Date(props.message.c_time)).toLocaleDateString("fr-FR")} à {(new Date(props.message.c_time)).toLocaleTimeString("fr-FR")}
+                Envoyé le  {(new Date(props.message.c_time)).toLocaleDateString("fr-FR")} à {(new Date(props.message.c_time)).toLocaleTimeString("fr-FR")}
             </Typography>
         </Fragment>
     )

nextjs/components/atoms/ChatCardMessage.js

@@ -61,7 +61,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function ChatCardMessage(props) {
-    const { side, firstname, lastname, picture, message, video, messageSenderClass, bubbleClass } = props;
+    const { side, firstname, lastname, picture, message, messageTexte, video, messageSenderClass, bubbleClass } = props;
     const classes = useStyles();
 
     const userBubble = (video) ? classes.userBubble +' '+ classes.userBubbleVideo : classes.userBubble
@@ -69,7 +69,7 @@ export default function ChatCardMessage(props) {
             <section className={(side==='left')? classes.userMessageLeft : classes.userMessageRight }>
                 
                 {picture ?
-                    <img alt="talents-tube" src={`http://localhost/uploads/img/${picture}`} className={(side==='left')? classes.first+' '+classes.avatar : classes.second +' '+classes.avatar} />
+                    <img alt="talents-tube" src={`http://recruteur.talentstube.com/uploads/img/${picture}`} className={(side==='left')? classes.first+' '+classes.avatar : classes.second +' '+classes.avatar} />
                     :
                     <img alt="talents-tube" src='/static/images/default/account-avatar-default.svg' className={(side==='left')? classes.first +' '+ classes.avatar : classes.second+' '+classes.avatar } />
                 }
@@ -84,6 +84,7 @@ export default function ChatCardMessage(props) {
                             className={classes.messageContent}
                         >
                             {message}
+                            {messageTexte}
                         </Typography>
                     </div>
                 </div>

nextjs/components/atoms/IconText.js

@@ -6,13 +6,21 @@ import AssignmentIcon from '@material-ui/icons/Assignment';
 import RoomIcon from '@material-ui/icons/Room';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
 import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
+import Business from '@material-ui/icons/Business';
 import Typography from '@material-ui/core/Typography';
+import WatchLater from '@material-ui/icons/WatchLater';
+import Home from '@material-ui/icons/Home';
+import People from '@material-ui/icons/People';
 
 const variantIcon = {
   assignment: AssignmentIcon,
   room: RoomIcon,
   location_on: LocationOnIcon,
   business_center: BusinessCenterIcon,
+  business: Business,
+  watch_later: WatchLater,
+  home: Home,
+  people: People,
 };
 
 const styles = theme => ({

nextjs/components/atoms/IconTextInline.js

@@ -4,14 +4,22 @@ import { withStyles } from '@material-ui/core/styles';
 import AssignmentIcon from '@material-ui/icons/Assignment';
 import RoomIcon from '@material-ui/icons/Room';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
+import HomeOnIcon from '@material-ui/icons/Home';
+import WatchLater from '@material-ui/icons/WatchLater';
 import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
+import People from '@material-ui/icons/People';
 import Typography from '@material-ui/core/Typography';
+import Business from '@material-ui/icons/Business';
 
 const variantIcon = {
   assignment: AssignmentIcon,
   room: RoomIcon,
   location_on: LocationOnIcon,
+  home: HomeOnIcon,
+  watch_later: WatchLater,
   business_center: BusinessCenterIcon,
+  business: Business,
+  people: People,
 };
 
 const styles = theme => ({

nextjs/components/atoms/JobPosting.js

@@ -5,19 +5,24 @@ const JobPosting = props => {
     return (
         
             <JobPostingJsonLd
-        datePosted="2020-01-06T03:37:40Z"
+        datePosted={props.job_date}
         description={props.job_description}
         hiringOrganization={{
             name: props.job_brand,
             sameAs: props.job_brand_link,
         }}
         jobLocation={{
-            addressLocality: props.job_location,
+            addressLocality: props.job_ville,
+            addressRegion: props.job_dept,
+            // postalCode: props.job_location,
+            streetAddress: props.job_location,
+            addressCountry: props.job_pays,
 
         }}
         title={props.job_title}
-        validThrough="2020-01-06"
+        validThrough={props.job_date_fin}
         applicantLocationRequirements="FR"
+        employmentType = {props.job_contract_type + ","+props.job_temps_type }
         />
         
         

nextjs/components/atoms/NoResult.js

@@ -8,7 +8,7 @@ const styles = theme => ({
         padding: theme.spacing(0, 4),
     },
     text: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1,2em',
         fontWeight: '500',
         color: theme.palette.primary.main,

nextjs/components/atoms/OgHead.js

@@ -1,17 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Head from 'next/head'
+const urlEnv = process.env.NODE_ENV;
 
 const OgHead = props => {
     return (
         <Head>
             <title key="title">{props.seo_title}</title>
-            <meta name="robots" content="noindex, nofollow"></meta>
-            <meta name="description" kenoindexy="description" content={props.seo_title} />
+            
+            <meta name="description" kenoindexy="description" content={props.seo_description} />
             <meta name="keywords" content={props.seo_key}/>
             <meta key="og:url" property="og:url" content={props.seo_url} />
             <meta key="og:type" property="og:type" content="article" />
             <meta key="og:title" property="og:title" content={props.seo_title} />
+            <meta property="fb:app_id" content="1800752833559014" data-react-helmet="true"></meta>
             <meta
                 key="og:description"
                 property="og:description"
@@ -19,12 +21,22 @@ const OgHead = props => {
             />
             <meta name="keywords" content={props.seo_key}/>
             <meta key="og:image" property="og:image" content={props.image} />
+            <meta key="og:image:width" property="og:image:width" content="355" />
+            <meta key="og:image:height" property="og:image:height" content="200" />
             <meta name="twitter:card" content="summary"/>
             <meta name="twitter:site" content="@TalentsTube"/>
             <meta name="twitter:title" content={props.seo_title}/>
-            <meta name="twitter:description" content={props.seo_title}/>
+            <meta name="twitter:description" content={props.seo_description}/>
             <meta name="twitter:image" content={props.image}/>
-            <link rel="canonical" href={ props.seo_url} />    
+            
+            if (urlEnv=="development") {
+                <meta name="robots" content="noindex, nofollow"></meta>
+            }
+            
+            {/* <meta httpEquiv='cache-control' content='no-store,no-cache'></meta>
+            <meta httpEquiv='expires' content='0'></meta>
+            <meta httpEquiv='pragma' content='no-cache'></meta> */}
+            <link rel="canonical" href={ props.seo_url} />  
         </Head>
         
     )

nextjs/components/atoms/SimpleCollapse.js

@@ -94,7 +94,7 @@ const useStyles = makeStyles(theme => ({
 
 export default function SimpleCollapse(props) {
   const classes = useStyles();
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(true);
 
   function handleExpandClick() {
     setExpanded(!expanded);
@@ -111,12 +111,10 @@ export default function SimpleCollapse(props) {
       </Collapse>
 
       <CardActions disableSpacing classes={{ root: classes.rootCardAction }}>
-
-
         <IconButton
           onClick={handleExpandClick}
           aria-expanded={expanded}
-          aria-label="Afficher plus"
+          aria-label="Afficher plus "
         > <Typography className={classes.displayMore}>
             {(!expanded) ? 'Afficher plus' : 'Afficher moins'}
           </Typography>

nextjs/components/atoms/VideoVimeo.js

@@ -72,7 +72,7 @@ export default function VideoVimeo(props) {
         
         <section className={className +' '+classesOverride}>
             <iframe className='player' 
-            src={"https://player.vimeo.com/video/"+ videoId + options+"?autoplay="+autoplay} 
+            src={"https://player.vimeo.com/video/"+ videoId + options+"?texttrack=fr&autoplay="+autoplay} 
             frameBorder="0" 
             title={title} 
             webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen></iframe>

nextjs/components/atoms/theme.js

@@ -24,8 +24,8 @@ const theme = createMuiTheme({
     },
     offerlistitem: {
       title: '#1E2327',
-      icon: '#BBBCBD',
-      text: '#787B7D',
+      icon: '#1E2327',
+      text: '#1E2327',
     },
     answer: {
       main: '#E8E8E8',

nextjs/components/organisms/AccountEtape1.js

@@ -7,8 +7,11 @@ import { connect } from 'react-redux'
 import { updateUserRequest } from '../../actions/user'
 import getConfig from 'next/config'
 import Validator from "validator";
+import AccountProfile from '../organisms/AccountProfile';
 import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
-
+import {
+    Button,
+} from '@material-ui/core';
 
 const styles = theme => ({
     container: {
@@ -41,7 +44,7 @@ const styles = theme => ({
         },
     },
     textFieldSmall: {
-        width: '32%',
+        width: '48%',
         '&:disabled': {
             color: theme.palette.secondary.dark,
         },
@@ -58,7 +61,7 @@ const styles = theme => ({
 const { publicRuntimeConfig } = getConfig();
 
 //https://xd.adobe.com/view/ba98331a-9145-4d67-7e27-25a36e519ef4-cca9/screen/a96779d7-bdb3-410a-8f19-e6987acb98ee/Candidature-Step-3
-class Accountdetails extends Component {
+class AccountEtape1 extends Component {
 
     constructor(props) {
         super(props);
@@ -110,7 +113,8 @@ class Accountdetails extends Component {
     onBlur(e) {
         console.log("blur")
         this.setState({ [e.target.name]: e.target.value });
-        this.soumettre();
+        
+        this.soumettre(e.target.name, "unitaire");
       }     
     
 
@@ -156,12 +160,16 @@ class Accountdetails extends Component {
     onSubmit = (e) => {
         
         e.preventDefault();
-        this.soumettre(e);
+        console.log("submit")
+        console.log(e.keyCode)
+        
+        this.soumettre(e.target.name, "global")
         
     }
-    soumettre(e){
-        
-        const errors = this.validate(this.state);
+    soumettre(champ, type){
+        console.log("soumettre");
+        console.log(champ);
+        const errors = this.validate(this.state, champ, type);
         const success = {};
         this.setState({ errors });
         if (!this.state.errors || !this.state.errors.message){
@@ -189,18 +197,19 @@ class Accountdetails extends Component {
             
         }
     }
-
-    validate = data => {
+    validate(data,champ, type){
+        console.log("valdiate")
+        console.log(champ);
         const errors = {};
         errors.message ="";
         //if (!Validator.isEmail(data.currentJob)) errors.message += "Le poste actuel doit etre un email\n";
-        if (!data.firstname || data.firstname==="") errors.message += "Veuillez saisir votre prénom<br />";
-        if (!data.lastname || data.lastname==="") errors.message += " Veuillez saisir saisir votre nom<br />";
-        if (!data.phone || data.phone==="") errors.message += "Veuillez saisir un numéro de téléphone valide<br />";
-        if (!data.currentJob || data.currentJob==="") errors.message += "Veuillez saisir votre intitulé de poste actuel ou poste recherché<br />";
-        if ((data.zipCode && data.zipCode!="") && !Validator.isPostalCode(data.zipCode, "FR")) errors.message += "Le code postal n'est pas correct<br />";
-        if ((data.website && data.website!="") && !Validator.isURL(data.website)) errors.message += " Veuillez ajouter un site internet avec une url valide<br />";
-        if (!Validator.isMobilePhone(data.phone, "fr-FR") && !Validator.isNumeric(data.phone, "fr-FR")) errors.message += "Le téléphone n'est pas correct<br />";
+        if (type=="global" || (champ=="firstname" &&  data.firstname=="")) errors.message += "Veuillez saisir votre prénom<br />";
+        if (type=="global" || (champ=="lastname" &&  data.lastname=="")) errors.message += " Veuillez saisir votre nom<br />";
+        if (type=="global" || (champ=="phone" && data.phone=="")) errors.message += "Veuillez saisir un numéro de téléphone<br />";
+        if (type=="global" || (champ=="currentJob" &&  data.currentJob=="")) errors.message += "Veuillez saisir votre intitulé de poste actuel ou poste recherché<br />";
+        if (type=="global" || (champ=="zipCode" && (data.zipCode && data.zipCode!="") && !Validator.isPostalCode(data.zipCode, "FR"))) errors.message += "Le code postal n'est pas correct<br />";
+        // if ((data.website && data.website!="") && !Validator.isURL(data.website)) errors.message += " Veuillez ajouter un site internet avec une url valide<br />";
+         if (!Validator.isMobilePhone(data.phone, "fr-FR") && !Validator.isNumeric(data.phone, "fr-FR")) errors.message += "Le téléphone n'est pas correct<br />";
         //console.log(errors.email);
         
         return errors;
@@ -221,18 +230,18 @@ class Accountdetails extends Component {
     
 
     AfficherSuccess() {
-      if (this.state.success && this.state.success.length != 0 && this.state.success.message != "") {      
-          return (
-            <Snackbar open={open} autoHideDuration={1000} onClose={() => this.setState({open: false})}>
-              <Alert onClose={() => this.setState({open: false})} severity="success">
-                {ReactHtmlParser(this.state.success.message)}
-              </Alert>
-            </Snackbar>
+    //   if (this.state.success && this.state.success.length != 0 && this.state.success.message != "") {      
+    //       return (
+    //         <Snackbar open={open} autoHideDuration={1000} onClose={() => this.setState({open: false})}>
+    //           <Alert onClose={() => this.setState({open: false})} severity="success">
+    //             {ReactHtmlParser(this.state.success.message)}
+    //           </Alert>
+    //         </Snackbar>
             
               
-          );
+    //       );
         
-      }
+    //   }
       return "";
     }
 
@@ -249,9 +258,17 @@ class Accountdetails extends Component {
         this.props.updateUserPictureRequest(data)
     }
 
+    
+
     render() {
         const { classes, user } = this.props
         const logoUrl = user.picture;
+        function refresh() {
+            document
+                .location
+                .reload(true);
+            
+        }
         return (
           <section className={classes.container}>
             <form className={classes.form}
@@ -351,7 +368,7 @@ class Accountdetails extends Component {
                         className={classes.textField}
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
-                        value={this.state.currentJob && this.state.currentJob !='null' ? this.state.currentJob : ''}
+                        value={this.state.currentJob =='null' || this.state.currentJob ==''  ? '' :this.state.currentJob}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
                     />
@@ -363,7 +380,7 @@ class Accountdetails extends Component {
                         className={classes.textField}
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
-                        value={this.state.address1 && this.state.address1 !='null' ? this.state.address1 : ''}
+                        value={this.state.address1 ? this.state.address1 : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
                     />
@@ -375,7 +392,7 @@ class Accountdetails extends Component {
                         className={classes.textField}
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
-                        value={this.state.address2 && this.state.address2 !='null' ? this.state.address2 : ''}
+                        value={this.state.address2 ? this.state.address2  : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
                     />    
@@ -387,7 +404,7 @@ class Accountdetails extends Component {
                         className={classes.textField}
                         classes={{ root: classes.textFieldSmall }}
                         variant="outlined"
-                        value={this.state.zipCode && this.state.zipCode !='null' ? this.state.zipCode : ''}
+                        value={this.state.zipCode ? this.state.zipCode : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
                     /> 
@@ -399,7 +416,7 @@ class Accountdetails extends Component {
                         className={classes.textField}
                         classes={{ root: classes.textFieldSmall }}
                         variant="outlined"
-                        value={this.state.city && this.state.city !='null' ? this.state.city : ''}
+                        value={this.state.city ? this.state.city : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
                     />      
@@ -411,7 +428,7 @@ class Accountdetails extends Component {
                         className={classes.textField}
                         classes={{ root: classes.textFieldSmall }}
                         variant="outlined"
-                        value={this.state.country && this.state.country !='null' ? this.state.country : ''}
+                        value={this.state.country ? this.state.country : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
                     />
@@ -425,7 +442,7 @@ class Accountdetails extends Component {
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
                         placeholder="http://www.linkedin.com/in/"
-                        value={this.state.linkedin && this.state.linkedin !='null' ? this.state.linkedin : ''}
+                        value={this.state.linkedin =='null' || this.state.linkedin ==''  ? '' :this.state.linkedin}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
 
@@ -439,7 +456,7 @@ class Accountdetails extends Component {
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
                         placeholder="http://twitter.com/.."
-                        value={this.state.twitter && this.state.twitter !='null' ? this.state.twitter : ''}
+                        value={this.state.twitter =='null' || this.state.twitter ==''  ? '' :this.state.twitter}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
                     />
@@ -452,10 +469,18 @@ class Accountdetails extends Component {
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
                         placeholder="http://monsite.fr"
-                        value={this.state.website && this.state.website !='null' ? this.state.website : ''}
+                        value={this.state.website =='null' || this.state.website ==''  ? '' :this.state.website}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
                     />
+                    <Button
+                            type="submit"
+                            variant="contained"
+                            color="primary"
+                            
+                            className={classes.button}>
+                            Enregistrer
+                        </Button>
                 </form>
                 {/* <div id="F" className={classes.foot}>
                     <Button variant="contained" className={classes.button + ' cypButtonSendApplication'} onClick={this.onSubmit}>Mettre à jour!</Button>
@@ -475,4 +500,4 @@ function mapStateToProps(state, ownProps) {
     };
 }
 
-export default withStyles(styles)(connect(mapStateToProps, {  updateUserRequest })(Accountdetails))
+export default withStyles(styles)(connect(mapStateToProps, {  updateUserRequest })(AccountEtape1));

nextjs/components/organisms/AccountEtape2.js

@@ -12,7 +12,7 @@ import {fetchCompanyRequest} from '../../actions/companies'
 import {fetchCurrentUserRequest} from '../../actions/user'
 import VideoVimeo from '../atoms/VideoVimeo'
 import Router from 'next/router'
-import Loader from '../templates/loader'
+import LoaderVideo from '../templates/loaderVideo'
 import Ar from "lodash/array"
 import Snackbar from '@material-ui/core/Snackbar';
 import { Alert, AlertTitle } from '@material-ui/lab';
@@ -71,6 +71,16 @@ const styles = theme => ({
             backgroundColor:  "#25D89A",
         }
     },
+    captureButton: {
+        color: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.main,
+        padding: theme.spacing(5, 2),
+        margin: theme.spacing(1),
+        boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.14)',
+        '&:hover': {
+          backgroundColor: theme.palette.primary.main,
+        },
+      },
     importButton: {
         color: theme.palette.primary.main,
         backgroundColor:  theme.palette.secondary.main,
@@ -94,6 +104,9 @@ const styles = theme => ({
         fontSize: '2.5em',
         color: "#1689FB",
         textAlign: "right"
+    },
+    buttons :{
+        display: "inline-table",
     }
 });
 const Recorder = dynamic(() => import ('../organisms/Recorder'), {ssr: false})
@@ -109,7 +122,7 @@ class Etape2 extends React.Component {
     
 
     componentDidMount() {
-        localStorage.setItem('loginRedirect', window.location)
+        localStorage.setItem('loginRedirect', window.location.pathname)
 
         if (!!!localStorage.getItem('ttJWT')) {
             Router.push("/Login")
@@ -135,7 +148,7 @@ class Etape2 extends React.Component {
         //window.location.reload(false);
         if (nextProps.media.status === 'success') {
             const success = {};
-            success.message ="Vidéo mis à jour";
+            success.message ="Vidéo mise à jour";
             this.setState({ success });
             this.setActiveStep(1);
         }
@@ -197,7 +210,7 @@ class Etape2 extends React.Component {
             <section className={classes.container}>
                 <Fragment>
                     {this.AfficherSuccess()}
-                    { loading ? <Loader/>  : <div></div> }
+                    { loading ? <LoaderVideo textePrincipal="Votre vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/>  : <div></div> }
                     
                     <div className={classes.root}>
                     <Hidden xsUp>
@@ -208,11 +221,43 @@ class Etape2 extends React.Component {
                         <Grid container
                             justify="center"
                             alignItems="center" 
-                            spacing={2}>
+                            spacing={2}
+                            className={classes.buttons}>
                             <Grid item xs={12} sm={12} md={12} lg={6} lg={6}>
+                                
+
+
+                            { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
+                                (
+                                    <Fragment >
+                                    <input
+                                        type="file" accept="video/*" capture="camcorder"
+                                        className={classes.input}
+                                        style={{ display: 'none' }}
+                                        id="record-button-file"
+                                        multiple
+                                        onChange={this.inputCamRecorderChange}
+                                    />
+                                    <label htmlFor="record-button-file">
+                                        <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
+                                        <img alt="talents-tube" src='/static/images/capture.svg' className={classes.iconButton} />
+                                        <Typography align="left" className={classes.textButton}>
+                                            Je <span className={classes.underlined}>réalise</span> ma vidéo de présentation
+                                        </Typography>
+                                        <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                                        </Button>
+                                    </label>
+                                    </Fragment>
+                                ):
+                                (
+
+                                
                                 <div className={classes.recorderContainer}>
                                     <Recorder uploader={this.props.uploadMediaPres} titreBouton="Remplacer ma vidéo"/>
+                                    
                                 </div>
+                                )
+                            }
                             </Grid>
                             <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
                                 <div> 
@@ -253,7 +298,7 @@ class Etape2 extends React.Component {
                                                     src='/statique/images/Import.svg'
                                                     className={classes.iconButton}/>
                                                 <Typography align="left" className={classes.textButton}>
-                                                    J'<span className={classes.underlined}>importe</span> ma vidéo de réponse
+                                                    J'<span className={classes.underlined}>importe</span> ma vidéo de présentation
 
                                                 </Typography>
                                                 <KeyboardArrowDownIcon className={classes.InputKeyboardArrowDownIcon}/>

nextjs/components/organisms/AccountEtape3.js

@@ -2,13 +2,13 @@ import React, { Fragment } from 'react';
 import { connect } from "react-redux";
 import { fetchCurrentUserRequest } from '../../actions/user'
 import { fetchCompanyRequest } from '../../actions/companies'
-import { uploadMediaCv } from '../../actions/media'
+import { uploadMediaCv } from '../../actions/mediaCv'
 import { withStyles } from '@material-ui/core/styles'
 import { makeStyles } from '@material-ui/styles';
 import { Button, Typography, Divider, Hidden } from '@material-ui/core';
 import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import Loader from '../../components/templates/loader'
+import LoaderVideo from '../../components/templates/loaderVideo'
 import Snack from '../../components/atoms/snack';
 import Snackbar from '@material-ui/core/Snackbar';
 import { Alert, AlertTitle } from '@material-ui/lab';
@@ -47,7 +47,7 @@ const styles = theme => ({
     backgroundColor:  theme.palette.secondary.main,
     padding: theme.spacing(3, 2),
     margin: theme.spacing(1),
-    width: "400px",
+    width: "370px",
     boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
             'px rgba(0, 0, 0, 0.14)',
     '&:hover': {
@@ -69,7 +69,7 @@ class Etape3 extends React.Component {
   };
 
   componentDidMount() {
-    localStorage.setItem('loginRedirect', window.location)
+    localStorage.setItem('loginRedirect', window.location.pathname)
 
     if(!!!localStorage.getItem('ttJWT'))
     {
@@ -134,22 +134,44 @@ class Etape3 extends React.Component {
 
   AfficherLienCv() {
     console.log("afficher lien");
-     if (this.props.user.cv !="") {
+     if (this.state.cvLink !="") {
       
         return (
           
           <Fragment>
             <Hidden>&nbsp;</Hidden>
             <Hidden>&nbsp;</Hidden>
-            <Divider style={{width:400+"px"}}/>
+            
+            <Hidden>&nbsp;</Hidden>
+            <Hidden>&nbsp;</Hidden>
+            <Card  variant="" style={{
+              width:370+"px", 
+              boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
+                      'px rgba(0, 0, 0, 0.14)',
+              marginLeft : '10px',
+              marginTop:'10px'
+              
+              }}>
             <Hidden>&nbsp;</Hidden>
-            <Card  variant="outlined" style={{width:400+"px"}}>
               <CardActions>
-                <Button size="small">Mon CV numérique</Button>
+                <Button size="small">MON CV</Button>
               </CardActions>
               <CardContent>
-                <Typography>
-                  <a href={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink} target="_blank">Lien vers le cv téléchargé</a><br />
+                <Typography >
+                  <a href={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink} 
+                  target="_blank"
+                  style={{ 
+                    color:'#1689FB',
+                    '&:hover': {
+                      color: '#1689FB',
+                    },
+                    fontWeight: '700',
+                    fontSize: '1em',
+                    }}
+                  >
+                    Visualiser mon CV
+                    </a>
+                    <br />
                 {/* <a href="https://www.permatheque.fr/PDF/mansobufukuoka-larevolutiondunseulbrindepaille.pdf" target="_blank">lien</a> */}
                 </Typography>
               </CardContent>
@@ -169,7 +191,7 @@ class Etape3 extends React.Component {
     return (
       <Fragment>
       { loading ? 
-        <Loader /> :
+        <LoaderVideo textePrincipal="Votre candidature vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/> :
         <Fragment>
           {this.AfficherSuccess()}
           
@@ -185,11 +207,13 @@ class Etape3 extends React.Component {
             <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
               <img alt="talents-tube" src='/statique/images/Import-cv-candidat.svg' className={classes.iconButton} />
               <Typography  className={classes.textButton}>
-                J'<span className={classes.underlined}>importe</span> mon CV au format PDF
+                J'<span className={classes.underlined}>importe</span> mon CV 
               </Typography>
               <KeyboardArrowDownIcon className={ classes. InputKeyboardArrowDownIcon }/>
             </Button>
+            
           </label>
+          <Hidden>&nbsp;</Hidden>
           {this.AfficherLienCv()}
           
         </Fragment>
@@ -208,7 +232,7 @@ Etape3.getInitialProps = function (context) {
      context.store.dispatch(fetchCurrentUserRequest())
 
   if(!!adId)
-    context.store.dispatch(fetchAdRequest(adId))
+    context.store.dispatch(fetchJobRequest(adId))
   else if(!!companyId)
     context.store.dispatch(fetchCompanyRequest(companyId))
 
@@ -222,7 +246,7 @@ function mapStateToProps(state) {
   // console.log(state.media.message)
   return {
     user: state.user ,
-    cvLink : state.media.message,
+    cvLink : state.mediaCv.message,
     loading: !!state.media.loading,
     cv : true,
     //errors:  errorMessageSelector(state),

nextjs/components/organisms/AccountProfile.js

@@ -1,28 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import AccountStep from "../../components/organisms/AccountStep";
+// import AccountStep from "../../components/organisms/AccountStep";
 import AccountEtape1 from '../organisms/AccountEtape1';
 import AccountEtape2 from '../organisms/AccountEtape2';
 import AccountEtape3 from '../organisms/AccountEtape3';
 import {withStyles} from '@material-ui/core/styles';
-import Switch from '@material-ui/core/Switch';
+// import Switch from '@material-ui/core/Switch';
 import PhoneIcon from '@material-ui/icons/Phone';
 import MailIcon from '@material-ui/icons/Mail';
 import PublicIcon from '@material-ui/icons/Public';
+import DuoIcon from '@material-ui/icons/Duo';
 import LinkedInIcon from '@material-ui/icons/LinkedIn';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormControl from '@material-ui/core/FormControl';
+import Facebook from '@material-ui/icons/Facebook';
+// import FormGroup from '@material-ui/core/FormGroup'; import FormControlLabel
+// from '@material-ui/core/FormControlLabel'; import FormControl from
+// '@material-ui/core/FormControl';
 import {updateUserRequest, updateUserPictureRequest} from '../../actions/user'
 import {makeStyles} from '@material-ui/styles';
 import {connect} from 'react-redux'
 import getConfig from 'next/config'
 import BottomNavigation from '@material-ui/core/BottomNavigation';
-import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+// import BottomNavigationAction from
+// '@material-ui/core/BottomNavigationAction';
 import RefreshIcon from '@material-ui/icons/Refresh';
-import FavoriteIcon from '@material-ui/icons/Favorite';
-import LocationOnIcon from '@material-ui/icons/LocationOn';
+// import FavoriteIcon from '@material-ui/icons/Favorite'; import LocationOnIcon
+// from '@material-ui/icons/LocationOn';
 
 import Box from '@material-ui/core/Box';
 
@@ -78,6 +81,29 @@ const useStyles = makeStyles(theme => ({
     progress: {
         marginTop: theme.spacing(2)
     },
+    information: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.palette.primary.main,
+        [
+            theme
+                .breakpoints
+                .up('md')
+        ]: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'space-around',
+            backgroundColor: theme.palette.primary.main,
+            padding: theme.spacing(7, 7)
+        },
+        '& a': {
+            textDecoration: 'none'
+        }
+    },
+    texteBlanc: {
+        color: "#fff"
+    },
     uploadButton: {
         marginRight: theme.spacing(2)
     },
@@ -226,8 +252,10 @@ const AccountProfile = props => {
     function isStepComplete(step) {
         return completed.has(step);
     }
-    function refresh (){
-        document.location.reload(true);
+    function refresh() {
+        document
+            .location
+            .reload(true);
         console.log("refresh")
     }
 
@@ -241,45 +269,99 @@ const AccountProfile = props => {
             <Grid item lg={3} md={6} xl={4} xs={12}>
                 <Card {...rest} className={clsx(classes.root, className)}>
                     <CardContent>
+                        <div id="fb-root"></div>
+                        <script
+                            async
+                            defer
+                            crossorigin="anonymous"
+                            src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v8.0&appId=2332071840142634&autoLogAppEvents=1"
+                            nonce="O28M4TTm"></script>
                         <div className={classes.details}>
                             <div>
                                 <Typography gutterBottom variant="h5">
-                                    {user.lastname} &nbsp;
-                                    {user.firstname} <a href="#" onClick={refresh}><RefreshIcon  className={classes.menuButton}/></a>
+                                    {user.lastname}
+                                    &nbsp; {user.firstname}
+                                    <a href="#" onClick={refresh}><RefreshIcon className={classes.menuButton}/></a>
                                 </Typography>
                                 <Typography
                                     className={classes.locationText}
                                     color="textSecondary"
                                     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é'}
+                                    <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">Lien sur mon linkedIn</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é'}<br/>
+                                    
+                                    
+                                    
                                 </Typography>
-                                <Typography className={classes.dateText} color="textSecondary" variant="body1"></Typography>
+                                
                             </div>
-                            <Avatar
+                            {/* <Avatar
                                 className={classes.avatar}
-                                src={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentUrl + logoUrl}/>
+                                src={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentUrl + logoUrl}/> */}
+                        </div>
+                        <div>
+                        <Box m={3}/>
+                        <Divider/>
+                        <Box m={3}/>
+                        <Typography
+                                    className={classes.locationText}
+                                    color="textSecondary"
+                                    variant="body1">
+                                    
+                                    <DuoIcon className={classes.menuButton}/>
+                                    : {(user.alias && user.alias != '' && user.alias != 'null')
+                                        ? <a
+                                                href={publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias}
+                                                target="_blank">Voir mon profil TalentsTube
+                                            </a>
+                                        : 'Non renseigné'}<br/>
+                                    <div
+                                        class="fb-share-button"
+                                        data-href={publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias}
+                                        data-layout="button_count"
+                                        data-size="small">
+
+                                        <Facebook className={classes.menuButton}/>
+                                        :
+                                        <a
+                                            target="_blank"
+                                            href={"https://www.facebook.com/sharer/sharer.php?u=" + publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias + "%2F&amp;src=sdkpreparse"}
+                                            class="fb-xfbml-parse-ignore"> Partager mon profil
+                                        </a>
+                                    </div>
+                                </Typography>
                         </div>
                         {/* <div className={classes.progress}>
                             <Typography variant="body1">Etat du Profil: 70%</Typography>
                             <LinearProgress value={70} variant="determinate"/>
                         </div> */}
+
                     </CardContent>
-                    <Box m={2} />
+                    <Box m={2}/>
                     <Divider/>
-                    <Box m={2} />
+                    <Box m={2}/>
+                    <div className={classes.information}>
+                        <Typography className={classes.texteBlanc} align="left"></Typography>
+                    </div>
                     {/* <CardActions>
                         <Button className={classes.uploadButton} color="primary" variant="text">
                             Remplacer une photo de profil
                         </Button>
                         <Button variant="text">Supprimer photo de profil</Button>
                     </CardActions> */}
-                    <Box m={1} />
+                    <Box m={1}/>
                     <Divider/>
-                    <Box m={1} />
-                    {/* <CardContent>
+                     {/* <CardContent>
                         <Typography variant="body1"></Typography>
                         <FormControlLabel
                             value="end"
@@ -294,9 +376,9 @@ const AccountProfile = props => {
                             labelPlacement="start"/>
 
                     </CardContent> */}
+
                     
-                    <Box m={3} />
-                    <Divider/>
+
                     <CardActions>
 
                         <Stepper nonLinear activeStep={activeStep} orientation="vertical">
@@ -356,29 +438,29 @@ const AccountProfile = props => {
                         </div>
 
                     </div>
-
-                </Card>
-                <Box m={2} />
+                    <Box m={2}/>
                 <CardContent>
-                  <BottomNavigation className={classes.stickToBottom}>
-                      <Button
-                          disabled={activeStep === 0}
-                          onClick={handleBack}
-                          className={classes.button}>
-                          Etape précédente
-                      </Button>
-                      <Button
-                          variant="contained"
-                          color="primary"
-                          onClick={handleNext}
-                          className={classes.button}>
-                          Etape suivante
-                      </Button>
-                      {/* <BottomNavigationAction label="Recents" icon={< RestoreIcon />}/>
+                    <BottomNavigation className={classes.stickToBottom}>
+                        <Button
+                            disabled={activeStep === 0}
+                            onClick={handleBack}
+                            className={classes.button}>
+                            Etape précédente
+                        </Button>
+                        <Button
+                            variant="contained"
+                            color="primary"
+                            onClick={handleNext}
+                            className={classes.button}>
+                            Etape suivante
+                        </Button>
+                        {/* <BottomNavigationAction label="Recents" icon={< RestoreIcon />}/>
                       <BottomNavigationAction label="Favorites" icon={< FavoriteIcon />}/>
                       <BottomNavigationAction label="Nearby" icon={< LocationOnIcon />}/> */}
-                  </BottomNavigation>
+                    </BottomNavigation>
                 </CardContent>
+                </Card>
+                
             </Grid>
             <Grid item lg={9} md={6} xl={8} xs={12}>
                 {getStepContent(activeStep)}

nextjs/components/organisms/AccountProfileCandidature.js

@@ -0,0 +1,306 @@
+import React, {Fragment} from 'react';
+import {Hidden} from '@material-ui/core';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+// import AccountStep from "../../components/organisms/AccountStep";
+import AccountEtape1 from './AccountEtape1';
+import AccountEtape2 from './AccountEtape2';
+import AccountEtape3 from './AccountEtape3';
+import {withStyles} from '@material-ui/core/styles';
+// import Switch from '@material-ui/core/Switch';
+import PhoneIcon from '@material-ui/icons/Phone';
+import MailIcon from '@material-ui/icons/Mail';
+import PublicIcon from '@material-ui/icons/Public';
+import DuoIcon from '@material-ui/icons/Duo';
+import LinkedInIcon from '@material-ui/icons/LinkedIn';
+import Facebook from '@material-ui/icons/Facebook';
+// import FormGroup from '@material-ui/core/FormGroup'; import FormControlLabel
+// from '@material-ui/core/FormControlLabel'; import FormControl from
+// '@material-ui/core/FormControl';
+import {updateUserRequest, updateUserPictureRequest} from '../../actions/user'
+import {makeStyles} from '@material-ui/styles';
+import {connect} from 'react-redux'
+import getConfig from 'next/config'
+import Router from 'next/router'
+
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+// import BottomNavigationAction from
+// '@material-ui/core/BottomNavigationAction';
+import RefreshIcon from '@material-ui/icons/Refresh';
+// import FavoriteIcon from '@material-ui/icons/Favorite'; import LocationOnIcon
+// from '@material-ui/icons/LocationOn';
+
+import Box from '@material-ui/core/Box';
+
+import {
+    Card,
+    CardActions,
+    CardContent,
+    Avatar,
+    Typography,
+    Divider,
+    Button,
+    LinearProgress,
+    Stepper,
+    Step,
+    StepLabel,
+    StepContent,
+    StepButton,
+    Paper,
+    Grid
+} from '@material-ui/core';
+
+const styles = theme => ({
+    container: {
+        width: '100%'
+    },
+    button: {
+        textTransform: 'inherit',
+        marginLeft: theme.spacing(8),
+        marginRight: theme.spacing(8),
+        padding: theme.spacing(1.2, 2),
+        color: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.important
+    },
+    stickToBottom: {
+        width: '100%',
+        position: 'fixed',
+        bottom: 0
+    }
+});
+
+const useStyles = makeStyles(theme => ({
+    root: {},
+    details: {
+        display: 'flex'
+    },
+    avatar: {
+        marginLeft: 'auto',
+        height: 110,
+        width: 100,
+        flexShrink: 0,
+        flexGrow: 0
+    },
+    progress: {
+        marginTop: theme.spacing(2)
+    },
+    information: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.palette.primary.main,
+        [
+            theme
+                .breakpoints
+                .up('md')
+        ]: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'space-around',
+            backgroundColor: theme.palette.primary.main,
+            padding: theme.spacing(7, 7)
+        },
+        '& a': {
+            textDecoration: 'none'
+        }
+    },
+    texteBlanc: {
+        color: "#fff"
+    },
+    uploadButton: {
+        marginRight: theme.spacing(2)
+    },
+    button: {
+        marginTop: theme.spacing(1),
+        marginRight: theme.spacing(1)
+    },
+    actionsContainer: {
+        marginBottom: theme.spacing(2)
+    },
+    resetContainer: {
+        padding: theme.spacing(3)
+    },
+    iconButton:{
+        marginTop: "50px",
+
+        [theme.breakpoints.down('md')]: {
+            marginTop: "50px",
+            
+        },
+    },
+    button: {
+        textTransform: 'inherit',
+        marginTop: theme.spacing(4),
+        marginBottom: theme.spacing(2),
+        padding: theme.spacing(1.2, 1),
+        borderRadius: '3px',
+        color: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.important,
+    },
+    title:{
+        fontFamily: 'Roboto',
+        fontSize: '1.625em',
+        fontWeight: '600',
+        padding: theme.spacing(3, 0),
+    },
+    texteEtape:{
+        fontSize: '1em',
+        fontWeight: '300',
+        
+    },
+    conteneur:{
+        width:'400px',
+    },
+    tabContainer:{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems:'center',
+        textAlign:'center',
+        align:'center',
+        alignSelf:'center',
+    },
+    
+}));
+
+const AccountProfile = props => {
+    const {
+        className,
+        user,
+        ...rest
+    } = props;
+    const logoUrl = user.picture;
+    const classes = useStyles();
+
+    // const user = {   name: 'Laurent Laniau',   city: 'Questembert',   country:
+    // 'France',   timezone: '',   avatar: '/images/avatars/avatar_11.png' };
+    const {publicRuntimeConfig} = getConfig()
+
+    return (
+        <Fragment >
+            <div className={classes.tabContainer}>
+                <div className={classes.conteneur}>
+                    <Typography gutterBottom align="center" >
+                        <span className={classes.title}>
+                            <img
+                            alt="talents-tube"
+                            src='/statique/images/inscription/candidature-video-envoyee.svg'
+                            className={classes.iconButton}/>
+                        </span>
+                    </Typography>
+                    <Typography gutterBottom align="center" >
+                        <span className={classes.title}>Bravo !<br></br>
+                        Votre candidature a été envoyée
+                        </span>
+                    </Typography>
+                    <Typography gutterBottom align="center" className={classes.conteneur}>
+                        <div className={classes.texteEtape}>
+                            Pour suivre l’état d’avancement de vos candidatures, rendez-vous sur votre espace <b>Mon compte</b>.
+                        </div>
+                    </Typography>
+                    
+                    
+                    <Typography gutterBottom align="center" className={classes.text}>
+                        
+                        <Button
+                            variant="contained"
+                            className={classes.button}
+                            classes={{ root: classes.rootButton }}
+                            onClick={() => Router.push('/Candidatures')}
+                        >
+                            Accéder à Mon compte
+                        </Button>
+
+                    </Typography>
+                    {/* <section className={classes.bottomContainer}>
+                        <Button
+                            variant="contained"
+                            className={classes.button}
+                            classes={{ root: classes.rootButton }}
+                            onClick={() => Router.push('/Login')}
+                        >
+                            Connexion
+                    </Button>
+                    </section> */}
+                </div>
+            </div>
+        </Fragment>
+        // <Grid
+        //     container
+        //     spacing={4}
+        //     direction="row"
+        //     justify="space-between"
+        //     alignItems="flex-start">
+            
+        //     <Grid item lg={9} md={6} xl={8} xs={12}>
+        //         <Fragment>
+        //             <Hidden>&nbsp;</Hidden>
+        //             <Hidden>&nbsp;</Hidden>
+
+        //             <Card
+        //                 variant="outlined"
+        //                 style={{
+        //                 width: 420 + "px",
+        //                 textAlign:"center"
+        //             }}>
+        //                 <CardActions></CardActions>
+        //                 <CardContent>
+        //                     <Typography>
+        //                         Tu n'as pas tout dit dans ta vidéo?<br/>
+        //                         Pour mettre toutes les chances de ton côté, 
+        //                         <b> dépose ton CV old school (format pdf, word)!</b>
+        //                     </Typography>
+        //                 </CardContent>
+
+        //             </Card>
+        //             <Hidden>&nbsp;</Hidden>
+        //             <Card
+        //                 variant="outlined"
+        //                 style={{
+        //                 width: 420 + "px",
+        //                 textAlign:"center"
+        //             }}>
+        //                 <CardContent>
+        //                     <AccountEtape3></AccountEtape3>
+        //                 </CardContent>
+        //             </Card>
+        //             <Hidden>&nbsp;</Hidden>
+        //             <Hidden>&nbsp;</Hidden>
+        //             <Card
+        //                 variant="outlined"
+        //                 style={{
+        //                 width: 420 + "px",
+        //                 textAlign:"center"
+        //             }}>
+        //                 <CardContent>
+                            
+        //                     <Button
+        //                         variant="contained"
+        //                         color="primary"
+        //                         onClick={() => Router.push(`/Candidatures`)}
+        //                         className={classes.button}>
+        //                         Voir mes candidatures
+        //                     </Button>
+        //                 </CardContent>
+        //             </Card>
+        //         </Fragment>
+
+        //     </Grid>
+        //     <Grid item lg={3} md={6} xl={4} xs={12}></Grid>
+
+        // </Grid>
+
+    );
+};
+
+AccountProfile.propTypes = {
+    className: PropTypes.string
+};
+function mapStateToProps(state, ownProps) {
+    return {
+        user: state.user,
+        loading: !!state.user.loading,
+        errors: state.user.errors || ownProps.errors
+    };
+}
+
+export default withStyles(styles)(connect(mapStateToProps, {updateUserRequest})(AccountProfile))

nextjs/components/organisms/Answer.js

@@ -1,6 +1,6 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component, Fragment, useState } from 'react'
 import { withStyles } from '@material-ui/core/styles';
-import { Button, Typography } from '@material-ui/core';
+import { Button, Typography, Divider, Hidden } from '@material-ui/core';
 import TextField from '@material-ui/core/TextField';
 import Input from '@material-ui/core/Input';
 import { connect } from 'react-redux'
@@ -10,6 +10,28 @@ import Avatar from '@material-ui/core/Avatar';
 import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
 import Loader from './../templates/loader'
 import getConfig from 'next/config'
+import 'video-react/dist/video-react.css';
+import { Player } from 'video-react';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import GooglePlaceAutocomplete from 'mui-places-autocomplete'
+import { geocodeByAddress } from 'react-places-autocomplete'
+import FormControl from '@material-ui/core/FormControl'
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { uploadMediaCv } from '../../actions/mediaCv'
+import GetApp from '@material-ui/icons/GetApp';
+// import PlacesAutocomplete from 'react-places-autocomplete';
+// import {
+//     geocodeByAddress,
+//     geocodeByPlaceId,
+//     getLatLng,
+//   } from 'react-places-autocomplete';
+// import GoogleAutoComplete from 'react-google-autocomplete-address-fields';
+
+
 
 const styles = theme => ({
     container: {
@@ -61,10 +83,7 @@ const styles = theme => ({
     },
     rootButton: {
         textTransform: 'inherit',
-        border: '1px solid',
-        '&:hover': {
-            border: '1px solid',
-        },
+        
     },
     button: {
         textTransform: 'inherit',
@@ -74,32 +93,89 @@ const styles = theme => ({
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.important,
     },
-
-    importButton: {
-        color: theme.palette.primary.main,
-        backgroundColor: theme.palette.secondary.main,
-        padding: theme.spacing(3, 2),
-        margin: theme.spacing(1),
-        boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.14)',
-        '&:hover': {
-            backgroundColor: theme.palette.secondary.main,
-        },
-        InputKeyboardArrowRightIcon: {
-            fontSize: '2.5em',
-            color: theme.palette.secondary.main,
-        },
+    containerImport:{
+        width:"100%",
+        textAlign:"left",
+        align:"left",
+        alignItems:"flex-start",
+        border: 0,
+        margin: 0,
+        display: "inline-flex",
+        padding: 0,
+        position: "relative",
+        flexDirection: "column",
+        verticalAlign: "top",
+        marginBottom:"20px !important"
     },
-});
+    importButton: {
+        padding: '4px 8px',
+        textTransform: 'inherit',
+        border: '2px solid #1E2327',
+        color: '#1E2327',
+    },
+    remplacerButton: {
+        color: '#1E2327',
+        borderColor: '#1E2327',
+        border: '2px solid',
+        padding: '9.6px 8px',
+        margin:'15px 0px 25px 0px',
+        textTransform: 'inherit',
+    },
+    popup: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+        fontWeight: '400',
+        color: '#8E9092'
+    },
+    player:{
+        width:"100px"
+    },
+    labelGeoloc:{
+        paddingLeft:"14px",
+        fontSize: "0.8rem",
+        color:"#1E2327",
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontWeight: "400",
+        lineHeight: "1",
+        letterSpacing: "0.00938em",    }
+    ,conteneurGoogle:{
+        border:"1px solid rgb(200, 200, 200)",
+        borderRadius :"5px",
+        padding:"5px 0px",
+        
 
+    },
+    conteneurGoogleComposant:{
+        paddingLeft:"14px"
+    }
+    
+});
+export const getCountryFromAddress = (address) => {
+    if (!address) {
+        return '';
+    }
+    try {
+        const country = address.address_components.filter(component => component.types.includes('country')).map(c => c.long_name)[0];
+        console.log('using country for filter ' + country);
+        return country;
+    } catch (error) {
+        console.log(error);
+        return '';
+    }
+}
 const { publicRuntimeConfig } = getConfig()
+
 //https://xd.adobe.com/view/ba98331a-9145-4d67-7e27-25a36e519ef4-cca9/screen/a96779d7-bdb3-410a-8f19-e6987acb98ee/Candidature-Step-3
 class Answer extends Component {
-
+    
     constructor(props) {
         super(props);
 
-        // This binding is necessary to make `this` work in the callback
-        this.onSubmit = this.onSubmit.bind(this);
+        
+        const viewValue = this.props.value;
+        
+        this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
+        this.onChange = this.onChange.bind(this);
+         
     }
 
     state = {
@@ -108,91 +184,421 @@ class Answer extends Component {
         lastname: '',
         phone: '',
         currentJob: '',
+        geoloc: '',
+        value:'',
+        route: '',
+        street_number: '',
+        locality: '',
+        administrative_area_level_2: '',
+        administrative_area_level_1: '',
+        country: '',
+        postal_code: '',
+        formatted_address:"",
+        lat:"",
+        lng:"",
         linkedin: '',
         twitter: '',
         website: '',
         mediaId: null,
+        mediaUrl: null,
+        thumbnails:null,
+        heure: null,
         companyId: null,
+        address:'',
+        errorMessage:'',
+        open: false,
+        loading: true,
+        openSnack: false,
+        cv:false,
     };
 
-    handleChange = (e) => {
-        this.setState({ [e.target.name]: e.target.value })
-    }
-
     UNSAFE_componentWillReceiveProps(nextProps) {
         this.setState({
-            firstname: nextProps.user.firstname,
-            lastname: nextProps.user.lastname,
-            phone: nextProps.user.phone,
-            currentJob: nextProps.user.currentJob,
-            linkedin: nextProps.user.linkedin,
-            twitter: nextProps.user.twitter,
-            website: nextProps.user.website,
+            firstname: this.state.firstname,
+            lastname: this.state.lastname,
+            phone: this.state.phone,
+            currentJob: this.state.currentJob,
+            geoloc: this.state.geoloc,
+            value: this.state.value,
+            route: this.state.route,
+            street_number: this.state.street_number,
+            locality: this.state.locality,
+            administrative_area_level_2: this.state.administrative_area_level_2,
+            administrative_area_level_1: this.state.administrative_area_level_1,
+            country: this.state.country,
+            postal_code: this.state.postal_code,
+            formatted_address : this.state.formatted_address,
+            lat:this.state.lat,
+            lng: this.state.lng,
+            linkedin: this.state.linkedin,
+            twitter: this.state.twitter,
+            website: this.state.website,
             mediaId: nextProps.mediaId,
+            mediaUrl: nextProps.mediaUrl,
+            thumbnails: nextProps.thumbnails,
+            heure: nextProps.heure,
             companyId: nextProps.companyId,
+            cvLink: nextProps.cvLink,
+            loading: nextProps.loading,
+            openSnack: !!!_.isEmpty(nextProps.errors),
         })
+        if (nextProps.loading) {
+            const success = {};
+            success.message ="CV mis à jour";
+            console.log("CV mis à jour!!!")
+            this.setState({ success });
+            
+          }
     }
 
     componentDidMount() {
+        console.log("ANSWER ! ");
+        console.log(this.props);
         this.setState({
             firstname: this.props.user.firstname,
             lastname: this.props.user.lastname,
             phone: this.props.user.phone,
             currentJob: this.props.user.currentJob,
+            value: this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
+            geoloc: this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
+            route: "",
+            street_number: "",
+            locality: "",
+            administrative_area_level_2: "",
+            administrative_area_level_1: "",
+            country: "",
+            postal_code: "",
+            formatted_address:"",
+            lat:"",
+            lng:"",
             linkedin: this.props.user.linkedin,
             twitter: this.props.user.twitter,
             website: this.props.user.website,
+            video: this.props.answer,
+            mediaUrl : this.props.mediaUrl,
+            thumbnails : this.props.thumbnails,
+            heure : this.props.heure,
+            loading: false,
+            cvLink: this.props.user.cv
+
         })
+        console.log(this.state);
     }
+    
+    inputFilesystemChange = (e) => {
+    this.uploadMediaCv(e)
+    }
+    
+    uploadMediaCv = (e) => {
+    var file = e.target.files[0]
+
+    const data = new FormData()
+    data.append('upload', file)
+    this.props.uploadMediaCv(data)
+    }
+
+    AfficherSuccess() {
+        if (!this.state.success || !this.state.success.message) {
+            console.log("Erreur Upload CV");
+            return "";
+        } else if (this.state.success.length != 0 && this.state.success.message != "") {
+            return (
+                <Snackbar open={open} autoHideDuration={1000} onClose={() => this.setState({open: false})}>
+                <Alert onClose={() => this.setState({open: false})} severity="success">
+                    {ReactHtmlParser(this.state.success.message)}
+                </Alert>
+                </Snackbar>
+            );
+        }
+        return "";
+    }
+    
+
+    AfficherLienCv() {
+        console.log("afficher lien");
+        if (this.state.cvLink !="") {
+        
+            return (
+            
+            <Fragment>
+            
+                <Typography >
+                    <a href={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink} 
+                    target="_blank"
+                    style={{ 
+                    color:'#1E2327',
+                    '&:hover': {
+                        color: '#1E2327',
+                    },
+                    backgroundColor: '#F3F3F4',
+                    width:'100%',
+                    fontWeight: '500',
+                    fontSize: '1em',
+                    padding:'15px',
+                    margin:'20px 0',
+
+                    }}
+                    >
+                    Visualiser mon CV
+                    </a>
+                    <br />
+                
+                </Typography>
+                
+            </Fragment>
+            
+            );
+        
+        }
+        return "";
+    }
+       
+
+
+
+    openDialog() {
+        this.setState({ open: true });
+    }
+
+    closeDialog() {
+        this.setState({ open: false });
+    }
+
+    refreshDialog() {
+        this.setState({ open: false });
+        window.location.reload();
+    }
+
+    onChange = (e) => {
+
+        this.setState({
+            value: e.target.value
+        });
+
+        if (e.target.value === '') {
+            console.log('cleared');
+            //this.props.onSelectionChanged('');
+        }
+    }
+
+    remplirLocation = (typeDonnee, donnee) =>{
+        console.log("DEBUT remplirLocation");
+        console.log(typeDonnee);
+        console.log(donnee);
+        if(typeDonnee=='"street_number"') {
+            this.setState({ street_number: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"route"') {
+            this.setState({ route: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"locality"') {
+            this.setState({ locality: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"administrative_area_level_2"') {
+            this.setState({ administrative_area_level_2: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"administrative_area_level_1"') {
+            this.setState({ administrative_area_level_1: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"country"') {
+            this.setState({ country: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"postal_code"') {
+            this.setState({ postal_code: donnee.replace('"', '') }) 
+        }
+        console.log("FIN remplirLocation");  
+        
+    }
+
+    onSuggestionSelected = (suggestion) => {
+        
+        console.log('Selected suggestion:', suggestion)
+        let address = suggestion.description;
+        var words = address.split(',');
+        if(words.length<3){
+            address = "mairie de "+address;
+        }
+        this.setState({ geoloc: address})
+        this.setState({
+            value: address
+        });
+
+        geocodeByAddress(address)
+            .then(address => {
+                console.log("ADRESSE");
+                console.log(address);
+                if(address[0].address_components[0]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[0].types[0]), JSON.stringify(address[0].address_components[0].long_name))
+                }
+                if(address[0].address_components[1]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[1].types[0]), JSON.stringify(address[0].address_components[1].long_name))
+                }
+                if(address[0].address_components[2]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[2].types[0]), JSON.stringify(address[0].address_components[2].long_name))
+                }
+                if(address[0].address_components[3]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[3].types[0]), JSON.stringify(address[0].address_components[3].long_name))
+                }
+                if(address[0].address_components[4]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[4].types[0]), JSON.stringify(address[0].address_components[4].long_name))
+                }
+                if(address[0].address_components[5]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[5].types[0]), JSON.stringify(address[0].address_components[5].long_name))
+                }
+                if(address[0].address_components[6]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[6].types[0]), JSON.stringify(address[0].address_components[6].long_name))
+                }
+                if(address[0].geometry){
+
+                    console.log(address[0].geometry.location_type);
+                    let gps =JSON.stringify(address[0].geometry.location);
+                    const obj = JSON.parse(gps);  
+                    this.setState({ formatted_address: JSON.stringify(address[0].formatted_address) })     
+                    this.setState({ lat: obj.lat.toString()})     
+                    this.setState({ lng: obj.lng.toString()})     
+                }
+                
+                
+                // console.log("GEOLOC ON geocodeByAddress")
+                // console.log(this.state.geoloc)
+                // document.getElementById("geoloc").value =JSON.stringify(address[0]);
+                // this.props.onSelectionChanged(address[0]);
+            })
+            .catch(error => console.error('Error', error))
+    }
+
+    onSuggestionSelected(suggestion) {
+        
+        // Add your business logic here. In this case we just log...
+        console.log('Selected suggestion:', suggestion)
+      }
+
+    renderFunc = ({ getInputProps, getSuggestionItemProps, suggestions, loading }) => (
+        <div>
+          <input className={styles.inputSearchBar}  {...getInputProps()} />
+          <div >
+            {loading && <div>Loading...</div>}
+            {suggestions.map(suggestion => {
+              const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';
+              const style = suggestion.active
+                      ? { backgroundColor: 'red', cursor: 'pointer',border: '1px solid' }
+                      : { backgroundColor: '#123456', cursor: 'pointer',border: '1px solid' };
+              return (<div {...getSuggestionItemProps(suggestion,{className,style})}>
+                <span >{suggestion.description}</span> 
+              </div>
+              )
+            })}
+          </div>
+        </div>
+      );
+
+
+    callbackFunc  = ( autoCompleteData ) => {
+		//You can use the address data, passed by autocomplete as you want.
+	}
+
+
+
+    handleChange = (e) => {    
+        this.setState({ [e.target.name]: e.target.value })
+    }
+
+
+    
 
     onSubmit = (e) => {
         e.preventDefault()
-
+        //TODO : Vérifier si le nom et prénom sont renseignés
+        console.log("firstname")
+        console.log(this.state.firstname)
         const data = new FormData()
-
+        
         data.append('firstname', this.state.firstname)
         data.append('lastname', this.state.lastname)
         data.append('phone', this.state.phone)
         data.append('currentJob', this.state.currentJob)
+        console.log("GEOLOC ON SUBMIT")
+        console.log(this.state)
+        data.append('geoloc', this.state.geoloc)
+        
+        data.append('street_number', this.state.street_number.replace('"', ''))
+        data.append('route', this.state.route.replace('"', ''))
+        data.append('locality', this.state.locality.replace('"', ''))
+        data.append('administrative_area_level_2', this.state.administrative_area_level_2.replace('"', ''))
+        data.append('administrative_area_level_1', this.state.administrative_area_level_1.replace('"', ''))
+        data.append('country', this.state.country.replace('"', ''))
+        data.append('postal_code', this.state.postal_code.replace('"', ''))
+        data.append('formatted_address', this.state.formatted_address.replace('"', ''))
+        data.append('lat', this.state.lat)
+        data.append('lng', this.state.lng)
+        //
         data.append('linkedin', this.state.linkedin)
         data.append('twitter', this.state.twitter)
         data.append('website', this.state.website)
 
         //TODO:maybe add this two in a single transactionnal saga
         this.props.updateUserRequest(data)
-
+        //TODO: faire appel à une méthode qui va encoyer le mail a l'entreprise 
+        
+        // this.props.companyMails.map((user) =>
+        //     //TODO Envoyer un mail a chaque user
+        //     console.log(user.email)
+        // )
+        // US 471 : TODO envoyer le lien du cv pour le mettre dans la candidature (this.state.cvLink)
+        
+        console.log(this.state.cvLink, "lien CV")
         this.props.postAdAnswerRequest(
             {
                 adId: this.props.adId,
                 companyId: this.props.companyId,
-                mediaId: this.props.mediaId
+                mediaId: this.props.mediaId,
+                mediaUrl: this.props.mediaUrl,
+                thumbnails : this.props.thumbnails,
+                heure: this.props.heure
             })
     }
 
-    inputFilesystemChange = (e) => {
+    // inputFilesystemChange = (e) => {
 
-        console.log("inputFilesystemChange");
-        var file = e.target.files[0]
-        this.setState({ picture: file })
+    //     console.log("inputFilesystemChange");
+    //     var file = e.target.files[0]
+    //     this.setState({ picture: file })
 
-        const data = new FormData()
-        data.append('file', file)
-        this.props.updateUserPictureRequest(data)
+    //     const data = new FormData()
+    //     data.append('file', file)
+    //     this.props.updateUserPictureRequest(data)
+    // }
+    recupererAdresse =()=>{
+        geocodeByAddress('1 rue de la laine, Questembert')
+        .then(results => getLatLng(results[0]))
+        .then(({ lat, lng }) =>
+            console.log('Successfully got latitude and longitude', { lat, lng })
+        )
+        geocodeByAddress('1 rue de la laine, Questembert')
+        .then(results => console.log(results))
+        .catch(error => console.error(error));
     }
+    
+
+    
 
     render() {
         const { classes, user } = this.props
         const logoUrl = user.picture;
+        const { loading } = this.state;
+        const inputProps = {
+            value: this.state.address,
+            onChange: this.onChange,
+          }
+          const searchOptions = {
+            componentRestrictions: { country: ['fr'] },
+          }
+        
         return (
             <section className={classes.container}>
+                
                 <form className={classes.form}
                     autoComplete="off">
                     {!!logoUrl && <Avatar className={classes.logo}
                         classes={{ img: classes.MuiAvatarImg }}
                         src={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentUrl + logoUrl} alt="candidatLogo" />}
 
-                    {!!user.pictureLoading && <Loader />}    
-                    {!!!user.pictureLoading && !!!logoUrl &&
+                    {/* {!!user.pictureLoading && <Loader />}     */}
+                    {/* {!!!user.pictureLoading && !!!logoUrl &&
                         (<Fragment><input
                             type="file" accept="image/*" capture="filesystem"
                             className={classes.input}
@@ -212,19 +618,35 @@ class Answer extends Component {
                                     <KeyboardArrowRightIcon className={classes.InputKeyboardArrowRightIcon} />
                                 </Button>
                             </label></Fragment>)
-                    }
-                    <TextField
-                        name="lastname"
-                        required
-                        id="outlined-required"
-                        label="Nom"
-                        className={classes.textField}
-                        classes={{ root: classes.rootTextfield }}
-                        variant="outlined"
-                        value={this.state.lastname}
-                        onChange={this.handleChange}
+                    } */}
+                    <Player fluid={false} width={"75%"} height={350} 
+                    playsInline className={classes.player} 
+                     src={publicRuntimeConfig.symphonyUrl + "uploads/videos/"+this.state.mediaUrl}
+                    //src={this.state.mediaUrl}
+                    // src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
                     />
 
+                    
+                    <Button className={classes.remplacerButton} onClick={this.openDialog.bind(this)}>
+                        Remplacer ma vidéo
+                    </Button>
+                    <Dialog open={this.state.open}>
+                        <DialogTitle> Souhaitez-vous remplacer votre vidéo de réponse ?</DialogTitle>
+                        <DialogContent className={classes.popup}> Cette vidéo et tous les éléments de votre candidature seront définitivement supprimés. Vous pourrez importer ou réaliser une nouvelle vidéo de réponse. </DialogContent>
+                        <DialogActions>
+                        
+                        <Button onClick={this.closeDialog.bind(this)} autoFocus>
+                            Annuler
+                        </Button>
+                        <Button onClick={this.refreshDialog.bind(this)} >
+                            Remplacer
+                        </Button>
+                        </DialogActions>
+                    </Dialog>
+
+                    
+                    
+                     
                     <TextField
                         name="firstname"
                         required
@@ -235,8 +657,71 @@ class Answer extends Component {
                         variant="outlined"
                         value={this.state.firstname}
                         onChange={this.handleChange}
+                        error={!!_.isEmpty(this.state.firstname)}
+                        helperText={!!_.isEmpty(this.state.firstname) && "Veuillez saisir votre prénom"}
                     />
 
+                    <TextField
+                        name="lastname"
+                        required
+                        id="outlined-required"
+                        label="Nom"
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        value={this.state.lastname}
+                        onChange={this.handleChange}
+                        error={!!_.isEmpty(this.state.lastname)}
+                        helperText={!!_.isEmpty(this.state.lastname) && "Veuillez saisir votre nom"}
+                        required
+                    />
+
+                    <div 
+                    className={classes.conteneurGoogle}
+                    classes={{ root: classes.rootTextfield }} 
+                    style={{ position: 'relative', zIndex:2, width: '100%' }}>
+                         <label htmlFor="outlined-required"
+                          className={classes.labelGeoloc}>
+                            Adresse
+                        </label>
+                        <div className={classes.conteneurGoogleComposant}>
+                            <GooglePlaceAutocomplete
+                                style={{ paddingLeft:'14px !important', left: 0, right: 0, zIndex: '2 !important', width: '100%' }}
+                                name="location"
+                                label="Location"
+                                id="outlined-required"
+                                variant="outlined"
+                                textFieldProps={{ id: "outlined-required" }}
+                                className={classes.textField}
+                                classes={{ root: classes.rootTextfield }} 
+                                options={this.searchOptions}
+                                onSuggestionSelected={this.onSuggestionSelected}
+                                textFieldProps={{ onChange: (e) => this.onChange(e), value: this.state.value, placeholder: 'Ex : Rue de Rivoli, Paris, France', fullWidth: true, size:"small"}}
+                                types={['(regions)']}
+                                componentRestrictions={{country: 'fr'}}
+                                renderTarget={() => (
+                                    <div   
+                                    style={{
+                                        
+                                        width: '100%',
+                                        zIndex:9
+                                    }}
+                                    >
+                                    </div>
+                                )}
+                            />
+                        </div>
+                       
+                        {/* <Input 
+                        name="geoloc" 
+                        id="geoloc" 
+                        label="geoloc" 
+                        ref="geoloc" 
+                        onChange={this.handleChange}
+                        value={this.state.geoloc =='null' || this.state.geoloc ==''  ? '' :this.state.geoloc}
+                        /> */}
+                    </div>
+
                     <TextField
                         name="phone"
                         id="outlined"
@@ -247,6 +732,7 @@ class Answer extends Component {
                         value={this.state.phone}
                         onChange={this.handleChange}
                         type="tel"
+                        helperText="Renseignez votre numéro de téléphone pour permettre au recruteur de vous contacter"
                     />
 
                     <TextField
@@ -266,10 +752,33 @@ class Answer extends Component {
                         className={classes.textField}
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
-                        value={this.state.currentJob}
+                        value={this.state.currentJob =='null' || this.state.currentJob ==''  ? '' :this.state.currentJob}
                         onChange={this.handleChange}
                     />
 
+                    {this.AfficherSuccess()}
+                    <div className={classes.containerImport}>
+                        <input
+                            type="file" 
+                            accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .pdf, .odt"
+                            className={classes.input+' cypButtonImportVid'}
+                            style={{ display: 'none' }}
+                            id="import-button-file"
+                            onChange={this.inputFilesystemChange}
+                        />
+                        <label htmlFor="import-button-file">
+                            <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
+                            
+                            
+                            <GetApp className={classes.icon} /> Importer mon CV 
+                            
+                            
+                            </Button>
+
+                        </label>
+                        <Hidden>&nbsp;</Hidden>
+                        {this.AfficherLienCv()}
+                    </div>          
                     <TextField
                         name="linkedin"
                         id="outlined"
@@ -278,7 +787,7 @@ class Answer extends Component {
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
                         placeholder="http://www.linkedin.com/in/"
-                        value={this.state.linkedin}
+                        value={this.state.linkedin =='null' || this.state.linkedin ==''  ? '' :this.state.linkedin}
                         onChange={this.handleChange}
 
                     />
@@ -291,7 +800,7 @@ class Answer extends Component {
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
                         placeholder="http://twitter.com/.."
-                        value={this.state.twitter}
+                        value={this.state.twitter =='null' || this.state.twitter ==''  ? '' :this.state.twitter}
                         onChange={this.handleChange}
                     />
 
@@ -303,12 +812,13 @@ class Answer extends Component {
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
                         placeholder="http://monsite.fr"
-                        value={this.state.website}
+                        value={this.state.website =='null' || this.state.website ==''  ? '' :this.state.website}
                         onChange={this.handleChange}
                     />
+                    
                 </form>
                 <div id="F" className={classes.foot}>
-                    <Button variant="contained" className={classes.button + ' cypButtonSendApplication'} onClick={this.onSubmit}>Postuler</Button>
+                <Button variant="contained" className={classes.button + ' cypButtonSendApplication'} onClick={this.onSubmit}>Envoyer ma candidature</Button>
                 </div>
             </section>
         )
@@ -316,13 +826,24 @@ class Answer extends Component {
 }
 
 function mapStateToProps(state, ownProps) {
+    // console.log(state.media.message.heure);
     return {
-        user: state.user,
-        loading: !!state.user.loading,
+        user: state.user ,
+        cvLink : state.mediaCv.message,
+        loading: !!state.media.loading,
+        cv : true,
+        // user: state.user,
+        // loading: !!state.user.loading,
         pictureLoading: !!state.user.pictureLoading,
         errors: state.user.errors || ownProps.errors,
         mediaId: state.media.message && state.media.message.mediaId,
+        mediaUrl: state.media.message && state.media.message.originalUrl,
+        thumbnails: state.media.message && state.media.message.thumbnails,
+        mediaUrlVimeo: state.media.message && state.media.message.uriVimeo,
+        mediaFileName: state.media.message && state.media.message.filename,
+        heure: state.media.message && state.media.message.heure,
     };
+    
 }
 
-export default withStyles(styles)(connect(mapStateToProps, { postAdAnswerRequest, updateUserRequest, updateUserPictureRequest })(Answer))
+export default withStyles(styles)(connect(mapStateToProps, { postAdAnswerRequest, updateUserRequest, updateUserPictureRequest, uploadMediaCv })(Answer))

nextjs/components/organisms/CompanyRow.js

@@ -139,7 +139,7 @@ class CompanyRowComponent extends React.Component {
   render() {
     const { classes, theme, rowData } = this.props;
 
-    const imgDefaultUrl = "/static/images/default/default_picture_company.svg"
+    const imgDefaultUrl = "https://blog.talentstube.com/wp-content/uploads/2021/01/default_picture_company.jpg"
 
     const imgUrl = (rowData.presentation_video && rowData.presentation_video.thumbnails[0] && rowData.presentation_video.thumbnails[0].sizes[4]) ? rowData.presentation_video.thumbnails[0].sizes[4].link : imgDefaultUrl
     const logoUrl = publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + rowData.logo
@@ -151,7 +151,7 @@ class CompanyRowComponent extends React.Component {
     const nbOffre = (rowData.count_ads > 0) ? offre : 'Candidature spontanée';
 
     return (
-      <Link href={`/Entreprise/${rowData.id}-${_.kebabCase(rowData.brand_name)}-${_.kebabCase(rowData.addresses.billing.city)}`} >
+      <Link href={`/Entreprise/${rowData.id}-${_.kebabCase(rowData.brand_name)}`} >
         <Card className={classes.card + ' cypCardCompany'}>
           <CardContent className={classes.content}>
             <CardMedia

nextjs/components/organisms/Footer.js

@@ -5,10 +5,11 @@ import { Fragment } from 'react';
 import NewsLetterRegistration from './NewsLetterRegistration'
 import dynamic from 'next/dynamic'
 import Button from '@material-ui/core/Button'
-
+import getConfig from 'next/config'
 const PWAInstallSnack = dynamic(() => import('./PWAInstallSnack'), {
     ssr: false
 });
+const { publicRuntimeConfig } = getConfig();
 
 const styles = theme => ({
     root: {
@@ -58,7 +59,7 @@ const styles = theme => ({
     titleContainer: {
         color: theme.palette.primary.darkMain,
         fontSize: '1.5em',
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontWeight: '600',
         [theme.breakpoints.up('md')]: {
             fontSize: '1.2em',
@@ -112,7 +113,7 @@ const styles = theme => ({
         },
     },
     titleReactApp: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1.5em',
         fontWeight: '600',
         paddingTop: theme.spacing(4),
@@ -152,6 +153,11 @@ const styles = theme => ({
         justifyContent: 'center',
         padding: theme.spacing(6, 4),
     },
+    version:{
+        marginTop: '15px',
+        fontSize: '0.7em',
+        fontWeight: '300',
+    }
 
 });
 
@@ -215,6 +221,12 @@ function Footer(props) {
                             </Typography>
                         </a>
                     </Link>
+                    <a href="https://blog.talentstube.com" target="_blank">
+                        <Typography gutterBottom color="secondary" component="p" className={classes.textContainer} 
+                                    >
+                            Blog
+                        </Typography>
+                    </a>
                 </section>
                 <section className={classes.container}>
                     <Typography color="secondary" component="p" className={classes.titleContainer}>
@@ -243,6 +255,13 @@ function Footer(props) {
                             </Typography>
                         </a>
                     </Link>
+                    <Link href="" >
+                        <a href="https://blog.talentstube.com/contact" target="_blank">
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Contact
+                            </Typography>
+                        </a>
+                    </Link>
                 </section>
                 <section className={classes.container}>
                     <Typography color="secondary" component="p" className={classes.titleContainer}>
@@ -255,11 +274,11 @@ function Footer(props) {
                         56 000 Vannes
                 </Typography>
                     <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
-                        02.30.05.06.31
+                    <a href="tel:+33230050631"  >02.30.05.06.31 </a> 
                 </Typography>
-                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                    {/* <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                         contact@talentstube.com
-                </Typography>
+                </Typography> */}
                 </section>
 
             </div>
@@ -270,6 +289,9 @@ function Footer(props) {
                 <a href="https://www.bretagne.bzh/" target="_blank" className={classes.darkMenuItem} rel="noopener">
                     <img alt="Région Bretagne" src='/static/images/logos/Logo-region.svg' className={classes.footerLogo} />
                 </a>
+                <Typography   className={classes.version} align="center" >
+                {publicRuntimeConfig.version}
+                </Typography>
             </section>
         </div>
     );

nextjs/components/organisms/FooterAccueil.js

@@ -0,0 +1,246 @@
+import Link from 'next/link'
+import { withStyles } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core';
+import { Fragment } from 'react';
+import NewsLetterRegistration from './NewsLetterRegistration'
+import dynamic from 'next/dynamic'
+import Button from '@material-ui/core/Button'
+import getConfig from 'next/config'
+const { publicRuntimeConfig } = getConfig();
+
+const styles = theme => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: "#1E2327",
+        [theme.breakpoints.up('md')]: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'space-around',
+            backgroundColor: "#1E2327",
+            padding: theme.spacing(10, 18),
+        },
+        '& a': {
+            textDecoration: 'none',
+            color:"#fff"
+        },
+    },
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        padding: theme.spacing(0, 5),
+        paddingBottom: theme.spacing(3.5),
+        '&:first-child': {
+            paddingTop: theme.spacing(4),
+        },
+        [theme.breakpoints.up('md')]: {
+            padding: 0,
+            '&:first-child': {
+                paddingTop: 0,
+            },
+        },
+
+    },
+    containerRegion: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        backgroundColor: theme.palette.secondary.main,
+        padding: theme.spacing(3),
+        [theme.breakpoints.up('md')]: {
+            padding: theme.spacing(8, 0),
+        },
+
+    },
+    titleContainer: {
+        color: "#fff",
+        fontSize: '1.5em',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+        fontWeight: '600',
+        [theme.breakpoints.up('md')]: {
+            fontSize: '1.2em',
+            paddingBottom: theme.spacing(2),
+        },
+    },
+    textContainer: {
+        fontWeight: '300',
+        fontSize: '0.9em',
+        [theme.breakpoints.up('md')]: {
+            fontWeight: '300',
+            fontSize: '0.8em',
+        },
+    },
+    textContainerRegion: {
+        fontWeight: '300',
+        fontSize: '0.9em',
+        color: theme.palette.primary.dark,
+    },
+    footerLogo: {
+        width: '15vw',
+        [theme.breakpoints.up('md')]: {
+            width: '4vw',
+        },
+    },
+    footerLogoTT: {
+        width: '70%',
+        [theme.breakpoints.up('md')]: {
+            paddingBottom: theme.spacing(1),
+            width: '100%'
+        },
+    },
+    containerReactApp: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: 'auto',
+        paddingTop: theme.spacing(4),
+        backgroundColor: "#000",
+        [theme.breakpoints.down('xs')]: {
+            height: '100vh',
+        },
+        [theme.breakpoints.up('md')]: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-around',
+            height: '35vh',
+            padding: theme.spacing(6, 1),
+            position: 'relative',
+        },
+    },
+    titleReactApp: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+        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',
+        },
+    },
+    imageReactApp: {
+        width: '100%',
+        [theme.breakpoints.up('sm')]: {
+            width: 'auto',
+        },
+        [theme.breakpoints.up('md')]: {
+            width: '25%',
+            order: 2,
+            position: 'absolute',
+            bottom: 0,
+        },
+    },
+    containerNewsletter: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: theme.spacing(6, 4),
+    },
+    version:{
+        marginTop: '15px',
+        fontSize: '0.7em',
+        fontWeight: '300',
+    }
+
+});
+
+function Footer(props) {
+    const { classes } = props;
+    return (
+        <div>
+
+
+            <section className={classes.containerNewsletter}>
+                <NewsLetterRegistration />
+            </section>
+
+            <div className={classes.root}>
+                <section className={classes.container}>
+                    <img alt="talents-tube" src='/static/images/logos/TalentsTube_logo-blanc.svg' className={classes.footerLogoTT} />
+                    
+                </section>
+                <section className={classes.container}>
+                    <Typography color="secondary" component="p" className={classes.titleContainer}>
+                        Informations
+                    </Typography>
+
+                    <Link href="/Cgu"  >
+                        <a>
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                CGU
+                            </Typography>
+                        </a>
+                    </Link>
+
+                    <Link href="/MentionsLegales"  >
+                        <a>
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Mentions légales
+                            </Typography>
+                        </a>
+                    </Link>
+                    <Link href="/Confidentialite"  >
+                        <a>
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Politique de confidentialité et Protection <br />des données
+                            </Typography>
+                        </a>
+                    </Link>
+                    <Link href="" >
+                        <a href="https://blog.talentstube.com/contact" target="_blank">
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Contact
+                            </Typography>
+                        </a>
+                    </Link>
+                </section>
+                <section className={classes.container}>
+                    <Typography color="secondary" component="p" className={classes.titleContainer}>
+                        Rencontrons-nous
+                </Typography>
+                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                        3, rue Louis de Broglie
+                </Typography>
+                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                        56 000 Vannes
+                </Typography>
+                    <Typography gutterBottom  component="p" className={classes.textContainer}>
+                    <a href="tel:+33230050631"  >02.30.05.06.31 </a> 
+                </Typography>
+                    {/* <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                        contact@talentstube.com
+                </Typography> */}
+                </section>
+
+            </div>
+            <section className={classes.containerRegion}>
+                <Typography gutterBottom component="p" className={classes.textContainerRegion} align="center" >
+                    Entreprise soutenue par
+                </Typography>
+                <a href="https://www.bretagne.bzh/" target="_blank" className={classes.darkMenuItem} rel="noopener">
+                    <img alt="Région Bretagne" src='/static/images/logos/Logo-region.svg' className={classes.footerLogo} />
+                </a>
+                <Typography   className={classes.version} align="center" >
+                {publicRuntimeConfig.version}
+                </Typography>
+            </section>
+        </div>
+    );
+}
+
+export default withStyles(styles)(Footer)

nextjs/components/organisms/GriddleCustomNextButton.js

@@ -1,7 +1,8 @@
 import React from 'react';
 
 const NextButton = ({ hasNext, onClick, style, className, text }) => hasNext ? (
-  <button type="button" onClick={onClick} style={style} className={className}>Suivant</button>
+  // <button type="button" onClick={onClick} style={style} className={className}>Suivant</button>
+  <div></div>              
 ) :
 null;
 

nextjs/components/organisms/GriddleCustomPageDropdown.js

@@ -0,0 +1,35 @@
+// import React, { useState } from 'react';
+// import Pagination from '@material-ui/lab/Pagination';
+// import PaginationItem from '@material-ui/lab/PaginationItem';
+// export default function GriddleCustomPageDropdown(props) {
+//   let [page] = React.useState(1);
+//   let PageDropDown = null;
+//   const setPage = (event, newPage) => {
+//     console.log('test');
+//     setPage(newPage);
+
+//   };
+//   return (
+//     <Pagination count={props.maxPages} defaultPage={props.currentPage} onChange={props.setPage}/>
+//   );
+// }
+
+// const [page, setPage] = useState(1);
+//   const handleChangePage = (event, newPage) => {
+    
+//     setPage(newPage);
+//   };
+// const PageDropDown = ({ maxPages, currentPage, setPage  }) => <Pagination count={maxPages} defaultPage={currentPage} onChangePage={handleChangePage}/> ;
+
+// export default PageDropDown;
+
+
+import React from 'react';
+import Pagination from '@material-ui/lab/Pagination';
+
+const NextButton = ({ maxPages, currentPage, setPage, className, text }) => maxPages ? (
+  <Pagination count={maxPages} defaultPage={currentPage} onChange={setPage} shape="rounded"/>              
+) :
+null;
+
+export default NextButton;

nextjs/components/organisms/GriddleCustomPreviousButton.js

@@ -1,8 +1,9 @@
 import React from 'react';
 
 const PreviousButton = ({ hasPrevious, onClick, style, className, text }) => hasPrevious ? (
-  <button type="button" onClick={onClick} style={style} className={className}>Précédent</button>
-) :
+  // <button type="button" onClick={onClick} style={style} className={className}>Précédent</button>
+  <div></div>
+  ) :
 null;
 
 export default PreviousButton;

nextjs/components/organisms/Header.js

@@ -40,6 +40,7 @@ import ActiveLink from "./../atoms/Activelink";
 import axios from 'axios';
 import setAuthorizationHeader from "../../data/setAuthorizationHeader";
 import getConfig from 'next/config'
+import Router from 'next/router'
 
 const styles = theme => ({
   root: {
@@ -224,6 +225,9 @@ const styles = theme => ({
     justifyContent: 'space-between',
     padding: 0,
   },
+  appBar:{
+    position:'fixed'
+  },
   appBarDesktopSection: {
     display: 'flex',
     alignItems: 'center',
@@ -302,11 +306,11 @@ class Header extends React.Component {
     left: false,
     bottom: false,
     right: false,
-    toggle: true
+    toggle: true,
+   
   };
 
 
-
   componentDidMount() {
 
   }
@@ -327,12 +331,26 @@ class Header extends React.Component {
   }
 
   toggle = () => this.setState(state => ({ toggle: !state.toggle }))
+  chargerPage =(type)=> {
+    console.log(type);
+    //Router.replace(page);
+    sessionStorage.setItem(type+'_currentPage',1);
 
+  } 
+
+  redirectionrecruteur=(props) => {
+    console.log("redirection recruteur")
+     localStorage.removeItem("ttJWT");
+     //this.openDialog()
+     props.requestLogout();
+     window.location.href = "https://recruteur.talentstube.com/";
+  }
+  
   render() {
     const { classes } = this.props;
     const { publicRuntimeConfig } = getConfig();
-
-
+    console.log("user",this.props.user)
+    
     return (
       <div className={classes.root}>
         <Drawer anchor="left" open={this.state.left} onClose={this.toggleDrawer('left', false)}>
@@ -354,6 +372,7 @@ class Header extends React.Component {
 
                 <Divider />
                 <div className={classes.links}>
+                  {/* Menu Accueil /Offres Entreprises */}
                   <div className={classes.linkGroup}>
                     <ActiveLink activeClassName={classes.active} href="/"  >
                       <a className={classes.darkMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
@@ -383,16 +402,27 @@ class Header extends React.Component {
                         </ListItemText>
                       </ListItem></a>
                     </ActiveLink>
+                    
+                    <a className={classes.darkMenuItem + ' ' + classes.darkMenuItemSpecific} href="https://blog.talentstube.com/" target="_blank">
+                      <ListItem classes={{ root: classes.rootListItem }}>
+                        <NotesIcon className={classes.icon} />
+                        <ListItemText classes={{ primary: classes.ListItemText }} primary='Blog'>
+                        </ListItemText>
+                      </ListItem>
+                    </a>
+                    
                   </div>
+                  {/* FIN Menu Accueil /Offres Entreprises */}
+                  {/* Menu recruteur */}
                   <div>
-                    <div className={classes.blogLinkGroup}>
+                    {/* <div className={classes.blogLinkGroup}>
                       <a href={publicRuntimeConfig.blogUrl} className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <NotesIcon className={classes.icon} />
                         <ListItemText classes={{ primary: classes.ListItemText }} primary='Blog'>
                         </ListItemText>
                       </ListItem>
                       </a>
-                    </div>
+                    </div> */}
                     <div className={classes.recruteurLinkGroup}>
                       <a href={publicRuntimeConfig.symphonyUrl } className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <SupervisorAccountIcon className={classes.icon} />
@@ -401,6 +431,7 @@ class Header extends React.Component {
                       </ListItem></a>
                     </div>
                   </div>
+                  {/* FIN Menu recruteur*/}
 
                 </div>
               </List>
@@ -415,9 +446,11 @@ class Header extends React.Component {
             role="button"
             onClick={this.toggleDrawer('right', false)}
             onKeyDown={this.toggleDrawer('right', false)}
-          >{!!this.props.loading &&
+          >
+            {!!this.props.loading &&
             (<Loader />
-            )}
+            )
+            }
             {!!!this.props.loading && !!!this.props.fetched
               &&
               <div className={classes.fullList + ' ' + classes.darkFullList}>
@@ -440,7 +473,7 @@ class Header extends React.Component {
                       </ListItem></a>
                     </Link>
                     {/* TODO */}
-                    <Link href="/Login?inscription=true"  >
+                    <Link href="/Inscription"  >
                       <a className={classes.lightMenuItem + ' cypRegister'}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItem }}>
                         <PersonAddIcon className={classes.icon} />
                         <ListItemText primary='Inscription'>
@@ -452,22 +485,24 @@ class Header extends React.Component {
                   <Divider light={true} />
 
                   <div className={classes.linkGroup}>
-                    <a href={publicRuntimeConfig.symphonyUrl + "/faire-offre-emploi-video"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
+                    {/* <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
                       <WorkOutlineIcon className={classes.icon} />
                       <ListItemText primary='Connexion recruteurs'>
                       </ListItemText>
                     </ListItem>
-                    </a>
+                    </a> */}
                   </div>
                 </List>
-              </div>}
-            {!!!this.props.loading && !!this.props.fetched &&
+              </div>
+            }
+            {!!!this.props.loading && !!this.props.fetched && 
               <Fragment>
                 {this.props.user.picture ?
                   <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} />
                 }
+                
                 <ListItem classes={{ root: classes.rootListItem }} className={classes.ListItemUserConnected}>
                   <Typography gutterBottom component="h1" className={classes.menuUserName}>
                     {this.props.user.firstname + " " + this.props.user.lastname}
@@ -480,29 +515,51 @@ class Header extends React.Component {
 
                 <Divider className={classes.darkDivider} />
 
-                {/* TODO:real links */}
-                <Link href="/Candidatures"  >
-                  <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                    <FolderSharedIcon className={classes.icon} />
-                    <ListItemText primary='Mes candidatures'>
-                    </ListItemText>
-                  </ListItem></a>
-                </Link>
-                <Link href="/profileStep"  >
-                <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                    <AccountCircleIcon className={classes.icon} />
-                    <ListItemText primary='Mon compte'>
-                    </ListItemText>
-                  </ListItem></a>
-                </Link>
-                
-                <Link href="/Parametres"  >
-                  <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                    <SettingsIcon className={classes.icon} />
-                    <ListItemText primary='Paramètres de notification'>
-                    </ListItemText>
-                  </ListItem></a>
-                </Link>
+                {this.props.user.type=="TALENT" 
+                  ? 
+                  <div>
+                    <Link href="/Candidatures"  >
+                      <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <FolderSharedIcon className={classes.icon} />
+                        <ListItemText primary='Mes candidatures'>
+                        </ListItemText>
+                      </ListItem></a>
+                    </Link>
+                    <Link href="/profileStep"  >
+                      <a className={classes.lightMenuItem}>
+                        <ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <AccountCircleIcon className={classes.icon} />
+                        <ListItemText primary='Mon compte'>
+                        </ListItemText>
+                        </ListItem>
+                      </a>
+                    </Link>
+                    
+                    <Link href="/Parametres"  >
+                      <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <SettingsIcon className={classes.icon} />
+                        <ListItemText primary='Paramètres de notification'>
+                        </ListItemText>
+                      </ListItem></a>
+                    </Link>
+                  </div>
+                  : 
+                    this.redirectionrecruteur(this.props)
+                    
+                    // <div>
+                    
+                    //   <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}>
+                    //     <ListItem classes={{ root: classes.rootListItemIcon }}>
+                    //     <SettingsIcon className={classes.icon} />
+                    //     <ListItemText primary='Espace recruteur'>
+                    //     </ListItemText>
+                    //   </ListItem></a>
+                    
+                    // </div>
+                  
+                }
+                  
+
                 <Link href="/" >
                   <a onClick={() => {
                     localStorage.removeItem("ttJWT");
@@ -538,13 +595,13 @@ class Header extends React.Component {
 
                 <List className={classes.desktopMenuList}>
                   <div>
-                    <ActiveLink activeClassName={classes.active} href="/Offres"  >
-                      <a className={classes.desktopMenuItem}>
+                    <ActiveLink activeClassName={classes.active} href="/Offres"   >
+                      <a className={classes.desktopMenuItem} >
                         <ListItemText primary="Offres d'emploi">
                         </ListItemText>
                       </a>
                     </ActiveLink>
-                    <ActiveLink activeClassName={classes.active} href="/Entreprises"  >
+                    <ActiveLink activeClassName={classes.active} href="/Entreprises"    >
                       <a className={classes.desktopMenuItem}>
                         <ListItemText primary='Nos entreprises'>
                         </ListItemText>
@@ -556,12 +613,18 @@ class Header extends React.Component {
                         </ListItemText>
                       </a>
                     </ActiveLink>
+                    
+                    <a className={classes.desktopMenuItem} target="_blank" href="https://blog.talentstube.com/">
+                      <ListItemText primary='Blog'>
+                      </ListItemText>
+                    </a>
+                    
                   </div>
 
                   <div>
                     {!!!this.props.loading && !!!this.props.fetched &&
                       <Fragment>
-                        <Link href="/Login?inscription=true"  >
+                        <Link href="/Inscription"  >
                           <a className={classes.desktopMenuItem}>
                             <ListItem classes={{ root: classes.rootListItemDesktop }}>
                               <Button
@@ -588,7 +651,7 @@ class Header extends React.Component {
                         </Link>
                       </Fragment>
                     }
-                    {!!!this.props.loading && !!this.props.fetched &&
+                    {!!!this.props.loading && !!this.props.fetched  &&
                       <IconButton
                         edge="end"
                         aria-label="Profile"
@@ -603,14 +666,14 @@ class Header extends React.Component {
                   </div>
                 </List>
               </section>
-              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
+              {/* <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
 
-                <a href={publicRuntimeConfig.symphonyUrl + "/faire-offre-emploi-video"} className={classes.desktopMenuItem}>
+                <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
                   <ListItemText primary='Espace recruteurs'>
                   </ListItemText>
                   <ArrowForward className={classes.icon} />
                 </a>
-              </section>
+              </section> */}
             </Toolbar>
           </AppBar>)
           :

nextjs/components/organisms/HeaderPersonnalise.js

@@ -0,0 +1,634 @@
+import React, { Fragment, Children } from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import { withStyles, getMuiTheme } from '@material-ui/core/styles';
+import MenuIcon from '@material-ui/icons/Menu';
+import Link from 'next/link'
+import Drawer from '@material-ui/core/Drawer';
+import Divider from '@material-ui/core/Divider';
+import HomeIcon from '@material-ui/icons/HomeOutlined';
+import OfferIcon from '@material-ui/icons/LocalOfferOutlined';
+import CompanyIcon from '@material-ui/icons/DomainOutlined';
+import HelpIcon from '@material-ui/icons/HelpOutline';
+import VideoIcon from '@material-ui/icons/OndemandVideoOutlined';
+import NotesIcon from '@material-ui/icons/NotesOutlined';
+import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount';
+import PersonIcon from '@material-ui/icons/Person';
+import PersonAddIcon from '@material-ui/icons/PersonAdd';
+import WorkOutlineIcon from '@material-ui/icons/WorkOutline';
+import AccountCircleOutlinedIcon from '@material-ui/icons/AccountCircleOutlined';
+import FolderSharedIcon from '@material-ui/icons/FolderShared';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import PermContactCalendar from '@material-ui/icons/PermContactCalendar';
+import VideoCam from '@material-ui/icons/Videocam';
+import SettingsIcon from '@material-ui/icons/Settings';
+import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import { ListItemText } from '@material-ui/core';
+import Loader from '../templates/loader'
+import { connect } from 'react-redux'
+import { fetchCurrentUserRequest } from "../../actions/user";
+import { requestLogout } from "../../actions/auth";
+import Button from '@material-ui/core/Button';
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
+import Typography from '@material-ui/core/Typography';
+import { withRouter } from "next/router";
+import ActiveLink from "../atoms/Activelink";
+import axios from 'axios';
+import setAuthorizationHeader from "../../data/setAuthorizationHeader";
+import getConfig from 'next/config'
+import Router from 'next/router'
+import ButtonBase from "@material-ui/core/ButtonBase";
+import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
+import LoadingBar from 'react-redux-loading-bar'
+const styles = theme => ({
+  root: {
+    width: '100%',
+    position: 'relative',
+    zIndex: '999',
+    '& a': {
+      textDecoration: 'none'
+    }
+  },
+  toolbar: {
+    height: '64px',
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+    display: 'block'
+  },
+  menuLogo: {
+    cursor: 'pointer',
+    [theme.breakpoints.down('md')]: {
+      width: '200px'
+    },
+    [theme.breakpoints.down('sm')]: {
+      width: '130px'
+    },
+  },
+  menuAvatar: {
+    width: '2.5em',
+    borderRadius: '50%',
+    marginTop: theme.spacing(2),
+    marginLeft: theme.spacing(2),
+  },
+  menuUserName: {
+    color: theme.palette.menu.emailText,
+    fontSize: '1.3rem',
+    fontWeight: '500',
+  },
+  menuUserEmail: {
+    color: theme.palette.menu.emailText,
+    fontSize: '0.9rem',
+    fontWeight: '200',
+  },
+  darkDivider: {
+    background: 'whitesmoke',
+    opacity: '0.1',
+  },
+  List: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    height: '100%',
+    paddingTop: 0,
+    paddingBottom: 0,
+    '&>a:first-child': {
+      minHeight: '64px',
+      height: '64px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    [theme.breakpoints.up('md')]: {
+      '&>a:first-child': {
+        height: '64px',
+      },
+      '&>a:first-child li': {
+        height: '64px',
+        alignItems: 'center',
+      },
+    },
+  },
+  fullList: {
+    width: 'auto',
+    cursor: 'pointer',
+    paddingBottom: 0
+  },
+  lightFullList: {
+    height: '100vh',
+    backgroundColor: theme.palette.background.default,
+  },
+  darkFullList: {
+    backgroundColor: theme.palette.background.dark,
+  },
+  lightMenuItem: {
+    color: theme.palette.menu.lightText,
+    textDecoration: 'none',
+  },
+  darkMenuItem: {
+    color: theme.palette.menu.darkText,
+    textDecoration: 'none',
+  },
+  darkMenuItemSpecific: {
+    '&:hover,&:active': {
+      color: theme.palette.primary.main,
+    }
+  },
+  links: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    height: '100%',
+  },
+  linkGroup: {
+    padding: theme.spacing(1.2, 0),
+    paddingLeft: 0,
+  },
+  videothequeLinkGroup: {
+    backgroundColor: theme.palette.background.videotheque,
+  },
+  blogLinkGroup: {
+    backgroundColor: theme.palette.background.blog,
+  },
+  recruteurLinkGroup: {
+    backgroundColor: theme.palette.background.recruteur,
+  },
+  rootListItem: {
+    padding: theme.spacing(1, 2),
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  rootListItemIcon: {
+    padding: theme.spacing(1, 2),
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  ListItemUserConnected: {
+    flexDirection: 'column',
+  },
+  ListItemText: {
+    fontSize: '1em',
+  },
+  icon: {
+    paddingRight: theme.spacing(2.5),
+  },
+  iconAccount: {
+    color: theme.palette.primary.dark,
+  },
+  title: {
+    color: theme.palette.secondary.main,
+    fontSize: '1.5em'
+  },
+  email: {
+    color: theme.palette.menu.emailText,
+    fontSize: '0.9em'
+  },
+  button: {
+    padding: theme.spacing(0.5, 1),
+    textTransform: 'inherit',
+    '& svg': {
+      width: '0.7em',
+      height: '0.7em',
+    },
+  },
+
+  active: {
+    '& span, & svg': {
+      color: theme.palette.primary.main + ' !important',
+    },
+  },
+
+  //DESKTOP PART
+
+  desktopMenuItem: {
+    [theme.breakpoints.down('md')]: {
+      padding: theme.spacing(0.4),
+    },
+    '& span.MuiTypography-root': {
+      fontSize: '0.8rem',
+      fontWeight: '500',
+    },
+  },
+  desktopMenuList: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 0,
+  },
+  appBar:{
+    position:'fixed'
+  },
+  appBarDesktopSection: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  appBarDesktopSection1: {
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    borderRight: 'solid 1px whitesmoke',
+  },
+  appBarDesktopSection2: {
+    width: '100%',
+    justifyContent: 'space-between',
+    padding: theme.spacing(0, 2),
+    '& ul': {
+      width: '95%',
+    },
+    '& ul>div': {
+      display: 'flex',
+    },
+    '& ul > div:nth-child(1) a span': {
+      color: theme.palette.primary.dark,
+      '&:hover, &:active': {
+        color: theme.palette.primary.main,
+      }
+    },
+    '& .MuiListItemText-root': {
+      padding: theme.spacing(0, 1),
+      [theme.breakpoints.down('md')]: {
+        padding: theme.spacing(0),
+      },
+    },
+    '& a:last-child .MuiButtonBase-root span': {
+      color: theme.palette.secondary.main,
+    },
+  },
+  appBarDesktopSection3: {
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    backgroundColor: theme.palette.primary.dark,
+    '& a': {
+      display: 'flex',
+      alignItems: 'flex-end',
+    },
+    '& span, & svg': {
+      color: theme.palette.secondary.main,
+    },
+  },
+  toolbarDesktop: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: '64px',
+  },
+  desktopMenuButtonLogin: {
+    background: theme.palette.primary.main,
+    borderColor: theme.palette.primary.main,
+  },
+  rootListItemDesktop: {
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(1),
+    },
+  },
+  iconDesktop: {
+    paddingRight: theme.spacing(2.5),
+    [theme.breakpoints.up('md')]: {
+      paddingRight: 0,
+    },
+  },
+});
+let urlEnv;
+
+class HeaderPersonnalise extends React.Component {
+  state = {
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+    toggle: true
+  };
+
+  redirectionrecruteur=(props) => {
+    console.log("redirection recruteur")
+     localStorage.removeItem("ttJWT");
+     //this.openDialog()
+     props.requestLogout();
+     window.location.href = "https://recruteur.talentstube.com/";
+  }
+
+  componentDidMount() {
+
+  }
+
+  
+
+  toggleDrawer = (side, open) => () => {
+    this.setState({
+      [side]: open,
+    });
+  };
+
+  onRedirectAccount = e => {
+      urlEnv = (process.env.NODE_ENV !== 'production') ? '//localhost/app_dev.php' : process.env.SERVER_URL;
+      e.preventDefault();
+      var redirectAccountUrl = urlEnv + "/api/talent?bearer=" + localStorage.getItem("ttJWT");
+      window.open(redirectAccountUrl);
+  }
+
+  toggle = () => this.setState(state => ({ toggle: !state.toggle }))
+  chargerPage =(type)=> {
+    console.log(type);
+    //Router.replace(page);
+    sessionStorage.setItem(type+'_currentPage',1);
+
+  } 
+  render() {
+    const { classes } = this.props;
+    const { publicRuntimeConfig } = getConfig();
+
+
+    return (
+      <div className={classes.root}>
+
+
+        <Drawer anchor="right" open={this.state.right} onClose={this.toggleDrawer('right', false)}>
+          <div
+            tabIndex={0}
+            role="button"
+            onClick={this.toggleDrawer('right', false)}
+            onKeyDown={this.toggleDrawer('right', false)}
+          >{!!this.props.loading &&
+            (<Loader />
+            )}
+            {!!!this.props.loading && !!!this.props.fetched
+              &&
+              <div className={classes.fullList + ' ' + classes.darkFullList}>
+                <List>
+                  <Link href="/"  >
+                    <a className={classes.darkMenuItem + ' cypFrontPage'}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                      <img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-blanc.svg' className={classes.menuLogo} />
+                    </ListItem></a>
+                  </Link>
+
+
+                  <Divider light={true} />
+
+                  <div className={classes.linkGroup}>
+                    <Link href="/Login" >
+                      <a className={classes.lightMenuItem + ' cypConnexion'}><ListItem classes={{ root: classes.rootListItemIcon }} >
+                        <PersonIcon className={classes.icon} />
+                        <ListItemText classes={{ primary: classes.ListItemText }} primary='Connexion'>
+                        </ListItemText>
+                      </ListItem></a>
+                    </Link>
+                    {/* TODO */}
+                    <Link href="/Inscription"  >
+                      <a className={classes.lightMenuItem + ' cypRegister'}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItem }}>
+                        <PersonAddIcon className={classes.icon} />
+                        <ListItemText primary='Inscription'>
+                        </ListItemText>
+                      </ListItem></a>
+                    </Link>
+                  </div>
+
+                  <Divider light={true} />
+
+                  <div className={classes.linkGroup}>
+                    {/* <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
+                      <WorkOutlineIcon className={classes.icon} />
+                      <ListItemText primary='Connexion recruteurs'>
+                      </ListItemText>
+                    </ListItem>
+                    </a> */}
+                  </div>
+                </List>
+              </div>}
+            {!!!this.props.loading && !!this.props.fetched &&
+              <Fragment>
+                {this.props.user.picture ?
+                  <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} />
+                }
+                <ListItem classes={{ root: classes.rootListItem }} className={classes.ListItemUserConnected}>
+                  <Typography gutterBottom component="h1" className={classes.menuUserName}>
+                    {this.props.user.firstname + " " + this.props.user.lastname}
+                  </Typography>
+
+                  <Typography gutterBottom component="h3" className={classes.menuUserEmail} >
+                    {this.props.user.email}
+                  </Typography>
+                </ListItem>
+
+                <Divider className={classes.darkDivider} />
+                {this.props.user.type=="TALENT" 
+                  ? 
+                  <div>
+                    <Link href="/Candidatures"  >
+                      <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <FolderSharedIcon className={classes.icon} />
+                        <ListItemText primary='Mes candidatures'>
+                        </ListItemText>
+                      </ListItem></a>
+                    </Link>
+                    <Link href="/profileStep"  >
+                      <a className={classes.lightMenuItem}>
+                        <ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <AccountCircleIcon className={classes.icon} />
+                        <ListItemText primary='Mon compte'>
+                        </ListItemText>
+                        </ListItem>
+                      </a>
+                    </Link>
+                    
+                    <Link href="/Parametres"  >
+                      <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <SettingsIcon className={classes.icon} />
+                        <ListItemText primary='Paramètres de notification'>
+                        </ListItemText>
+                      </ListItem></a>
+                    </Link>
+                  </div>
+                  : 
+                    this.redirectionrecruteur(this.props)
+                    
+                    // <div>
+                    
+                    //   <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}>
+                    //     <ListItem classes={{ root: classes.rootListItemIcon }}>
+                    //     <SettingsIcon className={classes.icon} />
+                    //     <ListItemText primary='Espace recruteur'>
+                    //     </ListItemText>
+                    //   </ListItem></a>
+                    
+                    // </div>
+                  
+                }
+                  
+
+                <Link href="/" >
+                  <a onClick={() => {
+                    localStorage.removeItem("ttJWT");
+                    return this.props.requestLogout();
+                  }} className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                      <PowerSettingsNewIcon className={classes.icon} />
+                      <ListItemText primary='Déconnexion'>
+                      </ListItemText>
+                    </ListItem></a>
+                </Link>
+              </Fragment>
+            }
+          </div>
+        </Drawer>
+
+        {isWidthUp('md', this.props.width) ?
+          (<AppBar position="static" className={classes.appBar}>
+            <Toolbar disableGutters={true} className={classes.toolbarDesktop}>
+              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection1}>
+                <Link href="/"  >
+                  <a className={classes.darkMenuItem}>
+                    <ListItem classes={{ root: classes.rootListItemDesktop }}>
+                      <img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.desktopMenuLogo} />
+                    </ListItem>
+                  </a>
+                </Link>
+              </section>
+              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection2}>
+                {/* <IconButton className={classes.menuButton} onClick={this.toggleDrawer('left', true)}
+                  color="inherit" aria-label="Open drawer">
+                  <MenuIcon />
+                </IconButton> */}
+
+                <List className={classes.desktopMenuList}>
+                  <div>
+                    <ActiveLink activeClassName={classes.active} href="/Offres"   >
+                      <a className={classes.desktopMenuItem} >
+                        <ListItemText primary="Offres d'emploi">
+                        </ListItemText>
+                      </a>
+                    </ActiveLink>
+                    <ActiveLink activeClassName={classes.active} href="/Entreprises"    >
+                      <a className={classes.desktopMenuItem}>
+                        <ListItemText primary='Nos entreprises'>
+                        </ListItemText>
+                      </a>
+                    </ActiveLink>
+                    <ActiveLink activeClassName={classes.active} href="/Help"  >
+                      <a className={classes.desktopMenuItem}>
+                        <ListItemText primary='Comment ça marche ?'>
+                        </ListItemText>
+                      </a>
+                    </ActiveLink>
+                    
+                    <a className={classes.desktopMenuItem} target="_blank" href="https://blog.talentstube.com/">
+                      <ListItemText primary='Blog'>
+                      </ListItemText>
+                    </a>
+                    
+                  </div>
+
+                  <div>
+                    {!!!this.props.loading && !!!this.props.fetched &&
+                      <Fragment>
+                        <Link href="/Inscription"  >
+                          <a className={classes.desktopMenuItem}>
+                            <ListItem classes={{ root: classes.rootListItemDesktop }}>
+                              <Button
+                                variant="outlined"
+                                className={classes.button + ' ' + classes.desktopMenuButtonRegister}>
+                                <PersonAddIcon className={classes.iconDesktop} />
+                                <ListItemText classes={{ primary: classes.ListItemText }} primary='Inscription'></ListItemText>
+                              </Button >
+                            </ListItem>
+                          </a>
+                        </Link>
+
+                        <Link href="/Login"  >
+                          <a className={classes.desktopMenuItem}>
+                            <ListItem classes={{ root: classes.rootListItemDesktop }}>
+                              <Button
+                                variant="outlined"
+                                className={classes.button + ' ' + classes.desktopMenuButtonLogin}>
+                                <PersonIcon className={classes.iconDesktop} />
+                                <ListItemText classes={{ primary: classes.ListItemText }} primary='Connexion'></ListItemText>
+                              </Button >
+                            </ListItem>
+                          </a>
+                        </Link>
+                      </Fragment>
+                    }
+                    {!!!this.props.loading && !!this.props.fetched &&
+                      <IconButton
+                        edge="end"
+                        aria-label="Profile"
+                        aria-controls={'primary-search-account-menu'}
+                        aria-haspopup="true"
+                        onClick={this.toggleDrawer('right', true)}
+                        className={classes.iconAccount + ' cypConnexionMenu'}
+                      >
+                        <AccountCircleOutlinedIcon />
+                      </IconButton>
+                    }
+                  </div>
+                </List>
+              </section>
+              {/* <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
+
+                <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
+                  <ListItemText primary='Espace recruteurs'>
+                  </ListItemText>
+                  <ArrowForward className={classes.icon} />
+                </a>
+              </section> */}
+            </Toolbar>
+          </AppBar>)
+          :
+          (
+            <AppBar position="static" className={classes.appBar}>
+              <Toolbar className={classes.toolbar}>
+                {/* <IconButton className={classes.menuButton} onClick={this.toggleDrawer('left', true)}
+                  color="inherit" role="button">
+                  <MenuIcon />
+                </IconButton> */}
+                <ButtonBase name='back'
+                  focusRipple
+                  className={classes.back}
+                  focusVisibleClassName={classes.focusVisible}
+                  onClick={() => Router.push("/"+this.props.retour)}>
+                  <ArrowLeft color="primary" classes={{ root: classes.icon }}></ArrowLeft>
+                </ButtonBase>
+                <div className={classes.grow} />
+                <Link href="/"  >
+                  <a><img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.menuLogo} /></a>
+                </Link>
+                <div className={classes.grow} />
+                <IconButton
+                  edge="end"
+                  aria-label="Profile"
+                  aria-controls={'primary-search-account-menu'}
+                  aria-haspopup="true"
+                  onClick={this.toggleDrawer('right', true)}
+                  className={classes.iconAccount + ' cypConnexionMenu'}
+
+                >
+                  <AccountCircleOutlinedIcon />
+                </IconButton>
+              </Toolbar>
+            </AppBar>
+          )}
+      </div >
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+    fetched: !!state.user.fetched,
+    loading: !!state.user.loading
+  };
+}
+export default (connect(mapStateToProps, { fetchCurrentUserRequest, requestLogout })(withStyles(styles)(withWidth()(HeaderPersonnalise))));

nextjs/components/organisms/OffreRow.js

@@ -17,7 +17,7 @@ const styles = theme => ({
   card: {
     display: 'flex',
     minHeight: '21vh',
-    maxHeight: '32vh',
+    // maxHeight: '32vh',
     borderRadius: '5px',
     width: '100%',
     cursor: 'pointer',
@@ -38,11 +38,11 @@ const styles = theme => ({
     },
     [theme.breakpoints.up('md')]: {
       minHeight: '15vh',
-      maxHeight: '20vh',
+      // maxHeight: '20vh',
     },
     margin: '1vh 2vh 1vh 2vh',
     [theme.breakpoints.up('sm')]: {
-      margin: '1vh 0 1vh 0',
+      margin: '2vh 0 2vh 0',
     },
   },
   detailsContainer: {
@@ -51,14 +51,15 @@ const styles = theme => ({
     alignItems: 'flex-start',
     padding: theme.spacing(2),
     width: '75%',
+    // minHeight: '200px',
   },
   jobTitle: {
-    fontSize: '1em',
+    fontSize: '1.2em',
     fontWeight: 'bold',
     color: theme.palette.offerlistitem.title,
   },
   companyTitle: {
-    fontSize: '0.8em',
+    fontSize: '1.2em',
     fontWeight: '300',
     color: theme.palette.offerlistitem.title,
   },
@@ -96,11 +97,11 @@ const styles = theme => ({
   },
   iconTextIcon: {
     color: theme.palette.offerlistitem.icon,
-    fontSize: '0.8em',
+    fontSize: '1.2em',
   },
   iconTextText: {
     color: theme.palette.offerlistitem.text,
-    fontSize: '0.6em',
+    fontSize: '1em',
     paddingLeft: theme.spacing(1),
   },
   chip: {
@@ -126,7 +127,7 @@ class OffreRowComponent extends React.Component {
     const imgUrl = (rowData.video && rowData.video.thumbnails && rowData.video.thumbnails[0] && rowData.video.thumbnails[0].sizes[4]) ? rowData.video.thumbnails[0].sizes[4].link : publicRuntimeConfig.adListDefaultUrl
 
     return (
-      <Link href={`/Offre/${rowData.id}-${_.kebabCase(rowData.title)}-${_.kebabCase(rowData.location.gmap_address.name)}`} >
+      <Link href={`/Offre/${rowData.id}-${_.kebabCase(rowData.title)}`} >
         <Card className={classes.card + ' cypCardOffre'} >
           <CardContent className={classes.content}>
             <CardMedia
@@ -149,19 +150,21 @@ class OffreRowComponent extends React.Component {
               <Typography
                 variant="headline"
                 variant="h6"
-                component="h4"
+                component="h3"
                 className={classes.companyTitle}>
-                {rowData.beneficiaire ? "Pour le compte de "+rowData.beneficiaire : companyR.brand_name ? companyR.brand_name : "Non renseigné"} 
+                {companyR.brand_name ? companyR.brand_name : "Non renseigné"} 
               </Typography>
               <div>
                 {rowData.is_promoted && (
-                  <Chip label="Pourvue" className={classes.chip} />
+                  <Chip label="Offre pourvue" className={classes.chip} />
                 )}
 
                 {!rowData.is_promoted && (
                   <Fragment>
-                    <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={rowData.extra.contract_type} />
-                    <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business_center" text={rowData.location.gmap_address.formatted_address} />
+                    <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business_center" text={rowData.extra.contract_type} />
+                    <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={rowData.location.gmap_address.formatted_address} />
+                    {rowData.beneficiaire ? <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={rowData.beneficiaire} /> :  ""} 
+                    
                   </Fragment>
                 )}
 

nextjs/components/organisms/PWAInstallSnack.js

@@ -22,8 +22,8 @@ const styles = theme => ({
     },
     askToInstallText: {
         fontSize: '1.4em',
-        fontWeight: '500',
-        fontFamily: 'Dosis',
+        fontWeight: '600',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     },
     installApp: {
         width: '100%',

nextjs/components/organisms/Recorder.js

@@ -7,6 +7,7 @@ import axios from 'axios'
 import setAuthorizationHeader from "../../data/setAuthorizationHeader";
 import 'videojs/dist/video-js.css';
 import 'videojs-record/dist/css/videojs.record.css';
+import ArrowRight from '@material-ui/icons/ArrowRight';
 
 dynamic(() => import('webrtc-adapter'), {
     ssr: false
@@ -17,8 +18,31 @@ const RTCRecorder = dynamic(() => import('RecordRTC'), {
 
 const videoJsOptions = {
     controls: true,
-
+    width: '550',
+    languages: {
+        fr: {
+          
+            Replay: 'Jouer'
+        }
+      },
+    autoplay:true,
+    preload:"auto",
+    playsinline : false,
+    //videoEngine: 'webm-wasm',
+    //liveui : true,
     fluid: true,
+    nativeControlsForTouch:false,
+    controlBar: {
+        // hide fullscreen and volume controls
+        fullscreenToggle: false,
+        volumePanel: false,
+        deviceButton: false,
+        recordIndicator:true,
+        recordToggle: false,
+        PictureInPictureToggle:false,
+        PlayToggle:false
+    },
+     poster: '/statique/images/webrtc/module-video-talents-tube.svg',
     plugins: {
       /*
       // wavesurfer section is only needed when recording audio-only
@@ -40,37 +64,107 @@ const videoJsOptions = {
       }
     }
   };
-
-const styles = theme => ({
-    root: {
-        margin: theme.spacing(1),
-        maxWidth: '400px', [theme.breakpoints.down('md')]: {
-            maxWidth: `${100 - (theme.spacing(1))}vw`
+    const styles = theme => ({
+        primary: {
+            color: theme.palette.primary.main,
         },
-        sendContainer: {
-            textAlign: 'center'
+        root: {
+            position: 'relative',
+            textAlign: 'center',
+            paddingTop: theme.spacing(10),
+            justifyContent: 'center',
         },
         button: {
+            color: '#FFFFFF',
+            padding: '9.6px 16px',
+            borderColor: '#25D89A',
+            border: '2px solid',
+            margin:'15px 8px 25px 8px',
             textTransform: 'inherit',
-            marginLeft: theme.spacing(8),
-            marginRight: theme.spacing(8),
-            marginTop: theme.spacing(4),
-            marginBottom: theme.spacing(2),
-            padding: theme.spacing(1.2, 2),
-            //borderRadius: '3px',
-            [theme.breakpoints.up('sm')]: {
-                margin: 'auto',
-            },
+            backgroundColor:'#25D89A',
+        },
+        buttonRelancer:{
+            color: '#1E2327',
+            borderColor: '#1E2327',
+            border: '2px solid',
+            margin: '15px 8px 25px 8px',
+            padding: '9.6px 16px',
+            textTransform: 'inherit',
+            color: '#1E2327',
+            borderColor: '#1E2327',
 
         },
-    }
-})
+
+        buttonArret: {
+            color: '#FFFFFF',
+            borderColor: '#FF5A5F',
+            border: '2px solid',
+            padding: '9.6px 16px',
+            margin:'15px 8px 25px 8px',
+            textTransform: 'inherit',
+            backgroundColor:'#FF5A5F',
+        },
+        buttonLire: {
+            color: '#FFFFFF',
+            padding: '9.6px 16px',
+            margin:'15px 8px 25px 8px',
+            textTransform: 'inherit',
+            backgroundColor:'#1689FB',
+        },
+        conteneurVideo:{
+            width:'550px!important'
+        },
+        sendContainer: {
+                         left: '-40px'
+        },
+    
+      
+    })
+
+// const styles = theme => ({
+//     root: {
+//         margin: theme.spacing(1),
+//         maxWidth: '400px', [theme.breakpoints.down('md')]: {
+//             maxWidth: `${100 - (theme.spacing(1))}vw`
+//         },
+//         sendContainer: {
+//             textAlign: 'center'
+//         },
+//         bouton: {
+//             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,
+//         },
+//         conteneurVideo:{
+//             width:'550px!important'
+//         }
+//     }
+// })
 class Recorder extends Component {
 
     state={
-        canSend:false
+        canSend:false,
+        isActiveLancer:true,
+        isActiveArreter:false,
+        isActiveLancerReplay:false,
+        lancerText:"Démarrer l’enregistrement",
+        lancerStyleRelance : 0,
     }
 
+    handleLancer = (replay)=>{
+        this.setState({
+            isActiveLancer: !this.state.isActiveLancer,
+            isActiveArreter: !this.state.isActiveArreter,
+            lancerText : "Refaire une vidéo",
+        })
+        replay==1 ? this.setState({isActiveLancerReplay: 1}) : this.setState({isActiveLancerReplay: 0})  
+        this.setState({lancerStyleRelance: 1})
+    }
+
+
     async componentDidMount() {
         var record = (await import('videojs-record')).default
         // instantiate Video.js
@@ -81,10 +175,42 @@ class Recorder extends Component {
                 ' and recordrtc ' + RTCRecorder.VERSION;
             videojs.log(version_info);
         });
+        var vid= this.player;
+        this.player.bigPlayButton.hide();
+
+
+        // When you pass text in options it just creates a control text,
+// which is displayed as tooltip when hovered on 
+// this button viz the span in you div,
+var myButton = this.player.controlBar.addChild("button");
+
+
+
+// There are many functions available for button component 
+// like below mentioned in this docs 
+// https://docs.videojs.com/button. 
+// You can set attributes and clasess as well.
+
+// Getting html DOM
+var myButtonDom = myButton.el();
+//var myButtonDom2 = myButton2.el();
+// Since now you have the html dom element 
+// you can add click events
+
+
+// Now I am setting the text as you needed.
+// myButtonDom.innerHTML = "Youi";
+
+myButtonDom.onclick = function(){
+  //alert("Redirecting");
+  vid.pause();
+}  
+   
 
         // device is ready
         this.player.on('deviceReady', () => {
             console.info('device is ready!');
+            this.player.record().start();
             this.setState({canSend:false});
         });
 
@@ -129,9 +255,44 @@ class Recorder extends Component {
         this.props.uploader(formData);
     }
 
+    recordPlayer = () => {
+        // console.log('accessing recording: ', this.player.recordedData)
+        if (this.player) {
+            //this.player.recorder.start()
+            this.player.ready();
+            this.player.record().getDevice();
+            this.handleLancer(0);   
+        }
+    }
+
+    playPlayerAuto = () => {
+        // console.log('accessing recording: ', this.player.recordedData)
+        if (this.player) {
+            //this.player.recorder.start()
+            this.player.autoplay('play');
+            
+        }
+    }
+    pausePlayerAuto = () => {
+        // console.log('accessing recording: ', this.player.recordedData)
+        if (this.player) {
+            //this.player.recorder.start()
+            this.player.autoplay('pause');
+            
+        }
+    }
+    
+     arretPlayer = () => {
+        // console.log('accessing recording: ', this.player.recordedData)
+        if (this.player) {
+            this.player.record().stop();
+            this.handleLancer(1);
+        }
+     }
+
     render() {
         const { classes, titreBouton } = this.props;
-        let titreButtonLabel= "Envoyer";
+        let titreButtonLabel= "Choisir cette vidéo";
         
 
         if (titreBouton) {
@@ -140,17 +301,24 @@ class Recorder extends Component {
             console.log(titreButtonLabel);       
         }
         return (
-            <div>
+            <div className={classes.conteneurVideo}>
                 <div data-vjs-player>
-                    <video id="myVideo" ref={node => this.videoNode = node} className="video-js vjs-default-skin" playsInline></video>
+                    <video id="myVideo" width='550' ref={node => this.videoNode = node} className="video-js vjs-default-skin" playsInline></video>
                 </div>
                 <div className={classes.sendContainer}>
-                   { this.state.canSend && <Button type="submit" variant="outlined" color="primary"
+                   
+                    {this.state.isActiveLancer ? <Button className={this.state.lancerStyleRelance==1 ? classes.buttonRelancer: classes.button}   onClick={this.recordPlayer}>{this.state.lancerText}</Button> : null }
+                    {this.state.isActiveArreter ?<Button className={classes.buttonArret}    onClick={this.arretPlayer}>Arrêter l'enregistrement</Button> : null }
+                    {/* {this.state.isActiveLancerReplay ?<Button cyp="ButtonApply" variant="contained" className={classes.buttonLire}   onClick={this.playPlayerAuto}><ArrowRight className={ classes.InputKeyboardArrowRightIcon }/>Relire</Button>: null } */}
+                    { this.state.canSend && <Button type="submit" className={classes.button}
                         className={classes.button}
                         onClick={this.sendBlob}>
                         {titreButtonLabel}
                     </Button>}
                 </div>
+                <div id="controleNav">
+                    
+                </div>
             </div>
         );
     }

nextjs/components/organisms/Register.js

@@ -10,6 +10,7 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 import { withStyles } from '@material-ui/core/styles';
 import { registerUserRequest, subscribeToNewsletterRequest } from "../../actions/user"
 import SocialButtonsAuth from '../atoms/SocialButtonsAuth';
+import Snack from '../atoms/snack'
 
 const styles = theme => ({
     container: {
@@ -31,6 +32,26 @@ const styles = theme => ({
         display: 'flex',
         flexDirection: 'column',
     },
+    connexionRecruteur:{
+        textAlign : "center",
+        marginTop:"40px",
+        backgroundColor:"#1E2327",
+        padding:"30px 0",
+        width:"100%",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '300',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+
+    },
+    enSavoirPlus:{
+        textAlign : "center",
+        textDecoration :"none",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '600',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    },
     formText: {
         padding: theme.spacing(0, 2),
         paddingTop: theme.spacing(3),
@@ -100,6 +121,18 @@ const styles = theme => ({
         marginTop: theme.spacing(6),
         marginBottom: theme.spacing(2),
     },
+    titre: {
+        fontWeight: 600,
+        fontSize: "1.875em",
+        marginBottom:"20px",
+        fontFamily: "Roboto",
+    },
+    cgu: {
+        fontFamily: "Roboto",
+        fontSize: "1em",
+        fontWeight: "300",
+
+    },
 });
 
 class Register extends React.Component {
@@ -107,20 +140,25 @@ class Register extends React.Component {
         data: {
             firstname: '',
             lastname: '',
+            phone: '',
             email: '',
             password: '',
             checkNewsletter: false,
             checkCGU: false,
+            adId : ''
         },
         errors: {
             email:null,
             password:null,
             firstname:null,
+            phone:null,
             lastname:null,
+            phone:null,
             checkCGU:null
         },
         loading: false,
-        showPassword: false
+        showPassword: false,
+        passwordValid : false
     }
 
     validate = data => {
@@ -131,18 +169,28 @@ class Register extends React.Component {
         if (!!!data.lastname) errors.lastname = "Requis";
         if (!data.checkCGU) errors.checkCGU = "Requis";
         
+        if(data.password.length <8){
+            errors.password = "Too short";
+        }
+        
         return errors;
     };
+    
+    componentDidMount() {
+        this.setState({
+            data: {...this.state.data, adId: localStorage.getItem('adId')},
+        })
+    }
 
     onRegister = e => {
         e.preventDefault();
-        const errors = this.validate(this.state.data);
-
+        let errors = this.validate(this.state.data);
         this.setState({ errors: errors });
-
+        // console.log('adId')
+        // console.log(this.state.data)
         if (Object.keys(errors).length === 0) {
 
-            this.props.registerUserRequest(this.state.data)
+            console.log(this.props.registerUserRequest(this.state.data))
 
             if (this.state.data.checkNewsletter)
                 this.props.subscribeToNewsletterRequest({ email: this.state.data.email })
@@ -156,10 +204,12 @@ class Register extends React.Component {
             loading: nextProps.loading
         })
     }
-    onChange = e =>
+    onChange = e => {
+
         this.setState({
             data: { ...this.state.data, [e.target.name]: e.target.value }
         });
+    }
     handleCheckBoxChange = name => event => {
         this.setState({ data: { ...this.state.data, [name]: event.target.checked } });
     };
@@ -173,7 +223,7 @@ class Register extends React.Component {
     };
 
     render() {
-        const { classes } = this.props;
+        const { classes, erreurs } = this.props;
         const { data, errors } = this.state;
 
         return (
@@ -181,17 +231,12 @@ class Register extends React.Component {
 
                 <form className={classes.form}>
 
-                    <TextField
-                        value={data.lastname}
-                        onChange={this.onChange}
-                        id="nom"
-                        name="lastname"
-                        label="Nom"
-                        margin="normal"
-                        variant="outlined"
-                        required
-                        error={!!errors.lastname}
-                    />
+                    <Typography
+                        className={classes.titre}    
+                        align="left"
+                    >
+                        Inscription   
+                    </Typography>
                     <TextField
                         value={data.firstname}
                         onChange={this.onChange}
@@ -202,8 +247,36 @@ class Register extends React.Component {
                         variant="outlined"
                         required
                         error={!!errors.firstname}
+                        helperText={!!errors.firstname && "Veuillez saisir votre prénom."}
                     />
 
+                    <TextField
+                        className={classes.champ}
+                        value={data.lastname}
+                        onChange={this.onChange}
+                        id="nom"
+                        name="lastname"
+                        label="Nom"
+                        margin="normal"
+                        variant="outlined"
+                        required
+                        error={!!errors.lastname}
+                        helperText={!!errors.lastname && "Veuillez saisir votre nom."}
+                    />
+
+                    <TextField
+                        className={classes.champ}
+                        value={data.phone}
+                        onChange={this.onChange}
+                        id="telephone"
+                        name="phone"
+                        label="Téléphone"
+                        margin="normal"
+                        variant="outlined"
+                    />
+
+                    
+
                     <TextField
                         value={data.email}
                         onChange={this.onChange}
@@ -214,14 +287,14 @@ class Register extends React.Component {
                         type="email"
                         variant="outlined"
                         required
-                        error={!!errors.email}
-                        autoComplete="username email"
+                        error={!!errors.email || !!erreurs}
+                        helperText={!!errors.email  ? "Saisissez une adresse e-mail valide." : !!erreurs && erreurs}
                     />
 
 
                     <TextField
                         className={clsx(classes.margin, classes.textField)}
-                        label="Password"
+                        label="Mot de passe"
                         name="password"
                         id="adornment-password"
                         variant="outlined"
@@ -230,6 +303,7 @@ class Register extends React.Component {
                         value={this.state.password}
                         onChange={this.onChange}
                         error={!!errors.password}
+                        helperText={!!errors.password && "Votre mot de passe doit contenir au minimum 8 caractères."}
                         InputProps={{
                             endAdornment: (
                                 <InputAdornment position="end">
@@ -273,19 +347,20 @@ class Register extends React.Component {
                         label="Je déclare avoir pris connaissance et accepte les termes et les CGU *"
                         required
                     />
+                    <Link href={`/Cgu`} className={classes.cgu}>Lire les CGU</Link>
                     <Button type="submit" variant="contained" className={classes.button + ' ' + classes.buttonImportant + ' cypButtonRegister'} onClick={this.onRegister}>
                         S'inscrire
                     </Button>
 
-                    <Typography
+                    {/* <Typography
                         paragraph={true}
                         align="center"
                         className={classes.conditionalText}
-                    >Ou</Typography>
+                    >Ou</Typography> */}
 
                 </form>
 
-                <SocialButtonsAuth linkedInAuth={this.props.linkedInAuth} facebookAuth={this.props.facebookAuth} />
+                {/* <SocialButtonsAuth linkedInAuth={this.props.linkedInAuth} facebookAuth={this.props.facebookAuth} /> */}
 
                 <div classes={classes.form}>
                     <Typography
@@ -300,7 +375,15 @@ class Register extends React.Component {
                         </Link>
                     </Typography>
                 </div>
+                <div className={classes.connexionRecruteur}>
+                    Vous êtes recruteur ? <a className={classes.enSavoirPlus} href='https://recruteur.talentstube.com'><span >En savoir plus</span></a>
+                </div>
+                <Snack name= 'snackWarning'
+                    variant= 'warning'
+                    message={errors.message}
+                    />
             </div>
+
         );
     }
 }
@@ -309,6 +392,7 @@ function mapStateToProps(state) {
     return {
         loading: !!state.user.loading,
         errors: !!state.user.errors ?state.user.errors: {
+            phone:null,
             email:null,
             password:null,
             firstname:null,

nextjs/components/organisms/SocialShare.js

@@ -5,6 +5,7 @@ import { loadCSS } from 'fg-loadcss';
 import { makeStyles } from '@material-ui/core/styles';
 import { red } from '@material-ui/core/colors';
 import Icon from '@material-ui/core/Icon';
+import Hidden from '@material-ui/core/Hidden';
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -26,16 +27,52 @@ const useStyles = makeStyles(theme => ({
         textAlign: 'center',
     },
     FacebookIcon: {
-        backgroundColor: theme.palette.social.facebook,
+        color: theme.palette.social.facebook,
+        '&:hover': {
+            backgroundColor: theme.palette.social.facebook,
+            color: '#fff',
+        }
     },
     TwitterIcon: {
-        backgroundColor: theme.palette.social.twitter,
+        color: theme.palette.social.twitter,
+        '&:hover': {
+            backgroundColor: theme.palette.social.twitter,
+            color: '#fff',
+        }
     },
     LinkedinIcon: {
-        backgroundColor: theme.palette.social.linkedin,
+        color: theme.palette.social.linkedin,
+        '&:hover': {
+            backgroundColor: theme.palette.social.linkedin,
+            color: '#fff',
+        }
     },
     MailIcon: {
-        backgroundColor: theme.palette.social.mail,
+        color: theme.palette.social.mail,
+        '&:hover': {
+            backgroundColor: theme.palette.social.mail,
+            color: '#fff',
+        }
+    },
+    FacebookIconMobile: {
+        color: theme.palette.social.facebook,
+        paddingRight:'0px',
+        paddingLeft:'3px'    
+    },
+    TwitterIconMobile: {
+        color: theme.palette.social.twitter,
+        paddingRight:'3px' ,
+        paddingLeft:'3px'  
+    },
+    LinkedinIconMobile: {
+        color: theme.palette.social.linkedin,
+        paddingRight:'3px',
+        paddingLeft:'3px'   
+    },
+    MailIconMobile: {
+        color: theme.palette.social.mail,
+        paddingRight:'3px' ,
+        paddingLeft:'3px'  
     },
 }));
 
@@ -51,19 +88,36 @@ export default function SocialShare(props) {
 
     return (
         <div className={classes.root}>
-            <a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)}>
-                <Icon className={clsx(classes.icon, classes.FacebookIcon, 'fab fa-facebook-f')} color="secondary" />
-            </a>
-            <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)}>
-                <Icon className={clsx(classes.icon, classes.TwitterIcon, 'fab fa-twitter')} color="secondary" />
-            </a>
-            <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talent's Tube")}>
-                <Icon className={clsx(classes.icon, classes.LinkedinIcon, 'fab fa-linkedin-in')} color="secondary" />
-            </a>
-            {/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
-            <a href={"mailto:?subject=Offre d'emploi Talent's Tube&body=Regardez cette offre : " + props.url} >
-                <Icon className={clsx(classes.icon, classes.MailIcon, 'fas fa-envelope')} color="secondary" />
-            </a>
+            <Hidden smDown>
+                <a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)} target="_blank">
+                    <Icon className={clsx(classes.icon, classes.FacebookIcon, 'fab fa-facebook-f')}  />
+                </a>
+                <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} target="_blank">
+                    <Icon className={clsx(classes.icon, classes.TwitterIcon, 'fab fa-twitter')} color="secondary" />
+                </a>
+                <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talents Tube")} target="_blank">
+                    <Icon className={clsx(classes.icon, classes.LinkedinIcon, 'fab fa-linkedin-in')} color="secondary" />
+                </a>
+                {/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
+                <a href={"mailto:?subject=Offre d'emploi Talents Tube&body=Regardez cette offre : " + props.url} target="_blank"s>
+                    <Icon className={clsx(classes.icon, classes.MailIcon, 'fas fa-envelope')} color="secondary" />
+                </a>
+            </Hidden>
+            <Hidden mdUp>
+            <a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)} target="_blank">
+                    <Icon className={clsx(classes.icon, classes.FacebookIconMobile, 'fab fa-facebook-f')}  />
+                </a>
+                <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} target="_blank">
+                    <Icon className={clsx(classes.icon, classes.TwitterIconMobile, 'fab fa-twitter')} color="secondary" />
+                </a>
+                <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talents Tube")} target="_blank">
+                    <Icon className={clsx(classes.icon, classes.LinkedinIconMobile, 'fab fa-linkedin-in')} color="secondary" />
+                </a>
+                {/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
+                <a href={"mailto:?subject=Offre d'emploi Talents Tube&body=Regardez cette offre : " + props.url} target="_blank"s>
+                    <Icon className={clsx(classes.icon, classes.MailIconMobile, 'fas fa-envelope')} color="secondary" />
+                </a>
+            </Hidden>
         </div>
     );
 }

nextjs/components/organisms/Tile.js

@@ -99,7 +99,7 @@ class Tile extends React.Component {
     const logoName = (rowData.company) ? rowData.company.logo : rowData.logo
     const logoUrl = publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + logoName
 
-    const router = (rowData.company) ? `/Offre/${rowData.id}-${_.kebabCase(rowData.title)}-${_.kebabCase(rowData.location.gmap_address.name)}` : `/Entreprise/${rowData.id}-${_.kebabCase(rowData.brand_name)}-${_.kebabCase(rowData.addresses.billing.city)}`
+    const router = (rowData.company) ? `/Offre/${rowData.id}-${_.kebabCase(rowData.title)}` : `/Entreprise/${rowData.id}-${_.kebabCase(rowData.brand_name)}}`
 
     //rowData._embedded.company.brand_name
     return (
@@ -113,7 +113,7 @@ class Tile extends React.Component {
             />
             <KeyboardArrowleftIcon className={classes.iconPlay} />
             <div className={classes.logoContainer}>
-              <Avatar className={classes.logo} src={logoUrl} alt="company"/>
+              <Avatar className={classes.logo} src={logoUrl} alt={rowData.title}/>
             </div>
             { children }
           </CardContent>

nextjs/components/organisms/TileOffre.js

@@ -10,11 +10,11 @@ const styles = theme => ({
         flexDirection: 'column',
         justifyContent: 'space-between',
         position: 'absolute',
-        top: '51%',
+        top: '44%',
         width: '100%',
     },
     companyTitle: {
-        fontSize: '0.8em',
+        fontSize: '1em',
         fontWeight: '100',
         padding: theme.spacing(0, 2),
         marginTop: '4vh',
@@ -24,7 +24,7 @@ const styles = theme => ({
         },
     },
     jobTitle: {
-        fontSize: '1em',
+        fontSize: '1.2em',
         padding: theme.spacing(0, 2),
         minHeight: '8vh',
         [theme.breakpoints.up('lg')]: {
@@ -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.beneficiaire && " / "+tile.beneficiaire }
+                        {tile.company.brand_name && tile.company.brand_name} 
                     </Typography>
                     <Typography
                         gutterBottom
@@ -82,6 +82,10 @@ class TileOffre extends React.Component {
                     {tile.extra && tile.extra.contract_type &&
                         <IconText classes={{ root: classes.rootIconText }} variant="assignment" text={tile.extra.contract_type} />
                     }
+
+                    {tile.beneficiaire &&
+                        <IconText classes={{ root: classes.rootIconText }} variant="business" text={tile.beneficiaire} />
+                    }
                 </section>
             </Fragment>
         );

nextjs/components/organisms/VideoPlayer.js

@@ -1,5 +1,6 @@
-import React from 'react';
-import videojs from 'video.js'
+import React, { lazy } from 'react';
+const videojs = lazy(() => import('video.js'));
+//import videojs from 'video.js'
 
 export default class VideoPlayer extends React.Component {
   componentDidMount() {

nextjs/components/templates/Grid.js

@@ -1,4 +1,4 @@
-import Griddle, { utils } from "griddle-react";
+import Griddle, { utils, plugins } from "griddle-react";
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
 import { withStyles } from '@material-ui/core/styles';
@@ -7,6 +7,7 @@ import TextField from '@material-ui/core/TextField';
 import GriddleCustomTable from "../organisms/GriddleCustomTableComponent";
 import GriddleCustomNextButton from "../organisms/GriddleCustomNextButton"
 import GriddleCustomPreviousButton from "../organisms/GriddleCustomPreviousButton"
+import GriddleCustomPageDropdown from "../organisms/GriddleCustomPageDropdown"
 import Loader from './loader'
 import IconSearch from '@material-ui/icons/Search';
 import NoResult from './../atoms/NoResult';
@@ -80,18 +81,37 @@ class Grid extends Component {
         recordCount: 0,
         promoted: false,
         filterText: "",
+        // options: [],
     };
 
     async componentDidMount() {
         
         this.setState({pageSize:this.props.limit})
-
+        let data = sessionStorage.getItem(this.props.type+'_currentPage');
+        let current;
+        if(data){
+            current=data;
+        }else{
+            current=this.state.currentPage;
+        }
         this.props.dataFetcher(
             {
-                offset: this.state.currentPage,
+                offset: ((current-1)*this.props.limit)+1,
                 limit: this.props.limit
             }
         );
+        // let options = [];
+        // let startIndex = Math.max(this.props.currentPage - 5, 0);
+        // let endIndex = Math.min(startIndex + 11, this.props.maxPage);
+
+        // if (this.props.maxPage >= 11 && (endIndex - startIndex) <= 10) {
+        //     startIndex = endIndex - 11;
+        // }
+
+        // for(let i = startIndex; i < endIndex ; i++){
+        //   let selected = this.props.currentPage == i ? "current-page-selected" : "";
+        //     options.push(<button className={selected} data-value={i} onClick={this.pageChange}>{i + 1}</button>);
+        // }
     }
 
     UNSAFE_componentWillReceiveProps(nextProps) {
@@ -106,10 +126,17 @@ class Grid extends Component {
         const { currentPage, pageSize, filterText, promoted } = this.state;
 
         if (nextProps.promoted != this.state.promoted) {
+            let data = sessionStorage.getItem(this.props.type+'_currentPage');
+            let current;
+            if(data){
+                current=data;
+            }else{
+                current=this.state.currentPage;
+            }
             this.setState({ promoted: nextProps.promoted });
             this.props.dataFetcher(
                 {
-                    offset: this.state.currentPage,
+                    offset: ((current-1)*(this.state.pageSize+1))+1,
                     limit: this.state.pageSize,
                     keyword: filterText,
                     isPromoted: nextProps.promoted
@@ -123,19 +150,34 @@ class Grid extends Component {
     _onNext = () => {
         const { currentPage, pageSize, filterText, promoted } = this.state;
         this.props.dataFetcher({ offset: currentPage * pageSize, limit: pageSize, keyword: filterText, isPromoted: promoted })
+        sessionStorage.setItem(this.props.type+'_currentPage', currentPage+1);
+
     };
 
     _onPrevious = () => {
         const { currentPage, pageSize, filterText, promoted } = this.state;
         this.props.dataFetcher({ offset: (currentPage - 2) * pageSize + 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
+        sessionStorage.setItem(this.props.type+'_currentPage', currentPage-1);
+
     };
 
-    _onGetPage = pageNumber => {
+    _onGetPage = (pageNumber, page) => {
+        const { pageSize, filterText, promoted } = this.state;
+        this.props.dataFetcher({ offset: (page - 1) * pageSize + 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
+        console.log(pageNumber);
+        console.log(page);
+        sessionStorage.setItem(this.props.type+'_currentPage', page);
+        console.log("On get Page");
+    };
+
+    _onSetPage = pageNumber => {
         const { pageSize, filterText, promoted } = this.state;
         this.props.dataFetcher({ offset: (pageNumber - 1) * pageSize + 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
+        console.log("On set Page");
     };
 
     _onFilter = filterText => {
+        sessionStorage.setItem(this.props.type+'_currentPage', 1);
         this.setState({ currentPage: 1 });
         const { currentPage, pageSize, promoted } = this.state;
         this.setState({ filterText });
@@ -148,11 +190,12 @@ class Grid extends Component {
 
     searchSubmit = () => {
         const { currentPage, pageSize, promoted, filterText } = this.state;
-
+        sessionStorage.setItem(this.props.type+'_currentPage', 1);
         this.props.dataFetcher({ offset: 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
     }
 
     render() {
+        
         const { classes, placeholder } = this.props
         const style = {
             styles: {
@@ -170,7 +213,7 @@ class Grid extends Component {
                 NextButton: {
                     fontSize: '0.9em',
                     fontWeight: '600',
-                    fontFamily: 'Dosis',
+                    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
                     textTransform: 'inherit',
                     marginLeft: '64px',
                     marginRight: '64px',
@@ -186,7 +229,7 @@ class Grid extends Component {
                 PreviousButton: {
                     fontSize: '0.9em',
                     fontWeight: '600',
-                    fontFamily: 'Dosis',
+                    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
                     textTransform: 'inherit',
                     marginLeft: '64px',
                     marginRight: '64px',
@@ -202,8 +245,8 @@ class Grid extends Component {
                 PageDropdown: {
                     fontSize: '0.9em',
                     fontWeight: '600',
-                    fontFamily: 'Dosis',
-                    display: 'none',
+                    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+                    // display: 'none',
                 },
             }
         }
@@ -211,10 +254,12 @@ class Grid extends Component {
         const { filterText, data, currentPage, pageSize, recordCount, loading } = this.state;
 
         const NewLayout = ({ Table, Pagination, Filter }) => (
+            
             <div>
                 {/* <Filter /> */}
                 <Table />
                 <Pagination />
+                
             </div>
         );
 
@@ -278,6 +323,7 @@ class Grid extends Component {
                                 recordCount,
                             }}
                             useCustomPagerComponent="true"
+                            plugins={plugins.localPlugin}
                             components={{
                                 Layout: NewLayout,
                                 Row: this.props.CustomRowComponent,
@@ -285,12 +331,15 @@ class Grid extends Component {
                                 TableBody: CustomTableBody,
                                 PreviousButton: GriddleCustomPreviousButton,
                                 NextButton: GriddleCustomNextButton,
+                                PageDropdown: GriddleCustomPageDropdown,
+                                
                             }}
                             events={{
                                 onNext: this._onNext,
                                 onPrevious: this._onPrevious,
                                 onGetPage: this._onGetPage,
-                                onFilter: this._onFilter
+                                onFilter: this._onFilter,
+                                onSetPage: this._onSetPage
                             }}
                             styleConfig={style}
                         />

nextjs/components/templates/LayoutBack.js

@@ -1,9 +1,17 @@
+import React, { Component, useEffect } from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Router from 'next/router';
 import RootContainer from '../atoms/RootContainer'
 import ButtonBase from "@material-ui/core/ButtonBase";
 import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import Typography from '@material-ui/core/Typography';
+import { Button, Hidden } from '@material-ui/core';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
 
 const styles = theme => ({
   inner: {
@@ -54,13 +62,70 @@ const styles = theme => ({
     position: 'absolute',
     left: theme.spacing(1),
   },
+  retour:{
+    fontFamily: 'Roboto',
+    color: '#1E2327',
+    fontSize: '0.8rem',
+    fontWeight: '500',
+
+  },
+  popup:{
+    fontFamily: 'Roboto',
+    color: '#1E2327',
+    fontSize: '0.8rem',
+    fontWeight: '500',
+  }
 });
 
-function LayoutBack(props) {
+class LayoutBack extends Component {
+  constructor(props) {
+    super(props);
+    
+  }
 
-  const { classes, height} = props;
+  state = {
+    open: false,
+
+  };
+  openDialog() {
+      this.setState({ open: true });
+  }
+
+  closeDialog() {
+      this.setState({ open: false });
+  }
+
+  refreshDialog() {
+      this.setState({ open: false });
+      window.location.reload();
+  }
+
+
+  
+  // Add a listener to prevent browser page refresh
+  componentWillMount() {
+    if (typeof window !== "undefined") {
+      window.onbeforeunload = (e) => { 
+        console.log('Stop this');
+        // this.openDialog();
+        e.preventDefault()
+        e.returnValue = '';
+      };
+    }
+  }
+
+  // Clear listener
+  componentWillUnmount() {
+    window.onbeforeunload = null
+  }
+  
+
+
+  render() {
+  const { classes, height} = this.props;
   
   //height fixed = height 100vh
+  var openStudio = this.props.openStudio ? 1 : 0;
   const content = (height == 'fixed') ? classes.content+' '+classes.contentFixed : classes.content
   return (
     <RootContainer align='center'>
@@ -70,24 +135,50 @@ function LayoutBack(props) {
             focusRipple
             className={classes.back}
             focusVisibleClassName={classes.focusVisible}
-            onClick={() => Router.back()}>
+            
+            >
             <ArrowLeft color="primary" classes={{ root: classes.icon }}></ArrowLeft>
+            {/* <Hidden mdUp className={classes.retour}></Hidden> */}
+            <Hidden smDown className={classes.retour}>
+              <div onClick={this.props.step==1 || openStudio==1 ? this.openDialog.bind(this) : () => Router.back()}>Retour</div>
+              
+            </Hidden>
+
+                    <Dialog open={this.state.open}>
+                        <DialogTitle className={classes.popup}>  Souhaitez-vous poursuivre votre candidature ?</DialogTitle>
+                        <DialogContent className={classes.popup}> Si vous cliquez sur le bouton Supprimer, tous les éléments associés à votre candidature (vidéo, CV…) seront définitivement supprimés. </DialogContent>
+                        <DialogActions className={classes.popup}>
+                        
+                        
+                        <Button onClick={this.refreshDialog.bind(this)} >
+                          Supprimer
+                        </Button>
+                        <Button onClick={this.closeDialog.bind(this)} autoFocus>
+                            Poursuivre
+                        </Button>
+                        </DialogActions>
+                    </Dialog>
           </ButtonBase>
           <Typography
             component="h1"
             align="center"
             className={classes.title}
           >
-            {props.text}
+            {this.props.text}
           </Typography>
         </div>
       </div>
       <div id="C" className={content}>
-        {props.children}
+        {this.props.children}
       </div>
 
     </RootContainer>
   )
+  }
+}
+LayoutBack.defaultProps = {
+  step: 0,
+  openStudio:false
 }
 
 export default withStyles(styles)(LayoutBack)

nextjs/components/templates/LayoutBackUrl.js

@@ -0,0 +1,105 @@
+import { withStyles } from '@material-ui/core/styles'
+import Router from 'next/router';
+import RootContainer from '../atoms/RootContainer'
+import ButtonBase from "@material-ui/core/ButtonBase";
+import Close from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+
+const styles = theme => ({
+  inner: {
+    height: '100%',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.04), 0 1px 10px 0 rgba(0, 0, 0, 0.04), 0 3px 5px -1px rgba(0, 0, 0, 0.04)',
+    backgroundColor: '#1E2327',
+    right:'30px'
+  },
+  head: {
+    zIndex: '999',
+    width: '100%',
+    height: '100px',
+    backgroundColor: '#1E2327',
+    position: 'fixed',
+    [theme.breakpoints.up('sm')]: {
+      height: '100px'
+    }
+  },
+  icon: {
+    fontSize: '3em',
+    textAlign :'right',
+    top:'30px',
+    right:'30px',
+    color:'#fff',
+    margin:'20px'
+  },
+  title: { 
+    color: theme.palette.primary.dark,
+  },
+  content: {
+    top: '100px',
+    width: '100%',
+    minHeight: '1000px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    position: 'relative',
+    backgroundColor: '#1E2327',
+  },
+  contentFixed: {
+     height: 'calc(100vh - 100px)',
+    backgroundColor: '#1E2327',
+  },
+  back: {
+    zIndex: 10,
+    border: 'none',
+    padding: theme.spacing(0.2),
+    textAlign: 'center',
+    textDecoration: 'none',
+    borderRadius: '50%',
+    position: 'absolute',
+    right: theme.spacing(1),
+    backgroundColor: '#34383C'
+  },
+  player: {
+    background:'#1E2327'
+  },
+});
+
+function LayoutBack(props) {
+
+  const { classes, height} = props;
+  
+  //height fixed = height 100vh
+  const content = (height == 'fixed') ? classes.content+' '+classes.contentFixed : classes.content
+  return (
+    <RootContainer align='center' className={content}>
+      <div id="H" className={classes.head}>
+        <div className={classes.inner}>
+          <ButtonBase name='back'
+            focusRipple
+            className={classes.back}
+            focusVisibleClassName={classes.focusVisible}
+            onClick={() => Router.push(props.url)}>
+            <Close color="#fff" classes={{ root: classes.icon }}></Close>
+          </ButtonBase>
+          <Typography
+            component="h1"
+            align="center"
+            className={classes.title}
+          >
+            {props.text}
+          </Typography>
+        </div>
+      </div>
+      <div id="C" className={content}>
+        {props.children}
+      </div>
+
+    </RootContainer>
+  )
+}
+
+export default withStyles(styles)(LayoutBack)

nextjs/components/templates/LayoutCompany.js

@@ -6,10 +6,12 @@ import RootContainer from '../atoms/RootContainer'
 import ButtonBase from "@material-ui/core/ButtonBase";
 import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import HideOnScroll from '../atoms/CollapsibleBack';
+import SocialShare from '../organisms/SocialShare'
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
-import Header from '../organisms/Header'
+import HeaderEntreprise from '../organisms/HeaderPersonnalise'
 import {AppBar,CssBaseline,Container,Toolbar,IconButton,Typography} from "@material-ui/core";
 import Hidden from '@material-ui/core/Hidden';
+import Link from 'next/link'
 
 const styles = theme => ({
   RootContainer: {
@@ -65,59 +67,70 @@ const styles = theme => ({
   },
   button: {
     textTransform: 'inherit',
-    marginLeft: theme.spacing(8),
-    marginRight: theme.spacing(8),
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     padding: theme.spacing(1.2, 2),
     color: theme.palette.secondary.main,
     backgroundColor: theme.palette.primary.important,
+    textDecoration:'none',
+  },
+  voirOffre: {
+    textTransform: 'inherit',
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    padding: theme.spacing(1.2, 2),
+    color: '#BBBCBD',
+    backgroundColor: '#F3F3F4',
+  },
+  lien:{
+    textDecoration:'none',
+    color:'#fff'
   },
 })
 
 function LayoutCompany(props) {
 
-  const { classes, companyId } = props;
-
+  const { classes, companyId, companyLibelle } = props;
+  const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Entreprise/${companyId}-${_.kebabCase(companyLibelle)}`;
   return (
-    <React.Fragment>
-      {isWidthUp('sm', props.width) ?
-        (<Header />)
-        :
-        (<HideOnScroll threshold={50}>
-          <AppBar className={classes.appBar}>
-            <Toolbar>
-              <ButtonBase name='back'
-                focusRipple
-                className={classes.back}
-                focusVisibleClassName={classes.focusVisible}
-                onClick={() => Router.back()}>
-                <ArrowLeft classes={{ root: classes.icon }}></ArrowLeft>
-              </ButtonBase>
-            </Toolbar>
-          </AppBar>
-        </HideOnScroll>)
-      }
-
-      <Container classes={{ root: classes.RootContainer }}>
+    
         <RootContainer>
+        <HeaderEntreprise  retour="Entreprises" menu="Entreprises"/>
           <div id="C" className={classes.content}>
             {props.children}
           </div>
           
           <Hidden mdUp>
           <div id="F" className={classes.foot}>
+          <Button
+              variant="contained"
+              className={classes.button + ' cypButtonApply'}
+              classes={{ root: classes.rootButton}}
+              
+            >
+              <a href={`/Reponse?companyId=${companyId}`} className={classes.lien }>Postuler</a>
+            </Button>
+            <SocialShare url={socialShareUrl} />
+          {/* <Link href="#discover"  >
             <Button
+                variant="contained"
+                className={classes.voirOffre + ' cypButtonApply'}
+            >Voir les offres</Button>
+                                            
+          </Link> */}
+            {/* <a
+              href={`/Reponse?companyId=${companyId}`}
               variant="contained"
               className={classes.button}
               classes={{ root: classes.rootButton }}
-              onClick={() => Router.push(`/Reponse?companyId=${companyId}`)}
+              // onClick={() => Router.push(`/Reponse?companyId=${companyId}`)}
             >
-              Candidature spontanée</Button>
+              Candidature spontanée</a> */}
           </div>
           </Hidden>
 
         </RootContainer>
-      </Container>
-    </React.Fragment>
+      
 
   )
 }

nextjs/components/templates/LayoutOffre.js

@@ -5,10 +5,14 @@ import Router from 'next/router';
 import RootContainer from '../atoms/RootContainer'
 import ButtonBase from "@material-ui/core/ButtonBase";
 import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
-import Header from '../organisms/Header'
+import HeaderPersonnalise from '../organisms/HeaderPersonnalise'
+import SocialShare from '../organisms/SocialShare'
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
 import Hidden from '@material-ui/core/Hidden';
-
+import Link from 'next/link'
+import getConfig from 'next/config'
+import _ from "lodash/string";
+const { publicRuntimeConfig } = getConfig()
 const styles = theme => ({
   foot: {
     display: 'flex',
@@ -21,6 +25,10 @@ const styles = theme => ({
     backgroundColor: theme.palette.secondary.main,
     boxShadow: '0px 0px 10px rgba(30, 35, 39, 0.10)',
   },
+  lien:{
+    textDecoration:'none',
+    color:'#fff'
+  },
   contentDefault: {
     height: 'auto',
     position: 'relative',
@@ -56,32 +64,37 @@ const styles = theme => ({
   },
   button: {
     textTransform: 'inherit',
-    marginLeft: theme.spacing(8),
-    marginRight: theme.spacing(8),
+    marginLeft: theme.spacing(4.5),
+    marginRight: theme.spacing(4.5),
     padding: theme.spacing(1.2, 2),
     color: theme.palette.secondary.main,
     backgroundColor: theme.palette.primary.important,
   },
+  voirEntreprise: {
+    textTransform: 'inherit',
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    padding: theme.spacing(1.2, 2),
+    color: '#BBBCBD',
+    backgroundColor: '#F3F3F4',
+
+  },
+  pourvuButton:{
+        padding :'10px',
+        textTransform: 'inherit',
+  },
 })
 
 function LayoutOffre(props) {
 
-  const { classes, offreId, isProvided } = props;
+  const { classes, offreId, offre, isProvided } = props;
   const contentClass = (!isProvided) ? classes.contentDefault : classes.contentProvided
-
+  const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Offre/${offreId}-${_.kebabCase(offre.title)}`;
   return (
     <RootContainer>
-      {isWidthUp('sm', props.width) ?
-        (<Header />)
-        :
-        (<ButtonBase name='back'
-          focusRipple
-          className={classes.back}
-          focusVisibleClassName={classes.focusVisible}
-          onClick={() => Router.back()}>
-          <ArrowLeft classes={{ root: classes.icon }}></ArrowLeft>
-        </ButtonBase>)
-      }
+      
+      <HeaderPersonnalise retour="Offres" menu="Offres d'emploi"/>
+        
       <div id="C" className={contentClass}>
         {props.children}
       </div>
@@ -91,13 +104,36 @@ function LayoutOffre(props) {
           <div id="F" className={classes.foot}>
             {/* <div className={classes.inner}>
           <div className={classes.grow} /> */}
+            {/* <Link href={`/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`} >
+              <Button
+                  variant="contained"
+                  className={classes.voirEntreprise + ' cypButtonApply'}
+              >Voir l'entreprise</Button>              
+             </Link> */}
+            
             <Button
               variant="contained"
               className={classes.button + ' cypButtonApply'}
               classes={{ root: classes.rootButton}}
-              onClick={() => Router.push(`/Reponse?adId=${offreId}`)}
+              
             >
-              Postuler</Button>
+              <a href={`/Reponse?adId=${offreId}`} className={classes.lien }>Postuler</a>
+            </Button>
+            <SocialShare url={socialShareUrl} />
+
+            {/* <div className={classes.grow} />
+        </div> */}
+          </div>
+        )}
+        {isProvided && (
+          <div id="F" className={classes.foot}>
+            {/* <div className={classes.inner}>
+          <div className={classes.grow} /> */}
+            
+            
+            <Button variant="contained" disabled className={classes.pourvuButton}>
+                                        Offre pourvue
+            </Button>
             {/* <div className={classes.grow} />
         </div> */}
           </div>
@@ -112,4 +148,4 @@ LayoutOffre.propTypes = {
   offre: PropTypes.object,
 };
 
-export default withStyles(styles)(withWidth()(LayoutOffre))
+export default withStyles(styles)(LayoutOffre)

nextjs/components/templates/loader.js

@@ -6,8 +6,9 @@ const styles = theme => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
+    textAlign: 'center',
     justifyContent: 'center',
-    fontFamily: 'Dosis',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     fontWeight: '500',
     fontSize: '1em',
     padding: theme.spacing(6,0),
@@ -19,7 +20,7 @@ class Loader extends React.Component {
   render() {
     const { classes } = this.props;
     return (
-      <div className={classes.loader + ' ' + 'alert alert-info'}><CircularProgress color="primary" />Chargement...</div>
+      <div className={classes.loader + ' ' + 'alert alert-info'}><CircularProgress color="primary" />Chargement... </div>
     )
 
   }

nextjs/components/templates/loaderVideo.js

@@ -0,0 +1,55 @@
+import React, { Fragment } from 'react'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import { withStyles } from '@material-ui/core/styles'
+import LinearProgress from '@material-ui/core/LinearProgress';
+const styles = theme => ({
+  loader: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    textAlign: 'center',
+    justifyContent: 'center',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    fontWeight: '500',
+    fontSize: '1em',
+    padding: theme.spacing(6,0),
+    margin:'50px 0',
+  },
+  loaderGras:{
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    paddingTop:'10px',
+    fontSize: '1.875em',
+    fontWeight: '500',
+    marginBottom:'30px',
+
+  },
+  loaderSecondaire:{
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    fontSize: '1em',
+    fontWeight: '300',
+  },
+  root: {
+    top:"200px",
+    width: '100%',
+    '& > * + *': {
+      marginTop: theme.spacing(2),
+    },
+  },
+})
+
+class LoaderVideo extends React.Component {
+  render() {
+    const { classes, textePrincipal, texteSecondaire } = this.props;
+    return (
+      <div className={classes.root}>
+        <div className={classes.loader }><CircularProgress color="primary" /><span className={classes.loaderGras }>{textePrincipal}</span><br/><span className={classes.loaderSecondaire }> {texteSecondaire}</span><br/></div>
+        <div >
+        
+        </div>
+      </div>
+      )
+
+  }
+}
+
+export default withStyles(styles)(LoaderVideo)

nextjs/data/api.js

@@ -12,6 +12,7 @@ axios.interceptors.response.use(response => {
 }, error => {
     if (error.response.status === 401) {
         localStorage.setItem('ttJWT', '');
+        console.log("REPONSE REDIRECT LOGIN")
         Router.push("/Login");
     }
     return error;
@@ -67,17 +68,17 @@ export default {
         },
     },
     ads: {
-        fetchAd: (id) => {
-            return axios.get(`api/ads/${id}`).then(res => res.data)
+        fetchJob: (id) => {
+            return axios.get(`api/jobs/${id}`).then(res => res.data)
         },
 
         //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 = false, isEmphasis = false }) => {
+        fetchJobs: ({ limit = null, order = "", keyword = "", offset = 1, status = 'PUBLISHED', isPromoted = false, isEmphasis = false }) => {
             isPromoted = isPromoted !== null ? isPromoted * 1 : isPromoted;
             isEmphasis = isEmphasis !== null ? isEmphasis * 1 : isEmphasis;
 
-            return axios.get('api/ads', { params: { offset, limit, order, keyword, status, isPromoted, isEmphasis } })
+            return axios.get('api/jobs', { params: { offset, limit, order, keyword, status, isPromoted, isEmphasis } })
                 .then(res => res.data)
         }
 
@@ -96,7 +97,7 @@ export default {
         postAnswer: (payload) => {
             return axios.post("/api/answers", { adId: payload.adId, mediaId: payload.mediaId, companyId: payload.companyId }).then(res => res)
         },
-        fetchAdsAnswered: ({ limit = null, order = "", keyword = "", offset = 1 }) => {
+        fetchJobsAnswered: ({ limit = null, order = "", keyword = "", offset = 1 }) => {
             return axios.get(`api/answers`, { params: { offset, limit, order, keyword } }).then(res => res.data)
         },
         fetchAnswer: (payload) => {
@@ -128,6 +129,9 @@ export default {
                 withCredentials: true
             }).then(res => res)
         },
+        
+    },
+    cv:{
         uploadMediaCv: (payload) => {
             return axios.post("/api/mediaCv", payload, {
                 headers: {
@@ -141,12 +145,32 @@ export default {
         countAdView: id => {
             if (!!localStorage.ttJWT)
                 setAuthorizationHeader(localStorage.ttJWT)
-            axios.get(`api/adAjaxRecStat/${id}`)
+                let continuerAds = true;
+            
+                if (sessionStorage.getItem("ads"+id)){
+                    continuerAds=false;
+                }
+             
+                if( continuerAds){
+                    axios.get(`api/adAjaxRecStat/${id}`)
+                    sessionStorage.setItem('ads'+id, id);
+                }
         },
         countCompanyView: id => {
-            if (!!localStorage.ttJWT)
-                setAuthorizationHeader(localStorage.ttJWT)
-            axios.get(`api/companyAjaxRecStat/${id}`)
+            if (!!localStorage.ttJWT){
+                setAuthorizationHeader(localStorage.ttJWT);
+            }
+
+            let continuer = true;
+            
+            if (sessionStorage.getItem("companies"+id)){
+                continuer=false;
+            }
+         
+            if( continuer){
+                axios.get(`api/companyAjaxRecStat/${id}`);
+                sessionStorage.setItem('companies'+id, id);
+            }
         }, 
     }
 

nextjs/next.config.js

@@ -40,17 +40,31 @@ module.exports = withPlugins(
     }],
     [{
       publicRuntimeConfig: {
-        symphonyUrl: 'https://www.talentstube.com',
+        // DEV
+        // symphonyUrl: 'http://localhost/',
+        // blogUrl: 'https://blog.talentstube.com',
+        // frontServerUrl: 'http://localhost:3000',
+        // cvThequeUrl: 'https://recruteur.talentstube.com',
+        // PROD
+        // symphonyUrl: 'https://recruteur.talentstube.com/',
+        // blogUrl: 'https://blog.talentstube.com',
+        // frontServerUrl: 'https://www.talentstube.com/',
+        // cvThequeUrl: 'https://recruteur.talentstube.com',
+        // PRE PROD
+        symphonyUrl: 'https://pp.talentstube.com/',
         blogUrl: 'https://blog.talentstube.com',
-        frontServerUrl: 'https://app.talentstube.com',
-        adListDefaultUrl: '/statique/images/default/default_picture_company.svg',
+        frontServerUrl: 'https://pp.app.talentstube.com/',
+        cvThequeUrl: 'https://recruteur.talentstube.com',
+        version : 'V2.8.3',
+        adListDefaultUrl: '/statique/images/default/default_picture_company.jpg',
         cachedMediaUrl: '/media/cache/profile_thumb/uploads/img/',
         postedContentUrl: '/uploads/img/',
         postedContentCv: '/uploads/cv/',
         ReCAPTCHA: {
           "siteKey": "6LdyqLwUAAAAADKI5uC7d5W9VqVgzd8VEmMU2Yi-"
         },
-        applicationServerPublicKey: 'BC9XGBLNGm0RWczR4IjEPWQ9_P1BmlvT-oaVgr_GJTI2OZtT85olmi3xzQhgZF4-Bi0rPafpa8vqt5pudQ4Na6w'
+        applicationServerPublicKey: 'BNFyiyPiLH97Dgc0m1vXluUNaCN6y3Hkgd4YcqS2lVkP8my3tq2D5gM5g7cY6R4VxC7GljSzkLRu+k+oO+2TtjU='
+        //applicationServerPublicKey: 'BG2lV673DvB67dzEwX9GKfds3sXaEdtZo2oWO1cO2xUdTJAFZ_rV_UrP1nHQz-F8LJNO9HxG0kmQRIb54JL1ZCA'
       }
     }]
   ],

nextjs/out/sitemap_local.xml

@@ -1,28 +1,513 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
   <url>
-    <loc>https://app.talentstube.com/Candidature</loc>
-    <lastmod>2019-09-17</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/Cgu</loc>
-    <lastmod>2019-09-17</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/Confidentialite</loc>
-    <lastmod>2019-11-04</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/Entreprises</loc>
-    <lastmod>2019-09-17</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/Help</loc>
-    <lastmod>2019-10-11</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/Login</loc>
-    <lastmod>2019-10-14</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/MentionsLegales</loc>
-    <lastmod>2019-11-04</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/Offres</loc>
-    <lastmod>2019-10-16</lastmod>
+    <loc>https://www.talentstube.com/Offre/142-charge-daffaires-f-h</loc>
+    <lastmod>2021-03-24</lastmod>
+    <priority>1.00</priority>
   </url>
-</urlset>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=135&amp;url=/Offre/135-commercial-b-to-c-f-h&amp;videoId=502499843&amp;typeEntite=Offre&amp;nameCompany=Fym%20Action&amp;nameOffre=Commercial%20B%20to%20C%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>	
+  <url>
+    <loc>https://www.talentstube.com/Player?id=133&amp;url=/Offre/133-gestionnaire-de-copropriete-f-h&amp;videoId=500395879&amp;typeEntite=Offre&amp;nameCompany=Cabinet%20JOURDAN&amp;nameOffre=Gestionnaire%20de%20co%20propriete</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=132&amp;url=/Offre/132-comptable-f-h&amp;videoId=495504495&amp;typeEntite=Offre&amp;nameCompany=Cabinet%20JOURDAN&amp;nameOffre=Comptable%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=130&amp;url=/Offre/130-assistant-f-h&amp;videoId=495156742&amp;typeEntite=Offre&amp;nameCompany=Cabinet%20JOURDAN&amp;nameOffre=Assistant%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=131&amp;url=/Offre/131-poseur-f-h&amp;videoId=494089386&amp;typeEntite=Offre&amp;nameCompany=TPC%20Ouest&amp;nameOffre=Poseur%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=131&amp;url=/Offre/140-aide-a-domicile-f-h&amp;videoId=507891163&amp;typeEntite=Offre&amp;nameCompany=ADMR56&amp;nameOffre=Aide%20a%20domicile</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=135&amp;url=/Offre/129-commercial-b-to-b-f-h&amp;videoId=491331138&amp;typeEntite=Offre&amp;nameCompany=Fym%20Action&amp;nameOffre=Commercial%20B%20to%20b%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=122&amp;url=/Offre/122-chauffeurs-spl-f-h&amp;videoId=482599011&amp;typeEntite=Offre&amp;nameCompany=AER%20Recyclage&amp;nameOffre=Chauffeurs%20SPL%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=128&amp;url=/Offre/128-techniciens-poseurs-f-h&amp;videoId=485471109&amp;typeEntite=Offre&amp;nameCompany=Pro%20Fermetures&amp;nameOffre=Techniciens%20Poseurs%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=113&amp;url=/Offre/113-aide-a-domicile-f-h&amp;videoId=440702903&amp;typeEntite=Offre&amp;nameCompany=Onela&amp;nameOffre=Aide%20à%20domicile%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=120&amp;url=/Offre/120-technico-commercial-f-h&amp;videoId=462942715&amp;typeEntite=Offre&amp;nameCompany=Temporis&amp;nameOffre=Technico-Commercial%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=115&amp;url=/Offre/115-technicien-ramoneur-fumiste-f-h&amp;videoId=460206945&amp;typeEntite=Offre&amp;nameCompany=La%20Centrale%20des%20Ramoneurs&amp;nameOffre=Technicien%20Ramoneur%20/%20Fumiste%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=109&amp;url=/Offre/109-equipier-de-plateforme-polyvalent-f-h&amp;videoId=422692890&amp;typeEntite=Offre&amp;nameCompany=AER%20Recyclage&amp;nameOffre=Equipier%20de%20plateforme%20polyvalent%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=112&amp;url=/Offre/112-conseillers-technico-commerciaux-h-f&amp;videoId=438478115&amp;typeEntite=Offre&amp;nameCompany=Pro%20Fermetures&amp;nameOffre=Conseillers%20Technico-Commerciaux%20(H/F)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=111&amp;url=/Offre/111-couvreur-etancheur-f-h&amp;videoId=432410136&amp;typeEntite=Offre&amp;nameCompany=Blandin&amp;nameOffre=Couvreur/Étancheur%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=108&amp;url=/Offre/108-plombier-chauffagiste-f-h&amp;videoId=398509552&amp;typeEntite=Offre&amp;nameCompany=Blandin&amp;nameOffre=Plombier/Chauffagiste%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=107&amp;url=/Offre/107-operateur-soudeur-chaudronnier-f-h&amp;videoId=397982745&amp;typeEntite=Offre&amp;nameCompany=GEIQ%20Industrie%2044&amp;nameOffre=Opérateur%20Soudeur%20/%20Chaudronnier%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=101&amp;url=/Offre/101-conducteurs-routiers-f-h&amp;videoId=391023366&amp;typeEntite=Offre&amp;nameCompany=Lactalis%20Logistique%20et%20Transports&amp;nameOffre=Conducteurs%20routiers%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=103&amp;url=/Offre/103-agents-de-quai-f-h&amp;videoId=391023871&amp;typeEntite=Offre&amp;nameCompany=Lactalis%20Logistique%20et%20Transports&amp;nameOffre=Agents%20de%20quai%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=77&amp;url=/Offre/77-commercial-sedentaire-en-vente-directe-b-to-b-h-f&amp;videoId=343666512&amp;typeEntite=Offre&amp;nameCompany=Télémaque&amp;nameOffre=Commercial%20sédentaire%20en%20vente%20directe%20B%20to%20B%20(H/F)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=102&amp;url=/Offre/102-preparateurs-de-commandes-f-h&amp;videoId=391023988&amp;typeEntite=Offre&amp;nameCompany=Lactalis%20Logistique%20et%20Transports&amp;nameOffre=Préparateurs%20de%20commandes%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=46&amp;url=/Offre/46-conducteurs-routiers-h-f&amp;videoId=273464203&amp;typeEntite=Offre&amp;nameCompany=Groupe%20MOUSSET&amp;nameOffre=Conducteurs%20routiers%20(H/F)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=32518&amp;url=/Entreprise/32518-cabinet-jourdan&amp;videoId=491607083&amp;typeEntite=Entreprise&amp;nameCompany=Cabinet%20JOURDAN&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=32507&amp;url=/Entreprise/32507-tpc-ouest&amp;videoId=489836459&amp;typeEntite=Entreprise&amp;nameCompany=TPC%20Ouest&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=32355&amp;url=/Entreprise/32355-hyphae&amp;videoId=478847996&amp;typeEntite=Entreprise&amp;nameCompany=HYPHAE&amp;nameOffre=</loc>
+    <lastmod>2021-02-04</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=21247&amp;url=/Entreprise/21247-lactalis-logistique-et-transports&amp;videoId=391023777&amp;typeEntite=Entreprise&amp;nameCompany=Lactalis%20Logistique%20et%20Transports&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=19800&amp;url=/Entreprise/19800-silvadec&amp;videoId=386500340&amp;typeEntite=Entreprise&amp;nameCompany=Silvadec&amp;nameOffre=</loc>
+    <lastmod>2021-02-04</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=19205&amp;url=/Entreprise/19205-intermarche-logistique-alimentaire-international&amp;videoId=385268706&amp;typeEntite=Entreprise&amp;nameCompany=Intermarché%20Logistique%20Alimentaire%20International&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=12480&amp;url=/Entreprise/12480-fym-action&amp;videoId=345898361&amp;typeEntite=Entreprise&amp;nameCompany=Fym%20Action&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url><url>
+    <loc>https://www.talentstube.com/Offre/140-aide-a-domicile-f-h</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/133-gestionnaire-de-copropriete-f-h</loc>
+    <lastmod>2021-01-29</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprises</loc>
+    <lastmod>2021-01-18</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com</loc>
+    <lastmod>2021-03-09</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offres</loc>
+    <lastmod>2021-01-18</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/134-assistant-administratif-et-commercial-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/135-commercial-b-to-c-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/130-assistant-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/131-poseur-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/132-comptable-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/129-commerciaux-b-to-b-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/128-techniciens-poseurs-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/122-chauffeurs-spl-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/115-technicien-ramoneur-fumiste-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/109-equipier-de-plateforme-polyvalent-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/111-couvreur-etancheur-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/107-operateur-soudeur-chaudronnier-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/103-agents-de-quai-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/102-preparateurs-de-commandes-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/46-conducteurs-routiers-h-f</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/32507-tpc-ouest</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/32355-hyphae</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/28481-onela</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/28172-pro-fermetures</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/26064-aer-recyclage</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/21247-lactalis-logistique-et-transports</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/19800-silvadec</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/19205-intermarche-logistique-alimentaire-international</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/18143-l-n-u-f-lisieux</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/17467-l-n-u-f-vallet</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16785-nachos</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16639-fast-point</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16247-sasp</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16015-la-veggisserie</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16007-bforpu-b</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/15797-sinay</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/15559-monibrand</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/13464-jpa</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/12531-grand-ouest-etiquettes</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/12480-fym-action</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/11592-youston</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/11413-les-vergers-de-chateaubourg</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/11345-telemaque</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/9138-vital-concept</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/8639-mma-questembert</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/7593-opticultures</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/7174-atlantem</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/7004-la-table-de-la-desirade</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/6898-le-ptit-club</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/6555-mazars</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/6363-square-habitat</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/5250-linpac-packaging-pontivy-groupe-klockner-pentaplast</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4211-progressis-ge</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4097-a-2-com</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4088-venetis</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4059-eiffage-construction-grand-ouest</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/3381-mairie-saint-hilaire-de-riez</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/2958-skiold-acemo</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/2527-groupe-mousset</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/2341-temporis</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1899-faurecia</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1691-groupe-syselec</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1467-groupe-rocher-operations</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1297-albea</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/438-bouyer-leroux</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/266-mgdis</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/157-medaviz</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/95-multiplast</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/52-talents-tube</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/46-actual</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/18-coriolis-composites</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/17-thibault-bergeron</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+</urlset>

nextjs/package.json

@@ -11,6 +11,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@ostai/next-css": "^1.0.2",
+    "autosuggest-highlight": "^3.1.1",
     "axios": "^0.18.0",
     "connect-mongo": "^2.0.1",
     "cross-env": "^5.2.0",
@@ -26,6 +27,7 @@
     "jss": "latest",
     "lodash": "^4.17.11",
     "mongodb": "^3.1.6",
+    "mui-places-autocomplete": "^2.0.0",
     "nedb": "^1.8.0",
     "next": "^9.1.1",
     "next-auth": "^1.11.0",
@@ -34,7 +36,7 @@
     "next-optimized-images": "^1.4.1",
     "next-redux-saga": "^4.0.2",
     "next-redux-wrapper": "^3.0.0-alpha.2",
-    "next-seo": "^4.7.3",
+    "next-seo": "^4.18.0",
     "next-transpile-modules": "^2.3.1",
     "node-mailjet": "^3.3.1",
     "nodemailer": "^4.6.8",
@@ -47,13 +49,21 @@
     "prop-types": "latest",
     "react": "^16.9.0",
     "react-ad-block-detect": "^1.0.1",
+    "react-autosuggest": "^10.0.2",
     "react-dom": "^16.9.0",
+    "react-facebook-login": "^4.1.1",
     "react-ga": "^2.5.7",
     "react-google-recaptcha": "^2.0.1",
     "react-html-parser": "^2.0.2",
     "react-jss": "latest",
     "react-moment": "^0.9.7",
+    "react-places-autocomplete": "^7.3.0",
     "react-redux": "^7.0.3",
+    "react-redux-loading-bar": "^5.0.0",
+    "react-router-dom": "^5.2.0",
+    "react-select": "^3.1.1",
+    "react-slick": "^0.28.1",
+    "react-sticky-box": "^0.9.3",
     "react-swipeable-views": "^0.13.3",
     "reactstrap": "^6.4.0",
     "recordrtc": "^5.5.4",
@@ -67,6 +77,7 @@
     "terser": "3.14",
     "universal-cookie": "^3.0.4",
     "validator": "^11.0.0",
+    "video-react": "^0.14.1",
     "videojs-record": "^3.8.0",
     "webrtc-adapter": "^7.2.3"
   },

nextjs/pages/Candidature.js

@@ -147,6 +147,7 @@ class Candidature extends React.Component {
             <LayoutCandidature>
                 <Head>
                     <title key="title">Candidature</title>
+                    <meta name="robots" content="noindex, nofollow"></meta>
                 </Head>
                 <Fragment>
                     <div className={classes.container}>
@@ -187,7 +188,7 @@ class Candidature extends React.Component {
                                                         {this.props.user.firstname + " " + this.props.user.lastname}
                                                     </Typography>
                                                     <Typography gutterBottom className={classes.userTextDate}>
-                                                        Envoyée le  {(new Date(this.props.answer.c_time)).toLocaleDateString("fr-FR")}
+                                                        Envoyé le  {(new Date(this.props.answer.c_time)).toLocaleDateString("fr-FR")}
                                                     </Typography>
                                                 </div>
                                             </section>

nextjs/pages/CandidatureValidation.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Layout from "../components/templates/Layout";
+import AccountProfileCandidature from "../components/organisms/AccountProfileCandidature";
+import Head from 'next/head'
+// import AdBlockDetect from 'react-ad-block-detect';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+  },
+  button: {
+    marginRight: theme.spacing(1),
+  },
+  completed: {
+    display: 'inline-block',
+  },
+  instructions: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+}));
+
+
+
+export default function HorizontalNonLinearStepper() {
+  const classes = useStyles();
+
+  return (
+    <Layout>
+      <Head>
+          <title key="title">Profil – Talents Tube</title>
+          <meta key="robots" name="robots" content="noindex, nofollow"></meta>
+      </Head>
+        <div >
+          <AccountProfileCandidature />
+        </div>
+        
+        {/* <AdBlockDetect>
+                <p>AdBlocks a été détecté. Pour que Talents Tube puisse fonctionner correctement, veuillez désactiver Ad Blocks</p>
+        </AdBlockDetect> */}
+    </Layout>
+  );
+}

nextjs/pages/Candidatures.js

@@ -8,9 +8,10 @@ import { Typography } from '@material-ui/core';
 import LayoutGrid from "../components/templates/LayoutGrid";
 import Grid from "../components/templates/Grid"
 import AnswerRow from "../components/organisms/AnswerRow"
-import { fetchAdsAnsweredRequest } from '../actions/answer'
+import { fetchJobsAnsweredRequest } from '../actions/answer'
 import { AnswersSelector } from '../reducers/answers'
 import Head from 'next/head'
+import Link from 'next/link';
 
 const styles = theme => ({
     root: {
@@ -24,8 +25,15 @@ const styles = theme => ({
         flexDirection: 'column',
         padding: theme.spacing(0,3),
     },
+    profil: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing(3,3),
+        textAlign: 'center',
+        backgroundColor: theme.palette.primary.main,
+    },
     title: {
-      fontFamily: 'Dosis',
+      fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
       fontSize: '1.5em',
       fontWeight: '600',
       textAlign: 'center',
@@ -45,16 +53,18 @@ class Candidatures extends React.Component {
             <LayoutGrid backLink="/">
             <Head>
                 <title key="title">Candidatures</title>
+                <meta name="robots" content="noindex, nofollow"></meta>
             </Head>
 
                 {/* TODO */}
                 <Typography component="h1" align="center" className={classes.title} gutterBottom>
                     Mes candidatures
                 </Typography>
+
                 <div className={classes.container}>
 
                     <Grid CustomRowComponent={AnswerRow}
-                        dataFetcher={this.props.fetchAdsAnsweredRequest}
+                        dataFetcher={this.props.fetchJobsAnsweredRequest}
                         data={this.props.answers}
                         currentPage={this.props.currentPage}
                         recordCount={this.props.recordCount}
@@ -63,6 +73,16 @@ class Candidatures extends React.Component {
                         searchable={false}
                     />
                 </div>
+
+
+                
+
+
+
+
+
+
+
             </LayoutGrid>
         );
     }
@@ -83,4 +103,4 @@ function mapStateToProps(state) {
     };
 }
 
-export default withStyles(styles)(connect(mapStateToProps, {fetchAdsAnsweredRequest })(Candidatures))
+export default withStyles(styles)(connect(mapStateToProps, {fetchJobsAnsweredRequest })(Candidatures))

nextjs/pages/Cgu.js

@@ -22,7 +22,7 @@ const styles = theme => ({
         bottom: 0,
     },
     title: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1.5em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),

nextjs/pages/Confidentialite.js

@@ -22,7 +22,7 @@ const styles = theme => ({
         bottom: 0,
     },
     title: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1.5em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),
@@ -57,7 +57,7 @@ class Confidentialite extends Component {
                 </Head>
                 <div className={classes.container}>
                     <Typography className={classes.text} gutterBottom align="left">
-                        Nous vous invitons à lire avec attention le présent document. Pour toute question concernant ce document et, d’une manière générale, sur la collecte et le traitement de vos informations personnelles par la société talentstube.com, n’hésitez pas à nous contacter via le formulaire présent sur la page contact : <a href="https://blog.talentstube.com/contact.html" className={classes.link} target="_blank">https://blog.talentstube.com/contact.html</a>
+                        Nous vous invitons à lire avec attention le présent document. Pour toute question concernant ce document et, d’une manière générale, sur la collecte et le traitement de vos informations personnelles par la société talentstube.com, n’hésitez pas à nous contacter via le formulaire présent sur la page contact : <a href="https://blog.talentstube.com/contact" className={classes.link} target="_blank">https://blog.talentstube.com/contact</a>
                     </Typography>
 
                     <Typography className={classes.title} component="h2" gutterBottom align="left">
@@ -155,7 +155,7 @@ class Confidentialite extends Component {
                             `
                             Vous disposez d'un droit d'accès, de rectification, de suppression, d’opposition et de portabilité des données. Nous disposons d’un délai de 30 jours à compter de votre demande pour apporter une réponse.
                             Vous pouvez demander une limitation du traitement des données collectées. L’exercice de ces droits peut exercer ce droit auprès de TALENTS TUBE en adressant une requête soit par voie postale à l'adresse suivante : 3 Rue Louis de Broglie, Village By CA 56000 Vannes, soit par courrier électronique via le formulaire présent sur la page Contact `
-                        }<a  href="https://blog.talentstube.com/contact.html" className={classes.link} target="_blank">https://blog.talentstube.com/contact.html</a>{`. Cette requête devra être accompagnée d'une pièce d'identité revêtant la signature de l'Utilisateur et devra préciser l'adresse et le moyen par lesquelles une réponse pourra être envoyée..
+                        }<a  href="https://blog.talentstube.com/contact" className={classes.link} target="_blank">https://blog.talentstube.com/contact</a>{`. Cette requête devra être accompagnée d'une pièce d'identité revêtant la signature de l'Utilisateur et devra préciser l'adresse et le moyen par lesquelles une réponse pourra être envoyée..
                             `
                         }
                     </Typography>

nextjs/pages/ConfirmAccount.js

@@ -25,8 +25,8 @@ const styles = theme => ({
         bottom: 0,
     },
     title: {
-        fontFamily: 'Dosis',
-        fontSize: '1.5em',
+        fontFamily: 'Roboto',
+        fontSize: '1.625em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),
     },
@@ -47,6 +47,24 @@ const styles = theme => ({
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.important,
     },
+    iconButton:{
+        marginTop: "50px",
+
+        [theme.breakpoints.down('md')]: {
+            marginTop: "50px",
+            
+        },
+    },
+    texteEtape:{
+        fontSize: '1em',
+        fontWeight: '300',
+    },
+    etape:{
+        fontSize: '1em',
+        fontWeight: '500',
+        color:'#1689FB',
+
+    }
 })
 
 
@@ -69,7 +87,7 @@ class ConfirmAccount extends Component {
         const { classes } = this.props
         const { loading } = this.state
         return (
-            <LayoutBack text="Validation" height="fixed">
+            <LayoutBack text="Inscription" height="fixed">
             <Head>
                 <title key="title">Confirmation de compte</title>
                 <meta key="robots" name="robots" content="noindex, nofollow"></meta>
@@ -80,16 +98,45 @@ class ConfirmAccount extends Component {
                     )}
                     {!loading && (
                         <Fragment>
+                            <img
+                            alt="talents-tube"
+                            src='/statique/images/inscription/validation-plateforme-recrutement-video.svg'
+                            className={classes.iconButton}/>
                             <Typography gutterBottom align="center" className={classes.title}>
-                                e-mail validé
+                                Bienvenue sur Talents Tube
                             </Typography>
-                            <Typography gutterBottom align="left" className={classes.text}>
-                                Votre email a bien été validé.
+                            <Typography gutterBottom align="center" className={classes.etape}>
+                                Étape 1. 
                             </Typography>
-                            <Typography gutterBottom align="left" className={classes.text}>
-                                Vous pouvez maintenant vous connecter.
+                            <Typography gutterBottom align="center" className={classes.texteEtape}>
+                                Découvrez les entreprises et les offres d’emploi en vidéo. 
                             </Typography>
-                            <section className={classes.bottomContainer}>
+                            <Typography gutterBottom align="center" className={classes.etape}>
+                                Étape 2. 
+                            </Typography>
+                            <Typography gutterBottom align="center" className={classes.texteEtape}>
+                                Postulez en vidéo. 
+                            </Typography>
+                            <Typography gutterBottom align="center" className={classes.etape}>
+                                Étape 3. 
+                            </Typography>
+                            <Typography gutterBottom align="center" className={classes.texteEtape}>
+                            Gérez vos candidatures depuis votre compte Talent. 
+                            </Typography>
+                            
+                            <Typography gutterBottom align="center" className={classes.text}>
+                                
+                                <Button
+                                    variant="contained"
+                                    className={classes.button}
+                                    classes={{ root: classes.rootButton }}
+                                    onClick={() => Router.push('/Login')}
+                                >
+                                    Se connecter
+                                </Button>
+
+                            </Typography>
+                            {/* <section className={classes.bottomContainer}>
                                 <Button
                                     variant="contained"
                                     className={classes.button}
@@ -98,7 +145,7 @@ class ConfirmAccount extends Component {
                                 >
                                     Connexion
                             </Button>
-                            </section>
+                            </section> */}
                         </Fragment>
                     )}
                 </div>
@@ -118,6 +165,7 @@ function mapStateToProps(state, ownProps) {
 
 ConfirmAccount.getInitialProps = function (context) {
     const { token, email } = context.query
+    //localStorage.setItem('loginRedirect', url)
     context.store.dispatch(requestConfirmationAccountRequest({ 'confirmationToken': token, 'email': email }))
     return email;
 }

nextjs/pages/Conseils.js

@@ -31,7 +31,7 @@ class Conseils extends React.Component {
           <title>Quelques conseils !</title>
           <meta name="description" content="Quelques conseils !" />
           <meta key="robots" name="robots" content="noindex, nofollow"></meta>
-          <link rel="canonical" href="https://app.talentstube.com" />
+          
         </Head>
         <section className={classes.container}>
           <VideoVimeo videoId='356411947' autoplay='1' />

nextjs/pages/Entreprises.js

@@ -11,9 +11,8 @@ import CompanyRow from "../components/organisms/CompanyRow"
 import { fetchCompaniesRequest } from '../actions/companies'
 import { CompaniesSelector } from '../reducers/companies'
 import { connect } from "react-redux";
-import Head from 'next/head'
 import OgHead from '../components/atoms/OgHead';
-
+import { SocialProfileJsonLd } from 'next-seo';
 const styles = theme => ({
   root: {
     position: 'relative',
@@ -45,7 +44,7 @@ const styles = theme => ({
     },
   },
   title: {
-    fontFamily: 'Dosis',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     fontSize: '1.5em',
     fontWeight: '600',
     textAlign: 'center',
@@ -63,13 +62,16 @@ const styles = theme => ({
 });
 
 class Entreprises extends React.Component {
-
+  componentDidMount() {    
+    localStorage.setItem('loginRedirect', window.location.pathname)
+    console.log("Redirect"+window.location.pathname)
+  }
   render() {
     const { classes } = this.props;
     const { publicRuntimeConfig } = getConfig();
     const socialShareUrl = typeof window !== 'undefined' ? window.location
             : publicRuntimeConfig.frontServerUrl + `/Entreprises`;
-    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
+    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "img/default_picture_svg"
     const imgUrl = DefaultUrl ;
     return (
       <LayoutGrid backLink="/">
@@ -94,13 +96,24 @@ class Entreprises extends React.Component {
                 content=""/>
          
         </Head> */}
-         <OgHead seo_title="Entreprises qui recrutent – Talents Tube"
-                    seo_description="Les entreprises en vidéo."
+         <OgHead seo_title="Vidéos marque employeur d'entreprises qui recrutent | Talents Tube"
+                    seo_description="Vidéos marque employeur d'entreprises qui recrutent, découvrez leurs offres d'emploi en vidéo. Postulez simplement en vidéo à l'offre de votre choix."
                     seo_url={socialShareUrl}
                     image={imgUrl}
                     seo_key="Recrutement, video"
                     
-                ></OgHead>
+          ></OgHead>
+          <SocialProfileJsonLd
+          type="Talents Tube"
+          name="Talents Tube"
+          url="https://www.talentstube.com"
+          sameAs={[
+              'https://www.facebook.com/TalentsTuber',
+              'https://www.instagram.com/talents.tube/',
+              'https://www.linkedin.com/company/talentstube/',
+              'https://twitter.com/TalentsTuber',
+          ]}
+          />
         <Typography gutterBottom component="h1"
           className={classes.title}>
           Les entreprises en <span className={classes.primary}>vidéo</span>
@@ -112,6 +125,7 @@ class Entreprises extends React.Component {
             currentPage={this.props.currentPage}
             recordCount={this.props.recordCount}
             loading={this.props.loading}
+            type="entreprises"
             limit={12}
             placeholder={"Rechercher une entreprise"}
           />

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: {
@@ -25,7 +25,7 @@ const styles = theme => ({
     },
   },
   title: {
-    fontFamily: 'Dosis',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     fontSize: '1.5em',
     fontWeight: '600',
     padding: theme.spacing(3, 0),
@@ -102,6 +102,7 @@ function Help(props) {
     <Layout>
     <Head>
       <title key="title">Recrutement vidéo : fonctionnement – Talents Tube</title>
+      <meta key="robots" name="robots" content="noindex, nofollow"></meta>
     </Head>
       <section className={classes.root}>
         <Typography gutterBottom component="h1"
@@ -128,7 +129,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/cv-video" target="_blank" >lien</a>
+        </Typography>
        
         
       </section>

nextjs/pages/Inscription.js

@@ -0,0 +1,259 @@
+import React, { Fragment } from 'react';
+import PropTypes from "prop-types";
+import Layout from '../components/templates/Layout';
+import { TextField, Button, Typography } from '@material-ui/core';
+import SwipeableViews from 'react-swipeable-views';
+import AppBar from '@material-ui/core/AppBar';
+import Link from '@material-ui/core/Link';
+import { withStyles } from '@material-ui/core/styles';
+import Loader from '../components/templates/loader'
+import { connect } from "react-redux";
+import Validator from "validator";
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Router from 'next/router'
+import Register from '../components/organisms/Register';
+// import { requestLogin, requestOauthLogin, requestLoginFailure } from "../actions/auth";
+import { makeStyles } from '@material-ui/core/styles';
+import { amber, green } from '@material-ui/core/colors';
+import _ from "lodash"
+import Snack from '../components/atoms/snack'
+import SocialButtonsAuth from '../components/atoms/SocialButtonsAuth';
+import jssPluginPropsSort from 'jss-plugin-props-sort';
+import Head from 'next/head'
+import ReCAPTCHA from "react-google-recaptcha";
+import getConfig from 'next/config'
+const {publicRuntimeConfig} = getConfig()
+
+function TabContainer({ children, dir }) {
+    return (
+        <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
+            {children}
+        </Typography>
+    );
+}
+
+TabContainer.propTypes = {
+    children: PropTypes.node.isRequired,
+    dir: PropTypes.string.isRequired,
+};
+
+const styles = theme => ({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    AppBar: {
+        position: 'fixed',
+        top: theme.spacing(8),
+    },
+    tab: {
+        '& span.MuiTab-wrapper': {
+            fontSize: '1.1em',
+            fontWeight: '600',
+            textTransform: 'none',
+        }
+    },
+    tabContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        paddingTop: theme.spacing(4),
+        [theme.breakpoints.up('sm')]: {
+            padding: '5vw 10vw',
+        },
+        [theme.breakpoints.up('md')]: {
+            padding: '5vw 25vw',
+        },
+    },
+    textField: {
+        width: '100%'
+    },
+    form: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    formText: {
+        padding: theme.spacing(0, 2),
+        paddingTop: theme.spacing(3),
+        fontSize: '0.9em',
+        fontWeight: '300',
+    },
+    formLink: {
+        paddingLeft: theme.spacing(1),
+        fontWeight: '500',
+        cursor: 'pointer',
+    },
+    forgetPasswordText: {
+        marginTop: theme.spacing(2),
+    },
+    conditionalText: {
+        display: 'flex',
+        flexDirection: 'row',
+        color: theme.palette.primary.conditional,
+        textTransform: 'uppercase',
+
+        '&:before': {
+            content: '""',
+            flex: '1 1',
+            borderBottom: '1px solid',
+            borderColor: theme.palette.primary.conditional,
+            marginRight: '10px',
+            marginTop: 'auto',
+            marginBottom: 'auto',
+        },
+        '&:after': {
+            content: '""',
+            flex: '1 1',
+            borderBottom: '1px solid',
+            borderColor: theme.palette.primary.conditional,
+            marginLeft: '10px',
+            marginTop: 'auto',
+            marginBottom: 'auto',
+        },
+    },
+    link: {
+        color: theme.palette.primary.dark,
+        fontWeight: 400,
+        fontSize: '0.9em',
+    },
+    input50: {
+        width: '50%',
+    },
+    button: {
+        textTransform: 'inherit',
+        marginLeft: theme.spacing(8),
+        marginRight: theme.spacing(8),
+        marginTop: theme.spacing(4),
+        marginBottom: theme.spacing(2),
+        padding: theme.spacing(1.2, 2),
+        borderRadius: '3px',
+        color: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.important,
+        [theme.breakpoints.up('sm')]: {
+            margin: 'auto',
+        },
+    },
+    buttonImportant: {
+        marginTop: theme.spacing(6),
+    }
+});
+
+const recaptchaRef = React.createRef();
+class LoginPage extends React.Component {
+    state = {
+        data: {
+            email: "",
+            password: ""
+        },
+        errors: { message: "" },
+        loading: false,
+        tabIndex: 0,
+        openSnack: false,
+        success: false,
+    };
+    UNSAFE_componentWillReceiveProps(nextProps) {
+
+        this.setState({
+            errors: !!!nextProps.errors ? { errors: { message: "" } } : nextProps.errors,
+            loading: nextProps.loading,
+            success: nextProps.success,
+            openSnack: !_.isEmpty(nextProps.errors) || nextProps.success
+        })
+    }
+    static getInitialProps({ query }) {
+        const { error, inscription } = query
+        let err = null;
+        if (!!error)
+            err = { message: error };
+        return { errors: err, openSnack: !!error, inscription };
+    }
+
+    handleClose = e =>
+        this.setState({
+            openSnack: false
+        });
+
+    componentDidMount() {
+        
+    }
+
+    onChange = e =>
+        this.setState({
+            data: { ...this.state.data, [e.target.name]: e.target.value }
+        });
+
+    // onSubmit = e => {
+    //     e.preventDefault();
+    //     const errors = this.validate(this.state.data);
+    //     recaptchaRef.current.execute();
+    //     this.setState({ errors });
+    //     if (Object.keys(errors).length === 0) {
+    //         this.setState({ loading: true });
+    //         this.props.requestLogin(this.state.data)
+    //     }
+    // };
+
+    submit = data => { this.props.login(data) }
+
+    validate = data => {
+        const errors = {};
+        if (!Validator.isEmail(data.email)) errors.email = "Invalid email";
+        if (!data.password) errors.password = "Can't be blank";
+        return errors;
+    };
+
+    // linkedInAuth = () => {
+    //     this.props.requestOauthLogin();
+    //     Router.push('/auth/linkedin')
+    // }
+
+    // facebookAuth = () => {
+    //     this.props.requestOauthLogin();
+    //     Router.push('/auth/facebook')
+    // }
+
+
+    render() {
+        const { classes } = this.props;
+        const { data,success, errors, loading, openSnack } = this.state;
+
+        return (
+            <Layout>
+                <Head>
+                    <title key="title">Inscription</title>
+                    <meta key="robots" name="robots" content="noindex, follow"></meta>
+                </Head>
+                <div className={classes.container}>
+                    {/* {!!errors && (
+                        <div className="alert alert-danger">{errors && errors.message}</div>
+                    )} */}
+                    {loading && (
+                        <Loader />
+                    )}
+                    {!loading && (
+                        <Fragment> 
+                             <Register linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} erreurs={errors.message} />
+                        </Fragment> 
+                    )}
+                </div>
+                {/* <Snack name={success ? 'snackSuccess' : 'snackWarning'}
+                    variant={success ? 'success' : 'warning'}
+                    message={success ? 'Inscription validée.' : errors.message}
+                    openSnack={openSnack}
+                    onClose={this.handleClose} /> */}
+            </Layout>
+        );
+    }
+}
+
+function mapStateToProps(state, ownProps) {
+    return {
+        loading: !!state.user.loading,
+        errors: state.user.errors || ownProps.errors
+    };
+}
+
+
+
+export default withStyles(styles)(connect(mapStateToProps, {   })(LoginPage));

nextjs/pages/Login.js

@@ -12,7 +12,7 @@ import Validator from "validator";
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Router from 'next/router'
-import Register from '../components/organisms/Register';
+// import Register from '../components/organisms/Register';
 import { requestLogin, requestOauthLogin, requestLoginFailure } from "../actions/auth";
 import { makeStyles } from '@material-ui/core/styles';
 import { amber, green } from '@material-ui/core/colors';
@@ -23,6 +23,7 @@ import jssPluginPropsSort from 'jss-plugin-props-sort';
 import Head from 'next/head'
 import ReCAPTCHA from "react-google-recaptcha";
 import getConfig from 'next/config'
+import FacebookLogin from 'react-facebook-login';
 const {publicRuntimeConfig} = getConfig()
 
 function TabContainer({ children, dir }) {
@@ -82,7 +83,7 @@ const styles = theme => ({
     formLink: {
         paddingLeft: theme.spacing(1),
         fontWeight: '500',
-        cursor: 'pointer',
+        color: theme.palette.primary.dark,
     },
     forgetPasswordText: {
         marginTop: theme.spacing(2),
@@ -137,6 +138,32 @@ const styles = theme => ({
     buttonImportant: {
         marginTop: theme.spacing(6),
     },
+    titre: {
+        fontWeight: 600,
+        fontSize: "1.875em",
+        marginBottom:"20px",
+        fontFamily: "Roboto",
+    },
+    connexionRecruteur:{
+        textAlign : "center",
+        marginTop:"40px",
+        backgroundColor:"#1E2327",
+        padding:"30px 0",
+        width:"100%",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '300',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+
+    },
+    enSavoirPlus:{
+        textAlign : "center",
+        textDecoration :"none",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '600',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    },
 });
 
 const recaptchaRef = React.createRef();
@@ -149,7 +176,8 @@ class LoginPage extends React.Component {
         errors: {},
         loading: false,
         tabIndex: 0,
-        openSnack: false
+        openSnack: false,
+        redirection:""
     };
 
     static getInitialProps({ query }) {
@@ -175,8 +203,11 @@ class LoginPage extends React.Component {
     }
 
     componentDidMount() {
+        console.log("redirect login");
+        console.log(localStorage.getItem('loginRedirect'));
         this.setState({
             tabIndex: (this.props.inscription) ? 1 : 0,
+            redirection : localStorage.getItem('loginRedirect')
         })
     }
 
@@ -226,11 +257,14 @@ class LoginPage extends React.Component {
     handleClose = (event, reason) => {
         this.setState({ openSnack: false });
     }
+    responseFacebook = (response) => {
+        console.log(response);
+      }
 
     render() {
         const { classes } = this.props;
         const { data, errors, loading, openSnack } = this.state;
-
+        
         return (
             <Layout>
                 <Head>
@@ -246,7 +280,7 @@ class LoginPage extends React.Component {
                     )}
                     {!loading && (
                         <Fragment>
-                            <AppBar className={classes.AppBar} color="default">
+                            {/* <AppBar className={classes.AppBar} color="default">
                                 <Tabs
                                     value={this.state.tabIndex}
                                     onChange={this.handleChange}
@@ -256,7 +290,7 @@ class LoginPage extends React.Component {
                                     <Tab label="Connexion" className={classes.tab} />
                                     <Tab label="Inscription" className={classes.tab} />
                                 </Tabs>
-                            </AppBar>
+                            </AppBar> */}
                             <SwipeableViews
                                 axis={'x'}
                                 index={this.state.tabIndex}
@@ -265,6 +299,12 @@ class LoginPage extends React.Component {
                                 <TabContainer dir={'x'}>
                                     <div className={classes.tabContainer}>
                                         <form className={classes.form} onSubmit={this.onSubmit}>
+                                            <Typography
+                                                className={classes.titre}    
+                                                align="left"
+                                            >
+                                                   Connexion   
+                                            </Typography>
                                             <TextField
                                                 value={data.email}
                                                 id="email"
@@ -276,7 +316,7 @@ class LoginPage extends React.Component {
                                                 onChange={this.onChange}
                                                 autoComplete="username"
                                                 variant="outlined"
-                                                error={this.state.errors && !!this.state.errors.email}
+                                                error={!!!_.isEmpty(this.state.errors)  || (this.state.errors && !!this.state.errors.email)}
                                                 className={'cypInputEmail'}
                                                 required
 
@@ -294,11 +334,19 @@ class LoginPage extends React.Component {
                                                 autoComplete="current-password"
                                                 variant="outlined"
                                                 className={'cypInputPassword'}
+                                                error={!!!_.isEmpty(this.state.errors)}
+                                                helperText={!!!_.isEmpty(this.state.errors) && this.state.errors.message}
                                                 required
                                             />
                                             <Button type="submit" variant="contained" className={classes.button + ' ' + classes.buttonImportant + ' cypButtonConnexion'}>
                                                 Se connecter
-                                        </Button>
+                                            </Button>
+                                            {/* <FacebookLogin
+                                            appId="1800752833559014"
+                                            autoLoad={true}
+                                            fields="name,email,picture"
+                                            textButton ="Connexion Facebook"
+                                            callback={this.responseFacebook} /> */}
                                             <ReCAPTCHA
                                                 id="component-outlined"
                                                 ref={recaptchaRef}
@@ -312,31 +360,39 @@ class LoginPage extends React.Component {
                                             >
                                                 <Link href={"/ResetPassword"} className={classes.link}>
                                                     Mot de passe oublié ?
-                                        </Link>
+                                                    
+                                                </Link>
+                                                
                                             </Typography>
 
 
-                                            <Typography
+                                            {/* <Typography
                                                 paragraph={true}
                                                 align="center"
                                                 className={classes.conditionalText}
-                                            >Ou</Typography>
+                                            >Ou</Typography> */}
 
 
                                         </form>
-                                        <SocialButtonsAuth linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} />
+                                        {/* <SocialButtonsAuth linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} /> */}
 
                                         <div className={classes.form}>
-                                            <Typography
-                                                paragraph={true}
-                                                align="center"
-                                                className={classes.formText}
-                                            >Je ne possède pas de compte Talents Tube ?
-                                        <span onClick={() => this.handleChangeIndex(1)} className={classes.formLink}>
+                                        <Typography
+                                            paragraph={true}
+                                            align="center"
+                                            className={classes.formText}
+                                        >Je ne possède pas de compte Talents Tube ? 
+                                            <Link href={"/Inscription"} >
+                                                <span className={classes.formLink}>
                                                     S'inscrire
-                                        </span>
-                                            </Typography>
+                                                </span>
+                                            </Link>
+                                        </Typography>
+                    
 
+                                        </div>
+                                        <div className={classes.connexionRecruteur}>
+                                            Vous êtes recruteur ? <a className={classes.enSavoirPlus} href='https://recruteur.talentstube.com'><span >Connexion</span></a>
                                         </div>
                                         <div className={classes.form}>
                                             <Typography
@@ -348,21 +404,22 @@ class LoginPage extends React.Component {
                                     </div>
 
                                 </TabContainer>
-                                <TabContainer dir={'x'}>
+                                {/* <TabContainer dir={'x'}>
                                     <Register linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} />
-                                </TabContainer>
+                                </TabContainer> */}
                             </SwipeableViews>
                         </Fragment>
                     )}
                 </div>
-                <Snack variant="error" message={!!!_.isEmpty(this.state.errors) && this.state.errors.message}
-                    openSnack={this.state.openSnack} onClose={this.handleClose} />
+                {/* <Snack variant="error" message={!!!_.isEmpty(this.state.errors) && this.state.errors.message}
+                    openSnack={this.state.openSnack} onClose={this.handleClose} /> */}
             </Layout>
         );
     }
 }
 
 function mapStateToProps(state, ownProps) {
+    
     return {
         loading: !!state.user.loading,
         errors: state.user.errors || ownProps.errors

nextjs/pages/MentionsLegales.js

@@ -22,7 +22,7 @@ const styles = theme => ({
         bottom: 0,
     },
     title: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1.5em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),

nextjs/pages/Offre.js

@@ -1,22 +1,31 @@
 
-import React from 'react';
+import React, { Fragment,lazy, Suspense } from 'react'
 import { connect } from "react-redux";
 import PropTypes from 'prop-types';
 import getConfig from 'next/config'
 import { withStyles } from '@material-ui/core/styles';
+import OgHead from '../components/atoms/OgHead'
+import RootContainer from '../components/atoms/RootContainer'
 import LayoutOffre from "../components/templates/LayoutOffre";
+// const OffreDetail = lazy(() => import('../components/organisms/OffreDetail'));
 import OffreDetail   from "../components/organisms/OffreDetail";
-import { fetchAdRequest, clearAd, countAdViewRequest } from '../actions/ads'
+import { fetchJobRequest, clearAd, countAdViewRequest } from '../actions/ads'
 import _ from "lodash/string";
-
+const renderLoader = () => <p>Chargement</p>;
 const styles = theme => ({
 
 });
 
 const { publicRuntimeConfig } = getConfig()
-class Offre extends React.Component {
+let descriptionSEO = ""
+let titleSEO = ""
 
+
+class Offre extends React.Component {
+    
     componentDidMount() {
+        localStorage.setItem('loginRedirect', window.location.pathname)
+        localStorage.setItem('adId', this.props.offre.id)
         this.props.countAdViewRequest(this.props.offre.id);
     }
 
@@ -29,11 +38,30 @@ class Offre extends React.Component {
     }
     render() {
         const { classes, offre } = this.props;
-
+        descriptionSEO=""
+        offre.company && offre.company.brand_name ? descriptionSEO += offre.company.brand_name : ""
+        descriptionSEO +=  " recrute un(e) "+offre.title+", "+(offre.location && offre.location.gmap_address.formatted_address)+". Envoyez votre candidature vidéo"
+        titleSEO =  "Offre d'emploi "+offre && offre.title && offre.title.replace(' (F/H)', '')+", "+(offre.location && offre.location.gmap_address.formatted_address)+". Envoyez votre candidature vidéo"
+        const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `Offre/${offre.id}-${_.kebabCase(offre.title)}`;
+        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[4]) ? offre.company.presentation_video.thumbnails[0].sizes[4].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[4]) ? offre.video.thumbnails[0].sizes[4].link : DefaultUrl
         return (
-            <LayoutOffre backLink="/Offres" offreId={offre.id} isProvided={offre.is_promoted}>
-                <OffreDetail offre={offre}/>
-            </LayoutOffre>
+            <RootContainer>
+                <OgHead seo_title={titleSEO}
+                seo_description={descriptionSEO}
+                seo_url={socialShareUrl}
+                image={imgUrlOffre}
+            ></OgHead>
+           
+                <LayoutOffre backLink="/Offres" offreId={offre.id} offre={offre} isProvided={offre.is_promoted}>
+                
+                {/* <Suspense fallback={renderLoader()}><OffreDetail offre={offre}/></Suspense> */}
+                    <OffreDetail offre={offre}/>
+                </LayoutOffre>
+            </RootContainer>
         );
     }
 
@@ -42,7 +70,7 @@ class Offre extends React.Component {
 Offre.getInitialProps = function (context) {
     const { id } = context.query
 
-    context.store.dispatch(fetchAdRequest(id))
+    context.store.dispatch(fetchJobRequest(id))
 
     return id;
 }
@@ -57,4 +85,4 @@ Offre.propTypes = {
     classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(connect(mapStateToProps, { fetchAdRequest, clearAd, countAdViewRequest})(Offre));
+export default withStyles(styles)(connect(mapStateToProps, { fetchJobRequest, clearAd, countAdViewRequest})(Offre));

nextjs/pages/Offres.js

@@ -9,11 +9,11 @@ import LayoutGrid from "../components/templates/LayoutGrid";
 import Grid from "../components/templates/Grid"
 import OffreRow from "../components/organisms/OffreRow"
 import Typography from '@material-ui/core/Typography';
-import { fetchAdsRequest, togglePromotedFilterRequest} from '../actions/ads'
+import { fetchJobsRequest, togglePromotedFilterRequest} from '../actions/ads'
 import { AdsSelector } from '../reducers/ads'
-import { TextField } from '@material-ui/core';
-import Head from 'next/head'
-
+import OgHead from '../components/atoms/OgHead';
+import getConfig from 'next/config'
+import { SocialProfileJsonLd } from 'next-seo';
 
 const styles = theme => ({
   root: {
@@ -38,7 +38,7 @@ const styles = theme => ({
 
   },
   title: {
-    fontFamily: 'Dosis',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     fontSize: '1.5em',
     fontWeight: '600',
     textAlign: 'center',
@@ -78,21 +78,52 @@ class Offres extends React.Component {
 
   constructor(props) {
     super(props);
+    
+  }
+  voirOffre(){
+    this.props.togglePromotedFilterRequest()
+    sessionStorage.setItem('offres_currentPage',1);
   }
 
+  static getInitialProps({ query }) {
+    const { init } = query
+    //this.props.promotedFilter =init
+    return { init };
+  }
+  componentDidMount() {    
+    localStorage.setItem('loginRedirect', window.location.pathname)
+    console.log("Redirect"+window.location.pathname)
+  }
   render() {
+    
     const { classes } = this.props;
     const countColor = this.props.promotedFilter ? classes.provided : classes.primary;
     const btnClass = this.props.promotedFilter ? classes.buttonDefault : classes.buttonProvided;
-
+    const { publicRuntimeConfig } = getConfig();
+    const socialShareUrl = typeof window !== 'undefined' ? window.location
+            : publicRuntimeConfig.frontServerUrl + `/Offres`;
+    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "img/default_picture_svg"
+    const imgUrl = DefaultUrl ;
     return (
       <LayoutGrid backLink="/">
-        <Head>
-          <title key="title">Offres d’emploi en vidéo – Talents Tube</title>
-          <meta name="description" content="Les offres d'emploi en vidéo." />
-          <meta key="robots" name="robots" content="noindex, nofollow"></meta>
-
-        </Head>
+        <OgHead seo_title="Vidéos d'offres d'emploi, CDI, CDD, alternance et Stage | Talents Tube"
+                    seo_description="Vidéos d'offres d'emploi, CDI, CDD, alternance, stage et apprentissage d'entreprises qui recrutent sur Talents Tube."
+                    seo_url={socialShareUrl}
+                    image={imgUrl}
+                    seo_key="Recrutement, video"
+                    
+        ></OgHead>
+        <SocialProfileJsonLd
+          type="Talents Tube"
+          name="Talents Tube"
+          url="https://www.talentstube.com"
+          sameAs={[
+              'https://www.facebook.com/TalentsTuber',
+              'https://www.instagram.com/talents.tube/',
+              'https://www.linkedin.com/company/talentstube/',
+              'https://twitter.com/TalentsTuber',
+          ]}
+          />
 
         <Typography gutterBottom component="h1"
           className={classes.title}>
@@ -100,18 +131,20 @@ class Offres extends React.Component {
         </Typography>
         <div className={classes.container}>
           <Grid CustomRowComponent={OffreRow}
-            dataFetcher={this.props.fetchAdsRequest}
+            dataFetcher={this.props.fetchJobsRequest}
             data={this.props.ads}
             currentPage={this.props.currentPage}
             recordCount={this.props.recordCount}
             promoted={this.props.promotedFilter}
             loading={this.props.loading}
+            type="offres"
             placeholder={"Rechercher un job"}
           />
           <Button
           name="Rechercher un job"
             variant="outlined"
-            onClick={() => this.props.togglePromotedFilterRequest()}
+            onClick={() => this.voirOffre()
+            }
             className={classes.button + ' ' + btnClass}>
             {this.props.promotedFilter? 'Voir les offres en cours' : 'Voir les offres pourvues'}
           </Button>
@@ -141,4 +174,4 @@ function mapStateToProps(state) {
   };
 }
 
-export default withStyles(styles)(connect(mapStateToProps, { fetchAdsRequest, togglePromotedFilterRequest })(Offres))
+export default withStyles(styles)(connect(mapStateToProps, { fetchJobsRequest, togglePromotedFilterRequest })(Offres))

nextjs/pages/Parametres.js

@@ -39,7 +39,7 @@ const styles = theme => ({
         }
     },
     title: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1.5em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),

nextjs/pages/Player.js

@@ -0,0 +1,132 @@
+import React, { Component, Fragment,lazy, Suspense,  useEffect  } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography'
+import LayoutBackUrl from '../components/templates/LayoutBackUrl';
+import RootContainer from '../components/atoms/RootContainer'
+import Router from 'next/router';
+import Head from 'next/head'
+// const VideoVimeo = lazy(() => import('../components/atoms/VideoVimeo'));
+import VideoVimeo from '../components/atoms/VideoVimeo';
+import queryString from 'query-string';
+import { fetchJobRequest, clearAd, countAdViewRequest } from '../actions/ads'
+const renderLoader = () => <p>Chargement</p>;
+import { NextSeo } from 'next-seo';
+import dynamic from 'next/dynamic'
+const styles = theme => ({
+    player: {
+        background:'#1E2327',
+        height: '100%'
+    },
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        height: '100%',
+        padding: '0 10px',
+    },
+    bottomContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignSelf: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+        bottom: 0,
+    },
+    title: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+        fontSize: '1.5em',
+        fontWeight: '600',
+        padding: theme.spacing(3, 0),
+    },
+    text: {
+        fontSize: '1em',
+        fontWeight: '300',
+        padding: theme.spacing(1, 0),
+        whiteSpace: 'pre-line',
+    },
+    video: {
+        width:"100%",
+        height:"100%",
+        [theme.breakpoints.up('md')]: {
+            paddingBottom: '35%', /* 16:9 */
+        },
+    }
+})
+
+let params = dynamic( () => window.location.search, {ssr: false} )
+class Player extends Component {
+    constructor(props)
+    {
+        super(props);
+        var today = new Date(),
+            date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
+
+        this.state = {
+            date: date
+        };
+        
+        console.log("LOCATION SEARCH");
+        console.log(params);
+    }
+    render() {
+        const { classes, id, url, typeEntite, videoId, nameCompany, nameOffre } = this.props
+        const urlEnv = process.env.NODE_ENV;
+        let nofollow = true;
+        urlEnv == "development" ? nofollow = true : nofollow = false;
+        
+        console.log(id);
+        console.log(typeEntite);
+        let typeVideo= null;
+        let titleVideo= null;
+        let descriptionVideo= null;
+        if(typeEntite=="Offre"){
+            titleVideo=nameCompany+" recrute un(e)"+nameOffre
+            descriptionVideo=nameCompany+" recrute en vidéo un(e)"+nameOffre
+        }else if(typeEntite=="Entreprise"){
+            titleVideo="Découvrez l'entreprise "+nameCompany+" et ses offres d'emploi vidéo"
+            descriptionVideo="Découvrez l'entreprise "+nameCompany+" et ses offres d'emploi vidéo. Envoyez votre candidature spontanée en vidéo"
+        }else if(typeEntite=="Territoire"){
+            titleVideo="Découvrez le territoire "+nameCompany
+            descriptionVideo="Découvrez le territoire "+nameCompany
+        }
+        console.log(videoId);
+        
+        return (
+            <RootContainer>
+                <NextSeo
+                title={titleVideo}
+                description={descriptionVideo}
+                noindex={nofollow}
+                nofollow={nofollow}
+                openGraph={{
+                    title: titleVideo,
+                    description: descriptionVideo,
+                    url: "https://www.talentstube.com/Player?id="+id+"&url="+url+"&videoId="+videoId+"&typeEntite="+typeEntite+"&nameCompany="+nameCompany+"&nameOffre="+nameOffre,
+                    type: 'video.movie',
+                    video: {
+                        // Multiple Open Graph actors is only available in version `7.0.2-canary.35`+ of next
+                        releaseDate: this.state.date,
+                        // Multiple Open Graph tags is only available in version `7.0.2-canary.35`+ of next 
+                    },
+                    site_name: 'Talents Tube',
+                }}
+                />
+                <LayoutBackUrl text="Player" url={url} >   
+                    <VideoVimeo classes={{ video: classes.video }} videoId={videoId} options="" autoplay='1' /> 
+                </LayoutBackUrl>
+            </RootContainer>
+        )
+    }
+}
+
+Player.getInitialProps = function (context) {
+
+    let { id, url,videoId,typeEntite, nameCompany, nameOffre } = context.query;
+    let {res} = context;
+    return {id:id, url:url, videoId:videoId, typeEntite:typeEntite, nameCompany:nameCompany, nameOffre:nameOffre};
+  }
+
+
+
+
+export default withStyles(styles)(Player);

nextjs/pages/Reponse.js

@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
-import { fetchAdRequest } from '../actions/ads'
+import { fetchJobRequest } from '../actions/ads'
 import { fetchCompanyRequest } from '../actions/companies'
 import { fetchCurrentUserRequest } from '../actions/user'
 import { uploadMedia } from '../actions/media'
-import Loader from './../components/templates/loader'
+import LoaderVideo from './../components/templates/loaderVideo'
 import Answer from '../components/organisms/Answer'
 import LayoutBack from '../components/templates/LayoutBack'
 import { withStyles } from '@material-ui/core/styles'
@@ -36,9 +36,9 @@ const styles = theme => ({
   },
   rootStepperContainer: {
     padding: theme.spacing(2, 12),
-    width: '25vw',
+    width: '50vw',
     [theme.breakpoints.up('md')]: {
-      width: '7vw',
+      width: '25vw',
       alignItems: 'center',
     },
     '& .MuiStep-horizontal, & .MuiStepLabel-iconContainer': {
@@ -48,11 +48,30 @@ const styles = theme => ({
       },
     },
     '& .Mui-disabled .MuiStepConnector-line': {
-      borderColor: theme.palette.answer.main + '!important',
+      borderColor:  'd2d3d3 !important',
     },
     '& .Mui-disabled .MuiStepIcon-root': {
       color: theme.palette.answer.main + '!important',
     },
+    '& .MuiStepIcon-root': {
+      color:  '#1689FB !important',
+    },
+    '& .MuiTypography-root ': {
+      color:  '#1e2327 !important',
+    },
+    
+  },
+  stepContainer:{
+    width:'600px',
+    alignItems: 'center',
+    textAlign: 'center',
+    align: 'center',
+  },
+  stepLabel:{
+    // width:'150px',
+    // display:'inline',
+    // alignItems: 'center',
+    // align: 'center',
   },
   rootStepperDefault: {
     '& .MuiStepConnector-line': {
@@ -75,15 +94,29 @@ const styles = theme => ({
     flexDirection: 'column',
     padding: theme.spacing(0, 1.5),
   },
+  titreContainer: {
+    backgroundColor: '#fff',
+    borderRadius: '5px',
+    maxWidth:'600px',
+    boxShadow: '0px 6px 16px rgba(30, 35, 39, 0.15)',
+    display: 'flex',
+    padding: '25px',
+    margin: '40px 0 20px 0',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+
+  },
   logoContainer: {
     display: 'flex',
     alignItems: 'center',
-    width: 60,
-    height: 60,
+    width: 75,
+    height: 75,
     backgroundColor: 'white',
     boxShadow: '0px 6px 15px rgba(30, 35, 39, 0.10)',
     border: 'solid 5px white',
     borderRadius: '6px',
+    marginLeft:'30px',
+
   },
   recorderContainer: {
     //display: 'flex',
@@ -107,11 +140,11 @@ const styles = theme => ({
     objectFit: 'contain',
   },
   title: {
-    fontSize: '1em',
+    fontSize: '1.25em',
     fontWeight: '500',
   },
   companyName: {
-    fontSize: '0.9em',
+    fontSize: '1em',
     fontWeight: '300',
   },
   textContainer: {
@@ -147,6 +180,12 @@ const styles = theme => ({
     fontSize: '1.15em',
     paddingLeft: theme.spacing(2),
   },
+  textButtonReponse: {
+    fontWeight: '700',
+    fontSize: '1.15em',
+    paddingLeft: theme.spacing(2),
+    color:'#1e2327',
+  },
   iconHelpButton: {
     fontSize: '1.5em',
     fontWeight: '500',
@@ -167,6 +206,7 @@ const styles = theme => ({
   },
 
   captureButton: {
+    width:400,
     color: theme.palette.secondary.main,
     backgroundColor: theme.palette.primary.main,
     padding: theme.spacing(5, 2),
@@ -177,6 +217,7 @@ const styles = theme => ({
     },
   },
   importButton: {
+    width:400,
     color: theme.palette.primary.main,
     backgroundColor: theme.palette.secondary.main,
     padding: theme.spacing(3, 2),
@@ -198,9 +239,13 @@ const styles = theme => ({
     fontSize: '2.5em',
     color: theme.palette.primary.main,
   },
+  InputKeyboardArrowDownIconNoir: {
+    fontSize: '2.5em',
+    color: '#1e2327',
+  },
 });
 
-const steps = ["", ""]
+const steps = ["Réaliser une vidéo de réponse",  "Renseigner mes informations"]
 
 const Recorder = dynamic(() => import('../components/organisms/Recorder'), {
   ssr: false
@@ -214,14 +259,19 @@ class Reponse extends React.Component {
     data:{},
     openSnack: false,
     errors: {},
+    openStudio : false
   };
 
   componentDidMount() {
-    localStorage.setItem('loginRedirect', window.location)
+    console.log('loginRedirect reponse');
+    console.log(window.location.pathname+ window.location.search);
+    
+    //localStorage.setItem('loginRedirect', window.location.pathname+ window.location.search)
 
     if(!!!localStorage.getItem('ttJWT'))
     {
-      Router.push("/Login")
+      console.log("REPONSE REDIRECT LOGIN")
+      Router.push("/Inscription")
     }
     else
       this.setState({loading: false})
@@ -265,11 +315,22 @@ class Reponse extends React.Component {
       this.setState({ openSnack: false });
   }
 
+  realise =() =>{
+    console.log("realise");
+    this.setState({ openStudio: true});
+  }
+
+  retour =() =>{
+    console.log("retour");
+    this.setState({ openStudio: false});
+  }
+
   render() {
     const { loading, activeStep } = this.state;
     const { classes, menu, offre, company } = this.props;
-    const logoUrl = (offre.company ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + offre.company.logo : '');
     const logoCompanyUrl = ((company && company.logo) ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + company.logo : '');
+    const logoUrl = (offre.company ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + offre.company.logo : logoCompanyUrl);
+    
 
     let rootStepper = activeStep === 0 ? (
       classes.rootStepperDefault
@@ -277,35 +338,34 @@ class Reponse extends React.Component {
         classes.rootStepperActive
       )
     return (
-      <LayoutBack text="Candidature">
+      <LayoutBack text="Candidature" step={this.state.activeStep} openStudio={this.state.openStudio}>
         <Head>
           <title>Candidature vidéo</title>
-          <meta name="description" content="Talent's tube, postulez en video." />
+          <meta name="description" content="Talents tube, postulez en video." />
           <meta key="robots" name="robots" content="noindex, nofollow"></meta>
-          <link rel="canonical" href="https://app.talentstube.com" />
+          
         </Head>
         {/* https://codesandbox.io/s/ii0us */}
-       { loading ? 
-        <Loader /> :
-       <Fragment>
-        
         <section className={classes.headerContainer}>
          { !!offre.company && (
          
-         <Fragment>
-           <div className={classes.logoContainer}>
-            <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoUrl}  alt="companylogo"/>
-          </div>
-          <div className={classes.infoContainer}>
-            <Typography gutterBottom variant="h5" component="h1" className={classes.title}>
-              {!!offre.title? offre.title: ''}
-            </Typography>
-            <Typography gutterBottom variant="subtitle1" className={classes.companyName}>
-              {!!offre.company.brand_name? offre.company.brand_name: ''}
-            </Typography>
-            {/* ville */}
-          </div>
-          </Fragment>)
+        
+           <div className={classes.titreContainer}>
+              <div className={classes.logoContainer}>
+                <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoUrl}  alt="companylogo"/>
+                
+              </div>
+              <div className={classes.infoContainer}>
+                <Typography gutterBottom variant="h5" component="h1" className={classes.title}>
+                  {!!offre.title? offre.title: ''}
+                </Typography>
+                <Typography gutterBottom variant="subtitle1" className={classes.companyName}>
+                  {!!offre.company.brand_name? offre.company.brand_name: ''}
+                </Typography>
+                {/* ville */}
+              </div>
+            </div>
+          )
           }
           { !!company.brand_name && (<Fragment><div className={classes.logoContainer}>
             <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoCompanyUrl} alt="companylogo"/>
@@ -322,92 +382,139 @@ class Reponse extends React.Component {
           }
 
         </section>
-
-        <Stepper activeStep={activeStep} classes={{ root: rootStepper }} className={classes.rootStepperContainer}>
+       { loading ? 
+        <LoaderVideo textePrincipal="Votre candidature vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/> 
+      :
+       <Fragment>
+        
+        
+        <section className={classes.headerContainer}>  
+        <Stepper activeStep={activeStep} classes={{ root: rootStepper }} className={classes.rootStepperContainer} alternativeLabel>
           {steps.map((label, index) => {
             return (
-              <Step key={label} >
-                <StepLabel>{label}</StepLabel>
+              <Step className={classes.stepContainer} key={index} >
+                <StepLabel className={classes.stepLabel}>{label}</StepLabel>
               </Step>
             );
           })}
         </Stepper>
+        </section>
         {loading ? ( <Loader />)
         : activeStep === 0 ? 
         (
           <div className={classes.root}>
-
-            <div className={classes.textContainer}>
-              <Typography gutterBottom align="center">
-              Vous allez postuler en <span>vidéo</span> !
-              </Typography>
-              <Typography gutterBottom align="center">
-                C'est <span>simple</span>,<span> rapide</span> et <span>plus humain</span>
-              </Typography>    
-            </div>
-
-            <div className={ classes.helpContainer}>
-              <Button component="span" className={classes.helpButton} classes={{ root: classes.rootButton }} onClick={() => Router.push(`/Conseils`)}> 
-              <Typography align="center" className={classes.textButton}>
-                Par <span className={classes.underlined}>ici</span> pour quelques conseils !               
-              </Typography>
-              <KeyboardArrowRightIcon className={ classes.HelpKeyboardArrowRightIcon }/>
-              </Button>
-              </div>
-    { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
-             (
-            <Fragment>
-              <input
-                type="file" accept="video/*" capture="camcorder"
-                className={classes.input}
-                style={{ display: 'none' }}
-                id="record-button-file"
-                multiple
-                onChange={this.inputCamRecorderChange}
-              />
-              <label htmlFor="record-button-file">
-                <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
-                  <img alt="talents-tube" src='/static/images/capture.svg' className={classes.iconButton} />
-                  <Typography align="left" className={classes.textButton}>
-                    Je <span className={classes.underlined}>réalise</span> ma vidéo de réponse
+            {this.state.openStudio == false &&
+            <div>
+              {/* <div className={classes.textContainer}>
+                <Typography gutterBottom align="center">
+                Vous allez postuler en <span>vidéo</span> !
                 </Typography>
-                <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                <Typography gutterBottom align="center">
+                  C'est <span>simple</span>,<span> rapide</span> et <span>plus humain</span>
+                </Typography>    
+              </div> */}
+
+              {/* <div className={ classes.helpContainer}>
+                <Button component="span" className={classes.helpButton} classes={{ root: classes.rootButton }} onClick={() => Router.push(`/Conseils`)}> 
+                <Typography align="center" className={classes.textButton}>
+                  Par <span className={classes.underlined}>ici</span> pour quelques conseils !               
+                </Typography>
+                <KeyboardArrowRightIcon className={ classes.HelpKeyboardArrowRightIcon }/>
                 </Button>
-              </label>
-            </Fragment>
+              </div> */}
+            </div>
+            }
+            {/* Soit on affiche le module Web RTC soit on affiche un module de camrecorder */}
+            { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
+            (
+              <Fragment>
+                <input
+                  type="file" accept="video/*" capture="camcorder"
+                  className={classes.input}
+                  style={{ display: 'none' }}
+                  id="record-button-file"
+                  multiple
+                  onChange={this.inputCamRecorderChange}
+                />
+                <label htmlFor="record-button-file">
+                  <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
+                    <img alt="talents-tube" src='/statique/images/capture.svg' className={classes.iconButton} />
+                    <Typography align="left" className={classes.textButton}>
+                      Je <span className={classes.underlined}>réalise</span> ma vidéo de réponse
+                  </Typography>
+                  <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                  </Button>
+                </label>
+              </Fragment>
             ):
             (
-              <div className={classes.recorderContainer}>
-                <Recorder uploader={this.props.uploadMedia} />
-              </div>
+              <Fragment>
+                  
+                {this.state.openStudio == false ?
+                  <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }} onClick={this.realise}>
+                    <img alt="talents-tube" src='/statique/images/capture.svg' className={classes.iconButton} />
+                    <Typography align="left" className={classes.textButton}>
+                      Je <span className={classes.underlined}>réalise</span> ma vidéo de réponse
+                  </Typography>
+                  <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                  </Button>
+                :
+                  <div className={classes.recorderContainer}>
+                    <Button onClick={this.retour}>Retour au menu</Button>
+                   <Recorder uploader={this.props.uploadMedia} />
+                   
+                  </div>
+                  
+                }
+              </Fragment>
+              // <div className={classes.recorderContainer}>
+              //   <Recorder uploader={this.props.uploadMedia} />
+              // </div>
             )
             }
-        
-            <input
-              type="file" 
-              accept="video/*" 
-              className={classes.input+' cypButtonImportVid'}
-              style={{ display: 'none' }}
-              id="import-button-file"
-              onChange={this.inputFilesystemChange}
-            />
-            <label htmlFor="import-button-file">
-              <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
-                <img alt="talents-tube" src='/static/images/import.svg' className={classes.iconButton} />
-                <Typography align="left" className={classes.textButton}>
-                  J'<span className={classes.underlined}>importe</span> ma vidéo de réponse
-                  
-              </Typography>
-              <KeyboardArrowDownIcon className={ classes. InputKeyboardArrowDownIcon }/>
-              </Button>
-            </label>
-            
+            {this.state.openStudio == false ?
+              <div>
+                <div>
+                  <input
+                  type="file" 
+                  accept="video/*" 
+                  className={classes.input+' cypButtonImportVid'}
+                  style={{ display: 'none' }}
+                  id="import-button-file"
+                  onChange={this.inputFilesystemChange}
+                  />
+                  <label htmlFor="import-button-file">
+                  <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
+                    <img alt="talents-tube" src='/statique/images/Import.svg' className={classes.iconButton} />
+                    <Typography align="left" className={classes.textButton}>
+                      J'<span className={classes.underlined}>importe</span> ma vidéo de réponse
+                      
+                  </Typography>
+                  <KeyboardArrowDownIcon className={ classes. InputKeyboardArrowDownIcon }/>
+                  </Button>
+                  </label>
+                </div>
+                <div>
+                  <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }} onClick={() => Router.push(`/Conseils`)}>
+                    <img alt="talents-tube" src='/statique/images/comment-faire-une-video-reponse.svg' className={classes.iconButton} />
+                    <Typography align="left" className={classes.textButtonReponse}>
+                      Comment faire ma vidéo de réponse
+                      
+                  </Typography>
+                  <KeyboardArrowRightIcon className={ classes. InputKeyboardArrowDownIconNoir }/>
+                  </Button>
+                </div>
+              </div>
+            :
+            <div></div>
+            }
           </div>
         ) :
           (
             <Answer mediaId={!!this.props.media && this.props.media.id}
              companyId={!!offre.company ? offre.company.id : !!company.brand_name ? company.id : null}
-             adId={offre.id}>
+             adId={offre.id}
+             >
              </Answer>
           )}
            <Snack variant="error" message={!!!_.isEmpty(this.state.errors) && this.state.errors.message }
@@ -426,10 +533,10 @@ Reponse.getInitialProps = function (context) {
   const { adId, companyId } = context.query
   const {res} = context
     //TODO :really needed ?
-     context.store.dispatch(fetchCurrentUserRequest())
+      context.store.dispatch(fetchCurrentUserRequest())
 
   if(!!adId)
-    context.store.dispatch(fetchAdRequest(adId))
+    context.store.dispatch(fetchJobRequest(adId))
   else if(!!companyId)
     context.store.dispatch(fetchCompanyRequest(companyId))
 
@@ -437,7 +544,9 @@ Reponse.getInitialProps = function (context) {
 }
 
 function mapStateToProps(state) {
+  console.log("attente")
   
+  console.log(state.media)
   return {
     loading: !!state.answer.loading || !!state.media.loading,
     media: state.media,
@@ -452,4 +561,4 @@ Reponse.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(connect(mapStateToProps, { fetchCurrentUserRequest, fetchAdRequest, fetchCompanyRequest, uploadMedia })(Reponse));
+export default withStyles(styles)(connect(mapStateToProps, { fetchCurrentUserRequest, fetchJobRequest, fetchCompanyRequest, uploadMedia })(Reponse));

nextjs/pages/ResetPassword.js

@@ -25,7 +25,7 @@ const styles = theme => ({
         },
     },
     title: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1.5em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),
@@ -107,6 +107,7 @@ class ResetPassword extends Component {
             <Layout>
                 <Head>
                     <title key="title">Reset password</title>
+                    <meta key="robots" name="robots" content="noindex, nofollow"></meta>
                 </Head>
                 <div className={classes.container}>
                     <Typography

nextjs/pages/VerifyEmail.js

@@ -5,8 +5,15 @@ import Typography from '@material-ui/core/Typography'
 import Button from '@material-ui/core/Button';
 import Router from 'next/router';
 import Head from 'next/head'
-
+import { TextField } from '@material-ui/core';
 const styles = theme => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        margin: theme.spacing(1),
+      },
     container: {
         display: 'flex',
         flexDirection: 'column',
@@ -24,33 +31,74 @@ const styles = theme => ({
         width: '100%',
     },
     title: {
-        fontFamily: 'Dosis',
-        fontSize: '1.5em',
+        fontFamily: 'Roboto',
+        fontSize: '1.625em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),
     },
     text: {
+        fontFamily: 'Roboto',
+        width:"400px",
         fontSize: '1em',
         fontWeight: '300',
         padding: theme.spacing(1, 0),
     },
+    textSpam:{
+        fontFamily: 'Roboto',
+        width:"400px",
+        fontSize: "1em",
+        fontWeight: "500",
+        padding: theme.spacing(1, 0),
+    },
     email: {
         fontWeight: '500',
     },
     bottomText: {
         fontWeight: '500',
     },
+
+    iconButton:{
+        marginTop: "50px",
+
+        [theme.breakpoints.down('md')]: {
+            marginTop: "50px",
+            
+        },
+    },
+    textContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+
+    },
+    notUnderline:{
+        textDecoration :'none'
+    },
+    rootButton: {
+        '&:hover': {
+          backgroundColor: theme.palette.primary.important + '!important',
+        },
+      },
     button: {
         textTransform: 'inherit',
+        marginLeft: theme.spacing(8),
+        marginRight: theme.spacing(8),
         marginTop: theme.spacing(4),
         marginBottom: theme.spacing(2),
-        marginRight: 'auto',
-        marginLeft: 'auto',
-        padding: theme.spacing(1.2, 1),
+        padding: theme.spacing(1.2, 2),
         borderRadius: '3px',
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.important,
+        [theme.breakpoints.up('sm')]: {
+            margin: 'auto',
+        },
     },
+    buttonImportant: {
+        marginTop: theme.spacing(6),
+    },
+      champEmail:{
+          width:'400px'
+      }
 
 });
 class VerifyEmail extends Component {
@@ -62,18 +110,49 @@ class VerifyEmail extends Component {
                     <title key="title">Vérification d'email</title>
                     <meta key="robots" name="robots" content="noindex, nofollow"></meta>
                 </Head>
-                <div className={classes.container}>
-                    <Typography gutterBottom align="center" className={classes.title}>
-                        Consultez vos e-mails
-                </Typography>
-                    <Typography gutterBottom align="left" className={classes.text}>
-                        Un e-mail a été envoyé à l'adresse <span className={classes.email}>{email}</span>
-                    </Typography>
-                    <Typography gutterBottom align="left" className={classes.text}>
-                        Cliquez sur le lien dans l'e-mail que nous vous avons envoyé pour activer votre compte.
-                </Typography>
+                <div className={classes.root}>
+                    <div className={classes.textContainer}>
+                        <img
+                            alt="talents-tube"
+                            src='/statique/images/inscription/inscription-plateforme-recrutement-video.svg'
+                            className={classes.iconButton}/>
+                        <Typography gutterBottom align="center" className={classes.title}>
+                            Consultez vos e-mails 
+                        </Typography>
+                        <Typography gutterBottom align="left" className={classes.text}>
+                            Cliquez sur le lien dans l’email que nous vous avons envoyé pour activer votre compte Talent. Vous pourrez ensuite vous connecter.
+
+                        </Typography>
+                        <TextField
+                        value={email}
+                        className={classes.champEmail}
+                        id="emailVerif"
+                        name="emailVerif"
+                        label="Email"
+                        margin="normal"
+                        variant="outlined"
+                        InputProps={{
+                            readOnly: true,
+                          }}
+                        
+                        />
+                        <Typography  align="center" className={classes.textSpam}>
+                        Vous n'avez pas reçu l'email ? Pensez à consulter vos spams
+                        </Typography>
+                        <a
+                        href={`/Login`}
+                        variant="contained"
+                        className={classes.notUnderline}
+                        
+                        >
+                            <Button variant="contained" className={classes.button + ' ' + classes.buttonImportant + ' cypButtonConnexion'}>
+                                                    Se connecter
+                            </Button>
+                        </a>
+                    </div>
                     <section className={classes.bottomContainer}>
-                        <Typography gutterBottom align="center" className={classes.bottomText}>
+                        
+                        {/* <Typography gutterBottom align="center" className={classes.bottomText}>
                             Cliquez sur suivant pour continuer votre candidature
                         </Typography>
                         <Button
@@ -83,7 +162,7 @@ class VerifyEmail extends Component {
                             onClick={() => Router.push('/Login')}
                         >
                             Suivant
-                </Button>
+                        </Button> */}
                     </section>
                 </div>
             </Layout>

nextjs/pages/_document.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import Document, { Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheets } from '@material-ui/styles';
 import flush from 'styled-jsx/server';
@@ -18,7 +18,7 @@ class MyDocument extends Document {
     const { pageContext } = this.props;
 
     return (
-      <html lang="en" dir="ltr">
+      <html lang="fr" dir="ltr">
         <Head>
           <meta name="google-site-verification" content="CQsVLRoDEzxN5TT4zoTIPy_v4JWGPQgg29OLNx8EkXw" />
           <meta charSet="utf-8" />
@@ -31,11 +31,14 @@ class MyDocument extends Document {
           />
           {/* PWA primary color */}
           <meta name="theme-color" content={theme.palette.primary.main} />
+          <link rel="preload" href="/statique/css/fonts.css" rel="stylesheet">
 
-          <link href="https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
           </link>
-
-          <script type="text/javascript" src="/static/js/pwaInstaller.js" ></script>
+          <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
+          <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
+          <link rel="stylesheet" type="text/css" href="/statique/css/autocomplete.css" />
+          <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places"></script>
+          <script async type="text/javascript" src="/static/js/pwaInstaller.js" ></script>
           {/* Global Site Tag (gtag.js) - Google Analytics */}
           {/* <script
             async
@@ -52,7 +55,7 @@ class MyDocument extends Document {
             }}
           /> */}
 
-          <script
+          <script defer 
             dangerouslySetInnerHTML={{
               __html: `
 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':

nextjs/pages/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
-import React, {Fragment} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Layout from "../components/templates/Layout"
@@ -8,19 +8,23 @@ import { Typography } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
 import Router from 'next/router'
 import { connect } from 'react-redux'
-import { fetchEmphasisAdsRequest } from "../actions/ads";
+//const fetchEmphasisJobsRequest = lazy(() => import('../actions/ads'));
+import { fetchEmphasisJobsRequest } from "../actions/ads";
+//const fetchEmphasisCompaniesRequest = lazy(() => import('../actions/companies'));
 import { fetchEmphasisCompaniesRequest } from "../actions/companies";
-import Loader from './../components/templates/loader'
+import Loader from '../components/templates/loader'
 import { isEmpty } from "lodash"
-import NoResult from './../components/atoms/NoResult';
-import Head from 'next/head'
+import NoResult from '../components/atoms/NoResult';
+// import Head from 'next/head'
 import dynamic from 'next/dynamic'
 import OgHead from '../components/atoms/OgHead';
 import getConfig from 'next/config'
-
-const VideoSlider = dynamic(() => import('../components/organisms/ShortVideoHooker'), {
-  ssr: false
-});
+import { BreadcrumbJsonLd } from 'next-seo';
+import Slider from "react-slick";
+import Hidden from '@material-ui/core/Hidden';
+// const VideoSlider = dynamic(() => import('../components/organisms/ShortVideoHooker'), {
+//   ssr: false
+// });
 const HorizontalScroller = dynamic(() => import('../components/organisms/HorizontalScroller'), {
   ssr: false
 });
@@ -76,6 +80,9 @@ const styles = theme => ({
   scrollerSectionCompany: {
     backgroundColor: theme.palette.background.grey,
   },
+  scrollerSectionSlider:{
+    backgroundColor: theme.palette.secondary.main,
+  },
   card: {
     margin: theme.spacing(1),
     width: '96%',
@@ -120,7 +127,7 @@ const styles = theme => ({
     color: theme.palette.secondary.text,
   },
   title: {
-    fontFamily: 'Dosis',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     fontSize: '1.5em',
     fontWeight: '600',
     textAlign: 'center',
@@ -136,44 +143,389 @@ const styles = theme => ({
       margin: 'auto',
     },
   },
+  choix: {
+    color:"#fff",
+    position: "absolute",
+    top: "0",
+    bottom: "0",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  choixMobile: {
+    color:"#fff",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+
+  },
+  containerVideoGauche :{
+    position: "relative",
+    height:"100%",
+    width:"50%",
+    backgroundImage: 'url("/statique/images/accueil/trouver-un-job.jpg")',
+   
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    backgroundBlendMode: 'darken',
+    backgroundColor: 'rgba(30,35,39,0.4)',
+  },
+  containerVideoDroite :{
+    position: "relative",
+    backgroundColor:"red",
+    height:"100%",
+    width:"50%",
+    backgroundImage: 'url("/statique/images/accueil/recruter-des-talents.jpg") ',
+    
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    backgroundBlendMode: 'darken',
+    backgroundColor: 'rgba(30,35,39,0.5)',
+  },
+  containerVideoMobile :{
+    height:"100%",
+    width:"100%",
+    backgroundImage: 'url("/statique/images/accueil/trouver-un-job.jpg")',
+    padding :"0 30px",
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    backgroundBlendMode: 'darken',
+    backgroundColor: 'rgba(30,35,39,0.5)',
+  },
+  containerTitre :{
+
+  },
+  wrap :{
+    [theme.breakpoints.up('md')]: {
+      height: "85%",
+      width: "100%",
+      position: "relative",
+    },
+    height: "100%",
+    width: "100%",
+    position: "relative",
+  },
+  headerTitre :{
+    backgroundColor:"transparent",
+    height: "100px",
+    width: "100%",
+    position: "absolute",
+    top: "30px",
+    textAlign:"center",
+    color:"#fff",
+    zIndex : "1000"
+  },
+  headerTitreMobile :{
+    width: "100%",
+    textAlign:"center",
+    color:"#fff",
+    marginBottom:"30px"
+  },
+  blocRecruteur:{
+    backgroundColor:"#fff",
+    bottom:"40px", 
+    left:"60px",
+    position: "absolute",
+    padding:"50px",
+    fontWeight: "600",
+    minWidth:"40%",
+    borderRadius:"5px",
+  },
+  blocCandidat:{
+    backgroundColor:"#fff",
+    bottom:"40px", 
+    right:"60px",
+    position: "absolute",
+    padding:"50px",
+    fontWeight: "600",
+    minWidth:"40%",
+    borderRadius:"5px",
+  },
+  blocRecruteurMobile:{
+    backgroundColor:"#fff",
+    padding:"20px",
+    fontWeight: "600",
+    minWidth:"90%",
+    borderRadius:"5px",
+    margin :"15px 0"
+  },
+  blocCandidatMobile:{
+    backgroundColor:"#fff",
+    padding:"20px",
+    fontWeight: "600",
+    minWidth:"90%",
+    borderRadius:"5px",
+    margin :"60px 0 15px 0"
+  },
+  titreAccueil:{
+    fontSize:"2.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"0px",
+    fontWeight: "600",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  titreAccueil2:{
+    fontSize:"1.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"40px",
+    fontWeight: "400",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  titreAccueilMobile:{
+    fontSize:"2.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"0px",
+    fontWeight: "600",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  titreAccueil2Mobile:{
+    fontSize:"1.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"40px",
+    fontWeight: "400",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  jeSuis:{
+    fontSize:"1em",
+    textTransform: "uppercase",
+    color:"#1E2327",
+    textAlign: "left",
+    fontWeight: "300",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    marginBottom:"1em"
+  },
+  jeSuisMobile:{
+    fontSize:"1em",
+    textTransform: "uppercase",
+    color:"#1E2327",
+    textAlign: "center",
+    fontWeight: "300",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    marginBottom:"1em"
+  },
+  action:{
+    fontSize:"1.5em",
+    color:"#1E2327",
+    textAlign: "left",
+    fontWeight: "600",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    marginBottom:"1.5em"
+  },
+  boutonCandidat:{
+    width:"100%",
+  },
+  boutonRecruteur:{
+    width:"100%",
+    color: theme.palette.secondary.main,
+    backgroundColor: theme.palette.primary.important,
+  },
+  boutonCandidatMobile:{
+    width:"100%",
+    margin : "0px !important"
+  },
+  boutonRecruteurMobile:{
+    width:"100%",
+    color: theme.palette.secondary.main,
+    backgroundColor: theme.palette.primary.important,
+    margin : "0px !important"
+  },
+  temoignage:{
+    textAlign:"center"
+  },
+  lien:{
+    textDecoration:'none',
+    color:'#fff'
+  },
+  alignVertical:{
+    verticalAlign:"middle !important",
+    maxHeight :"80px",
+    minHeight :"60px",
+    
+  },
+  alignVerticalMobile:{
+    verticalAlign:"middle !important",
+    maxHeight :"70px",
+    minHeight :"70px",
+    
+  },
+  sliderDiv:{
+    padding:"30px"
+  },
+  sliderDivMobile:{
+    display: "inline !important",
+    padding:"10px",
+    
+  },
+  sliderContainerMobile:{
+    textAlign:"center"
+  }
 });
+///
 
 class Index extends React.Component {
   state = {
-    emphasisAds: [],
+    emphasisJobs: [],
     emphasisCompanies: []
   }
   componentDidMount() {
     localStorage.setItem("loginRedirect", "/")
-    this.props.fetchEmphasisAdsRequest({ isEmphasis: 1 })
+    this.props.fetchEmphasisJobsRequest({ isEmphasis: 1 })
     this.props.fetchEmphasisCompaniesRequest({ isEmphasis: 1 })
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
-      emphasisAds: nextProps.emphasisAds,
+      emphasisJobs: nextProps.emphasisJobs,
       emphasisCompanies: nextProps.emphasisCompanies
     })
   }
   render() {
     const { classes } = this.props;
-    
+    const settings = {
+      dots: false,
+      infinite: true,
+      slidesToShow: 5,
+      slidesToScroll: 1,
+      autoplay: true,
+      autoplaySpeed: 2000
+    };
+    const settingsMobile = {
+      dots: false,
+      infinite: true,
+      slidesToShow: 2,
+      slidesToScroll: 2,
+      autoplay: true,
+      autoplaySpeed: 2000
+    };
     const socialShareUrl = typeof window !== 'undefined' ? window.location
             : publicRuntimeConfig.frontServerUrl ;
     const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
     const imgUrl =  DefaultUrl
     return (
       <Layout>
-        <OgHead seo_title="Entreprises qui recrutent – Talents Tube"
-                    seo_description="Les entreprises en vidéo."
+        <OgHead seo_title="Espace candidat - Plateforme de recrutement en vidéo | Talents Tube"
+                    seo_description="Talents Tube est la première plateforme réservée aux offres d'emploi vidéo, vidéo marque employeur et aux CV vidéos. Découvrez une nouvelle méthode de recrutement."
                     seo_url={socialShareUrl}
                     image={imgUrl}
                     seo_key="Recrutement, video"
 
         ></OgHead>
+        <BreadcrumbJsonLd
+      itemListElements={[
+        {
+          position: 1,
+          name: 'Offres',
+          item: 'https://www.talentstube.com/Offres',
+        },
+        {
+          position: 2,
+          name: 'Entreprises',
+          item: 'https://www.talentstube.com/Offres',
+        },
+        {
+          position: 3,
+          name: 'Espace recruteur',
+          item: 'https://recruteur.talentstube.com/',
+        },
+        {
+          position: 4,
+          name: "Blog sur l'emploi",
+          item: 'https://blog.talentstube.com/',
+        },
+      ]}
+    />
+        <div className={classes.wrap}>
+            
+            <Hidden smDown>
+              <header className={classes.headerTitre}>
+                  <h1 className={classes.titreAccueil}>La rencontre d’offres d’emploi et de candidatures en vidéo</h1>
+                  <span className={classes.titreAccueil2}>
+                  Parce que vous méritez mieux que du texte !
+                  </span>
+              </header>
+              <section className={classes.choix}>
+              
+                <div className={classes.containerVideoGauche}>
+                    
+                    <div className={classes.blocCandidat}>
+                        <div className={classes.jeSuis}>JE SUIS CANDIDAT</div>
+                        <div className={classes.action}>Je trouve un job</div>
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => Router.push('/Offres')}
+                          className={classes.button + ' ' + classes.boutonCandidat}
+                        >Découvrir les offres
+                        </Button>
+
+
+                    </div>
+                </div>
+                <div className={classes.containerVideoDroite}>
+                  
+                  <div className={classes.blocRecruteur}>
+                    <div className={classes.jeSuis}>JE SUIS recruteur</div>
+                    <div className={classes.action}>Je recrute des talents</div>
+                    <a href='https://recruteur.talentstube.com' className={classes.lien}>
+                      <Button
+                          variant="contained"
+                          className={classes.button + ' ' + classes.boutonRecruteur}
+                        >Déposer une offre
+                    </Button>
+                    </a>
+                  </div>
+                </div>
+              </section>
+            </Hidden>
+            {/* PARTIE MOBILE */}   
+            <Hidden mdUp>
+              
+              <section className={classes.choixMobile}>
+                  
+                  <div className={classes.containerVideoMobile}>
+                    <div className={classes.headerTitreMobile}>
+                      <h1 className={classes.titreAccueilMobile}>La rencontre d’offres d’emploi et de candidatures en vidéo</h1>
+                        <span className={classes.titreAccueil2Mobile}>
+                        Parce que vous méritez mieux que du texte !
+                        </span>
+                    </div>
+                    <div className={classes.blocCandidatMobile}>
+                        <div className={classes.jeSuisMobile}>JE SUIS CANDIDAT</div>
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => Router.push('/Offres')}
+                          className={classes.button + ' ' + classes.boutonCandidatMobile}
+                        >Je trouve un job
+                        </Button>
+                    </div>
+                    <div className={classes.blocRecruteurMobile}>
+                      <div className={classes.jeSuisMobile}>JE SUIS recruteur</div>
+                      
+                      <a href='https://recruteur.talentstube.com' className={classes.lien}>
+                        <Button
+                            variant="contained"
+                            className={classes.button + ' ' + classes.boutonRecruteurMobile}
+                          >Je recrute des talents
+                      </Button>
+                      </a>
+                    </div>
+                  </div>
+              </section>  
+            </Hidden>
+          </div>
         <div className={classes.container}>
 
-          <VideoSlider />
-
+          {/* <VideoSlider /> */}
+          
           <section className={classes.scrollerSection + ' ' + classes.scrollerSectionOffer}>
             <div
               className={classes.HorizontalScrollerOffre}
@@ -183,17 +535,17 @@ class Index extends React.Component {
                   className={classes.beforeTitle}>
                   à la une
               </Typography>
-                <Typography gutterBottom component="h1"
+                <Typography gutterBottom component="h2"
                   className={classes.title}>
                   Les offres d'emploi en <span className={classes.primary}>vidéo</span>
                 </Typography>
               </div>
 
-              {this.state.emphasisAds.loading ?
+              {this.state.emphasisJobs.loading ?
                 (<Loader />)
-                : !isEmpty(this.state.emphasisAds.data) ? (
+                : !isEmpty(this.state.emphasisJobs.data) ? (
                     <HorizontalScroller
-                      data={this.state.emphasisAds.data}
+                      data={this.state.emphasisJobs.data}
                       className={classes.HorizontalScroller}
                       type="offre"
                     >
@@ -222,7 +574,7 @@ class Index extends React.Component {
                   className={classes.beforeTitle}>
                   à la une
               </Typography>
-                <Typography gutterBottom component="h1"
+                <Typography gutterBottom component="h2"
                   className={classes.title}>
                   Les entreprises en <span className={classes.primary}>vidéo</span>
                 </Typography>
@@ -254,6 +606,185 @@ class Index extends React.Component {
           </Button>
           </section>
 
+          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionCompany}>
+            <div
+              className={classes.HorizontalScrollerOffre}
+            >
+              <div className={classes.titleContainer}>
+                <Typography gutterBottom
+                  className={classes.beforeTitle}>
+                  Témoignage
+              </Typography>
+                <Typography gutterBottom component="h2"
+                  className={classes.title}>
+                  Le recrutement en <span className={classes.primary}>vidéo</span>
+                </Typography>
+              </div>
+              <div className={classes.temoignage}>
+                {/* PARTIE DEsktop */}   
+                <Hidden smDown>
+                  <iframe width="70%" height="450" src="https://www.youtube.com/embed/sKh0u7Mbdps" 
+                  frameborder="0" 
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                  allowfullscreen></iframe>
+                </Hidden>
+                {/* PARTIE MOBILE */}   
+                <Hidden mdUp>
+                <iframe width="90%" height="450" src="https://www.youtube.com/embed/sKh0u7Mbdps" 
+                  frameborder="0" 
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                  allowfullscreen></iframe>
+                </Hidden>
+
+              </div>    
+              
+            </div>
+
+            
+          </section>
+          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionSlider}>
+          {/* PARTIE DEsktop */}   
+          <Hidden smDown>
+            <Slider ref={slider => (this.slider = slider)} {...settings}>
+            <a href="/Entreprise/21247-lactalis-logistique-et-transports">        
+              <div className={classes.sliderDiv}>
+                <img className={classes.alignVertical} alt="Offres d'emploi Lactalis" src="/statique/images/logos/recrutement-video-lactalis.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/28481-onela"> 
+              <div className={classes.sliderDiv}>
+                <img className={classes.alignVertical} alt="Offres d'emploi Onela" src="/statique/images/logos/recrutement-video-onela-service-a-domicile.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/19205-intermarche-logistique-alimentaire-international"> 
+              <div className={classes.sliderDiv}>
+              <img  className={classes.alignVertical} alt="Offres d'emploi Intermarché" src="/statique/images/logos/recrutement-video-intermarche.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/4059-eiffage-construction-grand-ouest"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Eiffage" src="/statique/images/logos/recrutement-video-eiffage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/8639-mma-questembert"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi MMA" src="/statique/images/logos/recrutement-video-mma-assurances.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32987-admr-56"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi ADMR" src="/statique/images/logos/recrutement-video-ADMR.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/13464-jpa"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi JPA" src="/statique/images/logos/recrutement-video-jpa.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/2527-groupe-mousset"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Groupe Mousset" src="/statique/images/logos/recrutement-video-groupe-mousset.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/1467-groupe-rocher-operations"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Groupe Rocher" src="/statique/images/logos/recrutement-video-groupe-rocher.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/26064-aer-recyclage"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi AER Recyclage" src="/statique/images/logos/recrutement-video-aer-recyclage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/46-actual"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Actual" src="/statique/images/logos/recrutement-video-actual.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/31934-la-centrale-des-ramoneurs"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi La centrale des ramoneurs" src="/statique/images/logos/recrutement-video-la-centrale-des-ramoneurs.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32507-tpc-ouest">
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi TPC Ouest" src="/statique/images/logos/recrutement-video-tpc-ouest-btp.jpg"></img>
+              </div>
+            </a>
+            
+          </Slider>
+        </Hidden>
+        {/* PARTIE Mobile */}   
+        <Hidden mdUp>
+          <div  className={classes.sliderContainerMobile}>
+          <a href="/Entreprise/21247-lactalis-logistique-et-transports" >        
+              <div className={classes.sliderDivMobile}>
+                <img className={classes.alignVerticalMobile} alt="Offres d'emploi Lactalis" src="/statique/images/logos/recrutement-video-lactalis.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/28481-onela" > 
+              <div className={classes.sliderDivMobile}>
+                <img className={classes.alignVerticalMobile} alt="Offres d'emploi Onela" src="/statique/images/logos/recrutement-video-onela-service-a-domicile.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/19205-intermarche-logistique-alimentaire-international" > 
+              <div className={classes.sliderDivMobile}>
+              <img  className={classes.alignVerticalMobile} alt="Offres d'emploi Intermarché" src="/statique/images/logos/recrutement-video-intermarche.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/4059-eiffage-construction-grand-ouest" > 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Eiffage" src="/statique/images/logos/recrutement-video-eiffage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/8639-mma-questembert" > 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi MMA" src="/statique/images/logos/recrutement-video-mma-assurances.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32987-admr-56" > 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi ADMR" src="/statique/images/logos/recrutement-video-ADMR.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/13464-jpa"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi JPA" src="/statique/images/logos/recrutement-video-jpa.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/2527-groupe-mousset"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Groupe Mousset" src="/statique/images/logos/recrutement-video-groupe-mousset.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/1467-groupe-rocher-operations"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Groupe Rocher" src="/statique/images/logos/recrutement-video-groupe-rocher.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/26064-aer-recyclage"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi AER" src="/statique/images/logos/recrutement-video-aer-recyclage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/46-actual"> 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Actual" src="/statique/images/logos/recrutement-video-actual.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/31934-la-centrale-des-ramoneurs"> 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi La centrale des ramoneurs" src="/statique/images/logos/recrutement-video-la-centrale-des-ramoneurs.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32507-tpc-ouest">
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="TPC Ouest" src="/statique/images/logos/recrutement-video-tpc-ouest-btp.jpg"></img>
+              </div>
+            </a>   
+          </div>
+        </Hidden>
+        </section>        
           <Footer />
         </div>
       </Layout>
@@ -263,7 +794,7 @@ class Index extends React.Component {
 
 function mapStateToProps(state) {
   return {
-    emphasisAds: state.emphasisAds,
+    emphasisJobs: state.emphasisJobs,
     emphasisCompanies: state.emphasisCompanies
   };
 }
@@ -272,4 +803,4 @@ Index.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default (connect(mapStateToProps, { fetchEmphasisAdsRequest, fetchEmphasisCompaniesRequest })(withStyles(styles)(Index)));
+export default (connect(mapStateToProps, { fetchEmphasisJobsRequest, fetchEmphasisCompaniesRequest })(withStyles(styles)(Index)));

nextjs/pages/profileStep.js

@@ -1,43 +1,79 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import {makeStyles} from '@material-ui/core/styles';
 import Layout from "../components/templates/Layout";
 import AccountProfile from "../components/organisms/AccountProfile";
+import { Typography } from '@material-ui/core';
 import Head from 'next/head'
-// import AdBlockDetect from 'react-ad-block-detect';
+import AdBlockDetect from 'react-ad-block-detect';
 
 const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-  },
-  button: {
-    marginRight: theme.spacing(1),
-  },
-  completed: {
-    display: 'inline-block',
-  },
-  instructions: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
+    root: {
+        width: '100%'
+    },
+    button: {
+        marginRight: theme.spacing(1)
+    },
+    completed: {
+        display: 'inline-block'
+    },
+    instructions: {
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1)
+    },
+    information: {
+      display: 'flex',
+      flexDirection: 'column',
+      backgroundColor: theme.palette.primary.main,
+      color: "#fff",
+      fontWeight: '700',
+      fontSize: '1.15em',
+      fontFamily: 'Roboto',
+      [
+          theme
+              .breakpoints
+              .up('md')
+      ]: {
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          justifyContent: 'space-around',
+          backgroundColor: theme.palette.primary.main,
+          padding: theme.spacing(2, 2)
+      },
+      '& a': {
+          textDecoration: 'none'
+      },
+      texteBlanc: {
+        color: "#fff",
+        
+      },
   },
 }));
 
-
-
 export default function HorizontalNonLinearStepper() {
-  const classes = useStyles();
+    const classes = useStyles();
 
-  return (
-    <Layout>
-      <Head>
-          <title key="title">Profile – Talents Tube</title>
-      </Head>
-        <div >
-          <AccountProfile />
-        </div>
-        
-        {/* <AdBlockDetect>
-                <p>AdBlocks a été détecté. Pour que Talents Tube puisse fonctionner correctement, veuillez désactiver Ad Blocks</p>
-        </AdBlockDetect> */}
-    </Layout>
-  );
+    return (
+        <Layout>
+            <Head>
+                <title key="title">Profil – Talents Tube</title>
+                <meta key="robots" name="robots" content="noindex, nofollow"></meta>
+            </Head>
+            <div >
+
+                <AdBlockDetect   > 
+                  <div className={classes.information}>
+                    
+                      <p>AdBlocks a été détecté. Pour que Talents Tube puisse fonctionner
+                          correctement, veuillez désactiver Ad Blocks</p>
+                    
+                  </div>
+                </AdBlockDetect>
+            </div>
+            <div >
+                <AccountProfile/>
+            </div>
+
+        </Layout>
+    );
 }

nextjs/pages/test2.js

@@ -0,0 +1,164 @@
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import parse from 'autosuggest-highlight/parse';
+import throttle from 'lodash/throttle';
+
+function loadScript(src, position, id) {
+  if (!position) {
+    return;
+  }
+
+  const script = document.createElement('script');
+  script.setAttribute('async', '');
+  script.setAttribute('id', id);
+  script.src = src;
+  position.appendChild(script);
+}
+
+const autocompleteService = { current: null };
+
+const useStyles = makeStyles((theme) => ({
+  icon: {
+    color: theme.palette.text.secondary,
+    marginRight: theme.spacing(2),
+  },
+}));
+
+export default function GoogleMaps() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(null);
+  const [inputValue, setInputValue] = React.useState('');
+  const [options, setOptions] = React.useState([]);
+  const loaded = React.useRef(false);
+
+  if (typeof window !== 'undefined' && !loaded.current) {
+    if (!document.querySelector('#google-maps')) {
+      loadScript(
+        'https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places',
+        document.querySelector('head'),
+        'google-maps',
+      );
+    }
+
+    loaded.current = true;
+  }
+
+  const fetch = React.useMemo(
+    () =>
+      throttle((request, callback) => {
+        autocompleteService.current.getPlacePredictions(request, callback);
+        
+      }, 200),
+    [],
+  );
+
+  React.useEffect(() => {
+    let active = true;
+
+    if (!autocompleteService.current && window.google) {
+      autocompleteService.current = new window.google.maps.places.AutocompleteService();
+      // console.log('autocompleteService.current');
+      // console.log(autocompleteService.current);
+    }
+    if (!autocompleteService.current) {
+      return undefined;
+    }
+
+    if (inputValue === '') {
+      setOptions(value ? [value] : []);
+      return undefined;
+    }
+
+    fetch({ input: inputValue }, (results) => {
+      if (active) {
+        let newOptions = [];
+
+        if (value) {
+          newOptions = [value];
+        }
+
+        if (results) {
+          newOptions = [...newOptions, ...results];
+        }
+
+        setOptions(newOptions);
+      }
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [value, inputValue, fetch]);
+
+  return (
+    <Autocomplete
+      id="google-map-demo"
+      style={{ width: 300 }}
+      getOptionLabel={(option) => (typeof option === 'string' ? option : option.description)}
+      filterOptions={(x) => x}
+      options={options}
+      autoComplete
+      includeInputInList
+      filterSelectedOptions
+      value={value}
+      onChange={(event, newValue) => {
+        setOptions(newValue ? [newValue, ...options] : options);
+        setValue(newValue);
+        console.log("newValue");
+        // console.log(newValue);
+        console.log(newValue.description)
+         let geocoder = new google.maps.Geocoder();
+         let addresses = {};
+        geocoder.geocode({ 'address': newValue.description   }, function(results, status) {
+          results.map((index, value) => [
+            console.log(index.geometry.location.lat()+" "+index.geometry.location.lng())
+          ]);
+          
+          
+        });
+        
+      }}
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+        console.log('newInputValue');
+        console.log(newInputValue);
+      }}
+      renderInput={(params) => (
+        <TextField {...params} label="Tapez une adresse" variant="outlined" fullWidth />
+      )}
+      renderOption={(option) => {
+        // console.log('option');
+        // console.log(option);
+        const matches = option.structured_formatting.main_text_matched_substrings;
+        const parts = parse(
+          option.structured_formatting.main_text,
+          matches.map((match) => [match.offset, match.offset + match.length]),
+        );
+
+        return (
+          <Grid container alignItems="center">
+            <Grid item>
+              <LocationOnIcon className={classes.icon} />
+            </Grid>
+            <Grid item xs>
+              {parts.map((part, index) => (
+                <span key={index} style={{ fontWeight: part.highlight ? 700 : 400 }}>
+                  {part.text}
+                </span>
+              ))}
+
+              <Typography variant="body2" color="textSecondary">
+                {option.structured_formatting.secondary_text}
+              </Typography>
+            </Grid>
+          </Grid>
+        );
+      }}
+    />
+  );
+}

nextjs/pages/test3.js

@@ -0,0 +1,92 @@
+// server.autosuggest.js
+import React from 'react';
+import Autosuggest from 'react-autosuggest';
+// import './autosuggest.css';
+
+class ServerAutoSuggest extends React.Component {
+    constructor() {
+        super();
+
+        //Define state for value and suggestion collection
+        this.state = {
+            value: '',
+            suggestions: []
+        };
+    }
+
+    // Filter logic
+    getSuggestions = async (value) => {
+        const inputValue = value.trim().toLowerCase();
+        let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
+        let data = await response.json()
+        return data;
+    };
+
+    // Trigger suggestions
+    getSuggestionValue = suggestion => suggestion.Title;
+
+    // Render Each Option
+    renderSuggestion = suggestion => (
+        <span className="sugg-option">
+            <span className="icon-wrap"><img src={suggestion.Poster} /></span>
+            <span className="name">
+                {suggestion.Title}
+            </span>
+        </span>
+    );
+
+    // OnChange event handler
+    onChange = (event, { newValue }) => {
+        this.setState({
+            value: newValue
+        });
+    };
+
+    // Suggestion rerender when user types
+    onSuggestionsFetchRequested = ({ value }) => {
+        this.getSuggestions(value)
+            .then(data => {
+                if (data.Error) {
+                    this.setState({
+                        suggestions: []
+                    });
+                } else {
+                    this.setState({
+                        suggestions: data.Search
+                    });
+                }
+            })
+    };
+
+    // Triggered on clear
+    onSuggestionsClearRequested = () => {
+        this.setState({
+            suggestions: []
+        });
+    };
+
+    render() {
+        const { value, suggestions } = this.state;
+
+        // Option props
+        const inputProps = {
+            placeholder: 'Type movie name',
+            value,
+            onChange: this.onChange
+        };
+
+        // Adding AutoSuggest component
+        return (
+            <Autosuggest
+                suggestions={suggestions}
+                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                getSuggestionValue={this.getSuggestionValue}
+                renderSuggestion={this.renderSuggestion}
+                inputProps={inputProps}
+            />
+        );
+    }
+}
+
+export default ServerAutoSuggest;

nextjs/pages/test4.js

@@ -0,0 +1,433 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React, {Fragment} from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Layout from "../components/templates/Layout"
+import { Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Router from 'next/router'
+import { connect } from 'react-redux'
+import Loader from './../components/templates/loader'
+import { isEmpty } from "lodash"
+import NoResult from './../components/atoms/NoResult';
+import Head from 'next/head'
+import dynamic from 'next/dynamic'
+import OgHead from '../components/atoms/OgHead';
+import getConfig from 'next/config'
+
+import Autosuggest from 'react-autosuggest';
+
+// const VideoSlider = dynamic(() => import('../components/organisms/ShortVideoHooker'), {
+//   ssr: false
+// });
+const HorizontalScroller = dynamic(() => import('../components/organisms/HorizontalScroller'), {
+  ssr: false
+});
+
+const TileCompany = dynamic(() => import('../components/organisms/TileCompany'), {
+  ssr: false
+});
+
+const TileOffre = dynamic(() => import('../components/organisms/TileOffre'), {
+  ssr: false
+});
+
+const Footer = dynamic(() => import('../components/organisms/Footer'), {
+  ssr: false
+});
+const { publicRuntimeConfig } = getConfig();
+const styles = theme => ({
+  root: {
+    position: 'relative',
+    textAlign: 'center',
+    paddingTop: theme.spacing(20),
+    justifyContent: 'center',
+  },
+  primary: {
+    color: theme.palette.primary.main,
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  scrollerSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBottom: theme.spacing(6),
+    '&>div': {
+      paddingBottom: theme.spacing(3),
+    },
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(2, 10),
+      paddingBottom: theme.spacing(9),
+    },
+    [theme.breakpoints.up('lg')]: {
+      padding: theme.spacing(2, 30),
+      paddingBottom: theme.spacing(9),
+    },
+    [theme.breakpoints.up('xl')]: {
+      padding: theme.spacing(2, 55),
+    },
+  },
+  scrollerSectionOffer: {
+    backgroundColor: theme.palette.secondary.main,
+  },
+  scrollerSectionCompany: {
+    backgroundColor: theme.palette.background.grey,
+  },
+  card: {
+    margin: theme.spacing(1),
+    width: '96%',
+    height: '100%',
+    maxWidth: '640px',
+    maxheight: '360px',
+
+  },
+  HorizontalScroller: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(4),
+  },
+  paper: {
+    margin: theme.spacing(1),
+    width: '96%',
+    height: '100%',
+  },
+  media: {
+  },
+  svg: {
+    width: 100,
+    height: 100,
+  },
+  polygon: {
+    fill: theme.palette.common.white,
+    stroke: theme.palette.divider,
+    strokeWidth: 4,
+  },
+  img: {
+    maxWidth: '100%',
+
+  },
+  titleContainer: {
+    marginTop: theme.spacing(4),
+    marginBottom: theme.spacing(3),
+  },
+  beforeTitle: {
+    fontSize: '0.8em',
+    fontWeight: '300',
+    textAlign: 'center',
+    textTransform: 'uppercase',
+    color: theme.palette.secondary.text,
+  },
+  title: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    fontSize: '1.5em',
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  white: {
+    color: theme.palette.common.white
+  },
+  button: {
+    textTransform: 'inherit',
+    margin: theme.spacing(0, 8),
+    padding: theme.spacing(1.2, 2),
+    [theme.breakpoints.up('sm')]: {
+      margin: 'auto',
+    },
+  },
+  container: {
+    
+  },
+});
+
+class Index extends React.Component {
+  constructor() {
+    super();
+
+    //Define state for value and suggestion collection
+    this.state = {
+        value: '',
+        suggestions: [],
+        valueMetier: '',
+        suggestionsMetier: [],
+        valueMetierCompetence: '',
+        suggestionsMetierCompetence: [],
+    };
+  }
+
+  componentDidMount() {
+    localStorage.setItem("loginRedirect", "/")
+    
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      
+    })
+  }
+
+  // Filter logic
+  getSuggestions = async (value) => {
+    const inputValue = value.trim().toLowerCase();
+    let response = await fetch(publicRuntimeConfig.symphonyUrl+"/api/getCompetences?q=" + inputValue );
+    // let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
+    let data = await response.json()
+    return data;
+  };
+
+  // Trigger suggestions
+  getSuggestionValue = suggestion => suggestion.libelle;
+  // Render Each Option
+  renderSuggestion = suggestion => (
+    <span className={'suggestion-content ' + suggestion.twitter}>
+    <span className="name">
+      {
+        parts.map((part, index) => {
+          const className = part.highlight ? 'highlight' : null;
+
+          return (
+            <span className={className} key={index}>{part.text}</span>
+          );
+        })
+      }
+    </span>
+  </span>
+  );
+
+  // OnChange event handler
+  onChange = (event, { newValue }) => {
+      this.setState({
+          value: newValue
+      });
+  };
+
+  // Suggestion rerender when user types
+  onSuggestionsFetchRequested = ({ value }) => {
+      this.getSuggestions(value)
+          .then(data => {
+              if (data.Error) {
+                  this.setState({
+                      suggestions: []
+                  });
+              } else {
+                  this.setState({
+                      suggestions: data
+                  });
+              }
+          })
+  };
+
+  // Triggered on clear
+  onSuggestionsClearRequested = () => {
+      this.setState({
+          suggestions: []
+      });
+  };
+
+
+  // METIER
+  // Filter logic
+  getSuggestionsMetier = async (valueMetier) => {
+    const inputValue = valueMetier.trim().toLowerCase();
+    let response = await fetch(publicRuntimeConfig.symphonyUrl+"api/getAppelationsLibelle?q=" + inputValue );
+    // let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
+    let data = await response.json()
+    return data;
+  };
+
+  // Trigger suggestions
+  getSuggestionMetierValue = suggestion => suggestion.libelle;
+  // Render Each Option
+  renderSuggestionMetier = suggestion => (
+//     <div style="position: absolute; right: 0px; z-index: 1; will-change: transform; top: 0px; left: 0px; transform: translate3d(14px, 53px, 0px);" data-placement="bottom-start">
+//     <div class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded" style="opacity: 1; transform: none; transform-origin: 0px 0px 0px; transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
+//       <ul class="MuiList-root MuiList-padding" role="menu" tabindex="-1">
+//       <div class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" tabindex="0" role="menuitem" aria-disabled="false" id="downshift-0-item-0">
+//         <div>
+//           <strong style="font-weight: 500;">{suggestion.libelle} </strong>
+//           <span style="font-weight: 300;">, {suggestion.code}</span>
+//         </div>
+//         <span class="MuiTouchRipple-root"></span>
+//       </div>
+//       </ul>
+//     </div>
+// </div>
+<span className="suggestion-content">
+          
+          <span className="name">
+              {suggestion.libelle} 
+          </span>
+      </span>
+  );
+
+  // OnChange event handler
+  onChangeMetier = (event, { newValue }) => {
+      this.setState({
+          valueMetier: newValue
+      });
+  };
+
+  // Suggestion rerender when user types
+  onSuggestionsMetierFetchRequested = ({ value }) => {
+      this.getSuggestionsMetier(value)
+          .then(data => {
+              if (data.Error) {
+                  this.setState({
+                      suggestionsMetier: []
+                  });
+              } else {
+                  this.setState({
+                      suggestionsMetier: data
+                  });
+              }
+          })
+  };
+
+  // Triggered on clear
+  onSuggestionsMetierClearRequested = () => {
+      this.setState({
+          suggestionsMetier: []
+      });
+  };
+
+
+  // METIER COMPETENCE
+  // Filter logic
+  getSuggestionsMetierCompetence = async (valueMetierCompetence) => {
+    const inputValue = valueMetierCompetence.trim().toLowerCase();
+    let response = await fetch(publicRuntimeConfig.symphonyUrl+"api/getDetailAppelation?q=" + inputValue );
+    // let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
+    let data = await response.json()
+    return data.competencesDeBase;
+  };
+
+  // Trigger suggestions
+  getSuggestionMetierCompetenceValue = suggestion => suggestion.libelle;
+  // Render Each Option
+  renderSuggestionMetierCompetence = suggestion => (
+    
+      <span className="sugg-option">
+          
+          <span className="name">
+              {suggestion.libelle}
+          </span>
+      </span>
+  );
+
+  // OnChange event handler
+  onChangeMetierCompetence = (event, { newValue }) => {
+      this.setState({
+          valueMetierCompetence: newValue
+      });
+  };
+
+  // Suggestion rerender when user types
+  onSuggestionsMetierCompetenceFetchRequested = ({ value }) => {
+      this.getSuggestionsMetierCompetence(value)
+          .then(data => {
+              if (data.Error) {
+                  this.setState({
+                      suggestionsMetierCompetence: []
+                  });
+              } else {
+                  this.setState({
+                      suggestionsMetierCompetence: data
+                  });
+              }
+          })
+  };
+
+  // Triggered on clear
+  onSuggestionsMetierCompetenceClearRequested = () => {
+      this.setState({
+          suggestionsMetierCompetence: []
+      });
+  };
+
+
+
+  render() {
+    const { classes } = this.props;
+    const { value, suggestions, valueMetier, suggestionsMetier, valueMetierCompetence, suggestionsMetierCompetence } = this.state;
+    // Option props
+    const inputProps = {
+      placeholder: 'Saisir une compétence',
+      value,
+      onChange: this.onChange
+    };
+
+    const inputPropsMetier = {
+      placeholder: 'Saisir un métier',
+      value:valueMetier,
+      onChange: this.onChangeMetier
+    };
+
+    const inputPropsMetierCompetence = {
+      placeholder: 'Saisir un id appellation',
+      value:valueMetierCompetence,
+      onChange: this.onChangeMetierCompetence
+    };
+    const socialShareUrl = typeof window !== 'undefined' ? window.location
+            : publicRuntimeConfig.frontServerUrl ;
+    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
+    const imgUrl =  DefaultUrl
+    return (
+      <Layout>
+        <Head>
+          <title key="title">Recrutement vidéo : fonctionnement – Talents Tube</title>
+          <meta key="robots" name="robots" content="noindex, nofollow"></meta>
+        </Head>
+        <div className={classes.container}>
+
+          {/* <VideoSlider /> */}
+
+          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionOffer}>
+            
+
+            
+            <Autosuggest
+                suggestions={suggestions}
+                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                getSuggestionValue={this.getSuggestionValue}
+                renderSuggestion={this.renderSuggestion}
+                inputProps={inputProps}
+            />
+            <Autosuggest
+                suggestions={suggestionsMetier}
+                onSuggestionsFetchRequested={this.onSuggestionsMetierFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsMetierClearRequested}
+                getSuggestionValue={this.getSuggestionMetierValue}
+                renderSuggestion={this.renderSuggestionMetier}
+                inputProps={inputPropsMetier}
+            />
+
+            <Autosuggest
+                suggestions={suggestionsMetierCompetence}
+                onSuggestionsFetchRequested={this.onSuggestionsMetierCompetenceFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsMetierCompetenceClearRequested}
+                getSuggestionValue={this.getSuggestionMetierCompetenceValue}
+                renderSuggestion={this.renderSuggestionMetierCompetence}
+                inputProps={inputPropsMetierCompetence}
+            />
+          </section>
+
+          
+          <Footer />
+        </div>
+      </Layout>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    
+  };
+}
+
+Index.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default (connect(mapStateToProps, { })(withStyles(styles)(Index)));

nextjs/public/sitemap_local.xml

@@ -0,0 +1,354 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
+  <url>
+    <loc>https://www.talentstube.com/Offre/133-gestionnaire-de-copropriete-f-h</loc>
+    <lastmod>2021-01-29</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprises</loc>
+    <lastmod>2021-01-29</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offres</loc>
+    <lastmod>2021-01-29</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/134-assistant-administratif-et-commercial-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/135-commercial-b-to-c-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/130-assistant-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/131-poseur-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/132-comptable-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/129-commerciaux-b-to-b-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/128-techniciens-poseurs-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/122-chauffeurs-spl-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/115-technicien-ramoneur-fumiste-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/109-equipier-de-plateforme-polyvalent-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/111-couvreur-etancheur-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/107-operateur-soudeur-chaudronnier-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/103-agents-de-quai-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/102-preparateurs-de-commandes-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/46-conducteurs-routiers-h-f</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/32507-tpc-ouest</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/32355-hyphae</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/28481-onela</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/28172-pro-fermetures</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/26064-aer-recyclage</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/21247-lactalis-logistique-et-transports</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/19800-silvadec</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/19205-intermarche-logistique-alimentaire-international</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/18143-l-n-u-f-lisieux</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/17467-l-n-u-f-vallet</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16785-nachos</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16639-fast-point</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16247-sasp</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16015-la-veggisserie</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16007-bforpu-b</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/15797-sinay</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/15559-monibrand</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/13464-jpa</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/12531-grand-ouest-etiquettes</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/12480-fym-action</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/11592-youston</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/11413-les-vergers-de-chateaubourg</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/11345-telemaque</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/9138-vital-concept</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/8639-mma-questembert</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/7593-opticultures</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/7174-atlantem</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/7004-la-table-de-la-desirade</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/6898-le-ptit-club</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/6555-mazars</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/6363-square-habitat</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/5250-linpac-packaging-pontivy-groupe-klockner-pentaplast</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4211-progressis-ge</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4097-a-2-com</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4088-venetis</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4059-eiffage-construction-grand-ouest</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/3381-mairie-saint-hilaire-de-riez</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/2958-skiold-acemo</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/2527-groupe-mousset</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/2341-temporis</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1899-faurecia</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1691-groupe-syselec</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1467-groupe-rocher-operations</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1297-albea</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/438-bouyer-leroux</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/266-mgdis</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/157-medaviz</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/95-multiplast</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/52-talents-tube</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/46-actual</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/18-coriolis-composites</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/17-thibault-bergeron</loc>
+    <lastmod>2021-01-24</lastmod>
+    <priority>0.70</priority>
+  </url>
+</urlset>

nextjs/public/statique/css/autocomplete.css

@@ -0,0 +1,98 @@
+.react-autosuggest__container {
+  position: relative;
+}
+
+.react-autosuggest__input {
+  width: 240px;
+  height: 30px;
+  padding: 10px 20px;
+  font-family: Helvetica, sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+}
+
+.react-autosuggest__input:focus {
+  outline: none;
+}
+
+.react-autosuggest__container--open .react-autosuggest__input {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.react-autosuggest__suggestions-container {
+  display: none;
+}
+
+.react-autosuggest__container--open .react-autosuggest__suggestions-container {
+  display: block;
+  position: absolute;
+  top: 51px;
+  width: 280px;
+  border: 1px solid #aaa;
+  background-color: #fff;
+  font-family: Helvetica, sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  z-index: 2;
+}
+
+.react-autosuggest__suggestions-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.react-autosuggest__suggestion {
+  cursor: pointer;
+  padding: 10px 20px;
+}
+
+.react-autosuggest__suggestion:not(:first-child) {
+  border-top: 1px solid #ddd;
+}
+
+.react-autosuggest__suggestion--focused {
+  background-color: #0C7EAF;
+  color: #fff;
+}
+
+.suggestion-content {
+  display: flex;
+  align-items: center;
+  background-repeat: no-repeat;
+}
+
+.dancounsell {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/dancounsell/48.jpg);
+}
+
+.ladylexy {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/48.jpg);
+}
+
+.mtnmissy {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/mtnmissy/48.jpg);
+}
+
+.steveodom {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/steveodom/48.jpg);
+}
+
+.name {
+  margin-left: 8px;
+  line-height: 15px;
+}
+
+.highlight {
+  color: #ee0000;
+  font-weight: bold;
+}
+
+.react-autosuggest__suggestion--focused .highlight {
+  color: #120000;
+}

nextjs/public/statique/css/fonts.css

@@ -0,0 +1,36 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

nextjs/public/statique/css/owl.carousel.css

@@ -0,0 +1,153 @@
+/* 
+ * 	Core Owl Carousel CSS File
+ *	v1.3.3
+ */
+
+/* clearfix */
+.owl-carousel .owl-wrapper:after {
+	content: ".";
+	display: block;
+	clear: both;
+	visibility: hidden;
+	line-height: 0;
+	height: 0;
+}
+/* display none until init */
+.owl-carousel{
+	display: none;
+	position: relative;
+	width: 100%;
+	-ms-touch-action: pan-y;
+}
+.owl-carousel .owl-wrapper{
+	display: none;
+	position: relative;
+	-webkit-transform: translate3d(0px, 0px, 0px);
+}
+.owl-carousel .owl-wrapper-outer{
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+}
+.owl-carousel .owl-wrapper-outer.autoHeight{
+	-webkit-transition: height 500ms ease-in-out;
+	-moz-transition: height 500ms ease-in-out;
+	-ms-transition: height 500ms ease-in-out;
+	-o-transition: height 500ms ease-in-out;
+	transition: height 500ms ease-in-out;
+}
+	
+.owl-carousel .owl-item{
+	float: left;
+}
+.owl-controls .owl-page,
+.owl-controls .owl-buttons div{
+	cursor: pointer;
+}
+.owl-controls {
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* mouse grab icon */
+.grabbing { 
+    cursor:url(../img/grabbing.png) 8 8, move;
+}
+
+/* fix */
+.owl-carousel  .owl-wrapper,
+.owl-carousel  .owl-item{
+	-webkit-backface-visibility: hidden;
+	-moz-backface-visibility:    hidden;
+	-ms-backface-visibility:     hidden;
+  -webkit-transform: translate3d(0,0,0);
+  -moz-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+}
+
+/*
+* 	Owl Carousel Owl Demo Theme 
+*	v1.3.3
+*/
+
+.owl-theme .owl-controls{
+	margin-top: 10px;
+	text-align: center;
+}
+
+/* Styling Next and Prev buttons */
+
+.owl-theme .owl-controls .owl-buttons div{
+	color: #FFF;
+	display: inline-block;
+	zoom: 1;
+	*display: inline;/*IE7 life-saver */
+	margin: 5px;
+	padding: 3px 10px;
+	font-size: 12px;
+	-webkit-border-radius: 30px;
+	-moz-border-radius: 30px;
+	border-radius: 30px;
+	background: #869791;
+	filter: Alpha(Opacity=50);/*IE7 fix*/
+	opacity: 0.5;
+}
+/* Clickable class fix problem with hover on touch devices */
+/* Use it for non-touch hover action */
+.owl-theme .owl-controls.clickable .owl-buttons div:hover{
+	filter: Alpha(Opacity=100);/*IE7 fix*/
+	opacity: 1;
+	text-decoration: none;
+}
+
+/* Styling Pagination*/
+
+.owl-theme .owl-controls .owl-page{
+	display: inline-block;
+	zoom: 1;
+	*display: inline;/*IE7 life-saver */
+}
+.owl-theme .owl-controls .owl-page span{
+	display: block;
+	width: 12px;
+	height: 12px;
+	margin: 5px 7px;
+	filter: Alpha(Opacity=50);/*IE7 fix*/
+	opacity: 0.5;
+	-webkit-border-radius: 20px;
+	-moz-border-radius: 20px;
+	border-radius: 20px;
+	background: #FF5A5F;
+}
+
+.owl-theme .owl-controls .owl-page.active span,
+.owl-theme .owl-controls.clickable .owl-page:hover span{
+	filter: Alpha(Opacity=100);/*IE7 fix*/
+	opacity: 1;
+}
+
+/* If PaginationNumbers is true */
+
+.owl-theme .owl-controls .owl-page span.owl-numbers{
+	height: auto;
+	width: auto;
+	color: #FFF;
+	padding: 2px 10px;
+	font-size: 12px;
+	-webkit-border-radius: 30px;
+	-moz-border-radius: 30px;
+	border-radius: 30px;
+}
+
+.screenshot-slider .item{
+  margin: 3px;
+}
+.screenshot-slider .item img{
+  display: block;
+  width: 100%;
+  height: auto;
+}

nextjs/public/statique/images/Import-video-recruteur.svg

@@ -0,0 +1,31 @@
+<svg id="Import" xmlns="http://www.w3.org/2000/svg" width="73.762" height="56.425" viewBox="0 0 73.762 56.425">
+  <g id="Groupe_7895" data-name="Groupe 7895" transform="translate(9.499)">
+    <rect id="Rectangle_316" data-name="Rectangle 316" width="42.463" height="23.869" transform="translate(0 3.769) rotate(-5.093)"/>
+    <rect id="Rectangle_317" data-name="Rectangle 317" width="2.656" height="2.656" transform="translate(1.401 6.158) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_318" data-name="Rectangle 318" width="2.656" height="2.656" transform="translate(1.866 11.472) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_319" data-name="Rectangle 319" width="2.656" height="2.656" transform="translate(2.327 16.747) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_320" data-name="Rectangle 320" width="2.656" height="2.656" transform="translate(2.826 22.019) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_321" data-name="Rectangle 321" width="2.656" height="2.656" transform="translate(38.67 2.848) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_322" data-name="Rectangle 322" width="2.656" height="2.656" transform="translate(39.131 8.123) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_323" data-name="Rectangle 323" width="2.656" height="2.656" transform="translate(39.633 13.433) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_324" data-name="Rectangle 324" width="2.656" height="2.656" transform="translate(40.094 18.708) rotate(-5.093)" fill="#fff"/>
+    <path id="Tracé_278" data-name="Tracé 278" d="M229.4,202.9l6.275,3.311-5.582,4.35Z" transform="translate(-210.257 -192.71)" fill="#fff"/>
+  </g>
+  <path id="Tracé_279" data-name="Tracé 279" d="M217.367,282.859l-6.93,6.93-48.507-6.93L155,275.93l6.93-6.93h55.437Z" transform="translate(-155 -233.363)" fill="#d0e7fe"/>
+  <path id="Tracé_280" data-name="Tracé 280" d="M173,269v6.93h48.507l6.93-6.93Z" transform="translate(-166.07 -233.363)" fill="#b8dbfe"/>
+  <g id="Groupe_7897" data-name="Groupe 7897" transform="translate(28.442 19.099)">
+    <g id="Groupe_7896" data-name="Groupe 7896" transform="translate(3.551)">
+      <path id="Tracé_281" data-name="Tracé 281" d="M239.065,257.45a.488.488,0,0,1-.231-.039.939.939,0,0,1-.693-1.155,50.925,50.925,0,0,0,1.463-12.088,51.857,51.857,0,0,0-.346-6.006.969.969,0,0,1,1.925-.231,55.915,55.915,0,0,1,.346,6.237,52.807,52.807,0,0,1-1.5,12.55A.952.952,0,0,1,239.065,257.45Z" transform="translate(-238.104 -232.827)" fill="#25d89a"/>
+      <path id="Tracé_282" data-name="Tracé 282" d="M240.5,229.337a1.021,1.021,0,0,1-.962-.808c-.077-.462-.154-.885-.27-1.347a.944.944,0,0,1,1.848-.385c.077.462.192.924.269,1.386a.969.969,0,0,1-.77,1.116A.141.141,0,0,1,240.5,229.337Z" transform="translate(-238.804 -226.042)" fill="#25d89a"/>
+    </g>
+    <path id="Tracé_283" data-name="Tracé 283" d="M233.084,279.525l-4.042-6.237a.972.972,0,1,1,1.617-1.078l3,4.62,4.62-3a.972.972,0,0,1,1.078,1.617Z" transform="translate(-228.879 -254.171)" fill="#25d89a"/>
+  </g>
+  <path id="Tracé_284" data-name="Tracé 284" d="M316.393,300.545h-9.008a.385.385,0,1,1,0-.77h8.7l5.505-5.659a.381.381,0,1,1,.539.539Z" transform="translate(-248.483 -248.739)" fill="#25d89a"/>
+  <path id="Tracé_285" data-name="Tracé 285" d="M317.93,299.2h-6.545a.385.385,0,0,1,0-.77h6.237l4.2-4.312a.381.381,0,1,1,.539.539Z" transform="translate(-250.943 -248.739)" fill="#fa6362"/>
+  <g id="Groupe_7899" data-name="Groupe 7899" transform="translate(30.144 40.641)">
+    <g id="Groupe_7898" data-name="Groupe 7898" transform="translate(0 0)">
+      <path id="Tracé_286" data-name="Tracé 286" d="M233.3,282l2.5,3.811,5.89-3.811h-3.542l-.654.423a1.636,1.636,0,0,0,.077-.423H233.3Z" transform="translate(-233.3 -282)" fill="#21b77e"/>
+    </g>
+  </g>
+  <rect id="Rectangle_325" data-name="Rectangle 325" width="55.437" height="13.859" transform="translate(0 42.566)" fill="#fff"/>
+</svg>

nextjs/public/statique/images/comment-faire-une-video-reponse.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="61.875" height="67.637" viewBox="0 0 61.875 67.637">
+  <g id="capture" transform="translate(-3.819 12.637)">
+    <path id="Tracé_267" data-name="Tracé 267" d="M249.806,254.569H236.819A3.831,3.831,0,0,1,233,250.75v-9.931A3.831,3.831,0,0,1,236.819,237h12.986a3.831,3.831,0,0,1,3.819,3.819v9.931A3.831,3.831,0,0,1,249.806,254.569Z" transform="translate(-206.646 -214.465)" fill="#25d89a"/>
+    <path id="Tracé_268" data-name="Tracé 268" d="M235.875,281.75,229,288.625l-48.125-6.875L174,274.875,180.875,268h55Z" transform="translate(-170.181 -233.625)" fill="#d0e7fe"/>
+    <rect id="Rectangle_315" data-name="Rectangle 315" width="55" height="13.75" transform="translate(3.819 41.25)" fill="#fff"/>
+    <circle id="Ellipse_117" data-name="Ellipse 117" cx="6.875" cy="6.875" r="6.875" transform="translate(29.792 6.875)" fill="#25d89a"/>
+    <text id="_" data-name="?" transform="matrix(0.921, 0.391, -0.391, 0.921, 45.851, 8.063)" fill="#ff5a5f" font-size="11" font-family="Roboto-Black, Roboto" font-weight="800"><tspan x="-2.801" y="0">?</tspan></text>
+    <text id="_2" data-name="?" transform="translate(39.881 3.168) rotate(-20)" fill="#ff5a5f" font-size="16" font-family="Roboto-Black, Roboto" font-weight="800"><tspan x="-4.074" y="0">?</tspan></text>
+  </g>
+</svg>

nextjs/public/statique/images/inscription/candidature-video-envoyee.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <g id="Groupe_8166" data-name="Groupe 8166" transform="translate(-928 -199.541)">
+    <circle id="Ellipse_130" data-name="Ellipse 130" cx="50" cy="50" r="50" transform="translate(928 199.541)" fill="#1689fb"/>
+    <g id="XMLID_1840_" transform="translate(951.228 222.333)">
+      <g id="XMLID_1021_" transform="translate(0)">
+        <path id="XMLID_1068_" d="M51.417,65.633a1.045,1.045,0,0,0-.432-1.413,16.381,16.381,0,0,0-18.064,1.8l-1.688-1.688,2.756-2.756A1.045,1.045,0,0,0,32.512,60.1l-2.756,2.756-6.725-6.725a14.6,14.6,0,0,0,1.186-15.582,1.045,1.045,0,1,0-1.845.98,12.44,12.44,0,0,1-.836,13.107L17.1,50.208a2.563,2.563,0,0,0-4.219.93L.16,85.851a2.568,2.568,0,0,0,2.4,3.449,2.592,2.592,0,0,0,.893-.16L38.162,76.415a2.563,2.563,0,0,0,.93-4.219L34.407,67.51A14.289,14.289,0,0,1,50,66.065a1.045,1.045,0,0,0,1.413-.432ZM16.637,82.081,7.219,72.663l2.609-7.119L23.755,79.471Zm-5.1,1.871L5.348,77.767l1.079-2.942,8.048,8.048Zm-8.8,3.227a.474.474,0,0,1-.609-.608l2.434-6.641L9.37,84.744ZM37.743,74.111a.462.462,0,0,1-.3.343l-6.421,2.354-5.941-5.941A1.045,1.045,0,1,0,23.6,72.344L28.86,77.6l-2.942,1.079-15.3-15.3L11.7,60.44,16.956,65.7a1.044,1.044,0,1,0,1.477-1.477l-5.941-5.941,2.354-6.421a.462.462,0,0,1,.343-.3.5.5,0,0,1,.108-.012.454.454,0,0,1,.329.14L37.615,73.673a.462.462,0,0,1,.128.438Z" transform="translate(0 -35.82)" fill="#fff"/>
+        <path id="XMLID_1441_" d="M292.642,16.779a1.044,1.044,0,0,0,1.045-1.045,1.588,1.588,0,0,1,1.587-1.586,3.68,3.68,0,0,0,3.675-3.675,1.045,1.045,0,0,0-2.089,0,1.588,1.588,0,0,1-1.586,1.586,3.68,3.68,0,0,0-3.676,3.675A1.045,1.045,0,0,0,292.642,16.779Z" transform="translate(-261.139 -8.443)" fill="#fff"/>
+        <path id="XMLID_1462_" d="M381.363,109.1a3.8,3.8,0,0,0,3.8-3.8,1.709,1.709,0,0,1,1.707-1.707,1.045,1.045,0,0,0,0-2.089,3.8,3.8,0,0,0-3.8,3.8,1.709,1.709,0,0,1-1.707,1.707,1.045,1.045,0,1,0,0,2.089Z" transform="translate(-340.594 -90.91)" fill="#fff"/>
+        <path id="XMLID_1489_" d="M448,164.827a3.342,3.342,0,1,0,3.342-3.342A3.346,3.346,0,0,0,448,164.827Zm3.342-1.253a1.253,1.253,0,1,1-1.253,1.253A1.255,1.255,0,0,1,451.345,163.574Z" transform="translate(-401.207 -144.617)" fill="#fff"/>
+        <path id="XMLID_1502_" d="M286.452,112.539a3.342,3.342,0,1,0-3.342-3.342A3.346,3.346,0,0,0,286.452,112.539Zm0-4.6A1.253,1.253,0,1,1,285.2,109.2,1.255,1.255,0,0,1,286.452,107.943Z" transform="translate(-253.538 -94.797)" fill="#fff"/>
+        <path id="XMLID_1619_" d="M99.344,6.685A3.342,3.342,0,1,0,96,3.342,3.346,3.346,0,0,0,99.344,6.685Zm0-4.6a1.253,1.253,0,1,1-1.253,1.253A1.255,1.255,0,0,1,99.344,2.089Z" transform="translate(-85.974)" fill="#fff"/>
+        <path id="XMLID_1620_" d="M437.216,348.435a1.045,1.045,0,1,0-1.477,1.477l.985.985a1.045,1.045,0,1,0,1.477-1.477Z" transform="translate(-389.951 -311.766)" fill="#fff"/>
+        <path id="XMLID_1659_" d="M484.356,395.575a1.045,1.045,0,1,0-1.477,1.477l.985.985a1.045,1.045,0,0,0,1.477-1.477Z" transform="translate(-432.167 -353.982)" fill="#fff"/>
+        <path id="XMLID_1690_" d="M483.864,348.435l-.985.985a1.044,1.044,0,1,0,1.477,1.477l.985-.985a1.045,1.045,0,0,0-1.477-1.477Z" transform="translate(-432.167 -311.766)" fill="#fff"/>
+        <path id="XMLID_1712_" d="M436.724,395.575l-.985.985a1.045,1.045,0,0,0,1.477,1.477l.985-.985a1.045,1.045,0,1,0-1.477-1.477Z" transform="translate(-389.951 -353.982)" fill="#fff"/>
+        <path id="XMLID_1715_" d="M483.618,3.074a1.041,1.041,0,0,0,.739-.306l.985-.985A1.045,1.045,0,0,0,483.864.306l-.985.985a1.045,1.045,0,0,0,.739,1.783Z" transform="translate(-432.167 0)" fill="#fff"/>
+        <path id="XMLID_1747_" d="M436.477,50.213a1.041,1.041,0,0,0,.739-.306l.985-.985a1.045,1.045,0,1,0-1.477-1.477l-.985.985a1.045,1.045,0,0,0,.739,1.783Z" transform="translate(-389.95 -42.215)" fill="#fff"/>
+        <path id="XMLID_1750_" d="M484.356,47.446a1.045,1.045,0,1,0-1.477,1.477l.985.985a1.045,1.045,0,0,0,1.477-1.477Z" transform="translate(-432.167 -42.216)" fill="#fff"/>
+        <path id="XMLID_1751_" d="M436.723,2.768A1.045,1.045,0,0,0,438.2,1.291l-.985-.985a1.045,1.045,0,0,0-1.477,1.477Z" transform="translate(-389.95 0)" fill="#fff"/>
+        <path id="XMLID_1755_" d="M192.266,300.78a1.045,1.045,0,1,0,.738.306A1.052,1.052,0,0,0,192.266,300.78Z" transform="translate(-171.247 -269.363)" fill="#fff"/>
+        <path id="XMLID_1756_" d="M338,193.993l-.757.757a1.045,1.045,0,1,0,1.477,1.477l.757-.757A1.045,1.045,0,0,0,338,193.993Z" transform="translate(-301.745 -173.456)" fill="#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>

nextjs/public/statique/images/inscription/candidature-video-envoyee.svg_.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <g id="Groupe_8166" data-name="Groupe 8166" transform="translate(-928 -199.541)">
+    <circle id="Ellipse_130" data-name="Ellipse 130" cx="50" cy="50" r="50" transform="translate(928 199.541)" fill="#1689fb"/>
+    <g id="XMLID_1840_" transform="translate(951.228 222.333)">
+      <g id="XMLID_1021_" transform="translate(0)">
+        <path id="XMLID_1068_" d="M51.417,65.633a1.045,1.045,0,0,0-.432-1.413,16.381,16.381,0,0,0-18.064,1.8l-1.688-1.688,2.756-2.756A1.045,1.045,0,0,0,32.512,60.1l-2.756,2.756-6.725-6.725a14.6,14.6,0,0,0,1.186-15.582,1.045,1.045,0,1,0-1.845.98,12.44,12.44,0,0,1-.836,13.107L17.1,50.208a2.563,2.563,0,0,0-4.219.93L.16,85.851a2.568,2.568,0,0,0,2.4,3.449,2.592,2.592,0,0,0,.893-.16L38.162,76.415a2.563,2.563,0,0,0,.93-4.219L34.407,67.51A14.289,14.289,0,0,1,50,66.065a1.045,1.045,0,0,0,1.413-.432ZM16.637,82.081,7.219,72.663l2.609-7.119L23.755,79.471Zm-5.1,1.871L5.348,77.767l1.079-2.942,8.048,8.048Zm-8.8,3.227a.474.474,0,0,1-.609-.608l2.434-6.641L9.37,84.744ZM37.743,74.111a.462.462,0,0,1-.3.343l-6.421,2.354-5.941-5.941A1.045,1.045,0,1,0,23.6,72.344L28.86,77.6l-2.942,1.079-15.3-15.3L11.7,60.44,16.956,65.7a1.044,1.044,0,1,0,1.477-1.477l-5.941-5.941,2.354-6.421a.462.462,0,0,1,.343-.3.5.5,0,0,1,.108-.012.454.454,0,0,1,.329.14L37.615,73.673a.462.462,0,0,1,.128.438Z" transform="translate(0 -35.82)" fill="#fff"/>
+        <path id="XMLID_1441_" d="M292.642,16.779a1.044,1.044,0,0,0,1.045-1.045,1.588,1.588,0,0,1,1.587-1.586,3.68,3.68,0,0,0,3.675-3.675,1.045,1.045,0,0,0-2.089,0,1.588,1.588,0,0,1-1.586,1.586,3.68,3.68,0,0,0-3.676,3.675A1.045,1.045,0,0,0,292.642,16.779Z" transform="translate(-261.139 -8.443)" fill="#fff"/>
+        <path id="XMLID_1462_" d="M381.363,109.1a3.8,3.8,0,0,0,3.8-3.8,1.709,1.709,0,0,1,1.707-1.707,1.045,1.045,0,0,0,0-2.089,3.8,3.8,0,0,0-3.8,3.8,1.709,1.709,0,0,1-1.707,1.707,1.045,1.045,0,1,0,0,2.089Z" transform="translate(-340.594 -90.91)" fill="#fff"/>
+        <path id="XMLID_1489_" d="M448,164.827a3.342,3.342,0,1,0,3.342-3.342A3.346,3.346,0,0,0,448,164.827Zm3.342-1.253a1.253,1.253,0,1,1-1.253,1.253A1.255,1.255,0,0,1,451.345,163.574Z" transform="translate(-401.207 -144.617)" fill="#fff"/>
+        <path id="XMLID_1502_" d="M286.452,112.539a3.342,3.342,0,1,0-3.342-3.342A3.346,3.346,0,0,0,286.452,112.539Zm0-4.6A1.253,1.253,0,1,1,285.2,109.2,1.255,1.255,0,0,1,286.452,107.943Z" transform="translate(-253.538 -94.797)" fill="#fff"/>
+        <path id="XMLID_1619_" d="M99.344,6.685A3.342,3.342,0,1,0,96,3.342,3.346,3.346,0,0,0,99.344,6.685Zm0-4.6a1.253,1.253,0,1,1-1.253,1.253A1.255,1.255,0,0,1,99.344,2.089Z" transform="translate(-85.974)" fill="#fff"/>
+        <path id="XMLID_1620_" d="M437.216,348.435a1.045,1.045,0,1,0-1.477,1.477l.985.985a1.045,1.045,0,1,0,1.477-1.477Z" transform="translate(-389.951 -311.766)" fill="#fff"/>
+        <path id="XMLID_1659_" d="M484.356,395.575a1.045,1.045,0,1,0-1.477,1.477l.985.985a1.045,1.045,0,0,0,1.477-1.477Z" transform="translate(-432.167 -353.982)" fill="#fff"/>
+        <path id="XMLID_1690_" d="M483.864,348.435l-.985.985a1.044,1.044,0,1,0,1.477,1.477l.985-.985a1.045,1.045,0,0,0-1.477-1.477Z" transform="translate(-432.167 -311.766)" fill="#fff"/>
+        <path id="XMLID_1712_" d="M436.724,395.575l-.985.985a1.045,1.045,0,0,0,1.477,1.477l.985-.985a1.045,1.045,0,1,0-1.477-1.477Z" transform="translate(-389.951 -353.982)" fill="#fff"/>
+        <path id="XMLID_1715_" d="M483.618,3.074a1.041,1.041,0,0,0,.739-.306l.985-.985A1.045,1.045,0,0,0,483.864.306l-.985.985a1.045,1.045,0,0,0,.739,1.783Z" transform="translate(-432.167 0)" fill="#fff"/>
+        <path id="XMLID_1747_" d="M436.477,50.213a1.041,1.041,0,0,0,.739-.306l.985-.985a1.045,1.045,0,1,0-1.477-1.477l-.985.985a1.045,1.045,0,0,0,.739,1.783Z" transform="translate(-389.95 -42.215)" fill="#fff"/>
+        <path id="XMLID_1750_" d="M484.356,47.446a1.045,1.045,0,1,0-1.477,1.477l.985.985a1.045,1.045,0,0,0,1.477-1.477Z" transform="translate(-432.167 -42.216)" fill="#fff"/>
+        <path id="XMLID_1751_" d="M436.723,2.768A1.045,1.045,0,0,0,438.2,1.291l-.985-.985a1.045,1.045,0,0,0-1.477,1.477Z" transform="translate(-389.95 0)" fill="#fff"/>
+        <path id="XMLID_1755_" d="M192.266,300.78a1.045,1.045,0,1,0,.738.306A1.052,1.052,0,0,0,192.266,300.78Z" transform="translate(-171.247 -269.363)" fill="#fff"/>
+        <path id="XMLID_1756_" d="M338,193.993l-.757.757a1.045,1.045,0,1,0,1.477,1.477l.757-.757A1.045,1.045,0,0,0,338,193.993Z" transform="translate(-301.745 -173.456)" fill="#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>