Vergelijkdirect comparison forms

This project designed to provide single source of true for insurances forms. It supports two mode: standalone and embedded. Standalone designed as SSR application, with its own server and clients sides. Can be implemented due i-frame anywhere. Embedded version using node dependency comparison-forms, that can be downloaded from NPM.

How to install

Standalone mode

1.Insert i-frame tag anywhere in your project, with next data:

| Queryparams | Meaning | Example | |:---------------:|:----------------------------------------------------------------------------------------------------------:|:--------------------------------:| | Page address | Corresponds to type of form | /motor-form | | link | Indicate address, where user should be redirected after forms submit | &link=verzekeringen/results-page | | vd-form-version | Indicate which version of form styles implemented. Missing value or 0 mean old form, 1 - new redesign form | &vd-form-version=1 |

Example: <iframe src="localhost:3000/motor-form?link=http://google.com"&vd-form-version=1">

Embedded mode

1.Install package comparison-forms 2.Ensure, that version of Vue is >2.7.14 3.In entry js file (for example vd-partner.ts in partner-front) import comparisonFormsPlugin

import comparisonFormsPlugin from 'comparison-forms';

4.Make Vue use plugin

Vue.use(comparisonFormsPlugin);

5.During creating vue-instance of app, add property:

provide: { 'ITC': Vue.prototype.$transmissionClient },

6.For correct work of styles add globally or in correspond component styles import

import 'comparison-forms/styles';

7.Use component to render appropriate form. Below indicated props types:

| Props | Type/required | Meaning | Example | |:-----------------:|:-------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------:| | form-component | String/Yes | Corresponds to type of form | motor-form | | link | String/No | Indicate address, where user should be redirected after forms submit | &link=verzekeringen/results-page | | vd-form-version | String/No | Indicate which version of form styles implemented. Missing value or 0 mean old form, 1 - new redesign form (non-required) | 1 | | is-on-result-page | Boolean/No | Indicate is form used for aanvragen flow (result page, coverages page etc), or for starting landing page (for exampple VD project) | true | | classes | String/No | Indicate which classes should be implemented for root element (vd-form-card) | vd-form-flat | | insurance-state | Object/No | There should be indicated object with data for insurance. Used to show data in inputs, if user already filled in form. | for motor insurance can be included object motorState from store | | user-information | Object/No | There should be indicated object with user's data. Used to show data in inputs, if user already filled in form. | Usually it's userInformation object from store | | @change | Function/No | Function, that should be called, when user submit form. Has parameters ({ insuranceState: {...}, userInformation: {...} }), that can be used for furtner actions with this data | Any function, that should be called after form submit |

Example

            <embedded-comparison-forms
                @change="submitForm"
                :form-component="'motor-form'"
                :user-information="userInformation"
                :insurance-state="motorState"
                :vd-form-version="'1'"
                :is-on-result-page="true"
                :classes="'w-100 vd-form-card--flat'"
                :link="'/'"
            />

NOTICE: If there is :link prop, user will be redirected to this address with appropriate queryparams.

Embedded mode Comparison forms commands

npm run watch - launch dev mode SSR app npm run serve - launch prod mode SSR app npm run test - launch test mode SSR app npm run build - make build npm run rollup - make rollup of comparison forms