@comicrelief/component-library 8.25.8 → 8.27.0

package/dist/components/Molecules/VideoBanner/VideoBanner.test.js

@@ -12,5 +12,22 @@ it("renders correctly", () => {
     poster: _VideoBannerPosterImage.default,
     video: src
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      width: 100%;\n      height: 100%;\n    }\n\n    <video\n      className=\"c0\"\n      controls={false}\n      loop={false}\n      muted={true}\n      playsInline={true}\n      poster=\"mock.asset\"\n      src=\"https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4\"\n    >\n      Your browser does not support video.\n    </video>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c0 {
+      width: 100%;
+      height: 100%;
+    }
+
+    <video
+      className="c0"
+      controls={false}
+      loop={false}
+      muted={true}
+      playsInline={true}
+      poster="mock.asset"
+      src="https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4"
+    >
+      Your browser does not support video.
+    </video>
+  `);
 });

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

@@ -17,5 +17,185 @@ it('renders correctly', () => {
     },
     cookiePolicyUrl: "https://www.comicrelief.com/cookies-policy"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      color: #FFFFFF;\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c3 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n      font-weight: normal;\n    }\n\n    .c3:hover {\n      color: #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n    }\n\n    .c5 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      position: relative;\n      padding: 0.5rem 1.25rem;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      font-weight: 700;\n      font-size: 1rem;\n      border-radius: 2rem;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      height: 3.125rem;\n      width: 100%;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      cursor: pointer;\n      background-color: #FFFFFF;\n      color: #000000;\n    }\n\n    .c5:hover {\n      background-color: #969598;\n      color: #000000;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      position: relative;\n      padding: 1rem;\n      background: #2C0230;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      z-index: 3;\n    }\n\n    .c2 {\n      line-height: 1.5;\n      margin: 0;\n    }\n\n    .c2:first-of-type {\n      margin-bottom: 0.5rem;\n    }\n\n    .c6 {\n      padding: 0.5rem 1rem;\n      display: block;\n      margin-bottom: 10px;\n    }\n\n    .c4 {\n      color: #FFFFFF;\n      padding: 0 0.25rem 1px;\n      border-bottom: 2px solid;\n    }\n\n    @media (min-width:740px) {\n      .c5 {\n        width: auto;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c5 {\n        background-color: #FFFFFF;\n        color: #000000;\n      }\n\n      .c5:hover {\n        background-color: #969598;\n        color: #000000;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        width: 75%;\n        margin: 0 auto;\n      }\n\n      .c2:first-of-type {\n        margin-bottom: 1rem;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        margin: 0 0.25rem 0 0;\n        display: inline-block;\n      }\n    }\n\n    <div\n      className=\"c0\"\n    >\n      <p\n        className=\"c1 c2\"\n        color=\"white\"\n        size=\"s\"\n      >\n        Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about\n        <a\n          className=\"c3 c4\"\n          color=\"red\"\n          href=\"https://www.comicrelief.com/cookies-policy\"\n          target=\"_self\"\n          type=\"standard_white\"\n        >\n          our use of cookies\n        </a>\n        . We also use optional cookies for marketing purposes:\n      </p>\n      <p\n        className=\"c1 c2\"\n        color=\"white\"\n        size=\"s\"\n      >\n        <a\n          className=\"c5 c6\"\n          color=\"white\"\n          href=\"/comic\"\n          onClick={[Function]}\n          target=\"_self\"\n          type=\"button\"\n        >\n          Accept\n        </a>\n        Or click\n        <a\n          className=\"c3 c4\"\n          color=\"red\"\n          href=\"\"\n          onClick={[Function]}\n          target=\"_self\"\n          type=\"standard_white\"\n        >\n          here\n        </a>\n        to deny these.\n      </p>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c1 {
+      color: #FFFFFF;
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c3 {
+      position: relative;
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      display: inline;
+      line-height: 1.5rem;
+      color: #FFFFFF;
+      border-bottom: 2px solid #FFFFFF;
+      font-weight: normal;
+    }
+
+    .c3:hover {
+      color: #FFFFFF;
+      border-bottom: 2px solid #FFFFFF;
+    }
+
+    .c5 {
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      position: relative;
+      padding: 0.5rem 1.25rem;
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      font-weight: 700;
+      font-size: 1rem;
+      border-radius: 2rem;
+      -webkit-transition: all 0.3s;
+      transition: all 0.3s;
+      height: 3.125rem;
+      width: 100%;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      cursor: pointer;
+      background-color: #FFFFFF;
+      color: #000000;
+    }
+
+    .c5:hover {
+      background-color: #969598;
+      color: #000000;
+    }
+
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      position: relative;
+      padding: 1rem;
+      background: #2C0230;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      z-index: 3;
+    }
+
+    .c2 {
+      line-height: 1.5;
+      margin: 0;
+    }
+
+    .c2:first-of-type {
+      margin-bottom: 0.5rem;
+    }
+
+    .c6 {
+      padding: 0.5rem 1rem;
+      display: block;
+      margin-bottom: 10px;
+    }
+
+    .c4 {
+      color: #FFFFFF;
+      padding: 0 0.25rem 1px;
+      border-bottom: 2px solid;
+    }
+
+    @media (min-width:740px) {
+      .c5 {
+        width: auto;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c5 {
+        background-color: #FFFFFF;
+        color: #000000;
+      }
+
+      .c5:hover {
+        background-color: #969598;
+        color: #000000;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c2 {
+        width: 75%;
+        margin: 0 auto;
+      }
+
+      .c2:first-of-type {
+        margin-bottom: 1rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c6 {
+        margin: 0 0.25rem 0 0;
+        display: inline-block;
+      }
+    }
+
+    <div
+      className="c0"
+    >
+      <p
+        className="c1 c2"
+        color="white"
+        size="s"
+      >
+        Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about
+        <a
+          className="c3 c4"
+          color="red"
+          href="https://www.comicrelief.com/cookies-policy"
+          target="_self"
+          type="standard_white"
+        >
+          our use of cookies
+        </a>
+        . We also use optional cookies for marketing purposes:
+      </p>
+      <p
+        className="c1 c2"
+        color="white"
+        size="s"
+      >
+        <a
+          className="c5 c6"
+          color="white"
+          href="/comic"
+          onClick={[Function]}
+          target="_self"
+          type="button"
+        >
+          Accept
+        </a>
+        Or click
+        <a
+          className="c3 c4"
+          color="red"
+          href=""
+          onClick={[Function]}
+          target="_self"
+          type="standard_white"
+        >
+          here
+        </a>
+        to deny these.
+      </p>
+    </div>
+  `);
 });

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

