@comicrelief/component-library 7.24.0 → 7.24.2

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

@@ -1,11 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = require("react-responsive");
 var _size = require("../../../theme/shared/size");
@@ -13,47 +13,44 @@ var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Form = _interopRequireDefault(require("./Form/Form"));
 var _Donate = require("./Donate.style");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
-var Donate = function Donate(_ref) {
-  var alt = _ref.alt,
-    cartID = _ref.cartID,
-    clientID = _ref.clientID,
-    desktopOverlayColor = _ref.desktopOverlayColor,
-    mobileBackgroundColor = _ref.mobileBackgroundColor,
-    submitButtonColor = _ref.submitButtonColor,
-    textColor = _ref.textColor,
-    donateLink = _ref.donateLink,
-    data = _ref.data,
-    title = _ref.title,
-    subtitle = _ref.subtitle,
-    otherAmountText = _ref.otherAmountText,
-    formAlignRight = _ref.formAlignRight,
-    images = _ref.images,
-    image = _ref.image,
-    imageLow = _ref.imageLow,
-    mobileImages = _ref.mobileImages,
-    mobileImage = _ref.mobileImage,
-    mobileImageLow = _ref.mobileImageLow,
-    mobileAlt = _ref.mobileAlt,
-    mbshipID = _ref.mbshipID,
-    noMoneyBuys = _ref.noMoneyBuys,
-    PopUpText = _ref.PopUpText,
-    chooseAmountText = _ref.chooseAmountText,
-    isDesktopOverride = _ref.isDesktopOverride,
-    otherAmountValue = _ref.otherAmountValue;
-  var isDesktop = (0, _reactResponsive.useMediaQuery)({
+const Donate = _ref => {
+  let {
+    alt,
+    cartID,
+    clientID,
+    desktopOverlayColor,
+    mobileBackgroundColor,
+    submitButtonColor,
+    textColor,
+    donateLink,
+    data,
+    title,
+    subtitle,
+    otherAmountText,
+    formAlignRight,
+    images,
+    image,
+    imageLow,
+    mobileImages,
+    mobileImage,
+    mobileImageLow,
+    mobileAlt,
+    mbshipID,
+    noMoneyBuys,
+    PopUpText,
+    chooseAmountText,
+    isDesktopOverride,
+    otherAmountValue
+  } = _ref;
+  let isDesktop = (0, _reactResponsive.useMediaQuery)({
     query: "(min-width: ".concat(_size.screen.medium, ")")
   });
 
   // To let us store any updated override, and force a re-render
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    overrideValue = _useState2[0],
-    setOverrideValue = _useState2[1];
+  const [overrideValue, setOverrideValue] = (0, _react.useState)(null);
 
   // Store the updated override value
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     setOverrideValue(isDesktopOverride);
   }, [isDesktopOverride]);
 

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

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,122 +14,154 @@ var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 // import styled, { css } from 'styled-components';
 
-var Container = exports.Container = _styledComponents.default.div.withConfig({
+const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Container",
   componentId: "sc-8rjm3t-0"
-})(["position:relative;display:flex;flex-direction:column;justify-content:center;height:auto;background-color:", ";", "{flex-direction:row;align-items:center;justify-content:inherit;background-color:", ";}"], function (_ref) {
-  var theme = _ref.theme,
-    mobileBackgroundColor = _ref.mobileBackgroundColor;
+})(["position:relative;display:flex;flex-direction:column;justify-content:center;height:auto;background-color:", ";", "{flex-direction:row;align-items:center;justify-content:inherit;background-color:", ";}"], _ref => {
+  let {
+    theme,
+    mobileBackgroundColor
+  } = _ref;
   return theme.color(mobileBackgroundColor);
-}, (0, _size.media)('medium'), function (_ref2) {
-  var theme = _ref2.theme,
-    desktopOverlayColor = _ref2.desktopOverlayColor;
+}, (0, _size.media)('medium'), _ref2 => {
+  let {
+    theme,
+    desktopOverlayColor
+  } = _ref2;
   return theme.color(desktopOverlayColor);
 });
-var PopUp = exports.PopUp = _styledComponents.default.div.withConfig({
+const PopUp = exports.PopUp = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__PopUp",
   componentId: "sc-8rjm3t-1"
 })(["background:green;height:100px;"]);
-var BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.default).withConfig({
+const BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.default).withConfig({
   displayName: "Donatestyle__BgImage",
   componentId: "sc-8rjm3t-2"
-})(["display:block;position:absolute;bottom:0;left:0;right:0;height:100%;", ""], function (_ref3) {
-  var backgroundColor = _ref3.backgroundColor;
+})(["display:block;position:absolute;bottom:0;left:0;right:0;height:100%;", ""], _ref3 => {
+  let {
+    backgroundColor
+  } = _ref3;
   return backgroundColor !== 'transparent' && "\n    opacity: 0.4;\n  ";
 });
-var Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
+const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Wrapper",
   componentId: "sc-8rjm3t-3"
-})(["position:relative;text-align:center;padding:", " ", ";flex-direction:row;align-items:center;display:block;width:100%;flex-direction:", ";", "{padding:", " ", ";}", "{display:flex;padding:", " 0;}"], (0, _spacing.default)('l'), (0, _spacing.default)('md'), function (_ref4) {
-  var formAlignRight = _ref4.formAlignRight;
+})(["position:relative;text-align:center;padding:", " ", ";flex-direction:row;align-items:center;display:block;width:100%;flex-direction:", ";", "{padding:", " ", ";}", "{display:flex;padding:", " 0;}"], (0, _spacing.default)('l'), (0, _spacing.default)('md'), _ref4 => {
+  let {
+    formAlignRight
+  } = _ref4;
   return formAlignRight === true ? 'row-reverse' : 'row';
 }, (0, _size.media)('small'), (0, _spacing.default)('xl'), (0, _spacing.default)('md'), (0, _size.media)('medium'), (0, _spacing.default)('xl'));
