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 c3b98f6c6a..7d55acee5b 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
@@ -5,7 +5,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
(function (Modules) {
function SinglePageNotificationButton ($module) {
this.$module = $module
- this.personalisationEndpoint = this.$module.getAttribute('data-personalisation-endpoint')
+ this.basePath = this.$module.querySelector('input[name="base_path"]').value
+ this.personalisationEndpoint = '/api/personalisation/check-email-subscription?base_path=' + this.basePath
}
SinglePageNotificationButton.prototype.init = function () {
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 85e0a22078..9f8195ac86 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
@@ -4,15 +4,15 @@
base_path ||= nil
local_assigns[:margin_bottom] ||= 3
already_subscribed ||= false
+ js_enhancement ||= false
text ||= already_subscribed ? t('components.single_page_notification_button.unsubscribe_text') : t('components.single_page_notification_button.subscribe_text')
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
wrapper_classes = %w(gem-c-single-page-notification-button govuk-!-display-none-print)
wrapper_classes << shared_helper.get_margin_bottom
classes = "govuk-body-s gem-c-single-page-notification-button__submit"
-
- data_attributes[:module] = "single-page-notification-button"
- data_attributes[:personalisation_endpoint] = Plek.current.website_root + "/api/personalisation/check-email-subscription?base_path=" + base_path if base_path
+
+ data_attributes[:module] = "single-page-notification-button" if js_enhancement
%>
<% button_text = capture do %>
<%= text %>
diff --git a/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml b/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml
index afb6d5bb16..6017155afe 100644
--- a/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml
+++ b/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml
@@ -1,7 +1,8 @@
name: Single page notification button
description: A button that subscribes the user to email notifications to a page
body: |
- By default, the component displays with the "Get emails about this page" state. The component uses JavaScript to check if the user has already subscribed to email notifications on the current page. If yes, the state of the component updates accordingly.
+ By default, the component displays with the "Get emails about this page" state.
+ If the `js-enhancement` flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page. If yes, the state of the component updates accordingly.
The component does not render without the `base_path` parameter. The `base_path` is necessary for [checking if an email subscription is active on page load](https://github.com/alphagov/account-api/blob/main/docs/api.md#get-apipersonalisationcheck-email-subscriptiontopic_slug) and the creation/deletion of an email notification subscription.
diff --git a/spec/components/single_page_notification_button_spec.rb b/spec/components/single_page_notification_button_spec.rb
index 121fdcee7a..5dbad63c88 100644
--- a/spec/components/single_page_notification_button_spec.rb
+++ b/spec/components/single_page_notification_button_spec.rb
@@ -40,4 +40,9 @@ def component_name
render_component({ base_path: "/the-current-page", margin_bottom: 9 })
assert_select '.gem-c-single-page-notification-button.govuk-\!-margin-bottom-9'
end
+
+ it "has an data-module attribute for JavaScript, if the js-enhancement flag is present" do
+ render_component({ base_path: "/the-current-page", js_enhancement: true })
+ assert_select '.gem-c-single-page-notification-button[data-module="single-page-notification-button"]'
+ end
end
diff --git a/spec/javascripts/components/single-page-notification-button-spec.js b/spec/javascripts/components/single-page-notification-button-spec.js
index 200c6d16c0..bf6da7f246 100644
--- a/spec/javascripts/components/single-page-notification-button-spec.js
+++ b/spec/javascripts/components/single-page-notification-button-spec.js
@@ -1,4 +1,4 @@
-/* eslint-env jasmine, jquery */
+/* eslint-env jasmine */
/* global GOVUK */
describe('Single page notification component', function () {
@@ -6,9 +6,9 @@ describe('Single page notification component', function () {
beforeEach(function () {
FIXTURE =
- ''
window.setFixtures(FIXTURE)
jasmine.Ajax.install()
@@ -31,7 +31,7 @@ describe('Single page notification component', function () {
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
contentType: 'application/json',
- responseText: '{\n "base_path": "/current-page-path",\n "active": true,\n "button_html": ""\n}'
+ responseText: '{\n "base_path": "/current-page-path",\n "active": true,\n "button_html": ""\n}'
})
var form = document.querySelector('form.gem-c-single-page-notification-button.new-button-for-test')