project-booster-vue 9.57.5 → 9.59.0

package/package.json

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

package/src/components/cards/PbCardsList.vue

@@ -22,6 +22,7 @@
             :button-label="card.viewModel.buttonLabel"
             @button-click="handleAnswerButtonClick"
             @card-click="handleCardClick(card)"
+            :data-cerberus="sanitizeCerberusAttribut('PB-CARD', card.code)"
           />
         </div>
       </m-flexy-col>
@@ -35,6 +36,7 @@ import PbCard from '../cards/PbCard.vue';
 import MContainer from '../mozaic/grid/MContainer.vue';
 import MFlexy from '../mozaic/grid/MFlexy.vue';
 import MFlexyCol from '../mozaic/grid/MFlexyCol.vue';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 export default defineComponent({
   name: 'PbCardsList',
@@ -81,6 +83,7 @@ export default defineComponent({
        */
       this.$emit('card-click', card);
     },
+    sanitizeCerberusAttribut,
   },
 });
 </script>

package/src/components/question/amount-input/PbAmountInput.vue

@@ -10,6 +10,7 @@
             !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
         @click.once="$emit('go-back')"
+        :data-cerberus="sanitizeCerberusAttribut('PB-AMOUNT-INPUT', 'LESS')"
       />
     </m-flex>
     <form
@@ -28,6 +29,7 @@
             ref="pbAmountInputTextInput"
             class="pb-amount-input__text-input"
             :placeholder="computedPayload.viewModel.placeholder"
+            :data-cerberus="sanitizeCerberusAttribut('PB-AMOUNT-INPUT', 'INPUT')"
             v-model="amount"
           />
           <div class="pb-amount-input__currency">
@@ -41,6 +43,7 @@
             width="full"
             size="l"
             @click="handleFormSubmit"
+            :data-cerberus="sanitizeCerberusAttribut('PB-AMOUNT-INPUT', 'MORE')"
           />
         </m-flex>
       </m-flex>
@@ -64,6 +67,7 @@ import DEFAULT_PAYLOAD from './default-payload.json';
 import { AmountInputPayload } from '@/components/question/amount-input/AmountInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -197,6 +201,7 @@ export default defineComponent({
       amount,
       computedPayload,
       handleFormSubmit,
+      sanitizeCerberusAttribut,
     };
   },
 });

package/src/components/question/city-search/PbCitySearch.vue

@@ -56,6 +56,7 @@
                 :tabindex="index + 2"
                 @click="selectSuggestion(suggestion)"
                 @keyup.enter="selectSuggestion(suggestion)"
+                :data-cerberus="sanitizeCerberusAttribut('PB-CITY-SEARCH', 'SUGGESTION_' + suggestion.id)"
               >
                 {{ formatSuggestion(suggestion) }}
               </div>
@@ -76,6 +77,7 @@
             @input="handleSearchKeywordChange"
             @focus="handleSearchKeywordFocus"
             @keypress="handleSearchKeywordKeypress($event)"
+            :data-cerberus="sanitizeCerberusAttribut('PB-CITY-SEARCH', 'INPUT')"
             tabindex="1"
           />
         </m-flex>
@@ -94,6 +96,7 @@
           width="full"
           size="l"
           @click="handleFormValidation"
+          :data-cerberus="sanitizeCerberusAttribut('PB-CITY-SEARCH', 'VALIDATE')"
         />
       </m-flex>
     </div>
@@ -115,6 +118,7 @@ import DEFAULT_PAYLOAD from './default-payload.json';
 import { DebouncedFunc } from 'lodash-es';
 import { decorate } from '@/services/decorate';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -405,6 +409,7 @@ export default defineComponent({
         event.preventDefault();
       }
     },
+    sanitizeCerberusAttribut,
   },
 });
 </script>

package/src/components/question/dimensions-input/PbDimensionsInput.vue

@@ -40,6 +40,7 @@
               class="pb-dimensions-input__text-input"
               :placeholder="computedPayload.viewModel.lengthPlaceholder"
               v-model="length"
+              :data-cerberus="sanitizeCerberusAttribut('PB-DIMENSION', 'LENGTH')"
             />
             <div class="pb-dimensions-input__unit">
               <span>m</span>
@@ -56,6 +57,7 @@
               class="pb-dimensions-input__text-input"
               :placeholder="computedPayload.viewModel.widthPlaceholder"
               v-model="width"
+              :data-cerberus="sanitizeCerberusAttribut('PB-DIMENSION', 'WIDTH')"
             />
             <div class="pb-dimensions-input__unit">
               <span>m</span>
@@ -69,6 +71,7 @@
             width="full"
             size="l"
             @click="handleFormSubmit"
