From 22c3bb2aa85bd8be81587ec1b562bf00c857a0e2 Mon Sep 17 00:00:00 2001 From: Dana Cotoran Date: Fri, 12 Nov 2021 15:29:35 +0000 Subject: [PATCH] Updates based on feedback - move endpoint to js module - simplify fixture code - make the JS enhancement opt-in by introduction of a new flag --- .../components/single-page-notification-button.js | 3 ++- .../components/_single_page_notification_button.html.erb | 6 +++--- .../components/docs/single_page_notification_button.yml | 3 ++- spec/components/single_page_notification_button_spec.rb | 5 +++++ .../components/single-page-notification-button-spec.js | 8 ++++---- 5 files changed, 16 insertions(+), 9 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 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 \\n \\n
"\n}' + responseText: '{\n "base_path": "/current-page-path",\n "active": true,\n "button_html": "
\\n \\n \\n
"\n}' }) var form = document.querySelector('form.gem-c-single-page-notification-button.new-button-for-test')