From ce4d1a55f5791278e023098a0b851070f5cffc2c Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 9 Nov 2022 19:34:26 +0000 Subject: [PATCH] Update notification button based on API response No longer replace the entire button HTML from the personalisation API response. Instead, check the boolean "active" in the response: if active is true, user has subscribed to notifications. Update the button HTML accordingly by changing the button tracking attribute. When valid API response is received, also check if the button markup contains data-button-location and if so, append the value to the button tracking attribute. Also check if the button has data-button-text-unsubscribe and data-button-text-subscribe attributes; set custom button text if both data attributes are provided. Once the API response has been refactored on the backend to not return the entire button HTML, we should also remove passing the button location to the personalisation API in the JS and the corresponding test for it. --- .../single-page-notification-button.js | 32 +++++-- .../_single_page_notification_button.html.erb | 2 +- .../single-page-notification-button-spec.js | 83 +++++++++++++++++-- 3 files changed, 103 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js b/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js index a68060c2d1..3911c815e0 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js +++ b/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js @@ -28,15 +28,31 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; if (xhr.readyState === 4) { if (xhr.status === 200) { var responseText = xhr.responseText - // if response text exists and is JSON parse-able, parse the response and get the button html + // if response text exists and is JSON parse-able, parse the response and update the button html if (responseText && this.responseIsJSON(responseText)) { - var newButton = JSON.parse(responseText).button_html - var html = document.createElement('div') - html.innerHTML = newButton - // test that the html returned contains the button component; if yes, swap the button for the updated version - var responseButtonContainer = html.querySelector('form.gem-c-single-page-notification-button') - if (responseButtonContainer) { - this.$module.parentNode.replaceChild(responseButtonContainer, this.$module) + var active = JSON.parse(responseText).active + + var customSubscribeText = this.$module.getAttribute('data-button-text-subscribe') + var customUnsubscribeText = this.$module.getAttribute('data-button-text-unsubscribe') + // Only set custom button text if both text items are provided + var customText = customSubscribeText && customUnsubscribeText + + // Append '-[button-location]' to the tracking data attribute value if data-button-location is set + var optionalButtonLocation = this.$module.getAttribute('data-button-location') ? '-' + this.$module.getAttribute('data-button-location') : '' + + // If response returns active, user has subscribed to notifications + if (active === true) { + this.$module.setAttribute('data-track-action', 'Unsubscribe-button' + optionalButtonLocation) + + if (customText) { + this.$module.querySelector('.gem-c-single-page-notication-button__text').innerHTML = customUnsubscribeText + } + } else { + this.$module.setAttribute('data-track-action', 'Subscribe-button' + optionalButtonLocation) + + if (customText) { + this.$module.querySelector('.gem-c-single-page-notication-button__text').innerHTML = customSubscribeText + } } } } diff --git a/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb b/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb index 9cb3a98ba4..7ad6ea88ec 100644 --- a/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb +++ b/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb @@ -6,7 +6,7 @@ wrapper_classes << shared_helper.get_margin_bottom %> <% button_text = capture do %> - <%= component_helper.button_text %> + <%= component_helper.button_text %> <% end %> <%= tag.div class: wrapper_classes, data: { module: "gem-track-click"} do %> <%= tag.form class: component_helper.classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %> diff --git a/spec/javascripts/components/single-page-notification-button-spec.js b/spec/javascripts/components/single-page-notification-button-spec.js index 8402b64d1c..9586c0d8c6 100644 --- a/spec/javascripts/components/single-page-notification-button-spec.js +++ b/spec/javascripts/components/single-page-notification-button-spec.js @@ -8,7 +8,7 @@ describe('Single page notification component', function () { FIXTURE = '
' + '' + - '' + + '' + '
' window.setFixtures(FIXTURE) jasmine.Ajax.install() @@ -39,17 +39,90 @@ describe('Single page notification component', function () { expect(request.method).toBe('GET') }) - it('replaces the button when the API returns button html', function () { + it('renders "Subscribe-button" tracking attribute value if "active" in the API response is false', function () { + initButton() + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'application/json', + responseText: '{\n "base_path": "/current-page-path",\n "active": false\n }' + }) + + var buttonTrackingAttribute = document.querySelector('form.gem-c-single-page-notification-button').getAttribute('data-track-action') + expect(buttonTrackingAttribute).toBe('Subscribe-button') + }) + + it('renders "Unsubscribe-button" tracking attribute value if "active" in the API response is true', function () { + initButton() + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'application/json', + responseText: '{\n "base_path": "/current-page-path",\n "active": true\n }' + }) + + var buttonTrackingAttribute = document.querySelector('form.gem-c-single-page-notification-button').getAttribute('data-track-action') + expect(buttonTrackingAttribute).toBe('Unsubscribe-button') + }) + + it('renders button location as part of the tracking attribute value when API response is received if "data-button-location" is set', function () { + FIXTURE = + '
' + + '' + + '' + + '
' + window.setFixtures(FIXTURE) + + initButton() + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'application/json', + responseText: '{\n "base_path": "/current-page-path",\n "active": false\n }' + }) + + var buttonTrackingAttribute = document.querySelector('form.gem-c-single-page-notification-button').getAttribute('data-track-action') + expect(buttonTrackingAttribute).toBe('Subscribe-button-top') + }) + + it('renders custom subscribe button text when API response is received if "data-button-text-subscribe" and "data-button-text-unsubscribe" are set', function () { + FIXTURE = + '
' + + '' + + '' + + '
' + window.setFixtures(FIXTURE) + + initButton() + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'application/json', + responseText: '{\n "base_path": "/current-page-path",\n "active": false\n }' + }) + + var button = document.querySelector('form.gem-c-single-page-notification-button') + expect(button).toHaveText('Start getting emails about this stuff') + }) + + it('renders custom unsubscribe button text when API response is received if "data-button-text-subscribe" and "data-button-text-unsubscribe" are set', function () { + FIXTURE = + '
' + + '' + + '' + + '
' + window.setFixtures(FIXTURE) + initButton() jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'application/json', - responseText: '{\n "base_path": "/current-page-path",\n "active": true,\n "button_html": "
\\n \\n \\n
"\n}' + responseText: '{\n "base_path": "/current-page-path",\n "active": true\n }' }) - var button = document.querySelector('form.gem-c-single-page-notification-button.new-button-for-test button') - expect(button).toHaveText('Stop getting emails about this page') + var button = document.querySelector('form.gem-c-single-page-notification-button') + expect(button).toHaveText('Stop getting emails about this stuff') }) it('should remain unchanged if the response is not JSON', function () {