Merge pull request #1916 from Safelite/feature/CSR-1903

CSR-1903 - Display Service Duration on Confirmation

src/helpers/duration-length-helper.js

@@ -0,0 +1,15 @@
+export function getDisplayTextForDurationLength(durationMinimum, durationMaximum) {
+    const isLongAppointment = durationMaximum >= 120;
+    const isDurationRange = durationMinimum !== durationMaximum;
+
+    const adjustedMinimum = isLongAppointment ? durationMinimum / 60 : durationMinimum;
+    const adjustedMaximum = isLongAppointment ? durationMaximum / 60 : durationMaximum;
+
+    const durationText = isDurationRange
+        ? `${adjustedMinimum} - ${adjustedMaximum}`
+        : adjustedMinimum;
+
+    const unitText = isLongAppointment ? "hours" : "minutes";
+
+    return `${durationText} ${unitText}`;
+}

src/helpers/duration-length-helper.spec.js

@@ -0,0 +1,24 @@
+import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
+
+describe("damage-length-helper.js", () => {
+    it("Should return the expected duration for the appointment in hours", () => {
+        // Arrange / Act
+        const durationMinimum = 60;
+        const durationMaximum = 120;
+
+        const duration = getDisplayTextForDurationLength(durationMinimum, durationMaximum);
+
+        // Assert
+        expect(duration).toEqual("1 - 2 hours");
+    });
+    it("Should return the expected duration for the appointment in minutes", () => {
+        // Arrange / Act
+        const durationMinimum = 30;
+        const durationMaximum = 45;
+
+        const duration = getDisplayTextForDurationLength(durationMinimum, durationMaximum);
+
+        // Assert
+        expect(duration).toEqual("30 - 45 minutes");
+    });
+});

src/layouts/confirmation/confirmation.spec.js

@@ -25,6 +25,8 @@ beforeEach(() => {
                 startTime: "09:00",
                 endTime: "10:00",
                 routeCode: "000",
+                jobMaxMinutes: "120",
+                jobMinMinutes: "60",
             },
             lineItems: {
                 glassParts: [
@@ -360,6 +362,41 @@ describe("computed properties...", () => {
         // Assert
         expect(testValue).toEqual("test1,<br/> test, AZ 12345");
     });
+    test("Appointment Duration should return text in expected format.", () => {
+        //Arrange
+
+        const { wrapper } = setupMocks({});
+
+        // Act
+        const testValue = wrapper.vm.AppointmentDuration;
+
+        // Assert
+        expect(testValue).toEqual("Duration: 1 - 2 hours");
+    });
+    test("Appointment Duration should return with correct duration values in expected format for hours.", () => {
+        //Arrange
+        store.getters.submittedOrder.schedule.jobMaxMinutes = 120;
+        store.getters.submittedOrder.schedule.jobMinMinutes = 60;
+        const { wrapper } = setupMocks({});
+
+        // Act
+        const testValue = wrapper.vm.AppointmentDuration;
+
+        // Assert
+        expect(testValue).toEqual("Duration: 1 - 2 hours");
+    });
+    test("Appointment Duration should return with correct duration values in expected format for minutes.", () => {
+        //Arrange
+        store.getters.submittedOrder.schedule.jobMaxMinutes = 45;
+        store.getters.submittedOrder.schedule.jobMinMinutes = 30;
+        const { wrapper } = setupMocks({});
+
+        // Act
+        const testValue = wrapper.vm.AppointmentDuration;
+
+        // Assert
+        expect(testValue).toEqual("Duration: 30 - 45 minutes");
+    });
 });
 
 function setupMocks({ customMountOptions }) {

src/layouts/confirmation/confirmation.vue

@@ -42,6 +42,12 @@
                                     :scheduleEndTime="ScheduleEndTime" />
 
                                 <div class="appoinmenttext" v-html="AppointmentWordingText"></div>
+
+                                <textBlock
+                                    :customText="AppointmentDuration"
+                                    justifyText="center"
+                                    typeStyle="medium"
+                                    class="duration-text-block" />
                             </div>
 
                             <hr />
@@ -82,6 +88,7 @@ import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar";
 import cart from "@/fmg-components/cart/cart";
+import textBlock from "@/digital-components/text-block/text-block";
 
 //Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -97,6 +104,7 @@ import { deepClone } from "@/helpers/object-helper";
 import { Form } from "vee-validate";
 import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-helper";
 import { coverageStatus } from "@/constants/insurance";
+import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
 
 export default {
     name: "confirmation",
@@ -315,6 +323,11 @@ export default {
         isPia() {
             return store.getters.submittedOrder?.payment.isPia;
         },
+        AppointmentDuration() {
+            const durationMaximum = store.getters.submittedOrder?.schedule?.jobMaxMinutes;
+            const durationMinimum = store.getters.submittedOrder?.schedule?.jobMinMinutes;
+            return "Duration: " + getDisplayTextForDurationLength(durationMinimum, durationMaximum);
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -365,6 +378,7 @@ export default {
         vehicleBanner,
         addToCalendar,
         cart,
+        textBlock,
     },
 };
 </script>

src/layouts/schedule/helpers/schedule-helper.js

@@ -60,19 +60,3 @@ export function militaryToTwelveHourTime(timeString) {
 
     return `${hours}:${minutes} ${meridianNotation}`;
 }
-
-export function getDisplayTextForDurationLength(durationMinimum, durationMaximum) {
-    const isLongAppointment = durationMaximum >= 120;
-    const isDurationRange = durationMinimum !== durationMaximum;
-
-    const adjustedMinimum = isLongAppointment ? durationMinimum / 60 : durationMinimum;
-    const adjustedMaximum = isLongAppointment ? durationMaximum / 60 : durationMaximum;
-
-    const durationText = isDurationRange
-        ? `${adjustedMinimum} - ${adjustedMaximum}`
-        : adjustedMinimum;
-
-    const unitText = isLongAppointment ? "hours" : "minutes";
-
-    return `${durationText} ${unitText}`;
-}

src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue

@@ -51,8 +51,8 @@ import { deepClone } from "@/helpers/object-helper";
 import {
     convertDateStringToDate,
     militaryToTwelveHourTime,
-    getDisplayTextForDurationLength,
 } from "@/layouts/schedule/helpers/schedule-helper";
+import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
 
 // Validation - TODO: Move this somewhere more global?
 import { defineRule, useField } from "vee-validate";

src/store/index.js

@@ -24,8 +24,8 @@ import { partTypeStrings } from "@/constants/part-type-strings";
 import {
     convertDateStringToDate,
     militaryToTwelveHourTime,
-    getDisplayTextForDurationLength,
 } from "@/layouts/schedule/helpers/schedule-helper";
+import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
 import { paymentMethods } from "@/constants/payment-method-constants";
 import {
     getPromoCodeWithoutBundleIdentifier,