Sample use case: VINMASTER plugin

For this sample use case, we will explore how to use to plugins so a user can retrieve vehicle information based on its VIN and automatically fill the form with the user data.
Figure 1: This is how modelYear and mileage auto-fill in forms.

Interface

• Plugin Input: The form data (VIN, year, state, etc).
• Plugin output: A JSONPatch object with the new data.
• Slot capability employed: Update the data in a UI form.

Step 1: Set up

1. BriteQuote offers a slot called britequote:risk-edit:button-row next to the quoting form.
2. Upload the plugin file and the name of the slot in which they want the plugin to be loaded, all via BriteUIPlugins.

Step 2: Initialize the plugin

Once the page containing such a slot is rendered, we have the plugin initialization:

1. The plugin exposes its fetchDetails method so BriteQuote can call it when it's time.
2. The plugin sends a message to BriteQuote (via an event) to let it know that it should render a button next to that iframe. It sends along the button information that the slot is waiting for (label and callback name).
3. The slot in BriteQuote renders that button and hooks up its @click event with the callback provided by the plugin.

Step 3: Plugin interaction

Now, they are ready to work together. When a user selects the Lookup vehicle button:

1. BriteQuote sends a message invoking the plugin's fetchDetails method, passing the VIN as a parameter.
2. The plugin code calls the third-party service API and, once it's done, sends the data back to BriteQuote by emitting a specific event to it.
3. Finally, the BriteQuote slot applies this data to the quoting form.

Figure 2: This is how tiered data auto-fill in forms.