From 7ada3692cfc3f4b84460ea0d0392211b78ecbcb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20L=C3=B3pez?= <marina.lopez.yap@gmail.com>
Date: Tue, 15 Apr 2025 13:07:54 +0200
Subject: [PATCH] :sparkles: Design improvements to the Invitations page with
 an empty state

---
 CHANGES.md                                   |  1 +
 frontend/src/app/main/ui/dashboard/team.cljs | 32 +++++++++++++++-----
 frontend/src/app/main/ui/dashboard/team.scss |  6 ++++
 frontend/translations/en.po                  |  5 ++-
 frontend/translations/es.po                  |  5 ++-
 5 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index aeb17840b5..d2072c3072 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -12,6 +12,7 @@
 
 - Update board presets with a newer devices [Taiga #10610](https://tree.taiga.io/project/penpot/us/10610)
 - Propagate "sharing a prototype" to editors and viewers [Taiga #8853](https://tree.taiga.io/project/penpot/us/8853)
+- Design improvements to the Invitations page with an empty state [Taiga #4554](https://tree.taiga.io/project/penpot/us/4554)
 
 ### :bug: Bugs fixed
 
diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs
index b04dfbea0e..22a88763b1 100644
--- a/frontend/src/app/main/ui/dashboard/team.cljs
+++ b/frontend/src/app/main/ui/dashboard/team.cljs
@@ -74,6 +74,7 @@
         invitations-section? (= section :dashboard-team-invitations)
         webhooks-section?    (= section :dashboard-team-webhooks)
         permissions          (:permissions team)
+        invitations          (:invitations team)
 
         on-invite-member
         (mf/use-fn
@@ -108,7 +109,7 @@
        [:li {:class (when settings-section? (stl/css :active))}
         [:a {:on-click on-nav-settings} (tr "labels.settings")]]]]
      [:div {:class (stl/css :dashboard-buttons)}
-      (if (and (or invitations-section? members-section?) (:is-admin permissions))
+      (if (and (or invitations-section? members-section?) (:is-admin permissions) (not-empty invitations))
         [:a
          {:class (stl/css :btn-secondary :btn-small)
           :on-click on-invite-member
@@ -735,12 +736,27 @@
 (mf/defc empty-invitation-table*
   {::mf/props :obj
    ::mf/private true}
-  [{:keys [can-invite]}]
-  [:div {:class (stl/css :empty-invitations)}
-   [:span (tr "labels.no-invitations")]
-   (when ^boolean can-invite
-     [:> i18n/tr-html* {:content (tr "labels.no-invitations-hint")
-                        :tag-name "span"}])])
+  [{:keys [can-invite team]}]
+  (let
+   [route                (mf/deref refs/route)
+    invite-email         (-> route :query-params :invite-email)
+    on-invite-member     (mf/use-fn
+                          (mf/deps team invite-email)
+                          (fn []
+                            (st/emit! (modal/show {:type :invite-members
+                                                   :team team
+                                                   :origin :team
+                                                   :invite-email invite-email}))))]
+    [:div {:class (stl/css :empty-invitations)}
+     [:span (tr "labels.no-invitations")]
+     (when ^boolean can-invite
+       [[:span (tr "labels.no-invitations-gather-people")]
+        [:a
+         {:class (stl/css :btn-empty-invitations)
+          :on-click on-invite-member
+          :data-testid "invite-member"}
+         (tr "dashboard.invite-profile")]
+        [:div {:class (stl/css :blank-space)}]])]))
 
 (mf/defc invitation-section*
   {::mf/props :obj
@@ -761,7 +777,7 @@
       [:div {:class (stl/css :title-field-role)} (tr "labels.role")]
       [:div {:class (stl/css :title-field-status)} (tr "labels.status")]]
      (if (empty? invitations)
-       [:> empty-invitation-table* {:can-invite can-invite?}]
+       [:> empty-invitation-table* {:can-invite can-invite? :team team}]
        [:div {:class (stl/css :table-rows)}
         (for [invitation invitations]
           [:> invitation-row*
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index d6436705fe..1bb18c6215 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -310,6 +310,12 @@
   color: var(--dashboard-list-text-foreground-color);
 }
 
+.btn-empty-invitations {
+  @extend .button-primary;
+  margin-block-start: $s-16;
+  padding-inline: $s-12;
+}
+
 .title-field-status {
   position: relative;
   cursor: default;
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index d9f86cddc1..1e31799749 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -2152,9 +2152,8 @@ msgid "labels.no-invitations"
 msgstr "No pending invitations."
 
 #: src/app/main/ui/dashboard/team.cljs:742
-#, markdown
-msgid "labels.no-invitations-hint"
-msgstr "Click the **Invite people** button to invite people to this team."
+msgid "labels.no-invitations-gather-people"
+msgstr "Gather your people and build great things together."
 
 #: src/app/main/ui/static.cljs
 #, unused
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index e24e084f80..d594384555 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -2175,9 +2175,8 @@ msgid "labels.no-invitations"
 msgstr "No hay invitaciones pendientes."
 
 #: src/app/main/ui/dashboard/team.cljs:742
-#, markdown
-msgid "labels.no-invitations-hint"
-msgstr "Pulsa el botón 'Invitar al equipo' para añadir más integrantes al equipo."
+msgid "labels.no-invitations-gather-people"
+msgstr "Reúne a tu gente y construid juntos grandes cosas."
 
 #: src/app/main/ui/static.cljs
 #, unused