From 46b10c6484151976d9b8f0e9276ecd0fb4e467fa Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 4 Jul 2019 22:57:14 +0200
Subject: [PATCH] WIP #2738 @10

---
 app/Models/Settings.php                       | 22 ++++---
 app/Providers/AppServiceProvider.php          |  4 +-
 app/SubForms/Intro.php                        | 10 +++-
 app/SubForms/Slide.php                        |  5 +-
 .../_modules/contact-module/img/icon-mail.svg | 12 ----
 .../contact-module/img/icon-phone.svg         | 11 ----
 public/_modules/contact-module/index.html     | 33 -----------
 public/_modules/contact-module/style.styl     | 57 -------------------
 .../styles/components/contact-shortcut.styl   | 30 ++++++++++
 resources/views/components/map-link.blade.php | 10 ++++
 .../views/components/phone-link.blade.php     | 20 +++++++
 resources/views/layouts/app.blade.php         |  2 +
 resources/views/pages/home.blade.php          | 15 ++---
 resources/views/pages/solution.blade.php      |  8 +--
 .../views/partials/contact-shortcut.blade.php | 19 +++++++
 resources/views/partials/footer.blade.php     | 20 +++----
 yarn.lock                                     | 13 +++--
 17 files changed, 135 insertions(+), 156 deletions(-)
 delete mode 100644 public/_modules/contact-module/img/icon-mail.svg
 delete mode 100644 public/_modules/contact-module/img/icon-phone.svg
 delete mode 100644 public/_modules/contact-module/index.html
 delete mode 100644 public/_modules/contact-module/style.styl
 create mode 100644 resources/styles/components/contact-shortcut.styl
 create mode 100644 resources/views/components/map-link.blade.php
 create mode 100644 resources/views/components/phone-link.blade.php
 create mode 100644 resources/views/partials/contact-shortcut.blade.php

diff --git a/app/Models/Settings.php b/app/Models/Settings.php
index 5d70942..0aa0d22 100644
--- a/app/Models/Settings.php
+++ b/app/Models/Settings.php
@@ -10,15 +10,21 @@ class Settings extends \Cubist\Backpack\app\Magic\Models\Settings
     {
         parent::setFields();
 
+        $this->addField(['name' => 'email',
+            'type' => 'Email',
+            'label' => __('E-mail'),
+            'tab' => 'Informations de contact']);
 
-        $this->addField(['name'=>'email',
-            'type'=>'Email',
-            'label'=>'E-mail',
-            'tab'=>'Informations de contact']);
+        $this->addField(['name' => 'phone',
+            'type' => 'Text',
+            'label' => __('Téléphone'),
+            'translatable' => false,
+            'tab' => 'Informations de contact']);
 
-        $this->addField(['name'=>'phone',
-            'type'=>'Text',
-            'label'=>'Téléphone',
-            'tab'=>'Informations de contact']);
+        $this->addField(['name' => 'address',
+            'type' => 'Textarea',
+            'label' => __('Adresse'),
+            'translatable' => false,
+            'tab' => 'Informations de contact']);
     }
 }
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 2d9dffd..3f119a5 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -35,7 +35,9 @@ class AppServiceProvider extends ServiceProvider
             BladeX::component('components.grid'); // <grid cols="3" gap="md"> ... </grid>
             BladeX::component('components.text-block'); // <text-block> ... </text-block>
             BladeX::component('components.link-button'); // <link-button> ... </link-button>
-        }catch (\Exception $e){
+            BladeX::component('components.phone-link'); // <phone-link number="012345"> ... </phone-link>
+            BladeX::component('components.map-link'); // <map-link address="..."> ... </map-link>
+        } catch (\Exception $e) {
 
         }
     }
