Updates based on feedback

- move endpoint to js module
- simplify fixture code
- make the JS enhancement opt-in by introduction of a new flag

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 () {

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 %>
   <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= text %>

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.
 

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

spec/javascripts/components/single-page-notification-button-spec.js

@@ -1,14 +1,14 @@
-/* eslint-env jasmine, jquery */
+/* eslint-env jasmine */
 /* global GOVUK */
 
 describe('Single page notification component', function () {
   var FIXTURE
 
   beforeEach(function () {
     FIXTURE =
-      '<form class="gem-c-single-page-notification-button govuk-!-display-none-print govuk-!-margin-bottom-3 old-button-for-test" action="/email/subscriptions/single-page/new" method="POST" data-module="single-page-notification-button" data-personalisation-endpoint="/api/personalisation/check-email-subscription?base_path=/current-page-path">' +
+      '<form class="gem-c-single-page-notification-button old-button-for-test" action="/email/subscriptions/single-page/new" method="POST" data-module="single-page-notification-button">' +
         '<input type="hidden" name="base_path" value="/current-page-path">' +
-        '<button class="govuk-body-s gem-c-single-page-notification-button__submit" type="submit">  <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"></path></svg>Get emails about this page</button>' +
+        '<button class="gem-c-single-page-notification-button__submit" type="submit">Get emails about this page</button>' +
     '</form>'
     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": "<form class=\\"gem-c-single-page-notification-button new-button-for-test govuk-!-display-none-print govuk-!-margin-bottom-3\\" action=\\"/email/subscriptions/single-page/new\\" method=\\"POST\\" data-personalisation-endpoint=\\"/api/personalisation/check-email-subscription?base_path=/current-page-path\\">\\n  <input type=\\"hidden\\" name=\\"base_path\\" value=\\"/current-page-path\\">\\n  <button class=\\"govuk-body-s gem-c-single-page-notification-button__submit\\" type=\\"submit\\">  <svg class=\\"gem-c-single-page-notification-button__icon\\" aria-hidden=\\"true\\" xmlns=\\"http://www.w3.org/2000/svg\\" height=\\"18\\" width=\\"18\\" viewBox=\\"0 0 459.334 459.334\\"><path fill=\\"currentColor\\" d=\\"M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z\\"/></svg>Stop getting emails about this page\\n</button>\\n</form>"\n}'
+      responseText: '{\n    "base_path": "/current-page-path",\n    "active": true,\n    "button_html": "<form class=\\"gem-c-single-page-notification-button new-button-for-test\\" action=\\"/email/subscriptions/single-page/new\\" method=\\"POST\\">\\n  <input type=\\"hidden\\" name=\\"base_path\\" value=\\"/current-page-path\\">\\n  <button class=\\"gem-c-single-page-notification-button__submit\\" type=\\"submit\\">Stop getting emails about this page\\n</button>\\n</form>"\n}'
     })
 
     var form = document.querySelector('form.gem-c-single-page-notification-button.new-button-for-test')