import { useState, useEffect, useRef } from ‘react’;
import {
  Box, Button, FormControl, FormLabel, Input, Select, Textarea,
  VStack, useToast, Heading, Text, Checkbox, Modal, ModalOverlay,
  ModalContent, ModalHeader, ModalBody, ModalCloseButton
} from ‘@chakra-ui/react’;
import { useNavigate, useLocation } from ‘react-router-dom’;
import {
  LoadScript, GoogleMap, Marker, DirectionsService, DirectionsRenderer
} from ‘@react-google-maps/api’;
import { loadStripe } from ‘@stripe/stripe-js’;
import {
  MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective,
  NavigationLinesDirective, NavigationLineDirective, Inject, Marker, NavigationLine, Zoom
} from ‘@syncfusion/ej2-react-maps’;
import { Elements, CardElement, useStripe, useElements } from ‘@stripe/react-stripe-js’;

const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);

const BookingForm = () => {
  const [formData, setFormData] = useState({
    serviceType: ‘’,
    userName: ‘’,
    phoneNumber: ‘’,
    carBrand: ‘’,
    vehicleMake: ‘’,
    vehicleModel: ‘’,
    vehicleSize: ‘’,
    additionalInfo: ‘’,
    pickupDate: ‘’,
    pickupTime: ‘’,
    origin: { lat: 26.509672, lng: -100.0095504 },
    pickupLocation: null,
    destinationLocation: null,
    distance: 0,
    streetLevel: ‘’,
    neutralPossible: ‘’,
    adaptations: ‘’,
    passengers: ‘’,
  });

  const toast = useToast();
  const navigate = useNavigate();
  const location = useLocation();
  const mapRef = useRef(null);
  const stripe = useStripe();
  const elements = useElements();

  useEffect(() => {
    if (location.state) {
      const { origin, pickupLocation, destinationLocation } = location.state;
      setFormData((prevData) => ({ …prevData, origin, pickupLocation, destinationLocation }));
    }
  }, [location.state]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ …formData, [name]: value });
  };

  const handleMapClick = (event) => {
    if (!formData.pickupLocation) {
      setFormData({ …formData, pickupLocation: { lat: event.latLng.lat(), lng: event.latLng.lng() } });
    } else if (!formData.destinationLocation) {
      setFormData({ …formData, destinationLocation: { lat: event.latLng.lat(), lng: event.latLng.lng() } });
    }
  };

  const handleReset = () => {
    setFormData({ …formData, pickupLocation: null, destinationLocation: null });
  };

  return (
    <Box p={4}>
      <VStack spacing={4} align=“stretch”>
        <Heading as=“h1” mb={4}>Booking Form</Heading>
        <form onSubmit={() => { /* Handle submit / }}>
          {/ FormControl components for user inputs /}
          {/ omitted for brevity */}

          <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
            <GoogleMap
              center={formData.origin}
              zoom={10}
              mapContainerStyle={{ height: ‘400px’, width: ‘100%’ }}
              onClick={handleMapClick}
              onLoad={(map) => (mapRef.current = map)}
              options={{
                zoomControl: true,
                streetViewControl: false,
                mapTypeControl: false,
                fullscreenControl: false,
              }}
            >
              {formData.pickupLocation && (
                <Marker
                  position={formData.pickupLocation}
                  draggable={true}
                  onDragEnd={(e) => setFormData({ …formData, pickupLocation: { lat: e.latLng.lat(), lng: e.latLng.lng() } })}
                />
              )}
              {formData.destinationLocation && (
                <Marker
                  position={formData.destinationLocation}
                  draggable={true}
                  onDragEnd={(e) => setFormData({ …formData, destinationLocation: { lat: e.latLng.lat(), lng: e.latLng.lng() } })}
                />
              )}
            </GoogleMap>
          </LoadScript>

          <MapsComponent
            centerPosition={{ latitude: formData.origin.lat, longitude: formData.origin.lng }}
            zoomSettings={{ zoomFactor: 5 }}
          >
            <Inject services={[Marker, NavigationLine, Zoom]} />
            <LayersDirective>
              <LayerDirective urlTemplate=“https://tile.openstreetmap.org/level/tileX/tileY.png”>
                <MarkersDirective>
                  {formData.pickupLocation && (
                    <MarkerDirective
                      visible={true}
                      height={25}
                      width={15}
                      dataSource={[{
                        latitude: formData.pickupLocation.lat,
                        longitude: formData.pickupLocation.lng,
                        name: ‘Pickup Location’
                      }]}
                    ></MarkerDirective>
                  )}
                  {formData.destinationLocation && (
                    <MarkerDirective
                      visible={true}
                      height={25}
                      width={15}
                      dataSource={[{
                        latitude: formData.destinationLocation.lat,
                        longitude: formData.destinationLocation.lng,
                        name: ‘Destination Location’
                      }]}
                    ></MarkerDirective>
                  )}
                </MarkersDirective>
                {formData.pickupLocation && formData.destinationLocation && (
                  <NavigationLinesDirective>
                    <NavigationLineDirective
                      visible={true}
                      latitude={[formData.pickupLocation.lat, formData.destinationLocation.lat]}
                      longitude={[formData.pickupLocation.lng, formData.destinationLocation.lng]}
                      color=“red”
                      width={3}
                    />
                  </NavigationLinesDirective>
                )}
              </LayerDirective>
            </LayersDirective>
          </MapsComponent>
        </form>

        <Button onClick={handleReset}>Reset</Button>
      </VStack>
    </Box>
  );
};

