OfferInformationForm.js

import * as React from 'react'
import { navigate } from 'gatsby'
import { withFormik } from 'formik'
import * as Yup from 'yup'
import {
  OfferInformationFormWrapper,
  OfferInformationFormInner,
  OfferInformationFormTitle,
  OfferInformationFormSection,
  OfferInformationFormSubtitle,
  OfferInformationFormFieldWrapper,
  OfferInformationFormFieldLabel,
  OfferInformationFormField,
  OfferInformationFormButton,
} from './elements'

const OfferInformationFormComponent = (props) => {
  const {
    className,

    values,
    errors,
    touched,
    handleChange,
    handleBlur,
    handleSubmit,
    dirty,
    isValid,
    isSubmitting,
  } = props

  console.log(values)

  return (
    <OfferInformationFormWrapper className={className}>
      <OfferInformationFormInner onSubmit={handleSubmit} noValidate>
        <OfferInformationFormTitle weight={'semi-bold'}>Verify information about your property</OfferInformationFormTitle>

        <OfferInformationFormSection>
          <OfferInformationFormSubtitle as={'h2'} size={'small'} weight={'semi-bold'}>Address</OfferInformationFormSubtitle>

          <OfferInformationFormFieldWrapper>
            <OfferInformationFormFieldLabel htmlFor={'streetAddress'}>Street Address</OfferInformationFormFieldLabel>
            <OfferInformationFormField
              id={'streetAddress'}
              name="streetAddress"
              type="text"
              value={values.streetAddress}
              autoComplete="shipping street-address"
              invalid={dirty && errors.streetAddress && touched.streetAddress && !!errors.streetAddress}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </OfferInformationFormFieldWrapper>

          <OfferInformationFormFieldWrapper>
            <OfferInformationFormFieldLabel htmlFor={'city'}>City</OfferInformationFormFieldLabel>
            <OfferInformationFormField
              id={'city'}
              name="city"
              type="text"
              value={values.city}
              autoComplete="shipping locality"
              invalid={dirty && errors.city && touched.city && !!errors.city}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </OfferInformationFormFieldWrapper>

          <OfferInformationFormFieldWrapper>
            <OfferInformationFormFieldLabel htmlFor={'state'}>State</OfferInformationFormFieldLabel>
            <OfferInformationFormField
              id={'state'}
              name="state"
              type="text"
              value={values.state}
              autoComplete="shipping region"
              invalid={dirty && errors.state && touched.state && !!errors.state}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </OfferInformationFormFieldWrapper>

          <OfferInformationFormFieldWrapper>
            <OfferInformationFormFieldLabel htmlFor={'postcode'}>Postcode</OfferInformationFormFieldLabel>
            <OfferInformationFormField
              id={'postcode'}
              name="postcode"
              type="text"
              value={values.postcode}
              autoComplete="shipping postal-code"
              invalid={dirty && errors.postcode && touched.postcode && !!errors.postcode}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </OfferInformationFormFieldWrapper>
        </OfferInformationFormSection>

        <OfferInformationFormSection>
          <OfferInformationFormSubtitle as={'h2'} size={'small'} weight={'semi-bold'}>Basic Information</OfferInformationFormSubtitle>

          <OfferInformationFormFieldWrapper>
            <OfferInformationFormFieldLabel htmlFor={'numberOfBedrooms'}>No. of Bedrooms</OfferInformationFormFieldLabel>
            <OfferInformationFormField
              id={'numberOfBedrooms'}
              name="numberOfBedrooms"
              type="text"
              value={values.numberOfBedrooms}
              invalid={dirty && errors.numberOfBedrooms && touched.numberOfBedrooms && !!errors.numberOfBedrooms}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </OfferInformationFormFieldWrapper>

          <OfferInformationFormFieldWrapper>
            <OfferInformationFormFieldLabel htmlFor={'numberOfBathrooms'}>No of. Bathrooms</OfferInformationFormFieldLabel>
            <OfferInformationFormField
              id={'numberOfBathrooms'}
              name="numberOfBathrooms"
              type="text"
              value={values.numberOfBathrooms}
              invalid={dirty && errors.numberOfBathrooms && touched.numberOfBathrooms && !!errors.numberOfBathrooms}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </OfferInformationFormFieldWrapper>

          <OfferInformationFormFieldWrapper>
            <OfferInformationFormFieldLabel htmlFor={'squareFootage'}>Square Footage</OfferInformationFormFieldLabel>
            <OfferInformationFormField
              id={'squareFootage'}
              name="squareFootage"
              type="text"
              value={values.squareFootage}
              invalid={dirty && errors.squareFootage && touched.squareFootage && !!errors.squareFootage}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </OfferInformationFormFieldWrapper>

          <OfferInformationFormFieldWrapper>
            <OfferInformationFormFieldLabel htmlFor={'yearBuilt'}>Year Built</OfferInformationFormFieldLabel>
            <OfferInformationFormField
              id={'yearBuilt'}
              name="yearBuilt"
              type="text"
              value={values.yearBuilt}
              invalid={dirty && errors.yearBuilt && touched.yearBuilt && !!errors.yearBuilt}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </OfferInformationFormFieldWrapper>

          <OfferInformationFormFieldWrapper>
            <OfferInformationFormFieldLabel htmlFor={'lastYearOfMajorRennovation'}>Last Year of major Rennovation (optional)</OfferInformationFormFieldLabel>
            <OfferInformationFormField
              id={'lastYearOfMajorRennovation'}
              name="lastYearOfMajorRennovation"
              type="text"
              value={values.lastYearOfMajorRennovation}
              invalid={dirty && errors.lastYearOfMajorRennovation && touched.lastYearOfMajorRennovation && !!errors.lastYearOfMajorRennovation}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </OfferInformationFormFieldWrapper>

        </OfferInformationFormSection>

        <OfferInformationFormSection>
          <OfferInformationFormSubtitle as={'h2'} size={'small'} weight={'semi-bold'}>Financials</OfferInformationFormSubtitle>

          <OfferInformationFormFieldWrapper>
            <OfferInformationFormFieldLabel htmlFor={'annualHOAFee'}>Annual HOA Fee</OfferInformationFormFieldLabel>
            <OfferInformationFormField
              id={'annualHOAFee'}
              name="annualHOAFee"
              type="text"
              value={values.annualHOAFee}
              invalid={dirty && errors.annualHOAFee && touched.annualHOAFee && !!errors.annualHOAFee}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </OfferInformationFormFieldWrapper>

          <OfferInformationFormFieldWrapper>
            <OfferInformationFormFieldLabel htmlFor={'pricePaidForTheHouse'}>Price paid for the house</OfferInformationFormFieldLabel>
            <OfferInformationFormField
              id={'pricePaidForTheHouse'}
              name="pricePaidForTheHouse"
              type="text"
              value={values.pricePaidForTheHouse}
              invalid={dirty && errors.pricePaidForTheHouse && touched.pricePaidForTheHouse && !!errors.pricePaidForTheHouse}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </OfferInformationFormFieldWrapper>
        </OfferInformationFormSection>

        <OfferInformationFormSection>
          <OfferInformationFormSubtitle as={'h2'} size={'small'} weight={'semi-bold'}>Contact Information</OfferInformationFormSubtitle>

          <OfferInformationFormFieldWrapper>
            <OfferInformationFormFieldLabel htmlFor={'email'}>Your email</OfferInformationFormFieldLabel>
            <OfferInformationFormField
              id={'email'}
              name="email"
              type="email"
              value={values.email}
              autoComplete="email"
              invalid={dirty && errors.email && touched.email && !!errors.email}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </OfferInformationFormFieldWrapper>
        </OfferInformationFormSection>

        <OfferInformationFormButton
          size={'extra-large'}
          disabled={(!dirty || (dirty && !isValid)) || isSubmitting}
        >
          All the information is Correct
        </OfferInformationFormButton>
      </OfferInformationFormInner>
    </OfferInformationFormWrapper>
  )
}

