@comicrelief/component-library 7.24.2 → 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.24.2",
+  "version": "7.26.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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

@@ -40,7 +40,10 @@ const Donate = ({
   PopUpText,
   chooseAmountText,
   isDesktopOverride,
-  otherAmountValue
+  otherAmountValue,
+  additionalSingleCopy,
+  additionalMonthlyCopy,
+  defaultGivingType
 }) => {
   let isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
 
@@ -127,6 +130,9 @@ const Donate = ({
           chooseAmountText={chooseAmountText}
           submitButtonColor={submitButtonColor}
           otherAmountValue={otherAmountValue}
+          additionalSingleCopy={additionalSingleCopy}
+          additionalMonthlyCopy={additionalMonthlyCopy}
+          defaultGivingType={defaultGivingType}
         />
       </Wrapper>
     </Container>
@@ -159,7 +165,10 @@ Donate.propTypes = {
   PopUpText: PropTypes.string,
   chooseAmountText: PropTypes.string,
   isDesktopOverride: PropTypes.bool,
-  otherAmountValue: PropTypes.number
+  otherAmountValue: PropTypes.number,
+  additionalSingleCopy: PropTypes.string,
+  additionalMonthlyCopy: PropTypes.string,
+  defaultGivingType: PropTypes.string
 };
 
 Donate.defaultProps = {
@@ -186,7 +195,10 @@ Donate.defaultProps = {
   chooseAmountText: '',
   isDesktopOverride: null,
   otherAmountValue: null,
-  title: null
+  title: null,
+  additionalSingleCopy: null,
+  additionalMonthlyCopy: null,
+  defaultGivingType: null
 };
 
 export default Donate;

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

@@ -354,3 +354,143 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   isDesktopOverride={false}
 />;
 ```
+
+## Additional copy for BOTH giving types
+
+```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-11"
+  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."
+  additionalSingleCopy="Some additional single giving copy - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa."
+  additionalMonthlyCopy="Some additional regular giving copy! - Quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos."
+/>;
+```
+
+## Additional copy for monthly only
+
+```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-12"
+  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."
+  additionalMonthlyCopy="Some additional regular giving copy! - Quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos."
+/>;
+```
+
+## Additional copy for single only
+
+```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-13"
+  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."
+  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

@@ -38,9 +38,12 @@ const Signup = ({
   chooseAmountText,
   submitButtonColor,
   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);
@@ -53,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;
@@ -68,29 +71,31 @@ const Signup = ({
   }, [givingType, singleGiving, regularGiving, otherAmountValue]);
 
   useEffect(() => {
-    const givingData = givingType === 'single' ? singleGiving : regularGiving;
+    if (givingType) {
+      const givingData = givingType === 'single' ? singleGiving : regularGiving;
 
-    let moneyBuyNewDescription = otherAmountText;
+      let moneyBuyNewDescription = otherAmountText;
 
-    givingData.moneybuys.map((moneyBuy, index) => {
-      if (moneyBuy.value === amountDonate) {
-        moneyBuyNewDescription = moneyBuy.description;
-      }
+      givingData.moneybuys.map((moneyBuy, index) => {
+        if (moneyBuy.value === amountDonate) {
+          moneyBuyNewDescription = moneyBuy.description;
+        }
 
-      return (
-        index === 1
-        && amountDonate === undefined
-        && (setMoneyBuyCopy(moneyBuy.description),
-        setAmountDonate(moneyBuy.value))
-      );
-    });
+        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);
+      if (!isAmountValid(amountDonate)) {
+        if (moneyBuyCopy) setMoneyBuyCopy(false);
+        if (!errorMsg) setErrorMsg(true);
+      } else {
+        if (errorMsg) setErrorMsg(false);
+        setMoneyBuyCopy(moneyBuyNewDescription);
+      }
     }
   }, [
     errorMsg,
@@ -108,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,
@@ -168,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(() => {
@@ -191,6 +208,10 @@ const Signup = ({
     return `Donate £${amountDonate} monthly`;
   };
 
+  const showAdditionalSingleCopy = givingType === 'single' && additionalSingleCopy;
+  const showAdditionalMonthlyCopy = givingType === 'monthly' && additionalMonthlyCopy;
+  const additionalCopy = showAdditionalSingleCopy || showAdditionalMonthlyCopy;
+
   return (
     <FormWrapper>
       {showGivingSelector && (
@@ -221,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
@@ -276,6 +297,14 @@ const Signup = ({
           </Error>
           )}
 
+          {additionalCopy && (
+          <p className="additional-copy">
+            <strong>
+              {additionalCopy}
+            </strong>
+          </p>
+          )}
+
           {noMoneyBuys ? (
             <Button
               type="submit"
@@ -313,13 +342,19 @@ Signup.propTypes = {
   PopUpText: PropTypes.string.isRequired,
   chooseAmountText: PropTypes.string.isRequired,
   submitButtonColor: PropTypes.string.isRequired,
-  otherAmountValue: PropTypes.number
+  otherAmountValue: PropTypes.number,
+  additionalSingleCopy: PropTypes.string,
+  additionalMonthlyCopy: PropTypes.string,
+  defaultGivingType: PropTypes.string
 };
 
 Signup.defaultProps = {
   noMoneyBuys: false,
   otherAmountValue: null,
-  data: {}
+  data: {},
+  additionalSingleCopy: 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