Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 08:29:42 -05:00
Code Issues Activity

✨ Improve state management on onboarding newsletter modal

Browse source
This commit is contained in:
Andrey Antukh 2024-06-07 14:55:24 +02:00
parent 2629fa0662
commit 0dda893d73
1 changed files with 49 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
frontend/src/app/main/ui/onboarding/newsletter.cljs
View file

@ -8,39 +8,52 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.config :as cf] [app.config :as cf]
[app.main.data.events :as-alias ev]
[app.main.data.messages :as msg] [app.main.data.messages :as msg]
[app.main.data.modal :as modal]
[app.main.data.users :as du] [app.main.data.users :as du]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[potok.v2.core :as ptk]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc onboarding-newsletter (mf/defc onboarding-newsletter
{::mf/register modal/components
::mf/register-as :onboarding-newsletter}
[] []
(let [message (tr "onboarding.newsletter.acceptance-message") (let [state* (mf/use-state #(do {:newsletter-updates false
newsletter-updates (mf/use-state false) :newsletter-news false}))
newsletter-news (mf/use-state false) state (deref state*)
toggle
(mf/use-callback
(fn [option]
(swap! option not)))
on-change
(mf/use-fn
(fn [event]
(let [attr (-> (dom/get-current-target event)
(dom/get-data "attr")
(keyword))]
(swap! state* update attr not))))
accept on-next
(mf/use-callback (mf/use-fn
(mf/deps @newsletter-updates @newsletter-news) (mf/deps state)
(fn [] (fn []
(st/emit! (when (or @newsletter-updates @newsletter-news) (when (or (:newsletter-updates state)
(msg/success message)) (:newsletter-news state))
(modal/show {:type :onboarding-team}) (st/emit! (msg/success (tr "onboarding.newsletter.acceptance-message"))))
(du/update-profile-props {:newsletter-updates @newsletter-updates :newsletter-news @newsletter-news}))))
onboarding-a-b-test? (cf/external-feature-flag "signup-background" "test")] (let [params (-> state
(assoc ::ev/name "onboarding-step")
(assoc :label "newsletter:subscriptions")
(assoc :step 6))]
(st/emit! (ptk/data-event ::ev/event params)
(du/update-profile-props state)))))
onboarding-a-b-test?
(cf/external-feature-flag "signup-background" "test")]
[:div {:class (stl/css-case
:modal-overlay true
:onboarding-a-b-test onboarding-a-b-test?)}
[:div {:class (stl/css-case :modal-overlay true
:onboarding-a-b-test onboarding-a-b-test?)}
[:div.animated.fadeInDown {:class (stl/css :modal-container)} [:div.animated.fadeInDown {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-left)} [:div {:class (stl/css :modal-left)}
[:img {:src "images/deco-newsletter.png" [:img {:src "images/deco-newsletter.png"
@ -50,30 +63,34 @@
[:h2 {:class (stl/css :modal-title) [:h2 {:class (stl/css :modal-title)
:data-test "onboarding-newsletter-title"} :data-test "onboarding-newsletter-title"}
(tr "onboarding.newsletter.title")] (tr "onboarding.newsletter.title")]
[:p {:class (stl/css :modal-text)} [:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.newsletter.desc")] (tr "onboarding-v2.newsletter.desc")]
[:div {:class (stl/css :newsletter-options)} [:div {:class (stl/css :newsletter-options)}
[:div {:class (stl/css :input-wrapper)} [:div {:class (stl/css :input-wrapper)}
[:label {:for "newsletter-updates"} [:label {:for "newsletter-updates"}
[:span {:class (stl/css-case :global/checked @newsletter-updates)} [:span {:class (stl/css-case :global/checked (:newsletter-updates state))}
(when @newsletter-updates i/status-tick]
i/status-tick)]
(tr "onboarding-v2.newsletter.updates") (tr "onboarding-v2.newsletter.updates")
[:input {:type "checkbox" [:input {:type "checkbox"
:id "newsletter-updates" :id "newsletter-updates"
:on-change #(toggle newsletter-updates)}]]] :data-attr "newsletter-updates"
:value (:newsletter-updates state)
:on-change on-change}]]]
[:div {:class (stl/css :input-wrapper)} [:div {:class (stl/css :input-wrapper)}
[:label {:for "newsletter-news"} [:label {:for "newsletter-news"}
[:span {:class (stl/css-case :global/checked @newsletter-news)} [:span {:class (stl/css-case :global/checked (:newsletter-news state))}
(when @newsletter-news i/status-tick]
i/status-tick)]
(tr "onboarding-v2.newsletter.news") (tr "onboarding-v2.newsletter.news")
[:input {:type "checkbox" [:input {:type "checkbox"
:id "newsletter-news" :id "newsletter-news"
:on-change #(toggle newsletter-news)}]]]] :data-attr "newsletter-news"
:value (:newsletter-news state)
:on-change on-change}]]]]
[:p {:class (stl/css :modal-text)} [:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.newsletter.privacy1") (tr "onboarding-v2.newsletter.privacy1")
@ -84,5 +101,6 @@
[:p {:class (stl/css :modal-text)} [:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.newsletter.privacy2")] (tr "onboarding-v2.newsletter.privacy2")]
[:button {:on-click accept [:button {:on-click on-next
:class (stl/css :accept-btn)} (tr "labels.continue")]]]])) :class (stl/css :accept-btn)}
(tr "labels.continue")]]]]))