mirror of
https://github.com/penpot/penpot.git
synced 2025-06-06 14:21:38 +02:00
101 lines
3.6 KiB
Clojure
101 lines
3.6 KiB
Clojure
;; 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
|
|
|
|
(ns app.main.ui.onboarding.newsletter
|
|
(:require-macros [app.main.style :as stl])
|
|
(:require
|
|
[app.main.data.events :as-alias ev]
|
|
[app.main.data.notifications :as ntf]
|
|
[app.main.data.users :as du]
|
|
[app.main.store :as st]
|
|
[app.main.ui.icons :as i]
|
|
[app.util.dom :as dom]
|
|
[app.util.i18n :as i18n :refer [tr]]
|
|
[potok.v2.core :as ptk]
|
|
[rumext.v2 :as mf]))
|
|
|
|
(mf/defc onboarding-newsletter
|
|
[]
|
|
(let [state* (mf/use-state #(do {:newsletter-updates false
|
|
:newsletter-news false}))
|
|
state (deref state*)
|
|
|
|
on-change
|
|
(mf/use-fn
|
|
(fn [event]
|
|
(let [attr (-> (dom/get-current-target event)
|
|
(dom/get-data "attr")
|
|
(keyword))]
|
|
(swap! state* update attr not))))
|
|
|
|
on-next
|
|
(mf/use-fn
|
|
(mf/deps state)
|
|
(fn []
|
|
(when (or (:newsletter-updates state)
|
|
(:newsletter-news state))
|
|
(st/emit! (ntf/success (tr "onboarding.newsletter.acceptance-message"))))
|
|
|
|
(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)))))]
|
|
|
|
[:div {:class (stl/css-case
|
|
:modal-overlay true)}
|
|
|
|
[:div.animated.fadeInDown {:class (stl/css :modal-container)}
|
|
[:div {:class (stl/css :modal-left)}
|
|
[:img {:src "images/deco-newsletter.png"
|
|
:border "0"}]]
|
|
|
|
[:div {:class (stl/css :modal-right)}
|
|
[:h2 {:class (stl/css :modal-title)
|
|
:data-testid "onboarding-newsletter-title"}
|
|
(tr "onboarding.newsletter.title")]
|
|
|
|
[:p {:class (stl/css :modal-text)}
|
|
(tr "onboarding-v2.newsletter.desc")]
|
|
|
|
[:div {:class (stl/css :newsletter-options)}
|
|
[:div {:class (stl/css :input-wrapper)}
|
|
[:label {:for "newsletter-updates"}
|
|
[:span {:class (stl/css-case :global/checked (:newsletter-updates state))}
|
|
i/status-tick]
|
|
|
|
(tr "onboarding-v2.newsletter.updates")
|
|
[:input {:type "checkbox"
|
|
:id "newsletter-updates"
|
|
:data-attr "newsletter-updates"
|
|
:value (:newsletter-updates state)
|
|
:on-change on-change}]]]
|
|
|
|
[:div {:class (stl/css :input-wrapper)}
|
|
[:label {:for "newsletter-news"}
|
|
[:span {:class (stl/css-case :global/checked (:newsletter-news state))}
|
|
i/status-tick]
|
|
|
|
(tr "onboarding-v2.newsletter.news")
|
|
[:input {:type "checkbox"
|
|
:id "newsletter-news"
|
|
:data-attr "newsletter-news"
|
|
:value (:newsletter-news state)
|
|
:on-change on-change}]]]]
|
|
|
|
[:p {:class (stl/css :modal-text)}
|
|
(tr "onboarding-v2.newsletter.privacy1")
|
|
[:a {:class (stl/css :modal-link)
|
|
:target "_blank"
|
|
:href "https://penpot.app/privacy"}
|
|
(tr "onboarding.newsletter.policy")]]
|
|
[:p {:class (stl/css :modal-text)}
|
|
(tr "onboarding-v2.newsletter.privacy2")]
|
|
|
|
[:button {:on-click on-next
|
|
:class (stl/css :accept-btn)}
|
|
(tr "labels.continue")]]]]))
|