Handle notifications

default.hbs

@@ -67,6 +67,9 @@
     {{!-- The footer --}}
     {{> footer}}
 
+    {{!-- Notifications alerts --}}
+    {{> "notifications"}}
+
     {{!-- Common scripts shared between pages --}}
     <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver%2CPromise%2CArray.prototype.includes%2CString.prototype.endsWith%2CString.prototype.startsWith%2CObject.assign%2CNodeList.prototype.forEach"></script>
     <script defer src="https://unpkg.com/@tryghost/content-api@1.2.7/umd/content-api.min.js"></script>

index.hbs

@@ -20,6 +20,9 @@ into the {body} of the default.hbs template --}}
     {{#if @labs.subscribers}}
       <a href="{{@site.url}}/subscribe" class="m-button filled">{{t "Subscribe"}}</a>
     {{/if}}
+    {{#if @labs.members}}
+      <a href="{{@site.url}}/newsletter" class="m-button filled">{{t "Subscribe"}}</a>
+    {{/if}}
   </div>
   </section>
   

locales/en.json

@@ -39,5 +39,9 @@
   "Type to search": "Type to search",
   "No results for your search, try something different.": "No results for your search, please try with something else.",
   "JavaScript license information": "JavaScript license information",
-  "Toggle dark mode": "Toggle dark mode"
+  "Toggle dark mode": "Toggle dark mode",
+  "Great! You've successfully subscribed.": "Great! You've successfully subscribed.",
+  "Great! Next, complete checkout for full access.": "Great! Next, complete checkout for full access.",
+  "Welcome back! You've successfully signed in.": "Welcome back! You've successfully signed in.",
+  "Success! Your account is fully activated, you now have access to all content.": "Success! Your account is fully activated, you now have access to all content."
 }

locales/es.json

@@ -39,5 +39,9 @@
   "Type to search": "Escribe para buscar",
   "No results for your search, try something different.": "No hay resultados para tu búsqueda, prueba algo diferente.",
   "JavaScript license information": "Información de licencia JavaScript",
-  "Toggle dark mode": "Alternar modo oscuro"
+  "Toggle dark mode": "Alternar modo oscuro",
+  "Great! You've successfully subscribed.": "¡Genial! Te has suscrito con éxito.",
+  "Great! Next, complete checkout for full access.": "¡Genial! Ahora, completa el checkout para tener acceso completo.",
+  "Welcome back! You've successfully signed in.": "¡Bienvenido de nuevo! Has iniciado sesión con éxito.",
+  "Success! Your account is fully activated, you now have access to all content.": "Éxito! Su cuenta está totalmente activada, ahora tienes acceso a todo el contenido."
 }

page-newsletter.hbs

@@ -15,7 +15,6 @@ into the {body} of the default.hbs template --}}
 
 <main class="l-fullscreen">
   <section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300">
-    {{^if success}}
     <div>
       <header class="m-heading in-subscribe-page">
         <h1 class="m-heading__title">{{t "Subscribe to"}} {{@site.title}}</h1>
@@ -25,17 +24,5 @@ into the {body} of the default.hbs template --}}
       </header>
       {{> "newsletter-form"}}
     </div>
-    {{else}}
-    <div>
-      <header class="m-heading in-subscribe-page">
-        <h1 class="m-heading__title">{{t "Subscribed!"}}</h1>
-        <p class="m-heading__description in-subscribe-page">
-          {{t "You've successfully subscribed to"}} <strong>{{@site.title}}</strong> {{t "with the email address"}}
-          <strong>{{email}}</strong>
-        </p>
-      </header>
-      <a href="{{@site.url}}" class="m-button outlined">{{t "Back to home"}}</a>
-    </div>
-    {{/if}}
   </section>
 </main>

partials/notifications.hbs

@@ -0,0 +1,27 @@
+<div class="m-alert success subscribe js-alert" data-notification="subscribe">
+  {{t "Great! You've successfully subscribed."}}
+  <button class="m-alert__close js-notification-close" aria-label="Close">
+    <span class="icon-close"></span>
+  </button>
+</div>
+
+<div class="m-alert success signup js-alert" data-notification="signup">
+  {{t "Great! Next, complete checkout for full access."}}
+  <button class="m-alert__close js-notification-close" aria-label="Close">
+    <span class="icon-close"></span>
+  </button>
+</div>
+
+<div class="m-alert success signin js-alert" data-notification="signin">
+  {{t "Welcome back! You've successfully signed in."}}
+  <button class="m-alert__close js-notification-close" aria-label="Close">
+    <span class="icon-close"></span>
+  </button>
+</div>
+
+<div class="m-alert success checkout js-alert" data-notification="checkout">
+  {{t "Success! Your account is fully activated, you now have access to all content."}}
+  <button class="m-alert__close js-notification-close" aria-label="Close">
+    <span class="icon-close"></span>
+  </button>
+</div>

