project-booster-vue 10.6.1 → 10.7.0

package/package.json

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

package/src/components/rework/exit-options/MPbExitOptions.vue

@@ -83,17 +83,17 @@
 
 <script lang="ts" setup>
 import { MButton } from '@mozaic-ds/vue-3';
-import { PropType, ref, defineEmits, defineProps } from 'vue';
+import { PropType, ref, defineEmits, defineProps, computed, ComputedRef } from 'vue';
 import { PayloadAction } from '../types/genericPayload';
 import { areConditionsValid } from '../../../services/scenarioConditionals';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { useStore } from 'vuex';
 import { callAction } from '../services/navigate';
-
-const emit = defineEmits(['go-back', 'step-completed']);
-const message = ref('');
-const store = useStore();
+import cloneDeep from 'lodash.clonedeep';
+import DEFAULT_PAYLOAD from './default-payload.json';
+import merge from 'lodash.merge';
+import { decorate } from '@/services/decorate';
 
 const props = defineProps({
   /**
@@ -121,6 +121,33 @@ const props = defineProps({
   },
 });
 
+const store = useStore();
+
+const computedPayload = computed(() => {
+  const tempPayload = cloneDeep(DEFAULT_PAYLOAD);
+  return merge(tempPayload, props.payload);
+});
+
+const computeDefaultValue = (
+  runtimeOptions: any,
+  answers: Map<string, ScenarioStepAnswer[]>,
+  computedPayload: ComputedRef<any>,
+) => {
+  let message;
+  if (computedPayload?.value?.value) {
+    message = decorate(
+      answers,
+      runtimeOptions,
+      computedPayload?.value?.value?.message,
+      computedPayload?.value?.defaultDecoratorValue ?? '',
+    );
+  }
+  return message;
+};
+
+const emit = defineEmits(['go-back', 'step-completed']);
+const message = ref(computeDefaultValue(props.runtimeOptions, props.answers!, computedPayload));
+
 /**
  * Send action to completed step
  * @param action

package/src/components/rework/timify/MPbTimify.stories.mdx

@@ -0,0 +1,63 @@
+import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import DEFAULT_PAYLOAD from './default-payload';
+import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
+import MPbTimify from './MPbTimify';
+import inhabitantsStore from '../../../stores/modules/inhabitantsStore';
+import timifyStore from '../../../stores/modules/timifyStore';
+
+<Meta
+  title="Project Booster/Rework/Timify/MPbTimify 🦠"
+  component={MPbTimify}
+  argTypes={{
+    payload: {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+  }}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+  decorators={[
+    nestedAppDecorator(
+      {
+        modules: {
+          inhabitants: inhabitantsStore,
+          timify: timifyStore,
+        },
+        mutations: {},
+        actions: {},
+      },
+      [],
+    ),
+  ]}
+/>
+
+# 🦠 `MPbTimify` - Component
+
+The `MPbTimify` component to display information that user needed.
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MPbTimify },
+  setup() {
+    return { args };
+  },
+  template: `<m-pb-timify
+    :payload="args.payload"
+  />`,
+});
+
+## showCase
+
+<Canvas>
+  <Story inline={false} height="862px" name="101 Sandbox" args={{ payload: DEFAULT_PAYLOAD }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/rework/timify/MPbTimify.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="m-pb-timify">
+    <div class="m-pb-timify__iframe" v-if="!showClicRDV">
+      <iframe :src="iframeUri" frameborder="0"></iframe>
+    </div>
+    <pb-appointment-form v-else :payload="payload"></pb-appointment-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { PropType, computed, onBeforeMount } from 'vue';
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+import PbAppointmentForm from '@/components/appointment/PbAppointmentForm.vue';
+
+const props = defineProps({
+  /**
+   * 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 previous answers to inject
+   */
+  answers: {
+    type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+    default: () => new Map<string, ScenarioStepAnswer[]>(),
+  },
+});
+
+const iframeUri = ref('https://book.timify.com/services?');
+const store = useStore();
+const showClicRDV = computed(() => store.getters['timify/showClicRDV']);
+const getShowServices = computed(() => store.getters['timify/getShowServices']);
+const getAccountId = computed(() => store.getters['timify/getAccountId']);
+const currentUser = store.getters['inhabitants/getCurrentInhabitant'];
+const projectId = store.getters['appointmentQualification/getCurrentAppointmentQualification'];
+
+onBeforeMount(() => {
+  store.dispatch('timify/loadTimify', {
+    payload: props.payload.viewModel.appointmentCategory,
+    storeId: store.getters.metadata.storeId || '',
+  });
+
+  store.dispatch('timify/loadCollaboratorUri', {
+    projectId,
+  });
+
+  const collaboratorUri = store.getters['timify/getCollaboratorUri'];
+
+  iframeUri.value += `accountId=${getAccountId}&showServices=${getShowServices}`;
+  iframeUri.value += `&guestFirstName=${currentUser.firstname}&guestLastName=${currentUser.lastname}&guestEmail=${currentUser.email}&guestPhone=${currentUser.phone}`;
+  iframeUri.value += `&externalCustomerField[inhabitantProjectId]=${projectId}&externalCustomerField[collaboratorLink]=${collaboratorUri}&hideCloseButton=true`;
+});
+</script>
+
+<style lang="scss">
+@import 'pb-variables';
+@import '../styles/global.scss';
+
+.m-pb-timify {
+  width: calc(100% - $mu250);
+  margin: $mu200 auto $mu250 auto;
+  padding: 0 $mu125;
+
+  &__iframe {
+    iframe {
+      width: 100%;
+      height: 100vh;
+    }
+  }
+}
+</style>