diff --git a/app/SubForms/Intro.php b/app/SubForms/Intro.php
index 54d8e1e..11d0f7b 100644
--- a/app/SubForms/Intro.php
+++ b/app/SubForms/Intro.php
@@ -13,11 +13,17 @@ class Intro extends SubForm
         parent::init();
         $this->addField(['name' => 'title',
             'label' => 'Titre',
-            'type' => 'Text']);
+            'type' => 'Textarea',
+            'attributes' => [
+                'rows' => '2', // Sometimes we need to put line breaks in titles, hence the textarea
+            ]]);
 
         $this->addField(['name' => 'text',
             'label' => 'Texte',
-            'type' => 'Textarea']);
+            'type' => 'Textarea',
+            'attributes' => [
+                'rows' => 10,
+            ]]);
 
         $this->addField(['name' => 'image',
             'label' => 'Image',
diff --git a/app/SubForms/Slide.php b/app/SubForms/Slide.php
index 6e19ad1..a42c508 100644
--- a/app/SubForms/Slide.php
+++ b/app/SubForms/Slide.php
@@ -14,7 +14,10 @@ class Slide extends Intro
 
         $this->addField(['name' => 'text',
             'label' => 'Texte',
-            'type' => 'Textarea']);
+            'type' => 'Textarea',
+            'attributes' => [
+                'rows' => '6',
+            ]]);
 
         $this->addField(['name' => 'image',
             'label' => 'Image',
diff --git a/public/_modules/contact-module/img/icon-mail.svg b/public/_modules/contact-module/img/icon-mail.svg
deleted file mode 100644
index eb6aac7..0000000
--- a/public/_modules/contact-module/img/icon-mail.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="33.5" height="29.086" viewBox="0 0 33.5 29.086">
-  <g id="Groupe_47" data-name="Groupe 47" transform="translate(-4417.889 997.75)">
-    <g id="Groupe_45" data-name="Groupe 45" transform="translate(4435.19 -984.862)">
-      <circle id="Ellipse_13" data-name="Ellipse 13" cx="3.022" cy="3.022" r="3.022" transform="translate(4.702 4.702)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/>
-      <path id="Tracé_33" data-name="Tracé 33" d="M4460.729-960.9a7.681,7.681,0,0,1-4.365,1.344,7.725,7.725,0,0,1-7.725-7.724,7.725,7.725,0,0,1,7.725-7.724,7.724,7.724,0,0,1,7.724,7.724v.671a2.351,2.351,0,0,1-2.352,2.351,2.351,2.351,0,0,1-2.351-2.351v-.671" transform="translate(-4448.639 975)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/>
-    </g>
-    <g id="Groupe_46" data-name="Groupe 46" transform="translate(4418.639 -997)">
-      <path id="Tracé_34" data-name="Tracé 34" d="M4430.777-978.241h-10.482a1.655,1.655,0,0,1-1.656-1.655v-14.9a2.213,2.213,0,0,1,2.207-2.207h24.276a2.213,2.213,0,0,1,2.207,2.207v6.069" transform="translate(-4418.639 997)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
-      <path id="Tracé_35" data-name="Tracé 35" d="M4447.239-996l-13.6,11.034L4419.515-996" transform="translate(-4419.032 996.552)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1.5"/>
-    </g>
-  </g>
-</svg>
diff --git a/public/_modules/contact-module/img/icon-phone.svg b/public/_modules/contact-module/img/icon-phone.svg
deleted file mode 100644
index add3173..0000000
--- a/public/_modules/contact-module/img/icon-phone.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="33.5" height="29.109" viewBox="0 0 33.5 29.109">
-  <g id="Groupe_48" data-name="Groupe 48" transform="translate(-4644.654 1067.424)">
-    <path id="Tracé_36" data-name="Tracé 36" d="M4697.908-1041.295a2.3,2.3,0,0,1-2.207,2.207l-9.931.024a2.319,2.319,0,0,1-2.207-2.231v-23.172a2.3,2.3,0,0,1,2.207-2.207h9.931a2.276,2.276,0,0,1,2.207,2.183Z" transform="translate(-29.355)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/>
-    <line id="Ligne_92" data-name="Ligne 92" x2="14.345" transform="translate(4654.208 -1062.26)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
-    <line id="Ligne_93" data-name="Ligne 93" x2="14.345" transform="translate(4654.208 -1043.502)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
-    <line id="Ligne_94" data-name="Ligne 94" y2="16.696" transform="translate(4649.794 -1059.358)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
-    <line id="Ligne_95" data-name="Ligne 95" y2="13.913" transform="translate(4645.405 -1057.966)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
-    <line id="Ligne_96" data-name="Ligne 96" y2="16.696" transform="translate(4672.967 -1062.14)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
-    <line id="Ligne_97" data-name="Ligne 97" y2="13.913" transform="translate(4677.405 -1060.749)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
-  </g>
-</svg>
diff --git a/public/_modules/contact-module/index.html b/public/_modules/contact-module/index.html
deleted file mode 100644
index 64537ce..0000000
--- a/public/_modules/contact-module/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="../../css/app.css">
-    <link href="https://fonts.googleapis.com/css?family=Barlow:600|Muli&display=swap" rel="stylesheet">
-    <title>pmi</title>
-</head>
-<body>
-<div id="contact-module">
-    <div class="module flex items-center justify-between">
-        <img class="icon-size" src="img/icon-phone.svg" alt="">
-        <p class="text-white"><a class="text-white" href="tel:+330146919332">01 46 91 93 32</a></p>
-    </div>
-
-    <div class="wrapper-module flex flex-col">
-        <div class="module-mail flex items-center justify-between">
-            <img class="icon-size" src="img/icon-mail.svg" alt="">
-            <p class="text-white"><a class="text-white" href="mailto:contact@pm-instrumentation.com">contact@pm-instrumentation.com</a></p>
-        </div>
-        <div class="module-mail module-reveal flex  flex-col items-center justify-center">
-            <p class="text-white">Utilisez notre <a class="text-white underline" href="">formulaire de contact</a></p>
-        </div>
-    </div>
-</div>
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/public/_modules/contact-module/style.styl b/public/_modules/contact-module/style.styl
deleted file mode 100644
index c18b3ff..0000000
--- a/public/_modules/contact-module/style.styl
+++ /dev/null
@@ -1,57 +0,0 @@
-$h3 = 24px
-$barlow = 'Barlow', sans-serif
-$muli = 'Muli', sans-serif
-$dark = #6B7287
-$lightblue = #0EAADA
-*
-  padding: 0
-  box-sizing: border-box
-  margin: 0
-  font-family: $muli
-
-#contact-module
-  height 150px
-  position fixed
-  right 0
-  max-width 320px
-  width 320px
-  top: 215px
-  .module
-    max-width: 175px
-    padding: 0 12px
-    height: 48px
-    background: $lightblue
-    transform:translateX(calc(100% - -97px))
-    transition: 500ms all ease
-    cursor: pointer
-    &:hover
-      transform: translateX(85%)
-  .icon-size
-    width: 26px;
-    height: 22px;
-  .wrapper-module
-    height: 96px
-    margin-top: 5px
-    transition: 500ms all ease
-    transform: translateX(calc(100% - 48px))
-    &:hover
-      transform: translateX(0px)
-      .module-reveal
-        transform: translateX(0px)
-    .module-mail
-      background : $lightblue
-      height: 48px
-      width: 100%
-      padding: 0 12px
-    .module-reveal
-      transform: translateX(48px)
-      transition: 300ms all ease
-      position relative
-      &::after
-        content: ''
-        display block
-        height 1px
-        width 90%
-        background #079ECC
-        position absolute
-        top: 0
\ No newline at end of file
diff --git a/resources/styles/components/contact-shortcut.styl b/resources/styles/components/contact-shortcut.styl
new file mode 100644
index 0000000..e62b307
--- /dev/null
+++ b/resources/styles/components/contact-shortcut.styl
@@ -0,0 +1,30 @@
+$contact-tab-width = 48px // Width of visible tab when closed
+
+.contact-shortcut
+  @apply fixed right-0 z-30 text-white
+  top: 215px
+
+  a
+    @apply text-inherit
+
+  &-tab
+    transform: s('translateX(calc(100% - %s))', $contact-tab-width)
+    transition: transform 0.5s ease
+    &:hover
+      transform: none
+      .contact-shortcut-detail
+        transform: none
+        transition: none // So it snaps out on hover but animates on mouseout
+
+  &-icon
+    @apply mr-3
+    height: 22px
+    width: auto
+
+  &-detail
+    @apply p-3
+    border-top: 1px solid #079ECC
+    transform: translateX($contact-tab-width)
+    transition: transform 0.3s ease 0.3s // Delay so it slides out of view at the end of main animation
+    a
+      @apply underline
diff --git a/resources/views/components/map-link.blade.php b/resources/views/components/map-link.blade.php
new file mode 100644
index 0000000..e32a550
--- /dev/null
+++ b/resources/views/components/map-link.blade.php
@@ -0,0 +1,10 @@
+{{-- Map Link --}}
+{{-- Open address in Google Maps --}}
+
+@if (!empty($address))
+
+    <a class="{{ $class ?? '' }}" href="https://maps.google.fr/?q={{ urlencode(str_replace("\n", " ", $address)) }}" target="_blank" rel="noopener">
+        {{ $slot }}
+    </a>
+
+@endif
diff --git a/resources/views/components/phone-link.blade.php b/resources/views/components/phone-link.blade.php
new file mode 100644
index 0000000..a532a51
--- /dev/null
+++ b/resources/views/components/phone-link.blade.php
@@ -0,0 +1,20 @@
+{{-- Telephone Link --}}
+{{-- Formats and link a telephone number --}}
+
+@if (!empty($number))
+
+    @php
+        $number = preg_replace('/\D/', '', $number); // Strip everything except digits
+
+        // When a country code is present, add this to the start of the link and trim leading zero
+        if (isset($countryCode)) {
+            $number = "+{$countryCode}" . ltrim($number, 0);
+        }
+    @endphp
+
+
+    <a class="{{ $class ?? '' }}" href="tel:{{ $number }}">
+        {{ $slot }}
+    </a>
+
+@endif
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index bbf224a..54076c3 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -44,6 +44,8 @@
         @yield('content')
     </main>
 
+    @include('partials.contact-shortcut')
+
     @include('partials.footer')
 
     <div class="body-overlay" @click="closeCart"></div>
diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php
index 8b28fa6..a45e5e5 100644
--- a/resources/views/pages/home.blade.php
+++ b/resources/views/pages/home.blade.php
@@ -44,17 +44,12 @@
                 </column>
 
                 <column>
-                    <text-block class="pt-2v" title_class="h1 overlap-left">
-                        <slot name="title">
-                            Expert de la mesure
-                            depuis plus de 30 ans
-                        </slot>
+                    <text-block class="pt-2v" title_class="h1 overlap-left" :title="$page->intro->title">
+                        {{-- Todo: make a better function for converting plain text into paragraphs and breaks --}}
+                        <p>{!! nl2br($page->intro->text) !!}</p>
 
-                        <p>PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité. Issue de la société Schaevitz, PM Instrumentation a su développer une gamme de capteurs et systèmes d’excellente qualité provenant principalement des Etats-Unis.</p>
-
-                        <p>Principalement dédiés aux mesures physiques, nous saurons vous conseiller dans le choix de produits adaptés à votre environnement.</p>
-
-                        <p><a href="#">En savoir plus</a></p>
+                        {{-- Todo: make a component for handling CMS links when passing an object like $page->intro->button --}}
+                        <p><a href="#">{{ $page->intro->button->label }}</a></p>
                     </text-block>
 
                 </column>
diff --git a/resources/views/pages/solution.blade.php b/resources/views/pages/solution.blade.php
index 2873b05..d0d2c0e 100644
--- a/resources/views/pages/solution.blade.php
+++ b/resources/views/pages/solution.blade.php
@@ -10,13 +10,11 @@
                 </column>
 
                 <column>
-                    <text-block class="pt-2v" title_class="h1 overlap-left capitalize" :title="$page->title ?? 'Lorem ipsum'">
+                    <text-block class="pt-2v" title_class="h1 overlap-left capitalize" :title="$page->intro->title ?? ''">
 
-                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam aspernatur corporis dicta dolore, earum est et eum eveniet, harum minima non, pariatur perspiciatis possimus ratione repudiandae veniam voluptas. Aspernatur eius esse laudantium nostrum nulla?</p>
+                        <p>{!! nl2br($page->intro->text) !!}</p>
 
-                        <p>Sit amet, consectetur adipisicing elit. Aut cum dolores ratione vel. Alias exercitationem obcaecati quae! Accusantium alias, aspernatur atque autem beatae commodi delectus dolores esse, exercitationem facere illo itaque iusto libero magni natus nemo obcaecati odit officia quia quibusdam reiciendis soluta suscipit unde ut veritatis, voluptate voluptatibus.</p>
-
-                        <p><a href="#">En savoir plus</a></p>
+                        <p><a href="#">{{ $page->intro->button->label }}</a></p>
                     </text-block>
 
                 </column>
diff --git a/resources/views/partials/contact-shortcut.blade.php b/resources/views/partials/contact-shortcut.blade.php
new file mode 100644
index 0000000..67076df
--- /dev/null
+++ b/resources/views/partials/contact-shortcut.blade.php
@@ -0,0 +1,19 @@
+<div class="contact-shortcut flex flex-col">
+
+        <phone-link :number="$global->phone" class="contact-shortcut-tab mb-px inline-flex self-end bg-blue p-3 inline-block">
+            <img class="contact-shortcut-icon" src="{{ asset('images/icon-phone.svg') }}" alt="{{ __('Téléphone') }}">
+            {{ $global->phone }}
+        </phone-link>
+
+
+    <div class="contact-shortcut-tab">
+        <a href="mailto:{{ $global->email }}" class="bg-blue p-3 bg-blue flex">
+            <img class="contact-shortcut-icon" src="{{ asset('images/icon-email.svg') }}" alt="{{ __('E-mail') }}">
+            {{ $global->email }}
+        </a>
+
+        <div class="contact-shortcut-detail bg-blue nowrap">
+            {!! sprintf(__('Utilisez notre <a href="%s">formulaire de contact</a>'), '/contact') !!}
+        </div>
+    </div>
+</div>
diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php
index 9b2ee3b..2d5a3a7 100644
--- a/resources/views/partials/footer.blade.php
+++ b/resources/views/partials/footer.blade.php
@@ -22,33 +22,29 @@
         <div class="footer-col">
             <h3 class="footer-col-heading">Nous contacter</h3>
 
-            <a class="footer-contact-block" href="#">
+            <map-link class="footer-contact-block" :address="$global->address">
                 @svg('icon-address', 'footer-contact-icon')
                 <div class="footer-contact-text">
                     <div class="footer-contact-title">{{ __('Address') }}</div>
-
-                    59, rue Émile Deschanel<br>
-                    92400  - COURBEVOIE - France
+                    {!! nl2br($global->address) !!}
                 </div>
-            </a>
+            </map-link>
 
-            <a class="footer-contact-block" href="mailto:{{$global->email}}">
+            <a class="footer-contact-block" href="mailto:{{ $global->email }}">
                 @svg('icon-email', 'footer-contact-icon')
                 <div class="footer-contact-text">
                     <div class="footer-contact-title">{{ __('Email') }}</div>
-
-                    {{$global->email}}
+                    {{ $global->email }}
                 </div>
             </a>
 
-            <a class="footer-contact-block" href="#">
+            <phone-link class="footer-contact-block" :number="$global->phone" country-code="33">
                 @svg('icon-phone', 'footer-contact-icon')
                 <div class="footer-contact-text">
                     <div class="footer-contact-title">{{ __('Telephone') }}</div>
-
-                    01 46 91 93 32
+                    {{ $global->phone }}
                 </div>
-            </a>
+            </phone-link>
 
         </div>
 
diff --git a/yarn.lock b/yarn.lock
index e9b770a..5a1eb1c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3230,6 +3230,11 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
+gsap@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/gsap/-/gsap-2.1.3.tgz#c63ee3a50f0b7dc3b46ed0845bb0f09049feb944"
+  integrity sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ==
+
 handle-thing@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
@@ -6835,10 +6840,10 @@ symbol-observable@1.0.1:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
   integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
 
-tailwindcss@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.0.3.tgz#12845ec6c9542e97f07ea2bd8af4ba47e8a888d1"
-  integrity sha512-myjuB0hqqLiXQCea0hEeZfrQVxzmkhtgi7HsuwJgXaVPgBp+7r/wywOvkDTUS8sQ1LraF43OLatip0yhfo/FtA==
+tailwindcss@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.0.4.tgz#98f186c8142bfb292bcbfcb53b84df369f11ef91"
+  integrity sha512-+1NNPW+U83k6DV/uUOnsfmX86Cfb8N87fiuN0cX0mEi2sZUpglLzZqlXtP8FD9Hlne5H1UhlS8tajz+F9SSxjA==
   dependencies:
     autoprefixer "^9.4.5"
     bytes "^3.0.0"
-- 
2.39.5