Skip to content

Instantly share code, notes, and snippets.

@SilencerWeb
Created July 16, 2019 10:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SilencerWeb/93a930d6e89dc8f8d87704c07b9497e7 to your computer and use it in GitHub Desktop.
Save SilencerWeb/93a930d6e89dc8f8d87704c07b9497e7 to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment