feat: implement add clipboard functionality for cause URL (#605)

Author: tudoramariei

backend/donations/views/ngo_account/causes.py

@@ -30,12 +30,23 @@ def get_context_data(self, **kwargs):
 
         ngo: Ngo = context["ngo"]
 
+        cause: Cause | None = self.get_cause(ngo=ngo, cause_id=kwargs.get("cause_id"))
+        context["cause"] = cause
+        if cause:
+            context["absolute_cause_url"] = self.get_absolute_cause_url(cause_slug=cause.slug)
+
         context["info_banner_items"] = self.get_ngo_cause_banner_list_items(ngo)
         context["visibility_choices"] = CauseVisibilityChoices.as_str_pretty()
         context["ngo_has_tax_account"] = ngo.has_online_tax_account
 
         return context
 
+    def get_absolute_cause_url(self, cause_slug: str) -> str:
+        return self.request.build_absolute_uri(reverse("twopercent", kwargs={"cause_slug": cause_slug}))
+
+    def get_cause(self, *, ngo: Ngo, cause_id: int | None) -> Cause | None:
+        raise NotImplementedError
+
     def get_ngo_cause_banner_list_items(self, ngo: Ngo) -> list[str]:
         banner_list_items = [
             _("Organization name: ") + ngo.name,
@@ -176,6 +187,9 @@ def get_context_data(self, **kwargs):
 
         return context
 
+    def get_cause(self, *, ngo: Ngo, cause_id: int | None) -> Cause | None:
+        return None
+
     @method_decorator(login_required(login_url=reverse_lazy("login")))
     def get(self, request, *args, **kwargs):
         user: User = request.user
@@ -208,7 +222,7 @@ def get_context_data(self, **kwargs):
 
         page_title = _("Edit cause")
 
-        context["cause"] = self.get_cause(cause_id=kwargs["cause_id"], ngo=context["ngo"])
+        context["cause"] = self.get_cause(ngo=context["ngo"], cause_id=kwargs["cause_id"])
         context["django_form"] = CauseForm(instance=context["cause"], for_main_cause=self.is_main_cause)
 
         context["page_title"] = f'{page_title}: "{context["cause"].name}"'
@@ -224,11 +238,8 @@ def get_context_data(self, **kwargs):
 
         return context
 
-    def get_cause(self, cause_id: int, ngo: Ngo) -> Cause:
-        if not ngo:
-            raise Http404
-
-        if not cause_id:
+    def get_cause(self, *, ngo: Ngo, cause_id: int | None) -> Cause | None:
+        if not (ngo and cause_id):
             raise Http404
 
         cause = Cause.objects.filter(pk=cause_id, ngo=ngo).first()

backend/donations/views/ngo_account/my_organization.py

@@ -2,6 +2,7 @@
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
 from django.core.exceptions import PermissionDenied
+from django.http import Http404
 from django.shortcuts import redirect, render
 from django.urls import reverse, reverse_lazy
 from django.utils.decorators import method_decorator
@@ -164,7 +165,6 @@ def __init__(self, *args, **kwargs):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(is_main_cause=True, **kwargs)
 
-        context["cause"] = self.get_main_cause(context.get("ngo"))
         context["is_main_cause"] = self.is_main_cause
 
         context["django_form"] = CauseForm(instance=context["cause"], for_main_cause=self.is_main_cause)
@@ -179,7 +179,10 @@ def get_context_data(self, **kwargs):
         context["active_tab"] = self.tab_title
         return context
 
-    def get_main_cause(self, ngo: Ngo) -> Cause:
+    def get_cause(self, *, ngo: Ngo, cause_id: int | None) -> Cause | None:
+        if not ngo:
+            raise Http404
+
         return Cause.objects.filter(ngo=ngo, is_main=True).first()
 
     @method_decorator(login_required(login_url=reverse_lazy("login")))

backend/templates/v2/components/copy-to-clipboard/icon_and_text.html

@@ -0,0 +1,31 @@
+{% extends "components/copy-to-clipboard/base.html" %}
+
+{% load i18n %}
+
+
+{% block clickable_content %}
+  <span class="flex items-center justify-center gap-x-1.5 ">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 {{ view_box_size }} {{ view_box_size }}"
+      fill="currentColor"
+      class="size-5">
+
+      {% if icon_path %}
+        <path d="{{ icon_path }}"/>
+      {% else %}
+        <path
+          d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"/>
+        <path
+          d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"/>
+      {% endif %}
+    </svg>
+
+    {% if button_text %}
+      {{ button_text }}
+    {% else %}
+      {{ block.super }}
+    {% endif %}
+  </span>
+
+{% endblock %}

backend/templates/v2/ngo-account/components/form-title.html

@@ -8,6 +8,8 @@ <h2 class="text-2xl text-gray-900 lg:col-span-2 text-bold">
 
   <div class="grid items-center justify-end gap-2 sm:flex md:col-span-2">
     {% if not hide_public_page_button and ngo.can_create_causes and cause %}
+      {% include "components/copy-to-clipboard/icon_and_text.html" with clipboard_input=absolute_cause_url div_classes="px-3 py-2 text-sm font-semibold text-gray-700 no-underline border-2 rounded-md border-gray-300 bg-white hover:bg-gray-200 hover:cursor-pointer" %}
+
       <a
         href="{% url 'twopercent' cause_slug=cause.slug %}"
         target="_blank"
@@ -24,7 +26,7 @@ <h2 class="text-2xl text-gray-900 lg:col-span-2 text-bold">
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
-              d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+              d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
           </svg>
 
           <span>
@@ -57,7 +59,7 @@ <h2 class="text-2xl text-gray-900 lg:col-span-2 text-bold">
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
-              d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+              d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"/>
           </svg>
 
           <span>