project-booster-vue 9.31.2 → 9.33.0

package/package.json

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

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

@@ -65,7 +65,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
         businessUnit: '001',
         correlationId: uuidv4(),
         groupId: 'groupId',
-        calendarId: 'calendarId',
+        interventionIds: ['interventionId'],
         appointmentId: 'appointmentId',
         sourceDetail: 'Appointment_email',
       });

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

@@ -55,7 +55,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
       businessUnit: '001',
       source: 'APPOINTMENT_QUALIFICATION',
       sourceDetail: 'KITCHEN',
-      calendarId: '375615',
+      interventionIds: ['375615'],
       storeId: '006',
       appointmentQualificationFormStructure: SCENARIO,
     });

package/src/components/appointment/PbAppointmentForm.vue

@@ -48,8 +48,8 @@ export default defineComponent({
       if (props.payload?.viewModel?.calendarUrlPath) {
         url = `${baseUrl}/${props.payload.viewModel.calendarUrlPath}?`;
       } else {
-        url = `${baseUrl}/leroy-merlin-${sessions.storeId}`;
-        url += `?calendar_id=${sessions.calendarId}`;
+        url = `${baseUrl}/leroy-merlin-${sessions.storeId}?`;
+        url += sessions.interventionIds.map((id: string) => 'intervention_ids[]=' + id).join('&');
         url += `&vevent[str5]=${currentAppointmentQualification.inhabitantProjectId}`;
       }
 

package/src/components/pedagogy/PbPedagogy.stories.mdx

@@ -1,11 +1,12 @@
 import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
 import DEFAULT_PAYLOAD from './default-payload';
+import WITH_INSTRUCTIONS from './with-instructions';
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
 import PbPedagogy from './PbPedagogy';
 import store from '../../stores/store';
 
 <Meta
-  title="Project Booster/Components/Pedagogy/ PbPedagogy 🦠"
+  title="Project Booster/Components/Pedagogy/PbPedagogy 🦠"
   component={PbPedagogy}
   argTypes={{
     payload: {
@@ -48,3 +49,11 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
+
+## showCase
+
+<Canvas>
+  <Story inline={false} height="862px" name="With instruction" args={{ payload: WITH_INSTRUCTIONS }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/pedagogy/PbPedagogy.vue

@@ -14,6 +14,13 @@
           <div class="pb-pedagogy__content-description-line-text" v-html="line.label" />
         </div>
       </m-flex>
+      <m-flex
+        class="pb-pedagogy__content__button-informations"
+        align-items="center"
+        v-if="payload.viewModel.instructionsButton"
+      >
+        {{ payload.viewModel.instructionsButton.text }}
+      </m-flex>
       <m-button
         v-if="payload.viewModel.downloadButton"
         :theme="payload.viewModel.downloadButton.theme"
@@ -229,6 +236,13 @@ $responsive-breakpoint: 'm';
         margin-bottom: $mu100;
       }
     }
+
+    &__button-informations {
+      @include set-font-scale('07', 'm');
+      @include set-font-face('semi-bold');
+      margin-bottom: calc($mu100 * -1);
+      margin-top: $mu200;
+    }
   }
 
   :deep(.pb-pedagogy__content-description-bold) {

package/src/components/pedagogy/with-instructions.json

@@ -0,0 +1,45 @@
+{
+  "viewModel": {
+    "title": "Un email de rappel pour préparer votre RDV vous sera envoyé",
+    "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/mail_80.svg",
+    "description": [
+      {
+        "label": "Les mesures et &nbsp; <span class='pb-pedagogy__content-description-bold'> plans de votre pièce </span> &nbsp; sont importants pour le rendez-vous. Ils\n          permettront à votre conseiller de créer un &nbsp; <span class='pb-pedagogy__content-description-bold'> plan 3D adapté </span> &nbsp; à votre cuisine.\n          <span class='pb-pedagogy__content-description-bold'> Vous pouvez les ajouter à partir à partir du mail que vous avez reçu. </span>",
+        "icon": "https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png"
+      }
+    ],
+    "instructionsButton": {
+      "text": "Vous pouvez maintenant choisir votre créneau de RDV"
+    },
+    "downloadButton": {
+      "label": "Comment faire son plan ? (PDF)",
+      "theme": "bordered",
+      "href": "https://storage.googleapis.com/project-booster-media/vad/PDF/Plan_Prise-de-mesure_Leroy-Merlin.pdf"
+    }
+  },
+  "cards": [
+    {
+      "code": "CARD-2",
+      "viewModel": {
+        "url": "https://www.leroymerlin.fr/produits/cuisine/cuisine-equipee-delinia-id/",
+        "image": "https://storage.googleapis.com/project-booster-media/kitchen/kitchen-range.jpeg",
+        "title": "Découvrir nos gammes de cuisines",
+        "width": "full",
+        "widthFromM": "1of3",
+        "widthFromL": "1of3"
+      }
+    },
+    {
+      "code": "CARD-3",
+      "viewModel": {
+        "value": "3",
+        "url": "https://www.leroymerlin.fr/produits/cuisine/cuisine-equipee-delinia-id/",
+        "image": "https://images.ctfassets.net/8q8qvv8j6cpk/59igdEVBhIa37nrfbnGs4V/252c4bb73bf865a68b53036fba6dba21/carrelage.jpg",
+        "title": "Des idées et conseils pour votre cuisine",
+        "width": "full",
+        "widthFromM": "1of3",
+        "widthFromL": "1of3"
+      }
+    }
+  ]
+}

package/src/components/question/incremental-amount-input/PbIncrementalAmountInput.vue

@@ -265,15 +265,17 @@ $responsive-breakpoint: 'm';
     @include set-font-scale('07', 's');
 
     color: $color-grey-700;
+    margin-bottom: 10px;
     max-width: 100%;
     padding: 0 0 0 0;
+    text-align: center;
     width: 384px;
 
     @include set-from-screen($responsive-breakpoint) {
       @include set-font-scale('08', 'm');
 
+      margin-bottom: 0;
       padding: $mu250 $mu100 $mu100 $mu100;
-      text-align: center;
       width: auto;
     }
   }