Newsletter

server/app.js

@@ -29,5 +29,6 @@ require('apostrophe')({
     'highlight-items-widget': {},
     donate: {},
     'donate-page': {},
+    newsletter: {},
   },
 })

server/modules/@apostrophecms/global/index.js

@@ -101,6 +101,31 @@ module.exports = {
       stripePublicKey: {
         type: 'string',
       },
+      newsletterText: {
+        type: 'string',
+        textarea: true,
+        help: 'Text to display next to the newsletter signup form',
+      },
+      newsletterPlaceholder: {
+        type: 'string',
+        help: 'Placeholder text for the email input field',
+      },
+      newsletterSubmitText: {
+        type: 'string',
+        help: 'Text for the submit button',
+      },
+      newsletterNoticeRTE: {
+        type: 'area',
+        options: {
+          max: 1,
+          widgets: {
+            '@apostrophecms/rich-text': {
+              className: 'pdl-newsletter__notice',
+            },
+          },
+        },
+        help: 'Text to display under the form',
+      },
     },
     group: {
       links: {
@@ -115,6 +140,12 @@ module.exports = {
           'stripePublicKey',
         ],
       },
+      newsletter: {
+        label: 'Newsletter',
+        fields: [
+          'newsletterText', 'newsletterPlaceholder', 'newsletterSubmitText', 'newsletterNoticeRTE',
+        ],
+      },
     },
   },
 }

server/modules/newsletter/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "Email": "Email",
+  "Be the first to know about book releases.": "Be the first to know about book releases.",
+  "Subscribe": "Subscribe"
+}

server/modules/newsletter/index.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extend: '@apostrophecms/module',
+  options: {
+    i18n: {
+      ns: 'pdl',
+    },
+  },
+}

server/modules/newsletter/ui/src/index.scss

@@ -0,0 +1,112 @@
+@import '../../../asset/ui/src/scss/settings';
+
+.pdl-newsletter {
+  z-index: 4;
+  position: relative;
+  align-items: flex-end;
+  background-color: #fff;
+  display: flex;
+  font-weight: 500;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  padding: 70px 26px;
+
+  .pdl-newsletter__text {
+    display: flex;
+    min-width: 240px;
+    flex-direction: column;
+    font-size: 82.5px;
+    font-weight: 450;
+    color: #000;
+    line-height: 80px;
+    flex: 1;
+    flex-basis: 0%;
+    padding: 0 73px 6px 5px;
+  }
+
+  .pdl-newsletter__heading {
+    align-self: flex-start;
+  }
+
+  .pdl-newsletter__icon {
+    width: 48px;
+  }
+
+  .pdl-newsletter__form {
+    display: flex;
+    min-width: 240px;
+    flex-direction: column;
+    justify-content: flex-start;
+    flex: 1;
+    flex-basis: 73px;
+  }
+
+  .pdl-newsletter__content {
+    display: flex;
+
+    @media (min-width: map-get($breakpoints, 'md')) {
+      gap: 9px;
+    }
+  }
+
+  .pdl-newsletter__input {
+    border-radius: 4px;
+    background-color: #f1f1f1;
+    display: flex;
+    min-width: 240px;
+    align-items: center;
+    gap: 12px;
+    color: #000;
+    justify-content: flex-start;
+    flex: 1;
+    flex-basis: 0%;
+    padding: 12px;
+    border: 0;
+    font-size: 17.5px;
+    font-weight: 500;
+    box-sizing: border-box;
+
+    @media (min-width: map-get($breakpoints, 'md')) {
+      height: 53px;
+      width: 567px;
+    }
+
+    &:focus {
+      outline: none;
+    }
+    &::placeholder {
+      color: grey;
+      opacity: 1;
+      transition: all 0.3s;
+    }
+    &:hover::placeholder {
+      color: black;
+    }
+  }
+
+  .pdl-newsletter__submit {
+    align-self: stretch;
+    border-radius: 4px;
+    background-color: #000;
+    gap: 8px;
+    color: #fff;
+    padding: 12px;
+    border: none;
+    cursor: pointer;
+    min-width: 112px;
+    font-size: 18px;
+  }
+
+  .pdl-newsletter__notice {
+    color: #000;
+    font-size: 14px;
+    font-weight: 100;
+    letter-spacing: 0.14px;
+    margin-top: 10px;
+
+    a {
+      color: #000;
+      text-decoration: underline;
+    }
+  }
+}

server/modules/newsletter/views/index.html

@@ -0,0 +1,21 @@
+<section class="pdl-newsletter">
+  <div class="pdl-newsletter__text">
+    <div class="pdl-newsletter__heading">
+      {{ data.global.newsletterText or __t('pdl:Be the first to know about book releases.') }}
+      <img loading="lazy" src="{{ apos.asset.url('/modules/newsletter/newsletter.svg') }}" class="pdl-newsletter__icon" alt="icon" />
+    </div>
+  </div>
+  <form class="pdl-newsletter__form" action="https://app.kit.com/forms/7188099/subscriptions" method="POST">
+    <div class="pdl-newsletter__content">
+      <input type="email" id="email" name="email_address" class="pdl-newsletter__input" placeholder="{{ data.global.newsletterPlaceholder or __t('pdl:Email') }} *" aria-label="Email" required>
+      <button type="submit" class="pdl-newsletter__submit pdl-newsletter__submit--disabled">{{ data.global.newsletterSubmitText or __t('pdl:Subscribe') }}</button>
+    </div>
+    <div class="pdl-newsletter__validation"></div>
+    {% if data.global.newsletterNoticeRTE.items[0] %}
+      {% area data.global, 'newsletterNoticeRTE' %}
+    {% else %}
+      <p class="pdl-newsletter__notice">
+        You can unsubscribe at any time. For further details, review our <a href="/privacy-policy">Privacy Policy</a>.
+      </p>
+    {% endif %}
+</section>

server/views/layout.html

@@ -69,7 +69,7 @@
       </div>
 
       {% for item in data.global.headerNav %}
-          <a href="{{ item._page[0]._url }}" class="pdl-nav__item">{{ item._page[0].title }}</a>
+        <a href="{{ item._page[0]._url }}" class="pdl-nav__item">{{ item._page[0].title }}</a>
       {% endfor %}
 
       <span class="pdl-nav__item">
@@ -120,6 +120,7 @@
 {% block main %}{% endblock %}
 
 {% block afterMain %}
+  {% include "newsletter:index.html" %}
   </main>
   <footer class="pdl-footer">