feat(prayers): Implement daily limit tooltip

This commit updates the prayer button template to add a tooltip that displays a message informing the user that they have reached their daily limit.

cl/favorites/views.py

@@ -202,7 +202,19 @@ async def create_prayer_view(
     request: HttpRequest, recap_document: int
 ) -> HttpResponse:
     user = request.user
+    is_htmx_request = request.META.get("HTTP_HX_REQUEST", False)
     if not await prayer_eligible(request.user):
+        if is_htmx_request:
+            return TemplateResponse(
+                request,
+                "includes/pray_and_pay_htmx/pray_button.html",
+                {
+                    "prayer_exists": False,
+                    "document_id": recap_document,
+                    "count": 0,
+                    "daily_limit_reached": True,
+                },
+            )
         return HttpResponseServerError(
             "User have reached your daily request limit"
         )
@@ -211,15 +223,15 @@ async def create_prayer_view(
 
     # Call the create_prayer async function
     await create_prayer(user, recap_document)
-
-    if request.META.get("HTTP_HX_REQUEST"):
+    if is_htmx_request:
         return TemplateResponse(
             request,
             "includes/pray_and_pay_htmx/pray_button.html",
             {
                 "prayer_exists": True,
                 "document_id": recap_document.pk,
                 "count": 0,
+                "daily_limit_reached": False,
             },
         )
     return HttpResponse("It worked.")

cl/opinion_page/static/js/pay_and_pray.js

@@ -48,8 +48,18 @@ document.addEventListener('htmx:oobBeforeSwap', function (event) {
   // fragment to avoid unnecessary server calculations.
   let form = event.detail.elt;
   let button = form.querySelector('button');
+  // If the daily limit tooltip is present in the fragment, it means the user
+  // has reached their limit. Therefore, we should revert any changes made to
+  // the prayer button.
+  if (event.detail.fragment.querySelector('#daily_limit_tooltip')) {
+    updatePrayerButton(button);
+  }
   let documentId = button.dataset.documentId;
   let prayerCounterSpan = document.querySelector(`#counter_${documentId}`);
   let prayerCount = parseInt(prayerCounterSpan.innerText, 10);
   event.detail.fragment.getElementById(`counter_${documentId}`).innerText = prayerCount;
 });
+
+document.addEventListener('htmx:oobAfterSwap', function (event) {
+  $('[data-toggle="tooltip"]').tooltip();
+});

cl/opinion_page/templates/includes/pray_and_pay_htmx/pray_button.html

@@ -1,13 +1,19 @@
 {% if request.user.is_authenticated %}
   <form id="pray_{{document_id}}" hx-post="{% if prayer_exists %}{% url 'delete_prayer' document_id %}{% else %}{% url 'create_prayer' document_id %}{% endif %}"
-    hx-swap="none" style="display:inline;" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-swap-oob="true">
+    hx-swap="none" class="flex" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-swap-oob="true">
     <button type="submit"
             class="btn btn-xs {% if prayer_exists %}btn-primary{% else %}btn-default{% endif %}"
             data-document-id="{{ document_id }}"
-            title="{% if prayer_exists %}Click to remove your request.{% elif not prayer_eligible %}You have reached your daily request limit.{% else %}Click to request this document.{% endif %}"
+            title="{% if prayer_exists %}Click to remove your request.{% else %}Click to request this document.{% endif %}"
             >
     <span id="counter_{{ document_id }}">{{count}}</span> 🙏
     </button>
+    {% if daily_limit_reached %}
+    &nbsp;
+    <span id='daily_limit_tooltip' data-toggle="tooltip" data-placement="left" title="You have reached your daily request limit.">
+      <i class="fa fa-lg fa-exclamation-circle red" aria-hidden="true"></i>
+    </span>
+    {% endif %}
   </form>
 {% else %}
   <button