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
title	Specify forms title	&title=Motorverzekering vergelijken
full-form-width	Specify, should form has 100% width of parent component, or should has strong standard borders	&full-form-width=true

Example: <iframe src="localhost:3000/motor-form?link=http://google.com"&has-new-design=1&title=Motorverzekering vergelijken&full-form-width=true"></iframe>

Embedded mode

1.Install package @vergelijkdirect/comparison-forms (Strongly recommend to use exact version of package)

npm i @vergelijkdirect/comparison-forms --save-exact

2.Ensure, that version of Vue is >2.7.14, and version of Node is 20.6.1 3.In entry js file (for example vd-partner.ts in partner-front) import comparisonFormsPlugin

import comparisonFormsPlugin from '@vergelijkdirect/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 '@vergelijkdirect/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
has-new-design	Boolean/No	Indicate which version of form styles implemented. Missing value or false mean old form, true - new redesign form (non-required)	true
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) (Will be replaced with form-location)	true
is-on-coverage-page	Boolean/No	Indicate is form used for aanvragen flow (coverages page), or for starting landing page (for exampple VD project) (Will be replaced with form-location)	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
base-url	String/No	Base url should be used only for loans create forms, specify base url	/
title	String/No	Specify title of form (by default has value vergelijken)	Motorverzekering vergelijken
show-title	Boolean/No	Boolean, that specify should title, in title prop be showed (Use value false, if there is external modal title, to prevent double titles)	false
form-orientation	String/No	Specify form orientation (Vertical or Horizontal) Should be used only for create loan form	Vertical
comparison	Comparison/No	Pass existing comparison for update actions in form. Required value for loans upgrade form	Comparison instance object
status	String/No	Now used only for travels, but will be implement instead of is-on-result/coverage page. Indicate location of form. (Will be replaced with form-location)	IS_ON_FAMILY_PAGE
form-location	String/No	String, that indicate, where form is located. Can be before flow, on result, coverages,family page.	IS_BEFORE_FLOW/IS_ON_RESULT_PAGE/IS_ON_COVERAGES_PAGE/IS_ON_FAMILY_PAGE
additional-options	Object/No	Props that contains all special data, for separate form. E.g. qustionnary data for only Risk scanner/business car forms.	{ qa_id: 'some value' }
@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
@redirect-page	Function/No	Function, that should be called, when user submit form, and should be redirected to page, indicated in link props with necessary data in queries.	Any function, that should be called after form submit
@emit-event-hub	Function/No	Function, that should be called, when user want to use external emit event. Has parameters ({ event: String, data: {...}})	emit('emit-event-hub', { event: 'call-some-external-event', data: { ...any data })

Example

            <embedded-comparison-forms
                v-if="isFormOpen"
                @change="submitForm"
                @emit-event="emitEvent"
                :form-component="'motor-form'"
                :user-information="userInformation"
                :insurance-state="motorState"
                :has-new-design="true"
                :is-on-result-page="true"
                :classes="'w-100 vd-form-card--flat'"
                :link="'/'"
                :show-title="false"
                :form-location="'IS_ON_RESULT_PAGE'"
                :additional-options="{
                    some-data-for-some-certain-form: 'some data'
                }"
            />

THE LIST OF AVAILABLE FORMS

• bike-form
• bike-form-horizontal
• bike-form-old
• business-car-form
• car-form
• car-form-horizontal
• car-form-old
• caravan-form
• caravan-form-horizontal
• caravan-form-old
• create-loan-comparison-form
• house-form
• house-form-horizontal
• house-form-old
• legal-assistance-form
• legal-assistance-form-horizontal
• legal-assistance-form-old
• liability-form
• liability-form-horizontal
• liability-form-old
• moped-form
• moped-form-horizontal
• moped-form-old
• motor-form
• motor-form-horizontal
• motor-form-old
• package-form
• pet-form
• pet-form-horizontal
• pet-form-old
• travel-form
• travel-form-horizontal
• travel-form-old
• update-loan-comparison-form

Those names should be used in form-component prop for embedded mode, or for link address for standalone version, and should be exact as in this list. If there is a need to get old horizontal form, formComponent should include: form-type-horizontal-old, or form-type-old-horizontal. E.g. motor-form-horizontal-old.

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 app
• npm run build - make build
• npm run rollup - make rollup of comparison forms