diff --git a/default.hbs b/default.hbs index 280584f..3d53196 100644 --- a/default.hbs +++ b/default.hbs @@ -67,6 +67,9 @@ {{!-- The footer --}} {{> footer}} + {{!-- Notifications alerts --}} + {{> "notifications"}} + {{!-- Common scripts shared between pages --}} diff --git a/index.hbs b/index.hbs index 3cfa536..f4e4900 100644 --- a/index.hbs +++ b/index.hbs @@ -20,6 +20,9 @@ into the {body} of the default.hbs template --}} {{#if @labs.subscribers}} {{t "Subscribe"}} {{/if}} + {{#if @labs.members}} + {{t "Subscribe"}} + {{/if}} diff --git a/locales/en.json b/locales/en.json index 0add769..637a90e 100644 --- a/locales/en.json +++ b/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." } diff --git a/locales/es.json b/locales/es.json index 55fe5a1..30d675e 100644 --- a/locales/es.json +++ b/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." } diff --git a/page-newsletter.hbs b/page-newsletter.hbs index 4cb80e8..80181f0 100644 --- a/page-newsletter.hbs +++ b/page-newsletter.hbs @@ -15,7 +15,6 @@ into the {body} of the default.hbs template --}}
- {{^if success}}

{{t "Subscribe to"}} {{@site.title}}

@@ -25,17 +24,5 @@ into the {body} of the default.hbs template --}}
{{> "newsletter-form"}}
- {{else}} -
-
-

{{t "Subscribed!"}}

-

- {{t "You've successfully subscribed to"}} {{@site.title}} {{t "with the email address"}} - {{email}} -

-
- {{t "Back to home"}} -
- {{/if}}
diff --git a/partials/notifications.hbs b/partials/notifications.hbs new file mode 100644 index 0000000..924ef8b --- /dev/null +++ b/partials/notifications.hbs @@ -0,0 +1,27 @@ +
+ {{t "Great! You've successfully subscribed."}} + +
+ +
+ {{t "Great! Next, complete checkout for full access."}} + +
+ +
+ {{t "Welcome back! You've successfully signed in."}} + +
+ +
+ {{t "Success! Your account is fully activated, you now have access to all content."}} + +
\ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js index b3e276f..147b30d 100644 --- a/src/js/app.js +++ b/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() }) diff --git a/src/js/helpers.js b/src/js/helpers.js index d21d6d6..6bf14ea 100644 --- a/src/js/helpers.js +++ b/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, ' ')) +} diff --git a/src/sass/app.scss b/src/sass/app.scss index 4cfb853..2c1a14d 100644 --- a/src/sass/app.scss +++ b/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"; diff --git a/src/sass/components/ui/_alert.scss b/src/sass/components/ui/_alert.scss new file mode 100644 index 0000000..ed473ad --- /dev/null +++ b/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; + } + } +}