✨ Multiple team invitations on onboarding

CHANGES.md

@@ -8,6 +8,7 @@
 - Added shortcut panel in workspace [Taiga #36](https://tree.taiga.io/project/penpot/us/36)
 - Added selected colors widget in right sidebar [Taiga #2485](https://tree.taiga.io/project/penpot/us/2485)
 - Added fixed elements when scrolling [Taiga #1533](https://tree.taiga.io/project/penpot/us/1533)
+- Multiple team invitations on onboarding [Taiga #3084](https://tree.taiga.io/project/penpot/us/3084)
 
 ### :bug: Bugs fixed
 ### :arrow_up: Deps updates

frontend/resources/styles/main/partials/forms.scss

@@ -274,7 +274,7 @@ textarea {
         max-width: 85%;
         overflow: hidden;
         text-overflow: ellipsis;
-        line-height: 15px;
+        line-height: 16px;
         font-size: 14px;
         color: $color-black;
       }

frontend/resources/styles/main/partials/modal.scss

@@ -1231,7 +1231,7 @@
       }
 
       .btn-primary {
-        width: 117px;
+        min-width: 117px;
       }
     }
 
@@ -1254,7 +1254,18 @@
       }
 
       .custom-select {
-        width: 118px;
+        width: 180px;
+        overflow: hidden;
+        justify-content: normal;
+        select {
+          height: auto;
+        }
+      }
+
+      svg {
+        width: 12px;
+        height: 12px;
+        fill: $color-gray-20;
       }
     }
 

frontend/src/app/main/data/dashboard.cljs

@@ -326,11 +326,9 @@
 
 ;; --- EVENT: create-team-with-invitations
 
-;; NOTE: right now, it only handles a single email, in a near future
-;; this will be changed to the ability to specify multiple emails.
 
 (defn create-team-with-invitations
-  [{:keys [name email role] :as params}]
+  [{:keys [name emails role] :as params}]
   (us/assert string? name)
   (ptk/reify ::create-team-with-invitations
     ptk/WatchEvent
@@ -339,7 +337,7 @@
              :or {on-success identity
                   on-error rx/throw}} (meta params)
             params {:name name
-                    :emails #{email}
+                    :emails #{emails}
                     :role role}]
         (->> (rp/mutation! :create-team-and-invite-members params)
              (rx/tap on-success)

frontend/src/app/main/ui/onboarding/team_choice.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.onboarding.team-choice
   (:require
+   [app.common.data :as d]
    [app.common.spec :as us]
    [app.main.data.dashboard :as dd]
    [app.main.data.messages :as dm]
@@ -72,8 +73,8 @@
     [:div.modal-overlay
      [:div.modal-container.onboarding-team
       [:div.title
-       [:h2 {:data-test "onboarding-choice-team-up"} (tr "onboarding.choice.team-up")]
+       [:h2 {:data-test "onboarding-choice-team-up"} (tr "onboarding.choice.team-up.create-team")]
-       [:p (tr "onboarding.choice.team-up-desc")]]
+       [:p (tr "onboarding.choice.team-up.create-team-desc")]]
 
       [:& fm/form {:form form
                    :on-submit on-submit}
@@ -81,14 +82,14 @@
        [:div.team-row
         [:& fm/input {:type "text"
                       :name :name
-                      :label (tr "onboarding.team-input-placeholder")}]]
+                      :label (tr "onboarding.choice.team-up.create-team-placeholder")}]]
 
        [:div.buttons
         [:button.btn-secondary.btn-large
          {:on-click #(st/emit! (modal/show {:type :onboarding-choice}))}
-         (tr "labels.cancel")]
+         (tr "labels.back")]
         [:& fm/submit-button
-         {:label (tr "labels.next")}]]]
+         {:label (tr "labels.continue")}]]]
 
       [:img.deco {:src "images/deco-left.png" :border "0"}]
       [:img.deco.right {:src "images/deco-right.png" :border "0"}]]]))
@@ -98,10 +99,10 @@
   [{:value "editor" :label (tr "labels.editor")}
    {:value "admin" :label (tr "labels.admin")}])
 
-(s/def ::email ::us/email)
+(s/def ::emails (s/and ::us/set-of-emails d/not-empty?))
 (s/def ::role  ::us/keyword)
 (s/def ::invite-form
-  (s/keys :req-un [::role ::email]))
+  (s/keys :req-un [::role ::emails]))
 
 ;; This is the final step of team creation, consists in provide a
 ;; shortcut for invite users.