@@ -52,7 +52,7 @@ const Donate = _ref => {
     monthlyOtherAmountText: monthlyOther = ''
   } = _ref;
   let isDesktop = (0, _reactResponsive.useMediaQuery)({
-    query: "(min-width: ".concat(_allBreakpoints.breakpointValues.L, "px)")
+    query: `(min-width: ${_allBreakpoints.breakpointValues.L}px)`
   });
 
   // To let us store any updated override, and force a re-render

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

@@ -45,7 +45,9 @@ const BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.defaul
   let {
     backgroundColor
   } = _ref4;
-  return backgroundColor !== 'transparent' && "\n    opacity: 0.4;\n  ";
+  return backgroundColor !== 'transparent' && `
+    opacity: 0.4;
+  `;
 });
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Wrapper",

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

@@ -157,9 +157,9 @@ const Signup = _ref => {
       return 'Donate';
     }
     if (givingType === 'single') {
-      return "Donate \xA3".concat(amountDonate, " now");
+      return `Donate £${amountDonate} now`;
     }
-    return "Donate \xA3".concat(amountDonate, " monthly");
+    return `Donate £${amountDonate} monthly`;
   };
   const showAdditionalSingleCopy = givingType === 'single' && additionalSingleCopy;
   const showAdditionalMonthlyCopy = givingType === 'monthly' && additionalMonthlyCopy;
