project-booster-vue 9.62.0 → 9.62.1

package/package.json

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

package/src/components/mozaic/flag/MFlag.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="`mc-flag mc-flag--${theme}`">
-    <span class="mc-flag__label">{{ label }}</span>
+    <span class="mc-flag__label" v-html="label"></span>
   </div>
 </template>
 

package/src/components/projects/project-attributes/PbProjectAttributes.vue

@@ -101,9 +101,7 @@
       />
     </template>
 
-    <div class="pb-project-attributes__section-title">
-      <h2>Les éléments que vous souhaitez installer</h2>
-    </div>
+    <div class="pb-project-attributes__section-title">Les éléments que vous souhaitez installer</div>
 
     <ul class="pb-project-attributes__works">
       <template v-for="[attributeId, attribute] of displayedProjectAttributes" :key="attributeId">
@@ -127,6 +125,16 @@
         </template>
       </template>
     </ul>
+
+    <div class="pb-project-attributes__section-title">Détails</div>
+
+    <div
+      class="pb-project-attributes__details"
+      v-for="[attributeId, attribute] of displayedProjectAttributes"
+      :key="attributeId"
+    >
+      <p v-if="attributeId === 'comment'" v-html="attribute.value"></p>
+    </div>
   </m-flexy>
 </template>
 