+            :data-cerberus="sanitizeCerberusAttribut('PB-DIMENSION', 'SUBMIT')"
           />
           <m-link
             v-if="payload.skippable"
@@ -102,6 +105,7 @@ import { ref } from 'vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { DimensionsInputPayload } from '@/components/question/dimensions-input/DimensionsInput';
 import { decorate } from '@/services/decorate';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -279,6 +283,7 @@ export default defineComponent({
       pbDimensionsInputLengthInput,
       handleFormSubmit,
       skipQuestion,
+      sanitizeCerberusAttribut,
     };
   },
 });

package/src/components/question/incremental-amount-input/PbIncrementalAmountInput.vue

@@ -45,6 +45,7 @@
           :valuemax="computedPayload.viewModel.maxValue"
           @input="handleQuantitySelector"
           :integerOnly="true"
+          :data-cerberus="sanitizeCerberusAttribut('PB-INCREMENTAL-AMOUNT', 'SELECTOR')"
         />
       </m-flex>
 
@@ -55,6 +56,7 @@
           width="full"
           size="l"
           type="submit"
+          :data-cerberus="sanitizeCerberusAttribut('PB-INCREMENTAL-AMOUNT', 'INPUT')"
         />
       </m-flex>
     </form>
@@ -75,6 +77,7 @@ import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
 import MQuantitySelector from '../../mozaic/quantityselector/MQuantitySelector.vue';
 import { IncrementalAmountPayload } from '@/components/question/incremental-amount-input/IncrementalAmount';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -213,6 +216,7 @@ export default defineComponent({
       quantitySelector,
       handleQuantitySelector,
       subtitle,
+      sanitizeCerberusAttribut,
     };
   },
 });

package/src/components/question/name-input/PbNameInput.vue

@@ -23,6 +23,7 @@
           ref="pbNameInputTextInput"
           :placeholder="computedPayload.viewModel.placeholder"
           v-model="name"
+          :data-cerberus="sanitizeCerberusAttribut('PB-NAME-INPUT', 'INPUT')"
         />
         <m-flex v-if="runtimeOptions.displayOptin" class="pb-name-input__optin">
           <m-toggle class="pb-name-input__optin-toggle" size="s" v-model="optin" />
@@ -37,6 +38,7 @@
             width="full"
             size="l"
             @click="handleFormSubmit"
+            :data-cerberus="sanitizeCerberusAttribut('PB-NAME-INPUT', 'BUTTON')"
           />
         </m-flex>
       </m-flex>
@@ -61,6 +63,7 @@ import DEFAULT_PAYLOAD from './default-payload.json';
 import { NameInputPayload } from '@/components/question/name-input/NameInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -230,6 +233,7 @@ export default defineComponent({
       optin,
       computedPayload,
       handleFormSubmit,
+      sanitizeCerberusAttribut,
     };
   },
 });

package/src/components/rework/alert/MPbAlert.vue

@@ -34,6 +34,7 @@
           @click="callAction(button.nextStep)"
           :theme="button.theme"
           style="margin-left: 1rem"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-ALERT', button.label)"
         />
       </div>
     </div>
@@ -43,6 +44,8 @@
 <script lang="ts" setup>
 import { MNotification, MButton, MCard } from '@mozaic-ds/vue-3';
 import { PayloadAction } from '../types/genericPayload';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
