Replace solidarity drivers

config.yaml

@@ -288,6 +288,7 @@ views:
         - web/layouts/solidarity_transport/driver_journey.html
     booking_display:
       files:
+        - sms/solidarity_transport/request_driver.tmpl
         - web/layouts/solidarity_transport/_partials/journey_map.html
         - web/layouts/solidarity_transport/_partials/journey_preview.html
         - web/layouts/solidarity_transport/booking_display.html
@@ -484,7 +485,7 @@ emails:
         - emails/layout.html
         - emails/solidarity_transport/booking_driver_accept.html
     booking_driver_decline:
-      subject: Trajet accepté par un conducteur
+      subject: Trajet refusé par un conducteur
       files:
         - emails/layout.html
         - emails/solidarity_transport/booking_driver_decline.html

web/layouts/solidarity_transport/_partials/bookings_history.html

@@ -22,7 +22,8 @@
       status: '{{.Status}}',
       price: '{{if .Journey}}{{ printf "%.2f" (round2 .Journey.Price.Amount) }}{{end}}',
       currency: '{{if .Journey}}{{.Journey.Price.Currency}}{{end}}',
-      motivation: {{ if .Data.motivation }}'{{ jsEscape .Data.motivation }}'{{ else }}''{{ end }}
+      motivation: {{ if .Data.motivation }}'{{ jsEscape .Data.motivation }}'{{ else }}''{{ end }},
+      replacedBy: {{ if .Data.replaced_by }}'{{ .Data.replaced_by }}'{{ else }}''{{ end }}
     }{{end}}
   ],
   currentPage: 1,
@@ -71,7 +72,7 @@
   </thead>
   <tbody class="divide-y divide-gray-200 bg-white">
     <template x-for="booking in paginatedBookings" :key="booking.id">
-      <tr>
+      <tr :class="booking.replacedBy ? 'bg-gray-200' : ''">
         <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
           <a class="text-co-blue" :href="'/app/solidarity-transport/drivers/' + booking.driverId">
             <span x-text="booking.driverFirstName + ' ' + booking.driverLastName"></span>

web/layouts/solidarity_transport/booking_display.html

@@ -17,6 +17,15 @@
     {{ end }}
 
     <div class="mt-6 flex justify-end space-x-3">
+      {{if .ViewState.booking.Data.replaced_by}}
+      <!-- Booking has been replaced, show link to replacement -->
+      <a href="/app/solidarity-transport/bookings/{{.ViewState.booking.Data.replaced_by}}" class="inline-flex">
+        <button type="button" class="px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">
+          Remplacé par →
+        </button>
+      </a>
+      {{else}}
+      <!-- Normal action buttons -->
       {{if eq .ViewState.booking.Status "WAITING_CONFIRMATION" }}
       <a href="/app/solidarity-transport/bookings/{{.ViewState.booking.Id}}/confirm" class="inline-flex">
         <button type="button" class="px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">
@@ -86,11 +95,114 @@
       </a>
 
       {{if eq .ViewState.booking.Status "CANCELLED" }}
-      <a href="/app/journeys/?departure={{json .ViewState.booking.Journey.PassengerPickup}}&destination={{ json .ViewState.booking.Journey.PassengerDrop }}&departuredate={{ .ViewState.booking.Journey.PassengerPickupDate.Format "2006-01-02"}}&departuretime={{ (timeFrom .ViewState.booking.Journey.PassengerPickupDate).Format "15:04"}}&passengerid={{.ViewState.booking.PassengerId}}&solidarity_transport_exclude_driver={{.ViewState.booking.DriverId}}" class="inline-flex">
+      {{$dialogReplace := "replace_driver"}}
-        <button type="button" class="px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">
+      <div x-data="{ {{ $dialogReplace }}: false}">
+        <button @click="{{ $dialogReplace }} = !{{ $dialogReplace }}" type="button" class="px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">
           Solliciter un autre conducteur
         </button>
