Merge pull request #702 from DemocracyClub/284-prefill

allow user to pre-populate postcode using data-postcode attribute

README.md

@@ -60,6 +60,19 @@ Default Welsh with option to toggle to English:
 <script type="text/javascript" src="https://widget.wheredoivote.co.uk/wdiv.js"></script>
 ```
 
+### Pre-populate a postcode
+
+If you already know the user's postcode, you can render the widget div with the postcode pre-populated.
+This will take the user straight to their results (or an address picker).
+
+```html
+<noscript>
+  <a href="https://whocanivotefor.co.uk/">Information about elections in your area</a>
+</noscript>
+<div id="dc_wdiv" data-postcode="SW1A 1AA" data-language="en" aria-live="polite" role="region"></div>
+<script type="text/javascript" src="https://widget.wheredoivote.co.uk/wdiv.js"></script>
+```
+
 ## Node Verion Manager (NVM)
 
 Similarly to pyenv, nvm is a tool to manage multiple versions of node. 

src/ElectionInformationWidget.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 
 import { StartAgainButton, ErrorMessage, Loader } from './Branding';
 
@@ -24,8 +24,9 @@ import AdvanceVoting from './AdvanceVoting';
 import EC_styles from '!!raw-loader!./ec-widget-styles.css'; // eslint-disable-line
 import DC_styles from '!!raw-loader!./dc-widget-styles.css'; // eslint-disable-line
 
+const api = APIClientFactory();
+
 function ElectionInformationWidget(props) {
-  const api = APIClientFactory();
   const [searchInitiated, setSearchInitiated] = useState(false);
   const [loading, setLoading] = useState(false);
   const [currentError, setCurrentError] = useState(undefined);
@@ -106,7 +107,7 @@ function ElectionInformationWidget(props) {
       }
       setLoading(false);
     },
-    [api, props.enableElections]
+    [props.enableElections]
   );
 
   const lookupGivenPostcode = useCallback(
@@ -116,7 +117,7 @@ function ElectionInformationWidget(props) {
       setCurrentError(undefined);
       api.fetchByPostcode(postcode).then(handleResponse).catch(handleError);
     },
-    [api, handleResponse]
+    [handleResponse]
   );
 
   function lookupChosenAddress(value) {
@@ -130,6 +131,16 @@ function ElectionInformationWidget(props) {
     setAddressList(undefined);
   }
 
+  useEffect(() => {
+    const el = document.getElementById('dc_wdiv');
+    const initPostcode = el.getAttribute('data-postcode');
+
+    if (initPostcode) {
+      setSearchInitiated(true);
+      lookupGivenPostcode(initPostcode);
+    }
+  }, [lookupGivenPostcode]);
+
   return (
     <ShadowDomFactory>
       {process.env.REACT_APP_BRAND === 'EC' ? (

src/tests/integration/ElectionInformationWidget.test.js

@@ -8,6 +8,7 @@ import {
   renderEnglishWidget,
   renderElectionsWidget,
   renderLegacyWidget,
+  renderWidgetWithPostcode,
   typePostcode,
   submitPostcode,
   mockResponse,
@@ -462,6 +463,18 @@ describe('ElectionInformationWidget Legacy Candidates Widget', () => {
   });
 });
 
+describe('ElectionInformationWidget with pre-populated postcode', () => {
+  it('should skip stright to result if postcode pre-populated', async () => {
+    const postcode = 'AA12AA';
+    mockResponse('postcode', postcode);
+    renderWidgetWithPostcode(postcode);
+    const YourPollingStation = await waitForElement(() =>
+      document.querySelector('.PollingStation')
+    );
+    expect(YourPollingStation).toHaveTextContent(en_messages['station.your-station']);
+  });
+});
+
 describe('ElectionInformationWidget Accessibility', () => {
   let getByTestId;
   beforeEach(async () => {

src/tests/utils/test.js

@@ -69,3 +69,9 @@ export const renderLegacyWidget = () => {
   const wrapper = render(<ElectionInformationWidget />);
   return wrapper;
 };
+
+export const renderWidgetWithPostcode = (postcode) => {
+  render(<div id="dc_wdiv" data-postcode={postcode} aria-live="polite" role="region" />);
+  const wrapper = render(<ElectionInformationWidget />);
+  return wrapper;
+};