project-booster-vue 8.104.0 → 8.104.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.104.0",
+  "version": "8.104.4",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",
@@ -72,19 +72,19 @@
     "@babel/plugin-transform-modules-commonjs": "7.14.5",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
-    "@storybook/addon-a11y": "6.3.8",
-    "@storybook/addon-essentials": "6.3.8",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-essentials": "6.3.12",
     "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-links": "6.3.8",
+    "@storybook/addon-links": "6.3.12",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.3.8",
-    "@storybook/addon-storyshots-puppeteer": "6.3.8",
-    "@storybook/addon-storysource": "6.3.8",
-    "@storybook/addons": "6.3.8",
-    "@storybook/source-loader": "6.3.8",
+    "@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/source-loader": "6.3.12",
     "@storybook/storybook-deployer": "2.8.10",
-    "@storybook/theming": "6.3.8",
-    "@storybook/vue3": "6.3.8",
+    "@storybook/theming": "6.3.12",
+    "@storybook/vue3": "6.3.12",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/vue": "6.4.2",
     "@vue/cli": "5.0.0-beta.2",
@@ -127,7 +127,7 @@
     "vue-jest": "5.0.0-alpha.10",
     "vue-loader": "16.2.0",
     "msw": "0.35.0",
-    "msw-storybook-addon": "1.3.0",
+    "msw-storybook-addon": "1.4.1",
     "@mswjs/interceptors": "^0.12.7"
   },
   "eslintConfig": {

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

@@ -51,11 +51,11 @@ import { documentThumbnailResolver, uploadDocumentResolver } from '../../service
 
 The `PbAppointment` component to make an appointment.
 
-## StartAppointment
+## Start Appointment
 
 <Canvas>
   <Story
-    name="Feature - showcaseWithAppointment"
+    name="Feature - Start Appointment"
     parameters={{
       controls: { disable: true },
       msw: [

package/src/components/appointment/PbAppointment.vue

@@ -43,19 +43,7 @@ export default {
 
 <style scoped lang="scss">
 @import 'variables';
-:deep(.pb-scenario) {
-  width: 100%;
-}
-:deep(.pb-question__footer-container--icon) {
-  display: none;
-}
-:deep(.pb-question__footer-container--label) {
-  @include set-font-scale('05', 'm');
-  color: $color-grey-600;
-  max-width: 600px;
-}
 .pb-appointment {
-  height: 100%;
   &__loader {
     margin: $mu500 0;
   }

package/src/components/appointment/PbAppointmentStartSection.vue

@@ -94,7 +94,7 @@ $responsive-breakpoint: 'm';
 
 .pb-appointment-section {
   height: 100%;
-  margin-top: $mu500;
+  padding-top: $mu500;
 
   &__content {
     padding: $mu100;

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

@@ -62,7 +62,7 @@
         {
           "conditions": ["isAnswerMatching('START_SCENARIO', 'CONTINUE')"],
           "nextStep": {
-            "code": "LMFR_QUESTION_WORK_START_DATE"
+            "code": "LMFR_QUESTION_SCENARIO"
           }
         },
         {
@@ -74,6 +74,18 @@
       ]
     }
   },
+  "LMFR_QUESTION_SCENARIO": {
+    "code": "LMFR_QUESTION_SCENARIO",
+    "type": "SCENARIO",
+    "stepCode": "LMFR_QUESTION_WORK_START_DATE",
+    "nextStep": {
+      "code": "__END__"
+    },
+    "trackProgress": true,
+    "slots": {
+      "stickyTop": { "component": "PbProgressBarHeader" }
+    }
+  },
   "LMFR_QUESTION_WORK_START_DATE": {
     "code": "LMFR_QUESTION_WORK_START_DATE",
     "type": "STEP",
@@ -115,7 +127,6 @@
         }
       }
     },
-
     "nextStep": {
       "code": "LMFR_QUESTION_BUDGET"
     }
@@ -126,7 +137,7 @@
     "component": "PbQuestion",
     "payload": {
       "viewModel": {
-        "label": "Avez-vous une idée du budget votre cuisine (mobilier et équipements) ?",
+        "label": "Avez-vous une idée du budget de votre cuisine (mobilier et équipements) ?",
         "subtitle": "Votre conseiller veillera à respecter votre budget",
         "answersComponent": "PbCard"
       },
@@ -182,11 +193,11 @@
       "viewModel": {
         "label": "Qui posera votre cuisine ?",
         "footer": {
-          "label": "*Nos artisans partenaires sont rigoureusement sélectionnés et vos travaux sont garantis jusqu'à 10 ans. Vous pouvez également bénéficier de la TVA réduite à 10% (au lieu de 20%) sur les produits éligibles et la pose. Les travaux doivent être réalisés dans un lieu d’habitation achevé depuis plus de 2 ans (agrandissements exclus). Sans condition de revenu."
+          "label": "*Nos artisans partenaires sont rigoureusement sélectionnés et vos travaux sont garantis jusqu'à 10 ans. Vous pouvez également bénéficier de la TVA réduite à 10% (au lieu de 20%) sur les produits éligibles et la pose. Les travaux doivent être réalisés dans un lieu d’habitation achevé depuis plus de 2 ans (agrandissements exclus). Sans condition de revenu.",
+          "theme": "gray"
         },
         "answersComponent": "PbCard"
       },
-
       "answers": {
         "BY_MYSELF": {
           "code": "BY_MYSELF",
@@ -231,7 +242,6 @@
         "label": " Avez-vous déjà un plan avec les mesures de votre cuisine ?",
         "answersComponent": "PbCard"
       },
-
       "answers": {
         "HAVE_PLAN": {
           "code": "HAVE_PLAN",
@@ -251,30 +261,28 @@
       }
     },
     "nextStep": {
-      "conditionals": [
-        {
-          "conditions": ["isAnswerMatching('LMFR_QUESTION_PLAN', 'HAVE_PLAN')"],
-          "nextStep": {
-            "code": "LMFR_QUESTION_HAVE_PLAN"
-          }
-        },
-        {
-          "conditions": ["isAnswerMatching('LMFR_QUESTION_PLAN', 'DONT_HAVE_PLAN')"],
-          "nextStep": {
-            "code": "LMFR_QUESTION_DONT_HAVE_PLAN"
-          }
-        }
-      ]
+      "code": "LMFR_QUESTION_SCENARIO_PLAN"
+    }
+  },
+  "LMFR_QUESTION_SCENARIO_PLAN": {
+    "code": "LMFR_QUESTION_SCENARIO_PLAN",
+    "type": "SCENARIO",
+    "stepCode": "LMFR_QUESTION_PLAN_INFO",
+    "nextStep": {
+      "code": "__END__"
+    },
+    "slots": {
+      "stickyTop": { "component": "PbProgressBarHeader" }
     }
   },
-  "LMFR_QUESTION_HAVE_PLAN": {
-    "code": "LMFR_QUESTION_HAVE_PLAN",
+  "LMFR_QUESTION_PLAN_INFO": {
+    "code": "LMFR_QUESTION_PLAN_INFO",
     "type": "STEP",
     "component": "PbQuestion",
     "payload": {
       "viewModel": {
-        "label": "Sur votre plan, vérifiez que vous avez les bonnes mesures :",
-        "subtitle": "Votre conseiller aura besoin de ces mesures pour créer votre plan de cuisine en 3D.",
+        "label": "${getAnswerValue('LMFR_QUESTION_PLAN', 'value') === 'HAVE_PLAN' ? 'Sur votre plan, vérifiez que vous avez les bonnes mesures :' : 'Réalisez rapidement un plan avec les mesures de votre pièce en 3 étapes'}",
+        "subtitle": "${getAnswerValue('LMFR_QUESTION_PLAN', 'value') === 'HAVE_PLAN' ? 'Votre conseiller aura besoin de ces mesures pour créer votre plan de cuisine en 3D.' : 'Sur une feuille, dessinez la pièce et reportez les bonnes mesures, prenez une photo du plan et ajoutez la.'}",
         "widthFromL": "1of3",
         "forceOneCardPerLineOnMobile": true,
         "answersComponent": "PbCard",
@@ -304,7 +312,6 @@
           }
         }
       ],
-
       "answers": {
         "1": {
           "viewModel": {
@@ -315,7 +322,7 @@
               "headerTitle": "Exemple de mesures des dimensions de la pièce sur le plan",
               "imageUrl": "https://storage.googleapis.com/project-booster-media/vad/plans/plan-etape-01.png",
               "title": "Mesurez les dimensions de la pièce",
-              "text": "Mesurez les dimensions de votre pièce. <br/> <span class='text-bold'>Longueur,  largeur,  hauteur. </span> <br/> Reportez ces mesures sur votre plan."
+              "text": "Mesurez les dimensions de votre pièce : <br/> <span class='text-bold'>longueur,  largeur,  hauteur. </span> <br/> Reportez ces mesures sur votre plan."
             }
           }
         },
@@ -337,7 +344,6 @@
             "title": "Les emplacements des éléments fixes",
             "linkLabel": "Voir la liste des éléments fixes",
             "image": "https://storage.googleapis.com/project-booster-media/vad/plans/Qualif-RDV-Elements-fixes.png",
-
             "dialog": {
               "headerTitle": "Exemple de placement des éléments fixes sur le plan",
               "imageUrl": "https://storage.googleapis.com/project-booster-media/vad/plans/plan-etape-03.png",
@@ -349,103 +355,6 @@
       }
     }
   },
-  "LMFR_QUESTION_DONT_HAVE_PLAN": {
-    "code": "LMFR_QUESTION_DONT_HAVE_PLAN",
-    "type": "STEP",
-    "component": "PbQuestion",
-    "payload": {
-      "viewModel": {
-        "label": "Réalisez rapidement un plan avec les mesures de votre pièce en 3 étapes",
-        "subtitle": "Sur une feuille, dessinez la pièce et reportez les bonnes mesures, prenez une photo du plan et ajoutez la.",
-        "answersComponent": "PbCard",
-        "forceOneCardPerLineOnMobile": true,
-        "widthFromL": "1of3",
-        "video": {
-          "src": "https://players.brightcove.net/2812541250001/SkgXKciHDZ_default/index.html?videoId=6270735637001&autoplay=play",
-          "theme": "bordered",
-          "label": "Voir le guide en vidéo",
-          "icon": "https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Media_Play_24px.svg"
-        }
-      },
-      "skippable": [
-        {
-          "label": "Ajouter un plan plus tard",
-          "theme": "bordered",
-          "width": "full",
-          "nextStep": {
-            "code": "ADD_PLAN_LATER"
-          }
-        },
-        {
-          "label": "Ajouter un plan",
-          "theme": "solid",
-          "width": "full",
-          "widthFromM": "fit",
-          "nextStep": {
-            "code": "LMFR_QUESTION_ADD_PLAN"
-          }
-        }
-      ],
-      "answers": {
-        "1": {
-          "viewModel": {
-            "title": "Mesurez les dimensions de la pièce",
-            "linkLabel": "Voir un exemple",
-            "image": "https://storage.googleapis.com/project-booster-media/vad/plans/Qualif-RDV-VAD-Mesures-Dimension-Piece.png",
-            "dialog": {
-              "headerTitle": "Exemple de mesures des dimensions de la pièce sur le plan",
-              "imageUrl": "https://storage.googleapis.com/project-booster-media/vad/plans/plan-etape-01.png",
-              "title": "Mesurez les dimensions de la pièce",
-              "text": "Mesurez les dimensions de votre pièce. <br/> <span class='text-bold'>Longueur,  largeur,  hauteur. </span> <br/> Reportez ces mesures sur votre plan."
-            }
-          }
-        },
-        "2": {
-          "viewModel": {
-            "title": "Mesurez et placez les portes et fenêtres",
-            "linkLabel": "Voir un exemple",
-            "image": "https://storage.googleapis.com/project-booster-media/vad/plans/Qualif-RDV-Piece-Portes-et-fenetres.png",
-            "dialog": {
-              "headerTitle": "Exemple de placement des portes et fenêtres sur le plan",
-              "imageUrl": "https://storage.googleapis.com/project-booster-media/vad/plans/plan-etape-02.png",
-              "title": "Mesurez et placez les portes et fenêtres",
-              "text": "Mesurez la <span class='text-bold'> largeur </span> et la  <span class='text-bold'>  hauteur </span>  des portes et fenêtres, puis  <span class='text-bold'> leur distance avec les murs. </span> <br/> Mesurez la  <span class='text-bold'> hauteur des seuils </span>  de fenêtres et indiquez le  <span class='text-bold'> sens d’ouverture </span> des portes."
-            }
-          }
-        },
-        "3": {
-          "viewModel": {
-            "title": "Repérez les emplacements des éléments fixes",
-            "linkLabel": "Voir la liste des éléments fixes",
-            "image": "https://storage.googleapis.com/project-booster-media/vad/plans/Qualif-RDV-Elements-fixes.png",
-
-            "dialog": {
-              "headerTitle": "Exemple de placement des éléments fixes sur le plan",
-              "imageUrl": "https://storage.googleapis.com/project-booster-media/vad/plans/plan-etape-03.png",
-              "title": "Repérez l'emplacement des éléments fixes",
-              "text": "Situez les <span class='text-bold'> les canalisations d’eau </span> et de <span class='text-bold'> gaz </span>, les <span class='text-bold'> prises électriques </span>, les tuyaux, la sortie de <span class='text-bold'> hotte </span> et de la <span class='text-bold'> ventilation </span>. <br/> Placez également les <span class='text-bold'>radiateurs</span>, <span class='text-bold'>chauffe-eau </span> et <span class='text-bold'>colonne technique </span>."
-            }
-          }
-        }
-      }
-    },
-    "nextStep": {
-      "conditionals": [
-        {
-          "conditions": ["isAnswerMatching('LMFR_QUESTION_DONT_HAVE_PLAN', 'ADD_PLAN_LATER')"],
-          "nextStep": {
-            "code": "ADD_PLAN_LATER"
-          }
-        },
-        {
-          "conditions": ["isAnswerMatching('LMFR_QUESTION_DONT_HAVE_PLAN', 'ADD_PLAN')"],
-          "nextStep": {
-            "code": "LMFR_QUESTION_ADD_PLAN"
-          }
-        }
-      ]
-    }
-  },
   "LMFR_QUESTION_ADD_PLAN": {
     "code": "LMFR_QUESTION_ADD_PLAN",
     "type": "STEP",
@@ -454,6 +363,10 @@
       "viewModel": {
         "label": "Vos plans de cuisine",
         "answersComponent": "PbCard",
+        "showMore": {
+          "itemsPerPage": 4,
+          "label": "Afficher plus des documents"
+        },
         "mediaPayload": {
           "viewModel": {
             "title": "Ajouter un plan",
@@ -472,7 +385,7 @@
               "documentTypes": [
                 {
                   "code": "HAND_DRAWN_PLAN",
-                  "label": "Un plan fait moi même"
+                  "label": "Un plan fait moi-même"
                 },
                 {
                   "code": "ARCHITECT_PLAN",
@@ -563,7 +476,7 @@
           "viewModel": {
             "value": "3",
             "url": "https://www.leroymerlin.fr/inspiration/les-meilleures-idees-pour-chaque-piece/cuisine/",
-            "image": "https://images.ctfassets.net/8q8qvv8j6cpk/59igdEVBhIa37nrfbnGs4V/252c4bb73bf865a68b53036fba6dba21/carrelage.jpg",
+            "image": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/inspiration-cuisine.jpg",
             "title": "Des idées et conseils pour votre cuisine",
             "width": "full",
             "widthFromM": "1of3",
@@ -571,6 +484,9 @@
           }
         }
       ]
+    },
+    "slots": {
+      "stickyTop": { "display": false }
     }
   },
   "START_LATER": {
@@ -612,7 +528,7 @@
           "viewModel": {
             "value": "3",
             "url": "https://www.leroymerlin.fr/inspiration/les-meilleures-idees-pour-chaque-piece/cuisine/",
-            "image": "https://images.ctfassets.net/8q8qvv8j6cpk/59igdEVBhIa37nrfbnGs4V/252c4bb73bf865a68b53036fba6dba21/carrelage.jpg",
+            "image": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/inspiration-cuisine.jpg",
             "title": "Des idées et conseils pour votre cuisine",
             "width": "full",
             "widthFromM": "1of3",
@@ -622,7 +538,6 @@
       ]
     }
   },
-
   "__END__": {
     "code": "__END__",
     "type": "END",
@@ -662,7 +577,7 @@
           "viewModel": {
             "value": "3",
             "url": "https://www.leroymerlin.fr/inspiration/les-meilleures-idees-pour-chaque-piece/cuisine/",
-            "image": "https://images.ctfassets.net/8q8qvv8j6cpk/59igdEVBhIa37nrfbnGs4V/252c4bb73bf865a68b53036fba6dba21/carrelage.jpg",
+            "image": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/inspiration-cuisine.jpg",
             "title": "Des idées et conseils pour votre cuisine",
             "width": "full",
             "widthFromM": "1of3",
@@ -670,6 +585,9 @@
           }
         }
       ]
+    },
+    "slots": {
+      "stickyTop": { "display": false }
     }
   }
 }