Trade In Form

Context Object

In order to make sure the components load the following values are required from the context object. Including the site wide values.

window.ND_COMPONENT_CONTEXT = {
  site: {
    valuationGroupSoftwareHash: '',
  },
};

Add your trade-in
Options
Vue Component Usage
<tradein-form
  dialog
  email
  item="[object Object]"
  myVehiclesEnabled
  showOutstandingFinance
  xNdValClient="vdp"
></tradein-form>
HTML Element Component Usage
<nd-component name="tradein-form" data='{"showOutstandingFinance":true,"dialog":true,"item":{"registration":"","odometerReading":10000,"condition":"Average Condition"},"xNdValClient":"vdp","myVehiclesEnabled":true,"email":true}'></nd-component>

Api/Services
Search
Get-vehicle

Endpoint: context.site.gfSearchApi

Method: POST

Valuations
Valuation-config

Endpoint: https://valuations.netdirector.co.uk/api/v3/configuration/${valuationGroupSoftwareHash}

Method: GET

Valuation-vehicle-attributes

Endpoint: https://valuations.netdirector.co.uk/api/v3/vehicle-attributes/${valuationGroupSoftwareHash}

Method: GET

Valuation-vehicle-attribute-value

Endpoint: https://valuations.netdirector.co.uk//api/v3/vehicle-attribute-value/${valuationGroupSoftwareHash}?${queryString}

Method: GET

Get-appraisals

Endpoint: https://valuations.netdirector.co.uk/api/v3/appraisals/${valuationGroupSoftwareHash}?${querString}

Method: GET

Vehicle-lookup

Endpoint: https://valuations.netdirector.co.uk//api/v3/vehicle-lookup/${valuationGroupSoftwareHash}

Method: POST

Get-valuation

Endpoint: https://valuations.netdirector.co.uk/api/v3/valuation/${valuationGroupSoftwareHash}

Method: POST

Create-valuation-from-hash

Endpoint: https://valuations.netdirector.co.uk/api/v3/valuation/${valuationGroupSoftwareHash}/${valuationHash}?_expand=vehicle

Method: GET

Auth
Load-auth-script

Endpoint: context.site.authLibraryUrl || https://auth-library.api.netdirector.auto/dist/bundle.js

Get-token

Endpoint: https://auth.shared-services.team.gforces.auto/api/client/${clientId}/token

Method: POST

Finance

Method: POST

Create-quote

Endpoint: https://finance.api.netdirector.auto/api/quote

Module/properties
Vehicle

state.vehicle.item

state.vehicle.context

Valuations

state.valuations.configuration

state.valuations.context

state.valuations.vehicleAttributes

state.valuations.outstandingBalance

state.valuations.vehicle

state.valuations.derivativesFound

state.valuations.valuation

state.valuations.calculated

state.valuations.confirmed

state.valuations.isManualLookup

state.valuations.isOutStandingFinance

state.valuations.configurated

state.valuations.vehicleAttributesConfigurated

state.valuations.tradeinCalculation

state.valuations.ui

state.valuations.appraisals

state.valuations.selectedAppraisals

state.valuations.isCheckedConsentTickbox

state.valuations.hasRedMess

state.valuations.customer

state.valuations.requestId

Auth

state.auth.user

Finance

state.finance.selectedProductIds

state.finance.selectedCategoryId

state.finance.products

Submit Tradein Form

// Registration Lookup
document.querySelector('#ndfe-reglookup').__vue__.submit();
// Manual Lookup
document.querySelector('#ndfe-manual-lookup').__vue__.submit();

Events

When the valuation api returns a succesful valuation, a MessageEvent as below will be fired.

const message = { event: 'valuation', valuationHash };
window.postMessage(JSON.stringify(message), '*');

Trigger reset form

There are two ways to reset the form.

Use the reset method in the RegLookup or ManualLookup component.

// Registration Lookup form
document.querySelector('#ndfe-reglookup').__vue__.reset();

// Manual Lookup form
document.querySelector('#ndfe-manual-lookup').__vue__.reset();

Use the resetForm method in the trade-in form component.

<template>
 <tradein-form ref="ref"></tradein-form>
</template>
<script>
export default {
 methods: {
  resetForm() {
   /*
   * Reset the form
   * @param {string} regLookupForm / manualLookupForm - The form to reset
   * @return {void}
   */
   this.$refs.ref.resetForm('regLookupForm');
  }
 }
}
</script>