@@ -178,18 +178,18 @@ const Signup = _ref => {
     tag: "span",
     size: "l",
     weight: "bold"
-  }, chooseAmountText || "".concat(noMoneyBuys ? 'Enter' : 'Choose', " an amount to give"))), !noMoneyBuys && givingType && /*#__PURE__*/_react.default.createElement(_Donate.MoneyBuys, null, givingData.moneybuys.map((_ref2, index) => {
+  }, chooseAmountText || `${noMoneyBuys ? 'Enter' : 'Choose'} an amount to give`)), !noMoneyBuys && givingType && /*#__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)),
+      description: `£${(0, _Membership.amountFormatter)(value)}`,
       setOtherAmount: () => setAmountDonate(value),
       key: value,
-      name: "".concat(mbshipID, "--moneyBuy").concat(index + 1),
-      id: "".concat(mbshipID, "--moneyBuy-box").concat(index + 1)
+      name: `${mbshipID}--moneyBuy${index + 1}`,
+      id: `${mbshipID}--moneyBuy-box${index + 1}`
     });
   })), /*#__PURE__*/_react.default.createElement(_Donate.FormFieldset, null, !noMoneyBuys && /*#__PURE__*/_react.default.createElement(_Donate.Label, {
     size: "s",
@@ -201,7 +201,7 @@ const Signup = _ref => {
     inputBorderColor: (0, _Membership.isAmountValid)(amountDonate) === false,
     label: "\xA3",
     errorMsg: "",
-    id: "".concat(mbshipID, "--MoneyBuy-userInput"),
+    id: `${mbshipID}--MoneyBuy-userInput`,
     showLabel: true
   }, rest, {
     max: "25000",
@@ -215,7 +215,7 @@ const Signup = _ref => {
     ref: amountRef
   }))), amountDonate >= 1 && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Donate.Copy, {
     as: "p"
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate, " ")), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
+  }, /*#__PURE__*/_react.default.createElement("strong", null, `£${amountDonate} `), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
     className: "error--amount",
     tag: "p"
   }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), additionalCopy && /*#__PURE__*/_react.default.createElement("p", {

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

@@ -24,7 +24,7 @@ const GivingSelector = _ref => {
   return /*#__PURE__*/_react.default.createElement(_GivingSelector.Wrapper, null, /*#__PURE__*/_react.default.createElement(_GivingSelector.MoneyBox, null, /*#__PURE__*/_react.default.createElement("input", {
     className: "give-once",
     "aria-label": "Single",
-    id: "give-once--".concat(mbshipID),
+    id: `give-once--${mbshipID}`,
     value: "Single",
     type: "radio",
     label: "",
@@ -32,11 +32,11 @@ const GivingSelector = _ref => {
     onChange: () => handleGivingTypeChange('single', givingType)
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'single',
-    htmlFor: "give-once--".concat(mbshipID)
+    htmlFor: `give-once--${mbshipID}`
   }, "Single"), /*#__PURE__*/_react.default.createElement("input", {
     className: "give-monthly",
     "aria-label": "Monthly",
-    id: "give-monthly--".concat(mbshipID),
+    id: `give-monthly--${mbshipID}`,
     value: "Monthly",
     type: "radio",
     label: "",
@@ -44,7 +44,7 @@ const GivingSelector = _ref => {
     onChange: () => handleGivingTypeChange('monthly', givingType)
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'monthly',
-    htmlFor: "give-monthly--".concat(mbshipID)
+    htmlFor: `give-monthly--${mbshipID}`
   }, "Monthly"), /*#__PURE__*/_react.default.createElement(_GivingSelector.Switch, null)));
 };
 var _default = exports.default = GivingSelector;

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

@@ -74,7 +74,7 @@ const MoneyBuy = _ref11 => {
   } = _ref11;
   return /*#__PURE__*/_react.default.createElement(MoneyBuyButton, Object.assign({}, rest, {
     "aria-label": description,
-    value: "".concat(currency, " ").concat(amount),
+    value: `${currency} ${amount}`,
     type: "button",
     label: "",
     errorMsg: "",

package/dist/components/Organisms/Footer/Footer.js

@@ -33,7 +33,7 @@ const Footer = _ref => {
     campaign: campaignName
   })), /*#__PURE__*/_react.default.createElement(_Footer.Brand, {
     href: "/",
-    title: "Go to ".concat(campaign, " homepage")
+    title: `Go to ${campaign} homepage`
   }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
     sizeSm: "48px",
     sizeMd: "72px",

package/dist/components/Organisms/Footer/Nav/Nav.js

@@ -63,7 +63,7 @@ const FooterNav = _ref => {
     role: "menubar"
   }, menuGroups.map((group, index) => /*#__PURE__*/_react.default.createElement(_Nav.NavItem, {
     role: "none",
-    key: "".concat(group.id, "-").concat(group.title),
+    key: `${group.id}-${group.title}`,
     index: index,
     isSubMenuOpen: !!isSubMenuOpen[group.id]
   }, !isSmallBreakpoint ? /*#__PURE__*/_react.default.createElement(_Text.default, {

package/dist/components/Organisms/Header/HeaderNav/HeaderNav.js

@@ -102,7 +102,7 @@ const HeaderNav = _ref => {
     // on mobile, a clickable LINK on desktop but hover to reveal the submenu
     return /*#__PURE__*/_react.default.createElement(_HeaderNav.NavItem, {
       role: "none",
-      key: "".concat(thisID, "-item"),
+      key: `${thisID}-item`,
       index: index,
       isSubMenuOpen: !!isSubMenuOpen[thisID]
     }, isNotDesktop ? /*#__PURE__*/_react.default.createElement(_HeaderNav.NavLink, {
@@ -114,7 +114,7 @@ const HeaderNav = _ref => {
       onClick: hasPopUp ? e => toggleSubMenu(e, thisID) : null,
       onKeyUp: keyPressed(group.title),
       role: "button",
-      key: "".concat(thisID, "-link")
+      key: `${thisID}-link`
     }, thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_HeaderNav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
       src: _MenuGroupIcon.default,
       alt: "chevron down icon"

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js

@@ -144,7 +144,7 @@ const HeaderNav2025 = _ref => {
     // on mobile, a clickable LINK on desktop but hover to reveal the submenu:
     return /*#__PURE__*/_react.default.createElement(_HeaderNavItem.default, {
       thisID: thisID,
-      key: "".concat(thisID, "--item"),
+      key: `${thisID}--item`,
       index: index,
       hasSubMenu: hasSubMenu,
       openedSubMenu: openedSubMenu,

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNavItem2025.js

@@ -28,7 +28,7 @@ const HeaderNavItem2025 = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_HeaderNav.NavItem, {
     role: "none",
-    key: "".concat(index, "-").concat(thisID, "--item"),
+    key: `${index}-${thisID}--item`,
     index: index,
     isSubMenuOpen: !!openedSubMenu
   }, isNotDesktop ? /*#__PURE__*/_react.default.createElement(_HeaderNav.NavLink, {
@@ -39,7 +39,7 @@ const HeaderNavItem2025 = _ref => {
     "aria-haspopup": hasPopUp,
     onClick: hasPopUp ? e => toggleSubMenu(e, thisID) : null,
     role: "button",
-    key: "".concat(index, "-").concat(thisID, "--link"),
+    key: `${index}-${thisID}--link`,
     isExpanded: !!openedSubMenu[thisID]
   }, thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_HeaderNav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
     src: _MenuGroupIcon.default,
@@ -49,7 +49,7 @@ const HeaderNavItem2025 = _ref => {
     inline: true,
     rel: relNoopener,
     "aria-haspopup": hasPopUp,
-    key: "".concat(index, "-").concat(thisID),
+    key: `${index}-${thisID}`,
     hasSubMenu: hasSubMenu
   }, rest), thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_HeaderNav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
     src: _MenuGroupIcon.default,
@@ -57,7 +57,7 @@ const HeaderNavItem2025 = _ref => {
   })))), hasSubMenu && /*#__PURE__*/_react.default.createElement(_HeaderNav.SubNavMenu, {
     role: "list",
     isSubMenuOpen: !!openedSubMenu[thisID],
-    key: "".concat(index, "-").concat(thisID, "--sub-item")
+    key: `${index}-${thisID}--sub-item`
   }, group.links.map((child, childIndex) => {
     let thisSubUrl = navHelper(child);
     thisSubUrl = internalLinkHelper(thisSubUrl);
@@ -68,7 +68,7 @@ const HeaderNavItem2025 = _ref => {
 
     // Otherwise, render out as usual:
     return /*#__PURE__*/_react.default.createElement(_HeaderNav.SubNavItem, {
-      key: "".concat(index, "-").concat(thisSubUrl)
+      key: `${index}-${thisSubUrl}`
     }, /*#__PURE__*/_react.default.createElement(_HeaderNav.SubNavLink, {
       href: thisSubUrl,
       inline: true,

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

@@ -11,7 +11,7 @@ var _Button = _interopRequireDefault(require("../../Atoms/Button/Button"));
 const OuterWrapper = exports.OuterWrapper = _styledComponents.default.div.withConfig({
   displayName: "ImpactSliderstyle__OuterWrapper",
   componentId: "sc-1fpimol-0"
-})(["position:relative;max-width:100%;background-color:", ";padding:32px 16px;@media ", "{padding:50px;}@media ", "{padding:64px 0;}"], props => props.theme.color("".concat(props.backgroundColour)), _ref => {
+})(["position:relative;max-width:100%;background-color:", ";padding:32px 16px;@media ", "{padding:50px;}@media ", "{padding:64px 0;}"], props => props.theme.color(`${props.backgroundColour}`), _ref => {
   let {
     theme
   } = _ref;

package/dist/components/Organisms/ImpactSlider/_ImpactMoneybuys.js

@@ -20,7 +20,7 @@ const Moneybuys = _ref => {
       key: item.poundsPerItem
     }, /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.Moneybuy, {
       isInactive: isInactive,
-      "data-testid": "impact-slider--moneybuy-".concat(index + 1)
+      "data-testid": `impact-slider--moneybuy-${index + 1}`
     }, /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.MoneybuyImage, {
       imageURL: item.imageURL
     }), /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.MoneybuyAmount, {

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 const getUrlParameter = name => {
   const text = name.replace(/\[]/, '\\[').replace(/[\]]/, '\\]');
-  const regex = new RegExp("[\\?&]".concat(text, "=([^&#]*)"));
+  const regex = new RegExp(`[\\?&]${text}=([^&#]*)`);
   const results = regex.exec(window.location.search);
   const param = results === null ? 'generic' : decodeURIComponent(results[1].replace(/\+/g, ' '));
   return param;
@@ -19,7 +19,7 @@ const handleSubmission = (amount, donateLink, cartID, rowID) => {
     const thisMatch = currentpageUrl.match(reg)[0];
     currentpageUrl = currentpageUrl.substring(0, currentpageUrl.indexOf(thisMatch));
   }
-  const forwardingUrl = "".concat(donateLink, "/?cartId=").concat(cartID, "&amount=").concat(amount, "&clientOverride=donate&currency=GBP&givingType=single&affiliate=").concat(affiliateValue, "&siteurl=").concat(currentpageUrl, "&rowID=").concat(rowID);
+  const forwardingUrl = `${donateLink}/?cartId=${cartID}&amount=${amount}&clientOverride=donate&currency=GBP&givingType=single&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${rowID}`;
   window.location.href = forwardingUrl;
 };
 var _default = exports.default = handleSubmission;

package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -89,7 +89,7 @@ const MarketingPreferencesDS = _ref => {
   const showSMSField = !mp_permissionSMS.hideInput && (smsChoice || errors.mp_mobile);
   const showPhoneField = !mp_permissionPhone.hideInput && (phoneChoice || errors.mp_phone);
   const showPostFields = !mp_permissionPost.hideInput && (postChoice || isAddressErroring());
-  const customId = id ? "marketing-preferences--".concat(id) : 'marketing-preferences';
+  const customId = id ? `marketing-preferences--${id}` : 'marketing-preferences';
 
   // Check for field-specific errors
   const hasEmailError = Boolean(errors.mp_permissionEmail || errors.mp_email);
@@ -99,7 +99,7 @@ const MarketingPreferencesDS = _ref => {
   return /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.OuterWrapper, Object.assign({
     id: customId
   }, rest), copyTop && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.TopCopyWrapper, null, copyTop), !mp_permissionEmail.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-email ".concat(emailChoice && 'selected'),
+    className: `field-email ${emailChoice && 'selected'}`,
     isError: hasEmailError
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_OptInCheckbox.default, {
     mpValidationOptions: mpValidationOptions,
@@ -122,7 +122,7 @@ const MarketingPreferencesDS = _ref => {
     id: "mp_email",
     formContext: formContext
   })))), !mp_permissionPost.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-post ".concat(postChoice && 'selected'),
+    className: `field-post ${postChoice && 'selected'}`,
     isError: hasPostError
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_OptInCheckbox.default, {
     name: "mp_permissionPost",
@@ -177,7 +177,7 @@ const MarketingPreferencesDS = _ref => {
     id: "mp_country",
     formContext: formContext
   })))), !mp_permissionSMS.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-sms ".concat(smsChoice && 'selected'),
+    className: `field-sms ${smsChoice && 'selected'}`,
     isError: hasSMSError
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_OptInCheckbox.default, {
     name: "mp_permissionSMS",
@@ -197,7 +197,7 @@ const MarketingPreferencesDS = _ref => {
     id: "mp_mobile",
     formContext: formContext
   })))), !mp_permissionPhone.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-phone ".concat(phoneChoice && 'selected'),
+    className: `field-phone ${phoneChoice && 'selected'}`,
     isError: hasPhoneError
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_OptInCheckbox.default, {
     name: "mp_permissionPhone",

package/dist/components/Organisms/MarketingPreferencesDS/_OptInCheckbox.js

@@ -51,14 +51,14 @@ const OptInCheckbox = _ref => {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckContainer, null, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckLabel, {
-    htmlFor: "".concat(name, "-yes"),
+    htmlFor: `${name}-yes`,
     userSelection: userSelection
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.AssociatedFieldsName, {
-    className: "icon-".concat(name)
+    className: `icon-${name}`
   }, _AssociatedFields.default[name].label), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckInput, Object.assign({
     type: "checkbox",
     name: name,
-    id: "".concat(name, "-yes"),
+    id: `${name}-yes`,
     value: "yes"
   }, register(name), {
     onChange: onChange

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

@@ -82,7 +82,7 @@ const Signup = _ref => {
   };
   (0, _react.useEffect)(() => {
     regularGiving.moneybuys.map((moneyBuy, index) => {
-      const box = "box".concat(index + 1);
+      const box = `box${index + 1}`;
       // eslint-disable-next-line no-shadow
       setMoneyBoxes(moneyBoxes => ({
         ...moneyBoxes,
@@ -112,11 +112,11 @@ const Signup = _ref => {
       boxBorderColor: boxBorderColor,
       isInputMatchBox: value,
       amount: value,
-      description: "\xA3".concat(value),
+      description: `£${value}`,
       setOtherAmount: () => selectMoneyBuy(description, value),
       key: value,
-      name: "".concat(mbshipID, "--moneyBuy").concat(index + 1),
-      id: "".concat(mbshipID, "--moneyBuy-box").concat(index + 1)
+      name: `${mbshipID}--moneyBuy${index + 1}`,
+      id: `${mbshipID}--moneyBuy-box${index + 1}`
     });
   });
   return /*#__PURE__*/_react.default.createElement(_Membership2.FormWrapper, null, /*#__PURE__*/_react.default.createElement(_Membership2.Form, {
@@ -133,7 +133,7 @@ const Signup = _ref => {
     inputBorderColor: inputBorderColor,
     label: "\xA3",
     errorMsg: "",
-    id: "".concat(mbshipID, "--MoneyBuy-userInput"),
+    id: `${mbshipID}--MoneyBuy-userInput`,
     showLabel: true
   }, rest, {
     max: "25000",

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

@@ -128,7 +128,7 @@ const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.
     inputBorderColor,
     theme
   } = _ref13;
-  return inputBorderColor && "border: 2px solid ".concat(theme.color('red'), ";");
+  return inputBorderColor && `border: 2px solid ${theme.color('red')};`;
 }, _ref14 => {
   let {
     theme