@comicrelief/component-library 7.13.0 → 7.15.0

package/cypress/integration/components/Organisms/Donate.spec.js

@@ -76,8 +76,12 @@ describe('Donate component', () => {
         .find('p.error--amount')
         .contains('Please enter an amount between £1 and £25000 and up to 2 decimal places');
       cy.get('@container')
-        .find('form > fieldset > input')
-        .contains('Donate monthly');
+        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .clear()
+        .type('16');
+      cy.get('@container')
+        .find('form > fieldset > button')
+        .contains('Donate £16 monthly');
       cy.get('@container')
         .find('h2')
         .should('exist');
@@ -138,8 +142,12 @@ describe('Donate component', () => {
         .find('p.error--amount')
         .should('contain', 'Please enter an amount between £1 and £25000 and up to 2 decimal places');
       cy.get('@container')
-        .find('form > fieldset > input')
-        .contains('Donate now');
+        .find('[id="mship-2--MoneyBuy-userInput"]')
+        .clear()
+        .type('179');
+      cy.get('@container')
+        .find('form > fieldset > button')
+        .contains('Donate £179 now');
       cy.get('@container')
         .find('h2')
         .should('exist');
@@ -199,8 +207,12 @@ describe('Donate component', () => {
         .find('p.error--amount')
         .contains('Please enter an amount between £1 and £25000 and up to 2 decimal places');
       cy.get('@container')
-        .find('form > fieldset > input')
-        .contains('Donate now');
+        .find('[id="mship-3--MoneyBuy-userInput"]')
+        .clear()
+        .type('898');
+      cy.get('@container')
+        .find('form > fieldset > button')
+        .contains('Donate £898 now');
       cy.get('@container')
         .find('h2')
         .should('exist');
@@ -258,7 +270,7 @@ describe('Donate component', () => {
         .type('5')
         .should('not.have', 'Please enter an amount between £1 and £250000 and up to 2 decimal places');
       cy.get('@container')
-        .find('form > fieldset > input')
+        .find('form > fieldset > button')
         .contains('Donate');
       cy.get('@container')
         .find('h2')

package/dist/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap

@@ -92,13 +92,13 @@ exports[`renders correctly 1`] = `
         aria-describedby="school-lookup"
         autoComplete="off"
         className="c5"
+        defaultValue=""
         id="school-lookup"
         name="school-lookup"
         onChange={[Function]}
         placeholder="Type to start search"
         required={false}
         type="text"
-        value=""
       />
     </div>
     

package/dist/components/Molecules/Typeahead/Typeahead.js

@@ -43,20 +43,15 @@ var Typeahead = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       fetchErrorHandler = _ref.fetchErrorHandler,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
+      options = _useState2[0],
+      setOptions = _useState2[1];
 
-  var _useState3 = (0, _react.useState)([]),
+  var _useState3 = (0, _react.useState)(''),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      options = _useState4[0],
-      setOptions = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      errorMsg = _useState6[0],
-      setErrorMsg = _useState6[1];
+      errorMsg = _useState4[0],
+      setErrorMsg = _useState4[1];
 
   var handleChange = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {
@@ -119,12 +114,11 @@ var Typeahead = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   var debouncedHandleChange = (0, _react.useCallback)((0, _lodash.debounce)(handleChange, DELAY_DURATION), []);
   return /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.default, Object.assign({
-    value: value,
+    defaultValue: "",
     options: optionParser ? options.map(optionParser) : options,
     errorMsg: errorMsg,
     onChange: function onChange(e) {
       var newValue = e.currentTarget.value;
-      setValue(newValue);
       debouncedHandleChange(newValue);
     },
     onSelect: function onSelect(parsedOption, optionIndex) {
@@ -136,7 +130,6 @@ var Typeahead = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
       setOptions([]);
       setErrorMsg('');
-      setValue('');
     },
     id: id,
     label: label,

package/dist/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap

@@ -92,13 +92,13 @@ exports[`renders correctly 1`] = `
         aria-describedby="typeahead-test"
         autoComplete="off"
         className="c5"
+        defaultValue=""
         id="typeahead-test"
         name="q"
         onChange={[Function]}
         placeholder="Type to start searching..."
         required={false}
         type="text"
-        value=""
       />
     </div>
     

package/dist/components/Organisms/Donate/Donate.md

@@ -11,7 +11,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   alt="Background image"
   mobileBackgroundColor="deep_violet_dark"
   desktopOverlayColor="red"
-	submitButtonColor="blue_dark"
+  submitButtonColor="blue_dark"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -35,6 +35,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
+  submitButtonColor="blue_dark"
   desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
@@ -61,6 +62,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
+  submitButtonColor="blue_dark"
   desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
@@ -86,6 +88,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
+  submitButtonColor="blue_dark"
   desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
@@ -209,6 +212,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 <Donate
   alt="Background image"
   mobileBackgroundColor="transparent"
+  submitButtonColor="blue_dark"
   desktopOverlayColor="transparent"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
@@ -234,6 +238,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="transparent"
+  submitButtonColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -258,6 +263,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
+  submitButtonColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -282,6 +288,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
+  submitButtonColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -305,6 +312,7 @@ import data from './dev-data/data-single';
 
 <Donate
   desktopOverlayColor="blue_dark"
+  submitButtonColor="blue_dark"
   mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
@@ -329,6 +337,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 <Donate
   alt="Background image"
   mobileBackgroundColor="red"
+  submitButtonColor="blue_dark"
   desktopOverlayColor="red"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}

package/dist/components/Organisms/Donate/Form/Form.js

@@ -57,7 +57,7 @@ var Signup = function Signup(_ref) {
       errorMsg = _useState4[0],
       setErrorMsg = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(null),
+  var _useState5 = (0, _react.useState)(10),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
       amountDonate = _useState6[0],
       setAmountDonate = _useState6[1];
@@ -137,7 +137,50 @@ var Signup = function Signup(_ref) {
   }, [otherAmountValue, setAmountDonate]); // Create money buy boxes
 
   var givingData = givingType === 'single' ? singleGiving : regularGiving;
-  var showGivingSelector = singleGiving !== null && regularGiving !== null;
+  var showGivingSelector = singleGiving !== null && regularGiving !== null; // Create ref for amount input
+
+  var amountRef = (0, _react.useRef)(null); // Create ref for amount button
+
+  var buttonRef = (0, _react.useRef)(null);
+  var handleClickOutside = (0, _react.useCallback)(function (event) {
+    if (!errorMsg) {
+      return;
+    }
+
+    if (buttonRef.current && event.target === buttonRef.current) {
+      return;
+    }
+
+    if (amountRef.current && !amountRef.current.contains(event.target)) {
+      // Check the 2nd moneybuy exists before using it;
+      // 'philantrophy' carts have been set up to use a single moneybuy.
+      // See ENG-1685 for more details
+      var thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
+      setAmountDonate(parseFloat(thisAmount));
+    }
+  }, [errorMsg, givingData.moneybuys]); // Listen for click outside custom amount input if there is no value entered.
+
+  (0, _react.useEffect)(function () {
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [errorMsg, handleClickOutside]); // Create function to conditionally render button text
+
+  var renderButtonText = function renderButtonText() {
+    if (errorMsg) {
+      return 'Donate';
+    }
+
+    if (givingType === 'single') {
+      return "Donate \xA3".concat((0, _Membership.amountFormatter)(amountDonate), " now");
+    }
+
+    return "Donate \xA3".concat((0, _Membership.amountFormatter)(amountDonate), " monthly");
+  };
+
   return /*#__PURE__*/_react.default.createElement(_Donate.FormWrapper, null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
     givingType: givingType,
     changeGivingType: function changeGivingType(data) {
@@ -190,7 +233,8 @@ var Signup = function Signup(_ref) {
     onChange: function onChange(e) {
       return setAmountDonate(parseFloat(e.target.value));
     },
-    "aria-label": "Input a different amount"
+    "aria-label": "Input a different amount",
+    ref: amountRef
   }))), amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Donate.Copy, {
     as: "p"
   }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate.toFixed(2), " ")), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
@@ -198,15 +242,12 @@ var Signup = function Signup(_ref) {
     tag: "p"
   }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
-    as: "input",
-    value: "Donate",
     color: submitButtonColor
-  }) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
+  }, errorMsg ? 'Donate' : "Donate \xA3".concat((0, _Membership.amountFormatter)(amountDonate))) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
-    as: "input",
-    value: givingType === 'single' ? 'Donate now' : 'Donate monthly',
-    color: submitButtonColor
-  }))));
+    color: submitButtonColor,
+    ref: buttonRef
+  }, renderButtonText()))));
 };
 
 Signup.defaultProps = {

package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -637,12 +637,13 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
               
             </label>
           </div>
-          <input
+          <button
             className="c24"
             color="red"
             type="submit"
-            value="Donate"
-          />
+          >
+            Donate £345.67
+          </button>
         </fieldset>
       </form>
     </div>
@@ -955,6 +956,11 @@ exports[`Monthly donation renders correctly 1`] = `
 }
 
 .c28 {
+  line-height: 1.5;
+  margin-top: 2rem;
+}
+
+.c29 {
   width: 100%;
   margin: 2rem 0 2rem;
   color: #FFFFFF;
@@ -973,9 +979,9 @@ exports[`Monthly donation renders correctly 1`] = `
   appearance: none;
 }
 
