project-booster-vue 8.128.10 → 8.131.0

package/package.json

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

package/src/components/consent/PbConsent.vue

@@ -0,0 +1,135 @@
+<template>
+  <m-flex direction="column" full-width class="pb-consent">
+    <span class="pb-consent__label">
+      Faites le plein d’inspirations et de promotions pour votre projet chaque semaine en vous abonnant à notre
+      newsletter
+    </span>
+    <m-flex
+      v-if="isMailConsentUpdating"
+      class="pb-consent__loading"
+      direction="column"
+      align-items="center"
+      justify-content="center"
+      align-content="center"
+    >
+      <pb-animable-loader class="pb-consent__loading-loader" />
+      <div class="pb-consent__loading-label">Chargement...</div>
+    </m-flex>
+    <m-flex v-else class="pb-consent__actions">
+      <m-button
+        class="pb-consent__actions--button"
+        label="S'abonner à la newsletter"
+        theme="bordered"
+        @click="handleUpdateConsent"
+        v-if="!errorUpdateMailConsent && !isMailConsentUpdated"
+      />
+      <m-notification
+        v-if="isMailConsentUpdated"
+        class="pb-consent__actions--notification"
+        type="success"
+        text="Merci, votre inscription à la newsletter est confirmée"
+      />
+      <m-notification
+        v-if="errorUpdateMailConsent"
+        class="pb-consent__actions--notification"
+        type="warning"
+        text="Une erreur est survenue"
+        link-label="Merci de réessayer"
+        @link-click="handleRetry"
+      />
+    </m-flex>
+  </m-flex>
+</template>
+
+<script>
+import MFlex from '../mozaic/flex/MFlex';
+import MButton from '../mozaic/buttons/MButton';
+import MNotification from '../mozaic/notifications/MNotification';
+import PbAnimableLoader from '../loader/PbAnimableLoader';
+import { useStore } from 'vuex';
+import { computed, onMounted } from 'vue';
+
+export default {
+  name: 'PbConsent',
+
+  components: {
+    MFlex,
+    MButton,
+    MNotification,
+    PbAnimableLoader,
+  },
+
+  setup() {
+    const store = useStore();
+    const isMailConsentUpdating = computed(() => store.getters['consent/isMailConsentUpdating']);
+    const isMailConsentUpdated = computed(() => store.getters['consent/isMailConsentUpdated']);
+    const errorUpdateMailConsent = computed(() => store.getters['consent/getErrorUpdateMailConsent']);
+
+    const handleUpdateConsent = () => {
+      store.dispatch('sendEventToBus', {
+        code: 'UPDATE-MAIL-CONSENT',
+        payload: {},
+      });
+      store.dispatch('consent/updateMailConsent');
+    };
+
+    const handleRetry = () => {
+      store.dispatch('sendEventToBus', {
+        code: 'RETRY-UPDATE-MAIL-CONSENT',
+        payload: {},
+      });
+      store.dispatch('consent/updateMailConsent');
+    };
+
+    onMounted(() => {
+      store.dispatch('sendEventToBus', {
+        code: 'DISPLAY-MAIL-CONSENT',
+        payload: {},
+      });
+    });
+
+    return {
+      isMailConsentUpdating,
+      isMailConsentUpdated,
+      errorUpdateMailConsent,
+      handleUpdateConsent,
+      handleRetry,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pb-variables';
+
+.pb-consent {
+  &__label {
+    @include set-font-face('regular');
+    @include set-font-scale('06', 'm');
+
+    color: $color-grey-900;
+  }
+
+  &__actions {
+    width: 100%;
+
+    &--notification {
+      width: 100%;
+    }
+
+    &--button {
+      margin-top: $mu150;
+    }
+  }
+
+  &__loading {
+    margin: auto;
+    padding-top: $mu100;
+
+    &-loader {
+      height: $mu300;
+      width: $mu300;
+    }
+  }
+}
+</style>

package/src/components/landing/PbProjectsLanding.vue

@@ -352,38 +352,38 @@ export default {
         {
           title: 'Cuisine',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/projet-cuisine.png',
-          href: '/cuisine-lp.html',
+          href: '/produits/cuisine/',
         },
         {
           title: 'Salle de bains',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/projet-salle_de_bain.png',
-          href: '/salle-de-bain-lp.html',
+          href: '/produits/salle-de-bains/',
         },
         {
           title: 'Rangement',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/projet-rangement.png',
-          href: '/comment-choisir/mon-projet-rangement-en-5-etapes.html',
+          href: '/produits/rangement-dressing/',
         },
         {
           title: 'Aménagement extérieur',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/projet-amenagement_exterieur.png',
-          href: '/comment-choisir/mon-projet-terrasse-et-sol-exterieur-en-5-etapes.html',
+          href: '/produits/terrasse-jardin/',
         },
         {
           title: 'Menuiserie',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/projet-menuiserie.png',
-          href: '/comment-choisir/mon-projet-fenetres-en-6-etapes.html',
+          href: '/produits/menuiserie/',
         },
         {
           title: 'Combles',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/projet-materiaux.png',
-          href: '/comment-choisir/tout-savoir-sur-amenagement-des-combles.html',
+          href: '/produits/materiaux/',
         },
       ],
       toolsCards3: [
         {
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/artisans-partenaires.png',
-          href: '/cuisine-lp.html',
+          href: '/produits/cuisine/',
         },
       ],
       toolsCards4: [

package/src/components/projects/project-hub/PbProjectHub-Features-Consent.stories.mdx

@@ -0,0 +1,123 @@
+import { Story, Meta, Canvas } from '@storybook/addon-docs';
+import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
+import PbProjectHub from './PbProjectHub';
+import store from '../../../stores/store';
+import { rest } from 'msw';
+import { internalServerErrorResolver } from '../../../services/api/mocks/commonMock';
+import { getProjectByIdResolver } from '../../../services/api/mocks/projectsMock';
+import {
+  getMailConsentToUpdateResolver,
+  getMailConsentUpdatedResolver,
+  putConsentsUpdateResolver,
+  putConsentsUpdateWithDelayResolver,
+} from '../../../services/api/mocks/consentMock';
+
+<Meta
+  title="Project Booster/Components/Projects/PbProjectHub 🦠/Features/Consent (Mail)"
+  component={PbProjectHub}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+  decorators={[
+    nestedAppDecorator(store, [
+      {
+        name: 'ProjectHub',
+        path: '/',
+        component: PbProjectHub,
+        beforeEnter: async (to, from, next, store) => {
+          store.dispatch('projects/loadProject', '001');
+          store.dispatch('consent/checkMailConsent');
+          next();
+        },
+      },
+    ]),
+  ]}
+/>
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `<div style="margin: 0 auto;min-height: 100vh;width: 100%;">
+    <router-view v-slot="{ Component }">
+      <component :is="Component" :key="$route.fullPath" />
+    </router-view>
+  </div>`,
+});
+
+# 🦠 `PbProjectHub` - Component
+
+The `PbProjectHub` component to access your project.
+
+## Showcase with consent section to display
+
+<Canvas>
+  <Story
+    name="Showcase with consent section"
+    parameters={{
+      controls: { disable: true },
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/users/current/consents', getMailConsentToUpdateResolver),
+        rest.put('/api/users/current/consents', putConsentsUpdateResolver),
+      ],
+    }}
+    height="100vh"
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## Showcase with consent section to hide
+
+<Canvas>
+  <Story
+    name="Showcase with consent section hidden"
+    parameters={{
+      controls: { disable: true },
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/users/current/consents', getMailConsentUpdatedResolver),
+      ],
+    }}
+    height="100vh"
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## Showcase with failure on update consent
+
+<Canvas>
+  <Story
+    name="Showcase with update failure"
+    parameters={{
+      controls: { disable: true },
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/users/current/consents', getMailConsentToUpdateResolver),
+        rest.put('/api/users/current/consents', internalServerErrorResolver),
+      ],
+    }}
+    height="100vh"
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## Showcase with delay on update
+
+<Canvas>
+  <Story
+    name="Showcase with delay on update"
+    parameters={{
+      controls: { disable: true },
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/users/current/consents', getMailConsentToUpdateResolver),
+        rest.put('/api/users/current/consents', putConsentsUpdateWithDelayResolver),
+      ],
+    }}
+    height="100vh"
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/projects/project-hub/PbProjectHub.vue