-var Header = exports.Header = _styledComponents.default.div.withConfig({
+const Header = exports.Header = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Header",
   componentId: "sc-8rjm3t-4"
-})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], function (_ref5) {
-  var theme = _ref5.theme;
+})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'), (0, _spacing.default)('xl'));
-var HeaderInner = exports.HeaderInner = _styledComponents.default.div.withConfig({
+const HeaderInner = exports.HeaderInner = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__HeaderInner",
   componentId: "sc-8rjm3t-5"
 })(["position:relative;text-align:left;"]);
-var FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConfig({
+const FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__FormWrapper",
   componentId: "sc-8rjm3t-6"
-})(["position:relative;font-family:", ";", "{width:50%;}"], function (_ref6) {
-  var theme = _ref6.theme;
+})(["position:relative;font-family:", ";", "{width:50%;}"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'));
-var Error = exports.Error = (0, _styledComponents.default)(_Text.default).withConfig({
+const Error = exports.Error = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Error",
   componentId: "sc-8rjm3t-7"
-})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], function (_ref7) {
-  var theme = _ref7.theme;
+})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.color('red');
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.fontSize('s');
 }, (0, _spacing.default)('l'));
-var Form = exports.Form = _styledComponents.default.form.withConfig({
+const Form = exports.Form = _styledComponents.default.form.withConfig({
   displayName: "Donatestyle__Form",
   componentId: "sc-8rjm3t-8"
-})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}", "{width:450px;margin-right:auto;margin-left:auto;}"], function (_ref9) {
-  var theme = _ref9.theme;
+})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}", "{width:450px;margin-right:auto;margin-left:auto;}"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
   return theme.color('white');
 }, (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _size.media)('small'));
