@comicrelief/component-library 7.25.0 → 7.26.0

package/dist/components/Organisms/Donate/dev-data/data-monthly.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  cartId: 'monthly-only',
+  singleGiving: null,
+  regularGiving: {
+    moneybuys: [{
+      description: 'a regular supply of toiletries for someone living in a refugee camp in Serbia.',
+      value: '5.50'
+    }, {
+      description: 'a potentially lifesaving call for a man at risk of suicide in the UK.',
+      value: '10'
+    }, {
+      description: 'the distribution of enough surplus food for a school breakfast club to feed 80 children.',
+      value: '20'
+    }]
+  }
+};

package/package.json

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

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

@@ -42,7 +42,8 @@ const Donate = ({
   isDesktopOverride,
   otherAmountValue,
   additionalSingleCopy,
-  additionalMonthlyCopy
+  additionalMonthlyCopy,
+  defaultGivingType
 }) => {
   let isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
 
@@ -131,6 +132,7 @@ const Donate = ({
           otherAmountValue={otherAmountValue}
           additionalSingleCopy={additionalSingleCopy}
           additionalMonthlyCopy={additionalMonthlyCopy}
+          defaultGivingType={defaultGivingType}
         />
       </Wrapper>
     </Container>
@@ -165,7 +167,8 @@ Donate.propTypes = {
   isDesktopOverride: PropTypes.bool,
   otherAmountValue: PropTypes.number,
   additionalSingleCopy: PropTypes.string,
-  additionalMonthlyCopy: PropTypes.string
+  additionalMonthlyCopy: PropTypes.string,
+  defaultGivingType: PropTypes.string
 };
 
 Donate.defaultProps = {
@@ -194,7 +197,8 @@ Donate.defaultProps = {
   otherAmountValue: null,
   title: null,
   additionalSingleCopy: null,
-  additionalMonthlyCopy: null
+  additionalMonthlyCopy: null,
+  defaultGivingType: null
 };
 
 export default Donate;

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

@@ -438,4 +438,59 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   subtitle="Please help us fund life-changing projects in the UK and around the world."
   additionalSingleCopy="Some additional single giving copy - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa."
 />;
+```
+
+## Default monthly giving type
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  alt="Background image"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+  submitButtonColor="blue_dark"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-14"
+  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."
+  defaultGivingType="monthly"
+/>;
+```
+
+## Monthly ONLY
+
+```js
+import data from './dev-data/data-monthly';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  alt="Background image"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+  submitButtonColor="blue_dark"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-15"
+  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."
+/>;
 ```

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

@@ -40,9 +40,10 @@ const Signup = ({
   otherAmountValue,
   additionalSingleCopy,
   additionalMonthlyCopy,
+  defaultGivingType,
   ...rest
 }) => {
-  const [givingType, setGivingType] = useState('single');
+  const [givingType, setGivingType] = useState();
   const [errorMsg, setErrorMsg] = useState(false);
   const [amountDonate, setAmountDonate] = useState(10);
   const [moneyBuyCopy, setMoneyBuyCopy] = useState(true);
@@ -55,7 +56,7 @@ const Signup = ({
     // otherwise assign based on the associated moneybuys:
     if (otherAmountValue) {
       setAmountDonate(otherAmountValue);
-    } else {
+    } else if (givingType) {
       const givingData = givingType === 'single' ? singleGiving : regularGiving;
 
       // Check the 2nd moneybuy exists before using it;
@@ -70,29 +71,31 @@ const Signup = ({
   }, [givingType, singleGiving, regularGiving, otherAmountValue]);
 
   useEffect(() => {
-    const givingData = givingType === 'single' ? singleGiving : regularGiving;
-
-    let moneyBuyNewDescription = otherAmountText;
+    if (givingType) {
+      const givingData = givingType === 'single' ? singleGiving : regularGiving;
 
-    givingData.moneybuys.map((moneyBuy, index) => {
-      if (moneyBuy.value === amountDonate) {
-        moneyBuyNewDescription = moneyBuy.description;
-      }
+      let moneyBuyNewDescription = otherAmountText;
 
-      return (
-        index === 1
-        && amountDonate === undefined
-        && (setMoneyBuyCopy(moneyBuy.description),
-        setAmountDonate(moneyBuy.value))
-      );
-    });
+      givingData.moneybuys.map((moneyBuy, index) => {
+        if (moneyBuy.value === amountDonate) {
+          moneyBuyNewDescription = moneyBuy.description;
+        }
 
-    if (!isAmountValid(amountDonate)) {
-      if (moneyBuyCopy) setMoneyBuyCopy(false);
-      if (!errorMsg) setErrorMsg(true);
-    } else {
-      if (errorMsg) setErrorMsg(false);
-      setMoneyBuyCopy(moneyBuyNewDescription);
+        return (
+          index === 1
+          && amountDonate === undefined
+          && (setMoneyBuyCopy(moneyBuy.description),
+          setAmountDonate(moneyBuy.value))
+        );
+      });
+
+      if (!isAmountValid(amountDonate)) {
+        if (moneyBuyCopy) setMoneyBuyCopy(false);
+        if (!errorMsg) setErrorMsg(true);
+      } else {
+        if (errorMsg) setErrorMsg(false);
+        setMoneyBuyCopy(moneyBuyNewDescription);
+      }
     }
   }, [
     errorMsg,
@@ -110,6 +113,18 @@ const Signup = ({
     if (popOpen && !popUpShown) setPopUpShown(true);
   }, [popOpen, popUpShown]);
 
+  // On load, determine what should actually be the default giving type
+  useEffect(() => {
+    // Use any explicit setting
+    if (defaultGivingType) {
+      setGivingType(defaultGivingType);
+    } else {
+      // Else, use whatever's available
+      setGivingType(singleGiving !== null ? 'single' : 'monthly');
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const submitDonation = (
     event,
     amount,
@@ -170,7 +185,7 @@ const Signup = ({
 
       setAmountDonate(thisAmount);
     }
-  }, [errorMsg, givingData.moneybuys]);
+  }, [errorMsg, givingData]);
 
   // Listen for click outside custom amount input if there is no value entered.
   useEffect(() => {
@@ -227,7 +242,7 @@ const Signup = ({
               {chooseAmountText || `${noMoneyBuys ? 'Enter' : 'Choose'} an amount to give`}
             </Text>
           </Legend>
-          {!noMoneyBuys && (
+          {!noMoneyBuys && givingType && (
             <MoneyBuys>
               {givingData.moneybuys.map(({ value }, index) => (
                 <MoneyBuy
@@ -329,7 +344,8 @@ Signup.propTypes = {
   submitButtonColor: PropTypes.string.isRequired,
   otherAmountValue: PropTypes.number,
   additionalSingleCopy: PropTypes.string,
-  additionalMonthlyCopy: PropTypes.string
+  additionalMonthlyCopy: PropTypes.string,
+  defaultGivingType: PropTypes.string
 };
 
 Signup.defaultProps = {
@@ -337,7 +353,8 @@ Signup.defaultProps = {
   otherAmountValue: null,
   data: {},
   additionalSingleCopy: null,
-  additionalMonthlyCopy: null
+  additionalMonthlyCopy: null,
+  defaultGivingType: null
 };
 
 export default Signup;

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

@@ -51,8 +51,12 @@ const GivingSelector = ({
   );
 };
 
+GivingSelector.defaultProps = {
+  givingType: null
+};
+
 GivingSelector.propTypes = {
-  givingType: PropTypes.string.isRequired,
+  givingType: PropTypes.string,
   changeGivingType: PropTypes.func.isRequired,
   setPopOpen: PropTypes.func.isRequired,
   mbshipID: PropTypes.string.isRequired