Add topics to the newsletter subscription form

src/components/SectionHero.js

@@ -76,7 +76,8 @@ function SectionHero(props) {
               : page.layout == "policy_action" ||
                 page._type == "author" ||
                 page.stackbit_url_path == "/contributors" ||
-                page.stackbit_url_path == "/newsletter"
+                page.stackbit_url_path == "/newsletter" ||
+                page.stackbit_url_path == "/newsletter-new"
               ? theme.palette["secondary"].main
               : page.stackbit_url_path == "/donate" ||
                 page.stackbit_url_path == "/donate_new"
@@ -102,7 +103,8 @@ function SectionHero(props) {
                     : page.layout == "policy_action" ||
                       page._type == "author" ||
                       page.stackbit_url_path == "/contributors" ||
-                      page.stackbit_url_path == "/newsletter"
+                      page.stackbit_url_path == "/newsletter" ||
+                      page.stackbit_url_path == "/newsletter-new"
                     ? "#3C6E63"
                     : page.stackbit_url_path == "/donate" ||
                       page.stackbit_url_path == "/donate_new"

src/components/SectionSignUp.js

@@ -3,10 +3,56 @@ import _ from "lodash";
 
 // MUI imports
 import Box from "@mui/material/Box";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles((theme) => ({
+  header: {
+    fontFamily: "'Libre Baskerville', serif!important",
+    fontSize: "32px!important",
+  },
+  grid: {
+    marginTop: "110px",
+    display: "grid",
+    gridGap: "20px",
+    gridTemplateColumns: "1fr 1fr",
+    [theme.breakpoints.down("sm")]: {
+      gridTemplateColumns: "1fr",
+    },
+    marginRight: "-20px",
+    marginLeft: "-20px",
+  },
+  gridTopic: {
+    border: "1px solid #DCDCDC",
+    padding: "20px",
+    fontFamily: "Lexend",
+    fontSize: "16px",
+    fontWeight: "300",
+    textAlign: "left",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    height: "325px",
+  },
+  formContainer: {
+    display: "flex",
+    gap: "32px",
+    justifyContent: "center",
+    [theme.breakpoints.down("sm")]: {
+      marginRight: "-16px",
+      marginLeft: "-16px",
+      gap: "16px",
+    },
+  },
+}));
+
+//Libre Baskerville
 
 export default function SectionSignUp(props) {
+  const classes = useStyles();
   let section = _.get(props, "section", null);
 
+  console.log(section);
+
   return (
     <section id={_.get(section, "section_id", null)}>
       <Box marginBottom={8}>
@@ -18,55 +64,118 @@ export default function SectionSignUp(props) {
             <div className="ml-form-embedWrapper embedForm">
               <div className="ml-form-embedBody ml-form-embedBodyDefault row-form">
                 <div className="ml-form-embedContent">
-                  <h4>
+                  <h4 className={classes.header}>
                     Join our newsletter on issues and ideas at the intersection
                     of tech & democracy.
                   </h4>
-                  <p style={{ textAlign: "center" }}>
+                  <p
+                    style={{
+                      textAlign: "center",
+                      maxWidth: "750px",
+                      marginTop: "28px",
+                    }}
+                  >
                     Tech Policy Press is a startup nonprofit media & community
                     venture that will provoke debate and discussion at the
                     intersection of technology and democracy.
                   </p>
+                  <p
+                    style={{
+                      textAlign: "center",
+                      maxWidth: "750px",
+                      marginTop: "28px",
+                    }}
+                  >
+                    We compile all the top stories from our website into a
+                    newsletter format for you to receive directly to your email.
+                    Please check out the preview newsletters within each topic
+                    below and consider subscribing if you enjoy the content.
+                  </p>
                 </div>
                 <form
                   className="ml-block-form"
-                  action="https://static.mailerlite.com/webforms/submit/m6i8p9"
-                  data-code="m6i8p9"
+                  action="https://static.mailerlite.com/webforms/submit/v1a4y3"
+                  data-code="v1a4y3"
                   method="post"
                   target="_blank"
                 >
-                  <div className="ml-form-formContent">
-                    <div className="ml-form-fieldRow ml-last-item">
-                      <div className="ml-field-group ml-field-email ml-validate-email ml-validate-required">
-                        <input
-                          aria-label="email"
-                          aria-required="true"
-                          type="email"
-                          className="form-control"
-                          data-inputmask=""
-                          name="fields[email]"
-                          placeholder="Email"
-                          autoComplete="email"
-                        />
+                  <div className={classes.formContainer}>
+                    <div className="ml-form-formContent">
+                      <div className="ml-form-fieldRow ml-last-item">
+                        <div className="ml-field-group ml-field-email ml-validate-email ml-validate-required">
+                          <input
+                            aria-label="email"
+                            aria-required="true"
+                            type="email"
+                            className="form-control"
+                            data-inputmask=""
+                            name="fields[email]"
+                            placeholder="Email"
+                            autoComplete="email"
+                          />
+                        </div>
                       </div>
                     </div>
+                    <input type="hidden" name="ml-submit" value="1" />
+                    <div className="ml-form-embedSubmit">
+                      <button type="submit" className="primary">
+                        Subscribe
+                      </button>
+                      <button
+                        disabled="disabled"
+                        style={{ display: "none" }}
+                        type="button"
+                        className="loading"
+                      >
+                        <div className="ml-form-embedSubmitLoad"></div>
+                        <span className="sr-only">Loading...</span>
+                      </button>
+                    </div>
+                    <input type="hidden" name="anticsrf" value="true" />
+                    <input type="hidden" name="groups[]" value="104107073" />
                   </div>
-                  <input type="hidden" name="ml-submit" value="1" />
-                  <div className="ml-form-embedSubmit">
-                    <button type="submit" className="primary">
-                      Subscribe
-                    </button>
-                    <button
-                      disabled="disabled"
-                      style={{ display: "none" }}
-                      type="button"
-                      className="loading"
-                    >
-                      <div className="ml-form-embedSubmitLoad"></div>
-                      <span className="sr-only">Loading...</span>
-                    </button>
-                  </div>
-                  <input type="hidden" name="anticsrf" value="true" />
+                  {section.topics && (
+                    <div className={classes.grid}>
+                      {section.topics.map((topic) => {
+                        return (
+                          <label
+                            key={topic._key}
+                            htmlFor={"checkbox-" + topic.mailerlite_id}
+                          >
+                            <div className={classes.gridTopic}>
+                              <div style={{ alignSelf: "end" }}>
+                                <input
+                                  id={"checkbox-" + topic.mailerlite_id}
+                                  style={{
+                                    width: "32px",
+                                    height: "32px",
+                                    accentColor: "#427569",
+                                    borderColor: "#A8A7A7",
+                                  }}
+                                  type="checkbox"
+                                  name="groups[]"
+                                  value={topic.mailerlite_id}
+                                />
+                              </div>
+                              <div>
+                                <h3>{topic.name}</h3>
+                                <p>{topic.description}</p>
+                              </div>
+                              <div
+                                style={{
+                                  fontWeight: "600",
+                                  textTransform: "capitalize",
+                                  alignSelf: "end",
+                                }}
+                              >
+                                {topic.type}
+                              </div>
+                            </div>
+                          </label>
+                        );
+                      })}
+                    </div>
+                  )}
                 </form>
               </div>
               <div

src/sass/mailerlite-newsletter.scss

@@ -83,7 +83,7 @@
 }
 
 #mlb2-5983533.ml-form-embedContainer .ml-form-embedWrapper.embedForm {
-  max-width: 500px;
+  max-width: 800px;
   width: 100%
 }
 
@@ -126,7 +126,8 @@
 #mlb2-5983533.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
 #mlb2-5983533.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
   text-align: left;
-  margin: 0 0 20px 0
+  margin: 0 0 52px 0;
+  justify-items: center;
 }
 
 #mlb2-5983533.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
@@ -144,9 +145,9 @@
 #mlb2-5983533.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
   color: #000;
   font-family: 'Lexend', 'Open Sans', Arial, Helvetica, sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
+  font-size: 20px;
+  font-weight: 300;
+  line-height: 25px;
   margin: 0 0 10px 0;
   text-align: left
 }
@@ -205,7 +206,8 @@
 #mlb2-5983533.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow,
 #mlb2-5983533.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent {
   margin: 0 0 20px 0;
-  width: 100%
+  width: 100%;
+  max-width: 342px;
 }
 
 #mlb2-5983533.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