+
 const emit = defineEmits(['go-back', 'step-completed']);
 
 const props = defineProps({

package/src/components/rework/exit-options/MPbExitOptions.vue

@@ -37,6 +37,7 @@
           :label="payload.viewModel.backButton.label"
           :theme="payload.viewModel.backButton.theme"
           @click="callAction(payload.viewModel.backButton.nextStep)"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', payload.viewModel.backButton.label)"
         />
       </div>
 
@@ -44,7 +45,11 @@
         v-if="isValidCondition(condition.conditions) && !payload.viewModel.nextStep"
         class="m-pb-exit-options__buttons__button"
       >
-        <m-button :label="condition.viewModel.nextStep.label" :href="condition.viewModel.nextStep.link" />
+        <m-button
+          :label="condition.viewModel.nextStep.label"
+          :href="condition.viewModel.nextStep.link"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', condition.viewModel.nextStep.label)"
+        />
       </div>
     </div>
 
@@ -55,11 +60,16 @@
           :label="payload.viewModel.backButton.label"
           :theme="payload.viewModel.backButton.theme"
           @click="callAction(payload.viewModel.backButton.nextStep)"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', payload.viewModel.backButton.label)"
         />
       </div>
 
       <div class="m-pb-exit-options__buttons__button">
-        <m-button :label="payload.viewModel.nextStep.label" @click="callAction(payload.viewModel.nextStep)" />
+        <m-button
+          :label="payload.viewModel.nextStep.label"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', 'NEXT')"
+          @click="callAction(payload.viewModel.nextStep)"
+        />
       </div>
     </div>
   </div>
@@ -70,6 +80,7 @@ import { MButton } from '@mozaic-ds/vue-3';
 import { PropType, ref } from 'vue';
 import { PayloadAction } from '../types/genericPayload';
 import { areConditionsValid } from '../../../services/scenarioConditionals';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 
 const emit = defineEmits(['go-back', 'step-completed']);

package/src/components/rework/question/city-search/MPbCitySearch.vue

@@ -53,6 +53,7 @@
                 :tabindex="index + 2"
                 @click="selectSuggestion(suggestion)"
                 @keyup.enter="selectSuggestion(suggestion)"
+                :data-cerberus="sanitizeCerberusAttribut('MPB-CITY-SEARCH', 'CITY-' + suggestion.id)"
               >
                 {{ formatSuggestion(suggestion) }}
               </div>
@@ -73,6 +74,7 @@
             @input="handleSearchKeywordChange"
             @focus="handleSearchKeywordFocus"
             tabindex="1"
+            :data-cerberus="sanitizeCerberusAttribut('MPB-CITY-SEARCH', 'INPUT')"
           />
         </m-flex>
       </div>
@@ -89,6 +91,7 @@
           :label="computedPayload.viewModel.actionLabel"
           size="l"
           @click="handleFormValidation"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-CITY-SEARCH', 'BUTTON')"
         />
       </m-flex>
     </div>
@@ -106,6 +109,7 @@ import MFlex from '../../../mozaic/flex/MFlex.vue';
 import MButton from '../../../mozaic/buttons/MButton.vue';
 import MLink from '../../../mozaic/link/MLink.vue';
 import MTextInput from '../../../mozaic/text-input/MTextInput.vue';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { DebouncedFunc } from 'lodash-es';
 import { decorate } from '@/services/decorate';
@@ -394,6 +398,7 @@ export default defineComponent({
     selectedCityToKeyword(): string {
       return this.selectedCity?.postalCode + ' ' + this.selectedCity?.name + ', ' + this.selectedCity?.region;
     },
+    sanitizeCerberusAttribut,
   },
 });
 </script>

package/src/components/rework/question/name-input/MPbNameInput.vue

@@ -23,6 +23,7 @@
           ref="pbNameInputTextInput"
           :placeholder="computedPayload.viewModel.placeholder"
           v-model="name"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-NAME-INPUT', 'INPUT')"
         />
         <m-flex v-if="runtimeOptions.displayOptin" class="pb-name-input__optin">
           <m-toggle class="pb-name-input__optin-toggle" size="s" v-model="optin" />
@@ -37,6 +38,7 @@
             width="full"
             size="l"
             @click="handleFormSubmit"
+            :data-cerberus="sanitizeCerberusAttribut('MPB-NAME-INPUT', 'SUBMIT')"
           />
         </m-flex>
       </m-flex>
@@ -61,6 +63,7 @@ import DEFAULT_PAYLOAD from './default-payload.json';
 import { NameInputPayload } from '@/components/question/name-input/NameInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -230,6 +233,7 @@ export default defineComponent({
       optin,
       computedPayload,
       handleFormSubmit,
+      sanitizeCerberusAttribut,
     };
   },
 });

package/src/components/rework/question/upload-document/MPbUploadDocument-Features-ShowMore.stories.json

