@comicrelief/component-library 8.52.2 → 8.53.0

package/dist/components/Organisms/DonateBanner/DonateBanner.style.js

@@ -0,0 +1,291 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.TitleWrapperOuter = exports.TitleWrapperInner = exports.SecondaryTitleText = exports.PrimaryTitleText = exports.OuterFieldset = exports.MoneyBuys = exports.Legend = exports.Label = exports.InnerContainer = exports.FormWrapper = exports.FormFieldset = exports.Form = exports.Error = exports.Copy = exports.Container = exports.Button = exports.BgImage = exports.AmountField = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Input = _interopRequireDefault(require("../../Atoms/Input/Input"));
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
+var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
+var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
+const Container = exports.Container = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__Container",
+  componentId: "sc-a4o3ek-0"
+})(["position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;margin:", ";background-color:", ";width:100%;padding:2rem;"], _ref => {
+  let {
+    paddingAbove,
+    paddingBelow
+  } = _ref;
+  return `${paddingAbove} 0 ${paddingBelow}`;
+}, _ref2 => {
+  let {
+    theme,
+    pageBackgroundColour
+  } = _ref2;
+  return theme.color(pageBackgroundColour);
+});
+const InnerContainer = exports.InnerContainer = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__InnerContainer",
+  componentId: "sc-a4o3ek-1"
+})(["position:relative;background-color:", ";border-radius:1rem;overflow:hidden;padding:none;width:100%;box-sizing:border-box;@media ", "{padding:", ";", "}@media ", "{padding-left:", ";padding-right:", ";}max-width:1500px;"], _ref3 => {
+  let {
+    theme,
+    componentBackgroundColour
+  } = _ref3;
+  return theme.color(componentBackgroundColour);
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('l'), _ref5 => {
+  let {
+    $donateWidgetIsTextOnly
+  } = _ref5;
+  return $donateWidgetIsTextOnly && (0, _styledComponents.css)(["padding-top:7.5rem;padding-bottom:7.5rem;"]);
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.allBreakpoints('XL');
+}, (0, _spacing.default)('xxl'), (0, _spacing.default)('xxl'));
+const BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.default).withConfig({
+  displayName: "DonateBannerstyle__BgImage",
+  componentId: "sc-a4o3ek-2"
+})(["display:block;position:absolute;bottom:0;left:0;right:0;height:100%;"]);
+const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__Wrapper",
+  componentId: "sc-a4o3ek-3"
+})(["position:relative;text-align:center;align-items:center;display:block;width:100%;", " ", ";@media ", "{display:flex;padding:", " ", ";gap:", ";flex-direction:row;}"], _ref7 => {
+  let {
+    hasTopImage,
+    shouldShowTitleSection
+  } = _ref7;
+  return hasTopImage && !shouldShowTitleSection && (0, _styledComponents.css)(["padding:0;"]);
+}, _ref8 => {
+  let {
+    noTitlesAtAll
+  } = _ref8;
+  return noTitlesAtAll === true && (0, _styledComponents.css)(["justify-content:center;"]);
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('l'), (0, _spacing.default)('md'), (0, _spacing.default)('l'));
+const TitleWrapperOuter = exports.TitleWrapperOuter = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__TitleWrapperOuter",
+  componentId: "sc-a4o3ek-4"
+})(["width:100%;display:flex;font-family:", ";padding-bottom:", ";@media ", "{flex:1 1 0;width:auto;padding:0;align-items:center;order:", ";}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.fontFamilies(theme.font.regular);
+}, (0, _spacing.default)('l'), _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.allBreakpoints('L');
+}, _ref12 => {
+  let {
+    donateOrientation
+  } = _ref12;
+  return donateOrientation === 'left' ? 2 : 1;
+});
+const TitleWrapperInner = exports.TitleWrapperInner = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__TitleWrapperInner",
+  componentId: "sc-a4o3ek-5"
+})(["position:relative;text-align:left;"]);
+const FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__FormWrapper",
+  componentId: "sc-a4o3ek-6"
+})(["position:relative;font-family:", ";@media ", "{flex:1 1 0;min-width:0;width:auto;display:flex;justify-content:", ";order:", ";}"], _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.fontFamilies(theme.font.regular);
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.allBreakpoints('L');
+}, _ref15 => {
+  let {
+    donateOrientation
+  } = _ref15;
+  return donateOrientation === 'left' ? 'flex-start' : 'flex-end';
+}, _ref16 => {
+  let {
+    donateOrientation
+  } = _ref16;
+  return donateOrientation === 'left' ? 1 : 2;
+});
+const Error = exports.Error = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "DonateBannerstyle__Error",
+  componentId: "sc-a4o3ek-7"
+})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.color('red');
+}, _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.fontSize('s');
+}, (0, _spacing.default)('l'));
+const Form = exports.Form = _styledComponents.default.form.withConfig({
+  displayName: "DonateBannerstyle__Form",
+  componentId: "sc-a4o3ek-8"
+})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);margin-left:auto;margin-right:auto;", " h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}@media ", "{width:100%;margin-right:auto;margin-left:auto;}@media ", "{margin-top:", ";border-radius:0.5rem;max-width:461px;min-width:400px;margin-left:0;margin-right:0;}"], _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.color('white');
+}, _ref20 => {
+  let {
+    hasTopImage,
+    shouldShowTitleSection
+  } = _ref20;
+  return hasTopImage && !shouldShowTitleSection && (0, _styledComponents.css)(["margin-top:0;"]);
+}, (0, _spacing.default)('md'), (0, _spacing.default)('l'), _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.allBreakpoints('M');
+}, _ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('md'));
+const OuterFieldset = exports.OuterFieldset = _styledComponents.default.fieldset.withConfig({
+  displayName: "DonateBannerstyle__OuterFieldset",
+  componentId: "sc-a4o3ek-9"
+})(["color:", ";padding:0 ", " ", ";margin:0;border:none;@media ", "{padding:0 ", " ", ";}input[type='submit']{margin-bottom:0;}"], _ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.color('black');
+}, (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('l'), (0, _spacing.default)('l'));
+const Legend = exports.Legend = _styledComponents.default.legend.withConfig({
+  displayName: "DonateBannerstyle__Legend",
+  componentId: "sc-a4o3ek-10"
+})(["margin:0;padding:", " ", " 0 ", ";display:block;width:100%;"], (0, _spacing.default)('l'), (0, _spacing.default)('sm'), (0, _spacing.default)('sm'));
+const PrimaryTitleText = exports.PrimaryTitleText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "DonateBannerstyle__PrimaryTitleText",
+  componentId: "sc-a4o3ek-11"
+})(["display:block;text-align:left;font-size:", ";font-weight:700;"], _ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.fontSize('s');
+});
+const SecondaryTitleText = exports.SecondaryTitleText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "DonateBannerstyle__SecondaryTitleText",
+  componentId: "sc-a4o3ek-12"
+})(["display:block;text-align:left;font-size:", ";line-height:1.5;margin-top:", ";"], _ref26 => {
+  let {
+    theme
+  } = _ref26;
+  return theme.fontSize('s');
+}, (0, _spacing.default)('sm'));
+const MoneyBuys = exports.MoneyBuys = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__MoneyBuys",
+  componentId: "sc-a4o3ek-13"
+})(["display:flex;justify-content:space-between;flex-direction:column;margin-bottom:", ";@media ", "{flex-direction:row;margin-top:", ";}label{flex:0 0 31%;margin-bottom:", ";@media ", "{margin-bottom:0;}input{cursor:pointer;padding:", "  ", ";}}"], (0, _spacing.default)('md'), _ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('m'), (0, _spacing.default)('sm'), _ref28 => {
+  let {
+    theme
+  } = _ref28;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('m'));
+const FormFieldset = exports.FormFieldset = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__FormFieldset",
+  componentId: "sc-a4o3ek-14"
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;"]);
+const Label = exports.Label = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "DonateBannerstyle__Label",
+  componentId: "sc-a4o3ek-15"
+})(["margin-bottom:", ";"], (0, _spacing.default)('sm'));
+const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
+  displayName: "DonateBannerstyle__AmountField",
+  componentId: "sc-a4o3ek-16"
+})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", " @media ", "{flex-basis:60%;}span{position:absolute;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;padding:0px 15px;", ";}input{height:48px;border:1px solid ", ";background:", ";border-radius:0.5rem;padding:", " ", " ", " ", ";&:focus{outline:none;border:1px solid ", ";}}"], _ref29 => {
+  let {
+    $noMoneyBuys
+  } = _ref29;
+  return $noMoneyBuys === true && (0, _styledComponents.css)(["margin-top:", ";"], (0, _spacing.default)('sm'));
+}, _ref30 => {
+  let {
+    theme
+  } = _ref30;
+  return theme.allBreakpoints('M');
+}, (0, _zIndex.default)('high'), _ref31 => {
+  let {
+    theme
+  } = _ref31;
+  return theme.color('grey');
+}, _ref32 => {
+  let {
+    theme
+  } = _ref32;
+  return theme.color('grey_light');
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref33 => {
+  let {
+    theme
+  } = _ref33;
+  return theme.color('grey');
+});
+const Copy = exports.Copy = _styledComponents.default.p.withConfig({
+  displayName: "DonateBannerstyle__Copy",
+  componentId: "sc-a4o3ek-17"
+})(["line-height:1.5;margin-top:", ";color:", ";"], (0, _spacing.default)('l'), _ref34 => {
+  let {
+    theme
+  } = _ref34;
+  return theme.color('black');
+});
+const Button = exports.Button = _styledComponents.default.button.withConfig({
+  displayName: "DonateBannerstyle__Button",
+  componentId: "sc-a4o3ek-18"
+})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:0.5rem;border:none;appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}@media ", "{padding:", " ", ";}"], (0, _spacing.default)('sm'), (0, _spacing.default)('sm'), _ref35 => {
+  let {
+    theme
+  } = _ref35;
+  return theme.color('white');
+}, _ref36 => {
+  let {
+    theme
+  } = _ref36;
+  return theme.fontSize('s');
+}, _ref37 => {
+  let {
+    theme,
+    color
+  } = _ref37;
+  return theme.color(color);
+}, _ref38 => {
+  let {
+    theme
+  } = _ref38;
+  return theme.color('coral_dark');
+}, _ref39 => {
+  let {
+    theme
+  } = _ref39;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('md'), (0, _spacing.default)('l'));

