project-booster-vue 9.22.0 → 9.23.0

package/package.json

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

package/src/components/warning-message/PbWarningMessage.stories.mdx

@@ -0,0 +1,59 @@
+import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
+import { ArgsTable, Canvas, Meta, Source, Story } from '@storybook/addon-docs';
+import cloneDeep from 'lodash.clonedeep';
+import PbWarningMessage from './PbWarningMessage';
+import DEFAULT_PAYLOAD from './default-payload.json';
+import WITHOUT_EXPLAIN_LINK from './without-explain-link.json';
+
+<Meta
+  title="Project Booster/Components/Warning Message/PbWarningMessage 🦠"
+  component={PbWarningMessage}
+  decorators={[nestedAppDecorator({}, [])]}
+  parameters={{ layout: 'fullscreen' }}
+/>
+
+# 🦠 `PbWarningMessage` - 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 `PbWarningMessage` Vue component allows select family amount persons. It
+is customizable through the payload property.
+
+It has a default provided payload, used in the Sandbox below.
+
+The input field is automatically focused.
+
+The back button will make `vue-router` trigger the history back feature from the browser. It can be hidden with the
+`showBackButton` flag.
+
+# `PbWarningMessage`
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PbWarningMessage },
+  setup() {
+    return { args };
+  },
+  template: `<pb-warning-message
+    :payload="args.payload"
+    :show-back-button="args.showBackButton"
+    :completed-event-name="args.completedEventName"
+    @step-completed="args.onStepCompleted"
+  />`,
+});
+
+<Canvas>
+  <Story name="101 Sandbox" args={{ payload: DEFAULT_PAYLOAD }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+# `PbWarningMessage` - Without explain link
+
+<Canvas>
+  <Story name="Without explain link" args={{ payload: WITHOUT_EXPLAIN_LINK }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/warning-message/PbWarningMessage.vue

@@ -0,0 +1,284 @@
+<template>
+  <m-flex class="pb-warning-message" direction="column" align-items="center">
+    <m-flex class="pb-warning-message__back-button-container" align-items="stretch">
+      <m-link
+        :label="payload.viewModel.backLabel"
+        :left-icon="BACK_ICON"
+        :class="{
+          'pb-warning-message__back-button': true,
+          'pb-warning-message__back-button--hidden':
+            !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
+        }"
+        @click.once="$emit('go-back')"
+      />
+    </m-flex>
+
+    <div class="pb-warning-message__title">
+      {{ payload.viewModel.label }}
+    </div>
+
+    <div class="pb-warning-message__container--background">
+      <m-flex class="pb-warning-message__container__message">
+        <div class="pb-warning-message__container__message__left">
+          <img :data-src="injectIcon(WARNING_ICON)" id="pb-warning-message-icon" alt="Icon" />
+        </div>
+        <div class="pb-warning-message__container__message__right">
+          <h3>{{ payload.viewModel.subtitle }}</h3>
+          <p>{{ payload.viewModel.content }}</p>
+          <div class="pb-warning-message__container__message__right__link" v-if="payload.viewModel.explainLink">
+            <a :href="payload.viewModel.explainLink.href">{{ payload.viewModel.explainLink.label }}</a>
+          </div>
+        </div>
+      </m-flex>
+    </div>
+
+    <div class="pb-warning-message__container">
+      <m-flex
+        class="pb-warning-message__container--button"
+        direction="column"
+        align-items="center"
+        justify-content="center"
+      >
+        <m-button
+          :theme="action.bordered ? 'bordered' : 'solid'"
+          class="pb-warning-message__container--button__ok mc-button--full"
+          :type="action.type"
+          :label="action.label"
+          icon-position="right"
+          :size="small ? 's' : null"
+          :href="action.href"
+          v-for="action in payload.callToActions"
+          :key="action.label"
+          @click="callAction(action.action)"
+        />
+      </m-flex>
+    </div>
+  </m-flex>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { v4 as uuidv4 } from 'uuid';
+import MFlex from './../mozaic/flex/MFlex.vue';
+import MLink from '../mozaic/link/MLink.vue';
+import MButton from '../mozaic/buttons/MButton.vue';
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import SVGInjector from 'svg-injector';
+import { WarningMessagePayloadAction } from '@/types/pb/WarningMessage';
+const BACK_ICON =
+  'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
+const WARNING_ICON =
+  'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Notification_Warning_64px.svg';
+
+export default defineComponent({
+  name: 'PbWarningMessage',
+  components: {
+    MFlex,
+    MLink,
+    MButton,
+  },
+  props: {
+    /**
+     * 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: () => ({}),
+    },
+    /**
+     * Indicates whether the back button should be displayed
+     */
+    showBackButton: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Name for the event to send when the step is questio is answered
+     */
+    completedEventName: {
+      type: String,
+      default: 'step-completed',
+    },
+    /**
+     * The previous answers to inject
+     */
+    answers: {
+      type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+      default: () => new Map<string, ScenarioStepAnswer[]>(),
+    },
+  },
+  methods: {
+    injectIcon(icon: string) {
+      this.$nextTick(() => {
+        const element = document.getElementById('pb-warning-message-icon');
+        if (element) {
+          SVGInjector(element, {
+            each: function (svg) {
+              svg.setAttribute('fill', '#C65200');
+            },
+          });
+        }
+      });
+
+      return icon;
+    },
+    callAction(action: WarningMessagePayloadAction) {
+      if (action.type === 'STEP') {
+        if (action.code === '__BACK__') {
+          this.$emit('go-back');
+        } else {
+          this.$emit('step-completed', {
+            answers: [],
+            nextStep: action,
+          });
+        }
+      }
+    },
+  },
+  setup(props, { emit }) {
+    const componentId = uuidv4();
+
+    const skipQuestion = () => {
+      /**
+       * Emitted when step is completed
+       * @event dynamic event name according to completedEventName prop
+       * @type {Event}
+       */
+      emit(props.completedEventName, {
+        answers: props.payload?.skippable?.isAnswer
+          ? props.payload?.skippable?.defaultAnswer
+            ? [props.payload?.skippable?.defaultAnswer]
+            : []
+          : null,
+        nextStep: props.payload?.skippable?.nextStep,
+      });
+    };
+
+    return {
+      id: componentId,
+      skipQuestion,
+      BACK_ICON,
+      WARNING_ICON,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'pb-variables';
+@import 'settings-tools/all-settings';
+@import 'typography/_t.bodys';
+
+$small-responsive-breakpoint: 's-large';
+$responsive-breakpoint: 'm';
+.pb-warning-message {
+  @include set-font-face('regular');
+  flex-grow: 1;
+  margin: 0 auto;
+  width: calc(100% - #{$mu050} - #{$mu050});
+  &__back-button-container {
+    align-self: flex-start;
+  }
+  &__back-button {
+    opacity: 1;
+    padding: $mu100 0 $mu100 $mu025;
+    transition: opacity 0.15s 0.5s;
+    &--hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+  &__body {
+    flex-wrap: wrap;
+    margin-bottom: $mu250;
+    max-width: 100%;
+    @include set-from-screen($responsive-breakpoint) {
+      flex-wrap: nowrap;
+      width: 161px;
+    }
+  }
+
+  &__title {
+    @include set-font-face('semi-bold');
+    @include set-font-scale('07', 's');
+    color: $color-grey-700;
+    max-width: 100%;
+    padding: 0 0 0 0;
+    width: 384px;
+    @include set-from-screen($responsive-breakpoint) {
+      @include set-font-scale('08', 'm');
+      padding: $mu250 $mu100 $mu100 $mu100;
+      text-align: center;
+      width: auto;
+    }
+  }
+
+  &__subtitle {
+    color: $color-grey-700;
+    max-width: 100%;
+    padding: 0 0 $mu250 0;
+  }
+
+  &__container__message__right {
+    h3 {
+      @include set-font-face('semi-bold');
+      @include set-font-scale('05', 's');
+      margin: $mu100 0 0 0;
+    }
+
+    p {
+      margin: $mu075 0 $mu100 0;
+      @include set-font-scale('05', 'm');
+    }
+
+    &__link {
+      margin: $mu075 0 $mu100 0;
+
+      a {
+        color: $color-grey-900;
+        @include set-font-scale('05', 'm');
+      }
+    }
+  }
+
+  &__container {
+    width: 511px;
+  }
+
+  &__container__message__left {
+    margin: $mu075 $mu100 0 0;
+    min-width: 28px;
+
+    svg {
+      fill: red;
+    }
+  }
+
+  &__container--background {
+    @extend .pb-warning-message__container;
+    @include set-border-radius('m');
+    background: $color-warning-100;
+    border: 1px solid $color-warning-500;
+    margin: $mu150 0 0 0;
+    padding: $mu075;
+  }
+
+  &__container--button {
+    margin: $mu250 auto 0 auto;
+    width: 311px;
+
+    &__ok {
+      margin-bottom: $mu100;
+    }
+  }
+}
+</style>

package/src/components/warning-message/default-payload.json

@@ -0,0 +1,33 @@
+{
+  "viewModel": {
+    "backLabel": "Question précédente",
+    "label": "Vos travaux dans un appartement",
+    "subtitle": "Nous attirons votre attention !",
+    "content": "La pose d’une pompe à chaleur n’est pas adaptée a un appartement. Nous n’avons pas d’offre pour les appartements aujourd’hui..",
+    "explainLink": {
+      "type": "link",
+      "label": "Comment faire des travaux de rénovation énergétique en tant que locataire ?",
+      "href": "https://www.leroymerlin.fr/v3/p/produits/cuisine/meuble-de-cuisine/cuisine-equipee-l1501755932"
+    }
+  },
+  "callToActions": [
+    {
+      "type": "button",
+      "label": "Ok, poursuivre l'estimation",
+      "action": {
+        "type": "STEP",
+        "code": "__END__"
+      },
+      "bordered": false
+    },
+    {
+      "type": "button",
+      "label": "Changer de le type de propriété",
+      "action": {
+        "type": "STEP",
+        "code": "__BACK__"
+      },
+      "bordered": true
+    }
+  ]
+}

package/src/components/warning-message/without-explain-link.json

@@ -0,0 +1,28 @@
+{
+  "viewModel": {
+    "backLabel": "Question précédente",
+    "label": "Vos travaux dans un appartement",
+    "subtitle": "Nous attirons votre attention !",
+    "content": "La pose d’une pompe à chaleur n’est pas adaptée a un appartement. Nous n’avons pas d’offre pour les appartements aujourd’hui.."
+  },
+  "callToActions": [
+    {
+      "type": "button",
+      "label": "Ok, poursuivre l'estimation",
+      "action": {
+        "type": "STEP",
+        "code": "__END__"
+      },
+      "bordered": false
+    },
+    {
+      "type": "button",
+      "label": "Changer de le type de propriété",
+      "action": {
+        "type": "STEP",
+        "code": "__BACK__"
+      },
+      "bordered": true
+    }
+  ]
+}

package/src/types/pb/WarningMessage.ts

@@ -0,0 +1,8 @@
+export interface WarningMessagePayloadAction {
+  type: string;
+  code: string;
+  component?: string;
+  payload?: {
+    link: string;
+  };
+}