LocationNew.js

import React from 'react';
import {UsaStates} from "usa-states";
import GenerateFormComponent from "@/components/Booking/GenerateFormComponent";
import withForm from "@/components/Booking/withForm";

const LocationNew = ({ handleFieldChange }) => {
    const usStates = new UsaStates({includeTerritories: true});
    const statesNames = usStates.arrayOf('names');
    const fields = [
        {
            id: 'address',
            label: 'Street Address',
            type: 'text',
            placeholder: 'Enter your address',
            value: '',
        },
        {
            id: 'city',
            label: 'City',
            type: 'text',
            placeholder: 'Enter your City',
            value: '',
        },
        {
            id: 'province',
            label: 'Province',
            type: 'select',
            options: [
                'Select Province',
                ...statesNames.map((state) => state),
            ],
            value: '',
        },
        {
            id: 'zip',
            label: 'Zip Code',
            type: 'text',
            placeholder: '',
            value: '',
        },
        {
            id: 'unit',
            label: 'Unit #',
            type: 'text',
            placeholder: '',
            value: '',
        },
        {
            id: 'propertySize',
            label: 'Property Size (with Basement)',
            type: 'select',
            options: [
                '0-999 sq ft',
                '1000-2000 sq ft',
                '2000-3000 sq ft',
                '4000-5000 sq ft',
                '5000+ sq ft',
                "Don't know!",
            ],
            value: '0-999 sq ft',
        },
        {
            id: 'footageType',
            label: 'Please include the TOTAL SQUARE FOOTAGE WITH BASEMENT in the "Property Size" field *',
            type: 'checkbox',
            extraLabel: 'If you want any footage or floorplans of the basement, otherwise it will not be captured.',
            options: [
                {
                    label: 'Yes, the above square footage is the total including basement',
                    value: 'total_with_basement',
                },
                {
                    label: 'Please skip the basement - I do not need any media or floorplans for it',
                    value: 'skip_basement',
                },
                {
                    label: 'There is no basement at this property',
                    value: 'no_basement',
                },
                {
                    label: "I'm not sure about the total. Charge me based on final captured sq ft",
                    value: 'charge_based_on_sqft',
                },
            ],
            value: ['total_with_basement'],
        },
        {
            id: 'find',
            label: 'How did you find out about us?',
            type: 'select',
            options: [
                'Loyal Client',
                'Google Search',
                'Social Media',
                'Email',
                'Referral',
                'Tradeshow',
            ],
            value: 'Social Media',
        },
        {
            id: 'propertyType',
            label: 'Select Property Type',
            type: 'select',
            options: [
                'House',
                'Condominium',
                'Townhouse',
                'Lot',
                'Multi-Unit',
                'Commercial',
                'Mixed-Use',
                'Other',
            ],
            value: '',
        },
        {
            id: 'propertyCondition',
            label: 'Condition of the Property',
            type: 'select',
            options: [
                '100% Ready',
                'Under Construction',
                'Vacant',
                'Tenant Property',
                'New Construction',
            ],
            value: '',
        },
        {
            id: 'access',
            label: 'Access?',
            type: 'select',
            options: [
                'Realtor will be on site',
                'Owner will be on site',
                'Lockbox (please provide the code)',
                'Other',
            ],
            value: '',
        },
        {
            id: 'luckBox',
            label: 'Lockbox?',
            type: 'text',
            placeholder: '',
            value: '',
        },
        {
            id: 'customerCode',
            label: 'Customer Code (Optional)',
            type: 'text',
            placeholder: '',
            value: '',
        },
        {
            id: 'specialRequest',
            label: 'Special Requests',
            type: 'textarea',
            placeholder: 'Areas for the photographer to focus on or avoid. Parking instructions. Etc.',
            value: '',
        },
    ];


    return (
        <div>
            <GenerateFormComponent
                fields={fields}
                handleFieldChange={handleFieldChange}
            />
        </div>
    );
};


export default withForm(LocationNew);