Merge pull request #1431 from betagouv/fix-1409

Identité page for new design

app/assets/stylesheets/new_design/_constants.scss

@@ -7,3 +7,7 @@ $footer-height: 267px;
 $footer-height-mobile: 531px;
 
 $small-footer-height: 2 * $default-padding;
+
+// layouts
+$two-columns-padding: 60px;
+$two-columns-breakpoint: $page-width + (2 * $two-columns-padding);

app/assets/stylesheets/new_design/auth.scss

@@ -3,24 +3,7 @@
 @import "placeholders";
 @import "mixins";
 
-$auth-breakpoint: 820px;
-
-@media (max-width: $auth-breakpoint) {
-  .preview {
-    display: none;
-  }
-
-  .two-columns .column.auth-form {
-    @include horizontal-padding(0);
-    width: 100%;
-  }
-}
-
-@media (max-width: $auth-breakpoint) {
-  .two-columns.auth {
-    background: #FFFFFF;
-  }
-}
+$auth-breakpoint: $two-columns-breakpoint;
 
 .preview {
   font-size: 24px;
@@ -28,6 +11,10 @@ $auth-breakpoint: 820px;
   .paperless-logo {
     width: 100%;
     margin-bottom: 60px;
+
+    @media (max-width: $auth-breakpoint) {
+      display: none;
+    }
   }
 
   h3 {
@@ -41,11 +28,19 @@ $auth-breakpoint: 820px;
 
   .procedure-title {
     font-size: 30px;
-    margin: 50px 0 32px;
+    margin: 20px 0 0;
+
+    @media (min-width: $auth-breakpoint) {
+      margin: 50px 0 32px;
+    }
   }
 
   .procedure-description {
     font-size: 14px;
+
+    @media (max-width: $auth-breakpoint) {
+      display: none; // TO FIX : make this description available for small devices
+    }
   }
 
   .procedure-logos {
@@ -53,8 +48,14 @@ $auth-breakpoint: 820px;
     justify-content: space-around;
 
     img {
-      max-height: 130px;
+      max-height: 50px;
+      max-width: 100%;
       margin: 0 10px;
+
+      @media (min-width: $auth-breakpoint) {
+        max-height: 130px;
+        max-width: 500px;
+      }
     }
   }
 }

app/assets/stylesheets/new_design/forms.scss

@@ -25,6 +25,13 @@
       display: block;
       margin-top: $default-spacer;
     }
+
+    &.required {
+      &::after {
+        color: $dark-red;
+        content: " *";
+      }
+    }
   }
 
   .editable-champ {
@@ -70,6 +77,10 @@
     &:disabled {
       background-color: $border-grey;
     }
+
+    &.small {
+      padding: $default-padding / 2;
+    }
   }
 
   input[type=text],
@@ -114,11 +125,17 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    background: image-url("icons/chevron-down.svg") no-repeat;
+    background-color: #FFFFFF;
+    background-image: image-url("icons/chevron-down.svg");
+    background-repeat: no-repeat;
     background-size: 14px;
     background-position: right 10px center;
     padding-right: 4 * $default-spacer;
 
+    &.small {
+      padding-right: 3 * $default-spacer;
+    }
+
     // CAUTION: IE hackery ahead
     &::-ms-expand {
       display: none; // remove default arrow in IE 10 and 11 */
@@ -208,4 +225,18 @@
       margin-bottom: $default-padding;
     }
   }
+
+  .inline-champ {
+    margin-left: $default-spacer;
+    margin-right: $default-spacer;
+    width: 100%;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }

app/assets/stylesheets/new_design/helpers.scss

@@ -0,0 +1,5 @@
+@import "constants";
+
+.mb-1 {
+  margin-bottom: $default-spacer;
+}

app/assets/stylesheets/new_design/layouts.scss

