@comicrelief/component-library 7.25.0 → 7.26.1

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

@@ -42,7 +42,8 @@ const Donate = _ref => {
     isDesktopOverride,
     otherAmountValue,
     additionalSingleCopy,
-    additionalMonthlyCopy
+    additionalMonthlyCopy,
+    defaultGivingType
   } = _ref;
   let isDesktop = (0, _reactResponsive.useMediaQuery)({
     query: "(min-width: ".concat(_size.screen.medium, ")")
@@ -111,7 +112,8 @@ const Donate = _ref => {
     submitButtonColor: submitButtonColor,
     otherAmountValue: otherAmountValue,
     additionalSingleCopy: additionalSingleCopy,
-    additionalMonthlyCopy: additionalMonthlyCopy
+    additionalMonthlyCopy: additionalMonthlyCopy,
+    defaultGivingType: defaultGivingType
   })));
 };
 Donate.defaultProps = {
@@ -139,6 +141,7 @@ Donate.defaultProps = {
   otherAmountValue: null,
   title: null,
   additionalSingleCopy: null,
-  additionalMonthlyCopy: null
+  additionalMonthlyCopy: null,
+  defaultGivingType: null
 };
 var _default = exports.default = Donate;

package/dist/components/Organisms/Donate/Donate.md

@@ -438,4 +438,87 @@ 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."
+/>;
+```
+
+## Monthly ONLY, no moneybuys
+
+```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."
+  noMoneyBuys
+/>;
 ```

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

@@ -31,9 +31,10 @@ const Signup = _ref => {
     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);
@@ -45,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;
@@ -56,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]);
 
@@ -78,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) {
@@ -117,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)(() => {
@@ -156,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;
@@ -198,10 +213,7 @@ const Signup = _ref => {
     tag: "p"
   }, "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, {
+  }, /*#__PURE__*/_react.default.createElement("strong", null, additionalCopy)), /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     color: submitButtonColor,
     ref: buttonRef
@@ -212,6 +224,7 @@ Signup.defaultProps = {
   otherAmountValue: null,
   data: {},
   additionalSingleCopy: null,
-  additionalMonthlyCopy: 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;