@@ -0,0 +1,70 @@
+{
+  "viewModel": {
+    "label": "Vos plans de cuisine",
+    "answersComponent": "PbCard",
+    "showMore": {
+      "itemsPerPage": 4,
+      "label": "Voir plus"
+    },
+    "startOpened": false,
+    "mediaPayload": {
+      "viewModel": {
+        "type": "documentsPlans",
+        "acceptedFileTypes": "image/jpeg, image/png, image/heif, image/heic, image/heif-sequence, image/heic-sequence, application/pdf",
+        "dialog": {
+          "hideCross": false,
+          "fullscreen": false,
+          "title": "Ajouter un plan",
+          "successUpload": "Votre plan a bien été ajouté",
+          "chooseAnotherMediaLabel": "Choisir un autre plan",
+          "uploadProgressTitle": "Chargement de votre plan",
+          "errorUploadTitle": "Une erreur est survenue lors de l'envoi de votre plan ",
+          "uploadPreviewTitle": "Nom de plan ",
+          "documentTypeTitle": "De quel type de plan s’agit il ?",
+          "acceptedMediaTypesErrorLabel": "Seuls les formats JPG et PNG, et PDF sont acceptés",
+          "mediaTypes": [
+            {
+              "type": "PLAN",
+              "subtype": "HAND_DRAWN_PLAN",
+              "code": "HAND_DRAWN_PLAN",
+              "label": "Un plan fait moi-même"
+            },
+            {
+              "type": "PLAN",
+              "subtype": "ARCHITECT_PLAN",
+              "code": "ARCHITECT_PLAN",
+              "label": "Un plan d’architecte"
+            },
+            {
+              "type": "PLAN",
+              "subtype": "KITCHEN_DESIGNER_PLAN",
+              "code": "KITCHEN_DESIGNER_PLAN",
+              "label": "Un plan d’un autre cuisiniste"
+            }
+          ]
+        }
+      }
+    }
+  },
+  "skippable": [
+    {
+      "label": "Ajouter un plan plus tard",
+      "theme": "text-primary",
+      "width": "full",
+      "widthFromM": "fit",
+      "nextStep": {
+        "code": "LMFR_QUESTION_ADD_PLAN_LATER"
+      }
+    }
+  ],
+  "multiSelect": {
+    "actions": {
+      "VALIDATE": {
+        "label": "Continuer",
+        "nextStep": {
+          "code": "__END__"
+        }
+      }
+    }
+  }
+}

package/src/components/rework/question/upload-document/MPbUploadDocument-Features-ShowMore.stories.mdx

@@ -0,0 +1,93 @@
+import { nestedAppDecorator } from '../../../../../.storybook/nested-app-decorator';
+import { Anchor, Story, Meta, Source, Canvas } from '@storybook/addon-docs';
+import DEFAULT_PAYLOAD from './MPbUploadDocument-Features-ShowMore.stories.json';
+import { TemplateSandbox } from './MPbUploadDocument.stories.mdx';
+import documentsStore from '../../../../stores/modules/documentsStore';
+import { acceptedResolver } from '../../../../services/api/mocks/commonMock';
+import { rest } from 'msw';
+import {
+  getDocumentsByInhabitantProjectIdResolver,
+  getDocumentsPdfThumbnailResolver,
+  uploadDocumentResolver,
+} from '../../../../services/api/mocks/documentsMock';
+import cloneDeep from 'lodash.clonedeep';
+import MPbUploadDocument from './MPbUploadDocument';
+import PbScenario from '../../../../components/scenario/PbScenario';
+
+<Meta
+  title="Project Booster/Rework/Questions/MPbUploadDocument 🦠/Feature"
+  component={MPbUploadDocument}
+  argTypes={{
+    payload: {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+    onStepCompleted: {
+      action: 'Step completed',
+      table: { disable: true },
+    },
+  }}
+  decorators={[
+    nestedAppDecorator(
+      {
+        modules: {
+          documents: cloneDeep(documentsStore),
+          documentsPlans: cloneDeep(documentsStore),
+          documentsPictures: cloneDeep(documentsStore),
+        },
+        mutations: {
+          eventBusSendEvent(state, { code, payload }) {
+            console.log('event bus data : ', code, payload);
+          },
+        },
+        getters: {
+          summary(state) {
+            return state.summary;
+          },
+        },
+        actions: {
+          sendEventToBus({}, payload) {
+            console.log('Event sent to bus', payload);
+          },
+        },
+      },
+      [{ path: '/steps/:stepCode/previous/:answers', component: PbScenario }],
+    ),
+  ]}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+<Anchor storyId="project-booster-scenario-pbscenario-features--show-more-documents" />
+
+## Show more documents
+
+<Canvas>
+  <Story
+    name="show more documents"
+    inline={false}
+    height="758px"
+    args={{ payload: DEFAULT_PAYLOAD }}
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        rest.post('/api/events/documents', acceptedResolver),
+        rest.post('/api/inhabitant-projects/:inhabitantProjectId/documents', uploadDocumentResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/documents/:documentId/thumbnail',
+          getDocumentsPdfThumbnailResolver,
+        ),
+      ],
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/rework/question/upload-document/MPbUploadDocument-Features-StartOpen.stories.json

