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">

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