@comicrelief/component-library 8.52.2 → 8.53.0

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

@@ -0,0 +1,332 @@
+import React, {
+  useState, useRef, useEffect, useCallback
+} from 'react';
+import PropTypes from 'prop-types';
+
+import PopUpComponent from './PopUpComponent';
+import MoneyBuy from '../MoneyBuy/MoneyBuy';
+import {
+  handleDonateSubmission,
+  isAmountValid,
+  amountFormatter
+} from '../../../../utils/Membership';
+import {
+  Button,
+  Copy,
+  Error,
+  FormFieldset,
+  FormWrapper,
+  Label,
+  Form,
+  MoneyBuys,
+  AmountField,
+  OuterFieldset,
+  Legend,
+  PrimaryTitleText
+} from '../DonateBanner.style';
+import GivingSelector from '../GivingSelector/GivingSelector';
+
+const Signup = ({
+  data: { singleGiving, regularGiving },
+  donateLink,
+  otherAmountText,
+  clientID,
+  cartID,
+  mbshipID,
+  donateOrientation = 'right',
+  noMoneyBuys = false,
+  popUpText,
+  chooseAmountText = null,
+  monthlyChooseAmountText = null,
+  submitButtonColor = 'red',
+  changeGivingType,
+  givingType = null,
+  hasTopImage = false,
+  shouldShowTitleSection = false,
+  ...rest
+}) => {
+  const [errorMsg, setErrorMsg] = useState(false);
+  const [amountDonate, setAmountDonate] = useState(10);
+  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(() => {
+    if (givingType) {
+      const givingData = givingType === 'single' ? singleGiving : regularGiving;
+
+      // Check the 2nd moneybuy exists before using it;
+      // 'philantrophy' carts have been set up to use a single moneybuy.
+      // See ENG-1685 for more details
+      const thisAmount = givingData.moneybuys[1]
+        ? givingData.moneybuys[1].value
+        : givingData.moneybuys[0].value;
+
+      setAmountDonate(thisAmount);
+    }
+    // Pass givingType up to parent for copy-switching logic:
+    changeGivingType(givingType);
+  }, [givingType, singleGiving, regularGiving, changeGivingType]);
+
+  useEffect(() => {
+    if (givingType) {
+      const givingData = givingType === 'single' ? singleGiving : regularGiving;
+
+      let moneyBuyUpdatedDescription = otherAmountText;
+
+      givingData.moneybuys.map((moneyBuy, index) => {
+        // Only show the MB-associated copy when we're actually showing moneybuys
+        if (moneyBuy.value === amountDonate && !noMoneyBuys) {
+          moneyBuyUpdatedDescription = moneyBuy.description;
+        }
+
+        return (
+          index === 1
+          && amountDonate === undefined
+          && (setMoneyBuyCopy(moneyBuy.description),
+          setAmountDonate(moneyBuy.value))
+        );
+      });
+
+      if (!isAmountValid(amountDonate)) {
+        if (moneyBuyCopy) setMoneyBuyCopy(false);
+        if (!errorMsg) setErrorMsg(true);
+      } else {
+        if (errorMsg) setErrorMsg(false);
+        setMoneyBuyCopy(moneyBuyUpdatedDescription);
+      }
+    }
+  }, [
+    errorMsg,
+    moneyBuyCopy,
+    singleGiving,
+    regularGiving,
+    givingType,
+    amountDonate,
+    otherAmountText,
+    noMoneyBuys
+  ]);
+
+  // 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]);
+
+  // On load, determine what should actually be the default giving type
+  useEffect(() => {
+    const newGivingType = singleGiving !== null ? 'single' : 'monthly';
+
+    changeGivingType(newGivingType);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const submitDonation = (
+    event,
+    amount,
+    clientId,
+    cartId,
+    mbshipId,
+    donateURL
+  ) => {
+    event.preventDefault();
+    if (isAmountValid(amount) && !errorMsg) {
+      handleDonateSubmission(
+        amount,
+        clientId,
+        cartId,
+        mbshipId,
+        donateURL,
+        givingType,
+        popUpShown
+      );
+    } else {
+      setErrorMsg(true);
+      setMoneyBuyCopy(false);
+    }
+  };
+
+  // Create money buy boxes
+  const givingData = givingType === 'single' ? singleGiving : regularGiving;
+  const showGivingSelector = singleGiving !== null && regularGiving !== null;
+
+  // Create ref for amount input
+  const amountRef = useRef(null);
+  // Create ref for amount button
+  const buttonRef = useRef(null);
+
+  const handleClickOutside = useCallback(event => {
+    if (!errorMsg) {
+      return;
+    }
+
+    if (buttonRef.current && event.target === buttonRef.current) {
+      return;
+    }
+
+    if (amountRef.current && !amountRef.current.contains(event.target)) {
+      // Check the 2nd moneybuy exists before using it;
+      // 'philantrophy' carts have been set up to use a single moneybuy.
+      // See ENG-1685 for more details
+      const thisAmount = givingData.moneybuys[1]
+        ? givingData.moneybuys[1].value
+        : givingData.moneybuys[0].value;
+
+      setAmountDonate(thisAmount);
+    }
+  }, [errorMsg, givingData]);
+
+  // Listen for click outside custom amount input if there is no value entered.
+  useEffect(() => {
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [errorMsg, handleClickOutside]);
+
+  // Create function to conditionally render button text
+  const renderButtonText = () => {
+    if (errorMsg) {
+      return 'Donate';
+    }
+    if (givingType === 'single') {
+      return `Donate £${amountDonate} now`;
+    }
+    return `Donate £${amountDonate} monthly`;
+  };
+
+  const defaultChooseAmountText = `${noMoneyBuys ? 'Enter' : 'Choose'} an amount to give`;
+  const thisChooseAmountText = givingType === 'monthly' && monthlyChooseAmountText
+    ? monthlyChooseAmountText
+    : (chooseAmountText || defaultChooseAmountText);
+
+  return (
+    <FormWrapper
+      donateOrientation={donateOrientation}
+      shouldShowTitleSection={shouldShowTitleSection}
+    >
+      { popOpen && <PopUpComponent popUpText={popUpText} setPopOpen={setPopOpen} /> }
+
+      <Form
+        donateOrientation={donateOrientation}
+        hasTopImage={hasTopImage}
+        shouldShowTitleSection={shouldShowTitleSection}
+        onSubmit={e => submitDonation(
+          e,
+          amountDonate,
+          clientID,
+          cartID,
+          mbshipID,
+          donateLink
+        )
+        }
+      >
+        <OuterFieldset>
+          <Legend>
+            <PrimaryTitleText tag="span" color="black">
+              {thisChooseAmountText}
+            </PrimaryTitleText>
+          </Legend>
+          {showGivingSelector && (
+            <GivingSelector
+              givingType={givingType}
+              changeGivingType={data => changeGivingType(data)}
+              setPopOpen={setPopOpen}
+              mbshipID={mbshipID}
+            />
+          )}
+          {!noMoneyBuys && givingType && (
+            <MoneyBuys>
+              {givingData.moneybuys.map(({ value }, index) => (
+                <MoneyBuy
+                  isSelected={amountDonate === value}
+                  amount={value.toString()}
+                  description={`£${amountFormatter(value)}`}
+                  setOtherAmount={() => setAmountDonate(value)}
+                  key={value}
+                  name={`${mbshipID}--moneyBuy${index + 1}`}
+                  id={`${mbshipID}--moneyBuy-box${index + 1}`}
+                />
+              ))}
+            </MoneyBuys>
+          )}
+          <FormFieldset>
+            {!noMoneyBuys && (
+              <Label size="s" weight="500" color="black">
+                Enter another amount
+              </Label>
+            )}
+            <AmountField
+              $noMoneyBuys={noMoneyBuys}
+              step="0.01"
+              name="membership_amount"
+              type="string"
+              inputBorderColor={isAmountValid(amountDonate) === false}
+              prefix="£"
+              label={noMoneyBuys ? 'Donation amount' : 'Other donation amount'}
+              errorMsg=""
+              id={`${mbshipID}--MoneyBuy-userInput`}
+              showLabel={false}
+              {...rest}
+              max="25000"
+              min="1"
+              value={amountDonate}
+              pattern="^[0-9]+([,.][0-9]{0,2})?$" // this only applies on submit
+              placeholder="0.00"
+              onChange={e => setAmountDonate(e.target.value.trim())}
+              ref={amountRef}
+            />
+          </FormFieldset>
+          {amountDonate >= 1 && moneyBuyCopy && (
+            <Copy>
+              <strong>{`£${amountDonate} `}</strong>
+              {moneyBuyCopy}
+            </Copy>
+          )}
+
+          {errorMsg && (
+          <Error className="error--amount" tag="p">
+            Please enter an amount between £1 and £25000 and up to 2 decimal
+            places
+          </Error>
+          )}
+
+          <Button
+            type="submit"
+            color={submitButtonColor}
+            ref={buttonRef}
+            // Used by analytics:
+            className="Button_DonateWidget"
+          >
+            {renderButtonText()}
+          </Button>
+
+        </OuterFieldset>
+      </Form>
+    </FormWrapper>
+  );
+};
+
+Signup.propTypes = {
+  clientID: PropTypes.string.isRequired,
+  cartID: PropTypes.string.isRequired,
+  donateLink: PropTypes.string.isRequired,
+  otherAmountText: PropTypes.string.isRequired,
+  mbshipID: PropTypes.string.isRequired,
+  donateOrientation: PropTypes.oneOf(['left', 'right']),
+  noMoneyBuys: PropTypes.bool,
+  data: PropTypes.objectOf(PropTypes.shape),
+  popUpText: PropTypes.string.isRequired,
+  chooseAmountText: PropTypes.string,
+  monthlyChooseAmountText: PropTypes.string,
+  submitButtonColor: PropTypes.string,
+  changeGivingType: PropTypes.func.isRequired,
+  givingType: PropTypes.string,
+  hasTopImage: PropTypes.bool,
+  shouldShowTitleSection: PropTypes.bool
+};
+
+export default Signup;

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

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import styled, { css, keyframes } from 'styled-components';
+import PropTypes from 'prop-types';
+import Text from '../../../Atoms/Text/Text';
+import CloseCross from '../assets/close.svg';
+
+const closeDuration = 0.6;
+
+const fadeClose = keyframes`
+  0% {
+    opacity: 1;
+    max-height: 350px;
+  }
+  100% {
+    opacity: 0;
+    max-height: 0px;
+    display: none;
+    margin-top: -16px;
+  }
+`;
+
+const fadeOpen = keyframes`
+  0% {
+    opacity: 0;
+    max-height: 0px;
+    display: none;
+    margin-top: -16px;
+  }
+  100% {
+    opacity: 1;
+    max-height: 350px;
+  }
+`;
+
+const StyledPopUp = styled.div`
+  display: grid;
+  overflow: hidden;
+  max-height: 350px;
+  opacity: 1;
+  animation: 0.4s ${props => props.fadeOpen} ease;
+  ${props => props.isClosed && css`
+    animation: ${closeDuration}s ${props.fadeClose} ease forwards;
+  `}
+  background-color: ${({ theme }) => theme.color('blue_light')};
+  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
+  border-radius: 0.5rem;
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    width: 450px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+`;
+
+const TextWrapper = styled.div`
+  margin: 0 32px 32px;
+`;
+
+const Button = styled.button`
+  justify-self: end;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  margin: 3px;
+  :active,
+  :focus,
+  :hover {
+    outline: none;
+    border: 1px solid ${({ theme }) => theme.color('grey')};
+  }
+
+  img {
+    width: 15px;
+    height: 15px;
+    vertical-align: middle;
+  }
+`;
+
+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} fadeOpen={fadeOpen} fadeClose={fadeClose}>
+      <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,
+  setPopOpen: PropTypes.func.isRequired
+};
+
+export default PopUpComponent;

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

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import {
+  Switch, Wrapper, MoneyBox, Label
+} from './GivingSelector.style';
+
+const GivingSelector = ({
+  givingType = null, changeGivingType, setPopOpen, mbshipID
+}) => {
+  // 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=""
+          checked={givingType === 'single'}
+          onChange={() => 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=""
+          checked={givingType === 'monthly'}
+          onChange={() => handleGivingTypeChange('monthly', givingType)}
+        />
+        <Label active={givingType === 'monthly'} htmlFor={`give-monthly--${mbshipID}`}>
+          Monthly
+        </Label>
+        <Switch />
+      </MoneyBox>
+    </Wrapper>
+  );
+};
+
+GivingSelector.propTypes = {
+  givingType: PropTypes.string,
+  changeGivingType: PropTypes.func.isRequired,
+  setPopOpen: PropTypes.func.isRequired,
+  mbshipID: PropTypes.string.isRequired
+};
+
+export default GivingSelector;

package/src/components/Organisms/DonateBanner/GivingSelector/GivingSelector.style.js

@@ -0,0 +1,71 @@
+import styled from 'styled-components';
+
+import spacing from '../../../../theme/shared/spacing';
+import zIndex from '../../../../theme/shared/zIndex';
+import hideVisually from '../../../../theme/shared/hideVisually';
+
+const Switch = styled.span`
+  width: 50%;
+  height: 48px;
+  ${zIndex('low')};
+  display: block;
+  position: absolute;
+  transition: left 0.15s ease-out;
+  background-color: ${({ theme }) => theme.color('red')};
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  margin: ${spacing('md')} 0;
+`;
+
+const MoneyBox = styled.div`
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  margin: ${spacing('sm')} 0;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  border: 1px solid ${({ theme }) => theme.color('grey')};
+  background: ${({ theme }) => theme.color('white')};
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    margin: 0 auto;
+  }
+  .give-monthly:checked ~ ${Switch} {
+    left: calc(50%);
+  }
+  input {
+    ${hideVisually}
+  }
+`;
+
+const Label = styled.label`
+  font-size: ${({ theme }) => theme.fontSize('s')};
+  font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
+  font-weight: bold;
+  min-height: 48px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-basis: 50%;
+  border: none;
+  transition: color 0.15s ease-out;
+  ${zIndex('medium')};
+  cursor: ${({ active }) => (active === true ? 'default' : 'pointer')};
+  border-radius: 2rem;
+  color: ${({ active, theme }) => (active === true ? theme.color('white') : theme.color('black'))};
+
+  &:active:focus {
+    box-shadow: none;
+  }
+  &:focus {
+    border: none;
+    outline: none;
+    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('red')};
+  }
+`;
+
+export {
+  Switch, Wrapper, MoneyBox, Label
+};

package/src/components/Organisms/DonateBanner/MoneyBuy/MoneyBuy.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+
+import Input from '../../../Atoms/Input/Input';
+
+const MoneyBuyButton = styled(Input)`
+  display: block;
+  input {
+    border: none;
+    background-color: ${({ theme }) => theme.color('white')};
+    color: ${({ theme }) => theme.color('black')};
+    font-size: ${({ theme }) => theme.fontSize('l')};
+    font-family: ${({ theme }) => theme.fontFamilies('Anton')};
+    font-weight: normal;
+    border-radius: 0.5rem;
+    height: 4rem;
+    border: 1px solid ${({ theme }) => theme.color('grey')};
+    &:focus {
+      border: 1px solid ${({ theme }) => theme.color('red')};
+    }
+
+    ${({ isSelected }) => isSelected
+      && css`
+        background-color: ${({ theme }) => theme.color('red')};
+        border: 1px solid ${({ theme }) => theme.color('red')};
+        color: ${({ theme }) => theme.color('white')};
+      `}
+  }
+`;
+
+const MoneyBuy = ({
+  setOtherAmount,
+  amount = '10',
+  currency = '£',
+  description = 'description',
+  ...rest
+}) => (
+  <MoneyBuyButton
+    {...rest}
+    label={description}
+    showLabel={false}
+    value={`${currency} ${amount}`}
+    type="button"
+    errorMsg=""
+    onClick={setOtherAmount}
+  />
+);
+
+MoneyBuy.propTypes = {
+  amount: PropTypes.string,
+  currency: PropTypes.string,
+  description: PropTypes.string,
+  // Function already set doesn't need to be passed as props
+  setOtherAmount: PropTypes.func.isRequired
+};
+
+export default MoneyBuy;