@@ -642,7 +644,8 @@
 #mlb2-5983533.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
   margin: 0 0 20px 0;
   float: left;
-  width: 100%
+  width: 100%;
+  max-width: 123px;
 }
 
 #mlb2-5983533.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {

studio/schemas/index.js

@@ -47,6 +47,7 @@ import iframeEmbed from './iframeEmbed.js'
 import customHtml from './customHtml.js'
 import tag from './tag.js'
 import dropdown_option from './dropdown_option.js'
+import newsletter_topic from './newsletter_topic.js'
 
 
 // Then we give our schema to the builder and provide the result to Sanity
@@ -86,6 +87,7 @@ export const schemaTypes = [
   section_tracker,
   section_policy_actions,
   sidebar_about,
+  newsletter_topic,
   tag,
   topic,
   action,

studio/schemas/newsletter_topic.js

@@ -0,0 +1,46 @@
+export default {
+    type: "object",
+    name: "newsletter_topic",
+    title: "Newsletter Topic",
+    fields: [
+        {
+            title: 'Name',
+            type: 'string',
+            name: 'name',
+            description: 'The name of the topic.',
+            validation: (Rule) => Rule.required(),
+        },
+        {
+            title: 'Description',
+            type: 'string',
+            name: 'description',
+            description: 'The topic description.',
+            validation: (Rule) => Rule.required(),
+        },
+        {
+            title: 'Frequency',
+            type: 'string',
+            name: 'type',
+            options: {
+              list: [
+                {title: 'Weekly', value: 'weekly'},
+                {title: 'Monthly', value: 'monthly'},
+                {title: 'Quarterly', value: 'quarterly'},
+              ],
+            },
+        },
+        {
+            title: 'MailerLite ID',
+            type: 'string',
+            name: 'mailerlite_id',
+            description: 'ID of the topic in MailerLite.',
+            validation: (Rule) => Rule.required(),
+        },
+    ],
+    preview: {
+      select: {
+        title: "name"
+      }
+    }
+  };
+

studio/schemas/section_sign_up.js

@@ -11,6 +11,18 @@ export default {
         'A unique identifier that can be used when linking to this section, if any. Must not contain whitespace.',
       validation: null,
     },
+    {
+      type: 'array',
+      name: 'topics',
+      title: 'Topics',
+      description: 'Newsletter topics',
+      validation: null,
+      of: [
+        {
+          type: 'newsletter_topic',
+        },
+      ],
+    },
     {
       type: "string",
       name: "type",