Grapa Plugin

The Grapa Plugin is designed to facilitate the selection of damaged vehicle parts using graphical zone mapping. This intuitive tool provides users with a visual representation of the vehicle, allowing them to:

Identify Damaged Areas: Users can easily select specific zones on a graphical depiction of the vehicle, streamlining the damage assessment process. This feature is particularly useful in visually complex cases where damages may not be immediately apparent.

Interactive Component Selection: By clicking on different areas of the vehicle diagram, users can choose various components for repair or replacement, ensuring that all damages are accounted for in the assessment.

Efficient Damage Documentation: The plugin automatically generates a list of selected damaged parts, complete with associated details such as severity and estimated costs. This organized documentation aids in accurate reporting and communication.

Integration with Repair Estimation: The Grapa Plugin seamlessly integrates with other tools for cost estimation and repair calculations, providing users with a comprehensive view of the financial implications of the identified damages.

Overall, the Grapa Plugin enhances the damage assessment process by combining visual aids with interactive functionality, making it an essential tool for automotive professionals.

Plugin Options Interface

export interface GrapaPluginOptions {
  onReturn?: (result: {
    repairPositions: RepairPositionWithRowKey[]
    deselectedSeriesEquipment?: EquipmentPosition[]
    specialEquipment?: EquipmentPosition[]
  }) => void

  // This field is for stopping unnecessary update of repair positions
  isComponent?: boolean

  selector?: string
  token?: string
  credentials?: {
    interfacePartnerNumber?: string
    interfacePartnerSignature?: string
    customerNumber: string
    customerLogin: string
    customerPassword: string
  }
  datServicesUrls?: DatServicesUrls

  locale?: string // like 'en-US' 'ru-RU'

  settings?: {
    debuggingMode?: boolean // if true show settings button "gear wheel"

    locale?: {
      country: string // 'ru'
      datCountryIndicator: string // 'ru'
      language: string // 'RU'
    }

    maxWidth?: string
    height?: string
    maxMobileWidth?: number
    showFullscreen?: boolean
    graphicDamageFormId?: string // ModalFastButton BottomDrawerFastButton
    damageFormViewId?: 'oneClickDamage' | 'preselectPartDamage'

    showFastMovingBar?: boolean
    showMenuGenericGroups?: boolean
    showMenuGenericGraphics?: boolean

    showZoomButton?: boolean

    useFastTrackDamagesOnGenericGraphic?: boolean

    contract?: {
      complexTemplateData?: {
        attr?: {
          templateType?: string // contractType: 'vro_calculation', 'vro_domus_calculation'
        }
      }
      Dossier?: {
        Vehicle?: {
          DatECode?: string
          ConstructionTime?: number
          Equipment?: {
            SeriesEquipment?: EquipmentPositions
            DeselectedSeriesEquipment?: EquipmentPositions
            SpecialEquipment?: EquipmentPositions
            // AdditionalEquipment?: EquipmentPositions;
          }
          VINResult?: {
            VINEquipments?: VINEquipments
          }
        }
        RepairCalculation?: {
          RepairPositions?: {
            RepairPosition?: DAT5.MyClaimExternalService_schema2.RepairPosition[]
          }
        }
      }
    }

    genericSVGGraphics?: Array<{
      graphicId: string
      label?: string
      sourceUrl: string
    }>

    fastMovingBar?: FastMovingBarItems[]

    ftSettings?: {
      ftDamages?: ftDamagesType
      ftRepairs?: ftRepairType[]
      ftGroups?: ftGroupsType
      ftDvnMap?: FtDvnMapType
    }

    i18n?: {
      resources: Resource
    }
  }
}

export interface FastMovingBarItems {
  menuGroupId: string
  menuGroupLabel?: string
  menuGroupImgUrl?: string
  svgIcon?: string
  elementDatIDs: string[]
}

export interface DatServicesUrls {
  soapMyClaimTokenService?: string
  soapMyClaimExternalServiceUrl?: string
  soapVehicleIdentificationServiceUrl?: string
  soapVehicleRepairServiceUrl?: string
  urlConversionFunctionsService?: string
  restFastTrackServiceUrl?: string
  restTokenServiceUrl?: string
  sparePartsServiceUrl?: string // ignoring value, always use: 'https://www.dat.de/PartsInfo/services/SpareParts', with hardcoded credentials
  staticGrapaServiceUrl?: string
}