@@ -0,0 +1,67 @@
+{
+  "viewModel": {
+    "label": "Vos plans de cuisine",
+    "answersComponent": "PbCard",
+    "startOpened": true,
+    "mediaPayload": {
+      "viewModel": {
+        "type": "documentsPlans",
+        "acceptedFileTypes": "image/jpeg, image/png, image/heif, image/heic, image/heif-sequence, image/heic-sequence, application/pdf",
+        "dialog": {
+          "hideCross": false,
+          "fullscreen": false,
+          "title": "Ajouter un plan",
+          "roomToggle": true,
+          "successUpload": "Votre plan a bien été ajouté",
+          "chooseAnotherMediaLabel": "Choisir un autre plan",
+          "uploadProgressTitle": "Chargement de votre plan",
+          "errorUploadTitle": "Une erreur est survenue lors de l'envoi de votre plan ",
+          "uploadPreviewTitle": "Nom de plan ",
+          "documentTypeTitle": "De quel type de plan s’agit il ?",
+          "acceptedMediaTypesErrorLabel": "Seuls les formats JPG et PNG, et PDF sont acceptés",
+          "mediaTypes": [
+            {
+              "type": "PLAN",
+              "subtype": "HAND_DRAWN_PLAN",
+              "code": "HAND_DRAWN_PLAN",
+              "label": "Un plan fait moi-même"
+            },
+            {
+              "type": "PLAN",
+              "subtype": "ARCHITECT_PLAN",
+              "code": "ARCHITECT_PLAN",
+              "label": "Un plan d’architecte"
+            },
+            {
+              "type": "PLAN",
+              "subtype": "KITCHEN_DESIGNER_PLAN",
+              "code": "KITCHEN_DESIGNER_PLAN",
+              "label": "Un plan d’un autre cuisiniste"
+            }
+          ]
+        }
+      }
+    }
+  },
+  "skippable": [
+    {
+      "label": "Ajouter un plan plus tard",
+      "theme": "text-primary",
+      "width": "full",
+      "widthFromM": "fit",
+      "nextStep": {
+        "code": "LMFR_QUESTION_ADD_PLAN_LATER"
+      }
+    }
+  ],
+  "multiSelect": {
+    "actions": {
+      "VALIDATE": {
+        "label": "Continuer",
+        "nextStep": {
+          "code": "__END__"
+        }
+      }
+    }
+  }
+}

package/src/components/rework/question/upload-document/MPbUploadDocument-Features-StartOpen.stories.mdx

@@ -0,0 +1,93 @@
+import { nestedAppDecorator } from '../../../../../.storybook/nested-app-decorator';
+import { Anchor, Story, Meta, Source, Canvas } from '@storybook/addon-docs';
+import MPbUploadDocument from './MPbUploadDocument';
+import PbScenario from '../../../../components/scenario/PbScenario';
+import DEFAULT_PAYLOAD from './MPbUploadDocument-Features-StartOpen.stories.json';
+import { TemplateSandbox } from './MPbUploadDocument.stories.mdx';
+import documentsStore from '../../../../stores/modules/documentsStore';
+import { acceptedResolver } from '../../../../services/api/mocks/commonMock';
+import { rest } from 'msw';
+import {
+  getDocumentsByInhabitantProjectIdResolver,
+  getDocumentsPdfThumbnailResolver,
+  uploadDocumentResolver,
+} from '../../../../services/api/mocks/documentsMock';
+import cloneDeep from 'lodash.clonedeep';
+
+<Meta
+  title="Project Booster/Rework/Questions/MPbUploadDocument 🦠/Feature"
+  component={MPbUploadDocument}
+  argTypes={{
+    payload: {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+    onStepCompleted: {
+      action: 'Step completed',
+      table: { disable: true },
+    },
+  }}
+  decorators={[
+    nestedAppDecorator(
+      {
+        modules: {
+          documents: cloneDeep(documentsStore),
+          documentsPlans: cloneDeep(documentsStore),
+          documentsPictures: cloneDeep(documentsStore),
+        },
+        mutations: {
+          eventBusSendEvent(state, { code, payload }) {
+            console.log('event bus data : ', code, payload);
+          },
+        },
+        getters: {
+          summary(state) {
+            return state.summary;
+          },
+        },
+        actions: {
+          sendEventToBus({}, payload) {
+            console.log('Event sent to bus', payload);
+          },
+        },
+      },
+      [{ path: '/steps/:stepCode/previous/:answers', component: MPbUploadDocument }],
+    ),
+  ]}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+<Anchor storyId="project-booster-scenario-pbscenario-features--start-open" />
+
+## Start open
+
+<Canvas>
+  <Story
+    name="start open"
+    inline={false}
+    height="758px"
+    args={{ payload: DEFAULT_PAYLOAD }}
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        rest.post('/api/events/documents', acceptedResolver),
+        rest.post('/api/inhabitant-projects/:inhabitantProjectId/documents', uploadDocumentResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/documents/:documentId/thumbnail',
+          getDocumentsPdfThumbnailResolver,
+        ),
+      ],
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>