@comicrelief/component-library 7.2.0 → 7.3.0

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

@@ -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.
@@ -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, otherDescription]); // 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.3.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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

@@ -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;
@@ -88,6 +91,12 @@ const Signup = ({
     otherDescription
   ]);
 
+  // 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(

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 {