freeCodeCamp/client/src/components/Donation/DonationModal.js

/* eslint-disable max-len */
import React from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { Modal, Button, Col, Row } from '@freecodecamp/react-bootstrap';
import { Spacer } from '../helpers';
import { blockNameify } from '../../../utils/blockNameify';
import Heart from '../../assets/icons/Heart';
import Cup from '../../assets/icons/Cup';
import MinimalDonateForm from './MinimalDonateForm';

import ga from '../../analytics';
import {
  closeDonationModal,
  isDonationModalOpenSelector,
  isBlockDonationModalSelector
} from '../../redux';

import { challengeMetaSelector } from '../../templates/Challenges/redux';

import './Donation.css';

const mapStateToProps = createSelector(
  isDonationModalOpenSelector,
  challengeMetaSelector,
  isBlockDonationModalSelector,
  (show, { block }, isBlockDonation) => ({
    show,
    block,
    isBlockDonation
  })
);

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      closeDonationModal
    },
    dispatch
  );

const propTypes = {
  activeDonors: PropTypes.number,
  block: PropTypes.string,
  closeDonationModal: PropTypes.func.isRequired,
  isBlockDonation: PropTypes.bool,
  show: PropTypes.bool
};

function DonateModal({ show, block, isBlockDonation, closeDonationModal }) {
  const [closeLabel, setCloseLabel] = React.useState(false);
  const showCloseBtn = () => {
    setCloseLabel(true);
  };

  if (show) {
    ga.modalview('/donation-modal');
  }
  const blockDonationText = (
    <div className='block-modal-text'>
      <div className='donation-icon-container'>
        <Cup className='donation-icon' />
      </div>
      <Row>
        <Col sm={10} smOffset={1} xs={12}>
          <p>Nicely done. You just completed {blockNameify(block)}.</p>
          <p>Help us create even more learning resources like this.</p>
        </Col>
      </Row>
    </div>
  );

  const progressDonationText = (
    <div className='text-center progress-modal-text'>
      <div className='donation-icon-container'>
        <Heart className='donation-icon' />
      </div>
      <Row>
        <Col sm={10} smOffset={1} xs={12}>
          <p>
            Help us create even more learning resources for you and your family.
          </p>
        </Col>
      </Row>
    </div>
  );

  return (
    <Modal bsSize='lg' className='donation-modal' show={show}>
      <Modal.Header className='fcc-modal'>
        <Modal.Title className='modal-title text-center'>
          <strong>Become a Supporter</strong>
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        {isBlockDonation ? blockDonationText : progressDonationText}
        <Spacer />
        <MinimalDonateForm showCloseBtn={showCloseBtn} />
        <Spacer />
        <Row>
          <Col sm={10} smOffset={1} xs={12}>
            <Button
              block={true}
              bsSize='sm'
              bsStyle='primary'
              className='btn-link'
              onClick={closeDonationModal}
              tabIndex='0'
            >
              {closeLabel ? 'Close.' : 'Ask me later.'}
            </Button>
          </Col>
        </Row>
      </Modal.Body>
    </Modal>
  );
}

DonateModal.displayName = 'DonateModal';
DonateModal.propTypes = propTypes;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DonateModal);