@comicrelief/component-library 7.2.0 → 7.4.0

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

@@ -36,7 +36,7 @@ var Donate = function Donate(_ref) {
       data = _ref.data,
       title = _ref.title,
       subtitle = _ref.subtitle,
-      otherDescription = _ref.otherDescription,
+      otherAmountText = _ref.otherAmountText,
       formAlignRight = _ref.formAlignRight,
       images = _ref.images,
       image = _ref.image,
@@ -107,7 +107,7 @@ var Donate = function Donate(_ref) {
     size: "m"
   }, subtitle)))), /*#__PURE__*/_react.default.createElement(_Form.default, {
     data: data,
-    otherDescription: otherDescription,
+    otherAmountText: otherAmountText,
     cartID: cartID,
     clientID: clientID,
     mbshipID: mbshipID,
@@ -131,7 +131,7 @@ Donate.defaultProps = {
   mobileAlt: '',
   backgroundColor: 'blue_dark',
   mbshipID: null,
-  otherDescription: 'will help us fund amazing projects in the UK and around the world.',
+  otherAmountText: 'will help us fund amazing projects in the UK and around the world.',
   subtitle: '',
   noMoneyBuys: false,
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',

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

@@ -22,11 +22,10 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
-## Form align left
+## Form align left, with custom message after choosing an "Other amount" to donate.
 
 ```js
 import data from './dev-data/data';
@@ -47,7 +46,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
+  otherAmountText="Overridden via the 'Other amount text' prop"
 />;
 ```
 
@@ -72,7 +71,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -98,7 +96,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   noMoneyBuys
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -124,7 +121,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -149,7 +145,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -174,7 +169,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -200,7 +194,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   noMoneyBuys
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -220,8 +213,7 @@ import data from './dev-data/data-single';
   title="Donate Now"
   noMoneyBuys
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
-  chooseAmountText="Overridden via the 'choose amount text' props"
+  chooseAmountText="Overridden via the 'choose amount text' prop"
 />;
 ```
 
@@ -247,7 +239,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
   isDesktopOverride={false}
 />;
 ```

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

@@ -25,7 +25,7 @@ var _Donate = require("../Donate.style");
 
 var _GivingSelector = _interopRequireDefault(require("../GivingSelector/GivingSelector"));
 
-var _excluded = ["data", "donateLink", "otherDescription", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText"];
+var _excluded = ["data", "donateLink", "otherAmountText", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -36,7 +36,7 @@ var Signup = function Signup(_ref) {
       singleGiving = _ref$data.singleGiving,
       regularGiving = _ref$data.regularGiving,
       donateLink = _ref.donateLink,
-      otherDescription = _ref.otherDescription,
+      otherAmountText = _ref.otherAmountText,
       clientID = _ref.clientID,
       cartID = _ref.cartID,
       mbshipID = _ref.mbshipID,
@@ -65,6 +65,17 @@ var Signup = function Signup(_ref) {
       moneyBuyCopy = _useState8[0],
       setMoneyBuyCopy = _useState8[1];
 
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      popOpen = _useState10[0],
+      setPopOpen = _useState10[1]; // 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 () {
     var givingData = givingType === 'single' ? singleGiving : regularGiving; // Check the 2nd moneybuy exists before using it;
     // 'philantrophy' carts have been set up to use a single moneybuy.
@@ -75,7 +86,7 @@ var Signup = function Signup(_ref) {
   }, [givingType, singleGiving, regularGiving]);
   (0, _react.useEffect)(function () {
     var givingData = givingType === 'single' ? singleGiving : regularGiving;
-    var moneyBuyNewDescription = otherDescription;
+    var moneyBuyNewDescription = otherAmountText;
     givingData.moneybuys.map(function (moneyBuy, index) {
       if (moneyBuy.value === amountDonate) {
         moneyBuyNewDescription = moneyBuy.description;
@@ -91,13 +102,18 @@ var Signup = function Signup(_ref) {
       if (errorMsg) setErrorMsg(false);
       setMoneyBuyCopy(moneyBuyNewDescription);
     }
-  }, [errorMsg, moneyBuyCopy, singleGiving, regularGiving, givingType, amountDonate, otherDescription]);
+  }, [errorMsg, moneyBuyCopy, singleGiving, regularGiving, givingType, amountDonate, otherAmountText]); // Updates our flag that differentiates between the popup
+  // being *currently* open and it *ever* having been shown to user
+
+  (0, _react.useEffect)(function () {
+    if (popOpen && !popUpShown) setPopUpShown(true);
+  }, [popOpen, popUpShown]);
 
   var submitDonation = function submitDonation(event, amount, clientId, cartId, mbshipId, donateURL) {
     event.preventDefault();
 
     if ((0, _Membership.isAmountValid)(amount) && !errorMsg) {
-      (0, _Membership.handleDonateSubmission)(amount, clientId, cartId, mbshipId, donateURL, givingType);
+      (0, _Membership.handleDonateSubmission)(amount, clientId, cartId, mbshipId, donateURL, givingType, popUpShown);
     } else {
       setErrorMsg(true);
       setMoneyBuyCopy(false);
@@ -107,12 +123,6 @@ var Signup = function Signup(_ref) {
 
   var givingData = givingType === 'single' ? singleGiving : regularGiving;
   var showGivingSelector = singleGiving !== null && regularGiving !== null;
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      popOpen = _useState10[0],
-      setPopOpen = _useState10[1];
-
   return /*#__PURE__*/_react.default.createElement(_Donate.FormWrapper, null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
     givingType: givingType,
     changeGivingType: function changeGivingType(data) {
@@ -121,7 +131,8 @@ var Signup = function Signup(_ref) {
     setPopOpen: setPopOpen,
     mbshipID: mbshipID
   }), popOpen && /*#__PURE__*/_react.default.createElement(_PopUpComponent.default, {
-    PopUpText: PopUpText
+    PopUpText: PopUpText,
+    setPopOpen: setPopOpen
   }), /*#__PURE__*/_react.default.createElement(_Donate.Form, {
     onSubmit: function onSubmit(e) {
       return submitDonation(e, amountDonate, clientID, cartID, mbshipID, donateLink);

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

@@ -23,7 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/* eslint-disable */
+var closeDuration = 0.6;
 var fadeClose = (0, _styledComponents.keyframes)(["0%{opacity:1;max-height:350px;}100%{opacity:0;max-height:0px;display:none;margin-top:-16px;}"]);
 var fadeOpen = (0, _styledComponents.keyframes)(["0%{opacity:0;max-height:0px;display:none;margin-top:-16px;}100%{opacity:1;max-height:350px;}"]);
 
@@ -31,7 +31,7 @@ var StyledPopUp = _styledComponents.default.div.withConfig({
   displayName: "PopUpComponent__StyledPopUp",
   componentId: "sc-1d7imlo-0"
 })(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;", "{width:450px;margin-right:auto;margin-left:auto;}"], fadeOpen, function (props) {
-  return props.isClosed && (0, _styledComponents.css)(["animation:0.6s ", " ease forwards;"], fadeClose);
+  return props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, fadeClose);
 }, function (_ref) {
   var theme = _ref.theme;
   return theme.color('blue_light');
@@ -51,18 +51,28 @@ var Button = _styledComponents.default.button.withConfig({
 });
 
 var PopUpComponent = function PopUpComponent(_ref3) {
-  var PopUpText = _ref3.PopUpText;
+  var PopUpText = _ref3.PopUpText,
+      setPopOpen = _ref3.setPopOpen;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isClosed = _useState2[0],
-      setIsClosed = _useState2[1];
+      setIsClosed = _useState2[1]; // Only update centralised state - which renders
+  // this component - once the closing animation is complete
+
+
+  var handleCloser = function handleCloser() {
+    setIsClosed(true);
+    setTimeout(function () {
+      setPopOpen(false);
+    }, closeDuration * 1000);
+  };
 
   return /*#__PURE__*/_react.default.createElement(StyledPopUp, {
     isClosed: isClosed
   }, /*#__PURE__*/_react.default.createElement(Button, {
     onClick: function onClick() {
-      return setIsClosed(true);
+      return handleCloser();
     },
     "aria-label": "Close"
   }, /*#__PURE__*/_react.default.createElement("img", {

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

@@ -16,6 +16,15 @@ var GivingSelector = function GivingSelector(_ref) {
       changeGivingType = _ref.changeGivingType,
       setPopOpen = _ref.setPopOpen,
       mbshipID = _ref.mbshipID;
+
+  // Only updates giving type and popup status when appropriate
+  var handleGivingTypeChange = function handleGivingTypeChange(thisButtonType, currentGivingType) {
+    if (currentGivingType !== thisButtonType) {
+      changeGivingType(thisButtonType);
+      setPopOpen(thisButtonType === 'single');
+    }
+  };
+
   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",
@@ -26,8 +35,7 @@ var GivingSelector = function GivingSelector(_ref) {
     errormsg: "",
     checked: givingType === 'single',
     onClick: function onClick() {
-      changeGivingType('single');
-      setPopOpen(true);
+      return handleGivingTypeChange('single', givingType);
     }
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'single',
@@ -42,8 +50,7 @@ var GivingSelector = function GivingSelector(_ref) {
     errormsg: "",
     checked: givingType === 'monthly',
     onClick: function onClick() {
-      changeGivingType('monthly');
-      setPopOpen(false);
+      return handleGivingTypeChange('monthly', givingType);
     }
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'monthly',

package/dist/utils/Membership.js

@@ -42,6 +42,7 @@ exports.isInputMatchBoxValue = isInputMatchBoxValue;
 
 var handleDonateSubmission = function handleDonateSubmission(amount, clientID, cartID, mbshipID, donateLink) {
   var givingType = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'monthly';
+  var popUpShown = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
   var currentpageUrl = window.location.href;
   var affiliateValue = getUrlParameter(currentpageUrl);
   var reg = /[#?|[\]\\]/g;
@@ -52,7 +53,7 @@ var handleDonateSubmission = function handleDonateSubmission(amount, clientID, c
   }
 
   var givingTypeUrl = givingType === 'single' ? 'single' : 'monthly';
-  window.location.href = "".concat(donateLink, "?clientOverride=").concat(clientID, "&amount=").concat(amount, "&currency=GBP&givingType=").concat(givingTypeUrl, "&cartId=").concat(cartID, "&affiliate=").concat(affiliateValue, "&siteurl=").concat(currentpageUrl, "&rowID=").concat(mbshipID);
+  window.location.href = "".concat(donateLink, "?clientOverride=").concat(clientID, "&amount=").concat(amount, "&currency=GBP&givingType=").concat(givingTypeUrl, "&cartId=").concat(cartID, "&affiliate=").concat(affiliateValue, "&siteurl=").concat(currentpageUrl, "&rowID=").concat(mbshipID, "&popUpShown=").concat(popUpShown);
 };
 
 exports.handleDonateSubmission = handleDonateSubmission;

package/package.json

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

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

@@ -23,7 +23,7 @@ const Donate = ({
   data,
   title,
   subtitle,
-  otherDescription,
+  otherAmountText,
   formAlignRight,
   images,
   image,
@@ -105,7 +105,7 @@ const Donate = ({
 
         <Form
           data={data}
-          otherDescription={otherDescription}
+          otherAmountText={otherAmountText}
           cartID={cartID}
           clientID={clientID}
           mbshipID={mbshipID}
@@ -126,7 +126,7 @@ Donate.propTypes = {
   clientID: PropTypes.string.isRequired,
   donateLink: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
-  otherDescription: PropTypes.string,
+  otherAmountText: PropTypes.string,
   subtitle: PropTypes.string,
   formAlignRight: PropTypes.bool,
   imageLow: PropTypes.string,
@@ -157,7 +157,7 @@ Donate.defaultProps = {
   mobileAlt: '',
   backgroundColor: 'blue_dark',
   mbshipID: null,
-  otherDescription:
+  otherAmountText:
     'will help us fund amazing projects in the UK and around the world.',
   subtitle: '',
   noMoneyBuys: false,

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

@@ -22,11 +22,10 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
-## Form align left
+## Form align left, with custom message after choosing an "Other amount" to donate.
 
 ```js
 import data from './dev-data/data';
@@ -47,7 +46,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
+  otherAmountText="Overridden via the 'Other amount text' prop"
 />;
 ```
 
@@ -72,7 +71,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -98,7 +96,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   noMoneyBuys
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -124,7 +121,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -149,7 +145,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -174,7 +169,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -200,7 +194,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   noMoneyBuys
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -220,8 +213,7 @@ import data from './dev-data/data-single';
   title="Donate Now"
   noMoneyBuys
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
-  chooseAmountText="Overridden via the 'choose amount text' props"
+  chooseAmountText="Overridden via the 'choose amount text' prop"
 />;
 ```
 
@@ -247,7 +239,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
   isDesktopOverride={false}
 />;
 ```

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

@@ -26,7 +26,7 @@ import GivingSelector from '../GivingSelector/GivingSelector';
 const Signup = ({
   data: { singleGiving, regularGiving },
   donateLink,
-  otherDescription,
+  otherAmountText,
   clientID,
   cartID,
   mbshipID,
@@ -39,6 +39,9 @@ const Signup = ({
   const [errorMsg, setErrorMsg] = useState(false);
   const [amountDonate, setAmountDonate] = useState(' ');
   const [moneyBuyCopy, setMoneyBuyCopy] = useState(true);
+  const [popOpen, setPopOpen] = useState(false);
+  // In order to keep track of whether the user has ever been shown the popup
+  const [popUpShown, setPopUpShown] = useState(false);
 
   useEffect(() => {
     const givingData = givingType === 'single' ? singleGiving : regularGiving;
@@ -56,7 +59,7 @@ const Signup = ({
   useEffect(() => {
     const givingData = givingType === 'single' ? singleGiving : regularGiving;
 
-    let moneyBuyNewDescription = otherDescription;
+    let moneyBuyNewDescription = otherAmountText;
 
     givingData.moneybuys.map((moneyBuy, index) => {
       if (moneyBuy.value === amountDonate) {
@@ -85,9 +88,15 @@ const Signup = ({
     regularGiving,
     givingType,
     amountDonate,
-    otherDescription
+    otherAmountText
   ]);
 
+  // Updates our flag that differentiates between the popup
+  // being *currently* open and it *ever* having been shown to user
+  useEffect(() => {
+    if (popOpen && !popUpShown) setPopUpShown(true);
+  }, [popOpen, popUpShown]);
+
   const submitDonation = (
     event,
     amount,
@@ -104,7 +113,8 @@ const Signup = ({
         cartId,
         mbshipId,
         donateURL,
-        givingType
+        givingType,
+        popUpShown
       );
     } else {
       setErrorMsg(true);
@@ -116,8 +126,6 @@ const Signup = ({
   const givingData = givingType === 'single' ? singleGiving : regularGiving;
   const showGivingSelector = singleGiving !== null && regularGiving !== null;
 
-  const [popOpen, setPopOpen] = useState(false);
-
   return (
     <FormWrapper>
       {showGivingSelector && (
@@ -129,7 +137,7 @@ const Signup = ({
         />
       )}
 
-      { popOpen && <PopUpComponent PopUpText={PopUpText} /> }
+      { popOpen && <PopUpComponent PopUpText={PopUpText} setPopOpen={setPopOpen} /> }
 
       <Form
         onSubmit={e => submitDonation(
@@ -222,7 +230,7 @@ Signup.propTypes = {
   clientID: PropTypes.string.isRequired,
   cartID: PropTypes.string.isRequired,
   donateLink: PropTypes.string.isRequired,
-  otherDescription: PropTypes.string.isRequired,
+  otherAmountText: PropTypes.string.isRequired,
   mbshipID: PropTypes.string.isRequired,
   noMoneyBuys: PropTypes.bool,
   data: PropTypes.objectOf(PropTypes.shape),

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

@@ -1,11 +1,12 @@
-/* eslint-disable */ 
 import React, { useState } from 'react';
 import styled, { css, keyframes } from 'styled-components';
+import PropTypes from 'prop-types';
 import Text from '../../../Atoms/Text/Text';
 import { media } from '../../../../theme/shared/size';
-import PropTypes from 'prop-types';
 import CloseCross from '../assets/close.svg';
 
+const closeDuration = 0.6;
+
 const fadeClose = keyframes`
   0% {
     opacity: 1;
@@ -39,7 +40,7 @@ const StyledPopUp = styled.div`
   opacity: 1;
   animation: 0.4s ${fadeOpen} ease;
   ${props => props.isClosed && css`
-    animation: 0.6s ${fadeClose} ease forwards;
+    animation: ${closeDuration}s ${fadeClose} ease forwards;
   `}
   background-color: ${({ theme }) => theme.color('blue_light')};
   box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
@@ -78,23 +79,33 @@ const Button = styled.button`
   }
 `;
 
-const PopUpComponent = ({ PopUpText }) => {
+const PopUpComponent = ({ PopUpText, setPopOpen }) => {
   const [isClosed, setIsClosed] = useState(false);
 
+  // Only update centralised state - which renders
+  // this component - once the closing animation is complete
+  const handleCloser = () => {
+    setIsClosed(true);
+    setTimeout(() => {
+      setPopOpen(false);
+    }, closeDuration * 1000);
+  };
+
   return (
     <StyledPopUp isClosed={isClosed}>
-      <Button onClick={() => setIsClosed(true)} aria-label="Close">
-        <img src={CloseCross} alt="Close cross icon"/>
+      <Button onClick={() => handleCloser()} aria-label="Close">
+        <img src={CloseCross} alt="Close cross icon" />
       </Button>
       <TextWrapper>
         <Text>{ PopUpText }</Text>
       </TextWrapper>
     </StyledPopUp>
-  )
+  );
 };
 
 PopUpComponent.propTypes = {
-  PopUpText: PropTypes.string.isRequired
+  PopUpText: PropTypes.string.isRequired,
+  setPopOpen: PropTypes.func.isRequired
 };
 
 export default PopUpComponent;

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

@@ -7,47 +7,51 @@ import {
 
 const GivingSelector = ({
   givingType, changeGivingType, setPopOpen, mbshipID
-}) => (
-  <Wrapper>
-    <MoneyBox>
-      <input
-        className="give-once"
-        aria-label="Single"
-        id={`give-once--${mbshipID}`}
-        value="Single"
-        type="radio"
-        label=""
-        errormsg=""
-        checked={givingType === 'single'}
-        onClick={() => {
-          changeGivingType('single');
-          setPopOpen(true);
-        }}
-      />
-      <Label active={givingType === 'single'} htmlFor={`give-once--${mbshipID}`}>
-        Single
-      </Label>
-      <input
-        className="give-monthly"
-        aria-label="Monthly"
-        id={`give-monthly--${mbshipID}`}
-        value="Monthly"
-        type="radio"
-        label=""
-        errormsg=""
-        checked={givingType === 'monthly'}
-        onClick={() => {
-          changeGivingType('monthly');
-          setPopOpen(false);
-        }}
-      />
-      <Label active={givingType === 'monthly'} htmlFor={`give-monthly--${mbshipID}`}>
-        Monthly
-      </Label>
-      <Switch />
-    </MoneyBox>
-  </Wrapper>
-);
+}) => {
+  // Only updates giving type and popup status when appropriate
+  const handleGivingTypeChange = (thisButtonType, currentGivingType) => {
+    if (currentGivingType !== thisButtonType) {
+      changeGivingType(thisButtonType);
+      setPopOpen(thisButtonType === 'single');
+    }
+  };
+
+  return (
+    <Wrapper>
+      <MoneyBox>
+        <input
+          className="give-once"
+          aria-label="Single"
+          id={`give-once--${mbshipID}`}
+          value="Single"
+          type="radio"
+          label=""
+          errormsg=""
+          checked={givingType === 'single'}
+          onClick={() => handleGivingTypeChange('single', givingType)}
+        />
+        <Label active={givingType === 'single'} htmlFor={`give-once--${mbshipID}`}>
+          Single
+        </Label>
+        <input
+          className="give-monthly"
+          aria-label="Monthly"
+          id={`give-monthly--${mbshipID}`}
+          value="Monthly"
+          type="radio"
+          label=""
+          errormsg=""
+          checked={givingType === 'monthly'}
+          onClick={() => handleGivingTypeChange('monthly', givingType)}
+        />
+        <Label active={givingType === 'monthly'} htmlFor={`give-monthly--${mbshipID}`}>
+          Monthly
+        </Label>
+        <Switch />
+      </MoneyBox>
+    </Wrapper>
+  );
+};
 
 GivingSelector.propTypes = {
   givingType: PropTypes.string.isRequired,

package/src/utils/Membership.js

@@ -42,7 +42,8 @@ const handleDonateSubmission = (
   cartID,
   mbshipID,
   donateLink,
-  givingType = 'monthly'
+  givingType = 'monthly',
+  popUpShown = null
 ) => {
   let currentpageUrl = window.location.href;
   const affiliateValue = getUrlParameter(currentpageUrl);
@@ -56,7 +57,7 @@ const handleDonateSubmission = (
   }
   const givingTypeUrl = givingType === 'single' ? 'single' : 'monthly';
 
-  window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=${givingTypeUrl}&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}`;
+  window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=${givingTypeUrl}&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}&popUpShown=${popUpShown}`;
 };
 
 export {