@comicrelief/component-library 7.27.0 → 7.29.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/dist/components/Organisms/Header/Header.md

@@ -116,6 +116,8 @@ import data from './data/data';
 import Link from '../../Atoms/Link/Link';
 import searchIcon from './assets/icon--search--2023.svg';
 import shopIcon from './assets/icon--shop--2023.svg';
+import payinIcon from './assets/PayIn.svg';
+
 import Icon from '../../Atoms/SocialIcons/Icon/Icon';
 import RichText from '../../Atoms/RichText/RichText';
 
@@ -170,6 +172,17 @@ const [success, setSuccess] = React.useState(false);
           tabIndex="0"
         />
       </div>
+      <div>
+        <Icon
+          icon={payinIcon}
+          title="Payin"
+          target="_blank"
+          role="button"
+          href="https://donation.comicrelief.com/?cartId=rnd23-fundraisingpayin"
+          brand="comicrelief"
+          tabIndex="0"
+        />
+      </div>
     </>
   }
 />;

package/dist/components/Organisms/Header/assets/PayIn.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 1H2C1.448 1 1 1.448 1 2V7C1 7.552 1.448 8 2 8H4V19V19.5V22C4 22.552 4.448 23 5 23H19C19.552 23 20 22.552 20 22V19.5V19V8H22C22.552 8 23 7.552 23 7V2C23 1.448 22.552 1 22 1ZM6 21V20.5H18V21H6ZM18 18.5H6V6.0625H18V18.5ZM21 6H20V5.0625C20 4.5105 19.552 4.0625 19 4.0625H5C4.448 4.0625 4 4.5105 4 5.0625V6H3V3H21V6ZM8.293 12.2695C7.9025 11.879 7.9025 11.246 8.293 10.8555L11.2925 7.856C11.339 7.809 11.3905 7.7675 11.446 7.7305C11.4695 7.7145 11.4955 7.704 11.52 7.69C11.5525 7.672 11.5835 7.6525 11.618 7.6385C11.6505 7.625 11.6845 7.6175 11.718 7.6075C11.747 7.599 11.7745 7.588 11.8045 7.582C11.934 7.556 12.067 7.556 12.196 7.582C12.226 7.588 12.2535 7.599 12.2825 7.6075C12.316 7.6175 12.35 7.625 12.3825 7.6385C12.417 7.6525 12.448 7.672 12.4805 7.69C12.5055 7.7035 12.531 7.7145 12.5545 7.7305C12.6095 7.7675 12.661 7.809 12.708 7.856L15.7075 10.8555C16.098 11.246 16.098 11.879 15.7075 12.2695C15.512 12.465 15.2565 12.5625 15.0005 12.5625C14.7445 12.5625 14.489 12.465 14.2935 12.2695L13 10.9765V15.5C13 16.052 12.552 16.5 12 16.5C11.448 16.5 11 16.052 11 15.5V10.9765L9.707 12.2695C9.3165 12.66 8.6835 12.66 8.293 12.2695Z" fill="#222222"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.27.0",
+  "version": "7.29.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 };

package/src/components/Organisms/Header/Header.md

@@ -116,6 +116,8 @@ import data from './data/data';
 import Link from '../../Atoms/Link/Link';
 import searchIcon from './assets/icon--search--2023.svg';
 import shopIcon from './assets/icon--shop--2023.svg';
+import payinIcon from './assets/PayIn.svg';
+
 import Icon from '../../Atoms/SocialIcons/Icon/Icon';
 import RichText from '../../Atoms/RichText/RichText';
 
@@ -170,6 +172,17 @@ const [success, setSuccess] = React.useState(false);
           tabIndex="0"
         />
       </div>
+      <div>
+        <Icon
+          icon={payinIcon}
+          title="Payin"
+          target="_blank"
+          role="button"
+          href="https://donation.comicrelief.com/?cartId=rnd23-fundraisingpayin"
+          brand="comicrelief"
+          tabIndex="0"
+        />
+      </div>
     </>
   }
 />;

package/src/components/Organisms/Header/assets/PayIn.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 1H2C1.448 1 1 1.448 1 2V7C1 7.552 1.448 8 2 8H4V19V19.5V22C4 22.552 4.448 23 5 23H19C19.552 23 20 22.552 20 22V19.5V19V8H22C22.552 8 23 7.552 23 7V2C23 1.448 22.552 1 22 1ZM6 21V20.5H18V21H6ZM18 18.5H6V6.0625H18V18.5ZM21 6H20V5.0625C20 4.5105 19.552 4.0625 19 4.0625H5C4.448 4.0625 4 4.5105 4 5.0625V6H3V3H21V6ZM8.293 12.2695C7.9025 11.879 7.9025 11.246 8.293 10.8555L11.2925 7.856C11.339 7.809 11.3905 7.7675 11.446 7.7305C11.4695 7.7145 11.4955 7.704 11.52 7.69C11.5525 7.672 11.5835 7.6525 11.618 7.6385C11.6505 7.625 11.6845 7.6175 11.718 7.6075C11.747 7.599 11.7745 7.588 11.8045 7.582C11.934 7.556 12.067 7.556 12.196 7.582C12.226 7.588 12.2535 7.599 12.2825 7.6075C12.316 7.6175 12.35 7.625 12.3825 7.6385C12.417 7.6525 12.448 7.672 12.4805 7.69C12.5055 7.7035 12.531 7.7145 12.5545 7.7305C12.6095 7.7675 12.661 7.809 12.708 7.856L15.7075 10.8555C16.098 11.246 16.098 11.879 15.7075 12.2695C15.512 12.465 15.2565 12.5625 15.0005 12.5625C14.7445 12.5625 14.489 12.465 14.2935 12.2695L13 10.9765V15.5C13 16.052 12.552 16.5 12 16.5C11.448 16.5 11 16.052 11 15.5V10.9765L9.707 12.2695C9.3165 12.66 8.6835 12.66 8.293 12.2695Z" fill="#222222"/>
+</svg>