<commit_before>import React, { Component } from 'react'
import {
  Box,
  Button,
  Flex,
  Heading,
  Icon,
  Input,
  Label,
  Text
} from '@hackclub/design-system'
import { CLIENT_URL, PUBLIC_STRIPE_KEY } from 'constants'
import { toNumber } from 'lodash'
import api from 'api'

const Secure = Flex.extend`
  position: absolute;
  top: 0;
  right: 0;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
`

const amounts = [5, 10, 25, 50, 100, 200, 250]

const AmountsGrid = Box.extend`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: ${props => props.theme.space[3]}px;
  input[type='radio'] {
    display: none;
    &:checked + label {
      background-color: ${props => props.theme.colors.blue[7]} !important;
    }
  }
  input[type='number'] {
    text-align: center;
    border-radius: ${props => props.theme.pill};
    grid-column: 2 / span 2;
  }
`

const Amount = Button.withComponent('label').extend`
  border-radius: ${props => props.theme.pill};
`

const Option = ({ amount, ...props }) => [
  <input
    type="radio"
    id={`amount[${amount}]`}
    name="amount"
    value={amount}
    key={`input[${amount}]`}
    {...props}
  />,
  <Amount bg="info" htmlFor={`amount[${amount}]`} key={`label[${amount}]`}>
    <Text.span>${amount}</Text.span>
  </Amount>
]

class DonateForm extends Component {
  state = {
    loading: true,
    stripeLoading: true,
    amount: 10,
    recurring: true
  }

  componentWillUnmount() {
    if (this.stripeHandler) {
      this.stripeHandler.close()
    }
  }

  render() {
    const { custom, recurring, amount } = this.state
    return (
      <Box align="center" style={{ position: 'relative' }}>
        <Secure p={2} mr={[-3, -4]}>
          <Text f={0} color="red.1" caps bold>
            Secure
          </Text>
          <Icon size={16} name="lock" color="red.1" ml={2} />
        </Secure>
        <Heading.h2
          mx={[-3, -4]}
          mt={[-3, -4]}
          mb={3}
          pt={4}
          pb={3}
          px={3}
          f={5}
          bg="primary"
          color="white"
        >
          Become a Patron
        </Heading.h2>
        <Flex align="center" justify="center" color="black">
          <Text f={3} bold>
            Select an amount
          </Text>
          <Text.span mx={2} children="—" />
          <Label>
            <input
              name="recurring"
              type="checkbox"
              checked={recurring}
              onChange={this.handleRecurringChange}
            />
            <Text.span f={2} ml={1}>
              monthly?
            </Text.span>
          </Label>
        </Flex>
        <AmountsGrid w={1} mt={3} mb={4}>
          {amounts.map(amount => (
            <Option
              amount={amount}
              onChange={e => this.handleAmountChange(amount)}
              key={amount}
            />
          ))}
          <Input
            type="number"
            placeholder="Other"
            onChange={e => this.handleAmountChange(e.target.value)}
            color="black"
          /><commit_msg>Fix monthly donation checkbox<commit_after>import React, { Component } from 'react'
import {
  Box,
  Button,
  Flex,
  Heading,
  Icon,
  Input,
  Label,
  Text
} from '@hackclub/design-system'
import { CLIENT_URL, PUBLIC_STRIPE_KEY } from 'constants'
import { toNumber } from 'lodash'
import api from 'api'

const Secure = Flex.extend`
  position: absolute;
  top: 0;
  right: 0;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
`

const amounts = [5, 10, 25, 50, 100, 200, 250]

const AmountsGrid = Box.extend`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: ${props => props.theme.space[3]}px;
  input[type='radio'] {
    display: none;
    &:checked + label {
      background-color: ${props => props.theme.colors.blue[7]} !important;
    }
  }
  input[type='number'] {
    text-align: center;
    border-radius: ${props => props.theme.pill};
    grid-column: 2 / span 2;
  }
`

const Amount = Button.withComponent('label').extend`
  border-radius: ${props => props.theme.pill};
`

const Option = ({ amount, ...props }) => [
  <input
    type="radio"
    id={`amount[${amount}]`}
    name="amount"
    value={amount}
    key={`input[${amount}]`}
    {...props}
  />,
  <Amount bg="info" htmlFor={`amount[${amount}]`} key={`label[${amount}]`}>
    <Text.span>${amount}</Text.span>
  </Amount>
]

class DonateForm extends Component {
  state = {
    loading: true,
    stripeLoading: true,
    amount: 10,
    recurring: true
  }

  componentWillUnmount() {
    if (this.stripeHandler) {
      this.stripeHandler.close()
    }
  }

  render() {
    const { custom, recurring, amount } = this.state
    return (
      <Box align="center" style={{ position: 'relative' }}>
        <Secure p={2} mr={[-3, -4]}>
          <Text f={0} color="red.1" caps bold>
            Secure
          </Text>
          <Icon size={16} name="lock" color="red.1" ml={2} />
        </Secure>
        <Heading.h2
          mx={[-3, -4]}
          mt={[-3, -4]}
          mb={3}
          pt={4}
          pb={3}
          px={3}
          f={5}
          bg="primary"
          color="white"
        >
          Become a Patron
        </Heading.h2>
        <Flex align="center" justify="center" color="black">
          <Text f={3} bold>
            Select an amount
          </Text>
          <Text.span mx={2} children="—" />
          <Label>
            <input
              name="recurring"
              type="checkbox"
              style={{
                WebkitAppearance: 'checkbox',
                MozAppearance: 'checkbox',
                appearance: 'checkbox'
              }}
              checked={recurring}
              onChange={this.handleRecurringChange}
            />
            <Text.span f={2} ml={1}>
              monthly?
            </Text.span>
          </Label>
        </Flex>
        <AmountsGrid w={1} mt={3} mb={4}>
          {amounts.map(amount => (
            <Option
              amount={amount}
              onChange={e => this.handleAmountChange(amount)}
              key={amount}
            />
          ))}
          <Input
            type="number"
            placeholder="Other"
            onChange={e => this.handleAmountChange(e.target.value)}
            color="black"
          />
{'fraction_non_alphanumeric': 0.16262975778546712, 'fraction_numerical': 0.01667190940547342, 'mean_word_length': 1.8930846223839854, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 71, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6797375', 'n_tokens_mistral': 2120, 'n_tokens_neox': 2063, 'n_words': 432}