Merge pull request #2155 from penpot/eva-onboarding-team-up

🎉 Eva onboarding team up

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

@@ -192,7 +192,7 @@
      (case section
        :dashboard-projects
        [:*
-        [:& projects-section {:team team :projects projects}]
+        [:& projects-section {:team team :projects projects :profile profile}]
         [:& templates-section {:profile profile
                                :project project
                                :default-project-id default-project-id

frontend/src/app/main/ui/dashboard/projects.cljs

@@ -9,6 +9,8 @@
    [app.common.math :as mth]
    [app.main.data.dashboard :as dd]
    [app.main.data.events :as ev]
+   [app.main.data.modal :as modal]
+   [app.main.data.users :as du]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.dashboard.grid :refer [line-grid]]
@@ -36,6 +38,22 @@
      [:a.btn-secondary.btn-small {:on-click create :data-test "new-project-button"}
       (tr "dashboard.new-project")]]))
 
+(mf/defc team-hero
+  {::mf/wrap [mf/memo]}
+  [{:keys [team close-banner] :as props}]
+  (let [go-members    #(st/emit! (dd/go-to-team-members))
+        invite-member #(st/emit! (modal/show {:type :invite-members :team team :origin :hero}))]
+    [:div.team-hero
+     [:img {:src "images/deco-team-banner.png" :border "0"}]
+     [:div.text
+      [:div.title (tr "dasboard.team-hero.title")]
+      [:div.info
+       [:span (tr "dasboard.team-hero.text")]
+       [:a {:on-click  go-members} (tr "dasboard.team-hero.management")]]]
+     [:button.invite {:on-click invite-member} (tr "onboarding.choice.team-up.invite-members")]
+     [:button.close {:on-click close-banner}
+      [:span i/close]]]))
+
 (mf/defc project-item
   [{:keys [project first? team files] :as props}]
   (let [locale     (mf/deref i18n/locale)
@@ -196,11 +214,17 @@
   (l/derived :dashboard-recent-files st/state))
 
 (mf/defc projects-section
-  [{:keys [team projects] :as props}]
-  (let [projects   (->> (vals projects)
-                        (sort-by :modified-at)
-                        (reverse))
-        recent-map (mf/deref recent-files-ref)]
+  [{:keys [team projects profile] :as props}]
+  (let [projects    (->> (vals projects)
+                         (sort-by :modified-at)
+                         (reverse))
+        recent-map  (mf/deref recent-files-ref)
+        props       (some-> profile (get :props {}))
+        team-hero?  (:team-hero? props true)
+
+        close-banner (fn []
+                       (st/emit!
+                        (du/update-profile-props {:team-hero? false})))]
 
     (mf/use-effect
      (mf/deps team)
@@ -219,6 +243,11 @@
     (when (seq projects)
       [:*
        [:& header]
+       (when (and team-hero? (not (:is-default team)))
+         [:& team-hero 
+          {:team team
+           :close-banner close-banner}])
+
        [:section.dashboard-container.no-bg
         (for [{:keys [id] :as project} projects]
           (let [files (when recent-map

frontend/src/app/main/ui/dashboard/team.cljs

@@ -34,7 +34,9 @@
   (let [go-members           (mf/use-fn #(st/emit! (dd/go-to-team-members)))
         go-settings          (mf/use-fn #(st/emit! (dd/go-to-team-settings)))
         go-invitations       (mf/use-fn #(st/emit! (dd/go-to-team-invitations)))
-        invite-member        (mf/use-fn #(st/emit! (modal/show {:type :invite-members :team team})))
+        invite-member        (mf/use-fn 
+                              (mf/deps team)
+                              #(st/emit! (modal/show {:type :invite-members :team team :origin :team})))
 
         members-section?     (= section :dashboard-team-members)
         settings-section?    (= section :dashboard-team-settings)
@@ -87,7 +89,7 @@
 (mf/defc invite-members-modal
   {::mf/register modal/components
    ::mf/register-as :invite-members}
-  [{:keys [team]}]
+  [{:keys [team origin]}]
   (let [perms   (:permissions team)
         roles   (mf/use-memo (mf/deps perms) #(get-available-roles perms))
         initial (mf/use-memo (constantly {:role "editor" :team-id (:id team)}))
@@ -127,24 +129,29 @@
                       (dd/fetch-team-invitations))))]
 
     [:div.modal.dashboard-invite-modal.form-container
+     {:class (dom/classnames
+              :hero (= origin :hero))}
      [:& fm/form {:on-submit on-submit :form form}
       [:div.title
-       [:span.text (tr "modals.invite-member.title")]]
+       [:span.text (tr "modals.invite-team-member.title")]]
 
       (when-not (= "" @error-text)
         [:div.error
          [:span.icon i/msg-error]
          [:span.text @error-text]])
-
       [:div.form-row
+       [:p.label (tr "onboarding.choice.team-up.roles")]
+       [:& fm/select {:name :role :options roles}]]
+      [:div.form-row
+
+
        [:& fm/multi-input {:type "email"
                            :name :emails
                            :auto-focus? true
                            :trim true
                            :valid-item-fn us/parse-email
                            :label (tr "modals.invite-member.emails")
-                           :on-submit  on-submit}]
-       [:& fm/select {:name :role :options roles}]]
+                           :on-submit  on-submit}]]
 
       [:div.action-buttons
        [:& fm/submit-button {:label (tr "modals.invite-member-confirm.accept")}]]]]))