const BookingFormWrapper = () => (
  <Elements stripe={stripePromise}>
    <BookingForm />
  </Elements>
);

export default BookingFormWrapper;


### Notes:
- The Syncfusion Maps layer and Google Maps component are both integrated for demonstration purposes. You might choose one depending on your specific needs or application requirements.
- Ensure the environment variables (REACT_APP_GOOGLE_MAPS_API_KEY, REACT_APP_STRIPE_PUBLISHABLE_KEY) are set properly and replace placeholders with actual configurations.
- Use Inject to load required services (Marker, NavigationLine, Zoom) for Syncfusion Maps.
- You can adjust the styling and configuration as needed for better integration with your app’s look and feel.

Recommendation: Test both map integrations thoroughly to ensure proper functionality and user experience. Adjustments might be necessary depending on the need to switch between map types.
give me all the booking form whit syncfusion
To create a booking form utilizing Syncfusion Maps with OpenStreetMap (OSM) integration, we’ll set up a React component that handles form inputs, renders a map, places markers for locations, and draws navigation lines. Here is how you can implement this:

1. Install the Syncfusion Packages:
Ensure that you have installed @syncfusion/ej2-react-maps for map functionalities.

   npm install @syncfusion/ej2-react-maps


2. Create the Booking Form Component:
   Below is a React component that includes a basic booking form and Syncfusion Maps for displaying and interacting with location markers.

import React, { useState } from ‘react’;
import {
  Box, FormControl, FormLabel, Input, Select, Textarea,
  VStack, Button, Heading, useToast
} from ‘@chakra-ui/react’;
import {
  MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective,
  NavigationLinesDirective, NavigationLineDirective, Inject, Marker, NavigationLine, Zoom
} from ‘@syncfusion/ej2-react-maps’;

