From 89f8b15d1eb422ac1fdcbe4528d8402421316c10 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 21 Jul 2025 10:17:09 -0400
Subject: [PATCH] CASH-1042 WIP

---
 src/constants/progress-bar-mapper.js          |   6 +-
 src/experiment-components/donation-block.vue  |   6 +-
 .../questions-page-layout.vue                 |   6 +-
 src/layouts/confirmation/confirmation.vue     | 146 +++++++++---------
 .../customer-details/customer-details.vue     |   1 -
 src/layouts/mobile-details/mobile-details.vue |   9 +-
 6 files changed, 89 insertions(+), 85 deletions(-)

diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js
index f177b6cf7..0342a15a9 100644
--- a/src/constants/progress-bar-mapper.js
+++ b/src/constants/progress-bar-mapper.js
@@ -49,7 +49,7 @@ export const pageProgressMapper = {
         step: 1,
     },
     quote: {
-        percent: 39, //Must be 39
+        percent: 39, //The first Step 2 must be 39 so the animated bar lines up with the dot
         step: 2,
     },
     "insurance-company": {
@@ -61,7 +61,7 @@ export const pageProgressMapper = {
         step: 2,
     },
     schedule: {
-        percent: 70.5, //Must be 70.5
+        percent: 70.5, //The first Step 3 must be 70.5 so the animated bar lines up with the dot
         step: 3,
     },
     "mobile-details": {
@@ -73,7 +73,7 @@ export const pageProgressMapper = {
         step: 3,
     },
     "payment-method": {
-        percent: 92, //Must be 92
+        percent: 92, //The first Step 4 must be 92 so the animated bar lines up with the dot
         step: 3,
     },
     payment: {
diff --git a/src/experiment-components/donation-block.vue b/src/experiment-components/donation-block.vue
index 1101127d0..f93c96520 100644
--- a/src/experiment-components/donation-block.vue
+++ b/src/experiment-components/donation-block.vue
@@ -317,7 +317,7 @@ export default {
         }
     }
     .custom-secondary {
-        border-radius: .5rem;
+        border-radius: 0.5rem;
         color: $blue;
         border: 1px solid $blue;
         &:hover,
@@ -326,7 +326,9 @@ export default {
             color: $blue;
             background: transparent;
             border: 1px solid $blue;
-            box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px $blue;
+            box-shadow:
+                0 0 0 3px #ffffff,
+                0 0 0 5.5px $blue;
         }
     }
 }
diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index a97809b80..560fe87c6 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -19,12 +19,10 @@
                             v-if="showThisQuestionChain(questionsDatum, i)"
                             :answerKey="questionsDatum.answerKey"
                             :validationRules="validationRules" />
-                            <!-- Save your progress slot -->
-                            <slot></slot>
+                        <!-- Save your progress slot -->
+                        <slot></slot>
                     </div>
 
-                    
-
                     <navbar
                         ref="navbar"
                         cmsWidgetName="FunnelFooterWidget"
diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
index a95245034..e8d80cd31 100644
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@@ -5,80 +5,80 @@
         <div class="container page-container-grouped-styles">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                            <div class="header-container">
-                                <img :src="ScheduleConfirmationImage" />
-                                <span v-html="ScheduleConfirmationText"></span>
-                            </div>
-
-                            <div class="emailtext mb-5" v-html="ConfirmationEmailText"></div>
-                            
-                            <div class="main">
-                                <div></div>
-
-                                <div class="scheduleText">
-                                    <p>{{ ScheduleDateFormatted }}</p>
-                                    <p>{{ ScheduleTimeFormatted }}</p>
-                                </div>
-
-                                <addToCalendar
-                                    mobileWidgetName="AddToCalendar_Mobile"
-                                    inShopWidgetName="AddToCalendar_InShop"
-                                    dropOffWidgetName="AddToCalendar_DropOff"
-                                    overnightDropOffWidgetName="AddToCalendar_OvernightDropOff"
-                                    allDayDropOffWidgetName="AddToCalendar_AllDayDropOff"
-                                    sameDayDropOffWidgetName="AddToCalendar_SameDayDropOff"
-                                    :serviceLocationFullAddress="ServiceLocationFullAddress"
-                                    :providerFullAddress="ProviderFullAddress"
-                                    :appointmentType="AppointmentType"
-                                    :scheduleDate="ScheduleDate"
-                                    :scheduleStartTime="ScheduleStartTime"
-                                    :scheduleEndTime="ScheduleEndTime" />
-
-                                <div class="appointment-text" v-html="AppointmentWordingText"></div>
-
-                                <textBlock
-                                    :customText="AppointmentDuration"
-                                    justifyText="center"
-                                    typeStyle="medium"
-                                    class="duration-text-block" />
-                            </div>
-
-                            <div class="mt-3" v-if="shouldDisplayFosterLove">
-                                <donationBlock
-                                    cmsWidgetName="DonationWidget"
-                                    v-model="donationAmount"
-                                    :donationValues="donationValues"
-                                    :showDonationSuccess="showDonationSuccess"
-                                    :showDonationError="showDonationError"
-                                    @DonationAddedEvent="addDonationToOrder"
-                                    ref="donationBlock" />
-                            </div>
-
-                            <hr class="mt-5 mb-0" />
-
-                            <cart
-                                v-if="ShowCart"
-                                :damage="damageInfo"
-                                :availableVaps="vaps"
-                                :allowItemRemoval="false"
-                                v-model="lineItemsWithoutDonation"
-                                :donationCartItem="donationLineItem"
-                                :showAsPaid="isPia"
-                                servicePackageOptionsCmsName="ServicePackageTitle"
-                                :isInsurance="isInsurance"
-                                :insuranceDeductible="currentDeductible"
-                                :insuranceCompanyName="insuranceCompanyName"
-                                :showInsuranceCoverageAs="showInsuranceCoverageAs"
-                                :shouldHideRecalibration="shouldHideRecalibration"
-                                :isExpandedOnLoad="false"
-                                :isItac="isItac"
-                                :isNoComp="isNoComp"
-                                :isMSRFeeApplicable="isMSRFeeApplicable" />
-
-                            <hr class="mt-4 mb-5" />
-                        </div>
+                    <div class="header-container">
+                        <img :src="ScheduleConfirmationImage" />
+                        <span v-html="ScheduleConfirmationText"></span>
                     </div>
+
+                    <div class="emailtext mb-5" v-html="ConfirmationEmailText"></div>
+
+                    <div class="main">
+                        <div></div>
+
+                        <div class="scheduleText">
+                            <p>{{ ScheduleDateFormatted }}</p>
+                            <p>{{ ScheduleTimeFormatted }}</p>
+                        </div>
+
+                        <addToCalendar
+                            mobileWidgetName="AddToCalendar_Mobile"
+                            inShopWidgetName="AddToCalendar_InShop"
+                            dropOffWidgetName="AddToCalendar_DropOff"
+                            overnightDropOffWidgetName="AddToCalendar_OvernightDropOff"
+                            allDayDropOffWidgetName="AddToCalendar_AllDayDropOff"
+                            sameDayDropOffWidgetName="AddToCalendar_SameDayDropOff"
+                            :serviceLocationFullAddress="ServiceLocationFullAddress"
+                            :providerFullAddress="ProviderFullAddress"
+                            :appointmentType="AppointmentType"
+                            :scheduleDate="ScheduleDate"
+                            :scheduleStartTime="ScheduleStartTime"
+                            :scheduleEndTime="ScheduleEndTime" />
+
+                        <div class="appointment-text" v-html="AppointmentWordingText"></div>
+
+                        <textBlock
+                            :customText="AppointmentDuration"
+                            justifyText="center"
+                            typeStyle="medium"
+                            class="duration-text-block" />
+                    </div>
+
+                    <div class="mt-3" v-if="shouldDisplayFosterLove">
+                        <donationBlock
+                            cmsWidgetName="DonationWidget"
+                            v-model="donationAmount"
+                            :donationValues="donationValues"
+                            :showDonationSuccess="showDonationSuccess"
+                            :showDonationError="showDonationError"
+                            @DonationAddedEvent="addDonationToOrder"
+                            ref="donationBlock" />
+                    </div>
+
+                    <hr class="mt-5 mb-0" />
+
+                    <cart
+                        v-if="ShowCart"
+                        :damage="damageInfo"
+                        :availableVaps="vaps"
+                        :allowItemRemoval="false"
+                        v-model="lineItemsWithoutDonation"
+                        :donationCartItem="donationLineItem"
+                        :showAsPaid="isPia"
+                        servicePackageOptionsCmsName="ServicePackageTitle"
+                        :isInsurance="isInsurance"
+                        :insuranceDeductible="currentDeductible"
+                        :insuranceCompanyName="insuranceCompanyName"
+                        :showInsuranceCoverageAs="showInsuranceCoverageAs"
+                        :shouldHideRecalibration="shouldHideRecalibration"
+                        :isExpandedOnLoad="false"
+                        :isItac="isItac"
+                        :isNoComp="isNoComp"
+                        :isMSRFeeApplicable="isMSRFeeApplicable" />
+
+                    <hr class="mt-4 mb-5" />
                 </div>
+            </div>
+        </div>
     </Form>
 </template>
 <script>
@@ -610,7 +610,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    padding: 1.5rem 0 .5rem 0;
+    padding: 1.5rem 0 0.5rem 0;
 
     p {
         display: inline-block;
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 245097004..1d50df814 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -215,4 +215,3 @@ export default {
     },
 };
 </script>
-
diff --git a/src/layouts/mobile-details/mobile-details.vue b/src/layouts/mobile-details/mobile-details.vue
index 093c9e4db..a7e72adb2 100644
--- a/src/layouts/mobile-details/mobile-details.vue
+++ b/src/layouts/mobile-details/mobile-details.vue
@@ -6,6 +6,9 @@
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+                    <hr class="my-3" />
+                    <reviewBlock :content="AppointmentTimeAndDate" @edit-clicked="editClicked" class="d-flex" />
+                    <hr class="my-3" />
                     <div class="mobile-location-questions">
                         <div class="address-questions-container">
                             <mobileAddressQuestions
@@ -47,6 +50,7 @@ import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form } from "vee-validate";
 import mobileAddressQuestions from "@/layouts/mobile-details/mobile-address-questions/mobile-address-questions";
 import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
+import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
 import store from "@/store";
 //Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -146,8 +150,8 @@ export default {
         },
     },
     computed: {
-        headerText() {
-            return this.getCmsContent("MobileLocationModalWidget", "HeaderText");
+        AppointmentTimeAndDate() {
+            return this.getCmsContent("AppointmentTimeAndDate", "BodyText");
         },
     },
     components: {
@@ -159,6 +163,7 @@ export default {
         funnelSubHeader,
         Form,
         loadingModal,
+        reviewBlock,
     },
 };
 </script>