project-booster-vue 8.116.0 → 8.117.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.116.0",
+  "version": "8.117.2",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",
@@ -40,11 +40,13 @@
     "core-js": "3.19.1",
     "date-fns": "2.22.1",
     "firebase": "8.6.7",
+    "he": "1.2.0",
     "hooper": "nicoinch/hooper#1.0.5",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
     "lodash.isempty": "4.4.0",
     "lodash.isequal": "4.5.0",
+    "lodash.merge": "4.6.2",
     "lodash.uniqby": "4.7.0",
     "mitt": "3.0.0",
     "object-hash": "2.2.0",
@@ -58,7 +60,6 @@
     "vue-router": "4.0.12",
     "vue3-cookies": "1.0.6",
     "vuex": "4.0.2",
-    "vuexfire": "3.2.5",
     "yarn": "1.22.10",
     "yup": "0.32.9"
   },
@@ -74,21 +75,21 @@
     "@mswjs/interceptors": "0.12.7",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
-    "@storybook/addon-a11y": "6.3.12",
-    "@storybook/addon-essentials": "6.3.12",
+    "@storybook/addon-a11y": "6.4.12",
+    "@storybook/addon-essentials": "6.4.12",
     "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-links": "6.3.12",
+    "@storybook/addon-links": "6.4.12",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.3.12",
-    "@storybook/addon-storyshots-puppeteer": "6.3.12",
-    "@storybook/addon-storysource": "6.3.12",
-    "@storybook/addons": "6.3.12",
-    "@storybook/builder-webpack5": "6.3.12",
-    "@storybook/manager-webpack5": "6.3.12",
-    "@storybook/source-loader": "6.3.12",
+    "@storybook/addon-storyshots": "6.4.12",
+    "@storybook/addon-storyshots-puppeteer": "6.4.12",
+    "@storybook/addon-storysource": "6.4.12",
+    "@storybook/addons": "6.4.12",
+    "@storybook/builder-webpack5": "6.4.12",
+    "@storybook/manager-webpack5": "6.4.12",
+    "@storybook/source-loader": "6.4.12",
     "@storybook/storybook-deployer": "2.8.10",
-    "@storybook/theming": "6.3.12",
-    "@storybook/vue3": "6.3.12",
+    "@storybook/theming": "6.4.12",
+    "@storybook/vue3": "6.4.12",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/vue": "6.4.2",
     "@vue/cli": "5.0.0-beta.7",
@@ -104,22 +105,25 @@
     "babel-eslint": "10.1.0",
     "babel-jest": "26.6.3",
     "babel-loader": "8.2.2",
+    "babel-plugin-require-context-hook": "1.0.0",
     "babel-plugin-transform-require-context": "0.1.1",
     "chalk": "4.1.1",
     "dedent": "0.7.0",
     "eslint": "7.28.0",
     "eslint-loader": "4.0.2",
-    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-mdx": "1.16.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-storybook": "0.5.5",
     "eslint-plugin-vue": "7.11.1",
     "fluent-schema": "1.1.0",
     "husky": "6.0.0",
     "msw": "0.35.0",
-    "msw-storybook-addon": "1.4.1",
+    "msw-storybook-addon": "1.5.0",
     "mutationobserver-shim": "0.3.7",
     "postcss": "8.3.11",
     "postcss-loader": "4.2.0",
     "postcss-scss": "4.0.1",
-    "prettier": "2.3.1",
+    "prettier": "2.5.0",
     "pretty-quick": "3.1.1",
     "puppeteer": "10.4.0",
     "semantic-release": "17.4.4",

package/src/components/animations/PbProjectsLandingAnimation.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import PbProjectsLandingAnimation from './PbProjectsLandingAnimation';
 
 <Meta