@@ -154,27 +155,31 @@
     [:div.modal-overlay
      [:div.modal-container.onboarding-team
       [:div.title
-       [:h2 (tr "onboarding.choice.team-up")]
+       [:h2 (tr "onboarding.choice.team-up.invite-members")]
-       [:p (tr "onboarding.choice.team-up-desc")]]
+       [:p (tr "onboarding.choice.team-up.invite-members-desc")]]
 
       [:& fm/form {:form form
                    :on-submit on-submit}
       
+       
        [:div.invite-row
-       [:& fm/input {:name :email
+          [:& fm/multi-input {:type "email"
-                     :label (tr "labels.email")}]
+                              :name :emails
-       [:& fm/select {:name :role
+                              :auto-focus? true
-                      :options roles}]]
+                              :trim true
+                              :valid-item-fn us/parse-email
+                              :label (tr "modals.invite-member.emails")}]
+          [:& fm/select {:name :role :options roles}]]
 
        [:div.buttons
         [:button.btn-secondary.btn-large
          {:on-click #(st/emit! (modal/show {:type :onboarding-choice}))}
-         (tr "labels.cancel")]
+         (tr "labels.back")]
         [:& fm/submit-button
-         {:label (tr "labels.create")}]]
+         {:label (tr "onboarding.choice.team-up.invite-members-submit")}]]
        [:div.skip-action
         {:on-click on-skip}
-        [:div.action "Skip and invite later"]]]
+        [:div.action (tr "onboarding.choice.team-up.invite-members-skip")]]]
       [:img.deco {:src "images/deco-left.png" :border "0"}]
       [:img.deco.right {:src "images/deco-right.png" :border "0"}]]]))
 

frontend/translations/ca.po

@@ -1745,12 +1745,6 @@ msgstr ""
 msgid "onboarding.slide.3.title"
 msgstr "Una font compartida de veritat"
 
-msgid "onboarding.team-input-placeholder"
-msgstr "Introduïu el nom de l'equip nou"
-
-msgid "onboarding.team.create.button"
-msgstr "Crea un equip"
-
 msgid "onboarding.team.create.desc1"
 msgstr ""
 "Esteu treballant amb algú? Creeu un equip per a treballar junts en "
@@ -1763,9 +1757,6 @@ msgstr "Introduïu el nom de l'equip nou"
 msgid "onboarding.team.create.title"
 msgstr "Creeu un equip"
 
-msgid "onboarding.team.skip-and-invite-later"
-msgstr "Omet i convida més tard"
-
 msgid "onboarding.team.start.button"
 msgstr "Comenceu de seguida"
 

frontend/translations/de.po

@@ -1738,12 +1738,6 @@ msgstr ""
 msgid "onboarding.slide.3.title"
 msgstr "Eine zentrale Anlaufstelle für alle"
 
-msgid "onboarding.team-input-placeholder"
-msgstr "Neuen Teamnamen eingeben"
-
-msgid "onboarding.team.create.button"
-msgstr "Team erstellen"
-
 msgid "onboarding.team.create.desc1"
 msgstr ""
 "Arbeiten Sie mit jemandem zusammen? Erstellen Sie ein Team, um gemeinsam an "
@@ -1755,8 +1749,6 @@ msgstr "Neuen Teamnamen eingeben"
 msgid "onboarding.team.create.title"
 msgstr "Team erstellen"
 
-msgid "onboarding.team.skip-and-invite-later"
-msgstr "Überspringen und später einladen"
 
 msgid "onboarding.team.start.button"
 msgstr "Gleich loslegen"

frontend/translations/en.po

@@ -1020,6 +1020,9 @@ msgstr "About Penpot"
 msgid "labels.accept"
 msgstr "Accept"
 
+msgid "labels.back"
+msgstr "Back"
+
 msgid "labels.add-custom-font"
 msgstr "Add custom font"
 
@@ -1767,9 +1770,31 @@ msgstr ""
 "Are you working with someone? Create a team and invite people to work "
 "together on projects and share design assets."
 
+msgid "onboarding.choice.team-up.create-team"
+msgstr "Your team name"
+
+msgid "onboarding.choice.team-up.create-team-desc"
+msgstr "After naming your team, you will be able to invite people to join."
+
+msgid "onboarding.choice.team-up.create-team-placeholder"
+msgstr "Enter the name of the team"
+
+msgid "onboarding.choice.team-up.invite-members"
+msgstr "Invite members"
+
+msgid "onboarding.choice.team-up.invite-members-desc"
+msgstr "You will be also able to invite members and change roles later at the team section."
+
+msgid "onboarding.choice.team-up.invite-members-submit"
+msgstr "Create team and send invites"
+
+msgid "onboarding.choice.team-up.invite-members-skip"
+msgstr "Create team and invite later"
+
 msgid "onboarding.choice.title"
 msgstr "Welcome to Penpot"
 
+
 msgid "onboarding.contrib.alt"
 msgstr "Open Source"
 
@@ -1873,12 +1898,6 @@ msgstr ""
 msgid "onboarding.slide.3.title"
 msgstr "One shared source of truth"
 
-msgid "onboarding.team-input-placeholder"
-msgstr "Enter new team name"
-
-msgid "onboarding.team.skip-and-invite-later"
-msgstr "Skip and invite later"
-
 msgid "onboarding.templates.subtitle"
 msgstr "Here are some templates."
 

frontend/translations/es.po

