@vergelijkdirect/comparison-forms 1.0.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -0
- package/dist-rollup/comparison-forms.js +13560 -0
- package/dist-rollup/comparison-forms.umd.cjs +20 -0
- package/dist-rollup/style.css +9 -0
- package/package.json +64 -0
package/README.md
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# Vergelijkdirect comparison forms
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## How to install
|
|
6
|
+
|
|
7
|
+
### Standalone mode
|
|
8
|
+
|
|
9
|
+
1.Insert i-frame tag anywhere in your project, with next data:
|
|
10
|
+
|
|
11
|
+
| Queryparams | Meaning | Example |
|
|
12
|
+
|:---------------:|:----------------------------------------------------------------------------------------------------------:|:--------------------------------:|
|
|
13
|
+
| Page address | Corresponds to type of form | /motor-form |
|
|
14
|
+
| link | Indicate address, where user should be redirected after forms submit | &link=verzekeringen/results-page |
|
|
15
|
+
| 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 |
|
|
16
|
+
|
|
17
|
+
Example: <iframe src="localhost:3000/motor-form?link=http://google.com"&vd-form-version=1"></iframe>
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Embedded mode
|
|
21
|
+
|
|
22
|
+
1.Install package comparison-forms
|
|
23
|
+
2.Ensure, that version of Vue is >2.7.14
|
|
24
|
+
3.In entry js file (for example vd-partner.ts in partner-front) import comparisonFormsPlugin
|
|
25
|
+
```
|
|
26
|
+
import comparisonFormsPlugin from 'comparison-forms';
|
|
27
|
+
```
|
|
28
|
+
4.Make Vue use plugin
|
|
29
|
+
```
|
|
30
|
+
Vue.use(comparisonFormsPlugin);
|
|
31
|
+
```
|
|
32
|
+
5.During creating vue-instance of app, add property:
|
|
33
|
+
```
|
|
34
|
+
provide: { 'ITC': Vue.prototype.$transmissionClient },
|
|
35
|
+
```
|
|
36
|
+
6.For correct work of styles add globally or in correspond component styles import
|
|
37
|
+
```
|
|
38
|
+
import 'comparison-forms/styles';
|
|
39
|
+
```
|
|
40
|
+
7.Use component <embedded-comparison-forms> to render appropriate form. Below indicated props types:
|
|
41
|
+
|
|
42
|
+
| Props | Type/required | Meaning | Example |
|
|
43
|
+
|:-----------------:|:-------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------:|
|
|
44
|
+
| form-component | String/Yes | Corresponds to type of form | motor-form |
|
|
45
|
+
| link | String/No | Indicate address, where user should be redirected after forms submit | &link=verzekeringen/results-page |
|
|
46
|
+
| 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 |
|
|
47
|
+
| 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 |
|
|
48
|
+
| classes | String/No | Indicate which classes should be implemented for root element (vd-form-card) | vd-form-flat |
|
|
49
|
+
| 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 |
|
|
50
|
+
| 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 |
|
|
51
|
+
| @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 |
|
|
52
|
+
|
|
53
|
+
Example
|
|
54
|
+
|
|
55
|
+
```
|
|
56
|
+
<embedded-comparison-forms
|
|
57
|
+
@change="submitForm"
|
|
58
|
+
:form-component="'motor-form'"
|
|
59
|
+
:user-information="userInformation"
|
|
60
|
+
:insurance-state="motorState"
|
|
61
|
+
:vd-form-version="'1'"
|
|
62
|
+
:is-on-result-page="true"
|
|
63
|
+
:classes="'w-100 vd-form-card--flat'"
|
|
64
|
+
:link="'/'"
|
|
65
|
+
/>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
NOTICE: If there is :link prop, user will be redirected to this address with appropriate queryparams.
|
|
69
|
+
|
|
70
|
+
### Embedded mode Comparison forms commands
|
|
71
|
+
npm run watch - launch dev mode SSR app
|
|
72
|
+
npm run serve - launch prod mode SSR app
|
|
73
|
+
npm run test - launch test mode SSR app
|
|
74
|
+
npm run build - make build
|
|
75
|
+
npm run rollup - make rollup of comparison forms
|