project-booster-vue 8.91.9 → 8.93.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.91.9",
+  "version": "8.93.1",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",

package/src/components/categories/PbCategoriesSection.vue

@@ -334,8 +334,6 @@ $responsive-breakpoint: 'm';
     }
 
     & :deep(.m-dialog__footer) {
-      z-index: 1;
-
       @include set-box-shadow('m');
     }
 

package/src/components/configurations/search/PbConfigurationsSearchStore.js

@@ -7,7 +7,7 @@ let searchConfigurationsFn = ({ commit, dispatch }) => {
 
   setTimeout(() => {
     dispatch('displayFoundConfigurations');
-  }, 2000);
+  }, 200);
 };
 
 function ConfigurationsSearchStoreOptions(emptyConfigurationList = false) {
@@ -147,8 +147,8 @@ function ConfigurationsSearchStoreOptions(emptyConfigurationList = false) {
             setTimeout(() => {
               dispatch('startLoadingStory');
             }, 300);
-          }, 2000);
-        }, 2000);
+          }, 200);
+        }, 200);
       },
 
       startEmptyStateStory({ commit }) {

package/src/components/configurations/section/PbConfigurationsSection.stories.mdx

@@ -28,7 +28,11 @@ The `PbConfigurationsSection` component displays a list of configurations with a
 ## Loading
 
 <Canvas>
-  <Story name="Feature - Loading" parameters={{ controls: { disable: true } }} height="512px">
+  <Story
+    name="Feature - Loading"
+    parameters={{ controls: { disable: true }, storyshots: { disable: true } }}
+    height="512px"
+  >
     {{
       components: { PbConfigurationsSection },
       created() {

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

@@ -513,8 +513,6 @@ $responsive-breakpoint: 'l';
   }
 
   :deep(.m-dialog__footer) {
-    z-index: 1;
-
     @include set-box-shadow('m');
   }
 

package/src/components/mozaic/dialog/MDialog.vue

@@ -279,7 +279,6 @@ $responsive-breakpoint: 'm';
 
   &__header {
     background-color: white;
-
     box-sizing: border-box;
     position: relative;
     width: 100%;

package/src/components/products/PbProductsStore.js

@@ -63,13 +63,13 @@ const pbProductsStore = {
       setTimeout(() => {
         commit('addProducts', products);
         commit('setIsLoadingProducts', false);
-      }, 2000);
+      }, 0);
     },
     async loadProductsError({ commit, state }) {
       setTimeout(() => {
         commit('addProducts', []);
         commit('setProductsLoadError', true);
-      }, 2000);
+      }, 0);
     },
     pushedCardClickEvent({ commit, state }, clickedCardInfo) {
       window.open(clickedCardInfo.url, '_blank');

package/src/components/project-item-save/PbProjectItemSave.vue

@@ -271,8 +271,6 @@ $responsive-breakpoint: 'm';
     }
 
     & :deep(.m-dialog__footer) {
-      z-index: 1;
-
       @include set-box-shadow('m');
     }
 

package/src/components/project-item-save/PbProjectItemSaveProjectsList.vue