const BookingForm = () => {
  const [formData, setFormData] = useState({
    serviceType: ‘’,
    userName: ‘’,
    phoneNumber: ‘’,
    vehicleMake: ‘’,
    vehicleModel: ‘’,
    pickupDate: ‘’,
    pickupTime: ‘’,
    additionalInfo: ‘’,
    pickupLocation: { lat: 34.06062, lng: -118.330491 }, // Example location
    destinationLocation: { lat: 40.724546, lng: -73.850344 }, // Example location
  });

  const toast = useToast();

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ …formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Validation and submission logic here
    toast({
      title: ‘Form Submitted’,
      description: ‘Your booking has been submitted successfully.’,
      status: ‘success’,
      duration: 5000,
      isClosable: true,
    });
  };

  return (
    <Box p={4}>
      <VStack spacing={4} align=“stretch”>
        <Heading as=“h1” mb={4}>Booking Form</Heading>
        <form onSubmit={handleSubmit}>
          <FormControl id=“serviceType” isRequired>
            <FormLabel>Service Type</FormLabel>
            <Select name=“serviceType” value={formData.serviceType} onChange={handleChange}>
              <option value=“”>Select Service Type</option>
              <option value=“Tow”>Tow</option>
              <option value=“Platform”>Platform</option>
              <option value=“Roadside Assistance”>Roadside Assistance</option>
            </Select>
          </FormControl>
          <FormControl id=“userName” isRequired>
            <FormLabel>User Name</FormLabel>
            <Input type=“text” name=“userName” value={formData.userName} onChange={handleChange} />
          </FormControl>
          <FormControl id=“phoneNumber” isRequired>
            <FormLabel>Phone Number</FormLabel>
            <Input type=“tel” name=“phoneNumber” value={formData.phoneNumber} onChange={handleChange} />
          </FormControl>
          <FormControl id=“vehicleMake” isRequired>
            <FormLabel>Vehicle Make</FormLabel>
            <Input type=“text” name=“vehicleMake” value={formData.vehicleMake} onChange={handleChange} />
          </FormControl>
          <FormControl id=“vehicleModel” isRequired>
            <FormLabel>Vehicle Model</FormLabel>
            <Input type=“text” name=“vehicleModel” value={formData.vehicleModel} onChange={handleChange} />
          </FormControl>
          <FormControl id=“pickupDate” isRequired>
            <FormLabel>Pickup Date</FormLabel>
            <Input type=“date” name=“pickupDate” value={formData.pickupDate} onChange={handleChange} />
          </FormControl>
          <FormControl id=“pickupTime” isRequired>
            <FormLabel>Pickup Time</FormLabel>
            <Input type=“time” name=“pickupTime” value={formData.pickupTime} onChange={handleChange} />
          </FormControl>
          <FormControl id=“additionalInfo”>
            <FormLabel>Additional Information</FormLabel>
            <Textarea name=“additionalInfo” value={formData.additionalInfo} onChange={handleChange} />
          </FormControl>
          <Button colorScheme=“blue” type=“submit” mt={4}>Submit Booking</Button>
        </form>

        <MapsComponent zoomSettings={{ enable: true, zoomFactor: 4 }} centerPosition={{ latitude: 37.0902, longitude: -95.7129 }}>
          <Inject services={[Marker, NavigationLine, Zoom]} />
          <LayersDirective>
            <LayerDirective urlTemplate=“https://tile.openstreetmap.org/{level}/{tileX}/{tileY}.png”>
              <MarkersDirective>
                <MarkerDirective
                  visible={true}
                  height={25}
                  width={15}
                  dataSource={[
                    {
                      latitude: formData.pickupLocation.lat,
                      longitude: formData.pickupLocation.lng,
                      name: ‘Pickup Location’,
                    },
                    {
                      latitude: formData.destinationLocation.lat,
                      longitude: formData.destinationLocation.lng,
                      name: ‘Destination Location’,
                    },
                  ]}
                />
              </MarkersDirective>
              <NavigationLinesDirective>
                <NavigationLineDirective
                  visible={true}
                  color=“blue”
                  latitude={[formData.pickupLocation.lat, formData.destinationLocation.lat]}
                  longitude={[formData.pickupLocation.lng, formData.destinationLocation.lng]}
                  angle={0}
                  width={2}
                />
              </NavigationLinesDirective>
            </LayerDirective>
          </LayersDirective>
        </MapsComponent>
      </VStack>
    </Box>
  );
};

export default BookingForm;


usa api de google