// Experience listens for this message to drop cookie
// and prevent popup loading repeatedly
const postCloseMessage = function(msg) {
window.parent.postMessage(msg, '*');
}
// trigger tracking event from parent
const trackingEvent = function() {
let message = 'newsletter_signup'
if(document.querySelector('.terms-checkbox').checked) {
message += '_include_marketing_email'
}
window.parent.postMessage(message, '*')
}
// Hide form and show success message
const successResponse = function() {
const wrapper = document.querySelector('.wrapper')
wrapper.classList.add('success')
trackingEvent()
postCloseMessage('close-permanent')
}
// show error / reset submit btn
const errorResponse = function(err) {
const submitBtn = document.querySelector('.btn-submit')
const errorMsg = document.querySelector('.error-response')
const emailWrapper = document.querySelector('.email-wrapper')
const response = err?.message || null
if (response && response !== 'Email address is invalid') {
errorMsg.innerText = response
}
if (response && response.includes('unusual traffic')) {
const splitMsg = response.split('contact us')
const contactUs = document.createElement('a')
contactUs.innerText = 'contact us'
contactUs.href = 'https://help.standard.co.uk/hc/en-us/requests/new'
contactUs.target = '_blank'
contactUs.rel = 'noopener noreferrer'
errorMsg.innerText = ''
errorMsg.append(splitMsg[0])
errorMsg.append(contactUs)
errorMsg.append(splitMsg[1])
emailWrapper.classList.add('error-pad')
}
submitBtn.disabled = false
errorMsg.classList.remove('hidden')
submitBtn.classList.remove('submitting')
}
const postSubscribeEmail = function() {
const form = document.querySelector('.form')
const formData = new FormData(form)
return fetch("https://www.standard.co.uk/api/piano-newsletter", {
method: "POST",
cache: "no-cache",
redirect: "follow",
body: formData
})
.then(function(response){
return response.json()
})
.then(function(resp) {
if (resp.success) {
successResponse()
} else {
throw new Error(resp.message)
}
})
.catch(function(err) {
errorResponse(err)
})
}
// create recaptcha token before submit
const triggerRecaptcha = function() {
const tokenElem = document.querySelector('.grecaptcha_token')
if(window.grecaptcha) {
grecaptcha.ready(function() {
grecaptcha.execute(
'6LdjO88ZAAAAANrVlvQVuU-88Hv9ly51pUhtcm__',
{action: 'submit'}
)
.then(function(token) {
tokenElem.value = token
postSubscribeEmail()
});
});
}
}
// override default browser form error messaging
const errorMessageListener = function() {
const emailInput = document.querySelector('input[name=loginEmail]')
const errorMsg = document.querySelector('.error-response')
emailInput?.addEventListener('invalid', function(event){
event.preventDefault()
if ( ! event.target.validity.valid ) {
errorMsg.classList.remove('hidden')
}
});
emailInput?.addEventListener('input', function(event){
event.preventDefault();
if ( event.target.validity.valid ) {
errorMsg.classList.add('hidden')
}
});
}
const closeBtnListener = function() {
const closeBtn = document.querySelector('.close-btn')
closeBtn.addEventListener('click', function() {
postCloseMessage('close')
})
}
// use topic tags, populated by piano with {{params.tags}}
// to provide register tracking
const setHiddenFields = function() {
const topicTags = document.querySelector('input[name=topictags]')
const regSourceSection = document.querySelector('input[name=regSourceSection]')
const regSourceMethod = document.querySelector('input[name=regSourceMethod]')
if(topicTags && topicTags.value) {
const tags = topicTags.value.split(',')
regSourceSection.value = tags.reverse().find(tag => tag.match(/s_.*/))
if (tags.includes('section')) {
regSourceMethod.value = 'Section Signpost'
}
}
}
// disable submit while waiting and show loading animation
const submitListener = function() {
const form = document.querySelector('.form')
const submitBtn = document.querySelector('.btn-submit')
form.addEventListener('submit', function(e) {
e.preventDefault()
submitBtn.disabled = true
submitBtn.classList.add('submitting')
triggerRecaptcha()
})
}
const initialise = function() {
submitListener()
errorMessageListener()
closeBtnListener()
setHiddenFields()
}
// insert google recaptcha script
const element = document.createElement('script')
element.async = 'async'
element['src'] = 'https://www.google.com/recaptcha/api.js?render=6LdjO88ZAAAAANrVlvQVuU-88Hv9ly51pUhtcm__'
document['head'].appendChild(element)
const waitForPiano = setInterval(() => {
const user = document.querySelector('input[name=p_uid]').value
if(user === '{{user.uid}}' || user === '') return
clearInterval(waitForPiano)
initialise()
}, 500);