project-booster-vue 9.25.0 → 9.28.0

package/package.json

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

package/src/components/cards/PbCard.vue

@@ -5,9 +5,9 @@
       disabled ? 'pb-card--disabled' : ''
     }${flattened ? 'pb-card--no-pointer-events' : ''} ${
       cardMinRatio && cardMinRatio !== 'auto' ? 'm-ratio-container--' + cardMinRatio : ''
-    }`"
+    }${borderTop ? 'pb-card--border-top' : ''}`"
     :role="!buttonLabel ? 'button' : 'article'"
-    :style="`min-height: ${cardMinHeight}`"
+    :style="`min-height: ${cardMinHeight}; border-color:${borderTop ? borderTop : null}`"
     @click="handleCardClick"
   >
     <m-flex
@@ -309,6 +309,13 @@ export default defineComponent({
       type: [Boolean, String],
       default: false,
     },
+    /**
+     * Definies if the card has a border top
+     */
+    borderTop: {
+      type: String,
+      default: null,
+    },
   },
 
   computed: {
@@ -361,6 +368,11 @@ $responsive-breakpoint: 's';
   overflow: hidden;
   position: relative;
 
+  &--border-top {
+    border-top-style: solid !important;
+    border-top-width: 4px !important;
+  }
+
   &__items-container:empty ~ &__image-container {
     height: 100%;
 

package/src/components/question/PbQuestion-Features-Answers-Conditional.stories.mdx

@@ -36,7 +36,8 @@ It is possible to condition the display of certain answers according to previous
 
 export const conditionalAnswersPayload = {
   viewModel: {
-    label: 'The question title',
+    label: 'Quel est votre revenu fiscal de référence annuel de votre foyer fiscal ?',
+    subtitle: 'Le revenu fiscal de référence du foyer concerne la somme des revenus des conjoints.',
     answersComponent: 'PbCard',
   },
   answers: {

package/src/components/question/PbQuestion-Features-Answers-Modal.stories.mdx

@@ -0,0 +1,122 @@
+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/Scenario/Questions/PbQuestion 🦠/Features/Answers/Conditional"
+  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` - With Modal
+
+export const conditionalAnswersPayload = {
+  viewModel: {
+    label: 'Quel est votre revenu fiscal de référence annuel de votre foyer fiscal ?',
+    subtitle: 'Le revenu fiscal de référence du foyer concerne la somme des revenus des conjoints.',
+    answersComponent: 'PbCard',
+  },
+  answers: {
+    'ANSWER-1': {
+      code: 'ANSWER-1',
+      conditions: [
+        "isAnswerMatching('QUESTION_1', 'QUESTION_1--ANSWER_1')",
+        "isAnswerMatching('QUESTION_2', 'QUESTION_2--ANSWER_1')",
+      ],
+      viewModel: {
+        title: '15000 - 20000 €',
+        borderColor: 'orange',
+      },
+    },
+    'ANSWER-2': {
+      code: 'ANSWER-2',
+      conditions: ['runtimeOptions.isElligible'],
+      viewModel: {
+        title: '20000 - 30000 €',
+        borderColor: 'red',
+      },
+    },
+    'ANSWER-3': {
+      code: 'ANSWER-3',
+      viewModel: {
+        title: '30000 - 40000 €',
+        borderColor: 'purple',
+      },
+    },
+    'ANSWER-4': {
+      code: 'ANSWER-4',
+      viewModel: {
+        title: 'Plus de 50000 €',
+        borderColor: 'yellow',
+      },
+    },
+  },
+  helpArea: [
+    {
+      type: 'text',
+      label: 'Besoin d’aide pour trouver votre revenu fiscal de référence ?',
+    },
+    {
+      type: 'link',
+      label: 'Voir l’aide pour trouver votre revenu fiscal',
+      action: {
+        type: 'MODAL',
+        viewModelDialog: {
+          headerTitle: 'Ou trouver votre revenu fiscal de référence ?',
+          subTitle: 'Sur votre dernier avis d’imposition disponible dans votre espace impots-gouv.fr',
+          imgUrl:
+            'https://www.lerevenu.com/sites/site/files/styles/img_lg/public/field/image/impots_7.jpg?itok=A2rlQzx3',
+        },
+      },
+    },
+  ],
+};
+
+<Source language="json" code={JSON.stringify(conditionalAnswersPayload, null, '  ')} />
+
+export const conditionalAnswersAnswers = {
+  QUESTION_1: [{ code: 'QUESTION_1--ANSWER_1' }],
+  QUESTION_2: [{ code: 'QUESTION_2--ANSWER_1' }],
+};
+
+export const conditionalAnswersRuntimeOptions = {
+  isElligible: true,
+};
+
+<Canvas>
+  <Story
+    name="With Modal"
+    inline={false}
+    height="862px"
+    parameters={{ controls: { disable: true } }}
+    args={{
+      payload: conditionalAnswersPayload,
+      answers: new Map(Object.entries(conditionalAnswersAnswers)),
+      runtimeOptions: conditionalAnswersRuntimeOptions,
+      minHeight: 'auto',
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/question/PbQuestion.vue

@@ -72,6 +72,7 @@
                   :is="payload.viewModel.answersComponent"
                   v-if="payload.viewModel.answersComponent !== 'MButton'"
                   class="pb-question__answer__component"
+                  :border-top="answer.viewModel.borderColor || null"
                   :image="decorate(answers, runtimeOptions, answer.viewModel.image, payload.defaultDecoratorValue)"
                   :image-title="
                     decorate(answers, runtimeOptions, answer.viewModel.imageTitle, payload.defaultDecoratorValue)
@@ -252,7 +253,59 @@
         </m-flexy-col>
       </m-flexy>
     </m-container>
-    <div class="pb-question__padding-bottom" />
+    <div class="pb-question__padding-bottom" v-if="!payload.helpArea" />
+    <m-flex
+      class="pb-question__help"
+      v-if="payload.helpArea"
+      direction="column"
+      align-items="center"
+      justify-content="center"
+    >
+      <div v-for="helpItem in payload.helpArea" :key="helpItem.type">
+        <div v-if="helpItem.type === 'text'">
+          <p class="pb-question__help__text">{{ helpItem.label }}</p>
+        </div>
+        <div v-if="helpItem.type === 'link'">
+          <m-link
+            class="pb-question__help__link"
+            :label="helpItem.label"
+            width="full"
+            size="l"
+            theme="primary"
+            @click="handleHelpClick(helpItem.action)"
+          />
+        </div>
+      </div>
+    </m-flex>
+
+    <m-dialog
+      class="pb-question__dialog-help"
+      v-model:show-dialog="displayDialogHelp"
+      width="771px"
+      height="492px"
+      maxHeight="100vh"
+    >
+      <template #header v-if="helpDialog">
+        <div class="pb-question__dialog-help__title">
+          <h2>{{ helpDialog.viewModelDialog.headerTitle }}</h2>
+          <p>{{ helpDialog.viewModelDialog.subTitle }}</p>
+        </div>
+      </template>
+      <template #body>
+        <div class="pb-question__dialog-help__body" v-if="helpDialog">
+          <div
+            :style="`background-image: url(${helpDialog.viewModelDialog.imgUrl});`"
+            class="pb-question__dialog-help__body__image"
+          />
+        </div>
+      </template>
+      <template v-slot:footer>
+        <m-flex class="pb-question__dialog-help__footer" align-items="center" justify-content="center">
+          <m-button label="Fermer" theme="bordered-neutral" @click.prevent="displayDialogHelp = false"></m-button>
+        </m-flex>
+      </template>
+    </m-dialog>
+
     <m-dialog class="pb-question__dialog" v-model:show-dialog="displayDialog">
       <template #header v-if="!displayVideo">
         <span>{{ dialog.headerTitle }}</span>
@@ -322,6 +375,7 @@ import {
   ScenarioStepSkippableOptions,
   ScenarioStepViewModel,
   ScenarioCondition,
+  ScenarioStepDialog,
 } from '@/types/pb/Scenario';
 
 const BACK_ICON =
@@ -460,7 +514,9 @@ export default defineComponent({
     BACK_ICON,
     INFO_ICON,
     displayDialog: false,
+    displayDialogHelp: false,
     dialog: undefined as undefined | ScenarioStepAnswerDialog,
+    helpDialog: undefined as undefined | ScenarioStepDialog,
     displayVideo: false,
     pbQuestionActionsButtonsMaxHeight: 0,
     decorate,
@@ -761,6 +817,19 @@ export default defineComponent({
         },
       });
     },
+    handleHelpClick(answer: ScenarioStepDialog) {
+      this.displayDialogHelp = !this.displayDialogHelp;
+      this.helpDialog = answer ?? undefined;
+      this.$store.dispatch('sendEventToBus', {
+        code: 'LINK-CLICKED',
+        payload: {
+          context: {
+            answer: answer,
+            questionId: this.stepName,
+          },
+        },
+      });
+    },
   },
 });
 </script>
@@ -1229,8 +1298,37 @@ $answers-apparition-duration: '0.5s';
     }
   }
 
+  &__dialog-help {
+    &__title {
+      padding: $mu250 $mu250 0 $mu250;
+    }
+
+    &__body {
+      padding: 0 $mu250;
+      @include set-font-scale('05', 'l');
+      &__image {
+        background-size: cover;
+        padding: 120px 0;
+      }
+    }
+
+    &__footer {
+      padding: $mu100 $mu250 $mu250 $mu250;
+    }
+  }
+
   &__padding-bottom {
     height: $mu800;
   }
+
+  &__help {
+    margin-bottom: $mu250;
+    &__link,
+    &__text {
+      margin: 0;
+      @include set-font-scale('05', 'l');
+      @include set-font-face('regular');
+    }
+  }
 }
 </style>

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

@@ -15,6 +15,9 @@
     <div class="pb-city-search__title">
       {{ computedPayload.viewModel.label }}
     </div>
+    <div v-if="computedPayload.viewModel.subtitle" class="pb-city-search__subtitle">
+      {{ computedPayload.viewModel.subtitle }}
+    </div>
     <div class="pb-city-search__form">
       <m-flex class="pb-city-search__header" ref="pbCitySearchHeader" direction="column">
         <m-flex
@@ -178,6 +181,7 @@ export default defineComponent({
       name: string;
       region: string;
       inseeCode: string;
+      postalCode: string;
     } | null,
     searchKeywordBackup: undefined as string | undefined,
     displaySuggestions: false,
@@ -218,6 +222,12 @@ export default defineComponent({
           this?.computedPayload?.value?.city?.inseeCode,
           this?.computedPayload?.defaultDecoratorValue,
         ),
+        postalCode: decorate(
+          this.answers,
+          this.runtimeOptions,
+          this?.computedPayload?.value?.city?.postalCode,
+          this?.computedPayload?.defaultDecoratorValue,
+        ),
       };
       this.searchKeyword = this?.selectedCity?.name;
       this.forceHideSuggestions = true;
@@ -301,7 +311,6 @@ export default defineComponent({
       this.focused = false;
       this.forceHideSuggestions = true;
       this.searchKeywordBackup = this.searchKeyword;
-      this.searchKeyword = suggestion.terms[0].value;
       this.getPlaceDetails(suggestion.place_id);
       setTimeout(() => {
         this.autoFocused = true;
@@ -320,22 +329,23 @@ export default defineComponent({
             const selectedCity = results[0];
             this.suggestions = null;
 
-            const placeData = await axios.get('https://geo.api.gouv.fr/communes', {
-              params: {
-                lat: selectedCity.geometry.location.lat(),
-                lon: selectedCity.geometry.location.lng(),
-                fields: 'nom,code',
-                format: 'json',
-                geometry: 'centre',
-              },
-            });
-            const selectedCityCode = placeData.data[0].code;
+            const placeData = await this.getPlaceFromGeoGouvAPI(
+              selectedCity.geometry.location.lat(),
+              selectedCity.geometry.location.lng(),
+            );
+            const postalCode =
+              results[0].address_components.filter((field) => field.types.includes('postal_code'))[0]?.short_name ||
+              placeData.postalCode;
 
             this.selectedCity = {
-              inseeCode: selectedCityCode,
-              name: selectedCity.address_components[0].short_name,
+              inseeCode: placeData.inseeCode,
+              postalCode: postalCode,
+              name: placeData.name,
               region: selectedCity.address_components[2].short_name,
             };
+
+            this.searchKeyword =
+              this.selectedCity.postalCode + ' ' + this.selectedCity.name + ', ' + this.selectedCity.region;
             this.$forceUpdate();
           }
         });
@@ -356,6 +366,23 @@ export default defineComponent({
         ],
       });
     },
+    async getPlaceFromGeoGouvAPI(lat: number, lng: number) {
+      const placeData = await axios.get('https://geo.api.gouv.fr/communes', {
+        params: {
+          lat: lat,
+          lon: lng,
+          fields: 'nom,code,codesPostaux',
+          format: 'json',
+          geometry: 'centre',
+        },
+      });
+
+      return {
+        inseeCode: placeData.data[0].code,
+        postalCode: placeData.data[0].codesPostaux[0],
+        name: placeData.data[0].nom,
+      };
+    },
   },
 });
 </script>
@@ -422,12 +449,27 @@ $responsive-breakpoint: 'm';
     @include set-from-screen($responsive-breakpoint) {
       @include set-font-scale('08', 'm');
 
-      padding: $mu250 $mu100 $mu250 $mu100;
+      padding: $mu100 $mu100 $mu100 $mu100;
       text-align: center;
       width: auto;
     }
   }
 
+  &__subtitle {
+    @include set-font-scale('06', 's');
+
+    color: $color-grey-600;
+    padding-bottom: $mu100;
+
+    @include set-from-screen($responsive-breakpoint) {
+      @include set-font-scale('06', 'm');
+
+      padding-bottom: $mu100;
+      text-align: center;
+      width: 100%;
+    }
+  }
+
   &__image {
     margin: 0 auto;
     padding-bottom: $mu200;

package/src/components/question/city-search/default-payload.json

@@ -2,6 +2,7 @@
   "viewModel": {
     "backLabel": "Question précédente",
     "label": "Dans quelle commune se situe votre projet ?",
+    "subtitle": "Cette information nous aide à identifier les aides dont vous pourriez profiter",
     "placeholder": "Commune",
     "actionLabel": "Continuer",
     "image": "https://storage.googleapis.com/project-booster-media/new-house/Estimation%20Construction%20Neuve%20-%20Localisation.png"

package/src/components/question/space-input/PbSpaceInput.stories.mdx

@@ -247,3 +247,51 @@ export const customFooter = {
     {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
+
+## With modal support
+
+export const withModal = {
+  viewModel: {
+    validation: {
+      maxValue: 10001,
+      maxErrorMessage: 'La surface doit être comprise entre 100m² et 10 000m²',
+      minValue: 99,
+      minErrorMessage: 'La surface doit être comprise entre 100m² et 10 000m²',
+    },
+    backLabel: 'Question précédente',
+    label: 'Quelle est votre surface ?',
+    placeholder: 'Votre surface',
+    actionLabel: 'Continuer',
+    image: null,
+  },
+  helpArea: [
+    {
+      type: 'text',
+      label: 'Besoin d’aide pour calculer la surface ?',
+    },
+    {
+      type: 'link',
+      label: 'Voir le guide pour calculer sa surface',
+      action: {
+        type: 'MODAL',
+        dialogViewModel: {
+          headerTitle: 'Pour calculer la surface chauffée c’est facile.',
+          htmlContent:
+            '<p>Pour calculer la surface chauffée c’est facile.</p><p> Il suffit de déduire de <strong>la surface habitable</strong> de votre habitation, <strong>les surfaces des pièces non chauffées</strong> par la pompe à chaleur. </p><p> Les pièces non chauffées peuvent être des pièces annexes (buanderie, véranda, …) ou de pièces chauffées par un autre mode de chauffage (radiateurs électriques par exemple). </p><p> <strong>Attention :</strong> le garage et le grenier ne sont pas pris en compte dans la surface habitable de base, il ne faut donc pas les déduire </p>',
+        },
+      },
+    },
+  ],
+};
+
+<Source language="json" code={JSON.stringify(withModal, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature with modal"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: withModal }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/question/space-input/PbSpaceInput.vue

@@ -12,6 +12,7 @@
         @click.once="$emit('go-back')"
       />
     </m-flex>
+
     <form
       class="pb-space-input__form-container"
       ref="pbSpaceInputFormContainerObserver"
@@ -57,6 +58,30 @@
           </m-flexy-col>
         </m-flex>
 
+        <m-flex
+          class="pb-space-input__help"
+          v-if="computedPayload.helpArea"
+          direction="column"
+          align-items="center"
+          justify-content="center"
+        >
+          <div v-for="helpItem in computedPayload.helpArea" :key="helpItem.type">
+            <div v-if="helpItem.type === 'text'">
+              <p class="pb-space-input__help__text">{{ helpItem.label }}</p>
+            </div>
+            <div v-if="helpItem.type === 'link'">
+              <m-link
+                class="pb-space-input__help__link"
+                :label="helpItem.label"
+                width="full"
+                size="l"
+                theme="primary"
+                @click="handleShowModal(helpItem.action.dialogViewModel)"
+              />
+            </div>
+          </div>
+        </m-flex>
+
         <m-flex class="pb-space-input__buttons-container" direction="column" align-items="center">
           <m-button
             class="pb-space-input__button"
@@ -77,6 +102,30 @@
         </m-flex>
       </m-flex>
     </form>
+
+    <m-dialog
+      class="pb-space-input__dialog"
+      :show-dialog="showModal"
+      width="680px"
+      height="520px"
+      maxHeight="100vh"
+      @update:show-dialog="handleShowModal"
+      v-if="computedPayload.helpArea"
+    >
+      <template v-slot:header>
+        <div class="pb-space-input__dialog__title">
+          <h2>{{ contentModal.headerTitle }}</h2>
+        </div>
+      </template>
+      <template v-slot:body>
+        <div class="pb-space-input__dialog__body" v-html="contentModal.htmlContent"></div>
+      </template>
+      <template v-slot:footer>
+        <m-flex class="pb-space-input__dialog__footer" align-items="center" justify-content="center">
+          <m-button label="Fermer" theme="bordered-neutral" @click.prevent="handleShowModal"></m-button>
+        </m-flex>
+      </template>
+    </m-dialog>
   </m-flex>
 </template>
 
@@ -93,6 +142,7 @@ import MLink from '../../mozaic/link/MLink.vue';
 import MTextInput from '../../mozaic/text-input/MTextInput.vue';
 import MFlexyCol from '../../mozaic/grid/MFlexyCol.vue';
 import MIcon from '../../mozaic/icon/MIcon.vue';
+import MDialog from '../../mozaic/dialog/MDialog.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { SpaceInputPayload } from '@/components/question/space-input/SpaceInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
@@ -145,6 +195,7 @@ export default defineComponent({
     MFlexyCol,
     MTextInput,
     MIcon,
+    MDialog,
   },
 
   props: {
@@ -194,9 +245,19 @@ export default defineComponent({
       return merge(tempPayload, props.payload);
     });
     const pbSpaceInputTextInput = ref<HTMLElement>();
+    const showModal = ref(false);
+    const contentModal = ref({});
 
     const space = computeDefaultValue(props.runtimeOptions, props.answers!, computedPayload);
 
+    const handleShowModal = ({ headerTitle, htmlContent }: { headerTitle: string; htmlContent: string }) => {
+      showModal.value = !showModal.value;
+
+      if (headerTitle && htmlContent) {
+        contentModal.value = { headerTitle, htmlContent };
+      }
+    };
+
     const validationSchema = initValidation(componentId, computedPayload);
 
     const { handleSubmit } = useForm({ validationSchema: validationSchema.value });
@@ -250,6 +311,9 @@ export default defineComponent({
       handleFormSubmit,
       isShowingFooter,
       skipQuestion,
+      showModal,
+      handleShowModal,
+      contentModal,
     };
   },
 });
@@ -382,5 +446,29 @@ $responsive-breakpoint: 'm';
   &__link {
     margin-top: $mu250;
   }
+
+  &__dialog {
+    &__title {
+      padding: $mu250 $mu250 0 $mu250;
+    }
+
+    &__body {
+      padding: 0 $mu250;
+      @include set-font-scale('05', 'l');
+    }
+
+    &__footer {
+      padding: $mu100 $mu250 $mu250 $mu250;
+    }
+  }
+
+  &__help {
+    margin-bottom: $mu250;
+
+    &__link,
+    &__text {
+      margin: 0;
+    }
+  }
 }
 </style>

package/src/types/pb/Scenario.ts

@@ -74,6 +74,13 @@ export interface ScenarioStepAnswer {
   };
 }
 
+export interface ScenarioStepDialog {
+  viewModelDialog: {
+    headerTitle: string;
+    imageUrl?: string;
+  };
+}
+
 export interface ScenarioStepAnswers {
   answers: ScenarioStepAnswer[];
   nextStep?: ScenarioStepNextStep;