-var OuterFieldset = exports.OuterFieldset = _styledComponents.default.fieldset.withConfig({
+const OuterFieldset = exports.OuterFieldset = _styledComponents.default.fieldset.withConfig({
   displayName: "Donatestyle__OuterFieldset",
   componentId: "sc-8rjm3t-9"
 })(["padding:0 ", " ", ";margin:0;border:none;", "{padding:0 ", " ", ";}input[type='submit']{margin-bottom:0;}"], (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _size.media)('small'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
-var Legend = exports.Legend = _styledComponents.default.legend.withConfig({
+const Legend = exports.Legend = _styledComponents.default.legend.withConfig({
   displayName: "Donatestyle__Legend",
   componentId: "sc-8rjm3t-10"
 })(["margin:0;padding:", " ", ";display:block;width:100%;"], (0, _spacing.default)('l'), (0, _spacing.default)('sm'));
-var MoneyBuys = exports.MoneyBuys = _styledComponents.default.div.withConfig({
+const MoneyBuys = exports.MoneyBuys = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__MoneyBuys",
   componentId: "sc-8rjm3t-11"
 })(["display:flex;justify-content:space-between;flex-direction:column;margin-bottom:", ";", "{flex-direction:row;}label{flex:0 0 30%;margin-bottom:", ";", "{margin-bottom:0;}input{cursor:pointer;padding:", "  ", ";}}"], (0, _spacing.default)('l'), (0, _size.media)('small'), (0, _spacing.default)('sm'), (0, _size.media)('small'), (0, _spacing.default)('m'), (0, _spacing.default)('sm'));
-var FormFieldset = exports.FormFieldset = _styledComponents.default.div.withConfig({
+const FormFieldset = exports.FormFieldset = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__FormFieldset",
   componentId: "sc-8rjm3t-12"
 })(["display:flex;align-items:center;justify-content:center;"]);
-var Label = exports.Label = (0, _styledComponents.default)(_Text.default).withConfig({
+const Label = exports.Label = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Label",
   componentId: "sc-8rjm3t-13"
 })(["margin-right:", ";"], (0, _spacing.default)('sm'));
-var AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
+const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "Donatestyle__AmountField",
   componentId: "sc-8rjm3t-14"
-})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", "{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:2px solid ", ";background:", ";border-radius:10px;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], (0, _size.media)('small'), (0, _zIndex.default)('high'), function (_ref10) {
-  var theme = _ref10.theme;
+})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", "{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:2px solid ", ";background:", ";border-radius:10px;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], (0, _size.media)('small'), (0, _zIndex.default)('high'), _ref10 => {
+  let {
+    theme
+  } = _ref10;
   return theme.color('grey');
-}, function (_ref11) {
-  var theme = _ref11.theme;
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
   return theme.color('grey_light');
-}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), function (_ref12) {
-  var theme = _ref12.theme;
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.color('grey');
 });
-var Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withConfig({
+const Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Copy",
   componentId: "sc-8rjm3t-15"
 })(["line-height:1.5;margin-top:", ";"], (0, _spacing.default)('l'));
-var Button = exports.Button = _styledComponents.default.button.withConfig({
+const Button = exports.Button = _styledComponents.default.button.withConfig({
   displayName: "Donatestyle__Button",
   componentId: "sc-8rjm3t-16"
-})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:2rem;border:none;box-shadow:0px 0px 16px rgba(0,0,0,0.15);appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}", "{padding:", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), function (_ref13) {
-  var theme = _ref13.theme;
+})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:2rem;border:none;box-shadow:0px 0px 16px rgba(0,0,0,0.15);appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}", "{padding:", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.color('white');
-}, function (_ref14) {
-  var theme = _ref14.theme;
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
   return theme.fontSize('s');
-}, function (_ref15) {
-  var theme = _ref15.theme,
-    color = _ref15.color;
+}, _ref15 => {
+  let {
+    theme,
+    color
+  } = _ref15;
   return theme.color(color);
-}, function (_ref16) {
-  var theme = _ref16.theme;
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
   return theme.color('coral_dark');
 }, (0, _size.media)('small'), (0, _spacing.default)('md'), (0, _spacing.default)('l'));

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

@@ -1,15 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Donate = _interopRequireDefault(require("./Donate"));
 var _data = _interopRequireDefault(require("./dev-data/data"));
 var _dataSingle = _interopRequireDefault(require("./dev-data/data-single"));
