project-booster-vue 9.47.1 → 9.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.47.1",
+  "version": "9.48.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -36,8 +36,10 @@
     "@mozaic-ds/icons": "^1.49.0",
     "@mozaic-ds/styles": "^1.49.1",
     "@mozaic-ds/tokens": "^1.47.0",
+    "@mozaic-ds/vue-3": "^0.35.1",
     "@mozaic-ds/web-fonts": "^1.22.0",
     "@types/lodash.isempty": "4.4.6",
+    "@vue/test-utils": "^2.2.6",
     "@xstate/vue": "0.8.1",
     "ajv": "8.6.0",
     "axios": "0.25.0",
@@ -61,7 +63,7 @@
     "uuid": "8.3.2",
     "vee-validate": "4.4.5",
     "velocity-animate": "1.5.2",
-    "vue": "3.2.31",
+    "vue": "^3.2.41",
     "vue-router": "4.0.12",
     "vue3-cookies": "1.0.6",
     "vuex": "4.0.2",
@@ -130,7 +132,6 @@
     "@vue/eslint-config-prettier": "6.0.0",
     "@vue/eslint-config-standard": "6.0.0",
     "@vue/eslint-config-typescript": "10.0.0",
-    "@vue/test-utils": "2.0.0-rc.10",
     "axios-curl": "2.0.1",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.6.3",

package/src/components/question/space-input/PbSpaceInput.vue

@@ -39,6 +39,7 @@
             class="pb-space-input__text-input"
             :placeholder="computedPayload.viewModel.placeholder"
             v-model="space"
+            :data-cerberus="sanitizeCerberusAttribut('PB-SPACE-INPUT', 'SURFACE')"
           />
           <div class="pb-space-input__unit">
             <span v-if="computedPayload.viewModel.unitLabel">{{ computedPayload.viewModel.unitLabel }}</span>
@@ -77,6 +78,7 @@
                 size="l"
                 theme="primary"
                 @click="handleShowModal(helpItem.action.dialogViewModel)"
+                :data-cerberus="sanitizeCerberusAttribut('PB-SPACE-INPUT', helpItem.label)"
               />
             </div>
           </div>
@@ -90,6 +92,7 @@
             size="l"
             @click="handleFormSubmit"
             :disabled="disabledNextStep"
+            :data-cerberus="sanitizeCerberusAttribut('PB-SPACE-INPUT', computedPayload.viewModel.actionLabel)"
           />
           <m-link
             v-if="payload.skippable"
@@ -99,6 +102,7 @@
             width="full"
             size="l"
             @click="skipQuestion"
+            :data-cerberus="sanitizeCerberusAttribut('PB-SPACE-INPUT', payload.skippable.label)"
           />
         </m-flex>
       </m-flex>
@@ -149,6 +153,7 @@ import { SpaceInputPayload } from '@/components/question/space-input/SpaceInput'
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
 import { id } from 'date-fns/locale';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -333,6 +338,7 @@ export default defineComponent({
       handleShowModal,
       contentModal,
       disabledNextStep,
+      sanitizeCerberusAttribut,
     };
   },
 });

package/src/components/restitution/PbRestitutionLine.vue

@@ -3,10 +3,17 @@
     <m-flex full-width>
       <div class="pb-restitution-line__label" v-html="line.text"></div>
       <m-flex class="pb-restitution-line__price" v-if="line.cost" justify-content="flex-end" wrap>
-        <div v-if="line.cost.min !== line.cost.max" class="pb-restitution-line__price-min">
+        <div
+          v-if="line.cost.min !== line.cost.max"
+          class="pb-restitution-line__price-min"
+          :data-cerberus="sanitizeCerberusAttribut('PB-RESITUTION-LINE', 'MIN-COST')"
+        >
           {{ formatPriceRange(line.cost.min, line.cost.max).min }}&nbsp;-&nbsp;
         </div>
-        <div class="pb-restitution-line__price-max">
+        <div
+          class="pb-restitution-line__price-max"
+          :data-cerberus="sanitizeCerberusAttribut('PB-RESITUTION-LINE', 'MAX-COST')"
+        >
           {{ formatPriceRange(line.cost.min, line.cost.max).max }}
         </div>
       </m-flex>
@@ -18,6 +25,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MFlex from '../mozaic/flex/MFlex.vue';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const CROSS_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Control_Cross_24px.svg';
@@ -46,6 +54,9 @@ export default defineComponent({
     CROSS_ICON,
     INFO_ICON,
   }),
+  methods: {
+    sanitizeCerberusAttribut,
+  },
 });
 </script>
 

package/src/components/restitution/PbRestitutionList.vue

@@ -44,13 +44,20 @@
     </m-flex>
   </m-flex>
 
-  <m-flex class="pb-restitution-list__footer" direction="row" align-items="center" justify-content="center">
+  <m-flex
+    class="pb-restitution-list__footer"
+    direction="row"
+    align-items="center"
+    justify-content="center"
+    v-if="showButtonBar"
+  >
     <div class="pb-restitution-list__footer__call" v-for="button in payload.callToActions" :key="button.label">
       <m-button
         :label="button.label"
         @click="callAction(button.action)"
         :theme="button.bordered ? 'bordered' : 'solid'"
         v-if="areConditionsValid(button.conditions)"
+        :data-cerberus="sanitizeCerberusAttribut('PB-RESTITUTION', button.label)"
       />
     </div>
     <div class="pb-restitution-list__footer__save">
