feat: implement quick appointment booking from the landing page

MePhew-GonteQ-Industries · Mar 23, 2024 · d0ccb32 · d0ccb32
1 parent 0b4016c
commit d0ccb32
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 15 deletions.
diff --git a/src/components/Home/AvailableSlotTile.vue b/src/components/Home/AvailableSlotTile.vue
@@ -11,22 +11,24 @@
     <div class="buttons">
       <div
         class="button make-appointment"
-        @click="bookAppointment"
-        @keyup.enter="bookAppointment"
+        @click="makeAppointment"
       >
         <i class="ph-calendar-plus-light"></i>
         {{ t("home.availableSlotTile.book") }}
       </div>
 
-      <div class="button more-info">
+      <!-- TODO: Add appointment summary in a modal -->
+      <!-- <div class="button more-info">
         <i class="ph-info-light"></i>
         {{ t("home.availableSlotTile.info") }}
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
 
 <script>
+import { useRouter } from "vue-router";
+import { useStore } from "vuex";
 import axios from "axios";
 import { useI18n } from "vue-i18n";
 import { useMessage } from "naive-ui";
@@ -43,7 +45,7 @@ export default {
       type: String,
       required: true,
     },
-    firstSlotId: {
+    id: {
       type: String,
       required: true,
     },
@@ -53,25 +55,34 @@ export default {
     },
   },
 
-  setup() {
+  setup(props) {
     const { t } = useI18n({ useScope: "global" });
     const message = useMessage();
+    const router = useRouter();
+    const store = useStore();
+
+    const makeAppointment = async () => {
+      if (!store.getters.isLoggedIn) {
+        router.push({ name: "login" });
+        return;
+      }
 
-    const bookAppointment = async () => {
       try {
         await axios.post(`appointments`, {
-          // first_slot_id: selectedSlotId.value,
-          // service_id: selectedService.value.id,
+          first_slot_id: props.id,
+          service_id: props.serviceId,
         });
+
         message.success(t("snackBars.appointmentMade"));
+        router.push({ name: "appointmentsList" });
       } catch (error) {
         message.error(
           `${t("snackBars.appointmentsMadeError")} - ${createRequestErrorMessage(error)}`,
         );
       }
     };
 
-    return { t, bookAppointment };
+    return { t, makeAppointment };
   },
 };
 </script>

diff --git a/src/components/Home/AvailableSlotsList.vue b/src/components/Home/AvailableSlotsList.vue
@@ -12,13 +12,25 @@
       class="available-dates"
       v-if="!loading"
     >
+      <MessageBox
+        type="info"
+        class="appointment-cancellation-info"
+      >
+        <template #title> Uwaga! </template>
+        <template #subtitle>
+          {{ $t("userAppointmentsView.makeAnAppointment.adminCancel") }}
+        </template>
+      </MessageBox>
+
       <template
         v-for="slot in availableSlots"
         :key="slot.id"
       >
         <AvailableSlotTile
+          :id="slot.id"
           :day="slot.day"
           :time="slot.time"
+          :serviceId="selectedServiceId"
         />
       </template>
     </div>
@@ -28,6 +40,7 @@
 <script>
 import AvailableSlotTile from "@/components/Home/AvailableSlotTile.vue";
 import CustomLoader from "@/components/CustomLoader.vue";
+import MessageBox from "@/components/MessageBox.vue";
 import { computed, ref, watch } from "vue";
 import { useStore } from "vuex";
 import axios from "axios";
@@ -39,6 +52,7 @@ export default {
   components: {
     AvailableSlotTile,
     CustomLoader,
+    MessageBox,
   },
   props: {
     selectedServiceId: {
@@ -62,8 +76,8 @@ export default {
 
       const now = new Date();
 
-      availableSlotsData.value.forEach((service) => {
-        const date = new Date(`${service.start_time}`);
+      availableSlotsData.value.forEach((slot) => {
+        const date = new Date(`${slot.start_time}`);
 
         const day =
           date === now
@@ -73,6 +87,7 @@ export default {
               });
 
         slots.push({
+          id: slot.id,
           day: `${day[0].toUpperCase()}${day.slice(1)}`,
           time: date.toLocaleTimeString(locale, {
             hour: "2-digit",
@@ -127,6 +142,7 @@ export default {
     color: black;
     display: grid;
     row-gap: 2rem;
+    grid-template-rows: 1fr auto;
     grid-template-columns: repeat(3, 1fr);
     justify-items: center;
     padding: 3.5rem 10% 3.5rem 10%;
@@ -135,6 +151,10 @@ export default {
       display: flex;
       flex-direction: column;
     }
+
+    .appointment-cancellation-info {
+      grid-column: 1 / span 3;
+    }
   }
 }
 </style>

diff --git a/src/locales/pl.json b/src/locales/pl.json
@@ -269,7 +269,7 @@
       "noAppointments": "Wygląda na to że nie masz żadnych umówionych wizyt, kliknij przycisk powyżej aby to zrobić"
     },
     "makeAnAppointment": {
-      "monthForward": "Maksymalnie miesiąc do przodu",
+      "monthForward": "Maksymalnie z miesięcznym wyprzedzeniem",
       "adminCancel": "Umówioną wizytę może anulować tylko administrator",
       "noSlots": "Brak wolnych miejsc",
       "makeAnAppointment": "Umów wizytę",

diff --git a/src/views/UserAppointments/MakeAnAppointment.vue b/src/views/UserAppointments/MakeAnAppointment.vue
@@ -27,9 +27,9 @@
       <CustomModal v-model:open="openMakeAnAppointmentModal">
         <template #title>{{ selectedService.name }}</template>
         <div class="make-appointment-modal-wrapper">
-          <MessageBox type="warning">
+          <MessageBox type="info">
             <template #title>
-              {{ t("userAppointmentsView.makeAnAppointment.monthForward") }}!
+              {{ t("userAppointmentsView.makeAnAppointment.monthForward") }}
             </template>
             <template #subtitle>
               {{ t("userAppointmentsView.makeAnAppointment.adminCancel") }}!