project-booster-vue 10.26.0 → 10.27.0

package/package.json

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

package/src/components/date-picker/MPbDatePicker.vue

@@ -35,7 +35,7 @@ function skipQuestion() {
       <span class="title">{{ props.payload.viewModel.title }}</span>
       <span class="subtile">{{ props.payload.viewModel.subtitle }}</span>
       <input type="date" v-model="moveDate" class="mc-text-input mc-field__input input-text-date" />
-      <MButton
+      <m-button
         class="button"
         :label="props.payload.viewModel.actionLabel"
         @click="handleSubmit"

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

@@ -315,6 +315,16 @@ export default defineComponent({
 
   components: { MFlexy, PbProjectAttribute },
 
+  props: {
+    /**
+     * The project attributes
+     */
+    projectAttributes: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
   data() {
     return {
       /**
@@ -515,13 +525,22 @@ export default defineComponent({
     };
   },
 
-  props: {
-    /**
-     * The project attributes
-     */
-    projectAttributes: {
-      type: Object,
-      default: () => ({}),
+  computed: {
+    displayedProjectAttributes() {
+      return Object.entries(this.projectAttributes);
+    },
+
+    getCommentAttribute(): string | null {
+      const commentAttribute = Object.entries(this.projectAttributes).find(
+        ([attributeId]) => attributeId === 'comment',
+      );
+      return commentAttribute ? commentAttribute[1].value : null;
+    },
+
+    isRigidSpaWanted(): boolean {
+      return Object.entries(this.projectAttributes).some(
+        ([attributeId, attribute]) => attributeId === 'works' && attribute.value.includes('RIGID_SPA'),
+      );
     },
   },
 
@@ -547,25 +566,6 @@ export default defineComponent({
       }
     },
   },
-
-  computed: {
-    displayedProjectAttributes() {
-      return Object.entries(this.projectAttributes);
-    },
-
-    getCommentAttribute(): string | null {
-      const commentAttribute = Object.entries(this.projectAttributes).find(
-        ([attributeId]) => attributeId === 'comment',
-      );
-      return commentAttribute ? commentAttribute[1].value : null;
-    },
-
-    isRigidSpaWanted(): boolean {
-      return Object.entries(this.projectAttributes).some(
-        ([attributeId, attribute]) => attributeId === 'works' && attribute.value.includes('RIGID_SPA'),
-      );
-    },
-  },
 });
 </script>
 

package/src/components/projects/project-item-save/PbProjectItemSave.vue

@@ -105,6 +105,7 @@ export const answerGettersMappers: Map<string, (param: any) => void> = new Map<s
     MPbQuestion: ({ code }: { code: string }): string => code,
     MPbRestitutionList: ({ code }: { code: string }): string => code,
     MPbSpaceInput: ({ space }: { space: string }): number => parseFloat(space),
+    MPbAmountInput: ({ amount }: { amount: string }): number => parseFloat(amount),
     MPbNameInput: ({ projectName }: { projectName: string }) => projectName,
     MPbCitySearch: ({ city }: { city: any }) => city.postalCode,
     MPbIncrementalAmountInput: ({ value }: { value: string }) => parseInt(value),

package/src/components/question/amount-input/AmountInput.ts

@@ -1,21 +1,42 @@
+import { HelpArea, Pedagogy } from '@/components/rework/question/amount-input/AmountInput';
+import { PayloadAction } from '@/components/rework/types/genericPayload';
+import { ScenarioStepSkippableOptions } from '@/types/pb/Scenario';
+
 export interface AmountInputValidation {
-  notValidNumberMessage: string;
   minValue: number;
   minErrorMessage: string;
   maxValue: number;
   maxErrorMessage: string;
   requiredErrorMessage: string;
+  notValidTypeMessage: string;
+  notValidNumberMessage: string;
 }
+
 export interface AmountInputViewModel {
   backLabel: string;
+  hideBackButton?: boolean;
   label: string;
+  subtitle: string;
   placeholder: string;
   actionLabel: string;
   validation: AmountInputValidation;
+  forceBackButton?: boolean;
+  callToActions: PayloadAction[];
+  analytics: {
+    funnel_name: string;
+  };
+  footer?: {
+    label: string;
+    conditions: string[];
+  };
+  nextStep?: any;
 }
 
 export interface AmountInputPayload {
   viewModel: AmountInputViewModel;
   value: { amount: string };
   defaultDecoratorValue: string;
+  skippable?: ScenarioStepSkippableOptions;
+  helpArea?: HelpArea[];
+  pedagogy?: Pedagogy;
 }

package/src/components/question/space-input/SpaceInput.ts

@@ -1,4 +1,4 @@
-import { HelpArea } from '@/components/rework/question/space-input/SpaceInput';
+import { HelpArea, Pedagogy } from '@/components/rework/question/space-input/SpaceInput';
 import { PayloadAction } from '@/components/rework/types/genericPayload';
 import { ScenarioStepSkippableOptions } from '@/types/pb/Scenario';
 
@@ -37,4 +37,5 @@ export interface SpaceInputPayload {
   defaultDecoratorValue: string;
   skippable?: ScenarioStepSkippableOptions;
   helpArea?: HelpArea[];
+  pedagogy?: Pedagogy;
 }

package/src/components/rework/media/upload/MPbMediaUpload.vue

@@ -30,9 +30,9 @@
         />
       </div>
       <div class="pb-media-upload__link" v-if="payload.viewModel.notification">
-        <m-link :theme="payload.viewModel.notification.theme" @click.prevent="displayNotificationDialog = true">{{
-          payload.viewModel.notification.title
-        }}</m-link>
+        <m-link :theme="payload.viewModel.notification.theme" @click.prevent="displayNotificationDialog = true">
+          {{ payload.viewModel.notification.title }}
+        </m-link>
       </div>
       <div class="pb-media-upload__buttons" v-if="payload.callToActions">
         <div class="pb-media-upload__buttons__button" v-for="button in payload.callToActions">

package/src/components/rework/navigation/MPbNavigation.vue

@@ -154,7 +154,7 @@ const emitClickEvent = (nextStep: any) => {
   }
 };
 
-const cdlClickDate = computed((): String => {
+const cdlClickDate = computed((): string => {
   let events = [
     {
       attributes: {

package/src/components/rework/question/amount-input/AmountInput.ts

@@ -0,0 +1,67 @@
+import { ScenarioStepSkippableOptions } from '@/types/pb/Scenario';
+
+export interface AmountInputValidation {
+  minValue: number;
+  minErrorMessage: string;
+  maxValue: number;
+  maxErrorMessage: string;
+  requiredErrorMessage: string;
+  notValidTypeMessage: string;
+}
+
+export interface AmountInputViewModel {
+  backLabel: string;
+  label: string;
+  subtitle?: string;
+  placeholder: string;
+  actionLabel: string;
+  validation: AmountInputValidation;
+  unitLabel: string;
+  hideBackButton?: boolean;
+  progressBar?: boolean;
+  widthXlSize?: boolean;
+  analytics: {
+    funnel_name: string;
+  };
+  footer?: {
+    label: string;
+    conditions: string[];
+  };
+}
+
+export interface AmountInputPayload {
+  viewModel: AmountInputViewModel;
+  value: { space: string };
+  defaultDecoratorValue: string;
+  skippable?: ScenarioStepSkippableOptions;
+  helpArea?: HelpArea[];
+  pedagogy?: Pedagogy;
+}
+
+export interface HelpArea {
+  type: string;
+  label: string;
+  action: Action;
+}
+
+export interface Pedagogy {
+  component: string;
+  label?: string;
+  content?: PedagogyContent[];
+}
+
+export interface PedagogyContent {
+  htmlContent: string;
+  imgUrl: string;
+  imgAlignment: string;
+}
+
+export interface Action {
+  dialogViewModel: DialogViewModel;
+}
+
+export interface DialogViewModel {
+  watermark: string;
+  headerTitle: string;
+  htmlContent: string;
+}

package/src/components/rework/question/amount-input/MPbAmountInput.stories.mdx

@@ -0,0 +1,321 @@
+import { nestedAppDecorator } from '../../../../../.storybook/nested-app-decorator';
+import { Story, Meta, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import MPbAmountInput from './MPbAmountInput.vue';
+import DEFAULT_PAYLOAD from './default-payload.json';
+
+<Meta
+  title="Project Booster/Rework/Questions/MPbAmountInput 🦠"
+  component={MPbAmountInput}
+  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: [{ amount: '80' }] }, null, '  '),
+        },
+      },
+    },
+    'onStepCompleted': {
+      action: 'Step completed',
+      table: { disable: true },
+    },
+  }}
+  decorators={[nestedAppDecorator({}, [])]}
+  parameters={{ layout: 'fullscreen' }}
+/>
+
+# 🦠 `MPbAmountInput` - 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 `MPbAmountInput` Vue component allows to ask for an amount. It
+is customizable through the payload property. It has the same
+behaviour as the `PbQuestion` component and is designed to work in scenarii.
+
+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.
+
+# `MPbAmountInput` - Component props
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MPbAmountInput },
+  setup() {
+    return { args };
+  },
+  template: `<m-pb-amount-input
+    style="max-width:720px; margin: auto"
+    :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" />
+
+# `MPbAmountInput` - 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: "Quel est le coût moyen mensuel de votre facture d'électricité ?",
+    placeholder: 'Coût moyen',
+    actionLabel: 'Valider',
+  },
+};
+
+<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>
+
+## 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: {
+      maxValue: 100,
+      maxErrorMessage: 'Doit être plus petit que 100',
+      minValue: 50,
+      minErrorMessage: 'Doit être plus grand que 50',
+      notValidNumberMessage: 'Veuillez saisir une surface en m²',
+      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>
+
+## Footer
+
+It is possible to customize the question wit a footer. To do so, provide a `footer` property to the `viewModel`.
+
+<Source language="json" code={JSON.stringify(DEFAULT_PAYLOAD.viewModel.validation, null, '  ')} />
+
+It is possible to customize those values:
+
+export const customFooter = {
+  viewModel: {
+    footer: {
+      label:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    },
+  },
+};
+
+<Source language="json" code={JSON.stringify(customFooter, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature custom footer"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: customFooter }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## With modal support
+
+export const withModal = {
+  viewModel: {
+    validation: {
+      maxValue: 900,
+      maxErrorMessage: 'Le coût moyen mensuel de votre facture doit être comprise entre 100 et 900 euros',
+      minValue: 100,
+      minErrorMessage: 'Le coût moyen mensuel de votre facture doit être comprise entre 100 et 900 euros',
+    },
+    backLabel: 'Question précédente',
+    label: 'Quel est votre coût moyen mensuel ?',
+    placeholder: 'Votre coût moyen mensuel',
+    actionLabel: 'Continuer',
+    image: null,
+  },
+  helpArea: [
+    {
+      type: 'text',
+      label: 'Trouvez facilement cette information',
+    },
+    {
+      type: 'link',
+      label: 'Comment trouver cette information',
+      action: {
+        type: 'MODAL',
+        dialogViewModel: {
+          headerTitle: 'Trouvez facilement cette information',
+          htmlContent:
+            "<ul><li>En ligne via un compte client en ligne ou une application mobile.</li><li>Sur votre facture d'électricité.</li></ul>",
+        },
+      },
+    },
+  ],
+};
+
+<Source language="json" code={JSON.stringify(withModal, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature with modal"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: withModal }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## With accordion for pedagogy
+
+export const withAccordion = {
+  viewModel: {
+    validation: {
+      maxValue: 900,
+      maxErrorMessage: 'Le coût moyen mensuel de votre facture doit être comprise entre 100 et 900 euros',
+      minValue: 100,
+      minErrorMessage: 'Le coût moyen mensuel de votre facture doit être comprise entre 100 et 900 euros',
+    },
+    backLabel: 'Question précédente',
+    label: 'Quel est votre coût moyen mensuel ?',
+    placeholder: 'Votre coût moyen mensuel',
+    actionLabel: 'Continuer',
+    image: null,
+  },
+  pedagogy: {
+    component: 'MPbAccordion',
+    label: 'Trouvez facilement cette information',
+    content: [
+      {
+        htmlContent:
+          "<ul><li>En ligne via un compte client en ligne ou une application mobile.</li><li>Sur votre facture d'électricité.</li></ul>",
+        imgUrl: 'https://storage.googleapis.com/project-booster-media/energyrenovation/reference_tax_income.png',
+      },
+    ],
+  },
+};
+
+<Source language="json" code={JSON.stringify(withAccordion, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature with accordion for pedagogy"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: withAccordion }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## With help area and accordion
+
+export const withHelpAreaAndAccordion = {
+  viewModel: {
+    validation: {
+      maxValue: 900,
+      maxErrorMessage: 'Le coût moyen mensuel de votre facture doit être comprise entre 100 et 900 euros',
+      minValue: 100,
+      minErrorMessage: 'Le coût moyen mensuel de votre facture doit être comprise entre 100 et 900 euros',
+    },
+    backLabel: 'Question précédente',
+    label: 'Quel est votre coût moyen mensuel ?',
+    placeholder: 'Votre coût moyen mensuel',
+    actionLabel: 'Continuer',
+    image: null,
+  },
+  helpArea: [
+    {
+      type: 'link',
+      label: 'Comment trouver cette information',
+      action: {
+        type: 'MODAL',
+        dialogViewModel: {
+          headerTitle: 'Trouvez facilement cette information',
+          htmlContent:
+            "<ul><li>En ligne via un compte client en ligne ou une application mobile.</li><li>Sur votre facture d'électricité.</li></ul>",
+        },
+      },
+    },
+  ],
+  pedagogy: {
+    component: 'MPbAccordion',
+    label: 'Trouvez facilement cette information',
+    content: [
+      {
+        htmlContent:
+          "<ul><li>En ligne via un compte client en ligne ou une application mobile.</li><li>Sur votre facture d'électricité.</li></ul>",
+        imgUrl: 'https://storage.googleapis.com/project-booster-media/energyrenovation/reference_tax_income.png',
+      },
+    ],
+  },
+};
+
+<Source language="json" code={JSON.stringify(withHelpAreaAndAccordion, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature with help area and accordion"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: withHelpAreaAndAccordion }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>