# Grapa
### Plugin Options Interface
```typescript
export interface PluginOptions {
onReturnRepairPositions?: (repairPositions: RepairPosition[]) => void;
selector?: string;
token?: string;
credentials?: {
customerNumber: string;
user: string;
password: string;
};
// optional if you know interfacePartnerSignature
credentialsWithPartnerSignature?: {
interfacePartnerNumber?: string;
interfacePartnerSignature?: string;
customerNumber: string;
customerLogin: string;
password?: string;
customerSignature?: string;
};
settings?: {
locale?: {
country: string;
datCountryIndicator: string;
language: string;
};
languageCode?: string; // for graphic request
};
pluginSettings: {
DATECode: string;
maxWidth?: string;
height?: string;
maxMobileWidth: number;
repairPositions: RepairPosition[];
graphicDamageFormId?: string; // currrent availabel values: 'ModalFastButton' 'BottomDrawerFastButton'
debugingMode: boolean;
};
}
```
### Example
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin style -->
<link href="http://dat.icwt.space/grapa/plugin.css" rel="stylesheet" />
</head>
<body>
<!-- this place where plugin will render -->
<div class="plugin"></div>
<!-- load plugin JS synchronously -->
<script src="http://dat.icwt.space/grapa/plugin.js"></script>
<!-- init plugin options on your JS file or inline JS like this -->
<script>
window.GRAPA.init({
selector: '.plugin',
onComplete: form => {
// make what your want :)
console.log(form);
}
});
</script>
</body>
</html>
```
# Valuate Finance
### Plugin options interface
```typescript
interface PluginOptions {
token?: string;
selector?: string;
onComplete?: (data: DAT2.Response.GetVehicleEvaluation['VXS']) => void;
requestData: {
datECode: string,
container: string,
mileage: string,
constructionTime: number,
registrationDate: string | date,
restriction: string // APPRAISAL,
save: string,
vatType: string,
equipment: {
equipmentPosition: [
{ datEquipmentId: number },
]
}
};
settings?: {};
};
```
### Example
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin styles -->
<link href="https://plugins.wedat.eu/valuate-finance/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/valuate-finance/plugin.js"></script>
<!-- init plugin options in your JS file or inline JS like this -->
<script>
window.VALUATE_FINANCE_API.init({
selector: ".plugin",
requestData: {
datECode: "012851200090002",
container: "IT008",
mileage: 4e4,
constructionTime: 4728,
registrationDate: "2010-02-26",
restriction: "APPRAISAL",
save: "TRUE",
vatType: "D",
equipment: {
equipmentPosition: [
{ datEquipmentId: 24085 },
{ datEquipmentId: 68703 },
{ datEquipmentId: 47518 }
]
}
},
onComplete: form => {
// make what your want :)
console.log(form);
}
});
</script>
</body>
</html>
```
# Auth
### Plugin options Interface
```typescript
interface PluginOptions {
token?: string;
onLogin: () => void;
onTokenExpire: () => void;
selector?: string;
authMode?: 'form' | 'page'; // "page" by defualt
}
```
### Example
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin style -->
<link href="https://plugins.wedat.eu/auth/plugin.css" rel="stylesheet" />
</head>
<body>
<!-- this place where plugin will render -->
<div class="plugin"></div>
<!-- load plugin JS synchronously -->
<script src="https://plugins.wedat.eu/auth/plugin.js"></script>
<!-- init plugin options on your JS file or inline JS like this -->
<script>
window.AUTH_API.init({
selector: ".plugin",
onLogin: () => {},
onTokenExpire: () => {}
});
</script>
</body>
</html>
```
# Vehicle Selection
## Plugin Options Interface
```typescript
type ClassificationGroupsNames = "engine" | "bodywork" | "model" | "transmission" | "wheelbase" | "typeOfDrive" | "numberOfAxles" | "driversCab" | "vehicleWeight" | "suspensionType" | "equipmentLine"
interface CurrentFormikValues {
country: string;
repairType: string;
numberPlate: string;
vin: string;
freeTextSearch: 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: {
[K in ClassificationGroupsNames]: string;
};
container: string;
paintType: string;
alternativeModelSelects: {
vehicleType: string;
manufacturer: string;
baseModel: string;
subModel: string;
};
multipleVariantSelects: {
manufacturer: string;
baseModel: string;
subModel: string;
equipmentSelects: {
[K in ClassificationGroupsNames]: string;
};
};
};
interface PluginOptions {
selector: string;
onComplete: (values: CurrentFormikValues) => void;
token?: string;
// TODO: add settings for modify button
settings?: {
country?: string; // IT by default
language?: string; // IT by default
restriction?: DAT.Restriction; // REPAIR by default
paintMethod?: DAT.PaintMethod; // MANUFACTURER_SPECIFIC by default
withEquipment?: boolean; // TODO: 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;
};
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;
};
styles?: {
fontSize?: {
commonText?: number; // Text in error modal, multiple selection modal
modalsTitles?: number;
inputs?: number;
selectsLabels?: number;
selectsOptions?: number;
fieldsTitles?: number;
alternativeModelTitle?: number;
alternativeModelText?: number;
};
modal?: {
borderColor?: string;
borderWidth?: number;
borderRadius?: number;
backgroundColor?: string;
};
icons?: {
search?: string;
calendar?: string;
edit?: string;
repairIncomplete?: string;
numberPlate?: string;
vin?: string;
constructionTime?: string;
paintType?: string;
};
};
}
```
### Example of Vehicle
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin style -->
<link href="https://plugins.wedat.eu/vehicle-selection-modal/plugin.css" rel="stylesheet" />
</head>
<body>
<!-- this place where plugin will render -->
<div class="plugin"></div>
<!-- load plugin JS synchronously -->
<script src="https://plugins.wedat.eu/vehicle-selection-modal/plugin.js"></script>
<!-- init plugin options on your JS file or inline JS like this -->
<script>
window.VEHICLE_API.init({
pluginSettings: {
selector: '.plugin',
completeFormCallback: form => {
// make what your want :)
console.log(form);
}
}
});
</script>
</body>
</html>
```
### Renderless example
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
<!-- load plugin style -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
<link href="https://plugins.wedat.eu/vehicle-selection-modal/plugin.css" rel="stylesheet" />
</head>
<style>
.json {
white-space: pre;
background: #dedede;
font-family: monospace;
}
</style>
<body>
<div style="white-space: pre" class="json" id="response"></div>
<div id="plugin"></div>
<!-- this place where plugin will render -->
<!-- <code language="json" id="response" style="display:block; white-space:pre-wrap"></code> -->
<!-- load plugin JS synchronously -->
<script src="https://plugins.wedat.eu/vehicle-selection-modal/plugin.js"></script>
<!-- init plugin options on your JS file or inline JS like this -->
<script>
function print_r(object, html) {
if (html) return '<pre>' + JSON.stringify(object, null, 4) + '</pre>';
else return JSON.stringify(object, null, 4);
}
window.VEHICLE_API.init({
// selector: '#plugin',
onComplete: form => {
const hlt = hljs.highlight('json', print_r(form))
const output = document.getElementById('response')
output.innerHTML = hlt.value
},
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJkYXQiLCJpYXQiOjE2MDQ5MTg3NDk5NTksImNsbnQiOiIzMTMxNDExIiwidXNlciI6ImZlcnJzaW1vIn0.RVWFCTAStZ4eH2fn6ujfXKCzWWgztairBG1tVoKtqqM',
inputFields: {
VIN: 'WF0JXXWPJJ9P21439',
},
settings: {
VINQueryAutomatic: true
}
});
</script>
</body>
</html>
```
# Vehicle Selection UK
Plugin for searching vehicle by its `registration number` or `VIN`.
Plugin can work in two modes: with UI or without. To enable rendering of UI you should provide `selector` property to plugin's options:
```typescript
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.
### Plugin options interface
```typescript
interface PluginOptions {
clientId: string;
clientSecret: string;
onComplete: (vehicle: Vehicle) => any;
selector?: string;
inputFields?: {
numberPlate?: string;
vin?: string;
};
}
```
## Vehicle interface
```typescript
interface Vehicle {
identifiers?: {
vrm?: string;
vin?: string;
gcode?: {
id?: string;
};
};
dvladata?: {
registrationdate?: {
firstregistration?: string;
firstregistrationuk?: string;
};
manufacturer?: string;
model?: string;
description?: string;
engine?: {
code?: string;
number?: string;
size?: {
cc?: string;
};
power?: {
kw?: string;
};
};
colour?: {
current?: string;
previous?: string;
original?: string;
lastcolourchangedate?: string;
previouscolourcount?: string;
};
fuel?: string;
bodystyle?: string;
history?: {
export?: {
marker?: string;
};
import?: {
northernireland?: {
marker?: string;
};
marker?: string;
};
scrap?: {
unscrapped?: {
marker?: string;
};
date?: string;
marker?: string;
};
vin?: {
marker?: string;
};
keeperacquisitiondate?: string;
previousownercount?: string;
priorregistrationuse?: string;
previouskeeper?: {
acquisitiondate?: string;
disposaldate?: string;
};
v5cchangedate?: string;
victest?: {
date?: string;
result?: string;
};
};
manufacturedate?: string;
manufactureyear?: string;
vinbuildmonth?: string;
seatcount?: string;
co2emissionsgkm?: string;
weightkg?: {
gross?: string;
unladen?: string;
fullyladen?: string;
maxtowingbraked?: string;
maxtowingunbraked?: string;
};
powertoweightratio?: string;
noisedb?: {
stationary?: string;
driveby?: string;
engine?: string;
};
wheelplan?: string;
roadfundlicense?: {
band?: string;
sixmonth?: string;
twelvemonth?: string;
};
};
enhanceddata?: {
gcodedata?: {
manufacturer?: string;
model?: string;
modeldescription?: string;
specdescription?: string;
derivative?: string;
bodystyle?: string;
fueltype?: string;
category?: string;
class?: string;
doorcount?: string;
seatcount?: string;
transmissiontype?: string;
gearcount?: string;
valvecount?: string;
driveaxle?: string;
drivetype?: string;
engine?: {
alignment?: string;
position?: string;
cylinder?: {
count?: string;
configuration?: string;
};
size?: {
cc?: string;
litre?: string;
};
power?: {
bhp?: string;
kw?: string;
};
fueldelivery?: string;
emission?: string;
};
modelversioncode?: string;
modelversion?: string;
specdaterange?: {
from?: string;
to?: string;
};
steeringposition?: string;
weightkg?: {
gross?: string;
};
wheelbasemm?: string;
country?: string;
};
drivendata?: {
speed?: {
topspeedmph?: string;
acceleration0to62mph?: string;
};
engine?: {
emission?: string;
euroemission?: string;
};
mpg?: {
urban?: string;
extraurban?: string;
combined?: string;
};
weightkg?: {
unladen?: string;
};
eurostandard?: string;
coba?: string;
wltpmpg?: {
low?: string;
medium?: string;
highmpg?: string;
extrahigh?: string;
combined?: string;
emission?: string;
};
nox?: string;
nmhc?: string;
vedband?: string;
};
};
}
```
## Plugin example with UI
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin styles -->
<link href="https://plugins.wedat.eu/vsm-uk/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/vsm-uk/plugin.js"></script>
<!-- init plugin options in your JS file or inline JS like this -->
<script>
window.VEHICLE_API.init({
clientId: "id",
clientSecret: "secret",
onComplete: vehicle => {
// make what your want :)
console.log(vehicle);
},
selector: ".plugin"
});
</script>
</body>
</html>
```
## Plugin example without UI
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- no need to load styles -->
</head>
<body>
<!-- load plugin JS synchronously -->
<script src="https://plugins.wedat.eu/vsm-uk/plugin.js"></script>
<!-- init plugin options in your JS file or inline JS like this -->
<script>
window.VEHICLE_API.init({
clientId: "id",
clientSecret: "secret",
onComplete: vehicle => {
// make what your want :)
console.log(vehicle);
},
<!-- selector prop is not provided -->
inputFields: {
numberPlate: "vehicle's number plate"
}
});
</script>
</body>
</html>
```
## Total work example of renderless vsm-uk
```html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
<!-- load plugin style -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
<!-- no need to load styles -->
</head>
<style>
.json {
white-space: pre;
background: #dedede;
font-family: monospace;
}
</style>
<body>
<!-- load plugin JS synchronously -->
<script src="https://plugins.wedat.eu/vsm-uk/plugin.js"></script>
<div class="json" id="response"></div>
<!-- init plugin options in your JS file or inline JS like this -->
<script>
function print_r(object, html) {
if (html) return '<pre>' + JSON.stringify(object, null, 4) + '</pre>';
else return JSON.stringify(object, null, 4);
}
// default
window.VEHICLE_API.init({
onComplete: async vehicle => {
const hlt = hljs.highlight('json', print_r(vehicle))
const output = document.getElementById('response')
output.innerHTML = hlt.value
},
inputFields: {
numberPlate: "DG19DSV",
}
});
</script>
</body>
</html>
```
# Photo Widget
## How to use
##### 1. You need to load 2 files on your websites.
##### 2. First file is JS file.
```html
<script src="path-to-plugin-folder/plugin.js"></script>
```
##### 3. Second file is CSS file.
```html
<link href="path-to-plugin-folder/plugin.css" rel="stylesheet">
```
##### 4. After load plugin JS, you can use this functionality.
```js
const pluginOptions = {}; // see options on next chapter
window.PLUGIN_API.init(pluginOptions);
```
## Plugin Options Interface
```typescript
interface PluginStep {
// type of photo ('damage' | 'vehicle' or ets.)
photoType: string;
// show retake page after capture (default is true)
withRetake?: boolean;
// embed geolocation, date, time in the photo (default is true)
embedGeo?: boolean;
// show step in landscape mode (default is false it is mean forcePortrait)
forceLandscape?: boolean;
// show comment block after make photo
isShowComment?: boolean;
// image for help photo modal (if empty "Help modal" doesnt show before capture)
helpImg?: string;
// title below help image in modal
helpTitle?: string;
// description of help image
helpDescription?: string;
// image for mask over video
maskImg?: string;
// small image in slider during photo
previewImg?: string;
// title for preview image in slider during photo
previewTitle?: string;
}
interface PluginProps {
// selector to element where plugin will render
selector: string;
steps: PluginStep[];
// show summary page (default 'true')
// if false completeFormCallback invoke in last capture photo step
withSummary?: boolean;
completeFormCallback: (form: ResultForm) => void;
// default true
disableStreamAfterComplete?: boolean;
translates?: {
enablePermissionsTitle?: string;
enablePermissionsDescription?: string;
enablePermissionsBtn?: string;
refreshPageBtn?: string;
disablePermissionsTitle?: string;
enablePermissionsSubTitle?: string;
disablePermissionsSubTitle?: string;
enableLocationBtn?: string;
rejectCameraDescription?: string;
rejectLocationDescription?: string;
// special text message for Safari
rejectLocationDescriptionSafari?: string;
enablePermissionsSkip?: string;
tapToDismiss?: string;
commentFieldPlaceholder?: string;
positionInLandscape?: string;
positionInPortrait?: string;
reviewMediaTitle?: string;
submitBtn?: string;
additional?: string;
};
icons?: {
permissions?: string;
rejectPermissions?: string;
photoBtn?: string;
retake?: string;
usePhoto?: string;
additional?: string;
spinner?: string;
};
gpsInfo?: {
// default 'top-right'
position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
| 'center-top' | 'center-bottom';
styles?: {
// only words or rgb (e.g 'white' or 'rgb(255, 255, 10)')
fontColor?: string;
// only px (default 25px)
fontSize?: string;
// default Arial
fontFamily?: string;
// default black
backgroundColor?: string;
// only px only 4 values supports (e.g '10px 10px 10px 10px') only integer
padding?: string;
// only px
borderRadius?: string;
};
};
}
```
### Example for "One Shot"
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin style -->
<link href="plugin.css" rel="stylesheet">
</head>
<body>
<!-- this place where plugin will render -->
<div class="plugin"></div>
<!-- load plugin JS synchronously -->
<script src="plugin.js"></script>
<!-- init plugin options on your JS file or inline JS like this -->
<script>
window.PLUGIN_API.init({
selector: '.plugin',
completeFormCallback: form => {
// make what your want :)
console.log(form);
},
withSummary: false,
steps: [
{
withRetake: false,
maskImg: 'path-to-mask-img',
previewImg: 'path-to-preview-img',
previewTitle: 'Driver Side Front',
helpImg: 'path-to-help-img',
helpTitle: 'Driver Side Front',
helpDescription: 'Fit your vehicle into the outline as shown in the example above. Then capture the photo.',
},
],
});
</script>
</body>
</html>
```
### Full example:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin style -->
<link href="plugin.css" rel="stylesheet">
</head>
<body>
<!-- this place where plugin will render -->
<div class="plugin"></div>
<!-- load plugin JS synchronously -->
<script src="plugin.js"></script>
<!-- init plugin options on your JS file or inline JS like this -->
<script>
window.PLUGIN_API.init({
selector: '.plugin',
completeFormCallback: form => {
// make what your want :)
console.log(form);
},
steps: [
{
photoType: 'vehicle',
maskImg: 'path-to-mask-img',
previewImg: 'path-to-preview-img',
previewTitle: 'Driver Side Front',
helpImg: 'path-to-help-img',
helpTitle: 'Driver Side Front',
helpDescription: 'Fit your vehicle into the outline as shown in the example above. Then capture the photo.',
},
{
photoType: 'vehicle',
maskImg: 'path-to-mask-img',
previewImg: 'path-to-preview-img',
previewTitle: 'Driver Side Rear',
helpImg: 'path-to-help-img',
helpTitle: 'Driver Side Rear',
embedGeo: false
},
{
photoType: 'damage',
forceLandscape: true,
isShowComment: false,
maskImg: 'path-to-mask-img',
previewImg: 'path-to-preview-img',
previewTitle: 'Damage - Right',
helpImg: 'path-to-help-img',
helpTitle: 'Damage - Right',
},
{
photoType: 'damage',
isShowComment: false,
maskImg: 'path-to-mask-img',
previewImg: 'path-to-preview-img',
previewTitle: 'Damage - Left',
helpImg: 'path-to-help-img',
helpTitle: 'Damage - Left',
},
],
});
</script>
</body>
</html>
```
### Result Form Interface
```typescript
interface FormStep {
// base64 string
photo: string;
photoType: PluginStep['photoType'];
comment?: string;
geolocation?: {
latitude?: number;
longitude?: number;
date: string;
time: string;
};
}
interface ResultForm {
steps: FormStep[];
// additional photo
additionalSteps?: string[];
}
```
# Inbox
### Plugin options interface
```typescript
interface PluginOptions {
selector: string;
token?: string;
settings?: {
pageLimit?: string;
};
styles?: {
fontSize?: {
fieldsTitles?: number;
};
field?: {
fontSize?: number;
color?: string;
backgroundColor?: string;
};
button?: {
fontSize?: number;
color?: string;
backgroundColor?: string;
backgroundColorHover?: string;
height?: number;
};
form?: {
borderColor?: string;
borderWidth?: number;
borderRadius?: number;
backgroundColor?: string;
};
logo?: {
image?: string;
};
page?: {
bgImage?: string;
};
icons?: {
search?: string;
};
select?: {
bgImage?: string;
};
};
}
```
### Example
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin styles -->
<link href="https://plugins.wedat.eu/inbox/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/inbox/plugin.js"></script>
<!-- init plugin options in your JS file or inline JS like this -->
<script>
window.INBOX_API.init({
selector: ".plugin";
});
</script>
</body>
</html>
```
Sign in with Wallet
Connect another wallet