{"size": 2225, "ext": "js", "max_stars_repo_path": "src/scenes/BuyJourney/scenes/Checkout/components/TermsDetails.js", "max_stars_repo_name": "Chinchu-Thambi/YellowWorks", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/scenes/BuyJourney/scenes/Checkout/components/TermsDetails.js", "max_issues_repo_name": "Chinchu-Thambi/YellowWorks", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/scenes/BuyJourney/scenes/Checkout/components/TermsDetails.js", "max_forks_repo_name": "Chinchu-Thambi/YellowWorks", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.8961038961, "max_line_length": 211, "alphanum_fraction": 0.5856179775}
/* eslint-disable max-len */
import React from 'react';
import { Flex } from 'rebass/styled-components';
import PropTypes from 'prop-types';

import { TermsContainer } from './Styled';
import checkAfter from './check-after.svg';
import checkBefore from './check-before.svg';

const TermsDetails = ({ details, setDetails, needPayment }) => {
  const handleChange = (e) => {
    const { id, checked } = e.target;

    setDetails({
      ...details,
      [id]: checked,
    });
  };

  return (
    <TermsContainer>
      <Flex justifyContent="space-between">
        <label htmlFor="terms">
          <img src={details.terms ? checkAfter : checkBefore} alt="check-box-terms" />
          <input
            type="checkbox"
            name="terms"
            id="terms"
            data-testid="terms"
            onChange={handleChange}
            checked={details.terms}
          />
          <span>I have read and accept the <a href="/terms/terms-business/" target="_blank">Terms of Business</a> and <a href="/terms/product-terms/" target="_blank">Additional Terms</a> for each product.</span>
        </label>
      </Flex>
      { needPayment ? (
        <Flex>
          <label htmlFor="authorize">
            <img src={details.authorize ? checkAfter : checkBefore} alt="check-box-authorize" />
            <input
              type="checkbox"
              name="authorize"
              id="authorize"
              data-testid="authorize"
              onChange={handleChange}
              checked={details.authorize}
            />
            <span>
              I authorise Yellow NZ to take payments from my card account in accordance with <a href="/terms/credit-debit-card-authorisation/" target="_blank">Credit/Debit Card Registration Terms</a>.
            </span>
          </label>
        </Flex>
      )
        : null}
    </TermsContainer>
  );
};

TermsDetails.defaultProps = {
  details: {
    terms: true,
    authorize: true,
    needPayment: true,
  },
};

TermsDetails.propTypes = {
  details: PropTypes.shape({
    terms: PropTypes.bool,
    authorize: PropTypes.bool,
  }),
  setDetails: PropTypes.func.isRequired,
  needPayment: PropTypes.bool.isRequired,
};

export default TermsDetails;
