project-booster-vue 10.30.1 → 10.30.2

package/package.json

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

package/src/components/appointment/PbAppointmentNotification.vue

@@ -0,0 +1,66 @@
+<script lang="ts">
+export default {
+  name: 'PbAppointmentNotification',
+  props: {
+    title: { type: String, default: null },
+    informationText: { type: String, default: null },
+    updateAppointmentLink: { type: String, default: null },
+  },
+};
+</script>
+
+<template>
+  <div class="appointment-notification">
+    <span class="appointment-notification__title">
+      {{ title }}
+    </span>
+    <span class="appointment-notification__information">
+      {{ informationText }}
+    </span>
+    <a
+      v-if="!!updateAppointmentLink"
+      target="_blank"
+      :href="updateAppointmentLink"
+      class="appointment-notification__update-button"
+    >
+      Modifier ou annuler mon rendez-vous
+    </a>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.appointment-notification {
+  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  padding: 1rem 2rem;
+  box-sizing: border-box;
+
+  border-radius: 4px;
+  background-color: #daeff7;
+  border: 1px solid #0b96cc;
+}
+
+.appointment-notification__title {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.appointment-notification__information {
+  font-weight: 400;
+  font-size: 0.875rem;
+}
+
+.appointment-notification__update-button {
+  width: fit-content;
+  padding: 0.75rem 1rem;
+
+  color: white;
+  border-radius: 4px;
+  text-align: center;
+  text-decoration: none;
+  background-color: #333;
+}
+</style>

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

@@ -68,12 +68,11 @@
                 align-items="center"
                 full-width
               >
-                <m-notification
+                <pb-appointment-notification
                   class="pb-project-hub__appointment-notification"
                   :title="appointmentNotificationTitle"
-                  :type="appointmentNotificationType"
-                  :text="appointmentNotificationText"
-                  is-big
+                  :informationText="appointmentNotificationText"
+                  :updateAppointmentLink="appointmentNotificationLink"
                 />
               </m-flex>
             </m-flex>
@@ -669,7 +668,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick } from 'vue';
+import { defineComponent } from 'vue';
 import { format } from 'date-fns';
 import Velocity from 'velocity-animate';
 import { mapGetters } from 'vuex';
@@ -691,7 +690,6 @@ import PbConfigurationsSection from '../../configurations/section/PbConfiguratio
 import PbEmptyState from '../../empty-state/PbEmptyState.vue';
 import PbEstimatesList from '../../estimates/PbEstimatesList.vue';
 import PbLoader from '../../loader/PbLoader.vue';
-import PbMOpinion from '../../mopinion/PbMOpinion.vue';
 import PbProjectAttributes from '../project-attributes/PbProjectAttributes.vue';
 import PbRestitution from '../../restitution/PbRestitution.vue';
 import PbConsent from '../../consent/PbConsent.vue';
@@ -701,6 +699,7 @@ import { Configuration } from '@/types/pb/Configuration';
 import { Estimate } from '@/types/pb/Estimate';
 import PbMediaUpload from '@/components/media/upload/PbMediaUpload.vue';
 import DOCUMENT_UPLOAD_PAYLOAD from '@/components/media/upload/document-upload-payload.json';
+import PbAppointmentNotification from '@/components/appointment/PbAppointmentNotification.vue';
 
 const BACK_ICON =
   'https://customer-project.adeo.cloud/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -760,10 +759,10 @@ export default defineComponent({
     PbEmptyState,
     PbEstimatesList,
     PbLoader,
-    PbMOpinion,
     PbProjectAttributes,
     PbRestitution,
     PbConsent,
+    PbAppointmentNotification,
   },
 
   props: {
@@ -1013,7 +1012,20 @@ export default defineComponent({
         ? ''
         : this.appointment.isPast
         ? 'Date du rendez-vous passée.'
-        : 'Si vous le souhaitez vous pourrez annuler le rendez-vous dans le mail qui vous a été envoyé.<br/>N’oubliez pas !';
+        : 'Ajoutez des plans aux mesures de votre pièce et des photos pour bien préparer le rendez-vous.<br/>Vous souhaitez modifier ou annuler votre rendez-vous ?';
+    },
+
+    appointmentNotificationLink() {
+      if (!this.appointment.appointmentUpdateUrl.String) {
+        return null;
+      }
+
+      const host = window.location.host;
+      const appointmentUpdateUrl = decodeURIComponent(this.appointment.appointmentUpdateUrl.String);
+
+      return host.includes('localhost') || host.includes('uat') || host.includes('prep')
+        ? `https://qa.timify.com/cancel-booking/${appointmentUpdateUrl}`
+        : `https://timify.com/cancel-booking/${appointmentUpdateUrl}`;
     },
   },