@@ -492,6 +492,14 @@
                 </m-flex>
               </div>
             </m-flex>
+            <m-flex v-if="isMailConsentDisplayed" class="pb-project-hub__section" direction="column" full-width>
+              <div class="pb-project-hub__section-header">
+                <div class="pb-project-hub__section-title" ref="pbConsent">Souscription newsletter</div>
+              </div>
+              <div class="pb-project-hub__section-content">
+                <pb-consent />
+              </div>
+            </m-flex>
             <m-flex
               v-if="!readOnly"
               class="pb-project-hub__section pb-project-hub__section-separator"
@@ -794,6 +802,7 @@ import PbMOpinion from '../../mopinion/PbMOpinion';
 import PbProjectAttributes from '../project-attributes/PbProjectAttributes';
 import PbRestitution from '../../restitution/PbRestitution';
 import PbTasksPreview from '../../tasks/preview/PbTasksPreview';
+import PbConsent from '../../consent/PbConsent';
 import TASK_MODEL from './plannerTask.json';
 import ESTIMATES_PAYLOAD from './../../estimates/estimates-payload.json';
 import cloneDeep from 'lodash.clonedeep';
@@ -852,6 +861,7 @@ export default {
     PbProjectAttributes,
     PbRestitution,
     PbTasksPreview,
+    PbConsent,
   },
 
   props: {
@@ -1001,6 +1011,10 @@ export default {
       configurationsLoadError: 'getConfigurationsLoadError',
     }),
 
