🎉 Add A/B test for first state of a project (#5691)

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

@@ -511,7 +511,9 @@
         {:limit limit
          :can-edit can-edit
          :create-fn create-fn
-         :origin origin}])]))
+         :origin origin
+         :project-id project-id
+         :on-finish-import on-finish-import}])]))
 
 (mf/defc line-grid-row
   [{:keys [files selected-files dragging? limit can-edit] :as props}]
@@ -635,4 +637,6 @@
         {:dragging? @dragging?
          :limit limit
          :can-edit can-edit
-         :create-fn create-fn}])]))
+         :create-fn create-fn
+         :project-id project-id
+         :on-finish-import on-finish-import}])]))

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

@@ -8,14 +8,40 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.config :as cf]
+   [app.main.ui.dashboard.import :as udi]
    [app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
    [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
+(mf/defc empty-placeholder-projects*
+  {::mf/wrap-props false}
+  [{:keys [on-create on-finish-import project-id] :as props}]
+  (let [file-input       (mf/use-ref nil)
+        on-add-library   (mf/use-fn #(dom/open-new-window "https://penpot.app/penpothub/libraries-templates"))
+        on-import-files  (mf/use-fn #(dom/click (mf/ref-val file-input)))]
+
+    [:div {:class (stl/css :empty-project-container)}
+     [:div {:class (stl/css :empty-project-card) :on-click on-create :title (tr "dashboard.add-file")}
+      [:div {:class (stl/css :empty-project-card-title)} (tr "dashboard.empty-project.create")]
+      [:div {:class (stl/css :empty-project-card-subtitle)} (tr "dashboard.empty-project.start")]]
+
+     [:div {:class (stl/css :empty-project-card) :on-click on-import-files :title (tr "dashboard.empty-project.import")}
+      [:div {:class (stl/css :empty-project-card-title)} (tr "dashboard.empty-project.import")]
+      [:div {:class (stl/css :empty-project-card-subtitle)} (tr "dashboard.empty-project.import-penpot")]]
+
+     [:div {:class (stl/css :empty-project-card) :on-click on-add-library :title (tr "dashboard.empty-project.go-to-libraries")}
+      [:div {:class (stl/css :empty-project-card-title)} (tr "dashboard.empty-project.add-library")]
+      [:div {:class (stl/css :empty-project-card-subtitle)} (tr "dashboard.empty-project.explore")]]
+
+     [:& udi/import-form {:ref file-input
+                          :project-id project-id
+                          :on-finish-import on-finish-import}]]))
+
 (mf/defc empty-placeholder
-  [{:keys [dragging? limit origin create-fn can-edit]}]
+  [{:keys [dragging? limit origin create-fn can-edit project-id on-finish-import]}]
   (let [on-click
         (mf/use-fn
          (mf/deps create-fn)
@@ -45,6 +71,8 @@
                             :tag-name "span"}])]
 
       :else
+      (if (cf/external-feature-flag "add-file-02" "test")
+        [:> empty-placeholder-projects* {:on-create on-click :on-finish-import on-finish-import :project-id project-id}]
         [:div {:class (stl/css :grid-empty-placeholder)}
          (if (cf/external-feature-flag "add-file-01" "test")
            [:button {:class (stl/css :create-new)
@@ -54,7 +82,7 @@
             (if @show-text (tr "dashboard.add-file") i/add)]
            [:button {:class (stl/css :create-new)
                      :on-click on-click}
-          i/add])])))
+            i/add])]))))
 
 (mf/defc loading-placeholder
   []

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

@@ -33,6 +33,7 @@
       a {
         color: var(--color-foreground-primary);
       }
+
       p {
         max-width: $s-360;
         text-align: center;
@@ -92,6 +93,7 @@
 
 .placeholder-markdown {
   @include t.use-typography("body-large");
+
   a {
     color: var(--color-accent-primary);
   }
@@ -100,3 +102,43 @@
 .empty-placeholder-libraries {
   margin: $s-16;
 }
+
+.empty-project-container {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  gap: $s-16;
+  margin-top: $s-12;
+}
+
+.empty-project-card {
+  @include t.use-typography("body-small");
+  --color-card-background: var(--color-background-tertiary);
+  --color-card-title: var(--color-foreground-primary);
+  --color-card-subtitle: var(--color-foreground-secondary);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-card-background);
+  border: $s-2 solid var(--color-background-quaternary);
+  border-radius: $br-8;
+  padding: var(--sp-m) 0;
+
+  &:hover {
+    --color-card-background: var(--color-accent-primary);
+    --color-card-title: var(--color-background-secondary);
+    --color-card-subtitle: var(--color-background-secondary);
+    cursor: pointer;
+  }
+
+  flex-grow: 1;
+}
+
+.empty-project-card-title {
+  color: var(--color-card-title);
+}
+
+.empty-project-card-subtitle {
+  color: var(--color-card-subtitle);
+}

frontend/translations/en.po

@@ -759,6 +759,27 @@ msgstr "+ New project"
 msgid "dashboard.new-project-prefix"
 msgstr "New Project"
 
+msgid "dashboard.empty-project.create"
+msgstr "Create new file"
+
+msgid "dashboard.empty-project.start"
+msgstr "Start building amazing stuff"
+
+msgid "dashboard.empty-project.import"
+msgstr "Import a file"
+
+msgid "dashboard.empty-project.import-penpot"
+msgstr "Import a .penpot file"
+
+msgid "dashboard.empty-project.add-library"
+msgstr "Add a Library or a Template"
+
+msgid "dashboard.empty-project.explore"
+msgstr "Explore some to add"
+
+msgid "dashboard.empty-project.go-to-libraries"
+msgstr "Go to Libraries and Templates"
+
 #: src/app/main/ui/dashboard/search.cljs:77
 msgid "dashboard.no-matches-for"
 msgstr "No matches found for “%s“"

frontend/translations/es.po

@@ -767,6 +767,27 @@ msgstr "+ Nuevo proyecto"
 msgid "dashboard.new-project-prefix"
 msgstr "Nuevo Proyecto"
 
+msgid "dashboard.empty-project.create"
+msgstr "Crear un nuevo archivo"
+
+msgid "dashboard.empty-project.start"
+msgstr "Empieza a crear cosas increíbles"
+
+msgid "dashboard.empty-project.import"
+msgstr "Importa un fichero"
+
+msgid "dashboard.empty-project.import-penpot"
+msgstr "Importa un fichero .penpot"
+
+msgid "dashboard.empty-project.add-library"
+msgstr "Añade una Biblioteca o Plantilla"
+
+msgid "dashboard.empty-project.explore"
+msgstr "Explora algunas para añadir"
+
+msgid "dashboard.empty-project.go-to-libraries"
+msgstr "Ir a Bibliotecas y Plantillas"
+
 #: src/app/main/ui/dashboard/search.cljs:77
 msgid "dashboard.no-matches-for"
 msgstr "No se encuentra “%s“"