package/dist/components/Organisms/DonateBanner/DonateBanner.test.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+require("jest-styled-components");
+var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
+var _DonateBanner = _interopRequireDefault(require("./DonateBanner"));
+var _data = _interopRequireDefault(require("./dev-data/data"));
+var _dataSingle = _interopRequireDefault(require("./dev-data/data-single"));
+const defaultData = require('../../../styleguide/data/data').defaultData;
+it('Monthly donation renders correctly', () => {
+  const imageL = {
+    images: defaultData.pictures.images,
+    imageLow: defaultData.pictures.imageLow,
+    alt: 'Background image'
+  };
+  const imageM = {
+    images: defaultData.pictures.images,
+    imageLow: defaultData.pictures.imageLow,
+    alt: 'Background image'
+  };
+  const imageS = {
+    images: defaultData.pictures.images,
+    imageLow: defaultData.pictures.imageLow,
+    alt: 'Background image'
+  };
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_DonateBanner.default, {
+    pageBackgroundColour: "grey_light",
+    paddingAbove: "0rem",
+    paddingBelow: "2rem",
+    donateOrientation: "right",
+    imageL: imageL,
+    imageM: imageM,
+    imageS: imageS,
+    data: _data.default,
+    mbshipID: "mbship-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."
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('Single donation renders correctly', () => {
+  const imageL = {
+    images: defaultData.pictures.images,
+    imageLow: defaultData.pictures.imageLow,
+    alt: 'Background image'
+  };
+  const imageM = {
+    images: defaultData.pictures.images,
+    imageLow: defaultData.pictures.imageLow,
+    alt: 'Background image'
+  };
+  const imageS = {
+    images: defaultData.pictures.images,
+    imageLow: defaultData.pictures.imageLow,
+    alt: 'Background image'
+  };
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_DonateBanner.default, {
+    pageBackgroundColour: "grey_light",
+    paddingAbove: "2rem",
+    paddingBelow: "2rem",
+    donateOrientation: "left",
+    imageL: imageL,
+    imageM: imageM,
+    imageS: imageS,
+    data: _dataSingle.default,
+    mbshipID: "mbship-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."
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('Single donation with no Money Buys renders correctly', () => {
+  const imageL = {
+    images: defaultData.pictures.images,
+    imageLow: defaultData.pictures.imageLow,
+    alt: 'Background image'
+  };
+  const imageM = {
+    images: defaultData.pictures.images,
+    imageLow: defaultData.pictures.imageLow,
+    alt: 'Background image'
+  };
+  const imageS = {
+    images: defaultData.pictures.images,
+    imageLow: defaultData.pictures.imageLow,
+    alt: 'Background image'
+  };
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_DonateBanner.default, {
+    pageBackgroundColour: "grey_light",
+    paddingAbove: "0rem",
+    paddingBelow: "0rem",
+    donateOrientation: "right",
+    imageL: imageL,
+    imageM: imageM,
+    imageS: imageS,
+    data: _dataSingle.default,
+    mbshipID: "mbship-1",
+    donateLink: "https://donation.comicrelief.com/",
+    clientID: "donate",
+    cartID: "default-comicrelief",
+    title: "Donate Now",
+    noMoneyBuys: true,
+    subtitle: "Please help us fund life-changing projects in the UK and around the world.",
+    chooseAmountText: "Overridden choose amount text"
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('Text-only donate widget renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_DonateBanner.default, {
+    donateWidgetIsTextOnly: true,
+    pageBackgroundColour: "grey_light",
+    componentBackgroundColour: "deep_violet_dark",
+    paddingAbove: "2rem",
+    paddingBelow: "2rem",
+    donateOrientation: "right",
+    data: _data.default,
+    mbshipID: "mbship-4",
+    donateLink: "https://donation.comicrelief.com/",
+    clientID: "donate",
+    cartID: "default-comicrelief",
+    title: "Donate Now",
+    noMoneyBuys: true,
+    subtitle: "Please help us fund life-changing projects in the UK and around the world.",
+    chooseAmountText: "Enter an amount to give"
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});

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

@@ -0,0 +1,214 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _PopUpComponent = _interopRequireDefault(require("./PopUpComponent"));
+var _MoneyBuy = _interopRequireDefault(require("../MoneyBuy/MoneyBuy"));
+var _Membership = require("../../../../utils/Membership");
+var _DonateBanner = require("../DonateBanner.style");
+var _GivingSelector = _interopRequireDefault(require("../GivingSelector/GivingSelector"));
+const Signup = _ref => {
+  let {
+    data: {
+      singleGiving,
+      regularGiving
+    },
+    donateLink,
+    otherAmountText,
+    clientID,
+    cartID,
+    mbshipID,
+    donateOrientation = 'right',
+    noMoneyBuys = false,
+    popUpText,
+    chooseAmountText = null,
+    monthlyChooseAmountText = null,
+    submitButtonColor = 'red',
+    changeGivingType,
+    givingType = null,
+    hasTopImage = false,
+    shouldShowTitleSection = false,
+    ...rest
+  } = _ref;
+  const [errorMsg, setErrorMsg] = (0, _react.useState)(false);
+  const [amountDonate, setAmountDonate] = (0, _react.useState)(10);
+  const [moneyBuyCopy, setMoneyBuyCopy] = (0, _react.useState)(true);
+  const [popOpen, setPopOpen] = (0, _react.useState)(false);
+  // In order to keep track of whether the user has ever been shown the popup
+  const [popUpShown, setPopUpShown] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (givingType) {
+      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;
+      setAmountDonate(thisAmount);
+    }
+    // Pass givingType up to parent for copy-switching logic:
+    changeGivingType(givingType);
+  }, [givingType, singleGiving, regularGiving, changeGivingType]);
+  (0, _react.useEffect)(() => {
+    if (givingType) {
+      const givingData = givingType === 'single' ? singleGiving : regularGiving;
+      let moneyBuyUpdatedDescription = otherAmountText;
+      givingData.moneybuys.map((moneyBuy, index) => {
+        // Only show the MB-associated copy when we're actually showing moneybuys
+        if (moneyBuy.value === amountDonate && !noMoneyBuys) {
+          moneyBuyUpdatedDescription = 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(moneyBuyUpdatedDescription);
+      }
+    }
+  }, [errorMsg, moneyBuyCopy, singleGiving, regularGiving, givingType, amountDonate, otherAmountText, noMoneyBuys]);
+
+  // Updates our flag that differentiates between the popup
+  // being *currently* open and it *ever* having been shown to user
+  (0, _react.useEffect)(() => {
+    if (popOpen && !popUpShown) setPopUpShown(true);
+  }, [popOpen, popUpShown]);
+
+  // On load, determine what should actually be the default giving type
+  (0, _react.useEffect)(() => {
+    const newGivingType = singleGiving !== null ? 'single' : 'monthly';
+    changeGivingType(newGivingType);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const submitDonation = (event, amount, clientId, cartId, mbshipId, donateURL) => {
+    event.preventDefault();
+    if ((0, _Membership.isAmountValid)(amount) && !errorMsg) {
+      (0, _Membership.handleDonateSubmission)(amount, clientId, cartId, mbshipId, donateURL, givingType, popUpShown);
+    } else {
+      setErrorMsg(true);
+      setMoneyBuyCopy(false);
+    }
+  };
+
+  // Create money buy boxes
+  const givingData = givingType === 'single' ? singleGiving : regularGiving;
+  const showGivingSelector = singleGiving !== null && regularGiving !== null;
+
+  // Create ref for amount input
+  const amountRef = (0, _react.useRef)(null);
+  // Create ref for amount button
+  const buttonRef = (0, _react.useRef)(null);
+  const handleClickOutside = (0, _react.useCallback)(event => {
+    if (!errorMsg) {
+      return;
+    }
+    if (buttonRef.current && event.target === buttonRef.current) {
+      return;
+    }
+    if (amountRef.current && !amountRef.current.contains(event.target)) {
+      // 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(thisAmount);
+    }
+  }, [errorMsg, givingData]);
+
+  // Listen for click outside custom amount input if there is no value entered.
+  (0, _react.useEffect)(() => {
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [errorMsg, handleClickOutside]);
+
+  // Create function to conditionally render button text
+  const renderButtonText = () => {
+    if (errorMsg) {
+      return 'Donate';
+    }
+    if (givingType === 'single') {
+      return `Donate £${amountDonate} now`;
+    }
+    return `Donate £${amountDonate} monthly`;
+  };
+  const defaultChooseAmountText = `${noMoneyBuys ? 'Enter' : 'Choose'} an amount to give`;
+  const thisChooseAmountText = givingType === 'monthly' && monthlyChooseAmountText ? monthlyChooseAmountText : chooseAmountText || defaultChooseAmountText;
+  return /*#__PURE__*/_react.default.createElement(_DonateBanner.FormWrapper, {
+    donateOrientation: donateOrientation,
+    shouldShowTitleSection: shouldShowTitleSection
+  }, popOpen && /*#__PURE__*/_react.default.createElement(_PopUpComponent.default, {
+    popUpText: popUpText,
+    setPopOpen: setPopOpen
+  }), /*#__PURE__*/_react.default.createElement(_DonateBanner.Form, {
+    donateOrientation: donateOrientation,
+    hasTopImage: hasTopImage,
+    shouldShowTitleSection: shouldShowTitleSection,
+    onSubmit: e => submitDonation(e, amountDonate, clientID, cartID, mbshipID, donateLink)
+  }, /*#__PURE__*/_react.default.createElement(_DonateBanner.OuterFieldset, null, /*#__PURE__*/_react.default.createElement(_DonateBanner.Legend, null, /*#__PURE__*/_react.default.createElement(_DonateBanner.PrimaryTitleText, {
+    tag: "span",
+    color: "black"
+  }, thisChooseAmountText)), showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
+    givingType: givingType,
+    changeGivingType: data => changeGivingType(data),
+    setPopOpen: setPopOpen,
+    mbshipID: mbshipID
+  }), !noMoneyBuys && givingType && /*#__PURE__*/_react.default.createElement(_DonateBanner.MoneyBuys, null, givingData.moneybuys.map((_ref2, index) => {
+    let {
+      value
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_MoneyBuy.default, {
+      isSelected: amountDonate === value,
+      amount: value.toString(),
+      description: `£${(0, _Membership.amountFormatter)(value)}`,
+      setOtherAmount: () => setAmountDonate(value),
+      key: value,
+      name: `${mbshipID}--moneyBuy${index + 1}`,
+      id: `${mbshipID}--moneyBuy-box${index + 1}`
+    });
+  })), /*#__PURE__*/_react.default.createElement(_DonateBanner.FormFieldset, null, !noMoneyBuys && /*#__PURE__*/_react.default.createElement(_DonateBanner.Label, {
+    size: "s",
+    weight: "500",
+    color: "black"
+  }, "Enter another amount"), /*#__PURE__*/_react.default.createElement(_DonateBanner.AmountField, Object.assign({
+    $noMoneyBuys: noMoneyBuys,
+    step: "0.01",
+    name: "membership_amount",
+    type: "string",
+    inputBorderColor: (0, _Membership.isAmountValid)(amountDonate) === false,
+    prefix: "\xA3",
+    label: noMoneyBuys ? 'Donation amount' : 'Other donation amount',
+    errorMsg: "",
+    id: `${mbshipID}--MoneyBuy-userInput`,
+    showLabel: false
+  }, rest, {
+    max: "25000",
+    min: "1",
+    value: amountDonate,
+    pattern: "^[0-9]+([,.][0-9]{0,2})?$" // this only applies on submit
+    ,
+    placeholder: "0.00",
+    onChange: e => setAmountDonate(e.target.value.trim()),
+    ref: amountRef
+  }))), amountDonate >= 1 && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_DonateBanner.Copy, null, /*#__PURE__*/_react.default.createElement("strong", null, `£${amountDonate} `), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_DonateBanner.Error, {
+    className: "error--amount",
+    tag: "p"
+  }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), /*#__PURE__*/_react.default.createElement(_DonateBanner.Button, {
+    type: "submit",
+    color: submitButtonColor,
+    ref: buttonRef
+    // Used by analytics:
+    ,
+    className: "Button_DonateWidget"
+  }, renderButtonText()))));
+};
+var _default = exports.default = Signup;