@vergelijkdirect/comparison-forms v1.1.11

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:

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:

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

THE LIST OF AVAILABLE FORMS

• motor-form
• motor-form-horizontal
• create-loan-comparison-form
• update-loan-comparison-form
• car-form
• car-form-horizontal
• moped-form
• moped-form-horizontal
• pet-form
• pet-form-horizontal
• bike-form
• bike-form-horizontal
• caravan-form
• caravan-form-horizontal
• liability-form
• liability-form-horizontal
• travel-form
• travel-form-horizontal
• legal-assistance-form
• legal-assistance-form-horizontal
• house-form
• house-form-horizontal
• package-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.

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