From f921085c720a81f891817ebb0b48385325d7726d Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Tue, 13 Sep 2022 14:33:21 +0200 Subject: [PATCH] :tada: Newsletter Opt-in options for subscription categories --- CHANGES.md | 1 + .../resources/styles/main/partials/modal.scss | 21 +++++++++- .../app/main/ui/onboarding/newsletter.cljs | 39 ++++++++++++------- frontend/translations/en.po | 28 +++++++------ frontend/translations/es.po | 28 +++++++------ 5 files changed, 80 insertions(+), 37 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index cce024301..01f07a30b 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -22,6 +22,7 @@ - Add zoom to shape on double click up on its icon [Taiga #3929](https://tree.taiga.io/project/penpot/us/3929) by @andrewzhurov - Add Libraries & Templates carousel [Taiga #3860](https://tree.taiga.io/project/penpot/us/3860) - Ungroup frames [Taiga #4012](https://tree.taiga.io/project/penpot/us/4012) +- Newsletter Opt-in options for subscription categories [Taiga #3242](https://tree.taiga.io/project/penpot/us/3242) ### :bug: Bugs fixed diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index b5635bc5b..d52289ab3 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -1097,7 +1097,7 @@ &.newsletter { padding: $size-5 0 0 0; flex-direction: column; - min-width: 555px; + min-width: 623px; .modal-top { padding: 87px 40px 0 40px; color: $color-gray-60; @@ -1127,6 +1127,17 @@ flex-direction: column; border-top: 1px solid $color-gray-10; + .input-checkbox { + margin-bottom: 23px; + + label { + font-family: "worksans", sans-serif; + text-align: left; + color: $color-black; + font-size: $fs12; + } + } + p { font-family: "worksans", sans-serif; text-align: left; @@ -1143,6 +1154,12 @@ margin-right: 16px; } } + + .deco.top { + width: 183px; + top: -106px; + left: 213px; + } } } @@ -1203,7 +1220,7 @@ } &.newsletter-right { - left: 515px; + left: 586px; top: 50px; } diff --git a/frontend/src/app/main/ui/onboarding/newsletter.cljs b/frontend/src/app/main/ui/onboarding/newsletter.cljs index 0103559f7..671f4fe3d 100644 --- a/frontend/src/app/main/ui/onboarding/newsletter.cljs +++ b/frontend/src/app/main/ui/onboarding/newsletter.cljs @@ -18,30 +18,43 @@ ::mf/register-as :onboarding-newsletter-modal} [] (let [message (tr "onboarding.newsletter.acceptance-message") + newsletter-updates (mf/use-state false) + newsletter-news (mf/use-state false) + toggle + (mf/use-callback + (fn [option] + (swap! option not))) + + accept (mf/use-callback + (mf/deps @newsletter-updates @newsletter-news) (fn [] (st/emit! (dm/success message) - (modal/show {:type :onboarding-team}) - (du/update-profile-props {:newsletter-subscribed true})))) - - decline - (mf/use-callback - (fn [] - (st/emit! (modal/show {:type :onboarding-team}) - (du/update-profile-props {:newsletter-subscribed false}))))] + (modal/show {:type :onboarding-team}) + (du/update-profile-props {:newsletter-updates true :newsletter-news true}))))] [:div.modal-overlay [:div.modal-container.onboarding.newsletter.animated.fadeInDown [:div.modal-top [:h1.newsletter-title {:data-test "onboarding-newsletter-title"} (tr "onboarding.newsletter.title")] - [:p (tr "onboarding.newsletter.desc")]] + [:p (tr "onboarding-v2.newsletter.desc")]] [:div.modal-bottom - [:p (tr "onboarding.newsletter.privacy1") [:a {:target "_blank" :href "https://penpot.app/privacy.html"} (tr "onboarding.newsletter.policy")]] - [:p (tr "onboarding.newsletter.privacy2")]] + [:div.newsletter-options + [:div.input-checkbox.check-primary + [:input {:type "checkbox" + :id "newsletter-updates" + :on-change #(toggle newsletter-updates)}] + [:label {:for "newsletter-updates"} (tr "onboarding-v2.newsletter.updates")]] + [:div.input-checkbox.check-primary + [:input {:type "checkbox" + :id "newsletter-news" + :on-change #(toggle newsletter-news)}] + [:label {:for "newsletter-news"} (tr "onboarding-v2.newsletter.news")]]] + [:p (tr "onboarding-v2.newsletter.privacy1") [:a {:target "_blank" :href "https://penpot.app/privacy.html"} (tr "onboarding.newsletter.policy")]] + [:p (tr "onboarding-v2.newsletter.privacy2")]] [:div.modal-footer - [:button.btn-secondary {:on-click decline} (tr "onboarding.newsletter.decline")] - [:button.btn-primary {:on-click accept} (tr "onboarding.newsletter.accept")]] + [:button.btn-primary {:on-click accept} (tr "labels.continue")]] [:img.deco.top {:src "images/deco-newsletter.png" :border "0"}] [:img.deco.newsletter-left {:src "images/deco-news-left.png" :border "0"}] [:img.deco.newsletter-right {:src "images/deco-news-right.png" :border "0"}]]])) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index ed83ba81e..1e67e91d6 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -2054,22 +2054,28 @@ msgstr "" msgid "onboarding.newsletter.decline" msgstr "No, thanks" -msgid "onboarding.newsletter.desc" +msgid "onboarding-v2.newsletter.desc" msgstr "" -"Subscribe to our newsletter to stay up to date with product development " -"progress and news." +"Subscribe to the Penpot newsletter to stay up to date with the product " +"development progress and news." + +msgid "onboarding-v2.newsletter.updates" +msgstr "Send me product updates (new features, releases, fixes...)." + +msgid "onboarding-v2.newsletter.news" +msgstr "Send me news about Penpot (blog posts, video tutorials, streamings...)." + +msgid "onboarding-v2.newsletter.privacy1" +msgstr "We care about privacy, here you can read our " + +msgid "onboarding-v2.newsletter.privacy2" +msgstr "" +"We will only send relevant emails to you. You can unsubscribe at any time " +"via the unsubscribe link in any of our newsletters." msgid "onboarding.newsletter.policy" msgstr "Privacy Policy." -msgid "onboarding.newsletter.privacy1" -msgstr "Because we care about privacy, here's our " - -msgid "onboarding.newsletter.privacy2" -msgstr "" -"We will only send relevant emails to you. You can unsubscribe at any time " -"in your user profile or via the unsubscribe link in any of our newsletters." - msgid "onboarding.newsletter.title" msgstr "Want to receive Penpot news?" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 741e14a6c..4ec1082c7 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -2148,23 +2148,29 @@ msgstr "" msgid "onboarding.newsletter.decline" msgstr "No, gracias" -msgid "onboarding.newsletter.desc" +msgid "onboarding-v2.newsletter.desc" msgstr "" -"Suscríbete a nuestra newsletter para estar al día de los progresos del " +"Suscríbete a la newsletter de Penpot para estar al día de los progresos del " "producto y noticias." +msgid "onboarding-v2.newsletter.updates" +msgstr "Quiero recibir información sobre actualizaciones del producto (nuevas funcionalidades, releases, mejoras...)." + +msgid "onboarding-v2.newsletter.news" +msgstr "Quiero recibir noticias sobre Penpot (artículos del blog, vídeo tutoriales, directos...)." + +msgid "onboarding-v2.newsletter.privacy1" +msgstr "Nos importa la privacidad, aquí puedes leer nuestra " + +msgid "onboarding-v2.newsletter.privacy2" +msgstr "" +"Sólo te enviaremos emails relevantes para ti. Puedes desuscribirte en " +"cualquier momento usando el vínculo de desuscripción en " +"cualquiera de nuestras newsletters." + msgid "onboarding.newsletter.policy" msgstr "Política de Privacidad." -msgid "onboarding.newsletter.privacy1" -msgstr "Porque nos importa la privacidad, aquí puedes ver nuestra " - -msgid "onboarding.newsletter.privacy2" -msgstr "" -"Sólo te enviaremos emails relevantes para ti. Puedes desuscribirte en " -"cualquier momento desde tu perfil o usando el vínculo de desuscripción en " -"cualquiera de nuestras newsletters." - msgid "onboarding.newsletter.title" msgstr "¿Quieres recibir noticias sobre Penpot?"