src/js/app.js

@@ -10,7 +10,8 @@ import Fuse from 'fuse.js'
 import {
   isRTL,
   formatDate,
-  isDarkMode
+  isDarkMode,
+  getParameterByName
 } from './helpers'
 
 cssVars({})
@@ -36,6 +37,7 @@ $(document).ready(() => {
   const $searchResults = $('.js-search-results')
   const $searchNoResults = $('.js-no-results')
   const $toggleDarkMode = $('.js-toggle-darkmode')
+  const $closeNotification = $('.js-notification-close')
   const currentSavedTheme = localStorage.getItem('theme')
 
   let fuse = null
@@ -102,6 +104,49 @@ $(document).ready(() => {
       })
   }
 
+  const showNotification = (typeNotification) => {
+    const $notification = $(`.js-alert[data-notification="${typeNotification}"]`)
+    $notification.addClass('opened')
+    setTimeout(() => {
+      closeNotification($notification)
+    }, 5000)
+  }
+
+  const closeNotification = ($notification) => {
+    $notification.removeClass('opened')
+    const url = window.location.toString()
+
+    if (url.indexOf('?') > 0) {
+      const cleanUrl = url.substring(0, url.indexOf('?'))
+      window.history.replaceState({}, document.title, cleanUrl)
+    }
+  }
+
+  const checkForActionParameter = () => {
+    const action = getParameterByName('action')
+    const stripe = getParameterByName('stripe')
+
+    if (action === 'subscribe') {
+      showNotification('subscribe')
+    }
+
+    if (action === 'signup') {
+      window.location = `${ghostHost}/signup/?action=checkout`
+    }
+
+    if (action === 'checkout') {
+      showNotification('signup')
+    }
+
+    if (action === 'signin') {
+      showNotification('signin')
+    }
+
+    if (stripe === 'success') {
+      showNotification('checkout')
+    }
+  }
+
   $openMenu.click(() => {
     $header.addClass('mobile-menu-opened')
     $menu.addClass('opened')
@@ -179,6 +224,10 @@ $(document).ready(() => {
     }
   })
 
+  $closeNotification.click(function () {
+    closeNotification($(this).parent())
+  })
+
   $(window).click((e) => {
     if (submenuIsOpen) {
       if ($submenuOption && !$submenuOption.contains(e.target)) {
@@ -249,5 +298,6 @@ $(document).ready(() => {
   shave('.js-article-card-title', 100)
   shave('.js-article-card-title-no-image', 250)
 
+  checkForActionParameter()
   trySearchFeature()
 })

src/js/helpers.js

@@ -27,3 +27,18 @@ export const formatDate = (date) => {
 
   return ''
 }
+
+export const getParameterByName = (name, url) => {
+  if (!url) url = window.location.href
+
+  name = name.replace(/[\[\]]/g, '\\$&')
+
+  const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`)
+  const results = regex.exec(url)
+
+  if (!results) return null
+
+  if (!results[2]) return ''
+
+  return decodeURIComponent(results[2].replace(/\+/g, ' '))
+}

src/sass/app.scss

@@ -22,6 +22,7 @@
 @import "components/ui/back";
 @import "components/ui/small-text";
 @import "components/ui/not-found";
+@import "components/ui/alert";
 @import "components/header/header";
 @import "components/header/mobile-topbar";
 @import "components/header/logo";

src/sass/components/ui/_alert.scss

@@ -0,0 +1,75 @@
+.m-alert {
+  color: $white;
+  text-align: center;
+  letter-spacing: 1px;
+  line-height: 1.4;
+  font-size: 0.875rem;
+  visibility: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 16px 45px 14px;
+  z-index: 11;
+  @include transform(translateY(-100%));
+  @include transition(transform 0.2s ease);
+
+  @include respond-to('medium') {
+    font-size: 1rem;
+    padding: 24px 75px 22px;
+  }
+
+  &.success {
+    background-color: var(--primary-subtle-color);
+  }
+
+  &.opened {
+    visibility: visible;
+    @include transform(translateY(0));
+  }
+}
+
+.m-alert__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  right: $mobile-space;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  outline: 0;
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  @extend .no-appearance;
+  @include transform(translateY(-50%));
+
+  @include respond-to('medium') {
+    right: 40px;
+    width: 25px;
+    height: 25px;
+  }
+
+  span {
+    color: $white;
+    font-size: 0.75rem;
+
+    @include respond-to('medium') {
+      font-size: 0.875rem;
+    }
+  }
+}
+
+.rtl {
+  .m-alert__close {
+    right: auto;
+    left: $mobile-space;
+
+    @include respond-to('medium') {
+      right: auto;
+      left: 40px;
+    }
+  }
+}