export const defaultServicesUrls: DatServicesUrls = {
  soapMyClaimTokenService:
    'https://www.dat.de/myClaim/soap/v2/MyClaimExternalAuthenticationService',
  soapMyClaimExternalServiceUrl:
    'https://www.dat.de/myClaim/soap/v2/MyClaimExternalService',
  soapVehicleIdentificationServiceUrl:
    'https://www.dat.de/myClaim/soap/v2/VehicleIdentificationService',
  soapVehicleRepairServiceUrl:
    'https://www.dat.de/myClaim/soap/v2/VehicleRepairService',
  urlConversionFunctionsService:
    'https://www.dat.de/myClaim/soap/v2/ConversionFunctionsService',
  restFastTrackServiceUrl: 'https://www.dat.de/myClaim/rest/FastTrackService',
  restTokenServiceUrl:
    'https://www.dat.de/AuthorizationManager/service--/endpoint/tokenService',
  staticGrapaServiceUrl:
    'https://api.plugins.wedat.eu/vehicle-static-data/static-images/test-app.datrus.ru/grapa-service/'
}

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- load plugin style -->
    <link href="https://plugins.wedat.eu/grapa-2/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/grapa-2/plugin.js"></script>

    <!-- init plugin options on your JS file or inline JS like this -->
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        window.GRAPA_2.init({
          selector: '.plugin',
          settings: {}
        })
      })
    </script>
  </body>
</html>

Example with token

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- load plugin style -->
    <link href="https://plugins.wedat.eu/grapa-2/plugin.css" rel="stylesheet" />
  </head>
  <body>
    <div class="iframeContainer" id="#iframeContainer"></div>

    <script src="https://tst.wedat.eu/grapa-2/plugin.js"></script>

    <script>
      window.GRAPA_2.init({
        selector: '.iframeContainer',
        // token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJkYXQiLCJpYXQiOjE2MzcxNjYzOTg1MjgsImNsbnQiOiIxMzI4ODAwIiwidXNlciI6ImZlcnJzaW1vIiwiYXBpdCI6IlJTQS1PQUVQLTI1NiIsImFwaXIiOiJuRzVoMGRjdzVHZ0Q0NGRiV2gybXdlSVk0WUhFNmhqcmJiYXhEdFlHbFpnNCtvOTg2aVNIb0tURkdzelNTbzFtZWtpQjlWOGxhNGVPVklZdDRZbmVUMVlWR2RnNmg1SjZ0c2U0VGI0OUNvZ3RPN2VXL3VCdTh0T0pseGZwK3VNYzlPeThBR1VxNXgraVBTRjQ0Yll6K2NXT2VrdFQvMStVczdQSGw3ZXc1WUg4WkUvNTIxZUliRkhJcTJJb1FXcndldTkrNkFlUEswWFVEaU1hamJ3WTJPbFpaVzUvS0xKSExoaDNzamVtbEh5eTNGME5wTm1jMmo4Szh4OVdDdFMyRWFEYVk4dGtWaWk5d1E0bWJJaWpFemlxS1VQZTExdk1XYmYrV3h6bVZlUFhzS0xwV3FEbUtadlpFMUxKZ1JWWXpOcTV0Tmg1N1hsbWdBSmhobGt6MWpmRHlJRjFTWElwbmVnT2pOM3BpOEdiMmhyRmYvbjRlRWxNQ2ZQOStwMEtqZUo0eWNQdUgvQmhMQjAzMHF2N0RaL1lCZEFIRHJJUTR6K3p6T0JzN09ETHN6Z0UrY3FVSjcvcUZFM2doWWZObUR5MjdJSmtzK0U0V3lPRmxyU0hSK1RHV2taYmwwb081WXNCSDJsQjh4K294V1VEK3cvclh6VlpidU5mSHhZVmZXODdBaXdSOHVweW1jYXdPUjNJb3h4VkI0SzFpZzBSY2ltVmd4OElMbHVyMGVPRitTZXRhY0NUOW1iSlVFMXJscDFJaFdRNzZVMk02ZGE2NG1vUEpWTkdwblZpNkVPQ0psZTZpZmFkbmhDZFZveEwvWHVkTHI0N0RtVFQ1YlR2ZGRNSzBFSnBMbEVTY1lSU0svSDc1U2FISUxWaTcvZDNRNXZ4d3c0alJ4MD0ifQ.llTNeXFrBDX3XnXO6fFw4MJaAftFEBu8SHckMcW0pIU',
        credentials: {
          interfacePartnerNumber: '3131411',
          interfacePartnerSignature:
            'jA0EAwMCrjjoCCEuBBBgySvQtBjnp+NKnkteqoMkkzMRZlXddAQsnEG1vdDRAyRfRq+a41mrUtxJrmOg',
          customerNumber: '1328800',
          customerLogin: 'xxx',
          customerPassword: 'xxx'
        },
        settings: {
          locale: {
            country: 'DE',
            datCountryIndicator: 'DE',
            language: 'DE'
          },
          contract: {
            Dossier: {
              Vehicle: {
                DatECode: '015701013100007',
                ConstructionTime: 6125
              }
            }
          },
          maxWidth: '100%',
          showFullscreen: false
        }
      })
    </script>
  </body>
</html>