project-booster-vue 9.26.0 → 9.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.26.0",
+  "version": "9.27.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/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;