WIP appt details snapshot updates.

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
+                        <div class="d-flex flex-row checkbox-group">
-                            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()

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
+        <div v-html="apptWordingText"></div>
-                :serviceLocation="serviceLocationInfo" />
+
-            <scheduleReview
-                cmsWidgetName="ApptDetailsSnapshotWidget" />
-        </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;
     }

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.address.toLowerCase()}${this.addressInfo.address2 ? ", " : ""}${this.addressInfo.address2.toLowerCase()}, ${this.addressInfo.city.toLowerCase()}, ${this.addressInfo.state} ${this.addressInfo.zipCode}`,
-                    this.addressInfo.address2.toLowerCase()
-                }, ${this.addressInfo.city.toLowerCase()}, ${this.addressInfo.state} ${this.addressInfo.zipCode}`,
             ];
         },
         addressInfo() {

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 {