project-booster-vue 9.48.0 → 9.49.1

package/package.json

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

package/src/components/landing/PbProjectsLanding.vue

@@ -451,7 +451,7 @@ export default defineComponent({
         {
           title: 'Découvrir les offres de financement',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/aide-financement.png',
-          href: '/v3/p/services/financement-l1308219381',
+          href: '/services/service-client/financement.html',
         },
       ],
     };

package/src/components/rework/products/MPbProducts.stories.mdx

@@ -0,0 +1,48 @@
+import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
+import { ArgsTable, Canvas, Meta, Source, Story } from '@storybook/addon-docs';
+import cloneDeep from 'lodash.clonedeep';
+import MPbProducts from './MPbProducts';
+import productsStore from '../../../stores/modules/productsStore';
+import metaDataStore from '../../../stores/modules/metaDataStore';
+import DEFAULT_PAYLOAD from './default-payload.json';
+
+<Meta
+  title="Project Booster/Rework/Products/MPbProducts 🦠"
+  component={MPbProducts}
+  decorators={[
+    nestedAppDecorator(
+      {
+        modules: {
+          products: productsStore,
+          metaData: metaDataStore,
+        },
+        mutations: {},
+        actions: {},
+      },
+      [],
+    ),
+  ]}
+  parameters={{ layout: 'fullscreen' }}
+/>
+
+# `MPbProducts` - Component
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MPbProducts },
+  setup() {
+    return { args };
+  },
+  template: `<m-pb-products
+    :payload="args.payload"
+    :show-back-button="args.showBackButton"
+    :completed-event-name="args.completedEventName"
+    @step-completed="args.onStepCompleted"
+  />`,
+});
+
+<Canvas>
+  <Story name="101 Sandbox" args={{ payload: DEFAULT_PAYLOAD }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/rework/products/MPbProducts.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="pb-products">
+    <div class="pb-products__back-button-container">
+      <m-link
+        icon="ArrowArrowLeft48"
+        :class="{
+          'pb-products__back-button': true,
+        }"
+        @click.once="emit('go-back')"
+      >
+        {{ payload.viewModel.backLabel }}
+      </m-link>
+    </div>
+
+    <div class="pb-products__body row-flex column" v-if="product">
+      <div class="pb-products__title">
+        {{ payload.viewModel.label }}
+      </div>
+
+      <div class="pb-products__body__item" v-if="product">
+        <div class="pb-products__body__item__thumbnail">
+          <img :src="product.photo" alt="" />
+        </div>
+        <div class="pb-products__body__item__title">{{ product.designation }}</div>
+      </div>
+
+      <div class="pb-products__container--button">
+        <m-button
+          :theme="action.bordered ? 'bordered' : 'solid'"
+          class="pb-products__container--button__ok"
+          :type="action.type"
+          :label="action.label"
+          icon-position="right"
+          size="m"
+          :href="action.href"
+          v-for="action in payload.callToActions"
+          :key="action.label"
+          @click="callAction(action.action)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from 'vuex';
+import { MButton, MLink } from '@mozaic-ds/vue-3';
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { defineProps, PropType, onMounted, ref } from 'vue';
+import { PayloadAction } from '../types/genericPayload';
+
+const emit = defineEmits(['go-back', 'step-completed']);
+
+const store = useStore();
+const metadata = store.getters['metaData/metaData'];
+const refProduct = store.getters['products/getRefProduct'];
+const product = ref({});
+
+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 options provided at runtime to customize component behaviour
+   */
+  runtimeOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * Indicates whether the back button should be displayed
+   */
+  showBackButton: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * Name for the event to send when the step is questio is answered
+   */
+  completedEventName: {
+    type: String,
+    default: 'step-completed',
+  },
+  /**
+   * The previous answers to inject
+   */
+  answers: {
+    type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+    default: () => new Map<string, ScenarioStepAnswer[]>(),
+  },
+});
+
+/**
+ * onMounted load product and load this
+ */
+onMounted(() => {
+  store.dispatch('products/loadProduct', {
+    payload: props.payload.viewModel.defaultProduct,
+    storeId: metadata && metadata.storeId ? metadata.storeId : '',
+  });
+  product.value = store.getters['products/getCurrentProduct'];
+});
+
+/**
+ * Send action to completed step
+ * @param action
+ */
+const callAction = (action: PayloadAction) => {
+  if (action.type === 'STEP') {
+    if (action.code === '__BACK__') {
+      emit('go-back');
+    } else {
+      let productToSend = null;
+
+      if (refProduct) {
+        productToSend = product;
+      }
+
+      emit('step-completed', {
+        answers: [
+          {
+            product: productToSend,
+          },
+        ],
+        nextStep: action,
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pb-variables';
+@import 'settings-tools/all-settings';
+@import 'typography/_t.bodys';
+@import '../styles/global.scss';
+
+$small-responsive-breakpoint: 's-large';
+$responsive-breakpoint: 'm';
+
+.pb-products {
+  @include set-font-face('regular');
+
+  flex-grow: 1;
+  margin: 0 auto;
+  padding: 0 $mu100;
+  width: calc(100% - #{$mu100} - #{$mu100});
+
+  @include set-from-screen($responsive-breakpoint) {
+    width: calc(100% - #{$mu200} - #{$mu200});
+  }
+
+  &__back-button-container {
+    align-self: flex-start;
+  }
+  &__back-button {
+    opacity: 1;
+    padding: $mu100 0 $mu100 $mu025;
+    transition: opacity 0.15s 0.5s;
+    &--hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  &__title {
+    @include set-font-face('semi-bold');
+    @include set-font-scale('08', 'm');
+
+    color: $color-grey-999;
+    max-width: 100%;
+    padding: 0;
+    text-align: left;
+    margin-top: $mu150;
+
+    &::after {
+      display: block;
+      width: 72px;
+      height: 4px;
+      content: '';
+      margin: $mu100 0 $mu150 0;
+      background: $color-primary-01-500;
+    }
+
+    @include set-from-screen($responsive-breakpoint) {
+      @include set-font-scale('08', 'm');
+
+      width: auto;
+    }
+  }
+
+  &__body {
+    margin: auto;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 591px;
+    }
+
+    &__item {
+      &__thumbnail {
+        margin-bottom: $mu150;
+
+        img {
+          width: 230px;
+        }
+      }
+
+      &__title {
+        @include set-font-face('semi-bold');
+        @include set-font-scale('07', 's');
+
+        color: $color-grey-800;
+      }
+    }
+  }
+
+  &__container--button {
+    margin-top: $mu100;
+
+    &__ok {
+      margin-bottom: $mu100;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,21 @@
+{
+  "viewModel": {
+    "backLabel": "Question précédente",
+    "label": "Estimer vos aides pour votre projet",
+    "defaultProduct": {
+      "designation": "Installation d'une chaudière à",
+      "photo": "https://storage.googleapis.com/project-booster-media/energyrenovation/default_heat_pump.jpg"
+    }
+  },
+  "callToActions": [
+    {
+      "type": "button",
+      "label": "Commencer la simulation",
+      "action": {
+        "type": "STEP",
+        "code": "__END__"
+      },
+      "bordered": false
+    }
+  ]
+}

package/src/components/rework/styles/global.scss

@@ -0,0 +1,15 @@
+.row-flex {
+    display: flex;
+
+    &.column {
+        flex-direction: column;
+    }
+
+    &.justify-center {
+        justify-content: center;
+    }
+
+    &.align-center {
+        align-items: center;
+    }
+}

package/src/components/rework/types/genericPayload.ts

@@ -0,0 +1,8 @@
+export interface PayloadAction {
+  type: string;
+  code: string;
+  component?: string;
+  payload?: {
+    link: string;
+  };
+}

package/src/components/scenario/PbScenario.vue

@@ -107,6 +107,7 @@ import PbCitySearch from '../question/city-search/PbCitySearch.vue';
 import PbWarningMessage from '../warning-message/PbWarningMessage.vue';
 import PbProducts from '../products/PbProducts.vue';
 import PbTrezor from '../trezor/PbTrezor.vue';
+import MPbProductsVue from '../rework/products/MPbProducts.vue';
 import PbIncrementalAmountInput from '../question/incremental-amount-input/PbIncrementalAmountInput.vue';
 import { areConditionsValid } from '../../services/scenarioConditionals';
 import {
@@ -148,6 +149,7 @@ export default defineComponent({
     PbIncrementalAmountInput,
     PbProducts,
     PbTrezor,
+    MPbProductsVue,
   },
 
   props: {