WIP add appointment details snapshot.

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,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;

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