@comicrelief/component-library 7.12.2 → 7.14.0

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import PropTypes from 'prop-types';
 
@@ -39,7 +39,8 @@ const Donate = ({
   noMoneyBuys,
   PopUpText,
   chooseAmountText,
-  isDesktopOverride
+  isDesktopOverride,
+  otherAmountValue
 }) => {
   let isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
 
@@ -47,7 +48,7 @@ const Donate = ({
   const [overrideValue, setOverrideValue] = useState(null);
 
   // Store the updated override value
-  React.useEffect(() => {
+  useEffect(() => {
     setOverrideValue(isDesktopOverride);
   }, [isDesktopOverride]);
 
@@ -122,6 +123,7 @@ const Donate = ({
           PopUpText={PopUpText}
           chooseAmountText={chooseAmountText}
           submitButtonColor={submitButtonColor}
+          otherAmountValue={otherAmountValue}
         />
       </Wrapper>
     </Container>
@@ -153,7 +155,8 @@ Donate.propTypes = {
   noMoneyBuys: PropTypes.bool,
   PopUpText: PropTypes.string,
   chooseAmountText: PropTypes.string,
-  isDesktopOverride: PropTypes.bool
+  isDesktopOverride: PropTypes.bool,
+  otherAmountValue: PropTypes.number
 };
 
 Donate.defaultProps = {
@@ -178,7 +181,8 @@ Donate.defaultProps = {
   noMoneyBuys: false,
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
   chooseAmountText: '',
-  isDesktopOverride: null
+  isDesktopOverride: null,
+  otherAmountValue: null
 };
 
 export default Donate;

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

@@ -103,6 +103,102 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 />;
 ```
 
+## Single Giving "No Money Buys" with overridden manual input value
+
+```js
+import data from './dev-data/data-single';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+import { useState } from 'react';
+
+// Simulating default state of a parent componenet
+const [amountDonate, setAmountDonate] = useState(123.45);
+
+// Simulating state update of a parent componenet
+setTimeout(()=>{
+  setAmountDonate(567.89);
+}, 3000);
+
+<Donate
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
+  formAlignRight={false}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-4"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  noMoneyBuys
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  otherAmountValue={amountDonate}
+/>;
+```
+
+## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button, with overridden manual input value
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+import { useState } from 'react';
+
+// Simulating default state of a parent componenet
+const [amountDonate, setAmountDonate] = useState(111.22);
+
+// Simulating state update of a parent componenet
+setTimeout(()=>{
+  setAmountDonate(333.44);
+}, 3000);
+
+<Donate
+  alt="Background image"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  otherAmountValue={amountDonate}
+/>;
+```
+
+## Form align left, with custom message after choosing an "Other amount" to donate, high value cart.
+```js
+import data from './dev-data/data-high-value';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
+  formAlignRight={false}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-2"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  otherAmountText="Overridden via the 'Other amount text' prop"
+/>;
+```
+
+
 ## Form align right - no subtitle
 
 ```js

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

@@ -72,3 +72,26 @@ it('Single donation with no Money Buys renders correctly', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('"Single Giving, No Money Buys, with overridden manual input value" renders correctly', () => {
+  const tree = renderWithTheme(
+    <Donate
+      mobileBackgroundColor="blue_dark"
+      desktopOverlayColor="blue_dark"
+      formAlignRight={false}
+      imageLow={defaultData.pictures.imageLow}
+      images={defaultData.pictures.images}
+      data={data}
+      mbshipID="mship-4"
+      donateLink="https://donation.comicrelief.com/"
+      clientID="donate"
+      cartID="default-comicrelief"
+      title="Donate Now"
+      noMoneyBuys
+      subtitle="Please help us fund life-changing projects in the UK and around the world."
+      otherAmountValue={345.67}
+    />
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

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

@@ -35,6 +35,7 @@ const Signup = ({
   PopUpText,
   chooseAmountText,
   submitButtonColor,
+  otherAmountValue,
   ...rest
 }) => {
   const [givingType, setGivingType] = useState('single');
@@ -46,17 +47,23 @@ const Signup = ({
   const [popUpShown, setPopUpShown] = useState(false);
 
   useEffect(() => {
-    const givingData = givingType === 'single' ? singleGiving : regularGiving;
+    // If a specific 'other amount' has been passed down, use it,
+    // otherwise assign based on the associated moneybuys:
+    if (otherAmountValue) {
+      setAmountDonate(parseFloat(otherAmountValue));
+    } else {
+      const givingData = givingType === 'single' ? singleGiving : regularGiving;
 
-    // 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;
+      // 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));
-  }, [givingType, singleGiving, regularGiving]);
+      setAmountDonate(parseFloat(thisAmount));
+    }
+  }, [givingType, singleGiving, regularGiving, otherAmountValue]);
 
   useEffect(() => {
     const givingData = givingType === 'single' ? singleGiving : regularGiving;
@@ -124,6 +131,13 @@ const Signup = ({
     }
   };
 
+  // Update the local state if the prop has been set and changed
+  useEffect(() => {
+    if (otherAmountValue) {
+      setAmountDonate(parseFloat(otherAmountValue));
+    }
+  }, [otherAmountValue, setAmountDonate]);
+
   // Create money buy boxes
   const givingData = givingType === 'single' ? singleGiving : regularGiving;
   const showGivingSelector = singleGiving !== null && regularGiving !== null;
@@ -239,7 +253,8 @@ Signup.propTypes = {
   data: PropTypes.objectOf(PropTypes.shape),
   PopUpText: PropTypes.string.isRequired,
   chooseAmountText: PropTypes.string.isRequired,
-  submitButtonColor: PropTypes.string.isRequired
+  submitButtonColor: PropTypes.string.isRequired,
+  otherAmountValue: PropTypes.number.isRequired
 };
 
 Signup.defaultProps = {