{"size": 4882, "ext": "js", "max_stars_repo_path": "frontend/src/components/welcome/pricing.js", "max_stars_repo_name": "robertkibet/gitpay", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "frontend/src/components/welcome/pricing.js", "max_issues_repo_name": "robertkibet/gitpay", "max_issues_repo_issues_event_min_datetime": "2020-05-07T07:15:47.000Z", "max_issues_repo_issues_event_max_datetime": "2020-05-07T07:15:47.000Z", "max_forks_repo_path": "frontend/src/components/welcome/pricing.js", "max_forks_repo_name": "robertkibet/gitpay", "max_forks_repo_forks_event_min_datetime": "2020-11-12T16:03:57.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-12T16:03:57.000Z"}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": 1, "avg_line_length": 29.7682926829, "max_line_length": 162, "alphanum_fraction": 0.5602212208}
import React, { Component } from 'react'
import PropTypes from 'prop-types'

import {
  Button,
  Card,
  CardActions,
  CardContent,
  CardHeader,
  Grid,
  Typography,
  withStyles
} from '@material-ui/core'

import { injectIntl, FormattedMessage } from 'react-intl'

import {
  MainTitle
} from './components/CommonStyles'

const styles = theme => ({
  layout: {
    width: 'auto',
    marginLeft: theme.spacing.unit * 3,
    marginRight: theme.spacing.unit * 3,
    marginBottom: theme.spacing.unit * 6,
    marginTop: theme.spacing.unit * 2,
    [theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
      width: 900,
      marginLeft: 'auto',
      marginRight: 'auto',
    },
  },
  heroContent: {
    maxWidth: 600,
    margin: '0 auto',
    padding: `0 0 ${theme.spacing.unit * 4}px`,
  },
  heroDesc: {
    paddingTop: theme.spacing.unit * 2
  },
  cardHeader: {
    backgroundColor: theme.palette.primary.light,
  },
  cardPricing: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'baseline',
    marginBottom: theme.spacing.unit * 2,
  },
  cardActions: {
    [theme.breakpoints.up('sm')]: {
      paddingBottom: theme.spacing.unit * 2,
    },
  }
})

const tiers = [
  {
    title: 'Open source',
    subheader: 'For open source projects',
    price: '8%',
    description: [
      'Public projects on Github or Bitbucket',
      'Development community willing to solve your issues',
      '8% fee for each transaction'
    ],
    buttonText: 'Sign up',
    buttonVariant: 'contained',
    link: 'https://gitpay.me/#/login'
  },
  {
    title: 'Private',
    subheader: 'For private projects',
    price: '18%',
    description: [
      'Private projects on Github or Bitbucket',
      'Development community willing to solve your issues',
      '18% fee for each transaction'
    ],
    buttonText: 'Contact us',
    buttonVariant: 'contained',
    link: 'https://goo.gl/forms/eSpHlrtXGJ1v3Syv2'
  },
  {
    title: 'Support',
    subheader: 'Our Support to complete your tasks',
    price: '30%',
    description: [
      'We manage your projects on Github or Bitbucket',
      'Code review',
      '30% fee for each transaction'
    ],
    buttonText: 'Contact us',
    buttonVariant: 'contained',
    link: 'https://goo.gl/forms/eSpHlrtXGJ1v3Syv2'
  },
]

class Pricing extends Component {
  render () {
    const { classes } = this.props

    return (
      <div className={ classes.layout }>
        { /* Hero unit */ }
        <div className={ classes.heroContent }>
          <MainTitle>
            <Typography variant='h5' gutterBottom>
              <FormattedMessage id='welcome.pricing.title' defaultMessage='Princing' />
            </Typography>
          </MainTitle>
          <Typography variant='body1' align='center' color='textSecondary' className={ classes.heroDesc }>
            <FormattedMessage id='welcome.pricing.description' defaultMessage='Check our options to boost your company deliveries that can fit with your needs' />
          </Typography>
        </div>
        { /* End hero unit */ }
        <Grid container spacing={ 40 } alignItems='flex-end'>
          { tiers.map(tier => (
            // Enterprise card is full width at sm breakpoint
            <Grid item key={ tier.title } xs={ 12 } sm={ tier.title === 'Enterprise' ? 12 : 6 } md={ 4 }>
              <Card>
                <CardHeader
                  title={ tier.title }
                  subheader={ tier.subheader }
                  titleTypographyProps={ { align: 'center' } }
                  subheaderTypographyProps={ { align: 'center' } }
                  className={ classes.cardHeader }
                />
                <CardContent>
                  <div className={ classes.cardPricing }>
                    <Typography variant='h5' color='textPrimary'>
                      <small>Fee</small> { tier.price }
                    </Typography>
                    <Typography variant='subheading' color='textSecondary'>
                      <FormattedMessage id='welcome.pricing.month' defaultMessage=' / issue' />
                    </Typography>
                  </div>
                  { tier.description.map(line => (
                    <Typography variant='body1' align='center' key={ line }>
                      { line }
                    </Typography>
                  )) }
                </CardContent>
                <CardActions className={ classes.cardActions }>
                  <Button component='a' href={ tier.link } fullWidth variant={ tier.buttonVariant } color='primary'>
                    { tier.buttonText }
                  </Button>
                </CardActions>
              </Card>
            </Grid>
          )) }
        </Grid>
      </div>
    )
  }
}

Pricing.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default injectIntl(withStyles(styles)(Pricing))
