Calculation Plugin

The Calculation Plugin is designed for detecting and displaying all selected vehicle parts along with detailed pricing and labor data. It provides a breakdown of components such as:

Part Code: Unique identifiers for each part.

Quantity: Number of each part required.

Labor: Hours and cost of labor for each part's installation or repair.

Painting: Time and cost for painting relevant parts.

Material Costs: Costs associated with materials, such as paint.

Total Costs: Summarizes labor, painting, materials, and part costs into a comprehensive total for each part.

The plugin calculates the final cost for the entire job, including labor, painting, materials, and part replacements. This allows for an accurate and detailed estimate of vehicle repairs.

Demo version

Plugin options interface

interface PluginOptions {
  contractId?: number
  token?: string
  selector?: string
  credentials?: {
    customerNumber: string
    user: string
    password: string
  }
  stickyHeaderTargetId?: string
}

By providing stickyHeaderTargetId prop we can render total calculation header component (located in /src/components/TotalSums/TotalHeaderRowMobile) in separate element from outside.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- load plugin styles -->
    <link
      href="https://plugins.wedat.eu/calculation/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/calculation/plugin.js"></script>

    <!-- init plugin options in your JS file or inline JS like this -->
    <script>
      window.CALCULATE_CONTRACT.init({
        selector: '.plugin',
        contractId: '14182472',
        stickyHeaderTargetId: 'elementId'
      })
    </script>
  </body>
</html>

Example with token

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- load plugin styles -->
    <link
      href="https://plugins.wedat.eu/calculation/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/calculation/plugin.js"></script>

    <!-- init plugin options in your JS file or inline JS like this -->
    <script>
      window.CALCULATE_CONTRACT.init({
        selector: '.plugin',
        contractId: '14182472',
        stickyHeaderTargetId: 'elementId',
        token:
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJkYXQiLCJpYXQiOjE2Mjc5MTAwMTg0MDUsImNsbnQiOiIzMTMxNDExIiwidXNlciI6ImZlcnJzaW1vIiwiYXBpdCI6IlJTQS1PQUVQLTI1NiIsImFwaXIiOiJKR2lPUE5mNXMwbDVnS2xiZ2hjZjYwOEhPNU04UkRyc3l5c3ByL3RJd1BJWUJBQWNqaTJTSlRJTXowbkkwS1IyaXpwZFhUMDJEY2tHd0xEWjVKTng2MzB0TlF5OWR5cmVEM3FRN0pYWm5uUFBqU2FtR3AzbnRleTJieUdIcTAyY3I1TEF1OE1seUVGT0tDSzlGQW5BdFNXK0QvbUdwa1ZqWHNiTnphN1FMbEFZZlpadENyWnM5ejNWTXdzU1ZBVkJpbGVOc1JsTHVxbGh0bjlBVGRscjhyOEFFNlQ3QVZlV1E0RzhiWUd0amlxQmFoMzZvRG1qMlBWTFRKTGZ5NnJnN1RqRW1aNkxGOWxXTmJTT2R2YUlzTXlISjRnUFZpTUJ1T1VXejUzRkorcmVlcU1DU3VGN3loR2s1SjVRNE5PWW5aUnpjVHV4SGxkMGVyQjU3ODg1ZkJheDdyVEhTQ3ZhYjA1REUrSldKd0ovM015dzVxeDBNeXV0UDRqTjlWTS85YVF5T214Y2luYlp0OUIxNHdyR0I1RFE5dVFING9CWWhVQzNQYjUwU3plbEtQT3RZQUVCWUR6UlpqVit0cXdHTSs0clBkZVBEVVFzUGdXM0NIeXF2QUNlKzJpSGZ1a0tBbFl6bU5RWUtlbWg2TXpaZmNDWUdZVVlPVk0yVWUwMFltZ3dBc3ozdHo5VlB0OW1XQUgwTjVuWjlOYy9YOUlFYmhqN2tZYXN6cjliaVF3SVY3UVA5U1ZGRlVMc3ZUcW1ReDVjUnZXUEluaXJFTWtGcEV6Rm5ZT0trZ2d2eThKa2RQbVFIYkRuYWhOQnV3KzFlVU5SQTg0RTRYcEJwVmNxbXpidVZpNTh3d1JKVUZ4aFlUNWZPdlowa21VM3h2SGNNRVp2Q2VrYkJ4ST0ifQ.u_BZmFLGiU6W1gBSi_Q91iplYNRfmoEURVh9E'
      })
    </script>
  </body>
</html>