package/src/components/rework/timify/default-payload.json

@@ -0,0 +1,6 @@
+{
+  "viewModel": {
+    "title": "Votre prise de rendez-vous ?",
+    "appointmentCategory": "SDB"
+  }
+}

package/src/components/scenario/PbScenario.vue

@@ -149,6 +149,7 @@ import MPbNameInput from '../rework/question/name-input/MPbNameInput.vue';
 import MPbExitOptions from '../rework/exit-options/MPbExitOptions.vue';
 import MPbUploadDocument from '../rework/question/upload-document/MPbUploadDocument.vue';
 import MPbMediaUpload from '../rework/media/upload/MPbMediaUpload.vue';
+import MPbTimify from '../rework/timify/MPbTimify.vue';
 
 import { areConditionsValid } from '../../services/scenarioConditionals';
 import {
@@ -204,6 +205,7 @@ export default defineComponent({
     MPbUploadDocument,
     MPbConfigurationsImport,
     MPbMediaUpload,
+    MPbTimify,
   },
 
   props: {

package/src/services/api/timifyApi.ts

@@ -0,0 +1,33 @@
+import axios from 'axios';
+import { escape } from '../../services/htmlEscape';
+
+export const clientApi = axios.create({
+  baseURL: '/project-booster/api',
+});
+
+if ((<any>window).config) {
+  clientApi.defaults.baseURL = (<any>window).config.VUE_APP_DEFAULT_BASE_URL;
+}
+
+/**
+ * Get timify object with appointmentCategory && storeId
+ * @param appointmentCategory
+ * @param storeId
+ * @returns
+ */
+export const getTimifyObject = async (appointmentCategory: string, storeId: string) => {
+  try {
+    const response = await clientApi.get(
+      `/appointment-qualifications/is-timify-enabled?${
+        storeId ? '?storeId=' + storeId : ''
+      }&appointmentCategory=${appointmentCategory}`,
+    );
+    return JSON.parse(
+      JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
+        return `: "${escape($1)}"`;
+      }),
+    );
+  } catch (e) {
+    return false;
+  }
+};

package/src/stores/modules/timifyStore.ts

@@ -0,0 +1,87 @@
+import { ActionContext } from 'vuex';
+import { State } from '@/stores/state';
+import { getTimifyObject } from '@/services/api/timifyApi';
+import { TimifyServices, TimifyState } from '@/types/pb/Timify';
+
+type TimifyContext = ActionContext<TimifyState, State>;
+
+enum callboratorUris {
+  prod = 'https://collaborators.pb-prod-adeo-disp.tech.adeo.cloud/index.html/projects/',
+  prep = 'https://collaborators.pb-preprod-adeo-disp.tech.adeo.cloud/index.html/projects/',
+  dev = 'https://collaborators.pb-dev-adeo-disp.tech.adeo.cloud/index.html/projects/',
+}
+
+export default {
+  namespaced: true,
+  state: {
+    showServices: [],
+    accountId: '',
+    collaboratorUri: '',
+    showClicRDV: false,
+  },
+  getters: {
+    getShowServices(state: TimifyState) {
+      return state.showServices;
+    },
+    getAccountId(state: TimifyState) {
+      return state.accountId;
+    },
+    getCollaboratorUri(state: TimifyState) {
+      return state.collaboratorUri;
+    },
+    getShowClicRDV(state: TimifyState) {
+      return state.showClicRDV;
+    },
+  },
+  mutations: {
+    setShowServices(state: TimifyState, services: string[]) {
+      state.showServices = services;
+    },
+    setAccountId(state: TimifyState, accountId: string) {
+      state.accountId = accountId;
+    },
+    setCollaboratorUri(state: TimifyState, collaboratorUri: string) {
+      state.collaboratorUri = collaboratorUri;
+    },
+    setShowClicRDV(state: TimifyState, showClicRDV: boolean) {
+      state.showClicRDV = showClicRDV;
+    },
+  },
+  actions: {
+    async loadTimify(
+      { commit, state }: TimifyContext,
+      { appointmentCategory, storeId }: { appointmentCategory: string; storeId: string },
+    ) {
+      const timify = await getTimifyObject(appointmentCategory, storeId);
+
+      if (timify) {
+        if (timify.services.length) {
+          const servicesIds = timify.services.map((service: TimifyServices) => {
+            return service.id;
+          });
+          commit('setShowServices', servicesIds.toString());
+        } else {
+          commit('setShowClicRDV', true);
+        }
+
+        if (timify.company) {
+          const accountId = timify.company.id;
+          commit('setAccountId', accountId);
+        }
+      } else {
+        commit('setShowClicRDV', true);
+      }
+    },
+    async loadCollaboratorUri({ commit, state }: TimifyContext, { projectId }: { projectId: string }) {
+      const baseurl = window.location.host;
+
+      if (baseurl.includes('prep')) {
+        commit('setCollaboratorUri', callboratorUris.prep + projectId);
+      } else if (baseurl.includes('uat') || baseurl.includes('localhost')) {
+        commit('setCollaboratorUri', callboratorUris.dev + projectId);
+      } else {
+        commit('setCollaboratorUri', callboratorUris.prod + projectId);
+      }
+    },
+  },
+};

package/src/stores/store.ts

@@ -9,6 +9,7 @@ import documentsStore from './modules/documentsStore';
 import consentStore from './modules/consentStore';
 import productsStore from './modules/productsStore';
 import trezorStore from './modules/trezorStore';
+import timifyStore from './modules/timifyStore';
 import cloneDeep from 'lodash.clonedeep';
 import { State } from '@/stores/state';
 import { ActionContext } from 'vuex';
@@ -28,6 +29,7 @@ export default {
     consent: consentStore,
     products: productsStore,
     trezor: trezorStore,
+    timify: timifyStore,
   },
   mutations: {
     eventBusSendEvent(state: State, { code, payload }: { code: string; payload: any }) {

package/src/types/pb/Timify.ts

@@ -0,0 +1,15 @@
+export interface TimifyState {
+  showServices: string[];
+  accountId: string;
+  collaboratorUri: string;
+  showClicRDV: boolean;
+}
+
+export interface TimifyServices {
+  id: string;
+  categoryId: string;
+  externalId: string;
+  globalId: string;
+  name: string;
+  isBookable: boolean;
+}