✨ Update company size options in in-app onboarding (#10110)

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

@@ -208,53 +208,28 @@
   [:and
    [:map {:title "QuestionsFormStep3"}
     [:team-size
-     [:enum "more-than-50" "31-50" "11-30" "2-10" "freelancer" "personal-project"]]
+     [:enum "1" "2-100" "101-500" "501-1000" "1001-5000" "5001+"]]]])
-
-    [:planning ::sm/text]
-
-    [:planning-other {:optional true}
-     [::sm/text {:max 512}]]]
-
-   [:fn {:error/field :planning-other}
-    (fn [{:keys [planning planning-other]}]
-      (or (not= planning "other")
-          (and (= planning "other")
-               (not (str/blank? planning-other)))))]])
 
 (mf/defc step-3
   {::mf/props :obj}
   [{:keys [on-next on-prev form show-step-3]}]
   (let [team-size-options
         (mf/with-memo []
-          [{:label (tr "labels.select-option") :value "" :key "team-size" :disabled true}
+          [{:label (tr "labels.select-option")
-           {:label (tr "onboarding.questions.team-size.more-than-50") :value "more-than-50" :key "more-than-50"}
+            :value "" :key "team-size"
-           {:label (tr "onboarding.questions.team-size.31-50") :value "31-50"  :key "31-50"}
+            :disabled true}
-           {:label (tr "onboarding.questions.team-size.11-30") :value "11-30" :key "11-30"}
+           {:label (tr "onboarding.questions.team-size.just-me")
-           {:label (tr "onboarding.questions.team-size.2-10") :value "2-10" :key "2-10"}
+            :value "1" :key "1"}
-           {:label (tr "onboarding.questions.team-size.freelancer") :value "freelancer" :key "freelancer"}
+           {:label (tr "onboarding.questions.team-size.2-100")
-           {:label (tr "onboarding.questions.team-size.personal-project") :value "personal-project" :key "personal-project"}])
+            :value "2-100" :key "2-100"}
-
+           {:label (tr "onboarding.questions.team-size.101-500")
-        planning-options
+            :value "101-500" :key "101-500"}
-        (mf/with-memo []
+           {:label (tr "onboarding.questions.team-size.501-1000")
-          (-> (shuffle [{:label (tr "labels.select-option")
+            :value "501-1000" :key "501-1000"}
-                         :value "" :key "questions:what-brings-you-here"
+           {:label (tr "onboarding.questions.team-size.1001-5000")
-                         :disabled true}
+            :value "1001-5000" :key "1001-5000"}
-                        {:label (tr "onboarding.questions.reasons.exploring")
+           {:label (tr "onboarding.questions.team-size.more-than-5001")
-                         :value "discover-more-about-penpot"
+            :value "5001+" :key "5001+"}])]
-                         :key "discover-more-about-penpot"}
-                        {:label (tr "onboarding.questions.reasons.fit")
-                         :value "test-penpot-to-see-if-its-a-fit-for-team"
-                         :key "test-penpot-to-see-if-its-a-fit-for-team"}
-                        {:label (tr "onboarding.questions.reasons.alternative")
-                         :value "alternative-to-figma"
-                         :key "alternative-to-figma"}
-                        {:label (tr "onboarding.questions.reasons.testing")
-                         :value "try-out-before-using-penpot-on-premise"
-                         :key "try-out-before-using-penpot-on-premise"}])
-              (conj {:label (tr "labels.other-short") :value "other"})))
-
-        current-planning
-        (dm/get-in @form [:data :planning])]
 
     [:& step-container {:form form
                         :step 3
@@ -267,26 +242,8 @@
 
      [:h1 {:class (stl/css :modal-title)}
       (tr "onboarding.questions.step3.title")]
-     [:div {:class (stl/css :modal-question)}
-      [:h3 {:class (stl/css :modal-subtitle)}
-       (tr "onboarding.questions.step1.question2")]
-
-      [:& fm/select
-       {:options planning-options
-        :select-class (stl/css :select-class)
-        :default ""
-        :name :planning
-        :dropdown-class (stl/css :question-dropdown)}]]
-
-     (when (= current-planning "other")
-       [:& fm/input {:name :planning-other
-                     :class (stl/css :input-spacing)
-                     :placeholder (tr "labels.other")
-                     :show-error false
-                     :label ""}])
 
      [:div {:class (stl/css :modal-question)}
-      [:h3 {:class (stl/css :modal-subtitle)} (tr "onboarding.questions.step3.question3")]
       [:& fm/select {:options team-size-options
                      :default ""
                      :select-class (stl/css :select-class)

frontend/src/app/main/ui/onboarding/questions.scss

@@ -119,7 +119,7 @@
 
 // STEP-3
 .step-3 {
-  grid-template-rows: deprecated.$s-20 auto auto auto auto deprecated.$s-32;
+  grid-template-rows: deprecated.$s-20 auto auto deprecated.$s-32;
 }
 
 .image-radio {

frontend/translations/en.po

@@ -4314,7 +4314,7 @@ msgstr "What's the size of your company?"
 
 #: src/app/main/ui/onboarding/questions.cljs:270
 msgid "onboarding.questions.step3.title"
-msgstr "Tell us about your job"
+msgstr "What is your company size?"
 
 #: src/app/main/ui/onboarding/questions.cljs:345
 msgid "onboarding.questions.step4.title"
@@ -4325,6 +4325,24 @@ msgstr "Where would you like to get started?"
 msgid "onboarding.questions.step5.title"
 msgstr "How did you hear about Penpot?"
 
+msgid "onboarding.questions.team-size.just-me"
+msgstr "Just me"
+
+msgid "onboarding.questions.team-size.2-100"
+msgstr "2-100"
+
+msgid "onboarding.questions.team-size.101-500"
+msgstr "101-500"
+
+msgid "onboarding.questions.team-size.501-1000"
+msgstr "501-1,000"
+
+msgid "onboarding.questions.team-size.1001-5000"
+msgstr "1,001-5,000"
+
+msgid "onboarding.questions.team-size.more-than-5001"
+msgstr "5,001+"
+
 #: src/app/main/ui/onboarding/questions.cljs:233
 msgid "onboarding.questions.team-size.11-30"
 msgstr "11-30"

frontend/translations/es.po

@@ -4222,7 +4222,7 @@ msgstr "¿Cuál es el tamaño de tu empresa?"
 
 #: src/app/main/ui/onboarding/questions.cljs:270
 msgid "onboarding.questions.step3.title"
-msgstr "Háblanos de tu trabajo"
+msgstr "¿Cuál es el tamaño de tu empresa?"
 
 #: src/app/main/ui/onboarding/questions.cljs:345
 msgid "onboarding.questions.step4.title"
@@ -4233,6 +4233,24 @@ msgstr "¿Por dónde te apetecería empezar?"
 msgid "onboarding.questions.step5.title"
 msgstr "¿Cómo nos has descubierto?"
 
+msgid "onboarding.questions.team-size.just-me"
+msgstr "Sólo yo"
+
+msgid "onboarding.questions.team-size.2-100"
+msgstr "2-100"
+
+msgid "onboarding.questions.team-size.101-500"
+msgstr "101-500"
+
+msgid "onboarding.questions.team-size.501-1000"
+msgstr "501-1000"
+
+msgid "onboarding.questions.team-size.1001-5000"
+msgstr "1001-5000"
+
+msgid "onboarding.questions.team-size.more-than-5001"
+msgstr "5001+"
+
 #: src/app/main/ui/onboarding/questions.cljs:233
 msgid "onboarding.questions.team-size.11-30"
 msgstr "11-30"