project-booster-vue 8.124.0 → 8.125.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.124.0",
+  "version": "8.125.0",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",

package/src/components/scenario/PbScenario-Features-Russian-Playground.stories.mdx

@@ -0,0 +1,156 @@
+import { v4 as uuidv4 } from 'uuid';
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+import axios from 'axios';
+import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
+import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import store from '../../stores/store';
+import PbScenario from './PbScenario';
+
+<Meta
+  title="Project Booster/Scenario/PbScenario 🦠/ 🇷🇺 Russian playground"
+  argTypes={{
+    apiKey: {
+      name: 'Budget estimate API key',
+      defaultValue: 'xxx',
+      description: 'The API key to use for the budget estimate API.',
+      control: {
+        type: 'text',
+      },
+    },
+    apiBasePath: {
+      name: 'Budget estimate API base path',
+      defaultValue: 'https://api-prep.adeo.cloud/api-project-booster-internal-summary/v1/',
+      description: 'The base path to use for the budget estimate API.',
+      control: {
+        type: 'text',
+      },
+    },
+    subprojectFormUrl: {
+      name: 'The JSON scenario href',
+      defaultValue: 'https://storage.googleapis.com/pb-dev-adeo-disp-subproject-forms/demo-russia/LMRU_KITCHEN.json',
+      description: 'The JSON scenraio Url.',
+      control: {
+        type: 'text',
+      },
+    },
+  }}
+  decorators={[nestedAppDecorator(store, [{ path: '/steps/:stepCode/previous/:answers', component: PbScenario }])]}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+export const answerGettersMappers = {
+  PbQuestion: ({ code }) => code,
+  PbRestitution: ({ code }) => code,
+  PbConclusion: ({ code }) => code,
+  PbSpaceInput: ({ space }) => parseFloat(space),
+  PbCitySearch: ({ city }) => city.inseeCode,
+  PbNameInput: ({ projectName }) => projectName,
+  PbDimensionsInput: ({ width, length }) => {
+    return { width: parseFloat(width), length: parseFloat(length) };
+  },
+  PbListSelect: ({ value }) => value,
+};
+
+export const adaptAnswers = (answers, form) => {
+  let adaptedAnswers = [];
+  if (answers) {
+    adaptedAnswers = Object.entries(answers)
+      .filter(([code]) => !['PbRestitution'].includes(form[code]?.component))
+      .filter(([code]) => code !== 'SUBPROJECT_FORM_ID')
+      .map(([questionId, answerData]) => ({
+        questionId,
+        answers: answerData.map(answerGettersMappers[form[questionId].component]),
+      }));
+  }
+  return adaptedAnswers;
+};
+
+export const TemplateSandbox = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { PbScenario },
+    setup() {
+      const BASE_URL = args.apiBasePath;
+      axios.defaults.baseURL = BASE_URL;
+      axios.interceptors.request.use(
+        function (config) {
+          if (!config.url.includes('://') && config.url.indexOf('//') === -1) {
+            config.headers['X-ClientApiKey'] = args.apiKey;
+            config.url = config.url.replace('/api/', '/');
+          }
+          return config;
+        },
+        function (error) {
+          return Promise.reject(error);
+        },
+      );
+      const subprojectFormId = ref(args.subprojectFormId);
+      const store = useStore();
+      const showApp = ref(false);
+      const subprojectFormStructure = ref(null);
+      const runtimeOptions = ref({});
+      const handleEvent = ({ code, payload, context }) => {
+        if (['STEP-COMPLETED', 'PARTIAL-SELECT-UPDATE'].includes(code)) {
+          if (!!store.getters['estimates/getSessions'].estimatorId) {
+            const adaptedAnswers = adaptAnswers(context.answers, subprojectFormStructure.value);
+            store.dispatch('estimates/estimate', {
+              adaptedAnswers,
+              estimatorId: store.getters['estimates/getSessions'].estimatorId,
+              correlationId: store.getters['estimates/getSessions'].correlationId,
+            });
+          }
+        }
+      };
+      const getSubprojectFormStructureFromJson = async () => {
+        try {
+          const result = await axios.get(args.subprojectFormUrl);
+          showApp.value = true;
+          return result.data;
+        } catch {
+          showApp.value = false;
+        }
+      };
+      getSubprojectFormStructureFromJson().then((data) => {
+        subprojectFormStructure.value = data;
+        store.dispatch('estimates/initSessions', {
+          formId: subprojectFormId.value,
+          correlationId: uuidv4(),
+          estimatorId: subprojectFormStructure.value['__START__'].meta.estimatorId,
+          businessUnit: subprojectFormStructure.value['__START__'].meta.businessUnit,
+          subprojectFormStructure: subprojectFormStructure.value,
+          source: 'fake_source',
+          sourceDetail: 'fake_source_detail',
+        });
+      });
+      return {
+        args,
+        showApp,
+        subprojectFormStructure,
+        runtimeOptions,
+        handleEvent,
+      };
+    },
+    template: `<div>
+      <div v-if="showApp && subprojectFormStructure">
+        <pb-scenario
+          :scenarios="subprojectFormStructure"
+          :runtime-options="runtimeOptions"
+          min-height="100vh"
+          @scenario-event="handleEvent"
+        />
+      </div>
+      <div v-if="!showApp">
+        L'application rencontre quelques difficultés, veuillez renouveler votre action ultérieurement
+      </div>
+    </div>`,
+  };
+};
+
+<Canvas>
+  <Story name="Kitchen" inline={false} height="758px" parameters={{ storyshots: { disable: true } }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>