Merge pull request #295 from comicrelief/marketing_consent_component

marketing consent component

.snyk

@@ -32,6 +32,10 @@ ignore:
     - react-scripts > fsevents > node-pre-gyp > tar > chownr:
         reason: None given
         expires: '2018-12-27T17:25:32.887Z'
+  'npm:shelljs:20140723':
+    - '@storybook/react > @storybook/core > shelljs':
+        reason: No fix yet and it's the latest version.
+        expires: '2019-03-20T10:39:16.882Z'
 # patches apply the minimum changes required to fix a vulnerability
 patch:
   'npm:marked:20170112':

src/components/FileUp/FileUp.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import propTypes from 'prop-types';
 import Dropzone from 'react-dropzone';
 import './styles.scss';
 import PdfImage from './Images/pdficon.png';
@@ -156,10 +156,10 @@ class FileUp extends Component {
 }
 
 FileUp.propTypes = {
-  maxFiles: PropTypes.number.isRequired,
-  maxSize: PropTypes.number.isRequired,
-  onChange: PropTypes.func.isRequired,
-  types: PropTypes.arrayOf(PropTypes.string).isRequired,
+  maxFiles: propTypes.number.isRequired,
+  maxSize: propTypes.number.isRequired,
+  onChange: propTypes.func.isRequired,
+  types: propTypes.arrayOf(propTypes.string).isRequired,
 };
 
 export { default as S3FileUploadService } from './src/service/S3FileUploadService';

src/components/Footer/Footer.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import propTypes from 'prop-types';
 import Menu from '../Menu/Menu';
 import SocialLink from '../SocialLink/SocialLink';
 import './footer.scss';
@@ -49,7 +49,7 @@ class Footer extends Component {
 }
 
 Footer.propTypes = {
-  campaign: PropTypes.string.isRequired,
+  campaign: propTypes.string.isRequired,
 };
 
 export default Footer;

