@comicrelief/component-library 7.27.0 → 7.28.0

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

@@ -12,6 +12,7 @@ var _size = require("../../../theme/shared/size");
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Form = _interopRequireDefault(require("./Form/Form"));
+var _utils = require("./_utils");
 var _Donate = require("./Donate.style");
 const Donate = _ref => {
   let {
@@ -43,7 +44,12 @@ const Donate = _ref => {
     otherAmountValue,
     additionalSingleCopy,
     additionalMonthlyCopy,
-    defaultGivingType
+    defaultGivingType,
+    monthlyTitle,
+    monthlySubtitle,
+    // Just to keep the function call character length under control
+    monthlyChooseAmountText: monthlyChoose,
+    monthlyOtherAmountText: monthlyOther
   } = _ref;
   let isDesktop = (0, _reactResponsive.useMediaQuery)({
     query: "(min-width: ".concat(_size.screen.medium, ")")
@@ -51,6 +57,7 @@ const Donate = _ref => {
 
   // To let us store any updated override, and force a re-render
   const [overrideValue, setOverrideValue] = (0, _react.useState)(null);
+  const [givingType, setGivingType] = (0, _react.useState)();
 
   // Store the updated override value
   (0, _react.useEffect)(() => {
@@ -59,6 +66,17 @@ const Donate = _ref => {
 
   // If a boolean value has been passed, let it replace our 'internal' value
   isDesktop = overrideValue !== null ? overrideValue : isDesktop;
+
+  // Handy helper functions to process copy, based on givingType
+  const {
+    showCopy,
+    thisTitle,
+    thisSubtitle
+  } = (0, _utils.handleTitles)(givingType, title, subtitle, monthlyTitle, monthlySubtitle);
+  const {
+    thisOtherAmountText,
+    thisChooseAmountText
+  } = (0, _utils.handleCopy)(givingType, otherAmountText, chooseAmountText, monthlyOther, monthlyChoose);
   return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
     mobileBackgroundColor: mobileBackgroundColor,
     desktopOverlayColor: desktopOverlayColor,
@@ -88,32 +106,34 @@ const Donate = _ref => {
     "aria-live": "polite"
   }, /*#__PURE__*/_react.default.createElement(_Donate.Header, {
     formAlignRight: formAlignRight
-  }, /*#__PURE__*/_react.default.createElement(_Donate.HeaderInner, null, Boolean(subtitle) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Boolean(title) && /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Donate.HeaderInner, null, showCopy && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h2",
     color: textColor,
     size: "big",
     family: "Anton",
     weight: "normal",
     uppercase: true
-  }, title), /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, thisTitle), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
     color: textColor,
     size: "m"
-  }, subtitle)))), /*#__PURE__*/_react.default.createElement(_Form.default, {
+  }, thisSubtitle)))), /*#__PURE__*/_react.default.createElement(_Form.default, {
     data: data,
-    otherAmountText: otherAmountText,
+    otherAmountText: thisOtherAmountText,
     cartID: cartID,
     clientID: clientID,
     mbshipID: mbshipID,
     donateLink: donateLink,
     noMoneyBuys: noMoneyBuys,
     PopUpText: PopUpText,
-    chooseAmountText: chooseAmountText,
+    chooseAmountText: thisChooseAmountText,
     submitButtonColor: submitButtonColor,
     otherAmountValue: otherAmountValue,
     additionalSingleCopy: additionalSingleCopy,
     additionalMonthlyCopy: additionalMonthlyCopy,
-    defaultGivingType: defaultGivingType
+    defaultGivingType: defaultGivingType,
+    givingType: givingType,
+    changeGivingType: setGivingType
   })));
 };
 Donate.defaultProps = {
@@ -142,6 +162,10 @@ Donate.defaultProps = {
   title: null,
   additionalSingleCopy: null,
   additionalMonthlyCopy: null,
-  defaultGivingType: null
+  defaultGivingType: null,
+  monthlyTitle: null,
+  monthlySubtitle: null,
+  monthlyChooseAmountText: null,
+  monthlyOtherAmountText: null
 };
 var _default = exports.default = Donate;

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

@@ -513,7 +513,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-15"
+  mbshipID="mship-16"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -521,4 +521,99 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   subtitle="Please help us fund life-changing projects in the UK and around the world."
   noMoneyBuys
 />;
+```
+
+## Monthly 'Choose Amount' and 'Other Amount' copy overrides
+
+```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-17"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Standard title here"
+  subtitle="Standard subtitle here"
+  otherAmountText="Here's an otherAmountText override"
+  chooseAmountText="Here's an chooseAmountText override"
+  monthlyChooseAmountText="monthlyChooseAmountText here"
+  monthlyOtherAmountText="monthlyOtherAmountText here"
+/>;
+```
+
+## Monthly Title and Subtitle overrides
+
+```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-18"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Standard title here"
+  subtitle="Standard subtitle here"
+  otherAmountText="Here's an otherAmountText override"
+  chooseAmountText="Here's an chooseAmountText override"
+  monthlyTitle="Monthly Title here"
+  monthlySubtitle="Monthly Subtitle here"
+/>;
+```
+
+## All monthly overrides
+
+```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-19"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Standard title here"
+  subtitle="Standard subtitle here"
+  otherAmountText="Here's an otherAmountText override"
+  chooseAmountText="Here's an chooseAmountText override"
+  monthlyTitle="Monthly Title here"
+  monthlySubtitle="Monthly Subtitle here"
+  monthlyChooseAmountText="monthlyChooseAmountText here"
+  monthlyOtherAmountText="monthlyOtherAmountText here"
+/>;
 ```

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

@@ -32,9 +32,13 @@ const Signup = _ref => {
     additionalSingleCopy,
     additionalMonthlyCopy,
     defaultGivingType,
+    monthlyChooseAmountCopy,
+    monthlyOtherAmountCopy,
+    changeGivingType,
+    givingType,
     ...rest
   } = _ref;
-  const [givingType, setGivingType] = (0, _react.useState)();
+  // const [givingType, setGivingType] = useState();
   const [errorMsg, setErrorMsg] = (0, _react.useState)(false);
   const [amountDonate, setAmountDonate] = (0, _react.useState)(10);
   const [moneyBuyCopy, setMoneyBuyCopy] = (0, _react.useState)(true);
@@ -55,7 +59,9 @@ const Signup = _ref => {
       const thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
       setAmountDonate(thisAmount);
     }
-  }, [givingType, singleGiving, regularGiving, otherAmountValue]);
+    // Pass givingType up to parent for copy-switching logic:
+    changeGivingType(givingType);
+  }, [givingType, singleGiving, regularGiving, otherAmountValue, changeGivingType]);
   (0, _react.useEffect)(() => {
     if (givingType) {
       const givingData = givingType === 'single' ? singleGiving : regularGiving;
@@ -84,13 +90,15 @@ const Signup = _ref => {
 
   // On load, determine what should actually be the default giving type
   (0, _react.useEffect)(() => {
+    let newGivingType;
     // Use any explicit setting
     if (defaultGivingType) {
-      setGivingType(defaultGivingType);
+      newGivingType = defaultGivingType;
     } else {
       // Else, use whatever's available
-      setGivingType(singleGiving !== null ? 'single' : 'monthly');
+      newGivingType = singleGiving !== null ? 'single' : 'monthly';
     }
+    changeGivingType(newGivingType);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const submitDonation = (event, amount, clientId, cartId, mbshipId, donateURL) => {
@@ -159,7 +167,7 @@ const Signup = _ref => {
   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),
+    changeGivingType: data => changeGivingType(data),
     setPopOpen: setPopOpen,
     mbshipID: mbshipID
   }), popOpen && /*#__PURE__*/_react.default.createElement(_PopUpComponent.default, {

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

@@ -432,6 +432,10 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   }
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     padding: 4rem 1rem;
@@ -1718,6 +1722,14 @@ exports[`Single donation renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+
+}
+
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:1024px) {
   .c2 {
     width: 50%;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleTitles = exports.handleCopy = void 0;
+const handleTitles = (givingType, title, subtitle, monthlyTitle, monthlySubtitle) => {
+  let thisTitle;
+  let thisSubtitle;
+  const showMonthlyCopy = givingType === 'monthly' && Boolean(monthlySubtitle) && Boolean(monthlyTitle);
+  // Overall flag as to whether we render copy *at all*
+  const showCopy = showMonthlyCopy || Boolean(subtitle) && Boolean(title);
+
+  // Apply the override if we've got monthly content AND giving type:
+  if (showMonthlyCopy) {
+    thisTitle = monthlyTitle;
+    thisSubtitle = monthlyTitle;
+  } else if (showCopy) {
+    // Else, fall back to the default, after checking it's appropriate
+    thisTitle = title;
+    thisSubtitle = subtitle;
+  }
+  return {
+    showCopy,
+    thisTitle,
+    thisSubtitle
+  };
+};
+exports.handleTitles = handleTitles;
+const handleCopy = (gType, otherAmount, chooseAmount, monthlyOtherAmount, monthlyChooseAmount) => {
+  // Only use any monthly overrides for the appropriate givingType
+  const thisOtherAmountText = gType === 'monthly' && Boolean(monthlyOtherAmount) ? monthlyOtherAmount : otherAmount;
+  const thisChooseAmountText = gType === 'monthly' && Boolean(monthlyChooseAmount) ? monthlyChooseAmount : chooseAmount;
+  return {
+    thisOtherAmountText,
+    thisChooseAmountText
+  };
+};
+exports.handleCopy = handleCopy;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.27.0",
+  "version": "7.28.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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

@@ -6,6 +6,8 @@ import { screen } from '../../../theme/shared/size';
 import Text from '../../Atoms/Text/Text';
 import Picture from '../../Atoms/Picture/Picture';
 import Form from './Form/Form';
+import { handleTitles, handleCopy } from './_utils';
+
 import {
   BgImage,
   Container,
@@ -43,12 +45,18 @@ const Donate = ({
   otherAmountValue,
   additionalSingleCopy,
   additionalMonthlyCopy,
-  defaultGivingType
+  defaultGivingType,
+  monthlyTitle,
+  monthlySubtitle,
+  // Just to keep the function call character length under control
+  monthlyChooseAmountText: monthlyChoose,
+  monthlyOtherAmountText: monthlyOther
 }) => {
   let isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
 
   // To let us store any updated override, and force a re-render
   const [overrideValue, setOverrideValue] = useState(null);
+  const [givingType, setGivingType] = useState();
 
   // Store the updated override value
   useEffect(() => {
@@ -58,6 +66,18 @@ const Donate = ({
   // If a boolean value has been passed, let it replace our 'internal' value
   isDesktop = overrideValue !== null ? overrideValue : isDesktop;
 
+  // Handy helper functions to process copy, based on givingType
+  const {
+    showCopy,
+    thisTitle,
+    thisSubtitle
+  } = handleTitles(givingType, title, subtitle, monthlyTitle, monthlySubtitle);
+
+  const {
+    thisOtherAmountText,
+    thisChooseAmountText
+  } = handleCopy(givingType, otherAmountText, chooseAmountText, monthlyOther, monthlyChoose);
+
   return (
     <Container
       mobileBackgroundColor={mobileBackgroundColor}
@@ -95,9 +115,8 @@ const Donate = ({
       <Wrapper formAlignRight={formAlignRight} aria-live="polite">
         <Header formAlignRight={formAlignRight}>
           <HeaderInner>
-            {Boolean(subtitle) && (
+            {showCopy && (
               <>
-                {Boolean(title) && (
                 <Text
                   tag="h2"
                   color={textColor}
@@ -106,12 +125,10 @@ const Donate = ({
                   weight="normal"
                   uppercase
                 >
-                  {title}
+                  {thisTitle}
                 </Text>
-                )}
-
                 <Text tag="p" color={textColor} size="m">
-                  {subtitle}
+                  {thisSubtitle}
                 </Text>
               </>
             )}
@@ -120,19 +137,21 @@ const Donate = ({
 
         <Form
           data={data}
-          otherAmountText={otherAmountText}
+          otherAmountText={thisOtherAmountText}
           cartID={cartID}
           clientID={clientID}
           mbshipID={mbshipID}
           donateLink={donateLink}
           noMoneyBuys={noMoneyBuys}
           PopUpText={PopUpText}
-          chooseAmountText={chooseAmountText}
+          chooseAmountText={thisChooseAmountText}
           submitButtonColor={submitButtonColor}
           otherAmountValue={otherAmountValue}
           additionalSingleCopy={additionalSingleCopy}
           additionalMonthlyCopy={additionalMonthlyCopy}
           defaultGivingType={defaultGivingType}
+          givingType={givingType}
+          changeGivingType={setGivingType}
         />
       </Wrapper>
     </Container>
@@ -168,7 +187,11 @@ Donate.propTypes = {
   otherAmountValue: PropTypes.number,
   additionalSingleCopy: PropTypes.string,
   additionalMonthlyCopy: PropTypes.string,
-  defaultGivingType: PropTypes.string
+  defaultGivingType: PropTypes.string,
+  monthlyTitle: PropTypes.string,
+  monthlySubtitle: PropTypes.string,
+  monthlyChooseAmountText: PropTypes.string,
+  monthlyOtherAmountText: PropTypes.string
 };
 
 Donate.defaultProps = {
@@ -198,7 +221,11 @@ Donate.defaultProps = {
   title: null,
   additionalSingleCopy: null,
   additionalMonthlyCopy: null,
-  defaultGivingType: null
+  defaultGivingType: null,
+  monthlyTitle: null,
+  monthlySubtitle: null,
+  monthlyChooseAmountText: null,
+  monthlyOtherAmountText: null
 };
 
 export default Donate;

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

@@ -513,7 +513,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-15"
+  mbshipID="mship-16"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -521,4 +521,99 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   subtitle="Please help us fund life-changing projects in the UK and around the world."
   noMoneyBuys
 />;
+```
+
+## Monthly 'Choose Amount' and 'Other Amount' copy overrides
+
+```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-17"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Standard title here"
+  subtitle="Standard subtitle here"
+  otherAmountText="Here's an otherAmountText override"
+  chooseAmountText="Here's an chooseAmountText override"
+  monthlyChooseAmountText="monthlyChooseAmountText here"
+  monthlyOtherAmountText="monthlyOtherAmountText here"
+/>;
+```
+
+## Monthly Title and Subtitle overrides
+
+```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-18"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Standard title here"
+  subtitle="Standard subtitle here"
+  otherAmountText="Here's an otherAmountText override"
+  chooseAmountText="Here's an chooseAmountText override"
+  monthlyTitle="Monthly Title here"
+  monthlySubtitle="Monthly Subtitle here"
+/>;
+```
+
+## All monthly overrides
+
+```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-19"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Standard title here"
+  subtitle="Standard subtitle here"
+  otherAmountText="Here's an otherAmountText override"
+  chooseAmountText="Here's an chooseAmountText override"
+  monthlyTitle="Monthly Title here"
+  monthlySubtitle="Monthly Subtitle here"
+  monthlyChooseAmountText="monthlyChooseAmountText here"
+  monthlyOtherAmountText="monthlyOtherAmountText here"
+/>;
 ```

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

@@ -41,9 +41,13 @@ const Signup = ({
   additionalSingleCopy,
   additionalMonthlyCopy,
   defaultGivingType,
+  monthlyChooseAmountCopy,
+  monthlyOtherAmountCopy,
+  changeGivingType,
+  givingType,
   ...rest
 }) => {
-  const [givingType, setGivingType] = useState();
+  // const [givingType, setGivingType] = useState();
   const [errorMsg, setErrorMsg] = useState(false);
   const [amountDonate, setAmountDonate] = useState(10);
   const [moneyBuyCopy, setMoneyBuyCopy] = useState(true);
@@ -68,7 +72,9 @@ const Signup = ({
 
       setAmountDonate(thisAmount);
     }
-  }, [givingType, singleGiving, regularGiving, otherAmountValue]);
+    // Pass givingType up to parent for copy-switching logic:
+    changeGivingType(givingType);
+  }, [givingType, singleGiving, regularGiving, otherAmountValue, changeGivingType]);
 
   useEffect(() => {
     if (givingType) {
@@ -115,13 +121,16 @@ const Signup = ({
 
   // On load, determine what should actually be the default giving type
   useEffect(() => {
+    let newGivingType;
     // Use any explicit setting
     if (defaultGivingType) {
-      setGivingType(defaultGivingType);
+      newGivingType = defaultGivingType;
     } else {
       // Else, use whatever's available
-      setGivingType(singleGiving !== null ? 'single' : 'monthly');
+      newGivingType = singleGiving !== null ? 'single' : 'monthly';
     }
+
+    changeGivingType(newGivingType);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -217,7 +226,7 @@ const Signup = ({
       {showGivingSelector && (
         <GivingSelector
           givingType={givingType}
-          changeGivingType={data => setGivingType(data)}
+          changeGivingType={data => changeGivingType(data)}
           setPopOpen={setPopOpen}
           mbshipID={mbshipID}
         />
@@ -333,7 +342,11 @@ Signup.propTypes = {
   otherAmountValue: PropTypes.number,
   additionalSingleCopy: PropTypes.string,
   additionalMonthlyCopy: PropTypes.string,
-  defaultGivingType: PropTypes.string
+  defaultGivingType: PropTypes.string,
+  monthlyChooseAmountCopy: PropTypes.string.isRequired,
+  monthlyOtherAmountCopy: PropTypes.string.isRequired,
+  changeGivingType: PropTypes.func.isRequired,
+  givingType: PropTypes.string.isRequired
 };
 
 Signup.defaultProps = {

package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -432,6 +432,10 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   }
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     padding: 4rem 1rem;
@@ -1718,6 +1722,14 @@ exports[`Single donation renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+
+}
+
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:1024px) {
   .c2 {
     width: 50%;

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

@@ -0,0 +1,28 @@
+const handleTitles = (givingType, title, subtitle, monthlyTitle, monthlySubtitle) => {
+  let thisTitle; let thisSubtitle;
+  const showMonthlyCopy = givingType === 'monthly' && Boolean(monthlySubtitle) && Boolean(monthlyTitle);
+  // Overall flag as to whether we render copy *at all*
+  const showCopy = showMonthlyCopy || (Boolean(subtitle) && Boolean(title));
+
+  // Apply the override if we've got monthly content AND giving type:
+  if (showMonthlyCopy) {
+    thisTitle = monthlyTitle;
+    thisSubtitle = monthlyTitle;
+  } else if (showCopy) {
+    // Else, fall back to the default, after checking it's appropriate
+    thisTitle = title;
+    thisSubtitle = subtitle;
+  }
+
+  return { showCopy, thisTitle, thisSubtitle };
+};
+
+const handleCopy = (gType, otherAmount, chooseAmount, monthlyOtherAmount, monthlyChooseAmount) => {
+  // Only use any monthly overrides for the appropriate givingType
+  const thisOtherAmountText = (gType === 'monthly' && Boolean(monthlyOtherAmount) ? monthlyOtherAmount : otherAmount);
+  const thisChooseAmountText = (gType === 'monthly' && Boolean(monthlyChooseAmount) ? monthlyChooseAmount : chooseAmount);
+
+  return { thisOtherAmountText, thisChooseAmountText };
+};
+
+export { handleTitles, handleCopy };