project-booster-vue 9.56.2 → 9.57.0

package/package.json

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

package/src/components/pedagogy/PbPedagogy.vue

@@ -60,7 +60,7 @@
         direction="column"
         v-if="payload.cards"
       >
-        <div class="pb-pedagogy__content-cards-title">Pour aller plus loin</div>
+        <div class="pb-pedagogy__content-cards-title">{{ payload.cardsTitle }}</div>
         <pb-cards-list :cards="payload.cards" @card-click="handleCardClick" />
       </m-flex>
     </m-flex>
@@ -209,7 +209,7 @@ $responsive-breakpoint: 'm';
 
     &__input {
       margin-bottom: $mu100;
-      width: calc(100% - 1.2rem);
+      width: 100%;
       padding: $mu050;
     }
   }

package/src/components/pedagogy/default-payload.json

@@ -14,6 +14,7 @@
       "href": "https://storage.googleapis.com/project-booster-media/vad/PDF/Plan_Prise-de-mesure_Leroy-Merlin.pdf"
     }
   },
+  "cardsTitle": "Pour aller plus loin",
   "cards": [
     {
       "code": "CARD-2",

package/src/components/rework/alert/MPbAlert.stories.mdx

@@ -0,0 +1,48 @@
+import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import DEFAULT_PAYLOAD from './default-payload';
+import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
+import MPbAlert from './MPbAlert';
+
+<Meta
+  title="Project Booster/Rework/Alert/MPbAlert 🦠"
+  component={MPbAlert}
+  argTypes={{
+    payload: {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+  }}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+# 🦠 `MPbAlert` - Component
+
+The `MPbAlert` component to display information that user needed.
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MPbAlert },
+  setup() {
+    return { args };
+  },
+  template: `<m-pb-alert
+    :payload="args.payload"
+  />`,
+});
+
+## showCase
+
+<Canvas>
+  <Story inline={false} height="862px" name="101 Sandbox" args={{ payload: DEFAULT_PAYLOAD }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

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

@@ -0,0 +1,135 @@
+<template>
+  <div class="m-pb-alert">
+    <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>
+
+    <div class="m-pb-alert__exit-options">
+      <div class="m-pb-alert__exit-options__title">
+        {{ payload.viewModel.exitOptionsTitle }}
+      </div>
+
+      <div class="m-pb-alert__exit-options__content row-flex">
+        <m-card
+          v-for="options in payload.viewModel.exitOptions"
+          class="m-pb-alert__exit-options__content__card"
+          :title="options.viewModel.title"
+          :subtitle="options.viewModel.subtitle"
+          :imgSrc="options.viewModel.image"
+        >
+          <template #footer>
+            <m-button label="This is a button" size="s" theme="bordered-primary-02" />
+          </template>
+        </m-card>
+      </div>
+    </div>
+
+    <div class="m-pb-alert__buttons" v-if="payload">
+      <div v-for="button in payload.callToActions" class="m-pb-alert__buttons__button row-flex">
+        <m-button
+          :label="button.label"
+          @click="callAction(button.nextStep)"
+          :theme="button.theme"
+          style="margin-left: 1rem"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { MNotification, MButton, MCard } from '@mozaic-ds/vue-3';
+import { PayloadAction } from '../types/genericPayload';
+const emit = defineEmits(['go-back', 'step-completed']);
+
+const props = defineProps({
+  /**
+   * The component view model and business data as an object. The provided prop
+   * is merged with the default payload value so only overriden values will change
+   * from the default ones.
+   */
+  payload: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+/**
+ * Send action to completed step
+ * @param action
+ */
+const callAction = (action: PayloadAction) => {
+  emit('step-completed', {
+    answers: [],
+    nextStep: action,
+  });
+};
+</script>
+
+<style lang="scss">
+@import 'pb-variables';
+@import '../styles/global.scss';
+@import 'components/_c.card';
+
+.m-pb-alert {
+  width: 719px;
+  margin: $mu200 auto 0 auto;
+
+  &__buttons {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    margin: $mu250 0 0 0;
+
+    button {
+      margin-left: 0 !important;
+    }
+
+    &__button {
+      width: 50%;
+
+      &:first-child {
+        justify-content: flex-start;
+      }
+
+      &:last-child {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  &__title {
+    @include set-font-scale('07', 'm');
+    @include set-font-face('semi-bold');
+
+    margin: 0 0 $mu150 0;
+  }
+
+  &__exit-options {
+    &__title {
+      @include set-font-scale('06', 'm');
+      @include set-font-face('semi-bold');
+
+      margin: $mu150 0;
+    }
+
+    &__content {
+      &__card {
+        max-width: 50%;
+        width: 50%;
+
+        &:first-child {
+          margin-right: $mu050;
+        }
+
+        &:last-child {
+          margin-left: $mu050;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,38 @@
+{
+  "viewModel": {
+    "title": "Voulez-vous télécharger vos plans plus tard ?",
+    "type": "warning",
+    "exitOptionsTitle": "Réaliser rapidement votre plan :",
+    "exitOptions": [
+      {
+        "code": "CARD-1",
+        "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",
+          "subtitle": "Découvrir nos gammes de cuisines"
+        }
+      },
+      {
+        "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",
+          "subtitle": "Découvrir nos gammes de cuisines"
+        }
+      }
+    ]
+  },
+  "callToActions": [
+    {
+      "label": "Précédent",
+      "nextStep": "Code",
+      "theme": "bordered-primary-02"
+    },
+    {
+      "label": "Etape suivante",
+      "nextStep": "Code"
+    }
+  ]
+}

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

@@ -100,13 +100,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import MButton from '../../mozaic/buttons/MButton.vue';
-import MFlag from '../../mozaic/flag/MFlag.vue';
 import MImage from '../../mozaic/image/MImage.vue';
 import MPbCardSelectionIndicator from './decorators/MPbCardSelectionIndicator.vue';
 import MPbCardTypeIndicator from './decorators/MPbCardTypeIndicator.vue';
-import MLink from '../../mozaic/link/MLink.vue';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
+import { MFlag, MButton, MLink } from '@mozaic-ds/vue-3';
 
 export const PB_CARD_VALIDATOR = {
   cardMinRatio: ['auto', '16x9', '3x2', '4x3', '1x1', '3x4', '2x3'],

package/src/components/rework/exit-options/MPbExitOptions.stories.mdx

@@ -0,0 +1,75 @@
+import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import DEFAULT_PAYLOAD from './default-payload';
+import WITH_TYPEFORM from './with-typeform';
+import WITH_CONDITIONALS from './with-conditionals';
+import WITH_SIMPLE_ACTION from './with-simple-action';
+import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
+import MPbExitOptions from './MPbExitOptions';
+
+<Meta
+  title="Project Booster/Rework/Exit Options/MPbExitOptions 🦠"
+  component={MPbExitOptions}
+  argTypes={{
+    payload: {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+  }}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+# 🦠 `MPbExitOptions` - Component
+
+The `MPbExitOptions` component to display information that user needed.
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MPbExitOptions },
+  setup() {
+    return { args };
+  },
+  template: `<m-pb-exit-options
+    :payload="args.payload"
+  />`,
+});
+
+## showCase
+
+<Canvas>
+  <Story inline={false} height="862px" name="101 Sandbox" args={{ payload: DEFAULT_PAYLOAD }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## With typeform
+
+<Canvas>
+  <Story inline={false} height="862px" name="With typeform" args={{ payload: WITH_TYPEFORM }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## With conditionals
+
+<Canvas>
+  <Story inline={false} height="862px" name="With conditionals" args={{ payload: WITH_CONDITIONALS }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## With simple action
+
+<Canvas>
+  <Story inline={false} height="862px" name="With simple action" args={{ payload: WITH_SIMPLE_ACTION }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

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

@@ -0,0 +1,181 @@
+<template>
+  <div class="m-pb-exit-options">
+    <div v-if="!payload.viewModel.conditionals">
+      <h1 class="m-pb-exit-options__title">{{ payload.viewModel.title }}</h1>
+      <div class="m-pb-exit-options__content" v-html="payload.viewModel.content"></div>
+    </div>
+
+    <div v-for="condition in payload.viewModel.conditionals">
+      <div v-if="isValidCondition(condition.conditions)">
+        <h1 class="m-pb-exit-options__title">{{ condition.viewModel.title }}</h1>
+        <div class="m-pb-exit-options__content" v-html="condition.viewModel.content"></div>
+      </div>
+    </div>
+
+    <div class="m-pb-exit-options__typeform" v-if="payload.viewModel.typeForm">
+      <textarea
+        name=""
+        id=""
+        cols="30"
+        rows="10"
+        v-model="message"
+        :placeholder="payload.viewModel.typeForm.placeholder"
+      >
+      </textarea>
+    </div>
+
+    <div class="m-pb-exit-options__spacer"></div>
+
+    <div
+      class="m-pb-exit-options__buttons"
+      v-if="payload.viewModel.conditionals"
+      v-for="condition in payload.viewModel.conditionals"
+    >
+      <div class="m-pb-exit-options__buttons__button" v-if="isValidCondition(condition.conditions)">
+        <m-button
+          v-if="payload.viewModel.backButton.nextStep"
+          :label="payload.viewModel.backButton.label"
+          :theme="payload.viewModel.backButton.theme"
+          @click="callAction(payload.viewModel.backButton.nextStep)"
+        />
+      </div>
+
+      <div
+        v-if="isValidCondition(condition.conditions) && !payload.viewModel.nextStep"
+        class="m-pb-exit-options__buttons__button"
+      >
+        <m-button :label="condition.viewModel.nextStep.label" :href="condition.viewModel.nextStep.link" />
+      </div>
+    </div>
+
+    <div class="m-pb-exit-options__buttons" v-if="payload.viewModel.nextStep">
+      <div class="m-pb-exit-options__buttons__button">
+        <m-button
+          v-if="payload.viewModel.backButton.nextStep"
+          :label="payload.viewModel.backButton.label"
+          :theme="payload.viewModel.backButton.theme"
+          @click="callAction(payload.viewModel.backButton.nextStep)"
+        />
+      </div>
+
+      <div class="m-pb-exit-options__buttons__button">
+        <m-button :label="payload.viewModel.nextStep.label" @click="callAction(payload.viewModel.nextStep)" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { MButton } from '@mozaic-ds/vue-3';
+import { PropType, ref } from 'vue';
+import { PayloadAction } from '../types/genericPayload';
+import { areConditionsValid } from '../../../services/scenarioConditionals';
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+
+const emit = defineEmits(['go-back', 'step-completed']);
+const message = ref('');
+const currentIndex = ref(0);
+
+const props = defineProps({
+  /**
+   * The component view model and business data as an object. The provided prop
+   * is merged with the default payload value so only overriden values will change
+   * from the default ones.
+   */
+  payload: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * The options provided at runtime to customize component behaviour
+   */
+  runtimeOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * The previous answers to inject
+   */
+  answers: {
+    type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+    default: () => new Map<string, ScenarioStepAnswer[]>(),
+  },
+});
+
+/**
+ * Send action to completed step
+ * @param action
+ */
+const callAction = (action: PayloadAction) => {
+  let answers: any = [];
+
+  if (message.value.length > 10) {
+    answers = [
+      {
+        message,
+      },
+    ];
+  }
+
+  emit('step-completed', {
+    answers,
+    nextStep: action,
+  });
+};
+
+const isValidCondition = (conditions: any) => {
+  return areConditionsValid(conditions!, props.answers, props.runtimeOptions);
+};
+</script>
+
+<style lang="scss">
+@import 'pb-variables';
+@import '../styles/global.scss';
+
+.m-pb-exit-options {
+  width: 754px;
+  margin: 4rem auto;
+
+  &__title {
+    @include set-font-scale('08', 'm');
+    @include set-font-face('semi-bold');
+  }
+
+  &__content {
+    margin-top: $mu150;
+    @include set-font-scale('06', 'm');
+    @include set-font-face('regular');
+  }
+
+  &__spacer {
+    margin-top: $mu250;
+  }
+
+  &__buttons {
+    display: flex;
+    align-items: center;
+    justify-content: stretch;
+
+    &__button {
+      display: flex;
+      width: 50%;
+
+      &:last-child {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  &__typeform {
+    textarea {
+      width: calc(100% - 20px);
+      height: 215px;
+      border-radius: 5px;
+      @include set-font-scale('06', 'm');
+      @include set-font-face('regular');
+
+      padding: 10px;
+    }
+  }
+}
+</style>

package/src/components/rework/exit-options/default-payload.json

@@ -0,0 +1,21 @@
+{
+  "viewModel": {
+    "title": "Votre projet concerne uniquement une baignoire ?",
+    "content": "<strong>Pour votre projet, nous vous attendons directement dans votre magasin.</strong><p>La planification de rendez-vous, est dédiée à la rénovation complète de la salle de bains</p>",
+    "callToActions": [
+      {
+        "label": "Précédent",
+        "theme": "bordered-neutral",
+        "nextStep": {
+          "code": "LMFR_BATHROOM_BATHTUB_BUDGET"
+        }
+      },
+      {
+        "label": "Etape suivante",
+        "nextStep": {
+          "code": "BATHROOM_END"
+        }
+      }
+    ]
+  }
+}

package/src/components/rework/exit-options/with-conditionals.json

@@ -0,0 +1,26 @@
+{
+  "viewModel": {
+    "title": "Votre projet concerne uniquement une baignoire ?",
+    "content": "<strong>Pour votre projet, nous vous attendons directement dans votre magasin.</strong><p>La planification de rendez-vous, est dédiée à la rénovation complète de la salle de bains</p>",
+    "conditionals": [
+      {
+        "conditions": ["true"],
+        "viewModel": {
+          "title": "Votre projet concerne uniquement une baignoire ?",
+          "content": "<strong>Pour votre projet, nous vous attendons directement dans votre magasin.</strong><p>La planification de rendez-vous, est dédiée à la rénovation complète de la salle de bains</p>",
+          "nextStep": {
+            "link": "https://www.leroymerlin.fr/produits/salle-de-bains/baignoire/",
+            "label": "Etape suivante"
+          }
+        }
+      }
+    ],
+    "backButton": {
+      "label": "Précédent",
+      "theme": "bordered-neutral",
+      "nextStep": {
+        "code": "LMFR_BATHROOM_BATHTUB_BUDGET"
+      }
+    }
+  }
+}

package/src/components/rework/exit-options/with-simple-action.json

@@ -0,0 +1,17 @@
+{
+  "viewModel": {
+    "title": "Votre projet concerne uniquement une baignoire ?",
+    "content": "<strong>Pour votre projet, nous vous attendons directement dans votre magasin.</strong><p>La planification de rendez-vous, est dédiée à la rénovation complète de la salle de bains</p>",
+    "nextStep": {
+      "code": "LMFR_BATHROOM_BATHTUB_BUDGET",
+      "label": "Etape suivante"
+    },
+    "backButton": {
+      "label": "Précédent",
+      "theme": "bordered-neutral",
+      "nextStep": {
+        "code": "LMFR_BATHROOM_BATHTUB_BUDGET"
+      }
+    }
+  }
+}

package/src/components/rework/exit-options/with-typeform.json

@@ -0,0 +1,24 @@
+{
+  "viewModel": {
+    "title": "Votre projet concerne uniquement une baignoire ?",
+    "content": "<strong>Pour votre projet, nous vous attendons directement dans votre magasin.</strong><p>La planification de rendez-vous, est dédiée à la rénovation complète de la salle de bains</p>",
+    "typeForm": {
+      "placeholder": "Par exemple : garder un miroir que vous appréciez"
+    },
+    "callToActions": [
+      {
+        "label": "Précédent",
+        "theme": "bordered-neutral",
+        "nextStep": {
+          "code": "LMFR_BATHROOM_BATHTUB_BUDGET"
+        }
+      },
+      {
+        "label": "Etape suivante",
+        "nextStep": {
+          "code": "BATHROOM_END"
+        }
+      }
+    ]
+  }
+}