-      </a>
+
+        <!-- Modal for replacement drivers -->
+        <div x-show="{{$dialogReplace}}" class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+          <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+          <div class="fixed inset-0 z-10 overflow-y-auto">
+            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-6">
+
+              <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full max-w-6xl sm:p-6 m-4">
+                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-co bg-co-blue text-white">
+                  {{$.IconSet.Icon "hero:outline/users" "h-6 w-6"}}
+                </div>
+                <div class="mt-3 text-center sm:mt-5">
+                  <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Conducteurs disponibles</h3>
+                  <div class="mt-2">
+                    <p class="text-sm text-gray-500">Sélectionnez un conducteur de remplacement</p>
+                  </div>
+                </div>
+
+                <div class="mt-4">
+                  {{if .ViewState.replacement_drivers}}
+                  <table class="min-w-full divide-y divide-gray-300">
+                    <thead class="bg-gray-50">
+                      <tr>
+                        <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Conducteur</th>
+                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Lieu de départ</th>
+                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Distance conducteur</th>
+                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Distance passager</th>
+                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Prix passager</th>
+                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Indemnité conducteur</th>
+                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Profil validé</th>
+                        <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                          <span class="sr-only">Actions</span>
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-200 bg-white">
+                      {{range $index, $journey := .ViewState.replacement_drivers}}
+                      {{$driver := index $.ViewState.replacement_drivers_map $journey.DriverId}}
+                      {{$pricing := index $.ViewState.replacement_pricing $journey.Id}}
+                      {{$location := index $.ViewState.replacement_locations $journey.Id}}
+                      <tr>
+                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+                          {{$driver.Data.first_name}} {{$driver.Data.last_name}}
+                        </td>
+                        <td class="px-3 py-4 text-sm text-gray-500">
+                          {{if $location}}{{$location}}{{else}}-{{end}}
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                          {{$journey.DriverDistance}} km
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                          {{$journey.PassengerDistance}} km
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                          {{if $pricing}}
+                          {{printf "%.2f" $pricing.passenger.amount}} {{$pricing.passenger.currency}}
+                          {{else}}-{{end}}
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                          {{if $pricing}}
+                          {{printf "%.2f" $pricing.driver.amount}} {{$pricing.driver.currency}}
+                          {{else}}-{{end}}
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                          {{if solidarityDriverValidatedProfile $driver (solidarityDocuments $driver.ID)}}
+                          <span class="p-1 px-2 text-xs bg-co-green text-white rounded-2xl">Oui</span>
+                          {{else}}
+                          <span class="p-1 px-2 text-xs bg-co-red text-white rounded-2xl">Non</span>
+                          {{end}}
+                        </td>
+                        <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                          <form method="POST" action="/app/solidarity-transport/bookings/{{$.ViewState.booking.Id}}/create-replacement" class="inline">
+                            <input type="hidden" name="driver_id" value="{{$journey.DriverId}}" />
+                            <input type="hidden" name="journey_id" value="{{$journey.Id}}" />
+                            <input type="hidden" name="message" value="{{template "sms_template" (dict "name" ($.ViewState.config.GetString "service_name") "datetime" (timeFormat $journey.PassengerPickupDate.AsTime "02/01/2006 15:04") "baseUrl" ($.ViewState.config.GetString "base_url"))}}" />
+                            <button type="submit" class="text-co-blue hover:text-co-blue-dark underline">
+                              Solliciter
+                            </button>
+                          </form>
+                        </td>
+                      </tr>
+                      {{end}}
+                    </tbody>
+                  </table>
+                  {{else}}
+                  <div class="text-center py-8">
+                    <p class="text-sm text-gray-500">Aucun conducteur disponible pour ce trajet</p>
+                  </div>
+                  {{end}}
+                </div>
+
+                <div class="mt-5 sm:mt-6">
+                  <button @click="{{$dialogReplace}} = !{{$dialogReplace}}" type="button" class="inline-flex w-full justify-center rounded-2xl border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:text-sm">
+                    Fermer
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {{end}}
       {{end}}
     </div>
 </div>

web/layouts/solidarity_transport/driver_journey.html

@@ -34,6 +34,9 @@
     <p class="text-xl text-co-red text-center p-4">Le solde du compte mobilité est insuffisant. <a href="/app/beneficiaries/{{.ViewState.passenger.ID}}?tab=wallet" class="underline text-co-blue">Créditer le compte</a></p>
     {{end}}
   <form method="POST">
+    {{if .ViewState.replaces_booking_id}}
+    <input type="hidden" name="replaces_booking_id" value="{{.ViewState.replaces_booking_id}}" />
+    {{end}}
     {{if not .ViewState.driver_journey.Noreturn}}
     <div class="m-auto text-center">
       <label for="return_waiting_time" class="block text-sm font-medium text-gray-700">Durée d'attente à destination (minutes)</label>

web/public/css/main.css

@@ -58,6 +58,7 @@
     --container-lg: 32rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
+    --container-6xl: 72rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -352,9 +353,15 @@
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
   .z-40 {
     z-index: 40;
   }
+  .z-50 {
+    z-index: 50;
+  }
   .z-auto {
     z-index: auto;
   }
@@ -881,6 +888,9 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
   .max-w-7xl {
     max-width: var(--container-7xl);
   }