project-booster-vue 9.53.0 → 9.55.0

package/package.json

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

package/src/components/rework/question/city-search/MPbCitySearch.vue

@@ -115,7 +115,7 @@ const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 
 export default defineComponent({
-  name: 'MPbCitySearch',
+  name: 'PbCitySearch',
 
   components: {
     MFlex,

package/src/components/rework/question/name-input/MPbNameInput.stories.mdx

@@ -0,0 +1,308 @@
+import { nestedAppDecorator } from '../../../../../.storybook/nested-app-decorator';
+import { Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import MPbNameInput from './MPbNameInput';
+import DEFAULT_PAYLOAD from './default-payload.json';
+import dedent from 'ts-dedent';
+
+<Meta
+  title="Project Booster/Rework/Questions/MPbNameInput 🦠"
+  component={MPbNameInput}
+  argTypes={{
+    'payload': {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+    'dynamic event name according to completedEventName prop': {
+      table: {
+        defaultValue: {
+          summary: 'Event payload',
+          detail: JSON.stringify({ answers: [{ projectName: 'My project name', optin: false }] }, null, '  '),
+        },
+      },
+    },
+    'onStepCompleted': {
+      action: 'Step completed',
+      table: { disable: true },
+    },
+  }}
+  decorators={[
+    nestedAppDecorator(
+      {
+        actions: {
+          sendEventToBus({}, payload) {
+            console.log('Event sent to bus', payload);
+          },
+        },
+      },
+      [],
+    ),
+  ]}
+  parameters={{ layout: 'fullscreen' }}
+/>
+
+# 🦠 `MPbNameInput` - 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 `MPbNameInput` Vue component allows to ask for a name. It
+is customizable through the payload property. It has the same
+behaviour as the `PbQuestion` component and is designed to work in scenarii.
+
+It also provides the debrayable optin collect feature.
+
+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.
+
+# `MPbNameInput` - Component props
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MPbNameInput },
+  setup() {
+    return { args };
+  },
+  template: `<m-pb-name-input :payload="args.payload" :show-back-button="args.showBackButton" :answers="args.answers" :runtime-options="args.runtimeOptions" :completed-event-name="args.completedEventName" @step-completed="args.onStepCompleted" />`,
+});
+
+<Canvas>
+  <Story name="101 Sandbox" args={{ payload: DEFAULT_PAYLOAD }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="101 Sandbox" />
+
+# `MPbNameInput` - Features
+
+## Customization
+
+It is possible to customize the component default behaviour by **overriding** a property in the provided `payload` property.
+
+Here is the default payload:
+
+<Source language="json" code={JSON.stringify(DEFAULT_PAYLOAD, null, '  ')} />
+
+Here is the payload with overriden values:
+
+export const overridenLabelsPayload = {
+  viewModel: {
+    backLabel: 'Retour',
+    label: 'Quelle est le montant de votre bien ?',
+    placeholder: 'Montant de votre bien',
+    actionLabel: 'Enregistrer',
+  },
+};
+
+<Source language="json" code={JSON.stringify(overridenLabelsPayload, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature customize"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: overridenLabelsPayload }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## Optin management with runtime options
+
+The optin toggle display is managed with the `runtimeOptions` property :
+
+export const runtimeOptions = {
+  displayOptin: true,
+};
+
+<Source language="json" code={JSON.stringify(runtimeOptions, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature Optin"
+    parameters={{ controls: { disable: true } }}
+    args={{ runtimeOptions: runtimeOptions }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## Value injection from a previous answer with default value fallback
+
+It is possible to inject a value for the component from a previous answer. To do so, add a `value` to the component
+`payload`. The value should have the same structure as the component anwser when completed (See event payload in the
+[Sandbox story](#pbnameinput---component-props)) :
+
+export const valuePayload = {
+  value: {
+    projectName: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForProjectName')}",
+    optin: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForOptin')}",
+  },
+};
+
+<Source language="json" code={JSON.stringify(valuePayload, null, '  ')} />
+
+The `getAnswerValue` function allows to retrieve a value from one provided answer. To retrieve a value, the first
+parameter is the answer Id, the second is an optionnal path to extract a spcific value.
+
+A `defaultDecoratorValue` value can be added as a fallback when no previous answer is found. When no default value is provided and no answer
+is found, the component value will be empty :
+
+export const valueWithFallbackPayload = {
+  defaultDecoratorValue: {
+    projectName: 'Rénover la salle de bain',
+    optin: true,
+  },
+  value: {
+    projectName: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForProjectName') || defaultValue.projectName}",
+    optin: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForOptin') || defaultValue.optin}",
+  },
+};
+
+<Source language="json" code={JSON.stringify(valueWithFallbackPayload, null, '  ')} />
+
+It will try to find a value in a previous answer for a question with id `LMFR_PREVIOUS_QUESTION`,
+provided thanks to the `answers` prop. If no value is found, it will use the `defaultDecoratorValue` as a fallback.
+
+export const previousAnswers = new Map(
+  Object.entries({
+    LMFR_PREVIOUS_QUESTION: [
+      {
+        pathForProjectName: 'Rénover la cuisine',
+      },
+    ],
+  }),
+);
+
+<Source language="json" code={JSON.stringify(previousAnswers, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature previous value from answer with optin"
+    parameters={{ controls: { disable: true } }}
+    args={{
+      payload: valuePayload,
+      answers: previousAnswers,
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+When no answer is found, the default value fallback is used:
+
+<Canvas>
+  <Story
+    name="Showcase - Feature previous value from default with optin"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: valueWithFallbackPayload }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+With optin value :
+
+`runtimeOptions` prop to add option :
+
+<Source language="json" code={JSON.stringify(runtimeOptions, null, '  ')} />
+
+`answers` prop to add a previous answer :
+
+export const previousAnswersWithOptin = {
+  LMFR_PREVIOUS_QUESTION: [
+    {
+      pathForProjectName: 'Rénover la cuisine',
+      pathForOptin: true,
+    },
+  ],
+};
+
+<Source language="json" code={JSON.stringify(previousAnswersWithOptin, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature previous value from answer"
+    parameters={{ controls: { disable: true } }}
+    args={{
+      payload: valuePayload,
+      answers: new Map(Object.entries(previousAnswersWithOptin)),
+      runtimeOptions: runtimeOptions,
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+When no answer is found, the default value fallback is used:
+
+export const valueWithFallbackPayloadAndOptin = {
+  defaultDecoratorValue: {
+    projectName: 'Rénover la salle de bain',
+    optin: true,
+  },
+  value: {
+    projectName: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForProjectName') || defaultValue.projectName}",
+    optin: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForOptin') || defaultValue.optin}",
+  },
+};
+
+<Source language="json" code={JSON.stringify(valueWithFallbackPayloadAndOptin, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature previous value from default"
+    parameters={{ controls: { disable: true } }}
+    args={{
+      payload: valueWithFallbackPayloadAndOptin,
+      runtimeOptions: runtimeOptions,
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## Custom validation
+
+It is possible to customize the input field validation. To do so, provide a `validation` property to the `viewModel`.
+
+The default `validation` object is:
+
+<Source language="json" code={JSON.stringify(DEFAULT_PAYLOAD.viewModel.validation, null, '  ')} />
+
+It is possible to customize those values:
+
+export const customValidation = {
+  viewModel: {
+    validation: {
+      minLength: 5,
+      minErrorMessage: 'Plus de 5 caractères',
+      maxLength: 10,
+      maxErrorMessage: 'Moins de 10 caractères',
+      requiredErrorMessage: 'Champ obligatoire',
+    },
+  },
+};
+
+<Source language="json" code={JSON.stringify(customValidation, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature custom validation"
+    parameters={{ controls: { disable: true }, storyshots: { disable: true } }}
+    args={{ payload: customValidation }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/rework/question/name-input/MPbNameInput.vue

@@ -0,0 +1,349 @@
+<template>
+  <m-flex class="pb-name-input" direction="column" align-items="center">
+    <m-flex class="pb-name-input__back-button-container" align-items="stretch">
+      <m-link
+        :label="computedPayload.viewModel.backLabel"
+        :left-icon="BACK_ICON"
+        :class="{
+          'pb-name-input__back-button': true,
+          'pb-name-input__back-button--hidden':
+            !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
+        }"
+        @click.once="$emit('go-back')"
+      />
+    </m-flex>
+    <form class="pb-name-input__form-container" ref="pbNameInputFormObserver" @submit.prevent="handleFormSubmit">
+      <div class="pb-name-input__title">
+        {{ computedPayload.viewModel.label }}
+      </div>
+      <m-flex class="pb-name-input__form" direction="column" align-items="stretch">
+        <m-text-input
+          :name="`text-input-${id}`"
+          class="pb-name-input__text-input"
+          ref="pbNameInputTextInput"
+          :placeholder="computedPayload.viewModel.placeholder"
+          v-model="name"
+        />
+        <m-flex v-if="runtimeOptions.displayOptin" class="pb-name-input__optin">
+          <m-toggle class="pb-name-input__optin-toggle" size="s" v-model="optin" />
+          <div class="pb-name-input__optin-label">
+            J'accepte de recevoir par email les offres commerciales de Leroy Merlin
+          </div>
+        </m-flex>
+        <m-flex class="pb-name-input__buttons-container" direction="column">
+          <m-button
+            class="pb-name-input__button"
+            :label="computedPayload.viewModel.actionLabel"
+            width="full"
+            size="l"
+            @click="handleFormSubmit"
+          />
+        </m-flex>
+      </m-flex>
+    </form>
+  </m-flex>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref, onMounted, ComputedRef, PropType, Ref } from 'vue';
+import { v4 as uuidv4 } from 'uuid';
+import { useStore } from 'vuex';
+import { useForm } from 'vee-validate';
+import * as yup from 'yup';
+import cloneDeep from 'lodash.clonedeep';
+import merge from 'lodash.merge';
+import MFlex from '../../../mozaic/flex/MFlex.vue';
+import MButton from '../../../mozaic/buttons/MButton.vue';
+import MLink from '../../../mozaic/link/MLink.vue';
+import MTextInput from '../../../mozaic/text-input/MTextInput.vue';
+import MToggle from '../../../mozaic/toggle/MToggle.vue';
+import DEFAULT_PAYLOAD from './default-payload.json';
+import { NameInputPayload } from '@/components/question/name-input/NameInput';
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { decorate } from '@/services/decorate';
+
+const BACK_ICON =
+  'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
+
+const initValidation = (componentId: string, computedPayload: ComputedRef<NameInputPayload>) => {
+  const validation = computedPayload.value.viewModel.validation;
+  const validationSchema = computed(() => {
+    return yup.object({
+      [`text-input-${componentId}`]: yup
+        .string()
+        .typeError(validation.notValidTypeMessage ?? 'Saisir un nom de projet')
+        .required(validation.requiredErrorMessage ?? 'Le nom du projet est obligatoire')
+        .min(
+          validation.minLength ?? 0,
+          validation.minErrorMessage ?? 'Le nom du projet doit avoir plus de ${min} caractères',
+        )
+        .max(
+          validation.maxLength ?? 60,
+          validation.maxErrorMessage ?? 'Le nom du projet doit avoir moins de ${max} caractères',
+        ),
+    });
+  });
+  return validationSchema;
+};
+const computeDefaultValue = (
+  runtimeOptions: any,
+  answers: Map<string, ScenarioStepAnswer[]>,
+  computedPayload: ComputedRef<NameInputPayload>,
+) => {
+  let name: Ref<string | undefined> = ref(undefined);
+  let optin: Ref<string | undefined> = ref(undefined);
+
+  if (computedPayload?.value?.value) {
+    name.value = decorate(
+      answers,
+      runtimeOptions,
+      computedPayload?.value?.value?.projectName,
+      computedPayload?.value?.defaultDecoratorValue ?? '',
+    );
+    optin.value = decorate(
+      answers,
+      runtimeOptions,
+      computedPayload?.value?.value?.optin,
+      computedPayload?.value?.defaultDecoratorValue ?? '',
+    );
+  }
+
+  return { name, optin };
+};
+
+export default defineComponent({
+  name: 'PbNameInput',
+
+  components: {
+    MFlex,
+    MButton,
+    MLink,
+    MTextInput,
+    MToggle,
+  },
+
+  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 as PropType<NameInputPayload>,
+      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[]>(),
+    },
+  },
+
+  setup(props, { emit }) {
+    const componentId = uuidv4();
+
+    const pbNameInputTextInput = ref<HTMLElement>();
+
+    const store = useStore();
+
+    const computedPayload = computed(() => {
+      const tempPayload = cloneDeep(DEFAULT_PAYLOAD);
+      return merge(tempPayload, props.payload);
+    });
+
+    const { name, optin } = computeDefaultValue(props.runtimeOptions, props.answers!, computedPayload);
+
+    const validationSchema = initValidation(componentId, computedPayload);
+    const { handleSubmit } = useForm({ validationSchema: validationSchema.value });
+
+    const handleFormSubmit = handleSubmit(() => {
+      store.dispatch('sendEventToBus', {
+        code: 'INPUT-NAME-VALIDATION-CLICKED',
+        payload: {
+          ...props.payload,
+          context: {
+            answers: props.answers,
+          },
+        },
+      });
+
+      /**
+       * Emitted when step is completed
+       * @event dynamic event name according to completedEventName prop
+       */
+      emit(props.completedEventName, {
+        answers: [
+          {
+            projectName: name.value,
+            optin: optin.value,
+          },
+        ],
+      });
+    });
+
+    onMounted(() => {
+      if (props.runtimeOptions?.displayOptin) {
+        store.dispatch('sendEventToBus', {
+          code: 'OPTIN-MAIL-DISPLAYED',
+          payload: {
+            ...props.payload,
+            context: {
+              answers: props.answers,
+            },
+          },
+        });
+      }
+
+      setTimeout(() => {
+        pbNameInputTextInput.value?.focus();
+      }, 150);
+    });
+
+    return {
+      BACK_ICON,
+      pbNameInputTextInput,
+      id: componentId,
+      name,
+      optin,
+      computedPayload,
+      handleFormSubmit,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'pb-variables';
+
+$responsive-breakpoint: 'm';
+
+.pb-name-input {
+  @include set-font-face('regular');
+
+  flex-grow: 1;
+  height: 100vh;
+  margin: 0 auto;
+  width: calc(100% - #{$mu050} - #{$mu050});
+
+  @include set-from-screen($responsive-breakpoint) {
+    height: 100%;
+  }
+
+  &__back-button-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    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;
+    }
+  }
+
+  &__form-container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
+    width: 100%;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: calc(100% - #{$mu050} - #{$mu050});
+    }
+  }
+
+  &__form {
+    flex-grow: 1;
+    max-width: 564px;
+    width: calc(100% - 1.5rem);
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 564px;
+    }
+  }
+
+  &__title {
+    @include set-font-face('semi-bold');
+    @include set-font-scale('06', 's');
+
+    color: $color-grey-700;
+    max-width: 100%;
+    padding: 0 0 $mu100 0;
+    text-align: left;
+    width: calc(100% - 1.5rem);
+    margin-top: $mu100;
+
+    @include set-from-screen($responsive-breakpoint) {
+      @include set-font-scale('06', 'm');
+
+      width: 564px;
+      padding: $mu250 $mu100 0 $mu100;
+      text-align: left;
+      margin-top: 0;
+    }
+  }
+
+  &__text-input {
+    margin-bottom: $mu100;
+    width: 100%;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 50%;
+    }
+  }
+
+  &__optin {
+    margin-bottom: $mu250;
+
+    &-toggle {
+      margin-top: 0.1rem;
+    }
+
+    &-label {
+      color: $color-grey-800;
+      margin-left: $mu050;
+    }
+  }
+
+  &__buttons-container {
+    justify-content: flex-end !important;
+    margin-bottom: $mu150;
+    width: 100%;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 60%;
+    }
+  }
+}
+</style>

package/src/components/rework/question/name-input/NameInput.ts

@@ -0,0 +1,22 @@
+export interface NameInputValidation {
+  minLength: number;
+  minErrorMessage: string;
+  maxLength: number;
+  maxErrorMessage: string;
+  requiredErrorMessage: string;
+  notValidTypeMessage: string;
+}
+
+export interface NameInputViewModel {
+  backLabel: string;
+  label: string;
+  placeholder: string;
+  actionLabel: string;
+  validation: NameInputValidation;
+}
+
+export interface NameInputPayload {
+  viewModel: NameInputViewModel;
+  value: { projectName: string; optin: string };
+  defaultDecoratorValue: string;
+}