From b5763fa24ec6cc576dd70b2b460dc3ced91f325c Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 4 Dec 2024 16:41:36 -0500
Subject: [PATCH 1/4] WIP add appointment details snapshot.

---
 .../review-block/review-block.vue             |  3 ---
 .../review-dropdown/review-dropdown.vue       | 26 +++++++++++++++++--
 .../service-location-review.vue               |  6 ++---
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/layouts/payment-method/review-dropdown/review-block/review-block.vue b/src/layouts/payment-method/review-dropdown/review-block/review-block.vue
index 6afd393d5..04fc99456 100644
--- a/src/layouts/payment-method/review-dropdown/review-block/review-block.vue
+++ b/src/layouts/payment-method/review-dropdown/review-block/review-block.vue
@@ -42,7 +42,4 @@ export default {
 :deep(.review-block-content > ul) {
     margin-bottom: 0rem;
 }
-.review-block-content {
-    width: 90%;
-}
 </style>
diff --git a/src/layouts/payment-method/review-dropdown/review-dropdown.vue b/src/layouts/payment-method/review-dropdown/review-dropdown.vue
index 321599820..5ece94744 100644
--- a/src/layouts/payment-method/review-dropdown/review-dropdown.vue
+++ b/src/layouts/payment-method/review-dropdown/review-dropdown.vue
@@ -11,6 +11,12 @@
                 <span class="label">Appointment details</span>
             </a>
         </div>
+        <div class="appt-details-snapshot">
+            <serviceLocationReview
+                :serviceLocation="serviceLocationInfo" />
+            <scheduleReview
+                cmsWidgetName="ApptDetailsSnapshotWidget" />
+        </div>
         <div class="review-table px-4">
             <vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
 
@@ -34,6 +40,7 @@
             <hr class="my-0" />
 
             <serviceLocationReview
+                class="service-location"
                 cmsWidgetName="ServiceLocationTitleWidget"
                 :serviceLocation="serviceLocationInfo" />
 
@@ -120,6 +127,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.appt-details-snapshot {
+    white-space: nowrap;
+    margin: .75rem 0 1rem 0;
+    div {
+        padding: 0;
+        text-transform: capitalize;
+        white-space: nowrap;
+    }
+}
+
 .dark-header {
     color: $black;
     line-height: 1.6;
@@ -130,10 +147,15 @@ export default {
     transition: all 350ms ease-in;
     overflow: hidden;
     visibility: hidden;
+
+    :deep(.service-location) {
+        .review-block-content {
+            text-transform: capitalize;
+        }
+    }
 }
 
 .review-toggle {
-    margin-bottom: 1rem;
 
     &.expanded {
         margin-bottom: 0;
@@ -156,7 +178,7 @@ export default {
     &.expanded:after {
         transform: rotate(180deg);
     }
-    &.expanded + .review-table {
+    &.expanded ~ .review-table {
         max-height: 800px;
         transition: all 150ms ease-in;
         overflow: hidden;
diff --git a/src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue b/src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue
index 55e384080..ce8badbfb 100644
--- a/src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue
+++ b/src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue
@@ -26,9 +26,9 @@ export default {
     computed: {
         displayContent() {
             return [
-                `${this.addressInfo.address}${this.addressInfo.address2 ? ", " : ""}${
-                    this.addressInfo.address2
-                }, ${this.addressInfo.city}, ${this.addressInfo.state} ${this.addressInfo.zipCode}`,
+                `${this.addressInfo.address.toLowerCase()}${this.addressInfo.address2 ? ", " : ""}${
+                    this.addressInfo.address2.toLowerCase()
+                }, ${this.addressInfo.city.toLowerCase()}, ${this.addressInfo.state} ${this.addressInfo.zipCode}`,
             ];
         },
         addressInfo() {

From 4aace86c8077ef4255132b390cc644a5aea41d00 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 12 Dec 2024 16:08:53 -0500
Subject: [PATCH 2/4] WIP appt details snapshot updates.

---
 src/layouts/payment-method/payment-method.vue | 64 +++++++++++++++++--
 .../review-dropdown/review-dropdown.vue       | 18 +++---
 .../service-location-review.vue               |  4 +-
 src/store/index.js                            |  4 +-
 4 files changed, 73 insertions(+), 17 deletions(-)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 8cd8c13a3..bd698d0c6 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -13,7 +13,9 @@
 
                     <hr class="my-0" />
 
-                    <reviewDropdown ref="reviewDropdown" />
+                    <reviewDropdown
+                        ref="reviewDropdown"
+                        :apptWordingText="AppointmentWordingText" />
 
                     <hr class="my-0" />
 
@@ -47,15 +49,16 @@
                             v-bind:isDismissible="false" />
                     </div>
 
-                    <div v-if="isRecalibrationOnOrder && shouldHideRecalibration" class="questions-about-service my-5">
+                    <div
+                        v-if="isRecalibrationOnOrder && shouldHideRecalibration"
+                        class="questions-about-service my-5">
                         <textBlock
                             cmsWidgetName="QuestionsAboutYourServiceWidget"
                             justifyText="left"
                             class="service-questions" />
                         <textBlock cmsWidgetName="CallOrTextWidget" justifyText="left" />
                         <hr class="my-5" />
-                        <div
-                            class="d-flex flex-row checkbox-group">
+                        <div class="d-flex flex-row checkbox-group">
                             <checkboxQuestion
                                 cmsWidgetName="RecalConfirmWidget"
                                 class="mb-5"
@@ -611,6 +614,59 @@ export default {
         },
     },
     computed: {
+        AppointmentType() {
+            return this.hasSubmittedOrder()
+                ? this.getSubmittedOrder()?.serviceLocation?.appointmentType
+                : this.$store.getters.order.serviceLocation?.appointmentType;
+        },
+        ServiceLocationFullAddressText() {
+            return `${this.ServiceLocationAddress}${this.ServiceLocationAddress2 ? ", " + this.ServiceLocationAddress2 : ""}, ${this.ServiceLocationCity}, ${this.ServiceLocationState} ${this.ServiceLocationZipCode}`;
+        },
+        ServiceLocationFullAddress() {
+            if (this.AppointmentType === "Mobile") {
+                return {
+                    streetAddress: this.$store.getters.order.serviceLocation?.address,
+                    address2: this.$store.getters.order.serviceLocation?.address2,
+                    city: this.$store.getters.order.serviceLocation?.city,
+                    state: this.$store.getters.order.serviceLocation?.state,
+                    zipCode: this.$store.getters.order.serviceLocation?.zipCode,
+                }
+            } else {
+                return this.$store.getters.order.serviceLocation?.provider?.address;
+            }
+        },
+        ServiceLocationAddress() {
+            return this.hasSubmittedOrder()
+                ? this.getSubmittedOrder()?.serviceLocation?.address
+                : this.ServiceLocationFullAddress.streetAddress;
+        },
+        ServiceLocationAddress2() {
+            return this.hasSubmittedOrder()
+                ? this.getSubmittedOrder()?.serviceLocation?.address
+                : this.ServiceLocationFullAddress.address2;
+        },
+        ServiceLocationCity() {
+            return this.hasSubmittedOrder()
+                ? this.getSubmittedOrder()?.serviceLocation?.city
+                : this.ServiceLocationFullAddress.city;
+        },
+        ServiceLocationState() {
+            return this.hasSubmittedOrder()
+                ? this.getSubmittedOrder()?.serviceLocation?.state
+                : this.ServiceLocationFullAddress.state;
+        },
+        ServiceLocationZipCode() {
+            return this.hasSubmittedOrder()
+                ? this.getSubmittedOrder()?.serviceLocation?.zipCode
+                : this.ServiceLocationFullAddress.zipCode;
+        },
+        AppointmentWordingText() {
+            return this.getCmsContent("ApptDetailsSnapshotWidget", "BodyText")
+                ?.replaceAll(
+                    "{custom:ADDRESS}",
+                    this.ServiceLocationFullAddressText
+                );
+        },
         isRecalibrationOnOrder() {
             const order = baseMixin.methods.hasSubmittedOrder()
                 ? baseMixin.methods.getSubmittedOrder()
diff --git a/src/layouts/payment-method/review-dropdown/review-dropdown.vue b/src/layouts/payment-method/review-dropdown/review-dropdown.vue
index 5ece94744..59ffc6d92 100644
--- a/src/layouts/payment-method/review-dropdown/review-dropdown.vue
+++ b/src/layouts/payment-method/review-dropdown/review-dropdown.vue
@@ -11,12 +11,9 @@
                 <span class="label">Appointment details</span>
             </a>
         </div>
-        <div class="appt-details-snapshot">
-            <serviceLocationReview
-                :serviceLocation="serviceLocationInfo" />
-            <scheduleReview
-                cmsWidgetName="ApptDetailsSnapshotWidget" />
-        </div>
+        
+        <div v-html="apptWordingText"></div>
+
         <div class="review-table px-4">
             <vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
 
@@ -66,10 +63,14 @@ import servicePackageReview from "@/layouts/payment-method/review-dropdown/revie
 import vehicleReview from "@/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review";
 
 import { settleAllPromises } from "@/helpers/layout-helper";
+import apptDetailsSnapshot from "@/layouts/payment-method/review-dropdown/appt-details-snapshot/appt-details-snapshot.vue";
 
 export default {
     name: "review-dropdown",
-    props: {},
+    props: {
+        apptWordingText: String,
+        serviceLocationFullAddress: String,
+    },
     data() {
         return {
             isExpanded: false,
@@ -129,7 +130,7 @@ export default {
 <style lang="scss" scoped>
 .appt-details-snapshot {
     white-space: nowrap;
-    margin: .75rem 0 1rem 0;
+    margin: 0.75rem 0 1rem 0;
     div {
         padding: 0;
         text-transform: capitalize;
@@ -156,7 +157,6 @@ export default {
 }
 
 .review-toggle {
-
     &.expanded {
         margin-bottom: 0;
     }
diff --git a/src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue b/src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue
index ce8badbfb..e4fa9ffa3 100644
--- a/src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue
+++ b/src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue
@@ -26,9 +26,7 @@ export default {
     computed: {
         displayContent() {
             return [
-                `${this.addressInfo.address.toLowerCase()}${this.addressInfo.address2 ? ", " : ""}${
-                    this.addressInfo.address2.toLowerCase()
-                }, ${this.addressInfo.city.toLowerCase()}, ${this.addressInfo.state} ${this.addressInfo.zipCode}`,
+                `${this.addressInfo.address.toLowerCase()}${this.addressInfo.address2 ? ", " : ""}${this.addressInfo.address2.toLowerCase()}, ${this.addressInfo.city.toLowerCase()}, ${this.addressInfo.state} ${this.addressInfo.zipCode}`,
             ];
         },
         addressInfo() {
diff --git a/src/store/index.js b/src/store/index.js
index 77e745bfe..fa39ad5d1 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -689,7 +689,9 @@ export const mutations = {
             !sessionInformation.order.payment.isInsurance &&
             !sessionInformation.order.serviceLocation.provider?.providerNumber
         ) {
-            console.log("------------- updateStateWithOrderInformation reset isInsurance -----------------");
+            console.log(
+                "------------- updateStateWithOrderInformation reset isInsurance -----------------"
+            );
             console.log(new Date() + " sessionInformation: " + JSON.stringify(sessionInformation));
             state.order.payment.isInsurance = null;
         } else {

From 213fa434ccaaf638a551a75a89dee59d1dd280a2 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 12 Dec 2024 17:07:03 -0500
Subject: [PATCH 3/4] WIP format updates.

---
 src/layouts/payment-method/payment-method.vue      | 14 +++++++++++++-
 .../review-dropdown/review-dropdown.vue            | 11 -----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index bd698d0c6..477f64798 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -14,6 +14,7 @@
                     <hr class="my-0" />
 
                     <reviewDropdown
+                        class="appt-details-snapshot"
                         ref="reviewDropdown"
                         :apptWordingText="AppointmentWordingText" />
 
@@ -620,7 +621,7 @@ export default {
                 : this.$store.getters.order.serviceLocation?.appointmentType;
         },
         ServiceLocationFullAddressText() {
-            return `${this.ServiceLocationAddress}${this.ServiceLocationAddress2 ? ", " + this.ServiceLocationAddress2 : ""}, ${this.ServiceLocationCity}, ${this.ServiceLocationState} ${this.ServiceLocationZipCode}`;
+            return `${this.ServiceLocationAddress.toLowerCase()}${this.ServiceLocationAddress2 ? ", " + this.ServiceLocationAddress2 : ""}, ${this.ServiceLocationCity.toLowerCase()}, ${this.ServiceLocationState} ${this.ServiceLocationZipCode}`;
         },
         ServiceLocationFullAddress() {
             if (this.AppointmentType === "Mobile") {
@@ -853,6 +854,17 @@ export default {
 <style></style>
 
 <style lang="scss" scoped>
+.appt-details-snapshot {
+    :deep(p) {
+        margin: 0.75rem 0 1rem 0;
+        font-size: .875rem;
+        padding: 0;
+        text-transform: capitalize;
+        span {
+            text-transform: lowercase;
+        }
+    }
+}
 .checkbox-group {
     align-items: start;
     > * {
diff --git a/src/layouts/payment-method/review-dropdown/review-dropdown.vue b/src/layouts/payment-method/review-dropdown/review-dropdown.vue
index 59ffc6d92..ac1301feb 100644
--- a/src/layouts/payment-method/review-dropdown/review-dropdown.vue
+++ b/src/layouts/payment-method/review-dropdown/review-dropdown.vue
@@ -63,7 +63,6 @@ import servicePackageReview from "@/layouts/payment-method/review-dropdown/revie
 import vehicleReview from "@/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review";
 
 import { settleAllPromises } from "@/helpers/layout-helper";
-import apptDetailsSnapshot from "@/layouts/payment-method/review-dropdown/appt-details-snapshot/appt-details-snapshot.vue";
 
 export default {
     name: "review-dropdown",
@@ -128,16 +127,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.appt-details-snapshot {
-    white-space: nowrap;
-    margin: 0.75rem 0 1rem 0;
-    div {
-        padding: 0;
-        text-transform: capitalize;
-        white-space: nowrap;
-    }
-}
-
 .dark-header {
     color: $black;
     line-height: 1.6;

From a68a10e9bcd302c355c63d7c36ed28a23bf1f522 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 13 Dec 2024 14:57:05 -0500
Subject: [PATCH 4/4] Update unit tests.

---
 .../payment-method/payment-method.spec.js      | 11 +++++++++++
 .../service-location-review.spec.js            | 18 +++++++++---------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js
index 65c3b9a11..65191ce6b 100644
--- a/src/layouts/payment-method/payment-method.spec.js
+++ b/src/layouts/payment-method/payment-method.spec.js
@@ -45,6 +45,7 @@ describe("payment-method.vue", () => {
 });
 
 function setupMocks() {
+
     store.getters = {
         damage: {},
         lineItems: {
@@ -71,6 +72,13 @@ function setupMocks() {
                 isNoComp: false,
                 isItac: false,
             },
+            serviceLocation: {
+                appointmentType: "Mobile",
+                address: "123 Test Ave",
+                city: "Anytown",
+                state: "OH",
+                zipCode: "00000",
+            },
         },
         policy: {
             currentDeductible: 123,
@@ -106,6 +114,9 @@ function setupMocks() {
 
                 return "false";
             }),
+            getCmsContent: jest.fn().mockImplementation(() => {
+                return "test text";
+            }),
         },
     };
 
diff --git a/src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.spec.js b/src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.spec.js
index 7b1429b19..757bd2824 100644
--- a/src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.spec.js
+++ b/src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.spec.js
@@ -24,7 +24,7 @@ describe("Service Location Review Block", () => {
 
         // Assert
         expect(wrapper.vm.displayContent).toEqual([
-            "Mobile Address 1, Mobile Address 2, Mobile City, MO 11111",
+            "mobile address 1, mobile address 2, mobile city, MO 11111",
         ]);
     });
 
@@ -43,7 +43,7 @@ describe("Service Location Review Block", () => {
 
         // Assert
         expect(wrapper.vm.displayContent).toEqual([
-            "Service Location Address, Service Location City, SL 22222",
+            "service location address, service location city, SL 22222",
         ]);
     });
 
@@ -62,7 +62,7 @@ describe("Service Location Review Block", () => {
 
         // Assert
         expect(wrapper.vm.displayContent).toEqual([
-            "Service Location Address, Service Location City, SL 22222",
+            "service location address, service location city, SL 22222",
         ]);
     });
 
@@ -80,7 +80,7 @@ describe("Service Location Review Block", () => {
         await wrapper.vm.$nextTick();
 
         // Assert
-        expect(wrapper.vm.displayContent).toEqual(["Mobile Address 1, Mobile City, MO 11111"]);
+        expect(wrapper.vm.displayContent).toEqual(["mobile address 1, mobile city, MO 11111"]);
     });
 });
 
@@ -88,9 +88,9 @@ function generateDefaultProps() {
     return {
         cmsWidgetName: "ServiceLocationTitleWidget",
         serviceLocation: {
-            address: "Mobile Address 1",
-            address2: "Mobile Address 2",
-            city: "Mobile City",
+            address: "mobile address 1",
+            address2: "mobile address 2",
+            city: "mobile city",
             state: "MO",
             zipCode: "11111",
             zipCodeCtu: "",
@@ -99,8 +99,8 @@ function generateDefaultProps() {
             provider: {
                 providerNumber: "",
                 address: {
-                    streetAddress: "Service Location Address",
-                    city: "Service Location City",
+                    streetAddress: "service location address",
+                    city: "service location city",
                     state: "SL",
                     zipCode: "22222",
                     zipCodeCtu: "",