-var defaultData = require('../../../styleguide/data/data').defaultData;
-it('Monthly donation renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
+const defaultData = require('../../../styleguide/data/data').defaultData;
+it('Monthly donation renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
     alt: "Background image",
     backgroundColor: "blue_dark",
     formAlignRight: true,
@@ -26,8 +26,8 @@ it('Monthly donation renders correctly', function () {
   })).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('Single donation renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
+it('Single donation renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
     backgroundColor: "blue_dark",
     formAlignRight: false,
     imageLow: defaultData.pictures.imageLow,
@@ -43,8 +43,8 @@ it('Single donation renders correctly', function () {
   })).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('Single donation with no Money Buys renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
+it('Single donation with no Money Buys renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
     backgroundColor: "blue_dark",
     formAlignRight: false,
     imageLow: defaultData.pictures.imageLow,
@@ -62,8 +62,8 @@ it('Single donation with no Money Buys renders correctly', function () {
   })).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('"Single Giving, No Money Buys, with overridden manual input value" renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
+it('"Single Giving, No Money Buys, with overridden manual input value" renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
     mobileBackgroundColor: "blue_dark",
     desktopOverlayColor: "blue_dark",
     formAlignRight: false,

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

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _PopUpComponent = _interopRequireDefault(require("./PopUpComponent"));
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
@@ -14,68 +13,50 @@ var _MoneyBuy = _interopRequireDefault(require("../MoneyBuy/MoneyBuy"));
 var _Membership = require("../../../../utils/Membership");
 var _Donate = require("../Donate.style");
 var _GivingSelector = _interopRequireDefault(require("../GivingSelector/GivingSelector"));
-var _excluded = ["data", "donateLink", "otherAmountText", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText", "submitButtonColor", "otherAmountValue"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
-var Signup = function Signup(_ref) {
-  var _ref$data = _ref.data,
-    singleGiving = _ref$data.singleGiving,
-    regularGiving = _ref$data.regularGiving,
-    donateLink = _ref.donateLink,
-    otherAmountText = _ref.otherAmountText,
-    clientID = _ref.clientID,
-    cartID = _ref.cartID,
-    mbshipID = _ref.mbshipID,
-    noMoneyBuys = _ref.noMoneyBuys,
-    PopUpText = _ref.PopUpText,
-    chooseAmountText = _ref.chooseAmountText,
-    submitButtonColor = _ref.submitButtonColor,
-    otherAmountValue = _ref.otherAmountValue,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)('single'),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    givingType = _useState2[0],
-    setGivingType = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    errorMsg = _useState4[0],
-    setErrorMsg = _useState4[1];
-  var _useState5 = (0, _react.useState)(10),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    amountDonate = _useState6[0],
-    setAmountDonate = _useState6[1];
-  var _useState7 = (0, _react.useState)(true),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    moneyBuyCopy = _useState8[0],
-    setMoneyBuyCopy = _useState8[1];
-  var _useState9 = (0, _react.useState)(false),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    popOpen = _useState10[0],
-    setPopOpen = _useState10[1];
+const Signup = _ref => {
+  let {
+    data: {
+      singleGiving,
+      regularGiving
+    },
+    donateLink,
+    otherAmountText,
+    clientID,
+    cartID,
+    mbshipID,
+    noMoneyBuys,
+    PopUpText,
+    chooseAmountText,
+    submitButtonColor,
+    otherAmountValue,
+    ...rest
+  } = _ref;
+  const [givingType, setGivingType] = (0, _react.useState)('single');
+  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
-  var _useState11 = (0, _react.useState)(false),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    popUpShown = _useState12[0],
-    setPopUpShown = _useState12[1];
-  (0, _react.useEffect)(function () {
+  const [popUpShown, setPopUpShown] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
     // If a specific 'other amount' has been passed down, use it,
     // otherwise assign based on the associated moneybuys:
     if (otherAmountValue) {
       setAmountDonate(otherAmountValue);
     } else {
-      var _givingData = givingType === 'single' ? singleGiving : regularGiving;
+      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
-      var thisAmount = _givingData.moneybuys[1] ? _givingData.moneybuys[1].value : _givingData.moneybuys[0].value;
+      const thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
       setAmountDonate(thisAmount);
     }
   }, [givingType, singleGiving, regularGiving, otherAmountValue]);
-  (0, _react.useEffect)(function () {
-    var givingData = givingType === 'single' ? singleGiving : regularGiving;
-    var moneyBuyNewDescription = otherAmountText;
-    givingData.moneybuys.map(function (moneyBuy, index) {
+  (0, _react.useEffect)(() => {
+    const givingData = givingType === 'single' ? singleGiving : regularGiving;
+    let moneyBuyNewDescription = otherAmountText;
+    givingData.moneybuys.map((moneyBuy, index) => {
       if (moneyBuy.value === amountDonate) {
         moneyBuyNewDescription = moneyBuy.description;
       }
@@ -92,10 +73,10 @@ var Signup = function Signup(_ref) {
 
   // Updates our flag that differentiates between the popup
   // being *currently* open and it *ever* having been shown to user
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (popOpen && !popUpShown) setPopUpShown(true);
   }, [popOpen, popUpShown]);
-  var submitDonation = function submitDonation(event, amount, clientId, cartId, mbshipId, donateURL) {
+  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);
@@ -106,21 +87,21 @@ var Signup = function Signup(_ref) {
   };
 
   // Update the local state if the prop has been set and changed
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (otherAmountValue) {
       setAmountDonate(otherAmountValue);
     }
   }, [otherAmountValue, setAmountDonate]);
 
   // Create money buy boxes
-  var givingData = givingType === 'single' ? singleGiving : regularGiving;
-  var showGivingSelector = singleGiving !== null && regularGiving !== null;
+  const givingData = givingType === 'single' ? singleGiving : regularGiving;
+  const showGivingSelector = singleGiving !== null && regularGiving !== null;
 
   // Create ref for amount input
-  var amountRef = (0, _react.useRef)(null);
+  const amountRef = (0, _react.useRef)(null);
   // Create ref for amount button
-  var buttonRef = (0, _react.useRef)(null);
-  var handleClickOutside = (0, _react.useCallback)(function (event) {
+  const buttonRef = (0, _react.useRef)(null);
+  const handleClickOutside = (0, _react.useCallback)(event => {
     if (!errorMsg) {
       return;
     }
@@ -131,23 +112,23 @@ var Signup = function Signup(_ref) {
       // 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
-      var thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
+      const thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
       setAmountDonate(thisAmount);
     }
   }, [errorMsg, givingData.moneybuys]);
 
   // Listen for click outside custom amount input if there is no value entered.
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     // Bind the event listener
     document.addEventListener('mousedown', handleClickOutside);
-    return function () {
+    return () => {
       // Unbind the event listener on clean up
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [errorMsg, handleClickOutside]);
 
   // Create function to conditionally render button text
-  var renderButtonText = function renderButtonText() {
+  const renderButtonText = () => {
     if (errorMsg) {
       return 'Donate';
     }
@@ -158,31 +139,27 @@ var Signup = function Signup(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_Donate.FormWrapper, null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
     givingType: givingType,
-    changeGivingType: function changeGivingType(data) {
-      return setGivingType(data);
-    },
+    changeGivingType: data => setGivingType(data),
     setPopOpen: setPopOpen,
     mbshipID: mbshipID
   }), popOpen && /*#__PURE__*/_react.default.createElement(_PopUpComponent.default, {
     PopUpText: PopUpText,
     setPopOpen: setPopOpen
   }), /*#__PURE__*/_react.default.createElement(_Donate.Form, {
-    onSubmit: function onSubmit(e) {
-      return submitDonation(e, amountDonate, clientID, cartID, mbshipID, donateLink);
-    }
+    onSubmit: e => submitDonation(e, amountDonate, clientID, cartID, mbshipID, donateLink)
   }, /*#__PURE__*/_react.default.createElement(_Donate.OuterFieldset, null, /*#__PURE__*/_react.default.createElement(_Donate.Legend, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     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(function (_ref2, index) {
-    var value = _ref2.value;
+  }, chooseAmountText || "".concat(noMoneyBuys ? 'Enter' : 'Choose', " an amount to give"))), !noMoneyBuys && /*#__PURE__*/_react.default.createElement(_Donate.MoneyBuys, null, givingData.moneybuys.map((_ref2, index) => {
+    let {
+      value
+    } = _ref2;
     return /*#__PURE__*/_react.default.createElement(_MoneyBuy.default, {
       isSelected: amountDonate === value,
       amount: value.toString(),
       description: "\xA3".concat((0, _Membership.amountFormatter)(value)),
-      setOtherAmount: function setOtherAmount() {
-        return setAmountDonate(value);
-      },
+      setOtherAmount: () => setAmountDonate(value),
       key: value,
       name: "".concat(mbshipID, "--moneyBuy").concat(index + 1),
       id: "".concat(mbshipID, "--moneyBuy-box").concat(index + 1)
@@ -206,9 +183,7 @@ var Signup = function Signup(_ref) {
     pattern: "[^[0-9]+([,.][0-9]+)?$]" // this only applies on submit
     ,
     placeholder: "0.00",
-    onChange: function onChange(e) {
-      return setAmountDonate(e.target.value.trim());
-    },
+    onChange: e => setAmountDonate(e.target.value.trim()),
     "aria-label": "Input a different amount",
     ref: amountRef
   }))), amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Donate.Copy, {