Merge pull request #2174 from Safelite/CSR-2427-add-appt-details

Csr 2427 add appt details

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";
+            }),
         },
     };
 

src/layouts/payment-method/payment-method.vue

@@ -13,7 +13,10 @@
 
                     <hr class="my-0" />
 
-                    <reviewDropdown ref="reviewDropdown" />
+                    <reviewDropdown
+                        class="appt-details-snapshot"
+                        ref="reviewDropdown"
+                        :apptWordingText="AppointmentWordingText" />
 
                     <hr class="my-0" />
 
@@ -612,6 +615,59 @@ export default {
         },
     },
     computed: {
+        AppointmentType() {
+            return this.hasSubmittedOrder()
+                ? this.getSubmittedOrder()?.serviceLocation?.appointmentType
+                : this.$store.getters.order.serviceLocation?.appointmentType;
+        },
+        ServiceLocationFullAddressText() {
+            return `${this.ServiceLocationAddress.toLowerCase()}${this.ServiceLocationAddress2 ? ", " + this.ServiceLocationAddress2 : ""}, ${this.ServiceLocationCity.toLowerCase()}, ${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()
@@ -798,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;
     > * {

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>

src/layouts/payment-method/review-dropdown/review-dropdown.vue

@@ -11,6 +11,9 @@
                 <span class="label">Appointment details</span>
             </a>
         </div>
+        
+        <div v-html="apptWordingText"></div>
+
         <div class="review-table px-4">
             <vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
 
@@ -34,6 +37,7 @@
             <hr class="my-0" />
 
             <serviceLocationReview
+                class="service-location"
                 cmsWidgetName="ServiceLocationTitleWidget"
                 :serviceLocation="serviceLocationInfo" />
 
@@ -62,7 +66,10 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 
 export default {
     name: "review-dropdown",
-    props: {},
+    props: {
+        apptWordingText: String,
+        serviceLocationFullAddress: String,
+    },
     data() {
         return {
             isExpanded: false,
@@ -130,11 +137,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 +167,7 @@ export default {
     &.expanded:after {
         transform: rotate(180deg);
     }
-    &.expanded + .review-table {
+    &.expanded ~ .review-table {
         max-height: 800px;
         transition: all 150ms ease-in;
         overflow: hidden;

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: "",

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}${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() {