src/components/GrantsInfographics/Bar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import propTypes from 'prop-types';
 import { XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, VerticalBarSeries } from 'react-vis';
 
 const Bar = ({
@@ -24,7 +24,7 @@ const Bar = ({
 };
 
 Bar.propTypes = {
-  barData: PropTypes.array.isRequired,
+  barData: propTypes.array.isRequired,
 };
 
 export default Bar;

src/components/GrantsInfographics/Chart.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import propTypes from 'prop-types';
 import { RadialChart } from 'react-vis';
 
 const Chart = ({
@@ -21,8 +21,8 @@ const Chart = ({
 };
 
 Chart.propTypes = {
-  chartData: PropTypes.array.isRequired,
-  innerRadius: PropTypes.string.isRequired,
+  chartData: propTypes.array.isRequired,
+  innerRadius: propTypes.string.isRequired,
 };
 
 export default Chart;

src/components/GrantsNearYou/GrantsNearYou.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import propTypes from 'prop-types';
 import './GrantsNearYou.scss';
 import { Result } from './result';
 import Search from './search';
@@ -129,8 +129,8 @@ class GrantsNearYou extends Component {
 }
 
 GrantsNearYou.propTypes = {
-  postcodeAPI: PropTypes.string.isRequired,
-  searchURL: PropTypes.string.isRequired,
+  postcodeAPI: propTypes.string.isRequired,
+  searchURL: propTypes.string.isRequired,
 };
 
 export default GrantsNearYou;

src/components/GrantsNearYou/geolocation.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import propTypes from 'prop-types';
 import { geolocated } from 'react-geolocated';
 
 class Geolocation extends React.Component {
@@ -34,8 +34,8 @@ class Geolocation extends React.Component {
 }
 
 /* Define proptypes */
-Geolocation.PropTypes = {
-  handleLocation: PropTypes.func.isRequired,
+Geolocation.propTypes = {
+  handleLocation: propTypes.func.isRequired,
 };
 
 export default geolocated({

src/components/MarketingConsent/FormData.json

@@ -0,0 +1,159 @@
+{"Questions": [
+    {
+      "id": "emailConsent",
+      "text": "Email",
+      "options": [
+        {
+          "label": "Yes",
+          "value": "yes",
+          "name": "emailPermission",
+          "hideFields": false
+        },
+        {
+          "label": "No",
+          "value": "no",
+          "name": "emailPermission",
+          "hideFields": true
+        }
+      ],
+      "field": [
+        {
+          "id": "emailAddress",
+          "type": "email",
+          "name": "email",
+          "label": "Email address",
+          "placeholder": "example@email.com",
+          "required": true
+        }
+      ]
+    },
+    {
+      "id": "postConsent",
+      "text": "Post",
+      "options": [
+        {
+          "label": "Yes",
+          "value": "yes",
+          "name": "postPermission",
+          "hideFields": false
+        },
+        {
+          "label": "No",
+          "value": "no",
+          "name": "postPermission",
+          "hideFields": true
+        }
+      ],
+      "field": [
+        {
+          "id": "address1",
+          "type": "text",
+          "name": "address1",
+          "label": "Address line 1",
+          "placeholder": null,
+          "required": true
+        },
+        {
+          "id": "address2",
+          "type": "text",
+          "name": "address2",
+          "label": "Address line 2",
+          "placeholder": null,
+          "required": false,
+          "min": null
+        },
+        {
+          "id": "address3",
+          "type": "text",
+          "name": "address3",
+          "label": "Address line 3",
+          "placeholder": null,
+          "required": false,
+          "min": null
+        },
+        {
+          "id": "town",
+          "type": "text",
+          "name": "town",
+          "label": "Town/City",
+          "placeholder": null,
+          "required": true,
+          "pattern": "[a-zA-Z]+",
+          "min": null
+        },
+        {
+          "id": "postcode",
+          "type": "text",
+          "name": "postcode",
+          "label": "Postcode",
+          "placeholder": "SE1 7TP",
+          "required": true
+        },
+        {
+          "id": "country",
+          "type": "text",
+          "name": "country",
+          "label": "Country",
+          "placeholder": "United Kingdom",
+          "required": true
+        }
+      ]
+    },
+    {
+      "id": "phoneConsent",
+      "text": "Phone",
+      "options": [
+        {
+          "label": "Yes",
+          "value": "yes",
+          "name": "phonePermission",
+          "hideFields": false
+        },
+        {
+          "label": "No",
+          "value": "no",
+          "name": "phonePermission",
+          "hideFields": true
+        }
+      ],
+      "field": [
+        {
+          "id": "phoneNumber",
+          "type": "tel",
+          "name": "phone",
+          "label": "Phone number",
+          "placeholder": null,
+          "required": true
+        }
+      ]
+    },
+    {
+      "id": "SMSConsent",
+      "text": "SMS",
+      "options": [
+        {
+          "label": "Yes",
+          "value": "yes",
+          "name": "smsPermission",
+          "hideFields": false
+        },
+        {
+          "label": "No",
+          "value": "no",
+          "name": "smsPermission",
+          "hideFields": true
+        }
+      ],
+      "field": [
+        {
+          "id": "mobileNumber",
+          "type": "tel",
+          "name": "mobile",
+          "label": "Mobile number",
+          "placeholder": null,
+          "required": true
+        }
+      ]
+    }
+  ]
+}

src/components/MarketingConsent/MarketingConsent.js

@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import propTypes from 'prop-types';
+import MarketingConsentCheckbox from './MarketingConsentCheckbox';
+import './MarketingConsent.scss';
+
+class MarketingConsent extends Component {
+  /**
+   * Send State containing new validation data to parent.
+   * @param prevProps (needed for arguments order)
+   * @param prevState
+   */
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState !== this.state) {
+      this.props.getValidation(this.state);
+    }
+  }
+
+  /**
+   * Add each Marketing consent question's validation data to the state.
+   * @param name
+   * @param validation
+   */
+  updateState(name, validation) {
+    this.setState({
+      ...this.state,
+      [name]: validation[name],
+    });
+  }
+
+  /**
+   * Render text and MarketingConsentCheckbox components.
+   * @return {XML}
+   */
+  render() {
+    const data = this.props.itemData;
+    return (
+      <div className={'form__row form__row--marketing-consent'} >
+        <div className="form__fieldset">
+          <p>Hear more about the project Comic Relief funds and other ways you can support our work including fundraising, campaigns and products.</p>
+          <p>How would you like to hear from us?</p>
+          { data.Questions.map(item =>
+            (<MarketingConsentCheckbox
+              key={item.id}
+              getValidation={(name, validation) => { this.updateState(name, validation); }}
+              itemData={item}
+              valueFromParent={this.props.valueFromParent && this.props.valueFromParent[item.id]}
+              showErrorMessages={this.props.showErrorMessages}
+            />)) }
+          <p>You can update your communication preferences at any time at&nbsp;
+            <a
+              href="https://www.comicrelief.com/update-your-preferences."
+              target="blank"
+              rel="noopener noreferrer"
+              className="link inline"
+            >
+            comicrelief.com/update-your-preferences.
+              <span className="visuallyhidden">(opens in a new window)</span>
+            </a> Your details will be kept safe, check out our&nbsp;
+            <a
+              href="https://www.comicrelief.com/privacy-policy"
+              target="blank"
+              rel="noopener noreferrer"
+              className="link inline"
+            >
+            privacy policy
+              <span className="visuallyhidden">(opens in a new window)</span>
+            </a> for more details.</p>
+        </div>
+      </div>
+    );
+  }
+}
+
+MarketingConsent.defaultProps = {
+  valueFromParent: null,
+  showErrorMessages: false,
+};
+MarketingConsent.propTypes = {
+  getValidation: propTypes.func.isRequired,
+  valueFromParent: propTypes.object,
+  showErrorMessages: propTypes.bool,
+  itemData: propTypes.shape({
+    itemData: propTypes.object,
+  }).isRequired,
+};
+
+export default MarketingConsent;

src/components/MarketingConsent/MarketingConsent.scss

@@ -0,0 +1,15 @@
+.form__row--marketing-consent {
+  .form__field-wrapper--background {
+    padding: 22px 44px;
+    .form__checkbox--inline-2-horizontal {
+      label {
+        padding-top: 1em;
+      }
+      input[type="checkbox"] + span,
+      input[type="checkbox"] {
+        top: 18px;
+        left: 0;
+      }
+    }
+  }
+}