Merge remote-tracking branch 'origin/staging' into develop

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

@@ -7,15 +7,11 @@
 (ns app.main.ui.dashboard.projects
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.common.data :as d]
    [app.common.geom.point :as gpt]
-   [app.config :as cf]
    [app.main.data.dashboard :as dd]
    [app.main.data.events :as ev]
-   [app.main.data.messages :as msg]
    [app.main.data.modal :as modal]
    [app.main.data.users :as du]
-   [app.main.errors :as errors]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.dashboard.grid :refer [line-grid]]
@@ -100,80 +96,6 @@
 (def builtin-templates
   (l/derived :builtin-templates st/state))
 
-(mf/defc tutorial-project
-  [{:keys [close-tutorial default-project-id] :as props}]
-  (let [state     (mf/use-state {:status :waiting
-                                 :file nil})
-
-        templates (mf/deref builtin-templates)
-        template  (d/seek #(= (:id %) "tutorial-for-beginners") templates)
-
-        on-template-cloned-success
-        (mf/use-fn
-         (mf/deps default-project-id)
-         (fn [response]
-           (swap! state #(assoc % :status :success :file (:first response)))
-           (st/emit! (dd/go-to-workspace {:id (first response) :project-id default-project-id :name "tutorial"})
-                     (du/update-profile-props {:viewed-tutorial? true}))))
-
-        on-template-cloned-error
-        (mf/use-fn
-         (fn [cause]
-           (swap! state assoc :status :error)
-           (errors/print-error! cause)
-           (st/emit! (msg/error (tr "dashboard.libraries-and-templates.import-error")))))
-
-        download-tutorial
-        (mf/use-fn
-         (mf/deps template default-project-id)
-         (fn []
-           (let [mdata  {:on-success on-template-cloned-success
-                         :on-error on-template-cloned-error}
-                 params {:project-id default-project-id
-                         :template-id (:id template)}]
-             (swap! state #(assoc % :status :importing))
-             (st/emit! (with-meta (dd/clone-template (with-meta params mdata))
-                         {::ev/origin "get-started-hero-block"})))))]
-    [:article {:class (stl/css :tutorial)}
-     [:div {:class (stl/css :thumbnail)}]
-     [:div {:class (stl/css :text)}
-      [:h2 {:class (stl/css :title)} (tr "dasboard.tutorial-hero.title")]
-      [:p {:class (stl/css :info)} (tr "dasboard.tutorial-hero.info")]
-      [:button {:class (stl/css :btn-primary :action)
-                :on-click download-tutorial}
-       (case (:status @state)
-         :waiting (tr "dasboard.tutorial-hero.start")
-         :importing [:span.loader i/loader-pencil]
-         :success "")]]
-
-     [:button {:class (stl/css :close)
-               :on-click close-tutorial
-               :aria-label (tr "labels.close")}
-      close-icon]]))
-
-(mf/defc interface-walkthrough
-  {::mf/wrap [mf/memo]}
-  [{:keys [close-walkthrough] :as props}]
-  (let [handle-walkthrough-link
-        (fn []
-          (st/emit! (ptk/event ::ev/event {::ev/name "show-walkthrough"
-                                           ::ev/origin "get-started-hero-block"
-                                           :section "dashboard"})))]
-    [:article {:class (stl/css :walkthrough)}
-     [:div {:class (stl/css :thumbnail)}]
-     [:div {:class (stl/css :text)}
-      [:h2 {:class (stl/css :title)} (tr "dasboard.walkthrough-hero.title")]
-      [:p {:class (stl/css :info)} (tr "dasboard.walkthrough-hero.info")]
-      [:a {:class (stl/css :btn-primary :action)
-           :href " https://design.penpot.app/walkthrough"
-           :target "_blank"
-           :on-click handle-walkthrough-link}
-       (tr "dasboard.walkthrough-hero.start")]]
-     [:button {:class (stl/css :close)
-               :on-click close-walkthrough
-               :aria-label (tr "labels.close")}
-      close-icon]]))
-
 (mf/defc project-item
   [{:keys [project first? team files] :as props}]
   (let [locale     (mf/deref i18n/locale)
@@ -365,7 +287,7 @@
   (l/derived :dashboard-recent-files st/state))
 
 (mf/defc projects-section
-  [{:keys [team projects profile default-project-id] :as props}]
+  [{:keys [team projects profile] :as props}]
   (let [projects            (->> (vals projects)
                                  (sort-by :modified-at)
                                  (reverse))
@@ -378,8 +300,6 @@
                                  (:team-hero? props true)
                                  (not (:is-default team)))
 
-        tutorial-viewed?    (:viewed-tutorial? props true)
-        walkthrough-viewed? (:viewed-walkthrough? props true)
         is-my-penpot        (= (:default-team-id profile) (:id team))
 
         team-id             (:id team)
@@ -391,28 +311,6 @@
                      (ptk/data-event ::ev/event {::ev/name "dont-show-team-up-hero"
                                                  ::ev/origin "dashboard"}))))
 
-        close-tutorial
-        (mf/use-fn
-         (fn []
-           (st/emit! (du/update-profile-props {:viewed-tutorial? true})
-                     (ptk/data-event ::ev/event {::ev/name "dont-show-tutorial"
-                                                 ::ev/origin "get-started-hero"
-                                                 :type "tutorial"
-                                                 :section "dashboard"}))))
-
-        close-walkthrough
-        (mf/use-fn
-         (fn []
-           (st/emit! (du/update-profile-props {:viewed-walkthrough? true})
-                     (ptk/data-event ::ev/event {::ev/name "dont-show-walkthrough"
-                                                 ::ev/origin "get-started-hero"
-                                                 :type "walkthrough"
-                                                 :section "dashboard"}))))
-
-        show-hero? (and is-my-penpot
-                        (or (not tutorial-viewed?)
-                            (not walkthrough-viewed?)))
-
         show-team-hero? (and (not is-my-penpot) team-hero?)]
 
     (mf/with-effect [team]
@@ -433,22 +331,9 @@
          (when team-hero?
            [:& team-hero {:team team :close-fn close-banner}])
 
-         (when (and (contains? cf/flags :dashboard-templates-section)
-                    show-hero?)
-           [:div {:class (stl/css :hero-projects)}
-            (when (and (not tutorial-viewed?) (:is-default team))
-              [:& tutorial-project
-               {:close-tutorial close-tutorial
-                :default-project-id default-project-id}])
-
-            (when (and (not walkthrough-viewed?) (:is-default team))
-              [:& interface-walkthrough
-               {:close-walkthrough close-walkthrough}])])
-
          [:div {:class (stl/css-case :dashboard-container true
                                      :no-bg true
                                      :dashboard-projects true
-                                     :with-hero show-hero?
                                      :with-team-hero show-team-hero?)}
           (for [{:keys [id] :as project} projects]
             (let [files (when recent-map

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

@@ -20,7 +20,6 @@
   height: calc(100vh - $s-64);
 }
 
-.with-hero,
 .with-team-hero {
   height: calc(100vh - $s-280);
 }
@@ -242,88 +241,3 @@
     width: 0;
   }
 }
-
-.hero-projects {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: $s-32;
-  margin: 0 $s-16 $s-16 $s-20;
-
-  @media (max-width: 1366px) {
-    grid-template-columns: 1fr;
-  }
-
-  .tutorial,
-  .walkthrough {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    position: relative;
-    border-radius: $br-8;
-    min-height: $s-216;
-    background-color: $db-tertiary;
-    padding: $s-8;
-
-    .thumbnail {
-      width: $s-200;
-      height: $s-200;
-      border-radius: $br-6;
-      padding: $s-32;
-      display: block;
-      background-color: var(--color-canvas);
-    }
-
-    img {
-      border-radius: $br-4;
-      margin-bottom: 0;
-      width: $s-232;
-    }
-
-    .text {
-      padding: $s-32;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .title {
-      color: $df-primary;
-      font-size: $fs-24;
-      font-weight: $fw400;
-      margin-bottom: $s-8;
-    }
-    .info {
-      flex: 1;
-      color: $df-secondary;
-      margin-bottom: $s-20;
-      font-size: $fs-16;
-    }
-    .invite {
-      height: $s-32;
-    }
-    .action {
-      width: $s-180;
-      height: $s-40;
-    }
-  }
-  .walkthrough {
-    .thumbnail {
-      background-image: url("/images/walkthrough-cover.png");
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
-  }
-  .tutorial {
-    .thumbnail {
-      background-image: url("/images/hands-on-tutorial.png");
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
-    .loader {
-      display: flex;
-      svg#loader-pencil {
-        width: $s-32;
-      }
-    }
-  }
-}