Add button to close booking in backoffice

backoffice/templates/backoffice/bookings/bookings_list.html

@@ -22,6 +22,10 @@
         scope="col">
       Vehicle
     </th>
+    <th class="border-b border-gray-200 bg-gray-50 py-3 pr-6 text-right text-sm font-semibold text-gray-900"
+        scope="col">
+      Close Booking
+    </th>
   </tr>
   </thead>
   <tbody class="divide-y divide-gray-100 bg-white">

backoffice/templates/backoffice/bookings/bookings_list_item.html

@@ -21,4 +21,7 @@
   <td class="whitespace-nowrap px-6 py-3 text-right text-sm text-gray-500">
     {{ b.vehicle.registration }}
   </td>
+  <td class="whitespace-nowrap px-6 py-3 text-right text-sm text-gray-500">
+    {% include "backoffice/bookings/close_booking_modal.html" %}
+  </td>
 </tr>

backoffice/templates/backoffice/bookings/close_booking_modal.html

@@ -0,0 +1,23 @@
+{% extends "components/modal.html" %}
+
+{%block style %}flex flex-row text-red-600{% endblock %}
+
+{%block svg %}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5">
+        <path fill-rule="evenodd"
+          d="M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z"
+          clip-rule="evenodd"/>
+    </svg>
+{% endblock %}
+
+{%block button_text %}Close{% endblock %}
+
+{%block title %}Close Booking{% endblock %}
+
+{% block explanation %}
+    <p class="text-sm text-gray-500">Are you sure you wish to close this booking?</p>
+{% endblock %}
+
+{% block endpoint %} {% url "backoffice_close_booking" b.id %} {% endblock %}
+
+{%block confirm %}Close Booking{% endblock %}

backoffice/urls.py

@@ -28,4 +28,14 @@
         views.reject_billing_account,
         name="backoffice_reject_billing_account",
     ),
+    path(
+        "bookings/closebooking/<int:booking_id>/<int:should_lock>/",
+        views.close_booking,
+        name="backoffice_close_booking",
+    ),
+    path(
+        "bookings/closebooking/<int:booking_id>/",
+        views.close_booking,
+        name="backoffice_close_booking",
+    ),
 ]

backoffice/views.py

@@ -26,7 +26,7 @@
     get_all_pending_approval as get_all_driver_profiles_pending_approval,
     DriverProfile,
 )
-from hardware.models import Vehicle
+from hardware.models import Vehicle, Box, BoxAction
 from users.models import User
 
 from .decorators import require_backoffice_access
@@ -305,3 +305,32 @@ def vehicles(request):
     context["page_range"] = page_range
 
     return render(request, "backoffice/vehicles.html", context)
+
+
+@require_backoffice_access
+def close_booking(request, booking_id, should_lock=True):
+    context = {
+        "menu": "bookings",
+        "user": request.user,
+    }
+
+    booking = Booking.objects.get(pk=booking_id)
+    booking.state = Booking.STATE_ENDED
+    booking.save()
+
+    box = Box.objects.get(pk=booking.vehicle.box.id)
+    box.current_booking = None
+    box.save()
+
+    if should_lock:
+        time_to_expire = timezone.now() + timezone.timedelta(minutes=10)
+        action = BoxAction(
+            action="lock",
+            created_at=timezone.now(),
+            expires_at=time_to_expire,
+            box=box,
+            user_id=request.user.id,
+        )
+        action.save()
+
+    return redirect(reverse("backoffice_bookings"))

theme/templates/components/modal.html

@@ -0,0 +1,77 @@
+<div class="flex-1 flex w-full" x-data="{lockModalOpen: false}">
+    <a href="#"
+       @click="lockModalOpen=true"
+       class="{% block style %}relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:bg-gray-300{% endblock %}">
+
+      {% block svg %}{% endblock %}
+
+      <span class="ml-3">{% block button_text %}Click{% endblock %}</span>
+    </a>
+
+    <div
+      x-cloak
+      x-show="lockModalOpen"
+      class="relative z-10"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+      x-transition:enter="ease-out duration-300"
+      x-transition:enter-start="opacity-0"
+      x-transition:enter-end="opacity-100"
+      x-transition:leave="ease-in duration-200"
+      x-transition:leave-start="opacity-100"
+      x-transition:leave-end="opacity-0"
+    >
+      <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
+          x-show="lockModalOpen"
+          class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+          x-transition:enter="ease-out duration-300"
+          x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+          x-transition:leave="ease-in duration-200"
+          x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+          x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <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 sm:max-w-lg sm:p-6">
+            <div class="sm:flex sm:items-start">
+              <div
+                class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                <!-- Heroicon name: outline/exclamation-triangle -->
+                <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none"
+                     viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round"
+                        d="M12 10.5v3.75m-9.303 3.376C1.83 19.126 2.914 21 4.645 21h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 4.88c-.866-1.501-3.032-1.501-3.898 0L2.697 17.626zM12 17.25h.007v.008H12v-.008z"/>
+                </svg>
+              </div>
+              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">{% block title %}Confirm your choice{% endblock %}</h3>
+                <div class="mt-2">
+                  {% block explanation %}<p class="text-sm text-gray-500">Are you sure you wish to proceed?</p>{% endblock %}
+                </div>
+              </div>
+            </div>
+            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+              <a
+                href="{% block endpoint %}{% endblock %}"
+                type="button"
+                class="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+              >
+                {% block confirm %}Confirm{% endblock %}
+              </a>
+              <button
+                type="button"
+                class="mt-3 inline-flex w-full justify-center rounded-md 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-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
+                @click="lockModalOpen=false"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+

theme/templates/components/modal_example.html

@@ -0,0 +1,23 @@
+{% extends "components/modal.html" %}
+
+{%block style %}relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:bg-gray-300{% endblock %}
+
+{%block svg %}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5">
+        <path fill-rule="evenodd"
+          d="M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z"
+          clip-rule="evenodd"/>
+    </svg>
+{% endblock %}
+
+{%block button_text %}Lock{% endblock %}
+
+{%block title %}Lock Vehicle{% endblock %}
+
+{% block explanation %}
+    <p class="text-sm text-gray-500">Are you sure you wish to lock that vehicle?</p>
+{% endblock %}
+
+{% block endpoint %} {% url "backoffice_vehicles" %} {% endblock %}
+
+{%block confirm %}Lock Car{% endblock %}