@comicrelief/component-library 7.14.0 → 7.16.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/CardDs/CardDs.js

@@ -126,7 +126,8 @@ var CardDs = function CardDs(_ref14) {
         "aria-hidden": "true",
         tabIndex: "-1",
         href: link,
-        target: target
+        target: target,
+        "data-cta-copy": linkLabel
       }, rest), Media);
     }
 

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

@@ -189,6 +189,7 @@ exports[`renders correctly 1`] = `
   <a
     aria-hidden="true"
     className="c1"
+    data-cta-copy="Find out more"
     href="/home"
     tabIndex="-1"
     target="_blank"

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.js

@@ -53,8 +53,7 @@ var SingleMessageDs = function SingleMessageDs(_ref) {
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isOpen = _useState2[0],
-      setIsOpen = _useState2[1]; // const openModal = () => setIsOpen(true);
-
+      setIsOpen = _useState2[1];
 
   var closeModal = function closeModal() {
     return setIsOpen(false);
@@ -77,7 +76,8 @@ var SingleMessageDs = function SingleMessageDs(_ref) {
         "aria-hidden": "true",
         tabIndex: "-1",
         href: link,
-        target: target
+        target: target,
+        "data-cta-copy": linkLabel
       }, rest), Media);
     }
 
@@ -87,7 +87,8 @@ var SingleMessageDs = function SingleMessageDs(_ref) {
         "aria-hidden": "true",
         tabIndex: "-1",
         href: youTubeId,
-        target: target
+        target: target,
+        "data-cta-copy": linkLabel
       }, rest, {
         onClick: function onClick(e) {
           setIsOpen(true);

package/dist/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -234,6 +234,7 @@ exports[`renders correctly 1`] = `
   <a
     aria-hidden="true"
     className="c1"
+    data-cta-copy="Check out the shop"
     href="/home"
     tabIndex="-1"
     target="_blank"

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.14.0",
+  "version": "7.16.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -24,10 +24,11 @@
     "@babel/cli": "^7.14.8",
     "@hookform/resolvers": "^1.3.4",
     "axios": "^0.21.1",
+    "ejs": "^3.1.9",
     "jest-styled-components": "^7.0.5",
     "lazysizes": "^5.3.2",
     "lodash": "^4.17.11",
-    "moment": "^2.29.1",
+    "moment": "^2.29.4",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-canvas-confetti": "^1.3.0",
@@ -35,12 +36,12 @@
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.3.0",
     "react-modal": "^3.14.3",
-    "react-responsive": "^9.0.0",
+    "react-responsive": "^9.0.2",
     "react-scripts": "4.0.3",
     "react-spinners": "^0.11.0",
     "react-styleguidist": "^11.1.7",
     "react-test-renderer": "^17.0.2",
-    "react-uid": "^2.2.0",
+    "react-uid": "^2.3.2",
     "styled-components": "^5.3.1",
     "youtube-player": "^5.5.2",
     "yup": "^0.32.9"
@@ -73,7 +74,6 @@
     ]
   },
   "devDependencies": {
-    "babel-eslint": "^10.0.2",
     "cross-env": "^7.0.3",
     "cypress": "^8.3.0",
     "eslint": "^7.32.0",
@@ -82,7 +82,6 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.0.5",
-    "husky": "^7.0.2",
     "jest": "^26.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.2",

package/src/components/Molecules/CardDs/CardDs.js

@@ -119,6 +119,7 @@ const CardDs = ({
           tabIndex="-1"
           href={link}
           target={target}
+          data-cta-copy={linkLabel}
           {...rest}
         >
           {Media}

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

@@ -189,6 +189,7 @@ exports[`renders correctly 1`] = `
   <a
     aria-hidden="true"
     className="c1"
+    data-cta-copy="Find out more"
     href="/home"
     tabIndex="-1"
     target="_blank"

package/src/components/Molecules/SingleMessageDS/SingleMessageDs.js

@@ -31,7 +31,6 @@ const SingleMessageDs = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  // const openModal = () => setIsOpen(true);
   const closeModal = () => setIsOpen(false);
 
   const Media = (
@@ -57,6 +56,7 @@ const SingleMessageDs = ({
           tabIndex="-1"
           href={link}
           target={target}
+          data-cta-copy={linkLabel}
           {...rest}
         >
           {Media}
@@ -71,6 +71,7 @@ const SingleMessageDs = ({
           tabIndex="-1"
           href={youTubeId}
           target={target}
+          data-cta-copy={linkLabel}
           {...rest}
           onClick={e => { setIsOpen(true); e.preventDefault(); }}
         >

package/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -234,6 +234,7 @@ exports[`renders correctly 1`] = `
   <a
     aria-hidden="true"
     className="c1"
+    data-cta-copy="Check out the shop"
     href="/home"
     tabIndex="-1"
     target="_blank"

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>