@comicrelief/component-library 7.24.2 → 7.26.0

package/dist/components/Organisms/Donate/Donate.js

@@ -40,7 +40,10 @@ const Donate = _ref => {
     PopUpText,
     chooseAmountText,
     isDesktopOverride,
-    otherAmountValue
+    otherAmountValue,
+    additionalSingleCopy,
+    additionalMonthlyCopy,
+    defaultGivingType
   } = _ref;
   let isDesktop = (0, _reactResponsive.useMediaQuery)({
     query: "(min-width: ".concat(_size.screen.medium, ")")
@@ -107,7 +110,10 @@ const Donate = _ref => {
     PopUpText: PopUpText,
     chooseAmountText: chooseAmountText,
     submitButtonColor: submitButtonColor,
-    otherAmountValue: otherAmountValue
+    otherAmountValue: otherAmountValue,
+    additionalSingleCopy: additionalSingleCopy,
+    additionalMonthlyCopy: additionalMonthlyCopy,
+    defaultGivingType: defaultGivingType
   })));
 };
 Donate.defaultProps = {
@@ -133,6 +139,9 @@ Donate.defaultProps = {
   chooseAmountText: '',
   isDesktopOverride: null,
   otherAmountValue: null,
-  title: null
+  title: null,
+  additionalSingleCopy: null,
+  additionalMonthlyCopy: null,
+  defaultGivingType: null
 };
 var _default = exports.default = Donate;

package/dist/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/dist/components/Organisms/Donate/Form/Form.js

@@ -29,9 +29,12 @@ const Signup = _ref => {
     chooseAmountText,
     submitButtonColor,
     otherAmountValue,
+    additionalSingleCopy,
+    additionalMonthlyCopy,
+    defaultGivingType,
     ...rest
   } = _ref;
-  const [givingType, setGivingType] = (0, _react.useState)('single');
+  const [givingType, setGivingType] = (0, _react.useState)();
   const [errorMsg, setErrorMsg] = (0, _react.useState)(false);
   const [amountDonate, setAmountDonate] = (0, _react.useState)(10);
   const [moneyBuyCopy, setMoneyBuyCopy] = (0, _react.useState)(true);
@@ -43,7 +46,7 @@ const Signup = _ref => {
     // 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;
@@ -54,20 +57,22 @@ const Signup = _ref => {
     }
   }, [givingType, singleGiving, regularGiving, otherAmountValue]);
   (0, _react.useEffect)(() => {
-    const givingData = givingType === 'single' ? singleGiving : regularGiving;
-    let moneyBuyNewDescription = otherAmountText;
-    givingData.moneybuys.map((moneyBuy, index) => {
-      if (moneyBuy.value === amountDonate) {
-        moneyBuyNewDescription = moneyBuy.description;
+    if (givingType) {
+      const givingData = givingType === 'single' ? singleGiving : regularGiving;
+      let moneyBuyNewDescription = otherAmountText;
+      givingData.moneybuys.map((moneyBuy, index) => {
+        if (moneyBuy.value === amountDonate) {
+          moneyBuyNewDescription = moneyBuy.description;
+        }
+        return index === 1 && amountDonate === undefined && (setMoneyBuyCopy(moneyBuy.description), setAmountDonate(moneyBuy.value));
+      });
+      if (!(0, _Membership.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 (!(0, _Membership.isAmountValid)(amountDonate)) {
-      if (moneyBuyCopy) setMoneyBuyCopy(false);
-      if (!errorMsg) setErrorMsg(true);
-    } else {
-      if (errorMsg) setErrorMsg(false);
-      setMoneyBuyCopy(moneyBuyNewDescription);
     }
   }, [errorMsg, moneyBuyCopy, singleGiving, regularGiving, givingType, amountDonate, otherAmountText]);
 
@@ -76,6 +81,18 @@ const Signup = _ref => {
   (0, _react.useEffect)(() => {
     if (popOpen && !popUpShown) setPopUpShown(true);
   }, [popOpen, popUpShown]);
+
+  // On load, determine what should actually be the default giving type
+  (0, _react.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, clientId, cartId, mbshipId, donateURL) => {
     event.preventDefault();
     if ((0, _Membership.isAmountValid)(amount) && !errorMsg) {
@@ -115,7 +132,7 @@ const Signup = _ref => {
       const thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
       setAmountDonate(thisAmount);
     }
-  }, [errorMsg, givingData.moneybuys]);
+  }, [errorMsg, givingData]);
 
   // Listen for click outside custom amount input if there is no value entered.
   (0, _react.useEffect)(() => {
@@ -137,6 +154,9 @@ const Signup = _ref => {
     }
     return "Donate \xA3".concat(amountDonate, " monthly");
   };
+  const showAdditionalSingleCopy = givingType === 'single' && additionalSingleCopy;
+  const showAdditionalMonthlyCopy = givingType === 'monthly' && additionalMonthlyCopy;
+  const additionalCopy = showAdditionalSingleCopy || showAdditionalMonthlyCopy;
   return /*#__PURE__*/_react.default.createElement(_Donate.FormWrapper, null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
     givingType: givingType,
     changeGivingType: data => setGivingType(data),
@@ -151,7 +171,7 @@ const Signup = _ref => {
     tag: "span",
     size: "l",
     weight: "bold"
-  }, chooseAmountText || "".concat(noMoneyBuys ? 'Enter' : 'Choose', " an amount to give"))), !noMoneyBuys && /*#__PURE__*/_react.default.createElement(_Donate.MoneyBuys, null, givingData.moneybuys.map((_ref2, index) => {
+  }, chooseAmountText || "".concat(noMoneyBuys ? 'Enter' : 'Choose', " an amount to give"))), !noMoneyBuys && givingType && /*#__PURE__*/_react.default.createElement(_Donate.MoneyBuys, null, givingData.moneybuys.map((_ref2, index) => {
     let {
       value
     } = _ref2;
@@ -191,7 +211,9 @@ const Signup = _ref => {
   }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate, " ")), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
     className: "error--amount",
     tag: "p"
-  }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
+  }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), additionalCopy && /*#__PURE__*/_react.default.createElement("p", {
+    className: "additional-copy"
+  }, /*#__PURE__*/_react.default.createElement("strong", null, additionalCopy)), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     color: submitButtonColor
   }, errorMsg ? 'Donate' : "Donate \xA3".concat(amountDonate)) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
@@ -203,6 +225,9 @@ const Signup = _ref => {
 Signup.defaultProps = {
   noMoneyBuys: false,
   otherAmountValue: null,
-  data: {}
+  data: {},
+  additionalSingleCopy: null,
+  additionalMonthlyCopy: null,
+  defaultGivingType: null
 };
 var _default = exports.default = Signup;

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

@@ -47,4 +47,7 @@ const GivingSelector = _ref => {
     htmlFor: "give-monthly--".concat(mbshipID)
   }, "Monthly"), /*#__PURE__*/_react.default.createElement(_GivingSelector.Switch, null)));
 };
+GivingSelector.defaultProps = {
+  givingType: null
+};
 var _default = exports.default = GivingSelector;