project-booster-vue 9.47.1 → 9.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.47.1",
+  "version": "9.49.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/rework/products/MPbProducts.stories.mdx

@@ -0,0 +1,48 @@
+import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
+import { ArgsTable, Canvas, Meta, Source, Story } from '@storybook/addon-docs';
+import cloneDeep from 'lodash.clonedeep';
+import MPbProducts from './MPbProducts';
+import productsStore from '../../../stores/modules/productsStore';
+import metaDataStore from '../../../stores/modules/metaDataStore';
+import DEFAULT_PAYLOAD from './default-payload.json';
+
+<Meta
+  title="Project Booster/Rework/Products/MPbProducts 🦠"
+  component={MPbProducts}
+  decorators={[
+    nestedAppDecorator(
+      {
+        modules: {
+          products: productsStore,
+          metaData: metaDataStore,
+        },
+        mutations: {},
+        actions: {},
+      },
+      [],
+    ),
+  ]}
+  parameters={{ layout: 'fullscreen' }}
+/>
+
+# `MPbProducts` - Component
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MPbProducts },
+  setup() {
+    return { args };
+  },
+  template: `<m-pb-products
+    :payload="args.payload"
+    :show-back-button="args.showBackButton"
+    :completed-event-name="args.completedEventName"
+    @step-completed="args.onStepCompleted"
+  />`,
+});
+
+<Canvas>
+  <Story name="101 Sandbox" args={{ payload: DEFAULT_PAYLOAD }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/rework/products/MPbProducts.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="pb-products">
+    <div class="pb-products__back-button-container">
+      <m-link
+        icon="ArrowArrowLeft48"
+        :class="{
+          'pb-products__back-button': true,
+        }"
+        @click.once="emit('go-back')"
+      >
+        {{ payload.viewModel.backLabel }}
+      </m-link>
+    </div>
+
+    <div class="pb-products__body row-flex column" v-if="product">
+      <div class="pb-products__title">
+        {{ payload.viewModel.label }}
+      </div>
+
+      <div class="pb-products__body__item" v-if="product">
+        <div class="pb-products__body__item__thumbnail">
+          <img :src="product.photo" alt="" />
+        </div>
+        <div class="pb-products__body__item__title">{{ product.designation }}</div>
+      </div>
+
+      <div class="pb-products__container--button">
+        <m-button
+          :theme="action.bordered ? 'bordered' : 'solid'"
+          class="pb-products__container--button__ok"
+          :type="action.type"
+          :label="action.label"
+          icon-position="right"
+          size="m"
+          :href="action.href"
+          v-for="action in payload.callToActions"
+          :key="action.label"
+          @click="callAction(action.action)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from 'vuex';
+import { MButton, MLink } from '@mozaic-ds/vue-3';
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { defineProps, PropType, onMounted, ref } from 'vue';
+import { PayloadAction } from '../types/genericPayload';
+
+const emit = defineEmits(['go-back', 'step-completed']);
+
+const store = useStore();
+const metadata = store.getters['metaData/metaData'];
+const refProduct = store.getters['products/getRefProduct'];
+const product = ref({});
+
+const props = defineProps({
+  /**
+   * The component view model and business data as an object. The provided prop
+   * is merged with the default payload value so only overriden values will change
+   * from the default ones.
+   */
+  payload: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * The options provided at runtime to customize component behaviour
+   */
+  runtimeOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * Indicates whether the back button should be displayed
+   */
+  showBackButton: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * Name for the event to send when the step is questio is answered
+   */
+  completedEventName: {
+    type: String,
+    default: 'step-completed',
+  },
+  /**
+   * The previous answers to inject
+   */
+  answers: {
+    type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+    default: () => new Map<string, ScenarioStepAnswer[]>(),
+  },
+});
+
+/**
+ * onMounted load product and load this
+ */
+onMounted(() => {
+  store.dispatch('products/loadProduct', {
+    payload: props.payload.viewModel.defaultProduct,
+    storeId: metadata && metadata.storeId ? metadata.storeId : '',
+  });
+  product.value = store.getters['products/getCurrentProduct'];
+});
+
+/**
+ * Send action to completed step
+ * @param action
+ */
+const callAction = (action: PayloadAction) => {
+  if (action.type === 'STEP') {
+    if (action.code === '__BACK__') {
+      emit('go-back');
+    } else {
+      let productToSend = null;
+
+      if (refProduct) {
+        productToSend = product;
+      }
+
+      emit('step-completed', {
+        answers: [
+          {
+            product: productToSend,
+          },
+        ],
+        nextStep: action,
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pb-variables';
+@import 'settings-tools/all-settings';
+@import 'typography/_t.bodys';
+@import '../styles/global.scss';
+
+$small-responsive-breakpoint: 's-large';
+$responsive-breakpoint: 'm';
+
+.pb-products {
+  @include set-font-face('regular');
+
+  flex-grow: 1;
+  margin: 0 auto;
+  padding: 0 $mu100;
+  width: calc(100% - #{$mu100} - #{$mu100});
+
+  @include set-from-screen($responsive-breakpoint) {
+    width: calc(100% - #{$mu200} - #{$mu200});
+  }
+
+  &__back-button-container {
+    align-self: flex-start;
+  }
+  &__back-button {
+    opacity: 1;
+    padding: $mu100 0 $mu100 $mu025;
+    transition: opacity 0.15s 0.5s;
+    &--hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  &__title {
+    @include set-font-face('semi-bold');
+    @include set-font-scale('08', 'm');
+
+    color: $color-grey-999;
+    max-width: 100%;
+    padding: 0;
+    text-align: left;
+    margin-top: $mu150;
+
+    &::after {
+      display: block;
+      width: 72px;
+      height: 4px;
+      content: '';
+      margin: $mu100 0 $mu150 0;
+      background: $color-primary-01-500;
+    }
+
+    @include set-from-screen($responsive-breakpoint) {
+      @include set-font-scale('08', 'm');
+
+      width: auto;
+    }
+  }
+
+  &__body {
+    margin: auto;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 591px;
+    }
+
+    &__item {
+      &__thumbnail {
+        margin-bottom: $mu150;
+
+        img {
+          width: 230px;
+        }
+      }
+
+      &__title {
+        @include set-font-face('semi-bold');
+        @include set-font-scale('07', 's');
+
+        color: $color-grey-800;
+      }
+    }
+  }
+
+  &__container--button {
+    margin-top: $mu100;
+
+    &__ok {
+      margin-bottom: $mu100;
+    }
+  }
+}
+</style>

package/src/components/rework/products/default-payload.json

@@ -0,0 +1,21 @@
+{
+  "viewModel": {
+    "backLabel": "Question précédente",
+    "label": "Estimer vos aides pour votre projet",
+    "defaultProduct": {
+      "designation": "Installation d'une chaudière à",
+      "photo": "https://storage.googleapis.com/project-booster-media/energyrenovation/default_heat_pump.jpg"
+    }
+  },
+  "callToActions": [
+    {
+      "type": "button",
+      "label": "Commencer la simulation",
+      "action": {
+        "type": "STEP",
+        "code": "__END__"
+      },
+      "bordered": false
+    }
+  ]
+}

package/src/components/rework/styles/global.scss

@@ -0,0 +1,15 @@
+.row-flex {
+    display: flex;
+
+    &.column {
+        flex-direction: column;
+    }
+
+    &.justify-center {
+        justify-content: center;
+    }
+
+    &.align-center {
+        align-items: center;
+    }
+}

package/src/components/rework/types/genericPayload.ts

@@ -0,0 +1,8 @@
+export interface PayloadAction {
+  type: string;
+  code: string;
+  component?: string;
+  payload?: {
+    link: string;
+  };
+}

package/src/components/scenario/PbScenario.vue

@@ -107,6 +107,7 @@ import PbCitySearch from '../question/city-search/PbCitySearch.vue';
 import PbWarningMessage from '../warning-message/PbWarningMessage.vue';
 import PbProducts from '../products/PbProducts.vue';
 import PbTrezor from '../trezor/PbTrezor.vue';
+import MPbProductsVue from '../rework/products/MPbProducts.vue';
 import PbIncrementalAmountInput from '../question/incremental-amount-input/PbIncrementalAmountInput.vue';
 import { areConditionsValid } from '../../services/scenarioConditionals';
 import {
@@ -148,6 +149,7 @@ export default defineComponent({
     PbIncrementalAmountInput,
     PbProducts,
     PbTrezor,
+    MPbProductsVue,
   },
 
   props: {

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,
     };
   },
 });