const OfferInformationFormWithFormik = withFormik({
  mapPropsToValues: () => ({
    streetAddress: '',
    city: '',
    state: '',
    postcode: '',

    numberOfBedrooms: '',
    numberOfBathrooms: '',
    squareFootage: '',
    yearBuilt: '',
    propertyType: 'singleFamily',
    lastYearOfMajorRennovation: '',
    hoa: 'Yes',

    annualHOAFee: '',
    pricePaidForTheHouse: '',

    email: '',
  }),
  validationSchema: Yup.object().shape({
    streetAddress: Yup.string().required(),
    city: Yup.string().required(),
    state: Yup.string().required(),
    postcode: Yup.number().min(0).required(),

    numberOfBedrooms: Yup.number().min(0).required(),
    numberOfBathrooms: Yup.number().min(0).required(),
    squareFootage: Yup.number().min(0).required(),
    yearBuilt: Yup.number().min(0).required(),
    propertyType: Yup.mixed().oneOf(['singleFamily', 'condo', 'townhouse']).required(),
    lastYearOfMajorRennovation: Yup.number().min(0),
    hoa: Yup.mixed().oneOf(['yes', 'no']).required(),

    annualHOAFee: Yup.number().min(0).required(),
    pricePaidForTheHouse: Yup.number().min(0).required(),

    email: Yup.string().email().required(),
  }),
  handleSubmit: (values, { resetForm }) => {
    console.log(values)

    setTimeout(() => {
      resetForm()
      navigate('/evaluation')
    }, 1000)
  },
  displayName: 'OfferInformationForm',
})(OfferInformationFormComponent)

export const OfferInformationForm = OfferInformationFormWithFormik