Add VideoVimeo component and Fix button postuler

nextjs/components/organisms/OffreDetail.js

@@ -18,7 +18,7 @@ import Ar from "lodash/array";
 import Hidden from '@material-ui/core/Hidden';
 import Link from 'next/link'
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
-
+import VideoVimeo from './../atoms/videoVimeo'
 
 const styles = theme => ({
     primary: {
@@ -135,35 +135,6 @@ const styles = theme => ({
     MuiAvatarImg: {
         objectFit: 'contain',
     },
-    video: {
-        display: 'flex',
-        flexDirection: 'column',
-        position: 'relative',
-        paddingBottom: '55%', /* 16:9 */
-        paddingTop: '25px',
-        '& iframe': {
-            position: 'absolute',
-            top: 0,
-            left: 'calc(50% - 50vw)',
-            width: '100vw',
-            height: '100%',
-        },
-        [theme.breakpoints.up('md')]: {
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'relative',
-            paddingBottom: '35%', /* 16:9 */
-            paddingTop: '25px',
-            '& iframe': {
-                position: 'absolute',
-                top: 0,
-                left: 'calc(50% - 32vw)',
-                width: '64vw',
-                height: '100%',
-            },
-        },
-
-    },
     title: {
         fontSize: '1em',
         fontWeight: '500',
@@ -259,6 +230,10 @@ const styles = theme => ({
         padding: theme.spacing(1),
         margin: theme.spacing(1, 0),
         fontSize: '1em',
+        [theme.breakpoints.up('md')]: {
+            marginRight: 'auto',
+        },
+
     }
 })
 
@@ -280,13 +255,15 @@ function OffreDetail(props) {
                     <Hidden smDown>
                         <section className={classes.headerContainerDesktop}>
                             <div className={classes.offerInfoContainer}>
-                                <div className={classes.logoContainer}>
-                                    <Link href={`/Entreprise/${offre.company.id}`} prefetch >
-                                        <a>
+                                <Link href={`/Entreprise/${offre.company.id}`} prefetch >
+                                    <a>
+                                        <div className={classes.logoContainer}>
+
                                             <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoUrl} />
-                                        </a>
-                                    </Link>
-                                </div>
+
+                                        </div>
+                                    </a>
+                                </Link>
                                 <div className={classes.infoContainer}>
                                     <Typography gutterBottom className={classes.offreTitle}>
                                         {offre.title}
@@ -304,18 +281,18 @@ function OffreDetail(props) {
                                     {/* ville */}
                                 </div>
                             </div>
-                            <Button
-                                cyp="ButtonApply"
-                                variant="contained"
-                                className={classes.button}
-                                onClick={() => Router.push(`/Reponse/${offre.id}`)}
-                            >Postuler</Button>
+                            {!!!offre.is_promoted && (
+                                <Button
+                                    cyp="ButtonApply"
+                                    variant="contained"
+                                    className={classes.button}
+                                    onClick={() => Router.push(`/Reponse/${offre.id}`)}
+                                >Postuler</Button>
+                            )}
                         </section>
                     </Hidden>
 
-                    <section className={classes.video}>
-                        <iframe allow="autoplay" src={"https://player.vimeo.com/video/" + Ar.last(_.split(offre.video.cdn_url, '/'))} frameborder="0" title="{video_title}" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-                    </section>
+                    <VideoVimeo videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} />
 
                     <div className={classes.container}>
                         <Hidden mdUp>