project-booster-vue 9.30.1 → 9.31.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.30.1",
+  "version": "9.31.2",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/media/PbMedia.vue

@@ -12,6 +12,7 @@
       <div class="pb-media__header-upload-button" v-if="(!isLoadingMedia || mediaList.length > 0) && !mediaLoadError">
         <pb-media-upload
           v-if="!readOnly"
+          :store-module-name="storeModuleName"
           :payload="uploadPayload"
           @media-uploaded="handleMediaUploaded"
           ref="pbMediaUpload"
@@ -37,12 +38,13 @@
           subtitle-error="Voulez-vous relancer le chargement des photos"
           retry-button-label="Réessayer"
           :state="mediaLoadError ? 'error' : 'loading'"
-          @loader-click="$store.dispatch('documents/loadMedia', $route.params.projectId)"
+          @loader-click="$store.dispatch(storeModuleName + '/loadMedia')"
         />
       </m-flex>
       <pb-media-list
         v-else
         ref="pbMediaList"
+        :store-module-name="storeModuleName"
         :media-list="mediaList"
         :has-still-media="hasStillMedia"
         :is-loading-media="isLoadingMedia"
@@ -51,7 +53,7 @@
         :read-only="readOnly"
         @add-media="addMedia"
         @click-on-delete="handleClickOnDelete"
-        @click-load-more="$store.dispatch('documents/loadMoreMedia')"
+        @click-load-more="$store.dispatch(storeModuleName + '/loadMoreMedia')"
       />
     </m-flex>
     <m-notification
@@ -124,7 +126,7 @@
       } » n'a pas pu être supprimée.`"
       closable
       :link-label="mediaDeletionError ? 'Réessayer' : null"
-      @link-click="$store.dispatch('documents/deleteMedia', currentMedia)"
+      @link-click="$store.dispatch(storeModuleName + '/deleteMedia', currentMedia)"
       @close="resetMediaDeletionError"
     />
     <pb-sticky-footer
@@ -135,6 +137,7 @@
       <pb-media-upload
         ref="pbMediaUploadSticky"
         class="pb-media__sticky-upload-button-content"
+        :store-module-name="storeModuleName"
         :payload="uploadPayload"
         @media-uploaded="handleMediaUploaded"
         :read-only="readOnly"
