project-booster-vue 9.49.1 → 9.51.0

package/package.json

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

package/src/components/pedagogy/PbPedagogy.vue

@@ -21,20 +21,22 @@
       >
         {{ payload.viewModel.instructionsButton.text }}
       </m-flex>
-      <m-button
-        v-if="payload.viewModel.downloadButton"
-        :theme="payload.viewModel.downloadButton.theme"
-        :label="payload.viewModel.downloadButton.label"
-        class="pb-pedagogy__content-upload-button"
-        @click="handleButtonLinkClicked"
-      />
-      <m-button
-        v-if="payload.multiSelect"
-        theme="primary"
-        :label="payload.multiSelect.actions.VALIDATE.label"
-        class="pb-pedagogy__content-action-button"
-        @click="handleValidateClicked"
-      />
+      <m-flex class="pb-pedagogy__content--button" direction="column">
+        <m-button
+          v-if="payload.viewModel.downloadButton"
+          :theme="payload.viewModel.downloadButton.theme"
+          :label="payload.viewModel.downloadButton.label"
+          class="pb-pedagogy__content-upload-button mc-button--full"
+          @click="handleButtonLinkClicked"
+        />
+        <m-button
+          v-for="action in payload.callToActions"
+          :theme="action.bordered ? 'bordered' : 'solid'"
+          :label="action.label"
+          class="pb-pedagogy__content-action-button mc-button--full"
+          @click="handleValidateClicked(action)"
+        />
+      </m-flex>
       <m-flex
         justify-content="center"
         align-items="center"
