<commit_before>// @flow
import React from "react"
import { Link } from "react-router-dom"
import Typography from "@material-ui/core/Typography"
import Divider from "@material-ui/core/Divider"
import Button from "@material-ui/core/Button"
import MenuItem from "@material-ui/core/MenuItem"
import TextField from "@material-ui/core/TextField"
import useStyles from "components/Stocks/Details/styles"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import AddToCartButton from "components/Stocks/Catalogs/common/AddToCartButton"

const values = [...Array(13).keys()].slice(1)

type Props = {
  cartData: {
    /** Stock ID */
    id: string,
    /** Stock name (label/descriptor) */
    name: string,
    /** Stock summary */
    summary: string,
    /** Strain or plasmid */
    type: string,
  },
}

/**
 * AvailableCardDisplay is used on stock details pages if the
 * item is currently available for ordering.
 */

const AvailableCardDisplay = ({ cartData }: Props) => {
  const [quantity, setQuantity] = React.useState(values[0])
  const classes = useStyles()
  // const items = useSelector(state => state.cart.addedItems)
  // const itemInCart = items.some(item => item.id === cartData.id)

  const handleChange = event => {
    setQuantity(event.target.value)
  }

  return (
    <div>
      <Typography variant="h6" className={classes.cardHeader}>
        <FontAwesomeIcon icon="check" /> Available
      </Typography>
      <Divider />
      <div className={classes.quantity}>
        <TextField
          id="outlined-quantity"
          select
          label="Quantity"
          value={quantity}
          onChange={handleChange}
          margin="dense"
          variant="outlined"
          inputProps={{ className: classes.textField }}>
          {values.map(option => (
            <MenuItem key={option} value={option}>
              {option}
            </MenuItem>
          ))}
        </TextField>
        <AddToCartButton
          data={Array(quantity).fill(cartData)}
          setHover={() => {}}
          stockType={cartData.type}
        />
      </div>
      <Divider />
      <Button
        component={Link}
        to="/cart"
        classes={{
          root: classes.checkoutBtn,
        }}
        fullWidth>
        <FontAwesomeIcon
          icon="arrow-right"
          size="sm"
          className={classes.arrowIcon}
        />
        Go to Cart
      </Button>
    </div>
  )
}

export default AvailableCardDisplay
<commit_msg>feat: add dynamic quantity dropdown and capacity full message to availability box<commit_after>// @flow
import React from "react"
import { Link } from "react-router-dom"
import Typography from "@material-ui/core/Typography"
import Divider from "@material-ui/core/Divider"
import Button from "@material-ui/core/Button"
import MenuItem from "@material-ui/core/MenuItem"
import TextField from "@material-ui/core/TextField"
import useStyles from "components/Stocks/Details/styles"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import AddToCartButton from "components/Stocks/Catalogs/common/AddToCartButton"
import { useCartStore } from "components/ShoppingCart/CartStore"

type Props = {
  cartData: {
    /** Stock ID */
    id: string,
    /** Stock name (label/descriptor) */
    name: string,
    /** Stock summary */
    summary: string,
    /** Strain or plasmid */
    type: string,
  },
}

/**
 * AvailableCardDisplay is used on stock details pages if the
 * item is currently available for ordering.
 */

const AvailableCardDisplay = ({ cartData }: Props) => {
  const [{ addedItems, maxItemsInCart }] = useCartStore()
  const values = [...Array(13 - addedItems.length).keys()].slice(1)
  const classes = useStyles()
  const [quantity, setQuantity] = React.useState(values[0])

  const handleChange = event => {
    setQuantity(event.target.value)
  }

  let content

  maxItemsInCart
    ? (content = <div className={classes.maxItems}>Cart capacity is full</div>)
    : (content = (
        <>
          <TextField
            id="outlined-quantity"
            select
            label="Quantity"
            value={quantity}
            onChange={handleChange}
            margin="dense"
            variant="outlined"
            inputProps={{ className: classes.textField }}>
            {values.map(option => (
              <MenuItem key={option} value={option}>
                {option}
              </MenuItem>
            ))}
          </TextField>
          <AddToCartButton data={Array(quantity).fill(cartData)} />
        </>
      ))

  return (
    <div>
      <Typography variant="h6" className={classes.cardHeader}>
        <FontAwesomeIcon icon="check" /> Available
      </Typography>
      <Divider />
      <div className={classes.quantity}>{content}</div>
      <Divider />
      <Button
        component={Link}
        to="/cart"
        classes={{
          root: classes.checkoutBtn,
        }}
        fullWidth>
        <FontAwesomeIcon
          icon="arrow-right"
          size="sm"
          className={classes.arrowIcon}
        />
        Go to Cart
      </Button>
    </div>
  )
}

export default AvailableCardDisplay

{'fraction_non_alphanumeric': 0.12783265543288785, 'fraction_numerical': 0.001936858415649816, 'mean_word_length': 2.4426666666666668, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 50, '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': '5155712', 'n_tokens_mistral': 1478, 'n_tokens_neox': 1451, 'n_words': 338}