Vehicle selection Plugin

Plugin for selecting or searching vehicle. This plugin can work in two modes: with UI or without. To enable rendering of UI you should provide selector property to plugin's options:

selector: '.your-selector'

In this case, UI will be rendered to the element with the given selector. After receiving the vehicle and pressing "Finish" button, the onComplete callback will be called with received vehicle's object. Otherwise, if you have not passed selector property, plugin will automatically request vehicle by registration number or VIN, if you provide one of them to inputFields property. After successfully receiving the vehicle, the onComplete callback will be called with received vehicle's object.

Demo version

Plugin options interface

interface PluginOptions {
  selector: string
  onComplete: (values: Vehicle) => void
  token?: string
  credentials?: {
    customerNumber: string
    user: string
    password: string
  }

  settings?: {
    paintMethod?: 'EURO_LACQUER' | 'MANUFACTURER_SPECIFIC' // MANUFACTURER_SPECIFIC by default
    repairIncomplete?: boolean // by default true
    vehicleImages?: boolean // by default true
    firstRegistrationFilter?: boolean // by default true
    VINQueryAutomatic?: boolean // by default false
    NumberPlateSearchAutomatic?: boolean // by default false
    freeTextSearchAutomatic?: boolean // by default false
    DATECodeDisplayedOnModel?: boolean // by default true
    AZMainModel?: boolean // by default false
    initialEditMode?: boolean
    isModalOpen?: boolean
    restriction?: 'ALL' | 'REPAIR' | 'APPRAISAL'
    country?:
      | 'BG'
      | 'CZ'
      | 'AT'
      | 'CH'
      | 'DE'
      | 'GR'
      | 'US'
      | 'ES'
      | 'FR'
      | 'HU'
      | 'IT'
      | 'KR'
      | 'NL'
      | 'PL'
      | 'RO'
      | 'RU'
      | 'SK'
      | 'TR'
      | 'CN'
    locale?:
      | 'cs-CZ' // Czech (Czech Republic)
      | 'de-AT' // German (Austria)
      | 'de-CH' // German (Switzerland)
      | 'de-DE' // German (Germany)
      | 'el-GR' // Greek (Greece)
      | 'en-US' // English (USA)
      | 'es-ES' // Spanish (Spain)
      | 'fr-CH' // French (Switzerland)
      | 'fr-FR' // French (France)
      | 'hu-HU' // Hungary (Hungarian)
      | 'it-CH' // Italian (Switzerland)
      | 'it-IT' // Italian (Italy)
      | 'ko-KR' // Korean (South Korea)
      | 'nl-NL' // Dutch (Netherlands)
      | 'pl-PL' // Polish (Poland)
      | 'ro-RO' // Romanian (Romania)
      | 'ru-RU' // Russian (Russia)
      | 'tr-TR' // Turkish (Turkey)
      | 'zh-CN' // Chinese (China)
    existingPlateBehavior?: 'recoverData' | 'newVINRequest'
  }

  inputFields?: {
    firstRegistration?: string // Date
    DATCode?: string
    VIN?: string
    NumberPlate?: string
    freeTextSearch?: string
    paintType?: string
    vehicleColor?: string
    vehicleCode?: string
    VINQueried?: boolean // show icon
    PlateQueried?: boolean // show icon
    BrandAdditionalLabel?: string
    ModelAdditionalLabel?: string
    SubModelAdditionalLabel?: string
    AlternativeModelECode?: string
    Approvalnumber?: string
    EngineCode?: string
    LastInspection?: string
    listOfEquipments?: string
  }

  buttonText?: {
    finishButton?: string
  }
}

If credentials are not provided manually, you will be prompted to login with form in UI-mode. If you are not using UI, you must provide credentials.

Vehicle interface

interface Vehicle {
  numberPlate: string
  vin: string
  datECode: string
  alternativeModelDatECode: string
  nationalCode: string
  kba: string
  baseNumber: string
  typeNoteNumber: string
  kilometers: string
  cnit: string
  firstRegistration: Date | undefined
  firstRegistrationFilter: boolean
  constructionPeriod: string
  vehicleSelects: {
    vehicleType: string
    manufacturer: string
    baseModel: string
    subModel: string
  }
  equipmentSelects: {
    engine?: string
    bodywork?: string
    model?: string
    transmission?: string
    wheelbase?: string
    typeOfDrive?: string
    numberOfAxles?: string
    driversCab?: string
    vehicleWeight?: string
    suspensionType?: string
    equipmentLine?: string
  }
  container: string
  paintType: string
  alternativeModelSelects: {
    vehicleType: string
    manufacturer: string
    baseModel: string
    subModel: string
  }
  multipleVariantSelects: {
    manufacturer: string
    baseModel: string
    subModel: string
    equipmentSelects: {
      engine?: string
      bodywork?: string
      model?: string
      transmission?: string
      wheelbase?: string
      typeOfDrive?: string
      numberOfAxles?: string
      driversCab?: string
      vehicleWeight?: string
      suspensionType?: string
      equipmentLine?: string
    }
  }
}

Plugin example with UI

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- load plugin styles -->
    <link
      href="https://plugins.wedat.eu/vehicle-selection-modal/plugin.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- element to which plugin will be rendered -->
    <div class="plugin"></div>

    <!-- load plugin JS synchronously -->
    <script src="https://plugins.wedat.eu/vehicle-selection-modal/plugin.js"></script>

    <!-- init plugin options in your JS file or inline JS like this -->
    <script>
      window.VEHICLE_API.init({
        onComplete: (vehicle) => {
          // make what your want :)
          console.log(vehicle)
        },
        selector: '.plugin'
      })
    </script>
  </body>
</html>

Plugin example without UI

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- no need to load styles -->
  </head>
  <body>
    <!-- load plugin JS synchronously -->
    <script src="https://plugins.wedat.eu/vehicle-selection-modal/plugin.js"></script>

    <!-- init plugin options in your JS file or inline JS like this -->
    <script>
      window.VEHICLE_API.init({
        <!-- selector prop is not provided -->
        <!-- credentials are required -->
        credentials: {
          customerNumber: 'customerNumber',
          user: 'user',
          password: 'password'
        },
        onComplete: (vehicle) => {
          // make what your want :)
          console.log(vehicle)
        },
        inputFields: {
          NumberPlate: "vehicle's number plate"
        }
      })
    </script>
  </body>
</html>