Google Places Plugin

import { WizardProvider, defaultFieldComponents } from '@better_form/core';
import { googlePlacesPlugin } from '@better_form/plugin-google-places';
import '@better_form/core/styles';
import '@better_form/plugin-google-places/styles';
 
// Create plugin instance
const googlePlaces = googlePlacesPlugin({
  apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!,
  defaultCountryRestrictions: ['IT'],
  defaultLanguage: 'it',
});
 
// Merge with default components
const fieldComponents = {
  ...defaultFieldComponents,
  ...googlePlaces.fieldComponents,
};

{
  id: 'address',
  name: 'address',
  label: 'Delivery Address',
  type: 'address', // or 'google-address' or 'address-autocomplete'
  required: true,
 
  // Plugin options
  showDetailFields: true,      // Show editable street/city/postal fields
  showMapPicker: true,         // Show interactive map
  countryRestrictions: ['IT'], // Override default restrictions
  language: 'it',              // Override default language
 
  // Callback when address is selected
  onAddressSelected: (address, formData) => {
    console.log('Selected:', address);
    // Return values to update other fields
    return {
      city: address.city,
      postalCode: address.postalCode,
    };
  },
}

interface AddressData {
  formattedAddress: string;
  street: string;
  number: string;
  city: string;
  province?: string;
  postalCode?: string;
  country?: string;
  countryCode?: string;
  latitude?: number;
  longitude?: number;
  placeId?: string;
}