From 1daa6ce7e2be79ef29fe190c4f91e10e1a1b35a1 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 2 Apr 2020 22:22:24 +0200
Subject: [PATCH] WIP #3445 @10

---
 wp-content/mu-plugins/cube/src/Forms/Base.php |  57 ++++++--
 .../cube/src/Forms/Consultation.php           |  29 +++-
 .../images/consultation-body-outline.svg      |   6 +
 .../resources/assets/images/imagery-cd.svg    |  12 ++
 .../resources/assets/images/imagery-phone.svg |  24 ++++
 .../resources/assets/images/imagery-post.svg  |  19 +++
 .../resources/assets/images/imagery-web.svg   |  18 +++
 .../resources/assets/scripts/consultation.js  |  29 ++++
 .../CCV/resources/assets/styles/app.styl      |   2 +-
 .../assets/styles/common/spacing.styl         |   2 +
 .../assets/styles/components/forms.styl       |  18 +--
 .../assets/styles/pages/consultation.styl     |  11 ++
 .../views/forms/consultation.blade.php        | 132 +++++++++++++++---
 wp-content/themes/CCV/webpack.mix.js          |   1 +
 14 files changed, 317 insertions(+), 43 deletions(-)
 create mode 100644 wp-content/themes/CCV/resources/assets/images/consultation-body-outline.svg
 create mode 100644 wp-content/themes/CCV/resources/assets/images/imagery-cd.svg
 create mode 100644 wp-content/themes/CCV/resources/assets/images/imagery-phone.svg
 create mode 100644 wp-content/themes/CCV/resources/assets/images/imagery-post.svg
 create mode 100644 wp-content/themes/CCV/resources/assets/images/imagery-web.svg
 create mode 100644 wp-content/themes/CCV/resources/assets/scripts/consultation.js
 create mode 100644 wp-content/themes/CCV/resources/assets/styles/pages/consultation.styl

diff --git a/wp-content/mu-plugins/cube/src/Forms/Base.php b/wp-content/mu-plugins/cube/src/Forms/Base.php
index f01488c..e1aebef 100644
--- a/wp-content/mu-plugins/cube/src/Forms/Base.php
+++ b/wp-content/mu-plugins/cube/src/Forms/Base.php
@@ -16,6 +16,19 @@ class Base
     const TEXTAREA = 'textarea';
 
 
+    public function __construct() {
+        $this->register_scripts();
+        $this->register_fields();
+    }
+
+    public function register_scripts() {
+
+    }
+
+    public function register_fields() {
+
+    }
+
     /**
      * Output field HTML
      * @param $name
@@ -40,10 +53,7 @@ class Base
         $settings = array_merge($default_settings, $settings);
 
         $res = '';
-
-        if ($settings['show_title']) {
-            $res .= '<div class="form-field-title '. $settings['title_class'] .'">'. $field['title'] .'</div>';
-        }
+        $res .= $this->title($name, $settings);
 
         // Special input styling for checkbox / radio fields
         if (in_array($field['type'], [self::BINARY, self::CHECKBOX, self::RADIO])) {
@@ -63,6 +73,24 @@ class Base
         return '<div class="form-field '. $settings['class'] .'">'. $res .'</div>';
     }
 
+    /**
+     * Generate field title
+     * @param $name
+     * @param $settings
+     * @return bool|string
+     */
+    public function title($name, $settings = []) {
+
+        if (!isset($settings['show_title']) || !$settings['show_title']) return '';
+
+        $title_class = $settings['title_class'] ?? '';
+
+        $field = $this->getField($name);
+        if (!$field) return false;
+
+        return '<div class="form-field-title '. $title_class .'">'. $field['title'] .'</div>';
+    }
+
     /**
      * Generate a radio or checkbox input
      * @param $name
@@ -82,7 +110,7 @@ class Base
             $res .= '<label title="'. $option .'">';
             $res .= '<input type="'. $type .'" name="'. $input_name .'" value="'. $option .'">';
 
-            if ($settings['show_labels']) {
+            if (isset($settings['show_labels']) && $settings['show_labels']) {
                 $res .= '<span class="form-label">'. $option .'</span>';
             }
 
@@ -99,7 +127,7 @@ class Base
      * @param $settings
      * @return string
      */
