Claim Stepper Plugin

The Claim-Stepper plugin provides a flexible framework for creating new contracts or interacting with existing ones through a series of configurable steps. Each step in the configuration is represented by an object, and it can integrate multiple plugins, such as FormBuilder, VSM, or DamageSelector, depending on the step’s requirements.
To modify the step sequence, simply remove the corresponding object from the main configuration to delete a step or add a new object to introduce a new step. Each added step must adhere to the StepperConfig interface. If a step includes the FormBuilder plugin, it requires an options key configured according to FormBuilderPluginOptions; otherwise, the options key should remain as an empty object.
This plugin offers a streamlined, modular approach to managing complex workflows.

Demo version

Plugin options interface

interface PluginOptions {
  config: StepperConfig[]
  contractId?: number
  settings?: {
    networkType?: DAT2.NetworkType
  }
}

Example of config

const CONFIG: StepperConfig[] = [
  {
    title: 'Selection Client',
    plugin: ['FormBuilder'],
    options: CUSTOMER_INFO_OPTIONS
  },
  {
    title: 'Selection vehicle',
    plugin: ['VehicleSelectionModal'],
    options: {}
  },
  {
    title: 'Damage information',
    plugin: ['FormBuilder', 'DamageSelector'],
    options: DAMAGE_INFO_OPTIONS
  },
  {
    title: 'Selection assurance',
    plugin: ['FormBuilder'],
    options: INSURANCE_INFO_OPTIONS
  }
]

<!DOCTYPE html>
<html lang="en" translate="no">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Claim Stepper</title>
    <script
      type="module"
      crossorigin
      src="https://plugins.wedat.eu/claim-stepper/plugin.js"
    ></script>
    <link
      rel="stylesheet"
      crossorigin
      href="https://plugins.wedat.eu/claim-stepper/plugin.css"
    />
  </head>
  <body>
    <div id="root"></div>

    <script>
      document.addEventListener('DOMContentLoaded', () => {
        window.CLAIM_STEPPER_API &&
          window.CLAIM_STEPPER_API.init({
            selector: '#root',
            //need for redirect to claim/:id/route in claim-management after create contract
            redirectToClaimPageCallback: (path) => {},
            //need for disable location.reload()
            withoutReloadLocation: true,
            //invokes right after vehicle submit
            onVehicleSelection: (contractId) => {},
            //invokes when plugin-cars completed
            onCompletePluginCars: () => {},
            //invokes when VSM modal is closed without submit
            onVSMDismiss: () => {},
            //callback invokes after each claim calculation
            onComplete: (contractId) => {},
            //to hide save button in the last page
            withoutSaveButton: false,
            //make all included plugins readOnly
            readOnly: false,
            //to adapt outer container size (if exists)
            containerSize: '100%',
            //callback invokes after changing step
            onChangedStepCallback: (step) => console.log(step),
            // invokes after save
            onFinishCallback: (claimId) => {
              console.log(cliamId)
            },
            //to hide navigation buttons in the footer
            hideFooter: false,
            contractId: 48424991,
            credentials: {
              customerNumber: '3131411',
              user: 'ferrsimo',
              password: 'ferrsimo01'
            },
            config: {
              config: [
                {
                  title: 'VehicleSelection',
                  plugin: ['VehicleSelectionModal'],
                  status: {
                    statusId: 102654,
                    statusName: 'Relevato'
                  },
                  options: {}
                },

                {
                  title: 'Grapa',
                  plugin: ['Grapa'],
                  status: {
                    statusId: 102654,
                    statusName: 'Relevato'
                  },
                  options: {}
                },

                {
                  title: 'Calculation',
                  plugin: ['Calculation'],
                  status: {
                    statusId: 102654,
                    statusName: 'Relevato'
                  },
                  options: {}
                },
                {
                  title: 'Gallery',
                  plugin: ['Gallery'],
                  status: {
                    statusId: 102654,
                    statusName: 'Relevato'
                  },
                  options: {}
                },
                {
                  title: 'AssignPartner',
                  plugin: ['AssignPartner'],
                  status: {
                    statusId: 102654,
                    statusName: 'Relevato'
                  },
                  options: {}
                }
              ]
            },

            onLogin: () => alert('Logged in!')
          })
      })
    </script>
  </body>
</html>