-  title="Project Booster/Components/ 🦠 Landing/ 🦠 PbProjectsLandingAnimation"
+  title="Project Booster/Components/Landing/PbProjectsLandingAnimation 🦠"
   component={PbProjectsLandingAnimation}
   argTypes={{
     buttonClick: { action: 'Button clicked' },

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

@@ -4,15 +4,15 @@ import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '
 import DEFAULT_PAYLOAD from './default-payload';
 import SELECTED_SCENARIOS from './default-selected-scenarios';
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
-import documentStore from '../../store/modules/documentStore';
-import appointmentQualificationStore from '../../store/modules/appointmentQualificationStore';
-import PbUploadDocumentForm from '../question/upload-document/PbUploadDocumentForm';
+import documentsStore from '../../stores/modules/documentsStore';
+import appointmentQualificationStore from '../../stores/modules/appointmentQualificationStore';
+import PbUploadDocumentForm from '../media/upload/PbUploadDocumentForm';
 import { rest } from 'msw';
-import { acceptedResolver } from '../../service/api/mocks/commonMock';
-import { documentThumbnailResolver, uploadDocumentResolver } from '../../service/api/mocks/documentMock';
+import { acceptedResolver } from '../../services/api/mocks/commonMock';
+import { documentThumbnailResolver, uploadDocumentResolver } from '../../services/api/mocks/documentsMock';
 
 <Meta
-  title="Project Booster/Components/ 🦠 PbAppointment"
+  title="Project Booster/Components/Appointment qualification/PbAppointment 🦠"
   component={PbAppointment}
   parameters={{
     layout: 'fullscreen',
@@ -22,7 +22,7 @@ import { documentThumbnailResolver, uploadDocumentResolver } from '../../service
       {
         modules: {
           appointmentQualification: appointmentQualificationStore,
-          document: documentStore,
+          documents: documentsStore,
         },
         mutations: {
           eventBusSendEvent(state, { code, payload }) {

package/src/components/appointment/PbAppointment.vue

@@ -9,7 +9,7 @@
       subtitle-loading="Nous recherchons votre page"
       retry-button-label="Réessayer"
       :state="createProjectError ? 'error' : 'loading'"
-      @click="$store.dispatch('appointmentQualification/checkAppointmentQualification')"
+      @click-loader="$store.dispatch('appointmentQualification/checkAppointmentQualification')"
     />
     <m-flex v-else full-width align-items="center" justify-content="center" direction="column">
       <pb-scenario :scenarios="scenarios" min-height="100vh" @scenario-event="handleEvent"></pb-scenario>

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

@@ -4,7 +4,7 @@ import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
 import PbAppointmentStartSection from './PbAppointmentStartSection';
 
 <Meta
-  title="Project Booster/Components/ 🦠  PbAppointmentStartSection"
+  title="Project Booster/Components/Appointment qualification/ PbAppointmentStartSection 🦠"
   component={PbAppointmentStartSection}
   argTypes={{
     payload: {

package/src/components/cards/PbCard.stories.mdx

@@ -1,7 +1,7 @@
 import cloneDeep from 'lodash.clonedeep';
 import isEqual from 'lodash.isequal';
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
-import { computeAllCombinations } from '../../service/computeAllCombinations';
+import { computeAllCombinations } from '../../services/computeAllCombinations';
 import PbCard, { PB_CARD_VALIDATOR } from './PbCard';
 import { M_FLEX_VALIDATOR } from '../mozaic/flex/MFlex';
 
@@ -29,7 +29,7 @@ export const HTML_STRING = `HTML string:
 </span>`;
 
 <Meta
-  title="Project Booster/Components/ 🦠 PbCard"
+  title="Project Booster/Components/Cards/PbCard  🧬"
   component={PbCard}
   argTypes={{
     cardMinRatio: {

package/src/components/cards/PbCardsList.stories.mdx

@@ -6,7 +6,7 @@ import CARDS_LIST_3 from './3-cards-list';
 import CARDS_LIST_4 from './4-cards-list';
 
 <Meta
-  title="Project Booster/Components/ 🦠 PbCardsList"
+  title="Project Booster/Components/Cards/PbCardsList  🧬"
   component={PbCardsList}
   decorators={[nestedAppDecorator({}, [])]}
 />

package/src/components/cards-select/PbCardsSelect.stories.mdx

@@ -23,7 +23,7 @@ export const CARDS_SELECT_OPTIONS = [
   },
 ];
 
-<Meta title="Project Booster/Components/ 🦠 PbCardsSelect" component={PbCardsSelect} argsType={{}} />
+<Meta title="Project Booster/Components/Cards/PbCardsSelect 🦠" component={PbCardsSelect} argsType={{}} />
 
 # 🦠 `PbCardsSelect` - Component
 

package/src/components/carousel/PbCarousel.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import PbCarousel from './PbCarousel';
 
 <Meta
-  title="Project Booster/Components/ 🦠 PbCarousel"
+  title="Project Booster/Components/UI/PbCarousel 🦠"
   component={PbCarousel}
   argTypes={{
     handleClick: { action: 'Click on card' },

package/src/components/categories/PbCategories.stories.mdx

@@ -3,21 +3,23 @@ import { useStore } from 'vuex';
 import PbCategories from './PbCategories';
 import PbProducts from '../products/PbProducts';
 import { Meta, Canvas, Story } from '@storybook/addon-docs';
-import categoriesStore from '../../store/modules/categoriesStore';
-import metadataStore from '../../store/modules/metadataStore';
+import categoriesStore from '../../stores/modules/categoriesStore';
+import metadataStore from '../../stores/modules/metadataStore';
+import projectsStore from '../../stores/modules/projectsStore';
 import { v4 as uuidv4 } from 'uuid';
 import { rest } from 'msw';
+import { getProjectByIdResolver } from '../../services/api/mocks/projectsMock';
 import {
   getEmptyWorkKindsByProjectIdResolver,
   getProductsByWorkKindResolver,
   getWorkKindsByProjectIdResolver,
   saveWorkKindResolver,
-  workKindByProjectTypeResolver,
-} from '../../service/api/mocks/productMock';
-import { internalServerErrorResolver } from '../../service/api/mocks/commonMock';
+  getWorkKindByProjectTypeResolver,
+} from '../../services/api/mocks/productsMock';
+import { internalServerErrorResolver } from '../../services/api/mocks/commonMock';
 
 <Meta
-  title="Project Booster/Components/ 🦠 PbCategories"
+  title="Project Booster/Components/Products categories/PbCategories 🦠"
   component={PbCategories}
   parameters={{
     layout: 'fullscreen',
@@ -28,21 +30,7 @@ import { internalServerErrorResolver } from '../../service/api/mocks/commonMock'
         modules: {
           categories: categoriesStore,
           metadata: metadataStore,
-          project: {
-            // TO REMOVE ONCE PROJECT STORE IS MIGRATE HERE
-            state: {
-              project: {
-                name: 'ProjectName',
-                projectType: { href: '/project-types/61683' },
-                id: uuidv4(),
-              },
-            },
-            getters: {
-              getProject(state) {
-                return state.project;
-              },
-            },
-          },
+          projects: projectsStore,
         },
         mutations: {
           eventBusSendEvent(state, { code, payload }) {
@@ -57,16 +45,26 @@ import { internalServerErrorResolver } from '../../service/api/mocks/commonMock'
       },
       [
         {
-          name: 'PbCategories',
-          path: '/',
+          name: 'Home',
+          redirect: '/projects/001',
+        },
+        {
+          name: 'ProjectHub',
+          path: '/projects/:projectId',
           component: PbCategories,
+          beforeEnter: async (to, from, next, store) => {
+            await store.dispatch('projects/loadProject', '001');
+            store.dispatch('categories/loadCategories', store.state.projects.project);
+            store.dispatch('categories/loadPreselectedCategories', store.state.projects.project);
+            next();
+          },
         },
         {
           name: 'PbProducts',
           path: '/projects/:projectId/categories/:categoryId/products',
           component: PbProducts,
           beforeEnter: async (to, from, next, store) => {
-            await store.dispatch('categories/loadProductsByWorkKind', {
+            store.dispatch('categories/loadProductsByWorkKind', {
               workKindId: to?.params?.categoryId,
               storeId: '012',
             });
@@ -78,6 +76,15 @@ import { internalServerErrorResolver } from '../../service/api/mocks/commonMock'
   ]}
 />
 
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `<div style="margin: 0 auto;min-height: 100vh;width: 100%;">
+    <router-view v-slot="{ Component }">
+      <component :is="Component" :key="$route.fullPath" />
+    </router-view>
+  </div>`,
+});
+
 # 🦠 `PbCategories` - Component
 
 The `PbCategories` component to display categories.
@@ -90,26 +97,15 @@ The `PbCategories` component to display categories.
     parameters={{
       controls: { disable: true },
       msw: [
-        rest.get('/api/project-types/:projectTypeId/work-kinds', workKindByProjectTypeResolver),
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/project-types/:projectTypeId/work-kinds', getWorkKindByProjectTypeResolver),
         rest.get('/api/inhabitant-projects/:inhabitantProjectId/work-kinds', getEmptyWorkKindsByProjectIdResolver),
         rest.put('/api/inhabitant-projects/:inhabitantProjectId/work-kinds', saveWorkKindResolver),
       ],
     }}
     height="512px"
   >
-    {{
-      components: { PbCategories },
-      setup() {
-        const store = useStore();
-        store.dispatch('categories/loadCategories', store.state.project.project);
-        store.dispatch('categories/loadPreselectedCategories', store.state.project.project);
-      },
-      template: `  <div style='flex-direction: column;display: flex;justify-content: center;align-items: center;width: 60vw;margin: 0 auto;'>
-                     <router-view v-slot="{ Component }">
-                       <component :is="Component" :key="$route.fullPath" />
-                     </router-view>
-                   </div>`,
-    }}
+    {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
 
@@ -121,25 +117,14 @@ The `PbCategories` component to display categories.
     parameters={{
       controls: { disable: true },
       msw: [
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
         rest.get('/api/project-types/:projectTypeId/work-kinds', internalServerErrorResolver),
         rest.get('/api/inhabitant-projects/:inhabitantProjectId/work-kinds', getEmptyWorkKindsByProjectIdResolver),
       ],
     }}
     height="512px"
   >
-    {{
-      components: { PbCategories },
-      setup() {
-        const store = useStore();
-        store.dispatch('categories/loadCategories', store.state.project.project);
-        store.dispatch('categories/loadPreselectedCategories', store.state.project.project);
-      },
-      template: `  <div style='flex-direction: column;display: flex;justify-content: center;align-items: center;width: 60vw;margin: 0 auto;'>
-                     <router-view v-slot="{ Component }">
-                       <component :is="Component" :key="$route.fullPath" />
-                     </router-view>
-                   </div>`,
-    }}
+    {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
 
@@ -152,25 +137,14 @@ The `PbCategories` component to display categories.
       controls: { disable: true },
       storyshots: { disable: true },
       msw: [
-        rest.get('/api/project-types/:projectTypeId/work-kinds', workKindByProjectTypeResolver),
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/project-types/:projectTypeId/work-kinds', getWorkKindByProjectTypeResolver),
         rest.get('/api/inhabitant-projects/:inhabitantProjectId/work-kinds', internalServerErrorResolver),
       ],
     }}
     height="512px"
   >
-    {{
-      components: { PbCategories },
-      setup() {
-        const store = useStore();
-        store.dispatch('categories/loadCategories', store.state.project.project);
-        store.dispatch('categories/loadPreselectedCategories', store.state.project.project);
-      },
-      template: `  <div style='flex-direction: column;display: flex;justify-content: center;align-items: center;width: 60vw;margin: 0 auto;'>
-                     <router-view v-slot="{ Component }">
-                       <component :is="Component" :key="$route.fullPath" />
-                     </router-view>
-                   </div>`,
-    }}
+    {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
 
@@ -183,25 +157,14 @@ The `PbCategories` component to display categories.
       controls: { disable: true },
       storyshots: { disable: true },
       msw: [
-        rest.get('/api/project-types/:projectTypeId/work-kinds', workKindByProjectTypeResolver),
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/project-types/:projectTypeId/work-kinds', getWorkKindByProjectTypeResolver),
         rest.get('/api/inhabitant-projects/:inhabitantProjectId/work-kinds', getWorkKindsByProjectIdResolver),
         rest.get('/api/work-kinds/:workKindId/products', getProductsByWorkKindResolver),
       ],
     }}
     height="512px"
   >
-    {{
-      components: { PbCategories },
-      setup() {
-        const store = useStore();
-        store.dispatch('categories/loadCategories', store.state.project.project);
-        store.dispatch('categories/loadPreselectedCategories', store.state.project.project);
-      },
-      template: `  <div style='flex-direction: column;display: flex;justify-content: center;align-items: center;width: 60vw;margin: 0 auto;'>
-                     <router-view v-slot="{ Component }">
-                       <component :is="Component" :key="$route.fullPath" />
-                     </router-view>
-                   </div>`,
-    }}
+    {TemplateSandbox.bind({})}
   </Story>
 </Canvas>

package/src/components/categories/PbCategories.vue

@@ -27,12 +27,21 @@
         <pb-empty-state
           image="https://storage.googleapis.com/project-booster-media/empty-states/empty-state-cateegories_cuisine_01.png"
           class="pb-categories__section-content-card"
-          title="Accéder rapidement aux bons produits"
-          subtitle="Ajoutez les catégories de produits qui vous intéressent et accédez-y en un clic."
-          type-icon="https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Display_SearchProduct_24px.svg"
-          button-label="Ajouter des catégories"
+          :title="!readOnly ? 'Accéder rapidement aux bons produits' : ''"
+          :subtitle="
+            !readOnly
+              ? 'Ajoutez les catégories de produits qui vous intéressent et accédez-y en un clic.'
+              : 'Aucune catégorie de produits ajoutée'
+          "
+          :type-icon="
+            !readOnly
+              ? 'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Display_SearchProduct_24px.svg'
+              : ''
+          "
+          :button-label="!readOnly ? 'Ajouter des catégories' : ''"
           @button-click="handleDisplayCategories"
           v-if="selectedCategories.length === 0"
+          :disabled="readOnly"
         />
         <pb-categories-list :categories="selectedCategories" v-else></pb-categories-list>
       </m-flex>
@@ -55,7 +64,7 @@
             subtitle-loading="Nous recherchons les catégories"
             subtitle-error="Une erreur est survenue"
             retry-button-label="Réessayer"
-            @click="$store.dispatch('categories/loadCategories', project)"
+            @click-loader="$store.dispatch('categories/loadCategories', project)"
           />
           <pb-cards-select :options="decorateOptions(getCategories)" v-model="value" :multiselect="true" v-else />
         </m-flex>
@@ -94,6 +103,7 @@ import MNotification from '../mozaic/notifications/MNotification';
 import PbAnimableLoader from '../loader/PbAnimableLoader';
 export default {
   name: 'PbCategories',
+
   components: {
     PbAnimableLoader,
     MNotification,
@@ -105,12 +115,24 @@ export default {
     PbEmptyState,
     MFlex,
   },
+
   props: {
+    /**
+     * Indicates whether the categories dialog is displayed
+     */
     displayCategoriesDialog: {
       type: Boolean,
       default: false,
     },
+    /**
+     * Indicates whether the UI is read only
+     */
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
   },
+
   data: () => ({
     showCategoriesDialog: false,
     value: [],
@@ -118,6 +140,7 @@ export default {
     numberOfCategoriesAdded: 0,
     notificationText: 'Catégories mises à jour',
   }),
+
   computed: {
     ...mapGetters('categories', {
       categoriesLoadError: 'getCategoriesLoadError',
@@ -127,7 +150,7 @@ export default {
       selectedCategoriesLoadError: 'getSelectedCategoriesLoadError',
       isLoadingSelectedCategories: 'isLoadingSelectedCategories',
     }),
-    ...mapGetters({
+    ...mapGetters('projects', {
       project: 'getProject',
     }),
     getCategories() {
@@ -137,6 +160,7 @@ export default {
       });
     },
   },
+
   watch: {
     displayCategoriesDialog(newValue) {
       this.showCategoriesDialog = newValue;
@@ -165,6 +189,7 @@ export default {
   created() {
     this.showCategoriesDialog = this.displayCategoriesDialog;
   },
+
   methods: {
     handleRetry() {
       this.$store.dispatch('categories/loadPreselectedCategories', this.project);
@@ -246,7 +271,6 @@ $responsive-breakpoint: 'm';
   box-sizing: border-box;
   margin: 0 auto;
   max-width: 1024px;
-  padding: 0 $mu100 $mu100 0;
   width: 100%;
 
   &__section {