-    public function radio($name, $settings) {
+    public function radio($name, $settings = []) {
         return $this->radio_or_checkbox($name, $settings, 'radio');
     }
 
@@ -109,7 +137,7 @@ class Base
      * @param $settings
      * @return string
      */
-    public function checkbox($name, $settings) {
+    public function checkbox($name, $settings = []) {
         return $this->radio_or_checkbox($name, $settings, 'checkbox');
     }
 
@@ -119,7 +147,7 @@ class Base
      * @param $settings
      * @return string
      */
-    public function date($name, $settings) {
+    public function date($name, $settings = []) {
         return '<input type="date" placeholder="'. __('JJ/MM/AAAA') .'" name="'. $name .'">';
     }
 
@@ -129,7 +157,7 @@ class Base
      * @param $settings
      * @return string
      */
-    public function binary($name, $settings) {
+    public function binary($name, $settings = []) {
 
         $settings['options'] = [
             __('Oui', 'ccv'),
@@ -145,7 +173,7 @@ class Base
      * @param $settings
      * @return string
      */
-    public function textarea($name, $settings) {
+    public function textarea($name, $settings = []) {
         return '<textarea name="'. $name .'"></textarea>';
     }
 
@@ -155,7 +183,7 @@ class Base
      * @param $settings
      * @return string
      */
-    public function text($name, $settings) {
+    public function text($name, $settings = []) {
         return '<input type="text" name="'. $name .'" placeholder="'. $settings['placeholder'] .'">';
     }
 
@@ -166,10 +194,15 @@ class Base
      * @param $settings
      * @return string
      */
-    public function select($name, $settings) {
+    public function select($name, $settings = []) {
 
         $options = isset($settings['options']) ? $settings['options'] : $this->fields[$name]['options'];
 
+        // Placeholder can be used to set first element if it is passed as an array
+        if (is_array($settings['placeholder'])) {
+            $options = $settings['placeholder'] + $options; // Prepend to options
+        }
+
         $res  = '<select name="'. $name .'">';
         foreach ($options as $value => $label) {
             $res .= '<option value="'. $value .'">'. $label .'</option>';
diff --git a/wp-content/mu-plugins/cube/src/Forms/Consultation.php b/wp-content/mu-plugins/cube/src/Forms/Consultation.php
index f2cfcaf..32d643c 100644
--- a/wp-content/mu-plugins/cube/src/Forms/Consultation.php
+++ b/wp-content/mu-plugins/cube/src/Forms/Consultation.php
@@ -2,10 +2,27 @@
 
 namespace Cube\Forms;
 
+use function Roots\asset;
 
 class Consultation extends Base
 {
-    function __construct() {
+    public function register_scripts() {
+
+        parent::register_scripts();
+
+        wp_enqueue_script(
+            'ccv-consultation',
+            asset('scripts/consultation.js'),
+            ['jquery'], // Dependencies
+            null, // Version
+            true // In footer?
+        );
+    }
+
+
+    function register_fields() {
+
+        parent::register_fields();
 
         //== SYMPTOMS
         $this->addField('main-problem', __('Problème principal', 'ccv'), self::RADIO,
@@ -58,7 +75,9 @@ class Consultation extends Base
         $this->addField('surgeries', __('Indiquez ici vos précédentes chirurgies de la colonne et leurs dates (le cas échéant)', 'ccv'), self::TEXTAREA);
 
         //=== IMAGERY
-        $this->addField('imagery', __('Imagerie', 'ccv'), null); // This is a special case and will be output manually so only using this for the e-mail label
+        $this->addField('imagery-type', __('Imagerie', 'ccv'), null); // This is a special case and will be output manually so only using this for the e-mail label
+        $this->addField('imagery-online', __('Images en ligne', 'ccv'), self::TEXTAREA); // Again, a manually handled field
+        $this->addField('imagery-posted', __('Images envoyé par courrier', 'ccv'), self::CHECKBOX);
 
         //=== PERSONAL INFORMATION
         $this->addField('last-name', _x('Nom', 'Nom de famille', 'ccv'), self::TEXT);
@@ -73,8 +92,10 @@ class Consultation extends Base
         $this->addField('message', __('Avez vous un message (ou une demande) spécifique à nous formuler ?', 'ccv'), self::TEXTAREA);
         $this->addField('surgeon', __('Chirurgien spécifique'), self::SELECT,
             [
-                '' => __('Sélectionner'),
-                // TODO: figure out where this list should come from and what action is needed when a specific surgeon is selected
+                'Dr Guilhaume GENESTE',
+                'Dr Grégory EDGARD-ROSA',
+                'Dr Martin GRAU ORTIZ',
+                'Dr Caroline HIRSH',
             ]);
     }
 }
diff --git a/wp-content/themes/CCV/resources/assets/images/consultation-body-outline.svg b/wp-content/themes/CCV/resources/assets/images/consultation-body-outline.svg
new file mode 100644
index 0000000..efdff70
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/images/consultation-body-outline.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="172.776" height="278.551" viewBox="0 0 172.776 278.551">
+  <g id="Group_517" data-name="Group 517" transform="translate(-1122.012 79.635)">
+    <ellipse id="Ellipse_100" data-name="Ellipse 100" cx="22.227" cy="31.379" rx="22.227" ry="31.379" transform="translate(1185.356 -79.635)" fill="#dfdfdf"/>
+    <path id="Path_604" data-name="Path 604" d="M1234.75-66.631c1.336.541,32.795,13.612,45.533,45.617,11.085,27.88,14.167,43.822,14.3,44.489,1.347,7.139-4.031,13.89-12.027,15.113a16.8,16.8,0,0,1-2.494.189c-7.025,0-13.244-4.52-14.48-10.9-.029-.142-2.9-14.656-13.026-40.111a52.853,52.853,0,0,0-12.12-17.927v47L1252.907,123.3c.847,7.207-5.025,13.664-13.1,14.415a15.151,15.151,0,0,1-1.542.073c-7.437,0-13.826-5.013-14.615-11.759L1211.892,25.665s-.288-4.289-3.5-4.289-3.489,4.289-3.489,4.289l-11.755,100.369c-.789,6.745-7.178,11.759-14.615,11.759a15.357,15.357,0,0,1-1.548-.073c-8.078-.751-13.944-7.207-13.1-14.415l12.473-106.469v-47a52.851,52.851,0,0,0-12.126,17.927c-10.12,25.454-13,39.969-13.021,40.111-1.235,6.383-7.455,10.9-14.479,10.9a16.763,16.763,0,0,1-2.5-.189c-8-1.223-13.379-7.974-12.026-15.113.124-.667,3.213-16.609,14.3-44.489,12.737-32.006,44.2-45.077,45.533-45.617.783-.315,13.039-.478,25.535-.488C1220.624-67.124,1233.933-66.961,1234.75-66.631Z" transform="translate(0 61.124)" fill="#dfdfdf"/>
+  </g>
+</svg>
diff --git a/wp-content/themes/CCV/resources/assets/images/imagery-cd.svg b/wp-content/themes/CCV/resources/assets/images/imagery-cd.svg
new file mode 100644
index 0000000..d00f5dd
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/images/imagery-cd.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <g transform="translate(-192 -3247)">
+    <circle cx="60" cy="60" r="60" transform="translate(192 3247)" fill="#ff078b"/>
+    <g transform="translate(-1138.299 2283.28)">
+      <circle cx="5.34" cy="5.34" r="5.34" transform="translate(1382.8 1016.221)" stroke-width="2" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+      <path d="M1417.089,1031.97v4.839h-18.525a2.418,2.418,0,0,0-2.418,2.418v12.529a2.419,2.419,0,0,1-2.418,2.419h0a2.419,2.419,0,0,1-2.419-2.419v-19.248a2.418,2.418,0,0,1,2.419-2.418h9.239l1.985,1.88Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path d="M1405.4,1036.809h12.94a2.419,2.419,0,0,1,2.418,2.418v10.111a4.837,4.837,0,0,1-4.836,4.837h-16.144" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path d="M1415.267,1027.824a27.841,27.841,0,1,0-28.1,21.561" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path d="M1388.139,999.8a21.757,21.757,0,0,0-21.757,21.757" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    </g>
+  </g>
+</svg>
diff --git a/wp-content/themes/CCV/resources/assets/images/imagery-phone.svg b/wp-content/themes/CCV/resources/assets/images/imagery-phone.svg
new file mode 100644
index 0000000..da992bb
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/images/imagery-phone.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <g transform="translate(-192 -3643)">
+    <circle cx="60" cy="60" r="60" transform="translate(192 3643)" fill="#ff078b"/>
+    <g transform="translate(-1219.679 2678.039)">
+      <path d="M1491.633,1053.407v1.727a4.826,4.826,0,0,1-4.826,4.826h-29.394a4.826,4.826,0,0,1-4.826-4.826v-1.727" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path d="M1491.633,996.567v-1.78a4.826,4.826,0,0,0-4.826-4.826h-29.394a4.825,4.825,0,0,0-4.826,4.826v1.78" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path d="M1456.964,1050.414h-6.285v-6.285" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path d="M1487.265,1050.414h6.285v-6.285" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path d="M1456.964,999.506h-6.285v6.285" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path d="M1487.265,999.506h6.285v6.285" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <line x2="5.668" transform="translate(1469.277 1055.187)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <g >
+        <rect width="32.686" height="40.773" transform="translate(1455.773 1004.596)" stroke-width="2" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+        <g >
+          <path d="M1468.02,1018.211a2.554,2.554,0,0,1-2.225-1.8,4.174,4.174,0,0,1,.44-2.034c.465-1.186,1.4-3.193,2.461-3.311.033,0,.114-.008.147-.008a1.381,1.381,0,0,1,1.006.463,1.407,1.407,0,0,1,.119-.187,1.244,1.244,0,0,1,.862-.5l6.495-.712c.032,0,.1-.007.129-.007a1.317,1.317,0,0,1,1.273,1.245,1.213,1.213,0,0,1,0,.159,9.973,9.973,0,0,0,.331,3.548,1.06,1.06,0,0,1,.027.157,1.361,1.361,0,0,1-1.143,1.515l-6.5.712c-.032,0-.1.007-.129.007a1.3,1.3,0,0,1-1.234-1.019,4.135,4.135,0,0,1-1.538,1.666A1.263,1.263,0,0,1,1468.02,1018.211Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+          <path d="M1478.132,1004.6c.145.747-.241,1.136-.931,1.293l-6.388,1.456a1.65,1.65,0,0,1-.264.03,1.292,1.292,0,0,1-1.191-.879,4.245,4.245,0,0,1-1.365,1.834,1.311,1.311,0,0,1-.686.182,2.518,2.518,0,0,1-2.219-1.548,5.768,5.768,0,0,1,.288-2.368" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+          <path d="M1468.331,1028.111a2.558,2.558,0,0,1-2.2-2.01,4.162,4.162,0,0,1,.595-1.982c.555-1.14,1.643-3.055,2.708-3.079h0a1.412,1.412,0,0,1,1.114.559,1.257,1.257,0,0,1,1.03-.6l6.528-.123a1.343,1.343,0,0,1,1.3,1.359,1.218,1.218,0,0,1-.009.161,15.682,15.682,0,0,0-.132,1.785,16.2,16.2,0,0,0,.188,1.78,1.033,1.033,0,0,1,.014.157,1.435,1.435,0,0,1-.359.986,1.229,1.229,0,0,1-.9.423l-6.528.122a1.326,1.326,0,0,1-1.28-1.131,4.049,4.049,0,0,1-1.661,1.521A1.225,1.225,0,0,1,1468.331,1028.111Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+          <path d="M1471.1,1037.757a1.231,1.231,0,0,1-.878-.469,1.43,1.43,0,0,1-.311-.772,3.992,3.992,0,0,1-1.771,1.368,1.691,1.691,0,0,1-.3.037,2.382,2.382,0,0,1-1.571-.875,1.928,1.928,0,0,1-.585-1.327,4.1,4.1,0,0,1,.744-1.924c.5-.851,1.78-2.828,2.86-2.828a1.456,1.456,0,0,1,1.141.658,1.247,1.247,0,0,1,.989-.508c.02,0,6.6.465,6.6.465a1.351,1.351,0,0,1,1.193,1.469,1.221,1.221,0,0,1-.022.16,10.011,10.011,0,0,0-.215,3.558,1.021,1.021,0,0,1,0,.157,1.329,1.329,0,0,1-1.277,1.295C1477.683,1038.221,1471.1,1037.757,1471.1,1037.757Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+          <path d="M1464.763,1044.772a3.994,3.994,0,0,1,.956-1.81c.437-.573,1.945-2.436,3.013-2.436a1.372,1.372,0,0,1,.22.022,1.442,1.442,0,0,1,.986.792,1.227,1.227,0,0,1,.882-.381,1.587,1.587,0,0,1,.239.024l6.413,1.325a1.269,1.269,0,0,1,.818.582,1.472,1.472,0,0,1,.2,1.037,1.15,1.15,0,0,1-.04.153,8.5,8.5,0,0,0-.372,1.289" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/wp-content/themes/CCV/resources/assets/images/imagery-post.svg b/wp-content/themes/CCV/resources/assets/images/imagery-post.svg
new file mode 100644
index 0000000..025a587
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/images/imagery-post.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <g transform="translate(-991 -3643)">
+    <circle cx="60" cy="60" r="60" transform="translate(991 3643)" fill="#ff078b"/>
+    <g transform="translate(-565.662 2677.28)">
+      <path d="M1636.482,1009.761l8.353,6.644a6.046,6.046,0,0,1,2.282,4.732v28.2a4.837,4.837,0,0,1-4.837,4.837H1591.5a4.837,4.837,0,0,1-4.837-4.837v-28.2a6.046,6.046,0,0,1,2.287-4.736l8.358-6.633" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path d="M1641.169,1023.612l-13.926,12.582a13.576,13.576,0,0,1-4.223,2.6,13.391,13.391,0,0,1-4.862.906h-2.517a13.52,13.52,0,0,1-9.085-3.508l-13.925-12.582" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <line x1="13.169" y2="11.909" transform="translate(1593.387 1036.194)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <line x1="13.182" y1="11.909" transform="translate(1627.243 1036.194)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path d="M1597.307,1027.847V993.72h39.17v34.127" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <g>
+        <path d="M1612.79,1006.77a2.538,2.538,0,0,1-2.228-1.731,3.874,3.874,0,0,1,.441-1.949c.465-1.137,1.4-3.06,2.464-3.173.033,0,.115-.008.148-.008a1.41,1.41,0,0,1,1.008.443,1.294,1.294,0,0,1,.119-.179,1.259,1.259,0,0,1,.862-.48l6.505-.682c.032,0,.1-.007.129-.007a1.293,1.293,0,0,1,1.274,1.193.97.97,0,0,1,0,.153,9.151,9.151,0,0,0,.332,3.4.98.98,0,0,1,.026.151,1.315,1.315,0,0,1-1.145,1.452l-6.5.682c-.032,0-.1.007-.129.007a1.284,1.284,0,0,1-1.236-.976,4.06,4.06,0,0,1-1.54,1.6A1.332,1.332,0,0,1,1612.79,1006.77Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <path d="M1622.917,993.72c.145.716-.242,1.089-.933,1.239l-6.4,1.4a1.657,1.657,0,0,1-.264.029,1.29,1.29,0,0,1-1.193-.842,4.1,4.1,0,0,1-1.366,1.758,1.359,1.359,0,0,1-.688.174,2.52,2.52,0,0,1-2.221-1.484,5.276,5.276,0,0,1,.288-2.269" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <path d="M1613.1,1016.258a2.522,2.522,0,0,1-2.205-1.925,3.854,3.854,0,0,1,.6-1.9c.555-1.093,1.646-2.929,2.711-2.951h0a1.436,1.436,0,0,1,1.116.535,1.27,1.27,0,0,1,1.031-.574l6.538-.117a1.315,1.315,0,0,1,1.3,1.3,1.33,1.33,0,0,1-.009.154,14.348,14.348,0,0,0-.133,1.71,14.865,14.865,0,0,0,.189,1.707,1.074,1.074,0,0,1,.014.151,1.342,1.342,0,0,1-.36.945,1.256,1.256,0,0,1-.9.4l-6.537.117a1.31,1.31,0,0,1-1.282-1.084,4.01,4.01,0,0,1-1.663,1.458A1.284,1.284,0,0,1,1613.1,1016.258Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <path d="M1615.881,1025.505a1.258,1.258,0,0,1-.88-.45,1.331,1.331,0,0,1-.312-.74,3.972,3.972,0,0,1-1.773,1.311,1.69,1.69,0,0,1-.3.036,2.409,2.409,0,0,1-1.573-.839,1.813,1.813,0,0,1-.586-1.272,3.833,3.833,0,0,1,.745-1.844c.5-.816,1.783-2.711,2.865-2.711a1.471,1.471,0,0,1,1.142.631,1.266,1.266,0,0,1,.99-.486c.021,0,6.609.444,6.609.444a1.312,1.312,0,0,1,1.194,1.409.981.981,0,0,1-.021.153,14.726,14.726,0,0,0-.268,1.693,14.564,14.564,0,0,0,.052,1.717.947.947,0,0,1,0,.151,1.3,1.3,0,0,1-1.278,1.242C1622.467,1025.95,1615.881,1025.505,1615.881,1025.505Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <path d="M1609.529,1032.229a3.777,3.777,0,0,1,.958-1.736c.438-.548,1.947-2.335,3.017-2.335a1.357,1.357,0,0,1,.22.022,1.428,1.428,0,0,1,.987.759,1.258,1.258,0,0,1,.884-.366,1.587,1.587,0,0,1,.239.024l6.422,1.27a1.267,1.267,0,0,1,.819.558,1.356,1.356,0,0,1,.2.993,1.246,1.246,0,0,1-.039.148,7.675,7.675,0,0,0-.373,1.235" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/wp-content/themes/CCV/resources/assets/images/imagery-web.svg b/wp-content/themes/CCV/resources/assets/images/imagery-web.svg
new file mode 100644
index 0000000..b0ffe87
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/images/imagery-web.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <g transform="translate(-991 -3249)">
+    <circle cx="60" cy="60" r="60" transform="translate(991 3249)" fill="#ff078b"/>
+    <g transform="translate(-485.662 2293.508)">
+      <rect width="70" height="50.909" transform="translate(1501.662 998.493)" fill="none"/>
+      <g>
+        <path d="M1543.854,1028.069l5.78,19.6a2.418,2.418,0,0,0,4.586.159l2.8-7.519,7.89-1.449a2.419,2.419,0,0,0,.64-4.544l-18.3-9.095A2.418,2.418,0,0,0,1543.854,1028.069Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <path d="M1538.1,1029.918h-31.6a4.836,4.836,0,0,1-4.837-4.836V1009.3a4.836,4.836,0,0,1,4.837-4.836h60.327a4.836,4.836,0,0,1,4.836,4.836v15.782a4.836,4.836,0,0,1-4.836,4.836" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <g>
+          <path d="M1511.208,1013.023l3.411,8.335,3.411-8.335,3.411,8.335,3.411-8.335" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+          <path d="M1528.46,1013.023l3.411,8.335,3.411-8.335,3.411,8.335,3.411-8.335" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+          <path d="M1545.713,1013.023l3.411,8.335,3.411-8.335,3.411,8.335,3.411-8.335" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+          <line transform="translate(1562.117 1021.358)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/wp-content/themes/CCV/resources/assets/scripts/consultation.js b/wp-content/themes/CCV/resources/assets/scripts/consultation.js
new file mode 100644
index 0000000..b89ffc4
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/scripts/consultation.js
@@ -0,0 +1,29 @@
+//=== Consultation Form
+(function($) {
+
+  // Check the parent radio button when clicking on any element with this data attribute
+  $(document).on('click', '[data-update-imagery-type]', function () {
+    let radio = $(this).closest('.imagery-type-wrapper').find('input[name="imagery-type"]');
+    radio.prop('checked', true);
+    clearPostCheckbox(); // We can clear it here because this event is only triggered by the other options
+  });
+
+  $(document).on('click', 'input[name="imagery-type"]', function() {
+
+    if ('imagery_post' !== $(this).attr('id')) {
+      clearPostCheckbox();
+    }
+  });
+
+  // Tie the checkbox to the radio input for the "by post" option so they toggle together
+  $(document).on('click', '#images_sent_by_post, #imagery_post', function() {
+    let checked = $(this).prop('checked');
+
+    $('#images_sent_by_post, #imagery_post').prop('checked', checked);
+  });
+
+  function clearPostCheckbox() {
+    $('#images_sent_by_post').prop('checked', false);
+  }
+
+})(jQuery);
diff --git a/wp-content/themes/CCV/resources/assets/styles/app.styl b/wp-content/themes/CCV/resources/assets/styles/app.styl
index 8705a12..09eef77 100644
--- a/wp-content/themes/CCV/resources/assets/styles/app.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/app.styl
@@ -19,7 +19,7 @@
 // Extracted components or custom styles that can't be done with utilities
 @import 'components/*'
 @import 'widgets/*'
-//@import 'pages/*'
+@import 'pages/*'
 
 // Allow spacing classes to override others defined here
 @import 'common/spacing'
diff --git a/wp-content/themes/CCV/resources/assets/styles/common/spacing.styl b/wp-content/themes/CCV/resources/assets/styles/common/spacing.styl
index 4741c3b..cbe004f 100644
--- a/wp-content/themes/CCV/resources/assets/styles/common/spacing.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/common/spacing.styl
@@ -2,6 +2,8 @@
 // Ref: https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
 .spaced > * + *
   margin-top: 1.5em
+.spaced-lg > * + *
+  margin-top: 2em
 
 .spaced-horizontal > * + *
   margin-left: 0.75em
diff --git a/wp-content/themes/CCV/resources/assets/styles/components/forms.styl b/wp-content/themes/CCV/resources/assets/styles/components/forms.styl
index 06ef593..7a932a9 100644
--- a/wp-content/themes/CCV/resources/assets/styles/components/forms.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/forms.styl
@@ -21,7 +21,7 @@ input, textarea
 
 
 input, textarea, select
-  @apply text-base font-body
+  @apply text-base font-body font-light
   outline: none
   background-color: transparent
 
@@ -42,9 +42,9 @@ input[type="number"]::-webkit-inner-spin-button
 input[type="number"]
   -moz-appearance: textfield
 
-//select
-//  background: transparent url(../images/arrow-down.svg) center right no-repeat
-//  background-size: 1em auto
+select
+  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 15 9' xml:space='preserve'%3E%3Cg fill='none' stroke='%23ff078b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M13.9 1.3L7.5 7.7'/%3E%3Cpath d='M1.1 1.3l6.4 6.4'/%3E%3C/g%3E%3C/svg%3E") center right no-repeat
+  background-size: 0.8em auto
 
 textarea
   border: 1px solid theme('colors.dark')
@@ -120,18 +120,18 @@ input[type="submit"]
   > *
     flex-basis: 47%
 
-    +below(500px)
+    +below(1024px)
       flex-basis: 100%
-      margin-bottom: 1.5em
+      margin-bottom: 2em
 
 .form-cols-4
   > *
     flex-basis: 23%
 
-    +below(1100px)
+    +below(1400px)
       flex-basis: 47%
-      margin-bottom: 1.5em
-    +below(500px)
+      margin-bottom: 2em
+    +below(600px)
       flex-basis: 100%
 
 
diff --git a/wp-content/themes/CCV/resources/assets/styles/pages/consultation.styl b/wp-content/themes/CCV/resources/assets/styles/pages/consultation.styl
new file mode 100644
index 0000000..b09c40a
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/pages/consultation.styl
@@ -0,0 +1,11 @@
+.imagery-icon
+  flex: 0 0 auto
+
+// Hidden radio input that records which option is selected
+input[name="imagery-type"]
+  position: absolute
+  visibility: hidden
+
+  // Change icon bg colour when selected
+  &:checked + .imagery-icon circle
+    fill: theme('colors.purple')
diff --git a/wp-content/themes/CCV/resources/views/forms/consultation.blade.php b/wp-content/themes/CCV/resources/views/forms/consultation.blade.php
index a3ae12d..004d387 100644
--- a/wp-content/themes/CCV/resources/views/forms/consultation.blade.php
+++ b/wp-content/themes/CCV/resources/views/forms/consultation.blade.php
@@ -18,17 +18,27 @@ https://github.com/flatpickr/flatpickr
 <div class="bg-light py-2v pl-4v pr-3v text-block-body">
   <h2>{{ __('1. Vos symptômes') }}</h2>
 
-  <div class="flex md:flex-wrap">
+  <div class="form-cols-2 mt-1v">
 
-    <ul class="spaced w-1/2 pr-1v md:w-full md:pr-0 md:mb-6">
+    <ul class="spaced-lg">
       <li>{!! $form->field('main-problem') !!}</li>
       <li>{!! $form->field('date-first-symptoms', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0']) !!}</li>
       <li>{!! $form->field('date-pain-since', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0']) !!}</li>
-      <li>{!! $form->field('pain-arms-legs') !!}</li>
-      <li>{!! $form->field('pain-arms-legs-detail') !!}</li>
+      <li>
+        {!! $form->field('pain-arms-legs') !!}
+
+        <div class="form-field mt-6">
+          {!! $form->title('pain-arms-legs-detail', ['show_title' => true]) !!}
+          <div class="relative custom-checkbox">
+            <img src="@asset('images/consultation-body-outline.svg')" class="consultation-body-outline-image">
+            {!! $form->checkbox('pain-arms-legs-detail', ['show_labels' => true]) !!}
+          </div>
+        </div>
+
+      </li>
     </ul>
 
-    <ul class="spaced w-1/2 pl-1v md:w-full md:pl-0">
+    <ul class="spaced-lg">
       <li>{!! $form->field('main-pain') !!}</li>
       <li>{!! $form->field('tingling-numbness') !!}</li>
       <li>{!! $form->field('tingling-numbness-date', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0']) !!}</li>
@@ -44,8 +54,8 @@ https://github.com/flatpickr/flatpickr
 <div class="bg-white py-2v pl-4v pr-3v">
   <h2>{{ __('2. Vos traitements réalisés') }}</h2>
 
-  <div class="spaced">
-    {!! $form->field('medication') !!}
+  <div class="spaced-lg mt-1v">
+    {!! $form->field('medication', ['title_class' => 'font-light']) !!}
 
     <div class="form-cols-4">
       {!! $form->field('kine-osteo') !!}
@@ -54,7 +64,7 @@ https://github.com/flatpickr/flatpickr
       {!! $form->field('infiltration') !!}
     </div>
 
-    {!! $form->field('surgeries') !!}
+    {!! $form->field('surgeries', ['title_class' => 'font-light']) !!}
   </div>
 
 </div>
@@ -62,15 +72,97 @@ https://github.com/flatpickr/flatpickr
 {{-- IMAGERY --}}
 <div class="bg-light py-2v pl-4v pr-3v">
   <h2>{{ __('3. Votre imagerie') }}</h2>
+
+  <p class="text-lg my-1v">
+    {{ __("IRM, Scanner, Radiographies, faites-nous parvenir vos imageries les plus récentes en utilisant l'une des méthodes suivantes :", 'ccv') }}
+  </p>
+
+  <div class="form-cols-2">
+
+    {{-- IMAGES FROM CD --}}
+    <div class="imagery-type-wrapper flex mb-8">
+      <input type="radio" id="imagery_cd" name="imagery-type" value="{{ __('') }}">
+      <label for="imagery_cd" class="imagery-icon">@svg('imagery-cd')</label>
+      <div class="ml-4">
+        <div class="text-lg font-normal leading-tight mb-2">
+          {{ __('Vos images sont sur un CD ?') }}
+        </div>
+        <p>
+          {{ __("Envoyez-nous l'ensemble des fichiers contenus sur votre CD en cliquant sur le lien ci-dessous :", "ccv") }}
+        </p>
+
+        <a href="javascript://" class="btn" data-update-imagery-type>{{ __('Envoyer vos fichiers') }}</a>
+      </div>
+    </div>
+
+    {{-- IMAGES ONLINE --}}
+    <div class="imagery-type-wrapper flex mb-8">
+      <input type="radio" id="imagery_web" name="imagery-type" value="{{ __('Images en ligne') }}">
+      <label for="imagery_web" class="imagery-icon">@svg('imagery-web')</label>
+      <div class="ml-4">
+        <div class="text-lg font-normal leading-tight mb-2">
+          {{ __('Vous avez reçu un lien pour consulter vos images en ligne ?') }}
+        </div>
+        <p class="mb-0! pb-2">
+          {{ __('Collez votre lien ci-dessous ainsi que vos identifiant et mot de passe :') }}
+        </p>
+        <textarea name="imagery-online" class="min-h-0 h-20" data-update-imagery-type></textarea>
+      </div>
+    </div>
+
+    {{-- IMAGES FROM PHONE --}}
+    <div class="imagery-type-wrapper flex mb-8">
+      <input type="radio" id="imagery_phone" name="imagery-type" value="{{ __('Images téléversées depuis portable') }}">
+      <label for="imagery_phone" class="imagery-icon">@svg('imagery-phone')</label>
+      <div class="ml-4">
+        <div class="text-lg font-normal leading-tight mb-2">
+          {{ __('Vous remplissez cette demande depuis votre téléphone ?') }}
+        </div>
+        <p>
+          {{ __('Prenez vos images en photo et envoyez-les directement depuis votre téléphone.') }}
+        </p>
+        <a href="javascript://" class="btn" data-update-imagery-type>{{ __('Parcourir') }}</a>
+      </div>
+    </div>
+
+    {{-- IMAGES SENT BY POST --}}
+    <div class="imagery-type-wrapper flex mb-8">
+      <input type="radio" id="imagery_post" name="imagery-type" value="{{ __('Images envoyé par courrier') }}">
+      <label for="imagery_post" class="imagery-icon">@svg('imagery-post')</label>
+      <div class="ml-4">
+        <div class="text-lg font-normal leading-tight mb-2">
+          {{ __('Vous pouvez aussi nous envoyer vos images par courrier :') }}
+        </div>
+        <p>
+          CCV MONTPELLIER<br>
+          AVIS MEDICAL<br>
+          Clinique du parc - 50 Rue Emile Combes,<br>
+          34170 Castelnau-le-Lez<br>
+        </p>
+
+        <div class="custom-checkbox">
+          <label>
+            <input type="checkbox" id="images_sent_by_post">
+            <span class="form-label">{{ __('Cochez cette case si vous envoyez vos images par courrier', 'ccv') }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <p class="text-xs italic">
+    {{ __("Aucune demande d’avis ne pourra être étudiée sans imagerie médicale associée.", 'ccv') }}
+  </p>
+
 </div>
 
 {{-- CONTACT DETAILS --}}
 <div class="bg-white py-2v pl-4v pr-3v">
   <h2>{{ __('4. Vos informations') }}</h2>
 
-  <div class="form-cols-2">
+  <div class="form-cols-2 mt-1v">
 
-    <div class="spaced">
+    <div class="spaced-lg">
       {!! $form->field('last-name', ['show_title' => false]) !!}
       {!! $form->field('first-name', ['show_title' => false]) !!}
       {!! $form->field('profession', ['show_title' => false]) !!}
@@ -80,26 +172,32 @@ https://github.com/flatpickr/flatpickr
       {!! $form->field('email', ['show_title' => false]) !!}
     </div>
 
-    <div class="spaced">
-      {!! $form->field('sex', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0']) !!}
+    <div class="spaced-lg">
+      {!! $form->field('sex', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'font-light mb-0']) !!}
       {!! $form->field('age', [
         'class' => 'flex items-center spaced-horizontal',
-        'title_class' => 'mb-0',
+        'title_class' => 'font-light mb-0',
         'input_class' => 'flex items-center w-16',
         'placeholder' => '',
         'field_after' => __('ans')
       ]) !!}
-      {!! $form->field('message') !!}
+      {!! $form->field('message', ['title_class' => 'font-light']) !!}
 
-      <div class="mt-6">
-        <div class="custom-checkbox">
+      <div class="mt-4">
+        <div class="custom-checkbox mb-1">
           <label>
             <input type="checkbox" name="send-to-team" value="{{ __('Oui') }}" checked class="ml-2">
             <span class="form-label-reversed">{{ __("J'envoie ma demande à l'équipe du CCV", 'ccv') }}</span>
           </label>
         </div>
         {{ __("ou je souhaite l'envoyer à un chirurgien spécifique :", 'ccv') }}
-        {!! $form->field('surgeon', ['show_title' => false]) !!}
+        {!! $form->field('surgeon', [
+          'class' => 'mt-4',
+          'show_title' => false,
+          'placeholder' => [
+            '' => __('Sélectionner') // First select option
+          ]
+        ]) !!}
       </div>
     </div>
 
diff --git a/wp-content/themes/CCV/webpack.mix.js b/wp-content/themes/CCV/webpack.mix.js
index 946c1ff..37e5984 100644
--- a/wp-content/themes/CCV/webpack.mix.js
+++ b/wp-content/themes/CCV/webpack.mix.js
@@ -45,6 +45,7 @@ mix.stylus(src`styles/app.styl`, 'styles', {
 
 // JavaScript
 mix.js(src`scripts/app.js`, 'scripts')
+   .js(src`scripts/consultation.js`, 'scripts')
    .js(src`scripts/header-slideshow.js`, 'scripts')
    .js(src`scripts/link-carousel.js`, 'scripts')
    .js(src`scripts/testimonial-carousel.js`, 'scripts')
-- 
2.39.5