@@ -141,12 +143,10 @@ export default defineComponent({
       window.open(targetUrl, '_blank');
     },
 
-    async handleValidateClicked() {
+    async handleValidateClicked(action: any) {
       this.$emit('step-completed', {
-        answers: this.payload.multiSelect.actions.VALIDATE.isAnswer
-          ? [this.payload.multiSelect.actions.VALIDATE]
-          : null,
-        nextStep: this.payload.multiSelect.actions.VALIDATE.nextStep,
+        answers: action.isAnswer ? [action] : null,
+        nextStep: action.nextStep,
       });
     },
   },

package/src/components/question/PbQuestion-Features-With-Progress-Bar.stories.mdx

@@ -0,0 +1,138 @@
+import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
+import { Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import PbQuestion from './PbQuestion';
+import { TemplateSandbox } from './PbQuestion.stories.mdx';
+
+<Meta
+  title="Project Booster/Rework/Questions/Step With ProgressBar"
+  component={PbQuestion}
+  argTypes={{
+    onStepCompleted: {
+      action: 'Step completed',
+      table: { disable: true },
+    },
+  }}
+  decorators={[
+    nestedAppDecorator(
+      {
+        actions: {
+          sendEventToBus({}, payload) {
+            console.log('Event sent to bus', payload);
+          },
+        },
+      },
+      [],
+    ),
+  ]}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+# `PbQuestion` - Image card width progress bar
+
+##
+
+It is possible to force the cards' layout on mobile from **2 cards per line** to **1 card per line**. To achieve this, use the
+`forceOneCardPerLineOnMobile` property on the question `viewModel`:
+
+export const forceOnCardPerLineOnMobilePayload = {
+  viewModel: {
+    answersComponent: 'MPbCard',
+    widthFromL: true,
+    progressBar: true,
+    label: 'Vous êtes :',
+    modalView: {
+      link: {
+        textContent: 'Où trouver mon revenu fiscal de référence ?',
+        hrefContent: 'https://google.fr/',
+      },
+    },
+    showNotification: false,
+  },
+  answers: {
+    'ANSWER-1': {
+      code: 'ANSWER-1',
+      viewModel: {
+        title: 'Maison',
+        image: 'https://storage.googleapis.com/project-booster-media/energyrenovation/house.png',
+        cardMinRatio: 'auto',
+      },
+    },
+    'ANSWER-2': {
+      code: 'ANSWER-2',
+      viewModel: {
+        title: 'Appartement',
+        image: 'https://storage.googleapis.com/project-booster-media/energyrenovation/apartement.jpg',
+        cardMinRatio: 'auto',
+      },
+      warningMessage: {
+        type: 'info',
+        htmlContent: '<p>Mon message</p>',
+        link: {
+          textContent: '',
+          hrefContent: '',
+        },
+      },
+    },
+  },
+};
+
+<Source language="json" code={JSON.stringify(forceOnCardPerLineOnMobilePayload, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Image card width progress bar"
+    inline={false}
+    height="862px"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: forceOnCardPerLineOnMobilePayload, minHeight: 'auto' }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+# `PbQuestion` - Text card width progress bar
+
+##
+
+It is possible to force the cards' layout on mobile from **2 cards per line** to **1 card per line**. To achieve this, use the
+`TextCardPayload` property on the question `viewModel`:
+
+export const TextCardPayload = {
+  viewModel: {
+    answersComponent: 'MPbCard',
+    widthFromL: true,
+    progressBar: true,
+    label: 'Vous êtes :',
+    showNotification: true,
+  },
+  answers: {
+    'ANSWER-1': {
+      code: 'ANSWER-1',
+      viewModel: {
+        title: 'Propriétaire',
+      },
+    },
+    'ANSWER-2': {
+      code: 'ANSWER-2',
+      viewModel: {
+        title: 'Locataire',
+      },
+    },
+  },
+};
+
+<Source language="json" code={JSON.stringify(TextCardPayload, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Text card width progress bar"
+    inline={false}
+    height="862px"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: TextCardPayload, minHeight: 'auto' }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/question/PbQuestion.vue

@@ -51,19 +51,13 @@
           </div>
         </div>
       </div>
-      <m-container fluid class="pb-question__answers-container">
+      <m-container fluid class="pb-question__answers-container" :class="{ progress: progressBar }">
         <m-flexy class="pb-question__answers-container-flexy">
-          <transition-group
-            :class="`pb-question__answers  ${
-              displayedAnswers && displayedAnswers.length < 4 ? 'pb-question__answers--centered' : ''
-            }`"
-            :name="showMoreAnimation"
-            tag="div"
-          >
+          <transition-group :class="`pb-question__answers`" :name="showMoreAnimation" tag="div">
             <m-flexy-col
               v-for="answer in displayedAnswers"
               :key="`pb-question__answers-${answer.code}`"
-              :width="payload.viewModel.forceOneCardPerLineOnMobile ? 'full' : '1of2'"
+              :width="payload.viewModel.forceOneCardPerLineOnMobile ? 'full' : '1of3'"
               :width-from-m="payload.viewModel.widthFromM ? payload.viewModel.widthFromM : '1of3'"
               :width-from-l="payload.viewModel.widthFromL ? payload.viewModel.widthFromL : '1of4'"
             >
@@ -171,6 +165,13 @@
           {{ payload.viewModel.footer.label }}
         </div>
       </div>
+      <div class="pb-question__modal-link" v-if="payload.viewModel.link">
+        <m-link
+          :label="payload.viewModel.link.textContent"
+          :href="payload.viewModel.link.hrefContent"
+          @click.prevent="handleShowModal"
+        ></m-link>
+      </div>
     </div>
     <pb-sticky-footer
       v-show="
@@ -366,6 +367,7 @@ import MImage from '../mozaic/image/MImage.vue';
 import MLink from '../mozaic/link/MLink.vue';
 import PbCard from '../cards/PbCard.vue';
 import PbStickyFooter from '../sticky-footer/PbStickyFooter.vue';
+import PbCitySearch from './city-search/PbCitySearch.vue';
 import { sortAnswers } from './sortAnswers';
 import { areConditionsValid } from '../../services/scenarioConditionals';
 import { decorate } from '@/services/decorate';
@@ -401,6 +403,7 @@ export default defineComponent({
     MLink,
     PbCard,
     PbStickyFooter,
+    PbCitySearch,
   },
 
   props: {
@@ -478,6 +481,10 @@ export default defineComponent({
     displayVideo: false,
     pbQuestionActionsButtonsMaxHeight: 0,
     decorate,
+    progressBar: false,
+    slotComponent: false,
+    showNotification: false,
+    showModal: false,
   }),
 
   computed: {
@@ -514,6 +521,7 @@ export default defineComponent({
     this.selectedAnswers = new Map<string, boolean>();
     this.updateSelectedAnswers();
     this.updatePbQuestionActionsButtonsSizeHeight();
+    this.progressBar = this.payload.viewModel?.progressBar || false;
   },
 
   beforeUnmount() {
@@ -788,6 +796,9 @@ export default defineComponent({
         },
       });
     },
+    handleShowModal() {
+      this.showModal = !this.showModal;
+    },
   },
 });
 </script>
@@ -969,6 +980,22 @@ $answers-apparition-duration: '0.5s';
     &-flexy {
       width: 100%;
     }
+
+    &.progress {
+      max-width: 591px;
+    }
+
+    &-progress {
+      max-width: calc(591px - 2rem);
+      width: 100%;
+      margin: 0 auto;
+
+      &-label {
+        margin: $mu200 0 0 0;
+        @include set-font-face('semi-bold');
+        @include set-font-scale('06', 'l');
+      }
+    }
   }
 
   &__answers {
@@ -1271,6 +1298,22 @@ $answers-apparition-duration: '0.5s';
       @include set-font-face('regular');
     }
   }
+
+  &__notifications {
+    width: calc(100% - 30px);
+    margin: auto;
+  }
+
+  &__redirect-link {
+    width: calc(100% - 30px);
+    margin: auto;
+    margin-top: $mu200;
+  }
+
+  &__modal-link {
+    width: calc(591px - 2rem);
+    margin: 1rem auto;
+  }
 }
 </style>
 

package/src/components/rework/cards/3-cards-list.json

@@ -0,0 +1,34 @@
+{
+  "cards": {
+    "CARD-1": {
+      "code": "CARD-1",
+      "viewModel": {
+        "title": "Par Chat",
+        "image": "https://storage.googleapis.com/project-booster-media/common/services/store.jpg",
+        "text": "Sit voluptatem accusantium",
+        "buttonLabel": "Contacter",
+        "buttonHref": "http://leroymerlin.fr"
+      }
+    },
+    "CARD-2": {
+      "code": "CARD-2",
+      "viewModel": {
+        "title": "Par téléphone",
+        "image": "https://storage.googleapis.com/project-booster-media/common/services/appointment.jpg",
+        "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
+        "buttonLabel": "Contacter",
+        "buttonHref": "http://leroymerlin.fr"
+      }
+    },
+    "CARD-3": {
+      "code": "CARD-3",
+      "viewModel": {
+        "title": "En autonomie",
+        "image": "https://storage.googleapis.com/project-booster-media/common/services/photo-OAA-rangement-lien-tool.jpg",
+        "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
+        "buttonLabel": "Contacter",
+        "buttonHref": "http://leroymerlin.fr"
+      }
+    }
+  }
+}

package/src/components/rework/cards/4-cards-list.json

@@ -0,0 +1,44 @@
+{
+  "cards": {
+    "CARD-1": {
+      "code": "CARD-1",
+      "viewModel": {
+        "title": "Par Chat",
+        "image": "https://storage.googleapis.com/project-booster-media/common/services/store.jpg",
+        "text": "Sit voluptatem accusantium",
+        "buttonLabel": "Contacter",
+        "buttonHref": "http://leroymerlin.fr"
+      }
+    },
+    "CARD-2": {
+      "code": "CARD-2",
+      "viewModel": {
+        "title": "Par téléphone",
+        "image": "https://storage.googleapis.com/project-booster-media/common/services/appointment.jpg",
+        "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
+        "buttonLabel": "Contacter",
+        "buttonHref": "http://leroymerlin.fr"
+      }
+    },
+    "CARD-3": {
+      "code": "CARD-3",
+      "viewModel": {
+        "title": "En autonomie",
+        "image": "https://storage.googleapis.com/project-booster-media/common/services/photo-OAA-rangement-lien-tool.jpg",
+        "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
+        "buttonLabel": "Contacter",
+        "buttonHref": "http://leroymerlin.fr"
+      }
+    },
+    "CARD-4": {
+      "code": "CARD-4",
+      "viewModel": {
+        "title": "En ??",
+        "image": "https://storage.googleapis.com/project-booster-media/common/services/installation.jpg",
+        "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
+        "buttonLabel": "Contacter",
+        "buttonHref": "http://leroymerlin.fr"
+      }
+    }
+  }
+}