mirror of
https://github.com/penpot/penpot.git
synced 2025-05-04 15:05:55 +02:00
🎉 Move survey to local resources
This commit is contained in:
Alejandro Alonso
Andrey Antukh
parent
b6d60773e3
commit
a1c09057c1
10 changed files with 704 additions and 385 deletions
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
175
frontend/resources/styles/main/partials/signup-questions.scss
Normal file
175
frontend/resources/styles/main/partials/signup-questions.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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)))
|
||||
|
|
|
|||
|
|
@ -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))))))))
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {}]
|
||||
|
|
|
|||
|
|
@ -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))]
|
||||
|
|
|
|||
|
|
@ -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}])]]]]))
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -4855,4 +4855,176 @@ msgid "workspace.updates.update"
|
|||
msgstr "Actualizar"
|
||||
|
||||
msgid "workspace.viewport.click-to-close-path"
|
||||
msgstr "Pulsar para cerrar la ruta"
|
||||
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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue