From a1c09057c1f9c56e9814fde71ab0fcdf53d62df1 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Tue, 16 May 2023 10:46:50 +0200 Subject: [PATCH] :tada: Move survey to local resources --- frontend/resources/styles/main-default.scss | 2 +- .../main/partials/af-signup-questions.scss | 326 ------------------ .../main/partials/signup-questions.scss | 175 ++++++++++ frontend/src/app/config.cljs | 1 - frontend/src/app/main/data/users.cljs | 5 +- frontend/src/app/main/ui.cljs | 7 +- .../src/app/main/ui/components/forms.cljs | 24 ++ .../src/app/main/ui/onboarding/questions.cljs | 204 ++++++++--- frontend/translations/en.po | 171 +++++++++ frontend/translations/es.po | 174 +++++++++- 10 files changed, 704 insertions(+), 385 deletions(-) delete mode 100644 frontend/resources/styles/main/partials/af-signup-questions.scss create mode 100644 frontend/resources/styles/main/partials/signup-questions.scss diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index b1db2c1b3..a6b6178c7 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -93,4 +93,4 @@ @import "main/partials/inspect"; @import "main/partials/exception-page"; @import "main/partials/share-link"; -@import "main/partials/af-signup-questions"; +@import "main/partials/signup-questions"; diff --git a/frontend/resources/styles/main/partials/af-signup-questions.scss b/frontend/resources/styles/main/partials/af-signup-questions.scss deleted file mode 100644 index 80925292a..000000000 --- a/frontend/resources/styles/main/partials/af-signup-questions.scss +++ /dev/null @@ -1,326 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) KALEIDOS INC - -.af-form { - background-color: $color-white; - color: $color-gray-60 !important; - height: 710px; - max-width: 646px !important; - overflow-y: auto; - padding: 1.5rem 1rem; - position: relative; - width: 100% !important; - - h1, - h3 { - font-family: "worksans", sans-serif !important; - margin-bottom: 0.8rem; - font-weight: $fw500 !important; - } - - h1 { - font-size: $fs36 !important; - } - - h3 { - font-size: $fs23 !important; - } - - strong { - font-weight: $fw500; - } - - p, - label { - font-family: "worksans", sans-serif !important; - font-size: $fs14; - } - - form { - max-width: 760px; - width: 100%; - } - - button { - font-family: "worksans", sans-serif !important; - } - - .af-choice, - .af-choice-multiple { - color: $color-gray-40; - display: flex; - flex-wrap: wrap; - margin: -0.5rem -0.75rem; - padding-top: 1rem; - } - - .af-choice-option { - margin: 0.5rem 0.75rem; - max-width: 11.75rem; - width: 100%; - - label { - font-family: "worksans", sans-serif !important; - font-size: $fs15; - padding-left: 0; - } - } - - .af-choice-multiple { - .af-choice-option { - max-width: 50%; - width: 100%; - } - } - - .af-divider-block { - /* margin-bottom: 2rem; */ - display: none; - p { - &::after, - &::before { - border-color: transparent; - } - } - } - - .af-dropdown-text, - .text { - font-family: "worksans", sans-serif !important; - } - - .af-dropdown-search-options { - max-height: none; - } - - .af-dropdown-search-options div { - font-family: "worksans", sans-serif !important; - font-size: $fs16; - } - - .step-header { - height: 2.5rem; - width: 100%; - } - - .step-number { - background-color: $color-gray-10; - border: none; - border-radius: 1rem; // Need to be investigated, before we can use variable - color: $color-gray-40; - float: right; - font-family: "worksans", sans-serif !important; - font-size: $fs12; - height: 1.5rem; - line-height: $lh-200; // Original value was 1.5rem = 24px; 24px/12px = 200% => lh-200 - text-align: center; - width: 2.5rem !important; - } - - .header-image { - width: 240px; - } - - .af-step-next { - display: flex; - position: absolute; - right: 1rem; - bottom: 0.5rem; - width: 44rem; - } - - .af-step-next button { - color: $color-black; - background-color: $color-primary; - max-width: 180px; - margin-left: auto; - } - - .af-step-previous { - position: absolute; - left: 1rem; - bottom: 1.25rem; - } - - .af-step-next span, - .af-step-previous span { - font-weight: $fw400 !important; - } - - .af-step-button { - text-align: left; - } - - .af-field { - margin: 0; - } - - .af-field-input { - margin: 0.5rem 0; - } - - .af-dropdown { - height: 2.5rem; - } - - .af-field-input input[type="text"], - .af-choice-option label:before, - .af-dropdown { - border-color: #c5c6c9 !important; - } - - .af-choice-option input:checked + label:before, - .af-legal input:checked + label:before { - background-color: $color-primary; - } - - .af-field-use_of_penpot .af-choice-option input:checked + label, - .af-field-previous_design_tool .af-choice-option input:checked + label { - &::before { - background-color: transparent; - border: 2px solid $color-primary !important; - } - } - - .af-field-use_of_penpot .af-choice-option label { - padding-top: 6rem; - background-size: 120px; - min-height: 150px; - } - - .af-field-use_of_penpot .af-choice-option:nth-child(1) label { - background-image: url("../images/form/use-for-1.jpg"); - } - .af-field-use_of_penpot .af-choice-option:nth-child(2) label { - background-image: url("../images/form/use-for-2.jpg"); - } - .af-field-use_of_penpot .af-choice-option:nth-child(3) label { - background-image: url("../images/form/use-for-3.jpg"); - } - .af-field-use_of_penpot .af-choice-option:nth-child(4) label { - background-image: url("../images/form/use-for-4.jpg"); - } - - .af-field-label { - font-family: "worksans", sans-serif !important; - font-size: $fs18; - } - - .af-field-use_of_penpot label, - .af-field-previous_design_tool label { - display: flex; - padding-top: 4rem; - justify-content: center; - background-size: 50px; - background-repeat: no-repeat; - background-position: center 0.75rem; - margin: 0 !important; - min-height: 108px; - position: relative; - text-align: center; - - &:hover { - background-color: transparent; - box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); - } - - &::before { - background-color: transparent; - border-radius: $br4; - min-width: 100%; - min-height: 100%; - position: absolute; - top: 0; - left: 0; - margin: 0; - } - - &::after { - display: none !important; - } - } - - .af-field-previous_design_tool label { - font-size: $fs13; - } - - .af-field-previous_design_tool .af-choice-option:nth-child(1) label { - background-image: url("../images/form/figma.png"); - } - - .af-field-previous_design_tool .af-choice-option:nth-child(2) label { - background-image: url("../images/form/sketch.png"); - } - - .af-field-previous_design_tool .af-choice-option:nth-child(3) label { - background-image: url("../images/form/adobe-xd.png"); - } - - .af-field-previous_design_tool .af-choice-option:nth-child(4) label { - background-image: url("../images/form/canva.png"); - } - - .af-field-previous_design_tool .af-choice-option:nth-child(5) label { - background-image: url("../images/form/invision.png"); - } - - .af-field-previous_design_tool .af-choice-option:nth-child(6) label { - background-image: url("../images/form/never-used.png"); - } - - .af-field-previous_design_tool .af-choice-option:nth-child(7) label, - .af-field-use_of_penpot .af-choice-option:nth-child(5) label { - justify-content: flex-start; - min-height: auto; - padding-left: 1.4rem; - padding-top: 0; - - &:hover { - box-shadow: none; - } - - &::before { - content: ""; - background-color: #fff; - border: 1px solid #e0e6f0; - border-width: 1px; - border-radius: 50%; - min-width: 20px; - min-height: 20px; - box-sizing: border-box; - margin-left: 4px; - } - - &::after { - content: ""; - position: absolute; - opacity: 0; - width: 5px; - height: 8px; - margin-top: -1px; - border: solid #fff; - border-width: 0 2px 2px 0; - transform: rotate(45deg); - } - } - - .af-field-use_of_penpot .af-choice-option:nth-child(5) label { - &::before { - border-radius: $br3; - } - } - - .af-field-previous_design_tool .af-choice-option:nth-child(7) input:checked + label, - .af-field-use_of_penpot .af-choice-option:nth-child(5) input:checked + label { - &::before { - background-color: $color-primary; - } - - &::after { - opacity: 1; - } - } -} diff --git a/frontend/resources/styles/main/partials/signup-questions.scss b/frontend/resources/styles/main/partials/signup-questions.scss new file mode 100644 index 000000000..35ec09c5f --- /dev/null +++ b/frontend/resources/styles/main/partials/signup-questions.scss @@ -0,0 +1,175 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +.signup-questions { + background-color: $color-white; + color: $color-gray-60; + height: 710px; + max-width: 646px; + overflow-y: auto; + padding: 1.5rem 1rem; + position: relative; + width: 100%; + + h1, + h3 { + font-family: "worksans", sans-serif; + font-weight: $fw500; + } + + h1 { + font-size: $fs36; + padding-top: 2.5rem; + } + + h3 { + font-size: $fs23; + } + + .step-header { + height: 2.5rem; + width: 100%; + } + + .step-number { + background-color: $color-gray-10; + border: none; + border-radius: 1rem; // Need to be investigated, before we can use variable + color: $color-gray-40; + float: right; + font-family: "worksans", sans-serif; + font-size: $fs12; + height: 1.5rem; + line-height: $lh-200; // Original value was 1.5rem = 24px; 24px/12px = 200% => lh-200 + text-align: center; + width: 2.5rem; + } + + .header-image { + width: 240px; + } + + .intro { + font-size: $fs16; + padding: 0.5rem 0 1rem 0; + color: $color-gray-40; + } + .section { + display: block; + font-weight: $fw500; + font-size: $fs18; + margin: 0 0 0.3em 0; + padding: 0.8rem 0 0 0; + font-family: "worksans", sans-serif !important; + } + + .other { + .custom-input { + margin: 0.75rem 0 2rem 0; + } + } + + .step-prev { + position: absolute; + left: 1rem; + bottom: 1.25rem; + button { + background-color: transparent; + border: none; + cursor: pointer; + font-size: $fs15; + } + } + + .step-next { + display: flex; + position: absolute; + right: 1rem; + bottom: 0rem; + input { + font-size: $fs15; + color: $color-black; + background-color: $color-primary; + width: 11rem; + margin-left: auto; + } + } + + .custom-radio { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + .input-radio { + margin: 0; + max-width: 12rem; + width: 100%; + + &.with-image { + display: block; + padding: 0; + } + + label { + font-family: "worksans", sans-serif !important; + color: $color-gray-60; + font-size: $fs15; + padding-left: 0; + position: relative; + text-align: center; + height: 4rem; + margin: 0; + + &.with-image { + min-height: 120px; + display: flex; + padding-top: 4rem; + justify-content: center; + background-size: 50px; + background-repeat: no-repeat; + background-position: center 0.75rem; + } + } + + input[type="radio"] { + /*We need it to be accesible so we can't use display none*/ + display: inline; + opacity: 0; + } + + input[type="radio"] + label:before { + background-color: $color-white; + border: 1px solid $color-gray-10; + } + + input[type="radio"] + label.with-image:before { + background-color: transparent; + border-radius: 4px; + min-width: 100%; + min-height: 100%; + position: absolute; + top: 0; + left: 0; + margin: 0; + } + + input[type="radio"]:focus + label:before { + border: 1px solid $color-gray-60; + } + + input[type="radio"]:checked + label:before { + box-shadow: inset 0 0 0 4px $color-white; + background-color: $color-primary; + border: 1px solid $color-gray-30; + } + + input[type="radio"]:checked + label.with-image:before { + border: 1px solid $color-primary; + background-color: transparent; + } + } + } +} diff --git a/frontend/src/app/config.cljs b/frontend/src/app/config.cljs index 495ad20cb..4f5191ab0 100644 --- a/frontend/src/app/config.cljs +++ b/frontend/src/app/config.cljs @@ -87,7 +87,6 @@ (def worker-uri (obj/get global "penpotWorkerURI" "/js/worker.js")) (def translations (obj/get global "penpotTranslations")) (def themes (obj/get global "penpotThemes")) -(def onboarding-form-id (obj/get global "penpotOnboardingQuestionsFormId")) (def build-date (parse-build-date global)) (def flags (atom (parse-flags global))) diff --git a/frontend/src/app/main/data/users.cljs b/frontend/src/app/main/data/users.cljs index 9c3d4ce9a..5f172dfc1 100644 --- a/frontend/src/app/main/data/users.cljs +++ b/frontend/src/app/main/data/users.cljs @@ -384,7 +384,7 @@ (rx/map (constantly (fetch-profile))))))))) (defn mark-questions-as-answered - [] + [onboarding-questions] (ptk/reify ::mark-questions-as-answered ptk/UpdateEvent (update [_ state] @@ -392,7 +392,8 @@ ptk/WatchEvent (watch [_ _ _] - (let [props {:onboarding-questions-answered true}] + (let [props {:onboarding-questions-answered true + :onboarding-questions onboarding-questions}] (->> (rp/cmd! :update-profile-props {:props props}) (rx/map (constantly (fetch-profile)))))))) diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index b43f53b13..a35b7faf0 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -90,12 +90,9 @@ #_[:& app.main.ui.onboarding/onboarding-team-modal]] (when-let [props (some-> profile (get :props {}))] (cond - (and cf/onboarding-form-id - (not (:onboarding-questions-answered props false)) + (and (not (:onboarding-questions-answered props false)) (not (:onboarding-viewed props false))) - [:& app.main.ui.onboarding.questions/questions - {:profile profile - :form-id cf/onboarding-form-id}] + [:& app.main.ui.onboarding.questions/questions] (not (:onboarding-viewed props)) [:& app.main.ui.onboarding/onboarding-modal {}] diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index f431ccfe0..015e31b97 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -230,6 +230,30 @@ [:div.icon i/arrow-slide]]])) +(mf/defc radio-buttons + [{:keys [name options form trim] :as props}] + (let [form (or form (mf/use-ctx form-ctx)) + value (get-in @form [:data name] "") + on-change (fn [event] + (let [value (-> event dom/get-target dom/get-value)] + (swap! form assoc-in [:touched name] true) + (fm/on-input-change form name value trim)))] + [:div.custom-radio + (for [item options] + (let [id (str/ffmt "%-%" name (:value item)) + image (:image item)] + [:div.input-radio {:key id :class (when image "with-image")} + [:input {:on-change on-change + :type "radio" + :id id + :name name + :value (:value item) + :checked (= value (:value item))}] + [:label {:for id + :style {:background-image (when image (str/ffmt "url(%)" image))} + :class (when image "with-image")} + (:label item)]]))])) + (mf/defc submit-button [{:keys [label form on-click disabled data-test] :as props}] (let [form (or form (mf/use-ctx form-ctx))] diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs index 93c84f3d3..54c1e97c5 100644 --- a/frontend/src/app/main/ui/onboarding/questions.cljs +++ b/frontend/src/app/main/ui/onboarding/questions.cljs @@ -7,69 +7,175 @@ (ns app.main.ui.onboarding.questions "External form for onboarding questions." (:require - [app.main.data.events :as ev] [app.main.data.users :as du] [app.main.store :as st] - [app.util.dom :as dom] - [goog.events :as gev] - [potok.core :as ptk] - [promesa.core :as p] + [app.main.ui.components.forms :as fm] + [app.util.i18n :as i18n :refer [tr]] + [cljs.spec.alpha :as s] + [cuerdas.core :as str] [rumext.v2 :as mf])) -(defn load-arengu-sdk - [container-ref email form-id] - (letfn [(on-arengu-loaded [resolve reject] - (let [container (mf/ref-val container-ref)] - (-> (.embed js/ArenguForms form-id container) - (p/then (fn [form] - (.setHiddenField ^js form "email" email) - (st/emit! (ptk/event ::ev/event {::ev/name "arengu-form-load-success" - ::ev/origin "onboarding-questions" - ::ev/type "fact"})) - (resolve))) - (p/catch reject)))) +(mf/defc step-container + [{:keys [form step on-next on-prev children] :as props}] + [:& fm/form {:form form :on-submit on-next} + [:div.step-header + [:div.step-number (str/ffmt "%/4" step)]] - (mark-as-answered [] - (st/emit! (du/mark-questions-as-answered))) + children - (initialize [cleaners resolve reject] - (let [script (dom/create-element "script") - head (unchecked-get js/document "head") - lkey1 (gev/listen js/document "af-submitForm-success" mark-as-answered) - lkey2 (gev/listen js/document "af-getForm-error" reject)] + [:div.step-next + [:& fm/submit-button + {:label (if (< step 4) (tr "questions.next") (tr "questions.start")) + :class "step-next"}]] - (unchecked-set script "src" "https://sdk.arengu.com/forms.js") - (unchecked-set script "onload" (partial on-arengu-loaded resolve reject)) - (dom/append-child! head script) + (when on-prev + [:div.step-prev + [:button {:on-click on-prev} (tr "questions.previous")]])]) - (swap! cleaners conj - #(do (gev/unlistenByKey lkey1) - (gev/unlistenByKey lkey2))) +(s/def ::questions-form-step-1 + (s/keys :req-un [::planning])) - (swap! cleaners conj - #(dom/remove-child! head script)))) +(mf/defc step-1 + [{:keys [on-next] :as props}] - (on-error [_] - (st/emit! (ptk/event ::ev/event {::ev/name "arengu-form-load-error" - ::ev/origin "onboarding-questions" - ::ev/type "fact"})) - (mark-as-answered))] + (let [form (fm/use-form + :initial {} + :spec ::questions-form-step-1)] + [:& step-container {:form form :step 1 :on-next on-next} + [:img.header-image {:src "images/form/use-for-1.png" :alt (tr "questions.lets-get-started")}] + [:h1 (tr "questions.lets-get-started")] + [:p.intro (tr "questions.your-feedback-will-help-us")] + [:h3 (tr "questions-how-are-you-planning-to-use-penpot")] + [:& fm/select {:options [{:label (tr "questions.discover-more-about-penpot") :value "discover-more-about-penpot" :key "discover-more-about-penpot"} + {:label (tr "questions.test-penpot-to-see-if-its-a-fit-for-team") :value "test-penpot-to-see-if-its-a-fit-for-team" :key "test-penpot-to-see-if-its-a-fit-for-team"} + {:label (tr "questions.start-to-work-on-my-project") :value "start-to-work-on-my-project" :key "start-to-work-on-my-project"} + {:label (tr "questions.get-the-code-from-my-team-project") :value "get-the-code-from-my-team-project" :key "get-the-code-from-my-team-project"} + {:label (tr "questions.leave-feedback-for-my-team-project") :value "leave-feedback-for-my-team-project" :key "leave-feedback-for-my-team-project"} + {:label (tr "questions.work-in-concept-ideas") :value "work-in-concept-ideas" :key "work-in-concept-ideas"} + {:label (tr "questions.try-out-before-using-penpot-on-premise") :value "try-out-before-using-penpot-on-premise" :key "try-out-before-using-penpot-on-premise"}] + :label (tr "questions.select-option") + :default nil + :name :planning}]])) - (let [cleaners (atom #{})] - (-> (p/create (partial initialize cleaners)) - (p/timeout 5000) - (p/catch on-error)) - (fn [] - (run! (fn [clean-fn] (clean-fn)) @cleaners))))) +(s/def ::questions-form-step-2 + (s/keys :req-un [::experience-branding-illustrations-marketing-pieces ::experience-interface-design-visual-assets-design-systems ::experience-interface-wireframes-user-journeys-flows-navigation-trees])) + +(mf/defc step-2 + [{:keys [on-next on-prev] :as props}] + (let [form (fm/use-form + :initial {} + :spec ::questions-form-step-2)] + [:& step-container {:form form :step 2 :on-next on-next :on-prev on-prev} + [:h3 (tr "questions.describe-your-experience-working-on")] + + [:div.section (tr "branding-illustrations-marketing-pieces")] + [:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"} + {:label (tr "questions.some") :value "some"} + {:label (tr "questions.a-lot") :value "a-lot"}] + :name :experience-branding-illustrations-marketing-pieces}] + + [:div.section (tr "questions.interface-design-visual-assets-design-systems")] + [:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"} + {:label (tr "questions.some") :value "some"} + {:label (tr "questions.a-lot") :value "a-lot"}] + :name :experience-interface-design-visual-assets-design-systems}] + + [:div.section (tr "questions.wireframes-user-journeys-flows-navigation-trees")] + [:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"} + {:label (tr "questions.some") :value "some"} + {:label (tr "questions.a-lot") :value "a-lot"}] + :name :experience-interface-wireframes-user-journeys-flows-navigation-trees}]])) + +(s/def ::questions-form-step-3 + (s/keys :req-un [::experience-design-tool] + :opt-un[::experience-design-tool-other])) + +(mf/defc step-3 + [{:keys [on-next on-prev] :as props}] + (let [form (fm/use-form + :initial {} + :spec ::questions-form-step-3)] + [:& step-container {:form form :step 3 :on-next on-next :on-prev on-prev} + [:h3 (tr "question.design-tool-more-experienced-with")] + [:& fm/radio-buttons {:options [{:label (tr "questions.figma") :value "figma" :image "images/form/figma.png"} + {:label (tr "questions.sketch") :value "sketch" :image "images/form/sketch.png"} + {:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png"} + {:label (tr "questions.canva") :value "canva" :image "images/form/canva.png"} + {:label (tr "questions.invision") :value "invision" :image "images/form/invision.png"} + {:label (tr "questions.never-used-a-tool") :value "never-used-a-tool" :image "images/form/never-used.png"} + {:label (tr "questions.other") :value "other"}] + :name :experience-design-tool}] + [:div.other + [:label (tr "questions.other")] + [:& fm/input {:name :experience-design-tool-other :label (tr "questions.other")}]]])) + +(s/def ::questions-form-step-4 + (s/keys :req-un [::team-size ::role] + :opt-un [::role-other])) + +(mf/defc step-4 + [{:keys [on-next on-prev] :as props}] + (let [form (fm/use-form + :initial {} + :spec ::questions-form-step-4)] + [:& step-container {:form form :step 4 :on-next on-next :on-prev on-prev} + [:h3 (tr "questions.role")] + [:& fm/radio-buttons {:options [{:label (tr "questions.designer") :value "designer"} + {:label (tr "questions.developer") :value "developer"} + {:label (tr "questions.manager") :value "manager"} + {:label (tr "questions.founder") :value "founder"} + {:label (tr "questions.marketing") :value "marketing"} + {:label (tr "questions.student-teacher") :value "student-teacher"} + {:label (tr "questions.other") :value "other"}] + :name :role}] + [:div.other + [:label (tr "questions.other")] + [:& fm/input {:name :role-other :label (tr "questions.other")}]] + + [:h3 (tr "questions.team-size")] + [:& fm/select {:options [{:label (tr "questions.more-than-50") :value "more-than-50" :key "more-than-50"} + {:label (tr "questions.31-50") :value "31-50" :key "31-50"} + {:label (tr "questions.11-30") :value "11-30" :key "11-30"} + {:label (tr "questions.2-10") :value "2-10" :key "2-10"} + {:label (tr "questions.freelancer") :value "freelancer" :key "freelancer"} + {:label (tr "questions.personal-project") :value "personal-project" :key "personal-project"}] + :label (tr "questions.select-option") + :default nil + :name :team-size}]])) (mf/defc questions - [{:keys [profile form-id]}] - (let [container (mf/use-ref)] - (mf/use-effect (partial load-arengu-sdk container (:email profile) form-id)) + [{:keys []}] + (let [container (mf/use-ref) + step (mf/use-state 1) + clean-data (mf/use-state {}) + + on-next + (mf/use-fn + (fn [form] + (swap! step inc) + (swap! clean-data merge (:clean-data @form)))) + + on-prev + (mf/use-fn + (fn [] + (swap! step dec))) + + on-submit + (mf/use-fn + (mf/deps @clean-data) + (fn [form] + (let [questionnaire (merge @clean-data (:clean-data @form))] + (reset! clean-data questionnaire) + (st/emit! (du/mark-questions-as-answered questionnaire)))))] + [:div.modal-wrapper.questions-form [:div.modal-overlay [:div.modal-container.onboarding.onboarding-v2 {:ref container} [:img.deco.left {:src "images/deco-left.png" :border 0}] - [:img.deco.right {:src "images/deco-right.png" :border 0}]]]])) - - + [:img.deco.right {:src "images/deco-right.png" :border 0}] + [:div.signup-questions + (case @step + 1 [:& step-1 {:on-next on-next :on-prev on-prev}] + 2 [:& step-2 {:on-next on-next :on-prev on-prev}] + 3 [:& step-3 {:on-next on-next :on-prev on-prev}] + 4 [:& step-4 {:on-next on-submit :on-prev on-prev}])]]]])) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index a447bd3a2..54ca4b09d 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -4736,3 +4736,174 @@ msgstr "Update" msgid "workspace.viewport.click-to-close-path" msgstr "Click to close the path" +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.lets-get-started" +msgstr "Let's get started!" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.your-feedback-will-help-us" +msgstr "Your feedback will help us understand what your habits and preferences are so that we can keep making Penpot such a useful and enjoyable tool." + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions-how-are-you-planning-to-use-penpot" +msgstr "How are you planning to use Penpot?" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.discover-more-about-penpot" +msgstr "Discover more about Penpot" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.test-penpot-to-see-if-its-a-fit-for-team" +msgstr "Test Penpot to see if it's a fit for team " + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.start-to-work-on-my-project" +msgstr "Start to work on my project" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.get-the-code-from-my-team-project" +msgstr "Get the code from my team project " + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.leave-feedback-for-my-team-project" +msgstr "Leave feedback for my team project" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.work-in-concept-ideas" +msgstr "Work in concept ideas" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.try-out-before-using-penpot-on-premise" +msgstr "Try out before using Penpot on-premise" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.select-option" +msgstr "Select option" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.previous" +msgstr "Previous" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.next" +msgstr "Next" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.start" +msgstr "Start" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.describe-your-experience-working-on" +msgstr "How would you best describe your experience working on..." + +#: src/app/main/ui/onboarding/questions.cljs +msgid "branding-illustrations-marketing-pieces" +msgstr "...branding, illustrations, marketing pieces, etc." + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.none" +msgstr "None" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.some" +msgstr "Some" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.a-lot" +msgstr "A lot" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.interface-design-visual-assets-design-systems" +msgstr "... interface design, visual assets, design systems, etc." + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.wireframes-user-journeys-flows-navigation-trees" +msgstr "... wireframes, user journeys & flows, navigation trees, etc." + +#: src/app/main/ui/onboarding/questions.cljs +msgid "question.design-tool-more-experienced-with" +msgstr "Which is the design tool you have more experience with?" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.figma" +msgstr "Figma" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.sketch" +msgstr "Sketch" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.adobe-xd" +msgstr "Adobe XD" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.canva" +msgstr "Canva" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.invision" +msgstr "InVision" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.never-used-a-tool" +msgstr "I've never used a design tool before" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.other" +msgstr "Other (specify)" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.team-size" +msgstr "What's the size of your team?" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.more-than-50" +msgstr "More than 50" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.31-50" +msgstr "31-50" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.11-30" +msgstr "11-30" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.2-10" +msgstr "2-10" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.freelancer" +msgstr "I'm a freelancer" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.personal-project" +msgstr "I’m working in a personal project" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.role" +msgstr "What's your role?" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.designer" +msgstr "Designer" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.developer" +msgstr "Developer" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.manager" +msgstr "Product or Project manager" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.founder" +msgstr "Founder/VP" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.marketing" +msgstr "Marketing" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.student-teacher" +msgstr "Student or teacher" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 4ab4ba8de..d113c47fb 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -4855,4 +4855,176 @@ msgid "workspace.updates.update" msgstr "Actualizar" msgid "workspace.viewport.click-to-close-path" -msgstr "Pulsar para cerrar la ruta" \ No newline at end of file +msgstr "Pulsar para cerrar la ruta" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.lets-get-started" +msgstr "¡Empecemos!" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.your-feedback-will-help-us" +msgstr "Tus respuestas nos ayudarán a entender tus hábitos y preferencias, lo que nos ayudará a continuar mejorando Penpot" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions-how-are-you-planning-to-use-penpot" +msgstr "¿Qué uso piensas darle a Penpot?" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.discover-more-about-penpot" +msgstr "Conocer Penpot mejor" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.test-penpot-to-see-if-its-a-fit-for-team" +msgstr "Valorar si Penpot es adecuado para mi equipo" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.start-to-work-on-my-project" +msgstr "Comenzar a trabajar en mi proyecto" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.get-the-code-from-my-team-project" +msgstr "Obtener código de un proyecto" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.leave-feedback-for-my-team-project" +msgstr "Dejar comentarios en un proyecto" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.work-in-concept-ideas" +msgstr "Conceptualizar ideas" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.try-out-before-using-penpot-on-premise" +msgstr "Probar Penpot antes de usarlo en una instalación propia" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.select-option" +msgstr "Selecciona una opción" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.previous" +msgstr "Anterior" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.next" +msgstr "Siguiente" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.start" +msgstr "Comenzar" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.describe-your-experience-working-on" +msgstr "Cuánta experiencia dirías que tienes trabajando con..." + +#: src/app/main/ui/onboarding/questions.cljs +msgid "branding-illustrations-marketing-pieces" +msgstr "diseño de marca, ilustraciones, piezas de marketing..." + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.none" +msgstr "Ninguna" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.some" +msgstr "Alguna" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.a-lot" +msgstr "Mucha" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.interface-design-visual-assets-design-systems" +msgstr "diseño de interfaz, visual, sistemas de diseño..." + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.wireframes-user-journeys-flows-navigation-trees" +msgstr "prototipos, user journeys, flujos, árboles de navegación..." + +#: src/app/main/ui/onboarding/questions.cljs +msgid "question.design-tool-more-experienced-with" +msgstr "¿Cuál es la herramienta de deiseño con la que tienes más experiencia?" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.figma" +msgstr "Figma" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.sketch" +msgstr "Sketch" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.adobe-xd" +msgstr "Adobe XD" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.canva" +msgstr "Canva" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.invision" +msgstr "InVision" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.never-used-a-tool" +msgstr "Nunca antes he usado una herramienta de diseño" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.other" +msgstr "Otra (especifica)" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.team-size" +msgstr "¿De qué tamaño es tu equipo?" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.more-than-50" +msgstr "Más de 50" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.31-50" +msgstr "31-50" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.11-30" +msgstr "11-30" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.2-10" +msgstr "2-10" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.freelancer" +msgstr "Soy freelancer" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.personal-project" +msgstr "Estoy trabajando en un proyecto personal" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.role" +msgstr "¿Cuál es tu rol?" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.designer" +msgstr "Diseño" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.developer" +msgstr "Desarrollo" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.manager" +msgstr "Gestión de producto o proyecto" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.founder" +msgstr "Dirección" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.marketing" +msgstr "Marketing" + +#: src/app/main/ui/onboarding/questions.cljs +msgid "questions.student-teacher" +msgstr "Estudiante o profesorado"