@@ -59,6 +66,7 @@
         @item-saved="handleItemCreated"
         @dialog-close="handleDialogClose"
         v-if="isLoggedIn"
+        :data-cerberus="sanitizeCerberusAttribut('PB-RESTITUTION', 'save-estimate')"
       />
     </div>
   </m-flex>
@@ -84,7 +92,7 @@
               >
                 <div v-html="component.title"></div>
                 <div v-if="component.cost.min != component.cost.max">
-                  <strong>
+                  <strong :data-cerberus="sanitizeCerberusAttribut('PB-RESTITUTION', 'TOP-RESTITUTION-RANGE')">
                     {{ formattedPriceRange(component.cost.min) }} et
                     {{ formattedPriceRange(component.cost.max) }}
                   </strong>
@@ -125,9 +133,15 @@
             <div><strong>Montant total</strong>&nbsp; (aides déduites)</div>
             <div class="space-mx">entre</div>
             <div>
-              <strong v-html="formattedPriceRange(summary.cost.min)"></strong>
+              <strong
+                :data-cerberus="sanitizeCerberusAttribut('PB-RESTITUTION', 'BOTTOM-MIN-RESTITUTION-RANGE')"
+                v-html="formattedPriceRange(summary.cost.min)"
+              ></strong>
               <div class="space-mx">et</div>
-              <strong v-html="formattedPriceRange(summary.cost.max)"></strong>
+              <strong
+                :data-cerberus="sanitizeCerberusAttribut('PB-RESTITUTION', 'BOTTOM-MAX-RESTITUTION-RANGE')"
+                v-html="formattedPriceRange(summary.cost.max)"
+              ></strong>
             </div>
           </div>
 
@@ -164,6 +178,7 @@ import { Project } from '../../types/pb/Project';
 import { areConditionsValid } from '../../services/scenarioConditionals';
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 export default defineComponent({
   components: {
@@ -225,6 +240,13 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    /**
+     * Show button bar save/another actions
+     */
+    showButtonBar: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     ...mapGetters('estimates', { summary: 'getSummary' }),
@@ -304,6 +326,7 @@ export default defineComponent({
     areConditionsValid(conditions: string[]) {
       return areConditionsValid(conditions, this.answers, this.runtimeOptions);
     },
+    sanitizeCerberusAttribut,
   },
 });
 </script>

package/src/components/restitution/PbRestitutionListBlock.vue

@@ -27,6 +27,7 @@
           class="pb-restitution-list-block__body__show"
           label="Voir le détail de l'estimation"
           @click="handleLinkClick(payload)"
+          :data-cerberus="sanitizeCerberusAttribut('PB-RESTITUTION', 'VIEW-DETAILS')"
         />
       </div>
     </m-flex>
@@ -44,6 +45,7 @@ import MButton from '../mozaic/buttons/MButton.vue';
 import PbRestitutionListLine from './PbRestitutionListLine.vue';
 import { mapGetters } from 'vuex';
 import { Restitution } from '@/types/pb/Restitution';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 export default defineComponent({
   components: {
@@ -72,6 +74,7 @@ export default defineComponent({
     formattedPriceRange(price: any) {
       return Math.round(price).toLocaleString() + '€';
     },
+    sanitizeCerberusAttribut,
   },
 });
 </script>

package/src/components/trezor/PbTrezor.vue

@@ -21,6 +21,7 @@
           label="Nom"
           :required="true"
           class="pb-trezor__input"
+          :data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'LASTNAME')"
         ></m-text-input>
       </m-flex>
 
@@ -32,6 +33,7 @@
           label="Prénom"
           :required="true"
           class="pb-trezor__input"
+          :data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'FIRSTNAME')"
         ></m-text-input>
       </m-flex>
 
@@ -43,6 +45,7 @@
           label="Code postal"
           :required="true"
           class="pb-trezor__input"
+          :data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'ZIPCODE')"
         ></m-text-input>
       </m-flex>
 
@@ -54,6 +57,7 @@
           label="E-mail"
           :required="true"
           class="pb-trezor__input"
+          :data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'EMAIL')"
         ></m-text-input>
       </m-flex>
 
@@ -65,6 +69,7 @@
           label="Numéro de téléphone"
           :required="true"
           class="pb-trezor__input"
+          :data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'PHONE')"
         ></m-text-input>
       </m-flex>
 
@@ -75,6 +80,7 @@
           :required="true"
           label="J'ai lu est accepte sans réserve les conditions générales d'utilisation"
           v-model="formData.values.optin"
+          :data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'CGU')"
         ></m-checkbox>
       </m-flex>
 
@@ -84,6 +90,7 @@
           :required="false"
           v-model="formData.values.optinPartners"
           label="J'autorise Leroy Merlin à transmettre les données collectées ici à l'un de nos partenaires susceptibles de réaliser le chantier (en fonction des critères géographiques)"
+          :data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'PARTNER')"
         ></m-checkbox>
       </m-flex>
 
@@ -99,6 +106,7 @@
             v-for="action in payload.callToActions"
             :key="action.label"
             @click.prevent="callAction(action)"
+            :data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'SENDFORM')"
           />
         </m-flex>
       </div>
@@ -120,6 +128,7 @@ import { TrezorInterface } from './PbTrezorInterface';
 import objectPath from 'object-path';
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 export default defineComponent({
   name: 'PbTrezor',
@@ -295,6 +304,7 @@ export default defineComponent({
       formData,
       callAction,
       BACK_ICON,
+      sanitizeCerberusAttribut,
     };
   },
 });