@@ -202,10 +210,19 @@ $responsive-breakpoint: 'l';
   &__section-title {
     width: 100%;
     @include set-font-face('semi-bold');
-    @include set-font-scale('05', 'm');
+    @include set-font-scale('07', 'm');
 
     color: $color-grey-800;
     margin-left: $mu100;
+    margin-top: $mu250;
+  }
+
+  &__details {
+    padding: 0 $mu100;
+
+    p {
+      @include set-font-scale('06', 'm');
+    }
   }
 
   &__works {

package/src/components/question/configurations-import/ConfigurationsImport.ts

@@ -19,6 +19,8 @@ export interface ConfigurationsImportSkippable {
 }
 
 export interface ConfigurationsImportViewModel {
+  redirectLink: any;
+  callToActions: any;
   label: string;
   backLink?: string;
   notificationPayload: {
@@ -31,6 +33,7 @@ export interface ConfigurationsImportViewModel {
 }
 
 export interface ConfigurationsImportPayload {
+  [x: string]: any;
   viewModel: ConfigurationsImportViewModel;
   skippable: ConfigurationsImportSkippable[];
   multiSelect: ConfigurationsImportMultiSelect;

package/src/components/rework/alert/MPbAlert.vue

@@ -3,8 +3,12 @@
     <div class="m-pb-alert__title">
       {{ payload.viewModel.title }}
     </div>
-    <m-notification title="Composant en cours de construction" :type="payload.viewModel.type">
-      <p>Le composant est actuellement en cours de développement, et sera disponible prochainement !</p>
+    <m-notification
+      v-if="payload.viewModel.notification"
+      :title="payload.viewModel.notification.title"
+      :type="payload.viewModel.type"
+    >
+      <p>{{ payload.viewModel.notification.content }}</p>
     </m-notification>
 
     <div class="m-pb-alert__exit-options">
@@ -21,7 +25,7 @@
           :imgSrc="options.viewModel.image"
         >
           <template #footer>
-            <m-button label="This is a button" size="s" theme="bordered-primary-02" />
+            <m-button :label="options.viewModel.button.label" size="s" theme="bordered-primary-02" />
           </template>
         </m-card>
       </div>

package/src/components/rework/alert/default-payload.json

@@ -3,6 +3,10 @@
     "title": "Voulez-vous télécharger vos plans plus tard ?",
     "type": "warning",
     "exitOptionsTitle": "Réaliser rapidement votre plan :",
+    "notification": {
+      "title": "Envoyez votre plan au plus tard 48h avant le rendez-vous.",
+      "content": "Nous avons besoin d’un plan pour connaitre les mesures et ouvertures de votre salle de bain actuelle. Sans ces informations, nous serons obligés d'annuler le rendez-vous."
+    },
     "exitOptions": [
       {
         "code": "CARD-1",
@@ -10,7 +14,14 @@
           "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",
-          "subtitle": "Découvrir nos gammes de cuisines"
+          "subtitle": "Découvrir nos gammes de cuisines",
+          "button": {
+            "label": "Regarder le tutoriel video",
+            "href": "",
+            "nextStep": {
+              "code": ""
+            }
+          }
         }
       },
       {
@@ -19,7 +30,14 @@
           "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",
-          "subtitle": "Découvrir nos gammes de cuisines"
+          "subtitle": "Découvrir nos gammes de cuisines",
+          "button": {
+            "label": "Accéder à l’outil",
+            "href": "",
+            "nextStep": {
+              "code": ""
+            }
+          }
         }
       }
     ]

package/src/components/rework/cards/MPbCards.vue

@@ -366,8 +366,8 @@ $responsive-breakpoint: 's';
 
   .pb-card__image__checkbox {
     position: absolute;
-    top: 15px;
-    right: 15px;
+    top: 16px;
+    right: 16px;
     border-radius: 50%;
     width: 19px;
     height: 19px;

package/src/components/rework/exit-options/MPbExitOptions.vue

@@ -147,10 +147,16 @@ const isValidCondition = (conditions: any) => {
 @import 'pb-variables';
 @import '../styles/global.scss';
 
+$responsive-breakpoint: 'm';
+
 .m-pb-exit-options {
-  width: 754px;
+  width: 100%;
   margin: 4rem auto;
 
+  @include set-from-screen($responsive-breakpoint) {
+    width: 724px;
+  }
+
   &__title {
     @include set-font-scale('08', 'm');
     @include set-font-face('semi-bold');

package/src/components/rework/question/configurations-import/ConfigurationsImport.ts

@@ -0,0 +1,37 @@
+import { ScenarioStepNextStep } from '@/types/pb/Scenario';
+
+export interface ConfigurationsImportMultiSelectAction {
+  label: string;
+  nextStep: ScenarioStepNextStep;
+}
+
+export interface ConfigurationsImportMultiSelect {
+  actions: Map<string, ConfigurationsImportMultiSelectAction>;
+}
+
+export interface ConfigurationsImportSkippable {
+  isAnswer: boolean;
+  label: string;
+  theme: string;
+  width: string;
+  widthFromM: string;
+  nextStep: ScenarioStepNextStep;
+}
+
+export interface ConfigurationsImportViewModel {
+  label: string;
+  backLink?: string;
+  notificationPayload: {
+    viewModel: {
+      successTitle: string;
+      errorTitle: string;
+      errorText: string;
+    };
+  };
+}
+
+export interface ConfigurationsImportPayload {
+  viewModel: ConfigurationsImportViewModel;
+  skippable: ConfigurationsImportSkippable[];
+  multiSelect: ConfigurationsImportMultiSelect;
+}

package/src/components/rework/question/configurations-import/MPbConfigurationsImport.stories.mdx

@@ -0,0 +1,163 @@
+import { Story, Meta, ArgsTable, Canvas } from '@storybook/addon-docs';
+import { nestedAppDecorator } from '../../../../../.storybook/nested-app-decorator';
+import { useStore } from 'vuex';
+import PbScenario from '../../../../components/scenario/PbScenario';
+import MPbConfigurationsImport from './MPbConfigurationsImport';
+import DEFAULT_PAYLOAD from './default-payload.json';
+import configurationsStore from '../../../../stores/modules/configurationsStore';
+import projectsStore from '../../../../stores/modules/projectsStore';
+import toolsStore from '../../../../stores/modules/toolsStore';
+import { rest } from 'msw';
+import {
+  getConfigurationsByProjectIdResolver,
+  getEmptyConfigurationsByProjectIdResolver,
+} from '../../../../services/api/mocks/configurationsMock';
+import { internalServerErrorResolver, notContentResolver } from '../../../../services/api/mocks/commonMock';
+import { getProjectByIdResolver } from '../../../../services/api/mocks/projectsMock';
+
+<Meta
+  title="Project Booster/Rework/Questions/MPbConfigurationsImport 🦠"
+  component={MPbConfigurationsImport}
+  argTypes={{
+    payload: {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+    onStepCompleted: {
+      action: 'Step completed',
+      table: { disable: true },
+    },
+  }}
+  decorators={[
+    nestedAppDecorator(
+      {
+        modules: {
+          configurations: configurationsStore,
+          projects: projectsStore,
+          tools: toolsStore,
+        },
+        actions: {
+          sendEventToBus({}, payload) {
+            console.log('Event sent to bus', payload);
+          },
+        },
+      },
+      [{ path: '/steps/:stepCode/previous/:answers', component: PbScenario }],
+    ),
+  ]}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+# 🦠 `MPbConfigurationsImport` - Components
+
+[![alt text](https://storage.googleapis.com/project-booster-media/project-booster-vue/project-booster-sources.svg 'Project booster component source code')](https://github.com/adeo/project-booster-vue/tree/master/src/components/question)
+
+---
+
+The `MPbConfigurationsImport` allows to linked configurations to a project.
+It is customizable through the payload property. It has the same
+behaviour as the `PbQuestion` component and is designed to work in a scenario.
+
+# `PbConfigurationImport` - Component props
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MPbConfigurationsImport },
+  setup() {
+    const store = useStore();
+    store.dispatch('projects/loadProject', '001');
+    store.dispatch('configurations/loadConfigurations', { projectId: '001' });
+    store.dispatch('configurations/searchConfigurations', '001');
+    return { args };
+  },
+  template: `<m-pb-configurations-import
+        :payload="args.payload"
+        :show-back-button="args.showBackButton"
+        :answers="args.answers"
+        :runtime-options="args.runtimeOptions"
+        :completed-event-name="args.completedEventName"
+        :sticky-bottom-offset="args.stickyBottomOffset"
+        @step-completed="args.onStepCompleted"
+  />`,
+});
+
+<Canvas>
+  <Story
+    inline={false}
+    height="862px"
+    name="101 Sandbox"
+    args={{ payload: DEFAULT_PAYLOAD }}
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-projects/:inhabitantProjectId', getProjectByIdResolver),
+        rest.get('/api/simulations', getConfigurationsByProjectIdResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/simulations',
+          getEmptyConfigurationsByProjectIdResolver,
+        ),
+        rest.post('/api/inhabitant-projects/:inhabitantProjectId/simulations/:simulationId', notContentResolver),
+      ],
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="101 Sandbox" />
+
+# Simulations already linked to project
+
+<Canvas>
+  <Story
+    inline={false}
+    height="862px"
+    name="With simulations linked"
+    args={{ payload: DEFAULT_PAYLOAD }}
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-projects/:inhabitantProjectId', getProjectByIdResolver),
+        rest.get('/api/simulations', getConfigurationsByProjectIdResolver),
+        rest.get('/api/inhabitant-projects/:inhabitantProjectId/simulations', getConfigurationsByProjectIdResolver),
+        rest.post('/api/inhabitant-projects/:inhabitantProjectId/simulations/:simulationId', notContentResolver),
+      ],
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+# Error importing configuration
+
+<Canvas>
+  <Story
+    inline={false}
+    height="862px"
+    name="Error while importing simulation"
+    args={{ payload: DEFAULT_PAYLOAD }}
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-projects/:inhabitantProjectId', getProjectByIdResolver),
+        rest.get('/api/simulations', getConfigurationsByProjectIdResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/simulations',
+          getEmptyConfigurationsByProjectIdResolver,
+        ),
+        rest.post(
+          '/api/inhabitant-projects/:inhabitantProjectId/simulations/:simulationId',
+          internalServerErrorResolver,
+        ),
+      ],
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>