@@ -114,6 +114,8 @@ $responsive-breakpoint-l: 'l';
     }
 
     :deep(.pb-items-list) {
+      width: 100%;
+
       :deep(.pb-items-list__item) {
         border: none !important;
 

package/src/components/question/list-select/PbListSelect.vue

@@ -212,6 +212,7 @@ export default {
         answersToSubmit.push({
           selected: true,
           value: typeof answer.value === 'string' ? answer.value : answer.key,
+          code: answer.key,
         });
       }
 
@@ -221,7 +222,7 @@ export default {
       } else if (props.payload?.answers[answersToSubmit[0].value]?.nextStep) {
         nextStep = props.payload.answers[answersToSubmit[0].value].nextStep;
       } else {
-        nextStep = props.nextStep;
+        nextStep = null;
       }
 
       /**
@@ -340,6 +341,7 @@ export default {
       itemsListProps,
       skipQuestion,
       submitAnswers,
+      decorateBoolean,
     };
   },
 };

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

@@ -541,8 +541,6 @@ $responsive-breakpoint: 'l';
   }
 
   :deep(.m-dialog__footer) {
-    z-index: 1;
-
     @include set-box-shadow('m');
   }
 

package/src/components/restitution/PbRestitution.stories.mdx

@@ -5,6 +5,7 @@ import DEFAULT_PAYLOAD from './restitution-default.json';
 import NO_PRICE_BAR from './restitution-no-pricebar.json';
 import SAVE_ITEM from './restitution-with-save-item.json';
 import EXIT_OPTIONS from './restitution-with-exit-options.json';
+import EXIT_OPTIONS_WITH_CONDITIONNAL from './restitution-with-conditionnal-exit-options.json';
 
 <Meta
   title="Project Booster/Components/ 🦠 PbRestitution"
@@ -139,9 +140,11 @@ export const TemplateSandbox = (args, { argTypes }) => ({
   template: `<pb-restitution
       :theme="args.theme"
       :payload="args.payload"
+      :answers="args.answers"
       :show-save-estimate="args.showSaveEstimate"
       :runtime-options="args.runtimeOptions"
-      :show-back-button="args.showBackButton" />`,
+      :show-back-button="args.showBackButton"
+  />`,
 });
 
 <Canvas>
@@ -241,3 +244,30 @@ Restitution theming can be achieved with the `theme` prop or thanks to the `payl
     {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
+
+## Customize exit options according to previous answers
+
+It is possible to customize the cards displayed in the exit options of the restitution.
+
+export const previousAnswers = {
+  QUESTION_1: [
+    {
+      code: 'QUESTION_1--ANSWER_1',
+    },
+  ],
+};
+
+<Source language="json" code={JSON.stringify(previousAnswers, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Feature/Conditional exit options"
+    parameters={{ controls: { disable: true } }}
+    args={{
+      payload: EXIT_OPTIONS_WITH_CONDITIONNAL,
+      answers: previousAnswers,
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/restitution/PbRestitution.vue

@@ -45,7 +45,7 @@
         v-if="isLoggedIn"
       ></pb-project-item-save>
     </m-flex>
-    <pb-restitution-exit :exit-options="exitOptions" v-if="displayRestitutionExit" ref="pbRestitutionExit" />
+    <pb-restitution-exit :exit-options="displayedExitOptions" v-if="displayRestitutionExit" ref="pbRestitutionExit" />
   </m-flex>
 </template>
 
@@ -147,11 +147,16 @@ export default {
       return this.runtimeOptions.isLoggedIn === true;
     },
     displayRestitutionExit() {
-      return !this.runtimeOptions.projectMode && this.exitOptions;
+      return !this.runtimeOptions.projectMode && this.payload?.exitOptions;
     },
     componentTheme() {
       return this.payload?.theme ?? this.theme;
     },
+    displayedExitOptions() {
+      return this.payload?.exitOptions.filter(
+        (exitOption) => !exitOption.conditions || this.areConditionsValid(exitOption.conditions),
+      );
+    },
   },
 
   watch: {
@@ -173,6 +178,7 @@ export default {
       this.showSaveProjectItem = this.showSaveEstimate;
     }
   },
+
   mounted() {
     this.updateDisplayedCta();
     this.notifications = [];
@@ -185,9 +191,6 @@ export default {
           return this.areConditionsValid(cta.conditions);
         });
       }
-      if (this.payload?.exitOptions) {
-        this.exitOptions = this.payload?.exitOptions;
-      }
     },
 
     areConditionsValid(conditions) {
@@ -244,6 +247,7 @@ export default {
         });
       }
     },
+
     handleItemCreated(notification) {
       // eslint-disable-next-line vue/no-mutating-props
       this.runtimeOptions.estimateCreated = true;

package/src/components/restitution/PbRestitutionBody.stories.mdx

@@ -61,6 +61,11 @@ import { Meta, Canvas, Story, ArgsTable, Source } from '@storybook/addon-docs';
             return state.summary;
           },
         },
+        actions: {
+          sendEventToBus({ commit }, action) {
+            console.log('Event sent to bus: ', JSON.stringify(action, null, '\t'));
+          },
+        },
       },
       [],
     ),
@@ -207,15 +212,41 @@ listenMessage();
 
 <Canvas>
   <Story
-    name="Message on click"
+    name="Message on button click"
     args={{
       callToActions: [
         {
           type: 'button',
           label: 'Voir les cuisines Delinia ID',
-          href: 'https://www.leroymerlin.fr/v3/p/produits/cuisine/meuble-de-cuisine/cuisine-equipee-l1501755932',
           bordered: true,
           message: 'Voir les cuisines Delinia button clicked',
+          action: {
+            code: '__END__',
+          },
+        },
+      ],
+    }}
+    parameters={{ storyshots: { disable: true } }}
+    inline={false}
+    height="1024px"
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Message on link click"
+    args={{
+      callToActions: [
+        {
+          type: 'link',
+          label: 'Voir les cuisines Delinia ID',
+          bordered: true,
+          message: 'Voir les cuisines Delinia button clicked',
+          action: {
+            code: '__END__',
+          },
         },
       ],
     }}
@@ -232,7 +263,7 @@ export const listenMessage = function () {
     global.window.addEventListener(
       'message',
       (event) => {
-        if (event.data === 'Voir les cuisines Delinia button clicked') {
+        if (event.data === 'Voir les cuisines Delinia button/link clicked') {
           console.log(event);
         }
       },

package/src/components/restitution/PbRestitutionBody.vue

@@ -53,7 +53,7 @@
           :label="call.label"
           :left-icon="call.icon"
           theme="light"
-          @click="call;"
+          @click="callAction(call)"
         />
       </m-flex>
     </m-flex>

package/src/components/restitution/restitution-with-conditionnal-exit-options.json

@@ -0,0 +1,50 @@
+{
+  "priceBar": {
+    "title": "Votre projet de construction neuve se situe entre",
+    "subtitle": "Construire ma nouvelle maison"
+  },
+  "exitOptions": [
+    {
+      "id": "Concevoir-ma-cuisine-en-3D",
+      "title": "Concevoir ma cuisine en 3D",
+      "subtitle": "Concevez votre cuisine vous-même avec notre configurateur 3D et finalisez votre projet en magasin",
+      "type": "oaa",
+      "link": "https://cuisine3d-did.leroymerlin.fr/Page_Tunnel_Cuisine/page_tunnel_cuisine.html",
+      "image": "https://storage.googleapis.com/project-booster-media/common/services/tools.jpg",
+      "conditions": ["isAnswerMatching('QUESTION_1', 'QUESTION_1--ANSWER_1')"]
+    },
+    {
+      "id": "Réaliser votre plan de cuisine avec un expert",
+      "title": "Réaliser votre plan de cuisine avec un expert",
+      "subtitle": "Sur rendez-vous à distance",
+      "type": "oaa",
+      "link": "https://www.leroymerlin.fr/assistance-technique.html",
+      "image": "https://storage.googleapis.com/project-booster-media/common/services/appointment.jpg",
+      "conditions": ["isAnswerMatching('QUESTION_1', 'QUESTION_1--ANSWER_1')"]
+    },
+    {
+      "id": "Découvrir nos cuisines",
+      "title": "Découvrir nos cuisines",
+      "subtitle": "Découvrez l’ensemble de nos cuisines Delinia ID et leurs nombreuses possibilités de personnalisation.",
+      "type": "oaa",
+      "link": "https://cuisine3d-did.leroymerlin.fr/Page_Tunnel_Cuisine/page_tunnel_cuisine.html?mag=190",
+      "image": "https://storage.googleapis.com/project-booster-media/kitchen/kitchen-range.jpeg",
+      "conditions": ["isAnswerMatching('QUESTION_1', 'QUESTION_1--ANSWER_2')"]
+    }
+  ],
+  "callToActions": [
+    {
+      "type": "button",
+      "label": "J enregistre mon estimation",
+      "bordered": true
+    },
+    {
+      "type": "link",
+      "label": "Envie d’aller plus loin dans votre projet ? Découvrez nos services",
+      "action": {
+        "type": "EXIT",
+        "code": "SUMMARY"
+      }
+    }
+  ]
+}

package/src/components/scenario/PbScenario-Demo-Project.stories.js

@@ -163,6 +163,9 @@ export const estimateHeatingProd = generateStory(
 export const estimateBathroomProd = generateStory(
   'https://storage.googleapis.com/pb-prod-adeo-disp-subproject-forms/forms/c9c4df50-cbcb-4265-b9a7-6645d3adb03b.json',
 );
+export const estimateFloorProd = generateStory(
+  'https://storage.googleapis.com/pb-prod-adeo-disp-subproject-forms/forms/LMFR_FLOOR.json',
+);
 
 export const projectDeclarationGenericProd = generateStory(
   'https://storage.googleapis.com/pb-prod-adeo-disp-project-declaration-forms/forms/project-declaration-generic-generated.json',
@@ -219,6 +222,9 @@ export const estimateHeatingPrep = generateStory(
 export const estimateBathroomPrep = generateStory(
   'https://storage.googleapis.com/pb-preprod-adeo-disp-subproject-forms/forms/c9c4df50-cbcb-4265-b9a7-6645d3adb03b.json',
 );
+export const estimateFloorPrep = generateStory(
+  'https://storage.googleapis.com/pb-preprod-adeo-disp-subproject-forms/forms/LMFR_FLOOR.json',
+);
 
 export const projectDeclarationGenericPrep = generateStory(
   'https://storage.googleapis.com/pb-preprod-adeo-disp-project-declaration-forms/forms/project-declaration-generic-generated.json',

package/src/components/scenario/PbScenario-Features-Conditional-With-List-Select.stories.json

@@ -0,0 +1,143 @@
+{
+  "__START__": { "code": "__START__", "type": "SCENARIO", "stepCode": "SCENARIO-1" },
+  "SCENARIO-1": { "code": "SCENARIO-1", "type": "SCENARIO", "stepCode": "SCENARIO-1__STEP-1" },
+  "SCENARIO-1__STEP-1": {
+    "code": "SCENARIO-1__STEP-1",
+    "type": "STEP",
+    "component": "PbListSelect",
+    "nextStep": { "code": "SCENARIO-1__STEP-2" },
+    "payload": {
+      "viewModel": { "label": "Scenario 1 - Step 1", "actionLabel": "Validate" },
+      "answers": {
+        "SCENARIO-1__STEP-1--ANSWER-1": {
+          "code": "SCENARIO-1__STEP-1--ANSWER-1",
+          "viewModel": { "title": "Answer 1" }
+        },
+        "SCENARIO-1__STEP-1--ANSWER-2": {
+          "code": "SCENARIO-1__STEP-1--ANSWER-2",
+          "viewModel": { "title": "Answer 2" }
+        },
+        "SCENARIO-1__STEP-1--ANSWER-3": {
+          "code": "SCENARIO-1__STEP-1--ANSWER-3",
+          "viewModel": { "title": "Answer 3" }
+        }
+      }
+    }
+  },
+  "SCENARIO-1__STEP-2": {
+    "code": "SCENARIO-1__STEP-2",
+    "type": "STEP",
+    "component": "PbListSelect",
+    "nextStep": { "code": "SCENARIO-1__STEP-3" },
+    "payload": {
+      "viewModel": { "label": "Scenario 1 - Step 2", "actionLabel": "Validate" },
+      "answers": {
+        "SCENARIO-1__STEP-2--ANSWER-1": {
+          "code": "SCENARIO-1__STEP-2--ANSWER-1",
+          "viewModel": { "title": "Answer 1" }
+        },
+        "SCENARIO-1__STEP-2--ANSWER-2": {
+          "code": "SCENARIO-1__STEP-2--ANSWER-2",
+          "viewModel": { "title": "Answer 2" }
+        },
+        "SCENARIO-1__STEP-2--ANSWER-3": {
+          "code": "SCENARIO-1__STEP-2--ANSWER-3",
+          "viewModel": { "title": "Answer 3" }
+        }
+      }
+    }
+  },
+  "SCENARIO-1__STEP-3": {
+    "code": "SCENARIO-1__STEP-3",
+    "type": "STEP",
+    "component": "PbListSelect",
+    "nextStep": {
+      "conditionals": [
+        {
+          "conditions": [
+            "isAnswerMatching('SCENARIO-1__STEP-1', 'SCENARIO-1__STEP-1--ANSWER-1')",
+            "isAnswerMatching('SCENARIO-1__STEP-2', 'SCENARIO-1__STEP-2--ANSWER-1')"
+          ],
+          "nextStep": { "code": "SCENARIO-1__STEP-5" }
+        },
+        {
+          "conditions": [
+            "isAnswerMatching('SCENARIO-1__STEP-1', 'SCENARIO-1__STEP-1--ANSWER-2')",
+            "isAnswerMatching('SCENARIO-1__STEP-2', 'SCENARIO-1__STEP-2--ANSWER-2')"
+          ],
+          "nextStep": { "code": "__END__" }
+        },
+        { "conditions": ["true"], "nextStep": { "code": "SCENARIO-1__STEP-4" } }
+      ]
+    },
+    "payload": {
+      "viewModel": { "label": "Scenario 1 - Step 3", "actionLabel": "Validate" },
+      "answers": {
+        "SCENARIO-1__STEP-3--ANSWER-1": {
+          "code": "SCENARIO-1__STEP-3--ANSWER-1",
+          "viewModel": { "title": "Answer 1" }
+        },
+        "SCENARIO-1__STEP-3--ANSWER-2": {
+          "code": "SCENARIO-1__STEP-3--ANSWER-2",
+          "viewModel": { "title": "Answer 2" }
+        },
+        "SCENARIO-1__STEP-3--ANSWER-3": {
+          "code": "SCENARIO-1__STEP-3--ANSWER-3",
+          "viewModel": { "title": "Answer 3" }
+        }
+      }
+    }
+  },
+  "SCENARIO-1__STEP-4": {
+    "code": "SCENARIO-1__STEP-4",
+    "type": "STEP",
+    "component": "PbListSelect",
+    "nextStep": { "code": "SCENARIO-1__STEP-5" },
+    "payload": {
+      "viewModel": { "label": "Scenario 1 - Step 4", "actionLabel": "Validate" },
+      "answers": {
+        "SCENARIO-1__STEP-4--ANSWER-1": {
+          "code": "SCENARIO-1__STEP-4--ANSWER-1",
+          "viewModel": { "title": "Answer 1" }
+        },
+        "SCENARIO-1__STEP-4--ANSWER-2": {
+          "code": "SCENARIO-1__STEP-4--ANSWER-2",
+          "viewModel": { "title": "Answer 2" }
+        },
+        "SCENARIO-1__STEP-4--ANSWER-3": {
+          "code": "SCENARIO-1__STEP-4--ANSWER-3",
+          "viewModel": { "title": "Answer 3" }
+        }
+      }
+    }
+  },
+  "SCENARIO-1__STEP-5": {
+    "code": "SCENARIO-1__STEP-5",
+    "type": "STEP",
+    "component": "PbListSelect",
+    "nextStep": { "code": "__END__" },
+    "payload": {
+      "viewModel": { "label": "Scenario 1 - Step 5", "actionLabel": "Validate" },
+      "answers": {
+        "SCENARIO-1__STEP-5--ANSWER-1": {
+          "code": "SCENARIO-1__STEP-5--ANSWER-1",
+          "viewModel": { "title": "Answer 1" }
+        },
+        "SCENARIO-1__STEP-5--ANSWER-2": {
+          "code": "SCENARIO-1__STEP-5--ANSWER-2",
+          "viewModel": { "title": "Answer 2" }
+        },
+        "SCENARIO-1__STEP-5--ANSWER-3": {
+          "code": "SCENARIO-1__STEP-5--ANSWER-3",
+          "viewModel": { "title": "Answer 3" }
+        }
+      }
+    }
+  },
+  "__END__": {
+    "code": "__END__",
+    "type": "STEP",
+    "component": "PbListSelect",
+    "payload": { "viewModel": { "label": "Fin" } }
+  }
+}

package/src/components/scenario/PbScenario-Features-Conditional.stories.mdx

@@ -3,6 +3,7 @@ import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '
 import PbScenario from './PbScenario';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import conditionalScenarioJson from './PbScenario-Features-Conditional.stories.json';
+import conditionalWithListSelectScenarioJson from './PbScenario-Features-Conditional-With-List-Select.stories.json';
 import { TemplateSandbox } from './PbScenario.stories.mdx';
 import conditionalScenarioSchema from './Conditional-scenario.svg';
 
@@ -99,11 +100,22 @@ You can also use variables from runtimeOptions injected into the scenario.
 
 <Canvas>
   <Story
-    name="Conditional scenario"
+    name="Conditional scenario with cards"
     inline={false}
-    height="758px"
+    height="512px"
     args={{ scenarios: conditionalScenarioJson, minHeight: 'auto' }}
   >
     {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story
+    name="Conditional scenario with list select"
+    inline={false}
+    height="512px"
+    args={{ scenarios: conditionalWithListSelectScenarioJson, minHeight: 'auto' }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/scenario/PbScenario-Test-Project.stories.js

@@ -143,60 +143,63 @@ const generateStory = (jsonLocation) => {
 };
 
 export const estimateNewConstructionKozikaza = generateStory(
-  'https://storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/cba6210a-dfba-4556-ad8b-e17a37b029c4.json',
+  'https://storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/cba6210a-dfba-4556-ad8b-e17a37b029c4.json',
 );
 export const estimateNewConstruction = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/6e3e9d6d-a019-4c1c-8d25-002a4ebfcb46.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/6e3e9d6d-a019-4c1c-8d25-002a4ebfcb46.json',
 );
 export const estimateDressing = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/10df6aa4-4ae0-41a0-93e3-dc66eb9d39c8.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/10df6aa4-4ae0-41a0-93e3-dc66eb9d39c8.json',
 );
 export const estimateBookcase = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/88d96e4c-685b-4275-8eae-f50828fe4755.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/88d96e4c-685b-4275-8eae-f50828fe4755.json',
 );
 export const estimateKitchen = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/068160b2-b28a-46fa-8fd6-4775450fa7b4.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/068160b2-b28a-46fa-8fd6-4775450fa7b4.json',
 );
 export const estimateInsulation = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/60100496-92ea-49ab-8a43-c08afa57cd60.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/60100496-92ea-49ab-8a43-c08afa57cd60.json',
 );
 export const estimateTv = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/dc5370cf-0761-43a0-8309-ced76be08d8b.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/dc5370cf-0761-43a0-8309-ced76be08d8b.json',
 );
 export const estimateStorage = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/e39126db-03f7-4b07-975a-97b4cf603ef1.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/e39126db-03f7-4b07-975a-97b4cf603ef1.json',
 );
 export const estimateHeating = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/eaba8264-620d-475e-830f-89166b49a667.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/eaba8264-620d-475e-830f-89166b49a667.json',
 );
 export const estimateBathroom = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/c9c4df50-cbcb-4265-b9a7-6645d3adb03b.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/c9c4df50-cbcb-4265-b9a7-6645d3adb03b.json',
+);
+export const estimateFloor = generateStory(
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/LMFR_FLOOR.json',
 );
 
 export const projectDeclarationGeneric = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/project-declaration-generic-generated.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/project-declaration-generic-generated.json',
 );
 export const projectDeclarationBlind = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/project-declaration-blind-generated.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/project-declaration-blind-generated.json',
 );
 export const projectDeclarationCanopy = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/project-declaration-canopy-generated.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/project-declaration-canopy-generated.json',
 );
 export const projectDeclarationCooling = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/project-declaration-cooling-generated.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/project-declaration-cooling-generated.json',
 );
 export const projectDeclarationFrontDoor = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/project-declaration-front-door-generated.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/project-declaration-front-door-generated.json',
 );
 export const projectDeclarationGarageDoor = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/project-declaration-garage-door-generated.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/project-declaration-garage-door-generated.json',
 );
 export const projectDeclarationKitchen = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/project-declaration-kitchen-generated.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/project-declaration-kitchen-generated.json',
 );
 export const projectDeclarationShutter = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/project-declaration-shutter-generated.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/project-declaration-shutter-generated.json',
 );
 export const projectDeclarationWindow = generateStory(
-  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/test-migration-cards/project-declaration-window-generated.json',
+  'https:/storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/forms/project-declaration-window-generated.json',
 );

package/src/components/tasks/details/PbTaskDetails.vue

@@ -384,19 +384,15 @@ export default {
 
       dirty.value = tempDirty;
     };
-    const saveTask = async (validate, valid) => {
-      await validate();
-
-      if (valid) {
-        updateOptionValues();
-        /**
-         * Emitted to save a task
-         * @event save-task
-         * @type {Event}
-         */
-        context.emit('save-task', props.task);
-        dirty.value = false;
-      }
+    const saveTask = async () => {
+      updateOptionValues();
+      /**
+       * Emitted to save a task
+       * @event save-task
+       * @type {Event}
+       */
+      context.emit('save-task', props.task);
+      dirty.value = false;
     };
     const updateOptionValues = () => {
       if (props.task?.viewModel?.sections) {
@@ -484,7 +480,9 @@ export default {
       return yup.object(options);
     });
     const { handleSubmit, errors, submitCount } = useForm({ validationSchema });
-    const handleFormSubmit = handleSubmit((values) => {});
+    const handleFormSubmit = handleSubmit((values) => {
+      saveTask();
+    });
     const getErrorsCount = computed(() => {
       let errorsCount = 0;
 

package/src/components/tasks/preview/PbTasksPreview.stories.mdx

@@ -1,3 +1,4 @@
+import { useStore } from 'vuex';
 import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
 import { Meta, Canvas, Story, ArgsTable, Source } from '@storybook/addon-docs';
 import PbTasksPreview from './PbTasksPreview';
@@ -40,18 +41,18 @@ The `PbTasksPreview` component display all the task for a planner.
 
 # `PbTasksPreview` - Component props
 
-export const TemplateSandbox = (args, { argTypes }) => {
-  return {
-    props: Object.keys(argTypes),
-    components: { PbTasksPreview },
-    created() {
-      setTimeout(() => {
-        this.$store.dispatch('togglePlannerProjectPlannerInitialized');
-      }, 2000);
-    },
-    template: `<pb-tasks-preview :tasks="tasks" :tasks-number="tasksNumber" style="margin: 0 auto;max-width: 1024px; padding: 0 1rem;" />`,
-  };
-};
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PbTasksPreview },
+  setup() {
+    const store = useStore();
+    setTimeout(() => {
+      store.dispatch('togglePlannerProjectPlannerInitialized');
+    }, 2000);
+    return { args };
+  },
+  template: `<pb-tasks-preview :tasks="args.tasks" :tasks-number="args.tasksNumber" style="margin: 0 auto;max-width: 1024px; padding: 0 1rem;" />`,
+});
 
 <Canvas>
   <Story name="101 Sandbox" inline={false} args={{ tasks: TASKS.slice() }} height="512px">

package/src/pages/project/projects-list/PbProjectsList.stories.js

@@ -178,7 +178,7 @@ const storeOptions = {
           }
           commit('setCurrentProjectsPage', state.currentProjectsPage + state.projectsPerPageCount);
           commit('setIsLoadingProjects', false);
-        }, 2000);
+        }, 300);
       }
       state._bypassProjectsLoad = false;
 