@@ -189,6 +192,13 @@ export default defineComponent({
       type: String,
       default: 'Mes documents',
     },
+    /**
+     * The store module name
+     */
+    storeModuleName: {
+      type: String,
+      default: 'documents',
+    },
     /**
      * The detail component payload
      */
@@ -234,16 +244,16 @@ export default defineComponent({
     const isDeletingMedia = ref(false);
     const isMediaDeletionSuccess = ref(false);
 
-    const isLoadingMedia = computed(() => store.getters['documents/isLoadingMedia']);
-    const hasStillMedia = computed(() => store.getters['documents/hasStillMedia']);
-    const mediaList = computed(() => store.getters['documents/getMediaList']);
-    const mediaLoadError = computed(() => store.getters['documents/getMediaLoadError']);
-    const isAddPhotoDisabled = computed(() => store.getters['documents/isAddPhotoDisabled']);
-    const currentMedia = computed(() => store.getters['documents/getCurrentMedia']);
+    const isLoadingMedia = computed(() => store.getters[props.storeModuleName + '/isLoadingMedia']);
+    const hasStillMedia = computed(() => store.getters[props.storeModuleName + '/hasStillMedia']);
+    const mediaList = computed(() => store.getters[props.storeModuleName + '/getMediaList']);
+    const mediaLoadError = computed(() => store.getters[props.storeModuleName + '/getMediaLoadError']);
+    const isAddPhotoDisabled = computed(() => store.getters[props.storeModuleName + '/isAddPhotoDisabled']);
+    const currentMedia = computed(() => store.getters[props.storeModuleName + '/getCurrentMedia']);
     const project = computed(() => store.getters['projects/getProject']);
 
     const handleMediaUploaded = () => {
-      store.dispatch('documents/refreshMediaList');
+      store.dispatch(props.storeModuleName + '/refreshMediaList');
     };
     const handleClickOnDelete = (media: Media) => {
       mediaToDelete.value = media;
@@ -269,10 +279,10 @@ export default defineComponent({
       mediaDeletionError.value = null;
       isDeletingMedia.value = true;
       try {
-        await store.dispatch('documents/deleteMedia', mediaToDelete.value);
+        await store.dispatch(props.storeModuleName + '/deleteMedia', mediaToDelete.value);
         isMediaDeletionSuccess.value = true;
         if (currentMedia.value && currentMedia.value.id === mediaToDelete.value?.id) {
-          store.dispatch('documents/updateCurrentMedia', null);
+          store.dispatch(props.storeModuleName + '/updateCurrentMedia', null);
         }
         setTimeout(() => {
           isMediaDeletionSuccess.value = false;

package/src/components/media/detail/PbMediaDetail.vue

@@ -16,7 +16,10 @@
           <pb-media-loader class="hidden-on-mobile" />
         </m-flex>
         <div class="pb-media-detail__image" :style="`background-image: url(${mediaUrl});`" />
-        <div v-if="media.fileType && media.fileType === 'PDF'" class="pb-media-detail__image-download">
+        <div
+          v-if="storeModuleName === 'documents' && media.fileType && media.fileType === 'PDF'"
+          class="pb-media-detail__image-download"
+        >
           <m-button
             label="Visualiser le PDF"
             right-icon="https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Display_ExternalLink_24px.svg"
@@ -222,6 +225,13 @@ export default defineComponent({
       type: Object,
       default: null,
     },
+    /**
+     * The store module name to contextualize the store.
+     */
+    storeModuleName: {
+      type: String,
+      default: 'documents',
+    },
     /**
      * Indicates whether the UI is read only
      */
@@ -275,18 +285,22 @@ export default defineComponent({
       }
       return error;
     },
+    storePrefix() {
+      return this.storeModuleName ? this.storeModuleName + '/' : '';
+    },
     mediaUrl() {
       let mediaUrl;
       // If document, check if pdf or image
       if (this.media?.fileType === 'PDF') {
-        mediaUrl = this.$store.getters['documents/getThumbnailUrl'].replace('@@PB_MEDIA_ID_FILLER@@', this.media.id);
-      } else {
-        mediaUrl = this.$store.getters['documents/getMediaUrl'].replace('@@PB_MEDIA_ID_FILLER@@', this.media.id);
+        mediaUrl = this.$store.getters[this.storePrefix + 'getThumbnailUrl'].replace(
+          '@@PB_MEDIA_ID_FILLER@@',
+          this.media.id,
+        );
       }
       return mediaUrl;
     },
     pdfUrl() {
-      return this.$store.getters['documents/getMediaUrl'].replace('@@PB_MEDIA_ID_FILLER@@', this.media.id);
+      return this.$store.getters[this.storePrefix + 'getMediaUrl'].replace('@@PB_MEDIA_ID_FILLER@@', this.media.id);
     },
   },
 
@@ -411,7 +425,7 @@ export default defineComponent({
         this.mediaNameSaveError = false;
         this.isMediaNameSaved = false;
         try {
-          await this.$store.dispatch('documents/updateMediaName', { id: this.media.id, name: this.mediaName });
+          await this.$store.dispatch(this.storePrefix + 'updateMediaName', { id: this.media.id, name: this.mediaName });
           this.$emit('media-name-updated', this.mediaName);
           this.isMediaNameSaved = true;
         } catch (err: any) {

package/src/components/media/list/PbMediaList.vue

@@ -67,6 +67,7 @@
     </m-flex>
     <pb-media-detail
       v-if="currentMedia"
+      :store-module-name="storeModuleName"
       :payload="detailPayload"
       :media="currentMedia"
       :read-only="readOnly"
@@ -118,6 +119,13 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    /**
+     * The store module name to contextualize the store.
+     */
+    storeModuleName: {
+      type: String,
+      default: 'documents',
+    },
     /**
      * Indicates wheteher pagination controllers are active.
      */
@@ -162,14 +170,17 @@ export default defineComponent({
   }),
 
   computed: {
+    storePrefix() {
+      return this.storeModuleName ? this.storeModuleName + '/' : '';
+    },
     thumbnailUrl() {
-      return this.$store.getters['documents/getThumbnailUrl'];
+      return this.$store.getters[this.storePrefix + 'getThumbnailUrl'];
     },
     addedMediaNumber() {
-      return this.$store.getters['documents/getAddedMediaNumber'];
+      return this.$store.getters[this.storePrefix + 'getAddedMediaNumber'];
     },
     currentMedia() {
-      return this.$store.getters['documents/getCurrentMedia'];
+      return this.$store.getters[this.storePrefix + 'getCurrentMedia'];
     },
   },
 
@@ -198,7 +209,7 @@ export default defineComponent({
 
     handleClickOnClose() {
       this.$store.dispatch('sendEventToBus', { code: 'mediaDetailExit', payload: {} });
-      this.$store.dispatch('documents/updateCurrentMedia', null);
+      this.$store.dispatch(this.storePrefix + 'updateCurrentMedia', null);
       this.$router.back();
     },
 

package/src/components/media/upload/PbMediaUpload.vue

@@ -238,6 +238,13 @@ export default defineComponent({
       type: String,
       default: 'image/jpeg, image/png, image/heif, image/heic, image/heif-sequence, image/heic-sequence',
     },
+    /**
+     * The store module name to contextualize the store.
+     */
+    storeModuleName: {
+      type: String,
+      default: 'documents',
+    },
     /**
      * Defines the payload
      */
@@ -269,32 +276,36 @@ export default defineComponent({
   },
 
   computed: {
+    storePrefix() {
+      return this.storeModuleName ? this.storeModuleName + '/' : '';
+    },
+
     isAddPhotoDisabled() {
-      return this.$store.getters['documents/isAddPhotoDisabled'];
+      return this.$store.getters[this.storePrefix + 'isAddPhotoDisabled'];
     },
 
     isMediaUploaded() {
-      return this.$store.getters['documents/isUploaded'];
+      return this.$store.getters[this.storePrefix + 'isUploaded'];
     },
 
     isMediaUploading() {
-      return this.$store.getters['documents/isUploading'];
+      return this.$store.getters[this.storePrefix + 'isUploading'];
     },
 
     mediaUploadError() {
-      return this.$store.getters['documents/getUploadError'];
+      return this.$store.getters[this.storePrefix + 'getUploadError'];
     },
 
     uploadedMediaId() {
-      return this.$store.getters['documents/getUploadedId'];
+      return this.$store.getters[this.storePrefix + 'getUploadedId'];
     },
 
     isNameAlreadyUsed() {
-      return this.$store.getters['documents/isNameAlreadyUsed'];
+      return this.$store.getters[this.storePrefix + 'isNameAlreadyUsed'];
     },
 
     uploadProgress() {
-      return this.$store.getters['documents/getUploadProgress'];
+      return this.$store.getters[this.storePrefix + 'getUploadProgress'];
     },
 
     nameSaveError() {
@@ -349,7 +360,7 @@ export default defineComponent({
       }
     },
     fileName() {
-      this.$store.dispatch('documents/nameChanged');
+      this.$store.dispatch(this.storePrefix + 'nameChanged');
     },
   },
 
@@ -391,7 +402,7 @@ export default defineComponent({
       this.isRoomPicture = false;
       this.selectedType = null;
       this.$refs?.pbMediaUploadForm?.reset();
-      this.$store.dispatch('documents/resetMediaUploadContext');
+      this.$store.dispatch(this.storePrefix + 'resetMediaUploadContext');
     },
 
     async upload() {
@@ -399,7 +410,7 @@ export default defineComponent({
         if (this.selectedType === null) {
           this.selectedType = this.payload.viewModel.dialog.defaultMediaType;
         }
-        await this.$store.dispatch('documents/uploadFile', {
+        await this.$store.dispatch(this.storePrefix + 'uploadFile', {
           formData: this.formData,
           fileName: this.fileName,
           isRoomPicture: this.isRoomPicture,
@@ -421,7 +432,7 @@ export default defineComponent({
     async fileChange(event: Event) {
       const fieldName: string = (event.target as HTMLInputElement).name;
       const filesList = (event.target as HTMLInputElement).files;
-      this.$store.dispatch('documents/generateCorrelationId');
+      this.$store.dispatch(this.storePrefix + 'generateCorrelationId');
       this.formData = new FormData();
 
       if (!filesList?.length) {
@@ -433,7 +444,7 @@ export default defineComponent({
       if (file['type'].split('/')[0] === 'image') {
         const validationData = await this.validateMedia(file);
         this.$store.dispatch('sendEventToBus', { code: 'documentUploadValidation', payload: validationData });
-        this.$store.dispatch('documents/validateFileData', validationData);
+        this.$store.dispatch(this.storePrefix + 'validateFileData', validationData);
         this.validationErrors = validationData.validation;
         this.updateMediaPreviewUrl(file);
       } else {
@@ -444,7 +455,7 @@ export default defineComponent({
         this.mediaPreviewUrl = PDF_IMAGE;
         this.displayAddDialog = true;
       }
-      this.$store.dispatch('documents/sendEvent', {
+      this.$store.dispatch(this.storePrefix + 'sendEvent', {
         eventName: 'qualify-by-the-front',
         file: file,
       } as MediaEventOptions);

package/src/components/pedagogy/default-payload.json

@@ -15,17 +15,6 @@
     }
   },
   "cards": [
-    {
-      "code": "CARD-1",
-      "viewModel": {
-        "url": "https://www.leroymerlin.fr/produits/cuisine/cuisine-equipee-delinia-id/",
-        "image": "https://media.leroymerlin.fr/Capture/37/bc/a121f7e74212ad2d356fd3cf2c8a/estimer-mon-budget-cuisine5e5d20ae063b330009a4a372.jpg?width=500&auto=webp&crop=16:9",
-        "title": "Estimer votre budget cuisine en quelques clics",
-        "width": "full",
-        "widthFromM": "1of3",
-        "widthFromL": "1of3"
-      }
-    },
     {
       "code": "CARD-2",
       "viewModel": {

package/src/components/question/upload-document/PbUploadDocument.vue

@@ -129,6 +129,7 @@
     </pb-sticky-footer>
     <pb-media-upload
       :payload="payload.viewModel.mediaPayload"
+      :store-module-name="storeModuleName"
       @display-dialog="handleDisplayDialogEvent"
       @media-uploaded="handleMediaUploaded"
       ref="pbMediaUpload"
@@ -237,6 +238,7 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const store = useStore();
+    let storeModuleName = ref(props.payload.viewModel.mediaPayload.viewModel.type);
 
     const pbMediaUpload = ref<ComponentCustomProperties>();
 
@@ -247,12 +249,12 @@ export default defineComponent({
     const pageSize = ref(8);
     const showMoreAnimation = ref('');
     const showMoreButtonDisplayed = computed(
-      () => store.getters['documents/hasStillMedia'] && props.payload.viewModel.showMore,
+      () => store.getters[storeModuleName.value + '/hasStillMedia'] && props.payload.viewModel.showMore,
     );
-    const selectedDocuments = computed(() => store.getters['documents/getMediaList']);
-    const thumbnailUrl = computed(() => store.getters['documents/getThumbnailUrl']);
+    const selectedDocuments = computed(() => store.getters[storeModuleName.value + '/getMediaList']);
+    const thumbnailUrl = computed(() => store.getters[storeModuleName.value + '/getThumbnailUrl']);
     onMounted(() => {
-      store.dispatch('documents/sendEvent', { eventName: 'start', file: null });
+      store.dispatch(storeModuleName.value + '/sendEvent', { eventName: 'start', file: null });
       if (props.payload.viewModel.startOpened) {
         pbMediaUpload.value?.$refs.pbMediaUploadFormInput.click();
       }
@@ -295,12 +297,12 @@ export default defineComponent({
     };
 
     const handleMediaUploaded = () => {
-      store.dispatch('documents/refreshMediaList');
+      store.dispatch(storeModuleName.value + '/refreshMediaList');
     };
 
     const handleShowMoreClick = () => {
-      store.dispatch('documents/updateMediaPerPageCount', 4);
-      store.dispatch('documents/loadMoreMedia');
+      store.dispatch(storeModuleName.value + '/updateMediaPerPageCount', 4);
+      store.dispatch(storeModuleName.value + '/loadMoreMedia');
       showMoreAnimation.value = 'pb-upload-document__answers-animation';
     };
 
@@ -309,6 +311,7 @@ export default defineComponent({
       BACK_ICON,
       INFO_ICON,
       pbMediaUpload,
+      storeModuleName,
       lastItemIndex,
       pageSize,
       showMoreAnimation,

package/src/components/warning-message/PbWarningMessage.stories.mdx

@@ -4,6 +4,7 @@ import cloneDeep from 'lodash.clonedeep';
 import PbWarningMessage from './PbWarningMessage';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import WITHOUT_EXPLAIN_LINK from './without-explain-link.json';
+import WITH_MODAL from './with-modal.json';
 
 <Meta
   title="Project Booster/Components/Warning Message/PbWarningMessage 🦠"
@@ -57,3 +58,11 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
+
+# `PbWarningMessage` - With Modal
+
+<Canvas>
+  <Story name="With Modal" args={{ payload: WITH_MODAL }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/warning-message/PbWarningMessage.vue

@@ -26,7 +26,16 @@
           <h3>{{ payload.viewModel.subtitle }}</h3>
           <p>{{ payload.viewModel.content }}</p>
           <div class="pb-warning-message__container__message__right__link" v-if="payload.viewModel.explainLink">
-            <a :href="payload.viewModel.explainLink.href">{{ payload.viewModel.explainLink.label }}</a>
+            <a
+              v-if="payload.viewModel.explainLink.action"
+              href="#"
+              @click.prevent="handleHelpDialog(payload.viewModel.explainLink.action.viewModelDialog)"
+            >
+              {{ payload.viewModel.explainLink.label }}
+            </a>
+            <a v-else :href="payload.viewModel.explainLink.href">
+              {{ payload.viewModel.explainLink.label }}
+            </a>
           </div>
         </div>
       </m-flex>
@@ -53,18 +62,44 @@
         />
       </m-flex>
     </div>
+
+    <m-dialog
+      class="pb-warning-message__dialog-help"
+      :show-dialog="displayDialogHelp"
+      width="771px"
+      height="492px"
+      maxHeight="100vh"
+      @update:show-dialog="handleHelpDialog"
+      v-if="dialogHelpContent"
+    >
+      <template #header>
+        <div class="pb-warning-message__dialog-help__title">
+          <h2>{{ dialogHelpContent.headerTitle }}</h2>
+        </div>
+      </template>
+      <template #body>
+        <div class="pb-warning-message__dialog-help__body" v-html="dialogHelpContent.contentHtml"></div>
+      </template>
+      <template v-slot:footer>
+        <m-flex class="pb-question__dialog-help__footer" align-items="center" justify-content="center">
+          <m-button label="Fermer" theme="bordered-neutral" @click.prevent="handleHelpDialog"></m-button>
+        </m-flex>
+      </template>
+    </m-dialog>
   </m-flex>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, ref } from 'vue';
 import { v4 as uuidv4 } from 'uuid';
 import MFlex from './../mozaic/flex/MFlex.vue';
 import MLink from '../mozaic/link/MLink.vue';
 import MButton from '../mozaic/buttons/MButton.vue';
+import MDialog from '../mozaic/dialog/MDialog.vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import SVGInjector from 'svg-injector';
 import { WarningMessagePayloadAction } from '@/types/pb/WarningMessage';
+import { DialogContent } from './dialogContent';
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 const WARNING_ICON =
@@ -76,6 +111,7 @@ export default defineComponent({
     MFlex,
     MLink,
     MButton,
+    MDialog,
   },
   props: {
     /**
@@ -146,6 +182,13 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const componentId = uuidv4();
+    const displayDialogHelp = ref(false);
+    const dialogHelpContent = ref();
+
+    const handleHelpDialog = (content: DialogContent) => {
+      displayDialogHelp.value = !displayDialogHelp.value;
+      dialogHelpContent.value = content;
+    };
 
     const skipQuestion = () => {
       /**
@@ -168,6 +211,9 @@ export default defineComponent({
       skipQuestion,
       BACK_ICON,
       WARNING_ICON,
+      displayDialogHelp,
+      handleHelpDialog,
+      dialogHelpContent,
     };
   },
 });
@@ -184,7 +230,13 @@ $responsive-breakpoint: 'm';
   @include set-font-face('regular');
   flex-grow: 1;
   margin: 0 auto;
-  width: calc(100% - #{$mu050} - #{$mu050});
+  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;
   }
@@ -251,7 +303,9 @@ $responsive-breakpoint: 'm';
   }
 
   &__container {
-    width: 511px;
+    @include set-from-screen($responsive-breakpoint) {
+      width: 511px;
+    }
   }
 
   &__container__message__left {
@@ -274,7 +328,10 @@ $responsive-breakpoint: 'm';
 
   &__container--button {
     margin: $mu250 auto 0 auto;
-    width: 311px;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 311px;
+    }
 
     &__ok {
       margin-bottom: $mu100;
@@ -282,3 +339,28 @@ $responsive-breakpoint: 'm';
   }
 }
 </style>
+
+<style lang="scss">
+@import 'pb-variables';
+
+.pb-warning-message {
+  &__dialog-help {
+    &__title {
+      padding: $mu250 $mu250 0 $mu250;
+    }
+
+    &__body {
+      padding: 0 $mu250;
+      @include set-font-scale('05', 'l');
+      &__image {
+        background-size: cover;
+        padding: 120px 0;
+      }
+    }
+
+    &__footer {
+      padding: $mu100 $mu250 $mu250 $mu250;
+    }
+  }
+}
+</style>

package/src/components/warning-message/dialogContent.ts

@@ -0,0 +1,4 @@
+export interface DialogContent {
+  headerTitle: string;
+  contentHtml: string;
+}

package/src/components/warning-message/with-modal.json

@@ -0,0 +1,38 @@
+{
+  "viewModel": {
+    "backLabel": "Question précédente",
+    "label": "Vos travaux dans un appartement",
+    "subtitle": "Nous attirons votre attention !",
+    "content": "La pose d’une pompe à chaleur n’est pas adaptée a un appartement. Nous n’avons pas d’offre pour les appartements aujourd’hui..",
+    "explainLink": {
+      "type": "link",
+      "label": "Comment faire des travaux de rénovation énergétique en tant que locataire ?",
+      "action": {
+        "viewModelDialog": {
+          "headerTitle": "Votre travaux dans un appartement",
+          "contentHtml": "Mon contenu de modal ici"
+        }
+      }
+    }
+  },
+  "callToActions": [
+    {
+      "type": "button",
+      "label": "Ok, poursuivre l'estimation",
+      "action": {
+        "type": "STEP",
+        "code": "__END__"
+      },
+      "bordered": false
+    },
+    {
+      "type": "button",
+      "label": "Changer de le type de propriété",
+      "action": {
+        "type": "STEP",
+        "code": "__BACK__"
+      },
+      "bordered": true
+    }
+  ]
+}