feat: donate button show amount (#557)

* add amount to button

* update jest snapshots

* adjust Cypress tests

* add feature to no money buy forms

* more snaps

* add better Cypress tests

* remove Button as input, make button be button

* adjust cypress tests from input to button

* snaps

* create useClickOutside hook to reset value inside button

* create useClickOutside hook to fire default moneyBuy value

* create functional deal with button text

* check tests and clean up

* clean up

* lint

* move function outside useEffect

* bring function back inside useEffect

* change button colours of examples as too hard to read

* move function outside useEffect with useCallback

* add value to amountDonate

* add buttonRef check to click outside function

* snaps

---------

Co-authored-by: Andy E Phipps <a.phipps@comicrelief.com>

Author: michael-odonovan

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')

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}

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>