@@ -203,8 +203,8 @@ const storeOptions = {
           }
           commit('setCurrentProjectsPage', state.currentProjectsPage + state.projectsPerPageCount);
           commit('setIsLoadingProjects', false);
-        }, 2000);
-      }, 2000);
+        }, 300);
+      }, 300);
     },
 
     loadProjectsEmpty({ commit }) {
@@ -215,7 +215,7 @@ const storeOptions = {
       setTimeout(() => {
         commit('setProjects', projectsListEmpty);
         commit('setIsLoadingProjects', false);
-      }, 2000);
+      }, 300);
     },
 
     loadProjectsError({ commit }) {
@@ -224,7 +224,7 @@ const storeOptions = {
 
       setTimeout(() => {
         commit('setProjectsLoadError', new Error());
-      }, 2000);
+      }, 300);
     },
 
     loadProject({ commit }, projectId) {
@@ -245,7 +245,7 @@ const storeOptions = {
           commit('setIsLoadingProject', false);
         }
         failedProjectLoadedCounter++;
-      }, 2000);
+      }, 300);
     },
 
     deleteProject({ commit, state }, projectId) {
@@ -271,10 +271,10 @@ const storeOptions = {
 
           setTimeout(() => {
             commit('setIsProjectDeletedSuccessDisplayed', false);
-          }, 2000);
+          }, 300);
         }
         failedDeletionCounter++;
-      }, 2000);
+      }, 300);
     },
 
     retryProjectDeletion({ commit, state }) {
@@ -290,8 +290,8 @@ const storeOptions = {
         setTimeout(() => {
           // Hide save success notification
           commit('setIsProjectDeletedSuccessDisplayed', false);
-        }, 2000);
-      }, 2000);
+        }, 300);
+      }, 300);
     },
 
     resetProjectDeletionError({ commit }) {