{"size": 2142, "ext": "js", "max_stars_repo_path": "src/BuildBox/Packaging/index.js", "max_stars_repo_name": "kaushik246/salad-days", "max_stars_repo_stars_event_min_datetime": "2020-08-12T16:11:42.000Z", "max_stars_repo_stars_event_max_datetime": "2020-08-25T21:41:33.000Z", "max_issues_repo_path": "src/BuildBox/Packaging/index.js", "max_issues_repo_name": "kaushik246/salad-days", "max_issues_repo_issues_event_min_datetime": "2022-02-13T20:34:04.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T10:27:33.000Z", "max_forks_repo_path": "src/BuildBox/Packaging/index.js", "max_forks_repo_name": "kaukota/salad-days", "max_forks_repo_forks_event_min_datetime": "2021-01-27T02:39:18.000Z", "max_forks_repo_forks_event_max_datetime": "2021-01-27T02:39:18.000Z"}
{"max_stars_count": 2, "max_issues_count": 3, "max_forks_count": 1, "avg_line_length": 28.1842105263, "max_line_length": 180, "alphanum_fraction": 0.4579831933}
import React, { Component } from 'react'
import { connect } from 'react-redux'
import Header from '../generic/Header'
import { addToBox } from '../Items/actions'
import { setCurrentStep } from './../../Stepper/actions'

import './styles.scss'
import './responsive.css'

class Packaging extends Component {
  render() {
    return (
      <div className="build-a-box-step-1-component">
        <Header
          step={1}
          secondaryTitle="CHOOSE YOUR BOX COLOR"
          description="Welcome to the easiest way to send someone a custom gift, in 3 simple steps. Add to cart and repeat for multiple boxes, or update your quantity in the cart."
        />
        <div className="step-1-box-selection-wrapper">
          {this.props.items.boxesList.map((box) => {
            var opacity = 0
            if (
              this.props.items.selectedBox &&
              this.props.items.selectedBox == box.title
            )
              opacity = 1
            return (
              <div
                className="selected-box-container"
                onClick={() => {
                  this.props.addToBox(box)
                  this.props.setCurrentStep(1)
                }}
              >
                <div
                  className="selected-box-image"
                  style={{
                    background: `url(${box.image})`
                  }}
                >
                  <div
                    className="selected-box-border"
                    style={{
                      opacity: opacity
                    }}
                  >
                    <div
                      className="selected-box-checkmark"
                      style={{
                        opacity: opacity
                      }}
                    ></div>
                  </div>
                </div>
                <div className="selected-box-name">{box.title}</div>
              </div>
            )
          })}
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {}
}

export default connect(
  mapStateToProps,
  {
    addToBox,
    setCurrentStep
  }
)(Packaging)
