Updates InterestModal content and buttons

octo-webf · Oct 10, 2017 · e121ad7 · e121ad7
1 parent 33ba4dd
commit e121ad7
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 48 deletions.
diff --git a/client/src/components/InterestModal.vue b/client/src/components/InterestModal.vue
@@ -1,31 +1,19 @@
 <template>
   <div class="interest-modal-wrapper">
-    <modal class="interest-modal" name="interest-modal" @before-open="beforeOpen" :height="404">
+    <modal class="interest-modal" name="interest-modal" @before-open="beforeOpen" height="auto" :pivotY="0.35">
 
       <!-- modal header-->
       <div class="interest-modal__header">
-        <h2 class="interest-modal__title">Vraiment intéressé·e&nbsp;?</h2>
+        <h2 class="interest-modal__title">Intéressé·e&nbsp; par <strong>{{ mission }}</strong> pour <strong>{{ customer }}</strong>&nbsp;?</h2>
+        <button class="interest-modal__action interest-modal__action--cancel" @click="cancelInterest"><icon name="times" scale="1.5"></icon></button>
       </div>
 
       <!-- modal body -->
       <div class="interest-modal__body">
         <div class="interest-modal__text" id="interest-content">
           <p class="interest-modal__error" v-if="error" aria-live="polite">{{error}}</p>
 
-          <p>
-            Si tu cliques sur le bouton Envoyer, un mail sera envoyé à l'équipe Job Board (uniquement !) avec les informations utiles pour aider au staffing.
-          </p>
-          <p>
-            Afin d'échanger au sujet de ton intérêt pour le job <strong>{{ jobTitle }}</strong>
-            au sein de la mission : <strong>{{ mission }}</strong>,
-            l'équipe du Job Board te mettra en relation avec&nbsp;:</p>
-          <ul>
-            <li><strong>{{ businessContactNickname }}</strong> : Dir. mission </li>
-            <li><strong>{{ missionDirectorNickname }}</strong> : Contact biz</li>
-          </ul>
-          <p>Pense aussi à vérifier ta disponibilité au
-            <strong>{{ staffingNeededSince }}</strong>
-            avec ta·ton directeur·trice de mission actuel·le&nbsp;;-)</p>
+          <p>En tant que <strong>{{ jobTitle }}</strong>, es-tu disponible à partir du <strong>{{ staffingNeededSince }}</strong>&nbsp;?</p>
         </div>
       </div>
 
@@ -34,16 +22,10 @@
         <div class="interest-modal__actions">
           <!--todo prevent twice-->
           <button class="interest-modal__action interest-modal__action--send"
-                  @click="submitInterest">Envoyer
+                  @click="submitInterest">Je suis disponible
           </button>
-          <a :href="octopodUrl" target="_blank">
-            <button class="interest-modal__action interest-modal__action--octopod">
-              Fiche Octopod
-            </button>
-          </a>
-
-          <button class="interest-modal__action interest-modal__action--cancel" @click="cancelInterest">Annuler</button>
         </div>
+        <p class="interest-modal__mentions interest-modal__text">L'équipe Job Board te mettra en relation avec <strong>{{ missionDirectorNickname }}</strong> , dir. mission et <strong>{{ businessContactNickname }}</strong>, contact biz.</p>
       </div>
 
     </modal>
@@ -102,6 +84,11 @@
         const missionName = this.interestingJob.project.name;
         return missionName.substring(0, 49);
       },
+
+      customer() {
+        if (!this.interestingJob) return '';
+        return (this.interestingJob.project.customer.name) ? this.interestingJob.project.customer.name : 'N/A';
+      },
     },
 
     methods: {
@@ -173,23 +160,21 @@
 <style scoped>
   .interest-modal__header {
     background-color: #eef0f4;
-    padding: 10px 20px;
+    padding: 15px 40px 10px 20px;
     justify-content: center;
     display: flex;
+    position: relative;
   }
 
   .interest-modal__body {
     padding: 15px 20px;
     background: #fff;
-    height: 240px;
   }
 
   .interest-modal__title {
     margin: 0;
     font-size: 24px;
     color: #333333;
-    height: 40px;
-    line-height: 40px;
   }
 
   .interest-modal__error {
@@ -206,20 +191,22 @@
     overflow: auto;
     font-size: 16px;
     box-sizing: border-box;
-    padding: 5px;
   }
 
   .interest-modal__footer {
-    padding: 20px;
+    padding: 0 20px 20px;
     background: #fff;
-    text-align: right;
+  }
+
+  .interest-modal__actions {
+    text-align: center;
   }
 
   .interest-modal__action {
     display: inline-block;
     padding: 4px 15px;
-    font-size: 14px;
-    line-height: 16px;
+    font-size: 16px;
+    line-height: 18px;
     color: #fff;
     text-align: center;
     vertical-align: middle;
@@ -238,27 +225,28 @@
     border: 3px #000000 solid;
   }
 
-  .interest-modal__action--octopod {
-    background: #fff;
-    border: 1px solid #d8dde6;
-    color: #333333;
-  }
-
-  .interest-modal__action--octopod:hover {
-    box-shadow: 0 0 3px 0 #d8dde6;
-  }
-
   .interest-modal__action:hover {
     opacity: .85;
   }
 
   .interest-modal__action--cancel {
-    background: #fff;
-    border: 1px solid #d8dde6;
-    color: #333333;
+    height: auto;
+    padding: 0.5em;
+    background: transparent;
+    border: none;
+    color: #999;
+    position: absolute;
+    right: 0.2em;
+    top: 0.2em;
   }
 
-  .interest-modal__action--cancel:hover {
-    box-shadow: 0 0 3px 0 #d8dde6;
+  .interest-modal__action--cancel:focus {
+    border: none;
+  }
+
+  .interest-modal__mentions {
+    font-size: 14px;
+    font-style: italic;
+    text-align: center;
   }
 </style>
diff --git a/client/test/unit/specs/components/InterestModal.spec.js b/client/test/unit/specs/components/InterestModal.spec.js
@@ -240,6 +240,17 @@ describe('Unit | Component | InterestModal.vue', () => {
         // Then
         expect(missionName).to.equal('SCLOU - Cloud computing : enjeux, architecture et');
       });
+
+
+      it.only('should get customerName', () => {
+        // Given
+
+        // When
+        const customerName = component.customer;
+
+        // Then
+        expect(customerName).to.equal('La Poste - Courrier');
+      });
     });
 
     describe('computed property #staffingNeededSince', () => {