@@ -3,23 +3,34 @@
 @import "constants";
 
 .two-columns {
-  $column-padding: 60px;
-  $two-columns-breakpoint: $page-width + (2 * $column-padding);
+  background-color: #FFFFFF;
 
-  background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
+  @media (min-width: $two-columns-breakpoint) {
+    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
+  }
 
   .columns-container {
     @extend .container;
     display: flex;
-    flex-direction: row;
-    align-items: center;
+    flex-direction: column;
+
+    @media (min-width: $two-columns-breakpoint) {
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   .column {
-    width: 50%;
-    padding: $column-padding;
+    padding: $two-columns-padding 0 0;
+    width: 100%;
+    max-width: 500px;
+    margin: auto;
 
     @media (min-width: $two-columns-breakpoint) {
+      padding: $two-columns-padding;
+      width: 50%;
+
       &:first-child {
         padding-left: 0;
       }

app/controllers/new_user/dossiers_controller.rb

@@ -6,10 +6,35 @@ module NewUser
       send_data(dossier.attestation.pdf.read, filename: 'attestation.pdf', type: 'application/pdf')
     end
 
+    def identite
+      @dossier = dossier
+      @user = current_user
+    end
+
+    def update_identite
+      @dossier = dossier
+
+      individual_updated = @dossier.individual.update(individual_params)
+      dossier_updated = @dossier.update(dossier_params)
+
+      if individual_updated && dossier_updated
+        flash.notice = "Identité enregistrée"
+
+        if @dossier.procedure.module_api_carto.use_api_carto
+          redirect_to users_dossier_carte_path(@dossier.id)
+        else
+          redirect_to users_dossier_description_path(@dossier) # Simon should replace this with dossier_path when done
+        end
+      else
+        flash.now.alert = @dossier.errors.full_messages
+        render :identite
+      end
+    end
+
     private
 
     def dossier
-      Dossier.find(params[:dossier_id])
+      Dossier.find(params[:id] || params[:dossier_id])
     end
 
     def ensure_ownership!
@@ -18,5 +43,13 @@ module NewUser
         redirect_to root_path
       end
     end
+
+    def individual_params
+      params.require(:individual).permit(:gender, :nom, :prenom, :birthdate)
+    end
+
+    def dossier_params
+      params.require(:dossier).permit(:autorisation_donnees)
+    end
   end
 end

app/controllers/new_user/user_controller.rb

@@ -1,5 +1,7 @@
 module NewUser
   class UserController < ApplicationController
+    layout "new_application"
+
     before_action :authenticate_user!
   end
 end

app/controllers/users/dossiers_controller.rb

@@ -73,7 +73,11 @@ class Users::DossiersController < UsersController
 
     update_current_user_siret! siret if siret.present?
 
-    redirect_to users_dossier_path(id: dossier.id)
+    if dossier.procedure.for_individual
+      redirect_to identite_dossier_path(dossier)
+    else
+      redirect_to users_dossier_path(id: dossier.id)
+    end
   rescue ActiveRecord::RecordNotFound
     error_procedure
   end

app/models/dossier.rb

@@ -37,6 +37,8 @@ class Dossier < ActiveRecord::Base
   accepts_nested_attributes_for :champs
   accepts_nested_attributes_for :champs_private
 
+  validates :autorisation_donnees, acceptance: { message: 'doit être coché' }, allow_nil: false, on: :update
+
   default_scope { where(hidden_at: nil) }
   scope :state_brouillon,                      -> { where(state: 'brouillon') }
   scope :state_not_brouillon,                  -> { where.not(state: 'brouillon') }
@@ -177,7 +179,7 @@ class Dossier < ActiveRecord::Base
     etablissement.destroy
     entreprise.destroy
 
-    update_attributes(autorisation_donnees: false)
+    update_columns(autorisation_donnees: false)
   end
 
   def total_follow

app/models/individual.rb

@@ -2,5 +2,18 @@ class Individual < ActiveRecord::Base
   belongs_to :dossier
 
   validates_uniqueness_of :dossier_id
+  validates :gender, presence: true, allow_nil: false, on: :update
+  validates :nom, presence: true, allow_blank: false, allow_nil: false, on: :update
+  validates :prenom, presence: true, allow_blank: false, allow_nil: false, on: :update
   validates :birthdate, format: { with: /\A\d{4}\-\d{2}\-\d{2}\z/, message: "La date n'est pas au format AAAA-MM-JJ" }, allow_nil: true
+
+  before_validation :set_iso_date, if: -> { birthdate_changed? }
+
+  private
+
+  def set_iso_date
+    if birthdate.present?
+      self.birthdate = Date.parse(birthdate).iso8601
+    end
+  end
 end

app/views/new_user/dossiers/identite.html.haml

@@ -0,0 +1,45 @@
+.two-columns
+  .columns-container
+    .column.preview
+      .procedure-logos
+        = image_tag @dossier.procedure.decorate.logo_img
+        - if @dossier.procedure.euro_flag
+          = image_tag "flag_of_europe.svg"
+
+      %h2.procedure-title
+        = @dossier.procedure.libelle
+      %p.procedure-description
+        = h sanitize(@dossier.procedure.description)
+
+    .column
+      = form_for @dossier.individual, url: update_identite_dossier_path(@dossier), html: { class: "form" } do |f|
+        %h1 Données d'identité
+
+        %p.mb-1 Merci de remplir vos informations personnelles pour accéder à la démarche.
+
+        %label
+          %span.mandatory *
+          champs requis
+
+        = f.label :gender, class: "required"
+        = f.select :gender, ['M.', 'Mme'], {}, class: "small"
+
+        .flex
+          .inline-champ
+            = f.label :prenom, class: "required"
+            = f.text_field :prenom, class: "small", required: true
+          .inline-champ
+            = f.label :nom, class: "required"
+            = f.text_field :nom, class: "small", required: true
+
+        - if @dossier.procedure.ask_birthday?
+          = f.label :birthdate, class: "required"
+          = f.date_field :birthdate, value: @dossier.individual.birthdate, placeholder: 'format : AAAA-MM-JJ', required: true, class: "small"
+
+        = fields_for :dossier, @dossier do |df|
+          = label_tag do
+            = df.check_box :autorisation_donnees, required: true
+            J'accepte
+            = link_to "les CGU", CGU_URL, target: :blank
+
+        = f.submit "Continuer", class: "button large primary expand"

config/locales/models/dossier/fr.yml

@@ -14,6 +14,7 @@ fr:
           accepte: "Accepté"
           refuse: "Refusé"
           sans_suite: "Sans suite"
+        autorisation_donnees: Acceptation des CGU
 
     errors:
       models:

config/locales/models/individual/fr.yml

@@ -2,6 +2,7 @@ fr:
   activerecord:
     attributes:
       individual:
+        gender: Civilité
         nom: Nom
         prenom: Prénom
         birthdate: Date de naissance
@@ -9,6 +10,8 @@ fr:
       models:
         individual:
           attributes:
+            gender:
+              blank: 'doit être rempli'
             nom:
               blank: 'doit être rempli'
             prenom:

config/routes.rb

@@ -202,6 +202,10 @@ Rails.application.routes.draw do
 
   scope module: 'new_user' do
     resources :dossiers, only: [] do
+      member do
+        get 'identite'
+        patch 'update_identite'
+      end
       get 'attestation'
     end
   end

spec/controllers/new_user/dossiers_controller_spec.rb

@@ -64,4 +64,43 @@ describe NewUser::DossiersController, type: :controller do
       end
     end
   end
+
+  describe 'update_identite' do
+    let(:procedure) { create(:procedure, :for_individual) }
+    let(:dossier) { create(:dossier, user: user, procedure: procedure) }
+
+    subject { post :update_identite, params: { id: dossier.id, individual: individual_params, dossier: dossier_params } }
+
+    before do
+      sign_in(user)
+      subject
+    end
+
+    context 'with correct individual and dossier params' do
+      let(:individual_params) { { gender: 'M', nom: 'Mouse', prenom: 'Mickey' } }
+      let(:dossier_params) { { autorisation_donnees: true } }
+
+      it do
+        expect(response).to redirect_to(users_dossier_description_path(dossier))
+      end
+
+      context 'on a procedure with carto' do
+        let(:procedure) { create(:procedure, :for_individual, :with_api_carto) }
+
+        it do
+          expect(response).to redirect_to(users_dossier_carte_path(dossier))
+        end
+      end
+    end
+
+    context 'with incorrect individual and dossier params' do
+      let(:individual_params) { { gender: '', nom: '', prenom: '' } }
+      let(:dossier_params) { { autorisation_donnees: nil } }
+
+      it do
+        expect(response).not_to have_http_status(:redirect)
+        expect(flash[:alert]).to include("Civilité doit être rempli", "Nom doit être rempli", "Prénom doit être rempli", "Acceptation des CGU doit être coché")
+      end
+    end
+  end
 end

spec/controllers/users/dossiers_controller_spec.rb

@@ -365,6 +365,8 @@ describe Users::DossiersController, type: :controller do
 
     before do
       sign_in dossier.user
+      dossier.update_columns(autorisation_donnees: nil)
+      dossier.reload
       subject
     end
 

spec/factories/dossier.rb

@@ -1,5 +1,6 @@
 FactoryBot.define do
   factory :dossier do
+    autorisation_donnees true
     state 'brouillon'
     association :user, factory: [:user]
 

spec/features/users/dossier_creation_spec.rb

@@ -13,34 +13,41 @@ feature 'As a User I wanna create a dossier' do
       before do
         login_as user, scope: :user
         visit commencer_path(procedure_path: procedure_for_individual.path)
-        fill_in 'dossier_individual_attributes_nom',       with: 'Nom'
-        fill_in 'dossier_individual_attributes_prenom',    with: 'Prenom'
-        find(:css, "#dossier_autorisation_donnees[value='1']").set(true)
+        fill_in 'individual_nom',       with: 'Nom'
+        fill_in 'individual_prenom',    with: 'Prenom'
+        check "dossier_autorisation_donnees"
       end
 
       context "when birthday is asked" do
         let(:ask_birthday) { true }
 
         scenario "with a proper date input field for birthdate (type='date' supported)" do
-          fill_in 'dossier_individual_attributes_birthdate', with: '1987-10-14'
-          page.find_by_id('etape_suivante').click
-          expect(page).to have_current_path(users_dossier_carte_path(procedure_for_individual.dossiers.last.id.to_s))
-          page.find_by_id('etape_suivante').click
+          fill_in 'individual_birthdate', with: '1987-10-14'
+          click_button('Continuer')
+
+          expect(page).to have_current_path(users_dossier_carte_path(procedure_for_individual.dossiers.last.id))
+          click_button('Etape suivante')
+
+          expect(page).to have_current_path(users_dossier_description_path(procedure_for_individual.dossiers.last.id))
           fill_in "champs_#{procedure_for_individual.dossiers.last.champs.first.id}", with: 'contenu du champ 1'
           find(:css, '[name=submit_action]').set('nouveaux')
-          page.find_by_id('suivant').click
+          click_button('suivant')
+
           expect(user.dossiers.first.individual.birthdate).to eq("1987-10-14")
           expect(page).to have_current_path(users_dossier_recapitulatif_path(procedure_for_individual.dossiers.last.id.to_s))
         end
 
         scenario "with a basic text input field for birthdate (type='date' unsupported)" do
-          fill_in 'dossier_individual_attributes_birthdate', with: '14/10/1987'
-          page.find_by_id('etape_suivante').click
+          fill_in 'individual_birthdate', with: '14/10/1987'
+          click_button('Continuer')
+
           expect(page).to have_current_path(users_dossier_carte_path(procedure_for_individual.dossiers.last.id.to_s))
-          page.find_by_id('etape_suivante').click
+          click_button('Etape suivante')
+
           fill_in "champs_#{procedure_for_individual.dossiers.last.champs.first.id}", with: 'contenu du champ 1'
           find(:css, '[name=submit_action]').set('nouveaux')
           page.find_by_id('suivant').click
+
           expect(user.dossiers.first.individual.birthdate).to eq("1987-10-14")
           expect(page).to have_current_path(users_dossier_recapitulatif_path(procedure_for_individual.dossiers.last.id.to_s))
         end
@@ -50,12 +57,15 @@ feature 'As a User I wanna create a dossier' do
         let(:ask_birthday) { false }
 
         scenario "no need for birthday" do
-          page.find_by_id('etape_suivante').click
+          click_button('Continuer')
+
           expect(page).to have_current_path(users_dossier_carte_path(procedure_for_individual.dossiers.last.id.to_s))
-          page.find_by_id('etape_suivante').click
+          click_button('Etape suivante')
+
           fill_in "champs_#{procedure_for_individual.dossiers.last.champs.first.id}", with: 'contenu du champ 1'
           find(:css, '[name=submit_action]').set('nouveaux')
-          page.find_by_id('suivant').click
+          click_button('suivant')
+
           expect(user.dossiers.first.individual.birthdate).to eq(nil)
           expect(page).to have_current_path(users_dossier_recapitulatif_path(procedure_for_individual.dossiers.last.id.to_s))
         end

spec/features/users/dossier_index_spec.rb

@@ -6,16 +6,11 @@ feature 'As a User I want to sort and paginate dossiers', js: true do
 
   before "Create dossier" do
     login_as user, scope: :user
-    visit commencer_path(procedure_path: procedure_for_individual.path)
-    fill_in 'dossier_individual_attributes_nom',       with: 'Nom'
-    fill_in 'dossier_individual_attributes_prenom',    with: 'Prenom'
-    fill_in 'dossier_individual_attributes_birthdate', with: '14/10/1987'
-    find(:css, "#dossier_autorisation_donnees[value='1']").set(true)
-    page.find_by_id('etape_suivante').click
-    page.find_by_id('suivant').click
+
     50.times do
       Dossier.create(procedure_id: procedure_for_individual.id, user_id: user.id, state: "en_construction")
     end
+
     visit root_path
   end
 
@@ -25,8 +20,8 @@ feature 'As a User I want to sort and paginate dossiers', js: true do
       expect(page.all(:css, '#dossiers-list tr')[1].text.split(" ").first).to eq(user.dossiers.first.id.to_s)
       expect(page.all(:css, '#dossiers-list tr')[2].text.split(" ").first).to eq(user.dossiers.second.id.to_s)
       visit "/users/dossiers?dossiers_smart_listing[sort][id]=desc"
-      expect(page.all(:css, '#dossiers-list tr')[1].text.split(" ").first).to eq((user.dossiers.first.id + 50).to_s)
-      expect(page.all(:css, '#dossiers-list tr')[2].text.split(" ").first).to eq((user.dossiers.first.id + 49).to_s)
+      expect(page.all(:css, '#dossiers-list tr')[1].text.split(" ").first).to eq((user.dossiers.first.id + 49).to_s)
+      expect(page.all(:css, '#dossiers-list tr')[2].text.split(" ").first).to eq((user.dossiers.first.id + 48).to_s)
       visit "/users/dossiers?dossiers_smart_listing[sort][id]=asc"
       expect(page.all(:css, '#dossiers-list tr')[1].text.split(" ").first).to eq(user.dossiers.first.id.to_s)
       expect(page.all(:css, '#dossiers-list tr')[2].text.split(" ").first).to eq(user.dossiers.second.id.to_s)