-.c28:active,
-.c28:focus,
-.c28:hover {
+.c29:active,
+.c29:focus,
+.c29:hover {
   outline: none;
   background-color: #961D35;
 }
@@ -1225,7 +1231,7 @@ exports[`Monthly donation renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c28 {
+  .c29 {
     padding: 1rem 2rem;
   }
 }
@@ -1478,18 +1484,26 @@ exports[`Monthly donation renders correctly 1`] = `
                   required={false}
                   step="0.01"
                   type="number"
-                  value=" "
+                  value="10"
                 />
               </div>
               
             </label>
           </div>
-          <input
+          <p
             className="c28"
+          >
+            <strong>
+              £10.00 
+            </strong>
+          </p>
+          <button
+            className="c29"
             color="red"
             type="submit"
-            value="Donate now"
-          />
+          >
+            Donate £10 now
+          </button>
         </fieldset>
       </form>
     </div>
@@ -1594,11 +1608,11 @@ exports[`Single donation renders correctly 1`] = `
   font-size: 1.25rem;
 }
 
-.c13 {
+.c18 {
   display: block;
 }
 
-.c13 input {
+.c18 input {
   border: none;
   background-color: #BECCF9;
   color: #000000;
@@ -1608,23 +1622,30 @@ exports[`Single donation renders correctly 1`] = `
   border-radius: 10px;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
   height: auto;
+  background-color: #0565D1;
+  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
+  color: #FFFFFF;
 }
 
-.c13 input:focus {
+.c18 input:focus {
   border: none;
   outline: none;
   box-shadow: inset 0 0 0 4px #0565D1;
 }
 
-.c13 input:active:focus {
+.c18 input:active:focus {
   box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
 }
 
-.c18 {
+.c18 input:focus {
+  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
+}
+
+.c13 {
   display: block;
 }
 
-.c18 input {
+.c13 input {
   border: none;
   background-color: #BECCF9;
   color: #000000;
@@ -1634,22 +1655,15 @@ exports[`Single donation renders correctly 1`] = `
   border-radius: 10px;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
   height: auto;
-  background-color: #0565D1;
-  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
-  color: #FFFFFF;
 }
 
-.c18 input:focus {
+.c13 input:focus {
   border: none;
   outline: none;
   box-shadow: inset 0 0 0 4px #0565D1;
 }
 
-.c18 input:active:focus {
-  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
-}
-
-.c18 input:focus {
+.c13 input:active:focus {
   box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
 }
 
@@ -1878,14 +1892,14 @@ exports[`Single donation renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c13 input {
+  .c18 input {
     font-size: 2rem;
     padding: 1.5rem;
   }
 }
 
 @media (min-width:740px) {
-  .c18 input {
+  .c13 input {
     font-size: 2rem;
     padding: 1.5rem;
   }
@@ -2197,12 +2211,13 @@ exports[`Single donation renders correctly 1`] = `
             </strong>
             a support worker to visit 10 isolated young mums with postnatal depression in the UK.
           </p>
-          <input
+          <button
             className="c24"
             color="red"
             type="submit"
-            value="Donate now"
-          />
+          >
+            Donate £20 now
+          </button>
         </fieldset>
       </form>
     </div>
@@ -2650,18 +2665,19 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
                   required={false}
                   step="0.01"
                   type="number"
-                  value=" "
+                  value="10"
                 />
               </div>
               
             </label>
           </div>
-          <input
+          <button
             className="c18"
             color="red"
             type="submit"
-            value="Donate"
-          />
+          >
+            Donate £10
+          </button>
         </fieldset>
       </form>
     </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.13.0",
+  "version": "7.15.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap

@@ -92,13 +92,13 @@ exports[`renders correctly 1`] = `
         aria-describedby="school-lookup"
         autoComplete="off"
         className="c5"
+        defaultValue=""
         id="school-lookup"
         name="school-lookup"
         onChange={[Function]}
         placeholder="Type to start search"
         required={false}
         type="text"
-        value=""
       />
     </div>
     

package/src/components/Molecules/Typeahead/Typeahead.js

@@ -24,7 +24,6 @@ const Typeahead = React.forwardRef(
     },
     ref
   ) => {
-    const [value, setValue] = useState('');
     const [options, setOptions] = useState([]);
     const [errorMsg, setErrorMsg] = useState('');
 
@@ -62,13 +61,11 @@ const Typeahead = React.forwardRef(
 
     return (
       <TextInputWithDropdown
-        value={value}
+        defaultValue=""
         options={optionParser ? options.map(optionParser) : options}
         errorMsg={errorMsg}
         onChange={e => {
           const newValue = e.currentTarget.value;
-          setValue(newValue);
-
           debouncedHandleChange(newValue);
         }}
         onSelect={(parsedOption, optionIndex) => {
@@ -81,7 +78,6 @@ const Typeahead = React.forwardRef(
           // reset
           setOptions([]);
           setErrorMsg('');
-          setValue('');
         }}
         id={id}
         label={label}

package/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap

@@ -92,13 +92,13 @@ exports[`renders correctly 1`] = `
         aria-describedby="typeahead-test"
         autoComplete="off"
         className="c5"
+        defaultValue=""
         id="typeahead-test"
         name="q"
         onChange={[Function]}
         placeholder="Type to start searching..."
         required={false}
         type="text"
-        value=""
       />
     </div>
     

package/src/components/Organisms/Donate/Donate.md

@@ -11,7 +11,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   alt="Background image"
   mobileBackgroundColor="deep_violet_dark"
   desktopOverlayColor="red"
-	submitButtonColor="blue_dark"
+  submitButtonColor="blue_dark"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -35,6 +35,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
+  submitButtonColor="blue_dark"
   desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
@@ -61,6 +62,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
+  submitButtonColor="blue_dark"
   desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
@@ -86,6 +88,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
+  submitButtonColor="blue_dark"
   desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
@@ -209,6 +212,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 <Donate
   alt="Background image"
   mobileBackgroundColor="transparent"
+  submitButtonColor="blue_dark"
   desktopOverlayColor="transparent"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
@@ -234,6 +238,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="transparent"
+  submitButtonColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -258,6 +263,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
+  submitButtonColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -282,6 +288,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
+  submitButtonColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -305,6 +312,7 @@ import data from './dev-data/data-single';
 
 <Donate
   desktopOverlayColor="blue_dark"
+  submitButtonColor="blue_dark"
   mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
@@ -329,6 +337,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 <Donate
   alt="Background image"
   mobileBackgroundColor="red"
+  submitButtonColor="blue_dark"
   desktopOverlayColor="red"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}

package/src/components/Organisms/Donate/Form/Form.js

@@ -1,4 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, {
+  useState, useRef, useEffect, useCallback
+} from 'react';
 import PropTypes from 'prop-types';
 
 import PopUpComponent from './PopUpComponent';
@@ -40,7 +42,7 @@ const Signup = ({
 }) => {
   const [givingType, setGivingType] = useState('single');
   const [errorMsg, setErrorMsg] = useState(false);
-  const [amountDonate, setAmountDonate] = useState(null);
+  const [amountDonate, setAmountDonate] = useState(10);
   const [moneyBuyCopy, setMoneyBuyCopy] = useState(true);
   const [popOpen, setPopOpen] = useState(false);
   // In order to keep track of whether the user has ever been shown the popup
@@ -142,6 +144,53 @@ const Signup = ({
   const givingData = givingType === 'single' ? singleGiving : regularGiving;
   const showGivingSelector = singleGiving !== null && regularGiving !== null;
 
+  // Create ref for amount input
+  const amountRef = useRef(null);
+  // Create ref for amount button
+  const buttonRef = useRef(null);
+
+  const handleClickOutside = useCallback(event => {
+    if (!errorMsg) {
+      return;
+    }
+
+    if (buttonRef.current && event.target === buttonRef.current) {
+      return;
+    }
+
+    if (amountRef.current && !amountRef.current.contains(event.target)) {
+      // Check the 2nd moneybuy exists before using it;
+      // 'philantrophy' carts have been set up to use a single moneybuy.
+      // See ENG-1685 for more details
+      const thisAmount = givingData.moneybuys[1]
+        ? givingData.moneybuys[1].value
+        : givingData.moneybuys[0].value;
+
+      setAmountDonate(parseFloat(thisAmount));
+    }
+  }, [errorMsg, givingData.moneybuys]);
+
+  // Listen for click outside custom amount input if there is no value entered.
+  useEffect(() => {
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [errorMsg, handleClickOutside]);
+
+  // Create function to conditionally render button text
+  const renderButtonText = () => {
+    if (errorMsg) {
+      return 'Donate';
+    }
+    if (givingType === 'single') {
+      return `Donate £${amountFormatter(amountDonate)} now`;
+    }
+    return `Donate £${amountFormatter(amountDonate)} monthly`;
+  };
+
   return (
     <FormWrapper>
       {showGivingSelector && (
@@ -210,6 +259,7 @@ const Signup = ({
               placeholder="0.00"
               onChange={e => setAmountDonate(parseFloat(e.target.value))}
               aria-label="Input a different amount"
+              ref={amountRef}
             />
           </FormFieldset>
           {amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && (
@@ -227,14 +277,23 @@ const Signup = ({
           )}
 
           {noMoneyBuys ? (
-            <Button type="submit" as="input" value="Donate" color={submitButtonColor} />
+            <Button
+              type="submit"
+              color={submitButtonColor}
+            >
+              {errorMsg
+                ? 'Donate'
+                : `Donate £${amountFormatter(amountDonate)}`}
+            </Button>
           ) : (
             <Button
               type="submit"
-              as="input"
-              value={givingType === 'single' ? 'Donate now' : 'Donate monthly'}
               color={submitButtonColor}
-            />
+              ref={buttonRef}
+            >
+              {renderButtonText()}
+            </Button>
+
           )}
 
         </OuterFieldset>

package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -637,12 +637,13 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
               
             </label>
           </div>
-          <input
+          <button
             className="c24"
             color="red"
             type="submit"
-            value="Donate"
-          />
+          >
+            Donate £345.67
+          </button>
         </fieldset>
       </form>
     </div>
@@ -955,6 +956,11 @@ exports[`Monthly donation renders correctly 1`] = `
 }
 
 .c28 {
+  line-height: 1.5;
+  margin-top: 2rem;
+}
+
+.c29 {
   width: 100%;
   margin: 2rem 0 2rem;
   color: #FFFFFF;
@@ -973,9 +979,9 @@ exports[`Monthly donation renders correctly 1`] = `
   appearance: none;
 }
 
-.c28:active,
-.c28:focus,
-.c28:hover {
+.c29:active,
+.c29:focus,
+.c29:hover {
   outline: none;
   background-color: #961D35;
 }
@@ -1225,7 +1231,7 @@ exports[`Monthly donation renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c28 {
+  .c29 {
     padding: 1rem 2rem;
   }
 }
@@ -1478,18 +1484,26 @@ exports[`Monthly donation renders correctly 1`] = `
                   required={false}
                   step="0.01"
                   type="number"
-                  value=" "
+                  value="10"
                 />
               </div>
               
             </label>
           </div>
-          <input
+          <p
             className="c28"
+          >
+            <strong>
+              £10.00 
+            </strong>
+          </p>
+          <button
+            className="c29"
             color="red"
             type="submit"
-            value="Donate now"
-          />
+          >
+            Donate £10 now
+          </button>
         </fieldset>
       </form>
     </div>
@@ -1594,11 +1608,11 @@ exports[`Single donation renders correctly 1`] = `
   font-size: 1.25rem;
 }
 
-.c13 {
+.c18 {
   display: block;
 }
 
-.c13 input {
+.c18 input {
   border: none;
   background-color: #BECCF9;
   color: #000000;
@@ -1608,23 +1622,30 @@ exports[`Single donation renders correctly 1`] = `
   border-radius: 10px;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
   height: auto;
+  background-color: #0565D1;
+  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
+  color: #FFFFFF;
 }
 
-.c13 input:focus {
+.c18 input:focus {
   border: none;
   outline: none;
   box-shadow: inset 0 0 0 4px #0565D1;
 }
 
-.c13 input:active:focus {
+.c18 input:active:focus {
   box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
 }
 
-.c18 {
+.c18 input:focus {
+  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
+}
+
+.c13 {
   display: block;
 }
 
-.c18 input {
+.c13 input {
   border: none;
   background-color: #BECCF9;
   color: #000000;
@@ -1634,22 +1655,15 @@ exports[`Single donation renders correctly 1`] = `
   border-radius: 10px;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
   height: auto;
-  background-color: #0565D1;
-  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
-  color: #FFFFFF;
 }
 
-.c18 input:focus {
+.c13 input:focus {
   border: none;
   outline: none;
   box-shadow: inset 0 0 0 4px #0565D1;
 }
 
-.c18 input:active:focus {
-  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
-}
-
-.c18 input:focus {
+.c13 input:active:focus {
   box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
 }
 
@@ -1878,14 +1892,14 @@ exports[`Single donation renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c13 input {
+  .c18 input {
     font-size: 2rem;
     padding: 1.5rem;
   }
 }
 
 @media (min-width:740px) {
-  .c18 input {
+  .c13 input {
     font-size: 2rem;
     padding: 1.5rem;
   }
@@ -2197,12 +2211,13 @@ exports[`Single donation renders correctly 1`] = `
             </strong>
             a support worker to visit 10 isolated young mums with postnatal depression in the UK.
           </p>
-          <input
+          <button
             className="c24"
             color="red"
             type="submit"
-            value="Donate now"
-          />
+          >
+            Donate £20 now
+          </button>
         </fieldset>
       </form>
     </div>
@@ -2650,18 +2665,19 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
                   required={false}
                   step="0.01"
                   type="number"
-                  value=" "
+                  value="10"
                 />
               </div>
               
             </label>
           </div>
-          <input
+          <button
             className="c18"
             color="red"
             type="submit"
-            value="Donate"
-          />
+          >
+            Donate £10
+          </button>
         </fieldset>
       </form>
     </div>