form.jsx

// @flow
import React from 'react';
import Form from 'components/drafts/form';
import Heading from 'components/heading/heading';
import Button from 'components/button/button';

import DetailsFormSection from './details';
import PartyFormSection from './party';
import WeightsFormSection from './weights';
import FreightFormSection from './freight';

import { formWrapper, boxWrapper, viewHeading } from 'styles/layout.css';

type Props = {
  draft: string,
  updateDraft?: (name: string, field: string | string[], value: any) => any,
  commitDraft: () => any,
  showWeightsSection: boolean,
  title: string,
  submitAction: string
};

const OrderForm = ({
  draft,
  updateDraft,
  commitDraft,
  showWeightsSection,
  title,
  submitAction
}: Props) =>
  <section>
    <header className={viewHeading}>
      <Heading title={title} />
    </header>
    <Form id="order-form" className={formWrapper} onSubmit={commitDraft}>
      <div className={boxWrapper}>
        <DetailsFormSection draft={draft} updateDraft={updateDraft} />
        <PartyFormSection
          draft={draft}
          updateDraft={updateDraft}
          title="Origin"
          party="origin"
        />
        <PartyFormSection
          draft={draft}
          updateDraft={updateDraft}
          title="Destination"
          party="destination"
        />
        {showWeightsSection &&
          <WeightsFormSection draft={draft} updateDraft={updateDraft} />}
        <FreightFormSection draft={draft} updateDraft={updateDraft} />

        <Button type="create" size="large">
          {submitAction}
        </Button>
      </div>
    </Form>
  </section>;

export default OrderForm;