@@ -1023,6 +1023,9 @@ msgstr "Acerca de Penpot"
 msgid "labels.accept"
 msgstr "Aceptar"
 
+msgid "labels.back"
+msgstr "Volver"
+
 msgid "labels.add-custom-font"
 msgstr "Añadir fuente personalizada"
 
@@ -1768,6 +1771,27 @@ msgstr ""
 "¿Estás trabajando con alguien? Crea un equipo e invita a la gente a "
 "trabajar juntos en proyectos y a compartir recursos de diseño."
 
+msgid "onboarding.choice.team-up.create-team"
+msgstr "El nombre de tu equipo"
+
+msgid "onboarding.choice.team-up.create-team-desc"
+msgstr "Tras nombrar tu equipo podrás invitar a personas para que se unan."
+
+msgid "onboarding.choice.team-up.create-team-placeholder"
+msgstr "Introduce el nombre del equipo"
+
+msgid "onboarding.choice.team-up.invite-members"
+msgstr "Invitar integrantes"
+
+msgid "onboarding.choice.team-up.invite-members-desc"
+msgstr "También podrás invitar integrantes y cambiar roles más tarde desde la sección del equipo."
+
+msgid "onboarding.choice.team-up.invite-members-submit"
+msgstr " Crear equipo y enviar invitaciones"
+
+msgid "onboarding.choice.team-up.invite-members-skip"
+msgstr " Crear equipo e invitar después"
+
 msgid "onboarding.choice.title"
 msgstr "Te damos la bienvenida a Penpot"
 
@@ -1878,12 +1902,6 @@ msgstr ""
 msgid "onboarding.slide.3.title"
 msgstr "Una \"fuente de la verdad\" compartida"
 
-msgid "onboarding.team-input-placeholder"
-msgstr "Introduce el nuevo nombre del equipo"
-
-msgid "onboarding.team.create.button"
-msgstr "Crea un equipo"
-
 msgid "onboarding.team.create.desc1"
 msgstr ""
 "¿Trabajando con alguien más? Crea un equipo donde compartir proyectos y "
@@ -1895,9 +1913,6 @@ msgstr "Introduce el nombre del equipo"
 msgid "onboarding.team.create.title"
 msgstr "Crear equipo"
 
-msgid "onboarding.team.skip-and-invite-later"
-msgstr "Saltar e invitar más tarde"
-
 msgid "onboarding.team.start.button"
 msgstr "Comenzar directamente"
 

frontend/translations/he.po

@@ -1800,12 +1800,6 @@ msgstr ""
 msgid "onboarding.slide.3.title"
 msgstr "מקור משותף יחיד לאמת"
 
-msgid "onboarding.team-input-placeholder"
-msgstr "נא למלא שם חדש לצוות"
-
-msgid "onboarding.team.create.button"
-msgstr "יצירת צוות"
-
 msgid "onboarding.team.create.desc1"
 msgstr ""
 "יש לך עבודה בשיתוף עם גורם נוסף? ניתן ליצור צוות כדי לעבוד יחד על מיזמים "
@@ -1817,9 +1811,6 @@ msgstr "נא למלא שם לצוות"
 msgid "onboarding.team.create.title"
 msgstr "יצירת צוות"
 
-msgid "onboarding.team.skip-and-invite-later"
-msgstr "לדלג ולהזמין מאוחר יותר"
-
 msgid "onboarding.team.start.button"
 msgstr "להתחיל כבר עכשיו"
 

frontend/translations/tr.po

@@ -1843,12 +1843,6 @@ msgstr ""
 msgid "onboarding.slide.3.title"
 msgstr "Paylaşılan bir doğruluk kaynağı"
 
-msgid "onboarding.team-input-placeholder"
-msgstr "Yeni takım adı gir"
-
-msgid "onboarding.team.create.button"
-msgstr "Takım oluştur"
-
 msgid "onboarding.team.create.desc1"
 msgstr ""
 "Biriyle mi çalışıyorsunuz? Projelerde birlikte çalışmak ve tasarım "
@@ -1860,9 +1854,6 @@ msgstr "Yeni takım adı gir"
 msgid "onboarding.team.create.title"
 msgstr "Takım oluştur"
 
-msgid "onboarding.team.skip-and-invite-later"
-msgstr "Atla ve daha sonra davet et"
-
 msgid "onboarding.team.start.button"
 msgstr "Hemen başla"
 

frontend/translations/zh_CN.po

@@ -1726,12 +1726,6 @@ msgstr "获取并提供代码规范，如标记（SVG、HTML）或样式（CSS
 msgid "onboarding.slide.3.title"
 msgstr "一个共享的事实来源"
 
-msgid "onboarding.team-input-placeholder"
-msgstr "输入新团队名称"
-
-msgid "onboarding.team.skip-and-invite-later"
-msgstr "跳过并稍后邀请"
-
 msgid "onboarding.templates.subtitle"
 msgstr "这里有一些模板。"