project-booster-vue 9.51.2 → 9.52.0
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/package.json +1 -1
- package/src/components/rework/question/city-search/__snapshots__/storyshots-puppeteer-test-puppeteer-ts-image-storyshots-project-booster-rework-questions-m-pb-city-search-/360/237/246/240-showcase-feature-customize-1-snap.png +0 -0
- package/src/components/trezor/PbTrezor.stories.mdx +20 -2
- package/src/components/trezor/PbTrezor.vue +287 -109
- package/src/components/trezor/__snapshots__/storyshots-puppeteer-test-puppeteer-ts-image-storyshots-project-booster-components-trezor-pb-trezor-/360/237/246/240-101-sandbox-1-snap.png +0 -0
- package/src/components/trezor/default-payload.json +4 -0
- package/src/services/api/mocks/jsons/trezor.json +29 -0
- package/src/services/api/mocks/trezorMock.ts +6 -0
- package/src/services/api/trezorApi.ts +12 -0
- package/src/stores/modules/trezorStore.ts +22 -6
package/package.json
CHANGED
|
@@ -1,13 +1,25 @@
|
|
|
1
1
|
import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
|
|
2
2
|
import { ArgsTable, Canvas, Meta, Source, Story } from '@storybook/addon-docs';
|
|
3
|
+
import { rest } from 'msw';
|
|
3
4
|
import cloneDeep from 'lodash.clonedeep';
|
|
4
5
|
import PbTrezor from './PbTrezor';
|
|
5
6
|
import DEFAULT_PAYLOAD from './default-payload.json';
|
|
7
|
+
import trezorStore from '../../stores/modules/trezorStore';
|
|
8
|
+
import { getPartnersResolver } from '../../services/api/mocks/trezorMock';
|
|
6
9
|
|
|
7
10
|
<Meta
|
|
8
11
|
title="Project Booster/Components/Trezor/PbTrezor 🦠"
|
|
9
12
|
component={PbTrezor}
|
|
10
|
-
decorators={[
|
|
13
|
+
decorators={[
|
|
14
|
+
nestedAppDecorator(
|
|
15
|
+
{
|
|
16
|
+
modules: {
|
|
17
|
+
trezor: trezorStore,
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
[],
|
|
21
|
+
),
|
|
22
|
+
]}
|
|
11
23
|
parameters={{ layout: 'fullscreen' }}
|
|
12
24
|
/>
|
|
13
25
|
|
|
@@ -41,7 +53,13 @@ export const TemplateSandbox = (args, { argTypes }) => ({
|
|
|
41
53
|
});
|
|
42
54
|
|
|
43
55
|
<Canvas>
|
|
44
|
-
<Story
|
|
56
|
+
<Story
|
|
57
|
+
name="101 Sandbox"
|
|
58
|
+
args={{ payload: DEFAULT_PAYLOAD }}
|
|
59
|
+
parameters={{
|
|
60
|
+
msw: [rest.get('/api/leads/partners', getPartnersResolver)],
|
|
61
|
+
}}
|
|
62
|
+
>
|
|
45
63
|
{TemplateSandbox.bind({})}
|
|
46
64
|
</Story>
|
|
47
65
|
</Canvas>
|
|
@@ -13,86 +13,207 @@
|
|
|
13
13
|
</div>
|
|
14
14
|
|
|
15
15
|
<form action="" class="pb-trezor__form">
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
16
|
+
<div class="pb-trezor__container">
|
|
17
|
+
<div class="ml-flexy">
|
|
18
|
+
<div class="pb-trezor__form__col">
|
|
19
|
+
<m-flex class="pb-trezor__form__row space" direction="column">
|
|
20
|
+
<label class="pb-trezor__form__label" style="margin-bottom: 0.5rem"
|
|
21
|
+
>Civilité<span> - obligatoire</span></label
|
|
22
|
+
>
|
|
23
|
+
<m-flex class="pb-trezor__form__row">
|
|
24
|
+
<m-radio
|
|
25
|
+
class="pb-trezor__form__radio"
|
|
26
|
+
name="civility-radio-group"
|
|
27
|
+
label="Monsieur"
|
|
28
|
+
key="male"
|
|
29
|
+
v-model="formData.values.male"
|
|
30
|
+
:invalid="!!formData.errors.female"
|
|
31
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'CIVILITY_MALE')"
|
|
32
|
+
/>
|
|
33
|
+
<m-radio
|
|
34
|
+
class="pb-trezor__form__radio"
|
|
35
|
+
name="civility-radio-group"
|
|
36
|
+
label="Madame"
|
|
37
|
+
key="female"
|
|
38
|
+
v-model="formData.values.female"
|
|
39
|
+
:invalid="!!formData.errors.female"
|
|
40
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'CIVILITY_FEMALE')"
|
|
41
|
+
/>
|
|
42
|
+
</m-flex>
|
|
43
|
+
</m-flex>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="pb-trezor__form__col"></div>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<div class="ml-flexy">
|
|
50
|
+
<div class="pb-trezor__form__col">
|
|
51
|
+
<m-flex class="pb-trezor__form__row">
|
|
52
|
+
<m-text-input
|
|
53
|
+
v-model="formData.values.lastname"
|
|
54
|
+
:error="formData.errors.lastname"
|
|
55
|
+
type="text"
|
|
56
|
+
label="Nom"
|
|
57
|
+
:required="true"
|
|
58
|
+
class="pb-trezor__input"
|
|
59
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'LASTNAME')"
|
|
60
|
+
></m-text-input>
|
|
61
|
+
</m-flex>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<div class="pb-trezor__form__col">
|
|
65
|
+
<m-flex class="pb-trezor__form__row">
|
|
66
|
+
<m-text-input
|
|
67
|
+
v-model="formData.values.firstname"
|
|
68
|
+
:error="formData.errors.firstname"
|
|
69
|
+
type="text"
|
|
70
|
+
label="Prénom"
|
|
71
|
+
:required="true"
|
|
72
|
+
class="pb-trezor__input"
|
|
73
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'FIRSTNAME')"
|
|
74
|
+
></m-text-input>
|
|
75
|
+
</m-flex>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<div class="ml-flexy">
|
|
80
|
+
<div class="pb-trezor__form__col">
|
|
81
|
+
<m-flex class="pb-trezor__form__row">
|
|
82
|
+
<m-text-input
|
|
83
|
+
v-model="formData.values.address"
|
|
84
|
+
:error="formData.errors.address"
|
|
85
|
+
type="text"
|
|
86
|
+
label="Adresse"
|
|
87
|
+
:required="true"
|
|
88
|
+
class="pb-trezor__input"
|
|
89
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'ADDRESS')"
|
|
90
|
+
></m-text-input>
|
|
91
|
+
</m-flex>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div class="pb-trezor__form__col">
|
|
95
|
+
<m-flex class="pb-trezor__form__row">
|
|
96
|
+
<m-text-input
|
|
97
|
+
v-model="formData.values.additionalAddress"
|
|
98
|
+
:error="formData.errors.additionalAddress"
|
|
99
|
+
type="text"
|
|
100
|
+
label="Complément d'adresse"
|
|
101
|
+
:required="false"
|
|
102
|
+
class="pb-trezor__input"
|
|
103
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'ADDITIONNAL_ADDRESS')"
|
|
104
|
+
></m-text-input>
|
|
105
|
+
</m-flex>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div class="ml-flexy">
|
|
110
|
+
<div class="pb-trezor__form__col">
|
|
111
|
+
<m-flex class="pb-trezor__form__row">
|
|
112
|
+
<m-text-input
|
|
113
|
+
v-model="formData.values.zipcode"
|
|
114
|
+
:error="formData.errors.zipcode"
|
|
115
|
+
type="text"
|
|
116
|
+
label="Code postal"
|
|
117
|
+
:required="true"
|
|
118
|
+
class="pb-trezor__input"
|
|
119
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'ZIPCODE')"
|
|
120
|
+
></m-text-input>
|
|
121
|
+
</m-flex>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<div class="pb-trezor__form__col">
|
|
125
|
+
<m-flex class="pb-trezor__form__row">
|
|
126
|
+
<m-text-input
|
|
127
|
+
v-model="formData.values.city"
|
|
128
|
+
:error="formData.errors.city"
|
|
129
|
+
type="text"
|
|
130
|
+
label="Ville"
|
|
131
|
+
:required="true"
|
|
132
|
+
class="pb-trezor__input"
|
|
133
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'CITY')"
|
|
134
|
+
></m-text-input>
|
|
135
|
+
</m-flex>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<div class="ml-flexy">
|
|
140
|
+
<div class="pb-trezor__form__col">
|
|
141
|
+
<m-flex class="pb-trezor__form__row">
|
|
142
|
+
<m-text-input
|
|
143
|
+
v-model="formData.values.email"
|
|
144
|
+
:error="formData.errors.email"
|
|
145
|
+
type="email"
|
|
146
|
+
label="E-mail"
|
|
147
|
+
:required="true"
|
|
148
|
+
class="pb-trezor__input"
|
|
149
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'EMAIL')"
|
|
150
|
+
></m-text-input>
|
|
151
|
+
</m-flex>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<div class="pb-trezor__form__col">
|
|
155
|
+
<m-flex class="pb-trezor__form__row">
|
|
156
|
+
<m-text-input
|
|
157
|
+
v-model="formData.values.phone"
|
|
158
|
+
:error="formData.errors.phone"
|
|
159
|
+
type="phone"
|
|
160
|
+
label="Numéro de téléphone"
|
|
161
|
+
:required="true"
|
|
162
|
+
class="pb-trezor__input"
|
|
163
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'PHONE')"
|
|
164
|
+
></m-text-input>
|
|
165
|
+
</m-flex>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<div class="ml-flexy">
|
|
170
|
+
<div class="pb-trezor__form__col ml-flexy__col--5of6 no-padding">
|
|
171
|
+
<m-flex class="pb-trezor__form__row space" direction="column">
|
|
172
|
+
<label class="pb-trezor__form__label"><span>obligatoire</span></label>
|
|
173
|
+
<div class="pb-trezor__form__checkbox-container">
|
|
174
|
+
<m-checkbox
|
|
175
|
+
class="pb-trezor__form__checkbox"
|
|
176
|
+
:invalid="!!formData.errors.optin"
|
|
177
|
+
v-model="formData.values.optin"
|
|
178
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'CGU')"
|
|
179
|
+
></m-checkbox>
|
|
180
|
+
<label class="pb-trezor__form__checkbox-container__label">
|
|
181
|
+
<label>J'ai lu est accepte sans réserve </label>
|
|
182
|
+
<a href="https://www.leroymerlin.fr/cgu-cgv.html" target="_blank"
|
|
183
|
+
>les conditions générales d'utilisation du site</a
|
|
184
|
+
>
|
|
185
|
+
</label>
|
|
186
|
+
</div>
|
|
187
|
+
</m-flex>
|
|
188
|
+
|
|
189
|
+
<m-flex class="pb-trezor__form__row space" direction="column">
|
|
190
|
+
<label class="pb-trezor__form__label"><span>obligatoire</span></label>
|
|
191
|
+
<div class="pb-trezor__form__checkbox-container">
|
|
192
|
+
<m-checkbox
|
|
193
|
+
class="pb-trezor__form__checkbox"
|
|
194
|
+
:invalid="!!formData.errors.optinPartners"
|
|
195
|
+
v-model="formData.values.optinPartners"
|
|
196
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'PARTNER')"
|
|
197
|
+
></m-checkbox>
|
|
198
|
+
<label class="pb-trezor__form__checkbox-container__label">
|
|
199
|
+
<label>J'autorise Leroy Merlin à transmettre les données collectées ici à l'un de </label>
|
|
200
|
+
<a href="#" @click.prevent="showModal = true">nos partenaires</a>
|
|
201
|
+
<label> susceptibles de réaliser le chantier (en fonction de critères géographiques)</label>
|
|
202
|
+
</label>
|
|
203
|
+
</div>
|
|
204
|
+
</m-flex>
|
|
205
|
+
|
|
206
|
+
<m-flex class="pb-trezor__form__row space" direction="column">
|
|
207
|
+
<m-checkbox
|
|
208
|
+
class="pb-trezor__form__checkbox"
|
|
209
|
+
v-model="formData.values.optinOffers"
|
|
210
|
+
label="J'accepte de recevoir des offres commerciales de Leroy Merlin"
|
|
211
|
+
:data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'OPTIN_OFFERS')"
|
|
212
|
+
></m-checkbox>
|
|
213
|
+
</m-flex>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
96
217
|
|
|
97
218
|
<div class="pb-trezor__container">
|
|
98
219
|
<m-flex class="pb-trezor__container--button" direction="row">
|
|
@@ -112,23 +233,38 @@
|
|
|
112
233
|
</div>
|
|
113
234
|
</form>
|
|
114
235
|
</m-flex>
|
|
236
|
+
|
|
237
|
+
<m-modal v-if="showModal" :open="showModal" modalTitle="Nos partenaires" class="mc-modal--overflow">
|
|
238
|
+
<template #default>
|
|
239
|
+
<h4>Nos partenaires sont :</h4>
|
|
240
|
+
<ul>
|
|
241
|
+
<li v-for="(partner, i) in partners" :key="'partner_' + i">{{ partner }}</li>
|
|
242
|
+
</ul>
|
|
243
|
+
</template>
|
|
244
|
+
<template #footer>
|
|
245
|
+
<m-button label="Fermer" @click.prevent="showModal = false" />
|
|
246
|
+
</template>
|
|
247
|
+
</m-modal>
|
|
115
248
|
</template>
|
|
116
249
|
|
|
117
250
|
<script lang="ts">
|
|
118
|
-
import { defineComponent, PropType, ref } from 'vue';
|
|
251
|
+
import { defineComponent, PropType, ref, computed } from 'vue';
|
|
119
252
|
import { useStore } from 'vuex';
|
|
120
253
|
import MFlex from './../mozaic/flex/MFlex.vue';
|
|
121
254
|
import MButton from '../mozaic/buttons/MButton.vue';
|
|
122
255
|
import MCheckbox from '../mozaic/checkbox/MCheckbox.vue';
|
|
123
256
|
import MLink from '../mozaic/link/MLink.vue';
|
|
124
257
|
import MTextInput from '../mozaic/text-input/MTextInput.vue';
|
|
258
|
+
import MRadio from '../mozaic/radio/MRadio.vue';
|
|
125
259
|
import { ScenarioStepAnswer } from '@/types/pb/Scenario';
|
|
126
260
|
import { object, string, boolean, number } from 'yup';
|
|
127
261
|
import { TrezorInterface } from './PbTrezorInterface';
|
|
128
262
|
import objectPath from 'object-path';
|
|
263
|
+
import { sanitizeCerberusAttribut } from '@/services/sanitize';
|
|
264
|
+
import { MModal } from '@mozaic-ds/vue-3';
|
|
265
|
+
|
|
129
266
|
const BACK_ICON =
|
|
130
267
|
'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
|
|
131
|
-
import { sanitizeCerberusAttribut } from '@/services/sanitize';
|
|
132
268
|
|
|
133
269
|
export default defineComponent({
|
|
134
270
|
name: 'PbTrezor',
|
|
@@ -138,6 +274,8 @@ export default defineComponent({
|
|
|
138
274
|
MTextInput,
|
|
139
275
|
MCheckbox,
|
|
140
276
|
MLink,
|
|
277
|
+
MRadio,
|
|
278
|
+
MModal,
|
|
141
279
|
},
|
|
142
280
|
props: {
|
|
143
281
|
/**
|
|
@@ -225,39 +363,51 @@ export default defineComponent({
|
|
|
225
363
|
|
|
226
364
|
let formData = ref<any>({
|
|
227
365
|
values: {
|
|
366
|
+
male: false,
|
|
367
|
+
female: false,
|
|
228
368
|
lastname: '',
|
|
229
369
|
firstname: '',
|
|
370
|
+
address: '',
|
|
371
|
+
additionalAddress: '',
|
|
230
372
|
zipcode: zipcode,
|
|
373
|
+
city: '',
|
|
231
374
|
email: '',
|
|
232
375
|
phone: '',
|
|
233
376
|
optin: false,
|
|
234
377
|
optinPartners: false,
|
|
235
378
|
},
|
|
236
|
-
errors: {
|
|
237
|
-
lastname: '',
|
|
238
|
-
firstname: '',
|
|
239
|
-
zipcode: '',
|
|
240
|
-
email: '',
|
|
241
|
-
phone: '',
|
|
242
|
-
},
|
|
379
|
+
errors: {},
|
|
243
380
|
});
|
|
244
381
|
|
|
245
382
|
const validationSchema = object({
|
|
383
|
+
male: boolean().test(() => {
|
|
384
|
+
return formData.value.values.male === true || formData.value.values.female === true;
|
|
385
|
+
}),
|
|
386
|
+
female: boolean().test(() => {
|
|
387
|
+
return formData.value.values.male === true || formData.value.values.female === true;
|
|
388
|
+
}),
|
|
246
389
|
lastname: string().required(),
|
|
247
390
|
firstname: string().required(),
|
|
391
|
+
address: string().required(),
|
|
248
392
|
zipcode: string()
|
|
249
393
|
.required()
|
|
250
394
|
.test(() => {
|
|
251
|
-
return formData.value.values.zipcode
|
|
395
|
+
return formData.value.values.zipcode.length === 5;
|
|
252
396
|
}),
|
|
397
|
+
city: string().required(),
|
|
253
398
|
email: string().email().required(),
|
|
254
399
|
phone: string()
|
|
255
400
|
.required()
|
|
256
401
|
.test(() => {
|
|
257
|
-
return formData.value.values.phone
|
|
402
|
+
return formData.value.values.phone.length === 10;
|
|
258
403
|
}),
|
|
259
|
-
optin: boolean()
|
|
260
|
-
|
|
404
|
+
optin: boolean().test(() => {
|
|
405
|
+
return formData.value.values.optin === true;
|
|
406
|
+
}),
|
|
407
|
+
optinPartners: boolean().test(() => {
|
|
408
|
+
return formData.value.values.optin === true;
|
|
409
|
+
}),
|
|
410
|
+
optinOffers: boolean(),
|
|
261
411
|
});
|
|
262
412
|
|
|
263
413
|
const validateAllFields = async (action: any) => {
|
|
@@ -269,12 +419,19 @@ export default defineComponent({
|
|
|
269
419
|
customer: {
|
|
270
420
|
lastname: formData.value.values.lastname,
|
|
271
421
|
firstname: formData.value.values.firstname,
|
|
422
|
+
civility: formData.value.values.male ? 'MALE' : 'FEMALE',
|
|
272
423
|
zip: formData.value.values.zipcode,
|
|
424
|
+
city: formData.value.values.city,
|
|
425
|
+
address:
|
|
426
|
+
formData.value.values.additionalAddress == ''
|
|
427
|
+
? formData.value.values.address
|
|
428
|
+
: formData.value.values.address + ', ' + formData.value.values.additionalAddress,
|
|
273
429
|
email: formData.value.values.email,
|
|
274
430
|
phone: formData.value.values.phone,
|
|
275
431
|
},
|
|
276
432
|
optin: formData.value.values.optin,
|
|
277
433
|
optinPartners: formData.value.values.optinPartners,
|
|
434
|
+
optinOffers: formData.value.values.optinOffers,
|
|
278
435
|
metadata: sendingMetadata,
|
|
279
436
|
},
|
|
280
437
|
typeLead: props.payload.viewModel.typeLead,
|
|
@@ -292,8 +449,10 @@ export default defineComponent({
|
|
|
292
449
|
}
|
|
293
450
|
})
|
|
294
451
|
.catch((err) => {
|
|
452
|
+
formData.value.errors = {};
|
|
453
|
+
|
|
295
454
|
err.inner.forEach((e: any) => {
|
|
296
|
-
formData.value.errors[e.path] = translationErrors[e.path];
|
|
455
|
+
formData.value.errors[e.path] = translationErrors[e.path] || e.message;
|
|
297
456
|
});
|
|
298
457
|
});
|
|
299
458
|
};
|
|
@@ -304,11 +463,20 @@ export default defineComponent({
|
|
|
304
463
|
}
|
|
305
464
|
};
|
|
306
465
|
|
|
466
|
+
// MODAL
|
|
467
|
+
let showModal = ref(false);
|
|
468
|
+
|
|
469
|
+
store.dispatch('trezor/loadPartners');
|
|
470
|
+
|
|
471
|
+
const partners = computed(() => store.getters['trezor/getPartners']);
|
|
472
|
+
|
|
307
473
|
return {
|
|
308
474
|
formData,
|
|
309
475
|
callAction,
|
|
310
476
|
BACK_ICON,
|
|
311
477
|
sanitizeCerberusAttribut,
|
|
478
|
+
showModal,
|
|
479
|
+
partners,
|
|
312
480
|
};
|
|
313
481
|
},
|
|
314
482
|
});
|
|
@@ -324,7 +492,7 @@ $responsive-breakpoint: 'm';
|
|
|
324
492
|
|
|
325
493
|
.pb-trezor {
|
|
326
494
|
margin: 0 auto;
|
|
327
|
-
max-width: 1024px;
|
|
495
|
+
// max-width: 1024px;
|
|
328
496
|
|
|
329
497
|
&__back-button {
|
|
330
498
|
align-self: flex-start;
|
|
@@ -365,7 +533,7 @@ $responsive-breakpoint: 'm';
|
|
|
365
533
|
@include set-from-screen($responsive-breakpoint) {
|
|
366
534
|
margin: auto;
|
|
367
535
|
padding: 0;
|
|
368
|
-
width:
|
|
536
|
+
width: 900px;
|
|
369
537
|
}
|
|
370
538
|
|
|
371
539
|
&__checkbox {
|
|
@@ -374,6 +542,16 @@ $responsive-breakpoint: 'm';
|
|
|
374
542
|
justify-content: center;
|
|
375
543
|
}
|
|
376
544
|
|
|
545
|
+
&__checkbox-container {
|
|
546
|
+
display: flex;
|
|
547
|
+
flex-direction: row;
|
|
548
|
+
|
|
549
|
+
&__label {
|
|
550
|
+
font-family: LeroyMerlin, sans-serif;
|
|
551
|
+
margin-left: 0.5rem;
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
|
|
377
555
|
&__radio {
|
|
378
556
|
margin-right: 15px;
|
|
379
557
|
}
|
|
@@ -404,15 +582,20 @@ $responsive-breakpoint: 'm';
|
|
|
404
582
|
width: 100%;
|
|
405
583
|
|
|
406
584
|
@include set-from-screen($responsive-breakpoint) {
|
|
407
|
-
width: 50
|
|
408
|
-
|
|
585
|
+
width: calc(50% - 15px);
|
|
586
|
+
|
|
587
|
+
&:first-child {
|
|
588
|
+
padding-right: 15px;
|
|
589
|
+
}
|
|
409
590
|
|
|
410
|
-
|
|
411
|
-
|
|
591
|
+
&:last-child {
|
|
592
|
+
padding-left: 15px;
|
|
593
|
+
}
|
|
412
594
|
}
|
|
413
595
|
|
|
414
|
-
|
|
415
|
-
padding-left:
|
|
596
|
+
&.no-padding {
|
|
597
|
+
padding-left: 0;
|
|
598
|
+
padding-right: 0;
|
|
416
599
|
}
|
|
417
600
|
}
|
|
418
601
|
}
|
|
@@ -421,13 +604,8 @@ $responsive-breakpoint: 'm';
|
|
|
421
604
|
margin: $mu250 0;
|
|
422
605
|
|
|
423
606
|
button {
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
&:last-child {
|
|
429
|
-
margin-left: 15px;
|
|
430
|
-
}
|
|
607
|
+
margin: 0 auto;
|
|
608
|
+
max-width: 300px;
|
|
431
609
|
}
|
|
432
610
|
|
|
433
611
|
&__ok {
|
|
@@ -18,8 +18,12 @@
|
|
|
18
18
|
}
|
|
19
19
|
],
|
|
20
20
|
"translationErrors": {
|
|
21
|
+
"male": "La civilité est requise",
|
|
22
|
+
"female": "La civilité est requise",
|
|
21
23
|
"lastname": "Le nom est requis",
|
|
22
24
|
"firstname": "Le prénom est requis",
|
|
25
|
+
"address": "L'address est requise",
|
|
26
|
+
"city": "La ville est requise",
|
|
23
27
|
"zipcode": "Le code postal est requis",
|
|
24
28
|
"email": "Votre adresse mail est requise",
|
|
25
29
|
"phone": "Votre numéro de téléphone est requis"
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
{
|
|
2
|
+
"partners": [
|
|
3
|
+
"Kbane",
|
|
4
|
+
"EBS Isolation",
|
|
5
|
+
"Les Eco Isolateurs",
|
|
6
|
+
"IZI by EDF",
|
|
7
|
+
"Mon coach brico",
|
|
8
|
+
"Allobeton",
|
|
9
|
+
"Bob Depannage",
|
|
10
|
+
"Kbane",
|
|
11
|
+
"EBS Isolation",
|
|
12
|
+
"Les Eco Isolateurs",
|
|
13
|
+
"IZI by EDF",
|
|
14
|
+
"Mon coach brico",
|
|
15
|
+
"Allobeton",
|
|
16
|
+
"Bob Depannage",
|
|
17
|
+
"Kbane",
|
|
18
|
+
"EBS Isolation",
|
|
19
|
+
"Les Eco Isolateurs",
|
|
20
|
+
"IZI by EDF",
|
|
21
|
+
"Mon coach brico",
|
|
22
|
+
"Allobeton",
|
|
23
|
+
"Bob Depannage",
|
|
24
|
+
"Kbane",
|
|
25
|
+
"EBS Isolation",
|
|
26
|
+
"Les Eco Isolateurs",
|
|
27
|
+
"IZI by EDF"
|
|
28
|
+
]
|
|
29
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { RestRequest, ResponseComposition, RestContext } from 'msw';
|
|
2
|
+
import { partners } from './jsons/trezor.json';
|
|
3
|
+
|
|
4
|
+
export const getPartnersResolver = (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
|
|
5
|
+
return res(ctx.status(200), ctx.json(partners));
|
|
6
|
+
};
|
|
@@ -25,3 +25,15 @@ export const sendTrezorForm = async (typeLead: string, payload: object) => {
|
|
|
25
25
|
|
|
26
26
|
return response;
|
|
27
27
|
};
|
|
28
|
+
|
|
29
|
+
export const getPartners = async () => {
|
|
30
|
+
const response = await clientApi.get(`leads/partners`).catch(function (error) {
|
|
31
|
+
throw error;
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
return JSON.parse(
|
|
35
|
+
JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
|
|
36
|
+
return `: "${escape($1)}"`;
|
|
37
|
+
}),
|
|
38
|
+
);
|
|
39
|
+
};
|
|
@@ -1,22 +1,31 @@
|
|
|
1
1
|
import { ActionContext } from 'vuex';
|
|
2
2
|
import { State } from '@/stores/state';
|
|
3
|
-
import { sendTrezorForm } from '@/services/api/trezorApi';
|
|
3
|
+
import { sendTrezorForm, getPartners } from '@/services/api/trezorApi';
|
|
4
4
|
|
|
5
5
|
export interface TrezorState {
|
|
6
6
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
7
7
|
typeLead: string;
|
|
8
8
|
formData: object;
|
|
9
|
+
partners: string[];
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
type TrezorContext = ActionContext<TrezorState, State>;
|
|
12
13
|
|
|
13
14
|
export default {
|
|
14
15
|
namespaced: true,
|
|
16
|
+
|
|
15
17
|
state: {
|
|
16
18
|
typeLead: '',
|
|
17
19
|
formData: '',
|
|
20
|
+
partners: [],
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
getters: {
|
|
24
|
+
getPartners(state: TrezorState) {
|
|
25
|
+
return state.partners;
|
|
26
|
+
},
|
|
18
27
|
},
|
|
19
|
-
|
|
28
|
+
|
|
20
29
|
mutations: {
|
|
21
30
|
setTypeLead: (state: TrezorState, typeLead: string) => {
|
|
22
31
|
state.typeLead = typeLead;
|
|
@@ -24,12 +33,13 @@ export default {
|
|
|
24
33
|
setFormData: (state: TrezorState, formData: object) => {
|
|
25
34
|
state.formData = formData;
|
|
26
35
|
},
|
|
36
|
+
setPartners(state: TrezorState, partners: string[]) {
|
|
37
|
+
state.partners = partners;
|
|
38
|
+
},
|
|
27
39
|
},
|
|
40
|
+
|
|
28
41
|
actions: {
|
|
29
|
-
sendFormData: async (
|
|
30
|
-
{ commit, state }: TrezorContext,
|
|
31
|
-
{ payload, typeLead }: { payload: object; typeLead: string },
|
|
32
|
-
) => {
|
|
42
|
+
sendFormData: async ({}: TrezorContext, { payload, typeLead }: { payload: object; typeLead: string }) => {
|
|
33
43
|
if (typeLead) {
|
|
34
44
|
const response = await sendTrezorForm(typeLead, payload);
|
|
35
45
|
|
|
@@ -45,5 +55,11 @@ export default {
|
|
|
45
55
|
}
|
|
46
56
|
}
|
|
47
57
|
},
|
|
58
|
+
loadPartners: async ({ commit }: TrezorContext) => {
|
|
59
|
+
try {
|
|
60
|
+
const result = await getPartners();
|
|
61
|
+
commit('setPartners', result);
|
|
62
|
+
} catch (error) {}
|
|
63
|
+
},
|
|
48
64
|
},
|
|
49
65
|
};
|