project-booster-vue 8.123.8 → 8.124.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.123.8",
+  "version": "8.124.0",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",
@@ -29,11 +29,11 @@
   ],
   "dependencies": {
     "@contentful/rich-text-html-renderer": "15.0.0",
-    "@mozaic-ds/css-dev-tools": "1.18.0",
-    "@mozaic-ds/icons": "1.14.0",
-    "@mozaic-ds/styles": "1.19.0",
-    "@mozaic-ds/tokens": "1.19.0",
-    "@mozaic-ds/web-fonts": "1.18.0",
+    "@mozaic-ds/css-dev-tools": "1.24.0",
+    "@mozaic-ds/icons": "1.20.0",
+    "@mozaic-ds/styles": "1.24.1",
+    "@mozaic-ds/tokens": "1.22.0",
+    "@mozaic-ds/web-fonts": "1.22.0",
     "@vue/babel-preset-app": "4.5.13",
     "@vue/compat": "3.2.6",
     "@xstate/vue": "0.8.1",

package/src/components/appointment/PbAppointment.stories.mdx

@@ -1,6 +1,6 @@
 import PbAppointment from './PbAppointment';
 import PbScenario from '../scenario/PbScenario';
-import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import { Story, Meta, Canvas } from '@storybook/addon-docs';
 import DEFAULT_PAYLOAD from '../scenario/scenarii/appointment-qualification-kitchen.json';
 import PREVIOUS_CONTEXT from '../../services/api/mocks/jsons/appointmentsRecovery.json';
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
@@ -56,6 +56,10 @@ export const TemplateSandbox = (args, { argTypes }) => {
     components: { PbAppointment },
     setup() {
       const store = useStore();
+      store.dispatch('documentsPlans/updateContext', { type: 'DOCUMENT', subType: 'PLAN' });
+      store.dispatch('documentsPictures/updateContext', { type: 'DOCUMENT', subType: 'PHOTO' });
+      store.dispatch('documentsPlans/updateMediaPerPageCount', 3);
+      store.dispatch('documentsPictures/updateMediaPerPageCount', 3);
       store.dispatch('appointmentQualification/initSessions', {
         appointmentQualificationFormStructure: DEFAULT_PAYLOAD,
         businessUnit: '001',
@@ -100,6 +104,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
           '/api/inhabitant-projects/:inhabitantProjectId/simulations',
           getEmptyConfigurationsByProjectIdResolver,
         ),
+        rest.get('/api/inhabitant-projects/:inhabitantProjectId/simulations', getConfigurationsByProjectIdResolver),
         rest.post('/api/inhabitant-projects/:inhabitantProjectId/simulations/:simulationId', notContentResolver),
         rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
         rest.post('/api/inhabitant-projects/:projectId/documents', uploadDocumentResolver),
@@ -119,14 +124,14 @@ export const TemplateSandbox = (args, { argTypes }) => {
 ## Appointment Recovery
 
 export const previousState = {
-  answers: PREVIOUS_CONTEXT.answers,
+  answers: PREVIOUS_CONTEXT.results[0].serializedContext.answers,
   refreshSteps: true,
   history: {
-    stepIndex: PREVIOUS_CONTEXT.stepIndex,
-    steps: PREVIOUS_CONTEXT.stepHistory,
+    stepIndex: PREVIOUS_CONTEXT.results[0].serializedContext.stepIndex,
+    steps: PREVIOUS_CONTEXT.results[0].serializedContext.stepHistory,
   },
-  currentStep: PREVIOUS_CONTEXT.currentStep,
-  displayedStep: PREVIOUS_CONTEXT.currentStep,
+  currentStep: PREVIOUS_CONTEXT.results[0].serializedContext.currentStep,
+  displayedStep: PREVIOUS_CONTEXT.results[0].serializedContext.currentStep,
 };
 
 <Canvas>
@@ -134,7 +139,7 @@ export const previousState = {
     name="Feature - Appointment Recovery"
     inline={false}
     height="758px"
-    args={{ scenarios: DEFAULT_PAYLOAD }}
+    args={{ scenarios: DEFAULT_PAYLOAD, runtimeOptions: { hasConfigurations: true }, previousState }}
     parameters={{
       controls: { disable: true },
       storyshots: { disable: true },

package/src/components/appointment/PbAppointment.vue

@@ -2,7 +2,7 @@
   <m-flex full-width align-items="center" justify-content="center" direction="column" class="pb-appointment">
     <pb-loader
       class="pb-appointment__loader"
-      v-if="createProjectError || isLoadingProject"
+      v-if="createProjectError || isLoadingProject || !scenarios"
       title-loading="Chargement"
       title-error="Nous n’avons pas pu charger la page"
       subtitle-error="Une erreur est survenue"
@@ -13,7 +13,7 @@
     />
     <m-flex v-else full-width align-items="center" justify-content="center" direction="column">
       <pb-scenario
-        :scenarios="updatedScenario"
+        :scenarios="scenarios"
         :runtime-options="runtimeOptions"
         :previous-state="previousState"
         min-height="100vh"
@@ -60,7 +60,6 @@ export default {
 
   computed: {
     ...mapGetters('appointmentQualification', {
-      updatedScenario: 'getScenarios',
       isLoadingProject: 'isLoadingProject',
       createProjectError: 'getCreateProjectError',
       appointmentLinkedError: 'getAppointmentLinkedError',

package/src/components/media/PbMedia.stories.mdx

@@ -1,7 +1,6 @@
 import { Meta, Canvas, Story } from '@storybook/addon-docs';
 import PbMedia from './PbMedia';
-import documentsStore from '../../stores/modules/documentsStore';
-import mediaStore from '../../stores/modules/mediaStore';
+import mediaDocumentsStore from '../../stores/modules/mediaDocumentsStore';
 import {
   getAllMediaPaginationResolver,
   getMediaThumbnailResolver,
@@ -20,6 +19,8 @@ import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
 import DOCUMENTS_LIST_PAYLOAD from './list/documents-list-payload.json';
 import DOCUMENT_DETAIL_PAYLOAD from './detail/document-detail-payload.json';
 import DOCUMENT_UPLOAD_PAYLOAD from './upload/document-upload-payload.json';
+import cloneDeep from 'lodash.clonedeep';
+import { useStore } from 'vuex';
 
 <Meta
   title="Project Booster/Components/Documents & Media/PbMedia 🦠"
@@ -31,8 +32,8 @@ import DOCUMENT_UPLOAD_PAYLOAD from './upload/document-upload-payload.json';
     nestedAppDecorator(
       {
         modules: {
-          documents: documentsStore,
-          media: mediaStore,
+          documents: cloneDeep(mediaDocumentsStore),
+          media: cloneDeep(mediaDocumentsStore),
         },
         getters: {
           getProject(state) {
@@ -61,6 +62,11 @@ export const TemplateSandbox = (args, { argTypes }) => {
   return {
     props: Object.keys(argTypes),
     components: { PbMedia },
+    setup() {
+      const store = useStore();
+      store.dispatch('documents/updateContext', { type: 'DOCUMENT' });
+      store.dispatch('media/updateContext', { type: 'MEDIA' });
+    },
     template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">
       <pb-media />
     </div>`,
@@ -88,6 +94,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
     {{
       components: { PbMedia },
       created() {
+        this.$store.dispatch('media/updateContext', { type: 'MEDIA' });
         this.$store.dispatch('media/resetMediaListContext');
       },
       template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">
@@ -120,6 +127,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
     {{
       components: { PbMedia },
       created() {
+        this.$store.dispatch('documents/updateContext', { type: 'DOCUMENT' });
         this.$store.dispatch('documents/resetMediaListContext');
       },
       data: () => ({
@@ -161,6 +169,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
     {{
       components: { PbMedia },
       created() {
+        this.$store.dispatch('media/updateContext', { type: 'MEDIA' });
         this.$store.dispatch('media/loadMedia');
       },
       template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">
@@ -188,6 +197,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
     {{
       components: { PbMedia },
       created() {
+        this.$store.dispatch('media/updateContext', { type: 'MEDIA' });
         this.$store.dispatch('media/resetMediaListContext');
       },
       template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">
@@ -218,6 +228,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
     {{
       components: { PbMedia },
       created() {
+        this.$store.dispatch('media/updateContext', { type: 'MEDIA' });
         this.$store.dispatch('media/loadMedia');
       },
       template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">

package/src/components/media/detail/PbMediaDetail.stories.mdx

@@ -1,8 +1,7 @@
 import { Meta, Canvas, Story } from '@storybook/addon-docs';
 import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
 import PbMediaDetail from './PbMediaDetail';
-import documentsStore from '../../../stores/modules/documentsStore';
-import mediaStore from '../../../stores/modules/mediaStore';
+import mediaDocumentsStore from '../../../stores/modules/mediaDocumentsStore';
 import { rest } from 'msw';
 import { internalServerErrorResolver, notContentResolver } from '../../../services/api/mocks/commonMock';
 import {
@@ -18,6 +17,8 @@ import {
   getDocumentsPdfFileResolver,
 } from '../../../services/api/mocks/documentsMock';
 import DOCUMENT_DETAIL_PAYLOAD from './document-detail-payload.json';
+import cloneDeep from 'lodash.clonedeep';
+import { useStore } from 'vuex';
 
 <Meta
   title="Project Booster/Components/Documents & Media/PbMediaDetail 🦠"
@@ -29,8 +30,8 @@ import DOCUMENT_DETAIL_PAYLOAD from './document-detail-payload.json';
     nestedAppDecorator(
       {
         modules: {
-          media: mediaStore,
-          documents: documentsStore,
+          media: cloneDeep(mediaDocumentsStore),
+          documents: cloneDeep(mediaDocumentsStore),
         },
       },
       [],
@@ -45,6 +46,9 @@ export const TemplateSandbox = (args, { argTypes }) => {
     props: Object.keys(argTypes),
     components: { PbMediaDetail },
     setup() {
+      const store = useStore();
+      store.dispatch('media/updateContext', { type: 'MEDIA' });
+      store.dispatch('documents/updateContext', { type: 'DOCUMENT' });
       return { args };
     },
     template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">
@@ -198,6 +202,7 @@ export const imageDocument = {
       msw: [
         rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
         rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
+        rest.patch('/api/inhabitant-projects/:projectId/documents/:documentId', notContentResolver),
       ],
     }}
     inline={false}

package/src/components/media/list/PbMediaList.stories.mdx

@@ -1,11 +1,13 @@
 import { Meta, Canvas, Story } from '@storybook/addon-docs';
-import mediaStore from '../../../stores/modules/mediaStore';
+import mediaDocumentsStore from '../../../stores/modules/mediaDocumentsStore';
 import PbMediaList from './PbMediaList';
 import { rest } from 'msw';
 import { getAllMediaPaginationResolver, getMediaThumbnailResolver } from '../../../services/api/mocks/mediaMock';
 import { notContentResolver } from '../../../services/api/mocks/commonMock';
 import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
 import DOCUMENTS_LIST_PAYLOAD from './documents-list-payload.json';
+import cloneDeep from 'lodash.clonedeep';
+import { useStore } from 'vuex';
 
 <Meta
   title="Project Booster/Components/Documents & Media/PbMediaList  🧬"
@@ -15,7 +17,7 @@ import DOCUMENTS_LIST_PAYLOAD from './documents-list-payload.json';
     nestedAppDecorator(
       {
         modules: {
-          media: mediaStore,
+          media: cloneDeep(mediaDocumentsStore),
         },
       },
       [],
@@ -30,6 +32,8 @@ export const TemplateSandbox = (args, { argTypes }) => {
     props: Object.keys(argTypes),
     components: { PbMediaList },
     setup() {
+      const store = useStore();
+      store.dispatch('media/updateContext', { type: 'MEDIA' });
       return { args };
     },
     template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: stretch;min-height: 100vh; width: 800px;">

package/src/components/media/upload/PbMediaUpload.stories.mdx

@@ -1,8 +1,7 @@
 import PbMediaUpload from './PbMediaUpload';
-import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import { Story, Meta, Canvas } from '@storybook/addon-docs';
 import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
-import documentsStore from '../../../stores/modules/documentsStore';
-import mediaStore from '../../../stores/modules/mediaStore';
+import mediaDocumentsStore from '../../../stores/modules/mediaDocumentsStore';
 import { rest } from 'msw';
 import {
   internalServerErrorResolver,
@@ -23,6 +22,8 @@ import {
 } from '../../../services/api/mocks/documentsMock';
 import MEDIA_UPLOAD_PAYLOAD from './media-upload-payload.json';
 import DOCUMENT_UPLOAD_PAYLOAD from './document-upload-payload.json';
+import cloneDeep from 'lodash.clonedeep';
+import { useStore } from 'vuex';
 
 <Meta
   title="Project Booster/Components/Documents & Media/PbMediaUpload 🦠"
@@ -34,8 +35,8 @@ import DOCUMENT_UPLOAD_PAYLOAD from './document-upload-payload.json';
     nestedAppDecorator(
       {
         modules: {
-          media: mediaStore,
-          documents: documentsStore,
+          media: cloneDeep(mediaDocumentsStore),
+          documents: cloneDeep(mediaDocumentsStore),
         },
         mutations: {
           eventBusSendEvent(state, { code, payload }) {
@@ -59,6 +60,9 @@ export const TemplateSandbox = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PbMediaUpload },
   setup() {
+    const store = useStore();
+    store.dispatch('media/updateContext', { type: 'MEDIA' });
+    store.dispatch('documents/updateContext', { type: 'DOCUMENT' });
     return { args };
   },
   template: `<pb-media-upload

package/src/components/progression-price/PbSmartProgressionPrice.vue

@@ -2,9 +2,9 @@
   <pb-progression-price
     :theme="theme"
     :max-price="payload.maxPrice"
-    :lower-price="summary.cost.min"
-    :higher-price="summary.cost.max"
-    :currency="summary.cost.currency"
+    :lower-price="lowerPrice"
+    :higher-price="higherPrice"
+    :currency="currency"
     :title="payload.title"
     :price-bar-hidden="payload.priceBarHidden"
     :separator-label="payload.separatorLabel"
@@ -37,6 +37,15 @@ export default {
   },
   computed: {
     ...mapGetters('estimates', { summary: 'getSummary' }),
+    lowerPrice() {
+      return this.summary?.cost?.min;
+    },
+    higherPrice() {
+      return this.summary?.cost?.max;
+    },
+    currency() {
+      return this.summary?.cost?.currency;
+    },
   },
 };
 </script>

package/src/components/projects/project-hub/PbProjectHub.stories.mdx

@@ -143,6 +143,7 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
         path: '/projects/:projectId/inspirations',
         component: PbMedia,
         beforeEnter: async (to, from, next, store) => {
+          store.dispatch('media/updateCurrentMedia', null);
           const projectId = to.params.projectId;
           if (store.getters['projects/getCurrentProjectId'] !== projectId) {
             store.dispatch('projects/loadProject', projectId);
@@ -183,6 +184,7 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
           uploadPayload: DOCUMENT_UPLOAD_PAYLOAD,
         },
         beforeEnter: async (to, from, next, store) => {
+          store.dispatch('documents/updateCurrentMedia', null);
           const projectId = to.params.projectId;
           if (store.getters['projects/getCurrentProjectId'] !== projectId) {
             store.dispatch('projects/loadProject', projectId);

package/src/components/question/PbQuestion.vue

@@ -456,7 +456,6 @@ export default {
     isShowingFooter(viewModel) {
       return viewModel.footer && areConditionsValid(viewModel.footer.conditions, this.answers, this.runtimeOptions);
     },
-
     isAnswerDisabled(answer) {
       return (
         answer.viewModel.disabled &&
@@ -474,6 +473,7 @@ export default {
 
       if (this.payload.multiSelect) {
         this.selectedAnswers[answer.code] = answer.selected;
+
         const selected = Object.fromEntries(Object.entries(this.selectedAnswers).filter(([, value]) => value === true));
         /**
          * Emitted when the component value is updated
@@ -481,6 +481,11 @@ export default {
          */
         this.$emit('update-selected', selected);
       } else {
+        Object.keys(this.selectedAnswers).forEach((answerCode) => {
+          this.selectedAnswers[answerCode] = false;
+        });
+        this.selectedAnswers[answer.code] = answer.selected;
+
         /**
          * Emitted when step is completed
          * @event dynamic event name according to completedEventName prop

package/src/components/question/configurations-import/PbConfigurationsImport.vue

@@ -28,7 +28,7 @@
         <m-flexy class="pb-configurations-import__answers-container-flexy">
           <div
             :class="`pb-configurations-import__answers ${
-              selectedConfigurations && selectedConfigurations.length < 3
+              !selectedConfigurations || selectedConfigurations.length < 3
                 ? 'pb-configurations-import__answers--centered'
                 : ''
             }`"
@@ -83,7 +83,11 @@
         </m-flexy>
       </m-container>
     </div>
-    <pb-sticky-footer v-if="payload.skippable || payload.multiSelect" ref="pbStickyFooter">
+    <pb-sticky-footer
+      v-if="payload.skippable || payload.multiSelect"
+      ref="pbStickyFooter"
+      :bottom-offset="stickyBottomOffset"
+    >
       <transition-group name="pb-configurations-import__actions--animated" mode="out-in">
         <div
           v-if="payload.multiSelect && selectedConfigurations.length > 0"
@@ -101,7 +105,7 @@
           />
         </div>
         <div
-          v-if="payload.skippable && (payload.viewModel.alwaysDisplaySkippable || selectedConfigurations <= 0)"
+          v-if="payload.skippable && (payload.viewModel.alwaysDisplaySkippable || selectedConfigurations.length <= 0)"
           ref="pbConfigurationsImportActionsButtonsSkip"
           class="pb-configurations-import__actions-container"
           key="skip"
@@ -159,8 +163,9 @@ import MFlex from '../../../components/mozaic/flex/MFlex';
 import MLink from '../../../components/mozaic/link/MLink';
 import MNotification from '../../../components/mozaic/notifications/MNotification';
 import PbCard from '../../../components/cards/PbCard';
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref } from 'vue';
 import { format } from 'date-fns';
+import objectPath from 'object-path';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -234,19 +239,15 @@ export default {
 
   setup(props, { emit }) {
     const store = useStore();
-    const projectId = computed(() => store.getters['projects/getCurrentProjectId']);
-    const selectedConfigurations = ref([]);
+    const projectId = computed(() => store.getters['configurations/getCurrentProjectId']);
+    const selectedConfigurations = computed(() => store.getters['configurations/getConfigurations']);
     const showImportConfigurationDialog = ref(false);
     const configurationImportSuccess = ref(false);
     const configurationImportError = ref(false);
 
-    onMounted(() => {
-      selectedConfigurations.value = store.getters['configurations/getConfigurations'];
-    });
-
     const navigateTo = (viewModel) => {
       if (viewModel.backLink) {
-        window.location = this.decorate(viewModel.backLink);
+        window.location = decorate(viewModel.backLink);
       } else {
         /**
          * Emitted when go back link is clicked
@@ -258,17 +259,35 @@ export default {
 
     const decorate = (answers, valueToDecorate, defaultValue = '', runtimeOptions) => {
       if (valueToDecorate) {
-        return this.doEval(answers, valueToDecorate, defaultValue, runtimeOptions);
+        return doEval(answers, valueToDecorate, defaultValue, runtimeOptions);
       }
       return valueToDecorate;
     };
 
     const decorateBoolean = (valueToDecorate, defaultValue = false) => {
       if (valueToDecorate) {
-        return this.doEval(valueToDecorate, defaultValue);
+        return doEval(valueToDecorate, defaultValue);
       }
       return valueToDecorate;
     };
+
+    const doEval = (valueToEval, defaultValue) => {
+      return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
+        this,
+        getAnswerValue,
+        props.answers,
+        defaultValue,
+        props.runtimeOptions,
+      );
+    };
+
+    const getAnswerValue = (answerCode, path) => {
+      if (!props.answers[answerCode] || props.answers[answerCode].length === 0) {
+        return null;
+      }
+      return objectPath.get(props.answers[answerCode][0], path);
+    };
+
     const displayConfigurationDialog = () => {
       showImportConfigurationDialog.value = true;
     };
@@ -279,7 +298,6 @@ export default {
       await store.dispatch('configurations/searchConfigurations', projectId.value);
 
       if (store.getters['configurations/getConfigurationImportSuccess']) {
-        selectedConfigurations.value.push(configuration);
         configurationImportSuccess.value = true;
       } else if (store.getters['configurations/getConfigurationImportError']) {
         configurationImportError.value = true;