{"size": 2442, "ext": "js", "max_stars_repo_path": "src/components/forms/OrderFulfillmentForm.js", "max_stars_repo_name": "bean-la/open-tender-components", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/forms/OrderFulfillmentForm.js", "max_issues_repo_name": "bean-la/open-tender-components", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/forms/OrderFulfillmentForm.js", "max_forks_repo_name": "bean-la/open-tender-components", "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": 25.175257732, "max_line_length": 84, "alphanum_fraction": 0.5925470925}
import React, { useState, useRef, useEffect } from 'react'
import propTypes from 'prop-types'
import { Input } from '../index'

const arrivedText =
  "Thanks for letting us know you've arrived! We'll be out with your order shortly."

const OrderFulfillmentForm = ({
  orderId,
  fulfillment,
  loading,
  error,
  update,
  settings,
}) => {
  const submitButton = useRef()
  const [data, setData] = useState({})
  const [submitting, setSubmitting] = useState(false)
  const errors = error || {}
  const empty = Object.values(fulfillment).every((i) => !i)
  const fields = !empty
    ? settings.fields.filter((i) => i.name.startsWith('arrival'))
    : settings.fields

  useEffect(() => {
    if (loading === 'idle') setSubmitting(false)
  }, [loading])

  useEffect(() => {
    setData(fulfillment)
  }, [fulfillment])

  const handleChange = (evt) => {
    const { id, type, value, checked } = evt.target
    const inputValue = type === 'checkbox' ? checked : value
    setData({ ...data, [id]: inputValue })
  }

  const handleSubmit = (evt) => {
    evt.preventDefault()
    setSubmitting(true)
    update(orderId, { ...data, has_arrived: true })
    submitButton.current.blur()
  }

  return (
    <form
      id="order-fulfillment-form"
      className="form"
      onSubmit={handleSubmit}
      noValidate
    >
      <div className="section__rows">
        {fields.map((field) => (
          <Input
            key={field.name}
            label={field.label}
            name={field.name}
            type="text"
            placeholder={field.placeholder}
            value={data[field.name]}
            onChange={handleChange}
            error={errors[field.name]}
            disabled={data.has_arrived}
          />
        ))}
      </div>
      <div className="section__submit">
        {data.has_arrived ? (
          <p>{arrivedText}</p>
        ) : (
          <button
            className="ot-btn"
            type="submit"
            disabled={submitting || data.has_arrived}
            ref={submitButton}
          >
            {settings.button}
          </button>
        )}
      </div>
    </form>
  )
}

OrderFulfillmentForm.displayName = 'OrderFulfillmentForm'
OrderFulfillmentForm.propTypes = {
  orderId: propTypes.number,
  fulfillment: propTypes.object,
  loading: propTypes.string,
  error: propTypes.object,
  update: propTypes.func,
  settings: propTypes.object,
}

export default OrderFulfillmentForm
