project-booster-vue 9.54.0 → 9.55.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.54.0",
+  "version": "9.55.1",
   "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,
@@ -257,16 +257,12 @@ export default defineComponent({
     updateHeaderHeight() {
       this.headerHeight = this.$refs?.pbCitySearchHeader?.$el?.offsetHeight;
     },
-    formatSuggestion(suggestion: any) {
-      if (suggestion.name) {
-        return suggestion.name;
-      } else {
-        let text = '';
-        for (let i = 0; i < suggestion.terms.length - 1; i++) {
-          text = `${text} ${suggestion.terms[i].value}`;
-        }
-        return text;
+    formatSuggestion(suggestion: google.maps.places.AutocompletePrediction) {
+      let text = '';
+      for (let i = 0; i < suggestion.terms.length - 1; i++) {
+        text = `${text} ${suggestion.terms[i].value}`;
       }
+      return text;
     },
     handleSearchKeywordChange() {
       this.updateHeaderHeight();
@@ -293,39 +289,24 @@ export default defineComponent({
         return;
       }
 
-      try {
-        this.loadingSuggestions = false;
-        this.displaySuggestions = true;
-
-        if (Number.isNaN(parseInt(this.searchKeyword))) {
-          const request = {
-            input: this.searchKeyword,
-            types: ['(regions)'],
-            componentRestrictions: {
-              country: 'fr',
-            },
-          };
-
-          this.googlePlacesAutocompleteService?.getPlacePredictions(request, (results, status) => {
-            this.loadingSuggestions = false;
-            this.displaySuggestions = true;
-            if (status === 'OK') {
-              this.suggestions = results;
-            } else if (status === 'ZERO_RESULTS') {
-              this.suggestions = null;
-            }
-          });
-        } else {
-          const results = await this.getPlaceFromGeoGouvAPI(this.searchKeyword);
+      const request = {
+        input: this.searchKeyword,
+        types: ['(regions)'],
+        componentRestrictions: {
+          country: 'fr',
+        },
+      };
 
+      try {
+        this.googlePlacesAutocompleteService?.getPlacePredictions(request, (results, status) => {
           this.loadingSuggestions = false;
           this.displaySuggestions = true;
-          if (results) {
+          if (status === 'OK') {
             this.suggestions = results;
-          } else {
+          } else if (status === 'ZERO_RESULTS') {
             this.suggestions = null;
           }
-        }
+        });
       } catch (error) {
         console.error(`Could not get city search suggestions for ${this.searchKeyword}`, error);
       }
@@ -352,10 +333,14 @@ export default defineComponent({
             const selectedCity = results[0];
             this.suggestions = null;
 
-            const postalCode = selectedCity.address_components.filter((field) => field.types.includes('postal_code'))[0]
-              ?.short_name;
+            const placeData = await this.getPlaceFromGeoGouvAPI(
+              selectedCity.geometry.location.lat(),
+              selectedCity.geometry.location.lng(),
+            );
 
-            const placeData: any = await this.getPlaceFromGeoGouvAPI(postalCode);
+            const postalCode =
+              selectedCity.address_components.filter((field) => field.types.includes('postal_code'))[0]?.short_name ||
+              placeData.postalCode;
 
             const region =
               selectedCity.address_components.filter((field) => field.types.includes('administrative_area_level_1'))[0]
@@ -389,26 +374,22 @@ export default defineComponent({
         ],
       });
     },
-    async getPlaceFromGeoGouvAPI(codePostal: string) {
+    async getPlaceFromGeoGouvAPI(lat: number, lng: number) {
       const placeData = await axios.get('https://geo.api.gouv.fr/communes', {
         params: {
-          codePostal: codePostal,
+          lat: lat,
+          lon: lng,
           fields: 'nom,code,codesPostaux',
           format: 'json',
           geometry: 'centre',
         },
       });
-      let placeDataFormatted: any = [];
 
-      placeData.data.forEach((element: any) => {
-        placeDataFormatted.push({
-          inseeCode: element.code,
-          postalCode: element.codesPostaux[0],
-          name: element.nom,
-        });
-      });
-
-      return placeDataFormatted;
+      return {
+        inseeCode: placeData.data[0].code,
+        postalCode: placeData.data[0].codesPostaux[0],
+        name: placeData.data[0].nom,
+      };
     },
     selectedCityToKeyword(): string {
       return this.selectedCity?.postalCode + ' ' + this.selectedCity?.name + ', ' + this.selectedCity?.region;

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>