🎉 Newsletter Opt-in options for subscription categories

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
 

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;
   }
 

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})
+                       (modal/show {:type :onboarding-team})
-                     (du/update-profile-props {:newsletter-subscribed true}))))
+                       (du/update-profile-props {:newsletter-updates true :newsletter-news true}))))]
-        
-        decline
-        (mf/use-callback
-         (fn []
-           (st/emit! (modal/show {:type :onboarding-team})
-                     (du/update-profile-props {:newsletter-subscribed false}))))]
 
     [: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")]]
+       [:div.newsletter-options
-       [:p (tr "onboarding.newsletter.privacy2")]]
+        [: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 "labels.continue")]]
-       [:button.btn-primary {:on-click accept} (tr "onboarding.newsletter.accept")]]
       [: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"}]]]))

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 "
+"Subscribe to the Penpot newsletter to stay up to date with the product "
-"progress and news."
+"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?"
 

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?"