+    ...mapGetters('consent', {
+      isMailConsentDisplayed: 'isMailConsentDisplayed',
+    }),
+
     ...mapGetters('inhabitants', {
       isInhabitantDisplayed: 'isInhabitantDisplayed',
       currentInhabitantId: 'getCurrentInhabitantId',

package/src/services/api/consentApi.js

@@ -0,0 +1,33 @@
+import axios from 'axios';
+import he from 'he';
+
+export const clientApi = axios.create({
+  baseURL: '/project-booster/api',
+});
+
+if (global.window.config) {
+  clientApi.defaults.baseURL = global.window.config.VUE_APP_DEFAULT_BASE_URL;
+}
+
+export const updateConsentApiClient = (config) => {
+  if (config.apiKey) {
+    clientApi.defaults.headers.common['X-ClientApiKey'] = config.apiKey;
+  }
+  if (config.baseUrl) {
+    clientApi.defaults.baseURL = config.baseUrl;
+  }
+};
+
+export const getConsents = async () => {
+  const response = await clientApi.get('/users/current/consents');
+
+  return JSON.parse(
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
+      return `: "${he.escape($1)}"`;
+    }),
+  );
+};
+
+export const updateMailConsent = async (mailConsent) => {
+  return await clientApi.put('/users/current/consents', { mail: mailConsent });
+};

package/src/services/api/mocks/consentMock.js

@@ -0,0 +1,25 @@
+export const getMailConsentToUpdateResolver = (req, res, ctx) => {
+  return res.once(
+    ctx.status(200),
+    ctx.json({
+      mail: false,
+    }),
+  );
+};
+
+export const getMailConsentUpdatedResolver = (req, res, ctx) => {
+  return res.once(
+    ctx.status(200),
+    ctx.json({
+      mail: true,
+    }),
+  );
+};
+
+export const putConsentsUpdateResolver = (req, res, ctx) => {
+  return res.once(ctx.status(204));
+};
+
+export const putConsentsUpdateWithDelayResolver = (req, res, ctx) => {
+  return res.once(ctx.delay(1000), ctx.status(204));
+};

package/src/stores/modules/consentStore.js

@@ -0,0 +1,68 @@
+import { updateMailConsent, getConsents } from '../../services/api/consentApi';
+
+export default {
+  namespaced: true,
+
+  state: {
+    isMailConsentDisplayed: false,
+    isMailConsentUpdated: false,
+    isMailConsentUpdating: false,
+    errorUpdateMailConsent: null,
+  },
+
+  getters: {
+    isMailConsentDisplayed(state) {
+      return state.isMailConsentDisplayed;
+    },
+    isMailConsentUpdated(state) {
+      return state.isMailConsentUpdated;
+    },
+    getErrorUpdateMailConsent(state) {
+      return state.errorUpdateMailConsent;
+    },
+    isMailConsentUpdating(state) {
+      return state.isMailConsentUpdating;
+    },
+  },
+
+  mutations: {
+    setIsMailConsentDisplayed(state, isDisplayed) {
+      state.isMailConsentDisplayed = isDisplayed;
+    },
+    setIsMailConsentUpdated(state, isUpdated) {
+      state.isMailConsentUpdated = isUpdated;
+    },
+    setErrorUpdateMailConsent(state, error) {
+      state.errorUpdateMailConsent = error;
+    },
+    setIsMailConsentUpdating(state, isUpdating) {
+      state.isMailConsentUpdating = isUpdating;
+    },
+  },
+
+  actions: {
+    async checkMailConsent({ commit }) {
+      try {
+        const consents = await getConsents();
+        if (!consents.mail) {
+          commit('setIsMailConsentDisplayed', true);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    setMailConsentDisplayed({ commit }, isDisplayed) {
+      commit('setIsMailConsentDisplayed', isDisplayed);
+    },
+    async updateMailConsent({ commit }) {
+      commit('setIsMailConsentUpdating', true);
+      try {
+        await updateMailConsent(true);
+        commit('setIsMailConsentUpdated', true);
+      } catch (error) {
+        commit('setErrorUpdateMailConsent', error);
+      }
+      commit('setIsMailConsentUpdating', false);
+    },
+  },
+};

package/src/stores/store.js

@@ -8,6 +8,7 @@ import plannerStore from './modules/plannerStore';
 import projectsStore from './modules/projectsStore';
 import toolsStore from './modules/toolsStore';
 import mediaDocumentsStore from './modules/mediaDocumentsStore';
+import consentStore from './modules/consentStore';
 import cloneDeep from 'lodash.clonedeep';
 
 export default {
@@ -25,6 +26,7 @@ export default {
     media: cloneDeep(mediaDocumentsStore),
     documentsPlans: cloneDeep(mediaDocumentsStore),
     documentsPictures: cloneDeep(mediaDocumentsStore),
+    consent: consentStore,
   },
   mutations: {
     eventBusSendEvent(state, { code, payload }) {