Integrate review blocks into payment-method page

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

@@ -21,7 +21,7 @@
 
                     <hr class="my-0" />
 
-                    <reviewDropdown />
+                    <reviewDropdown ref="reviewDropdown" />
 
                     <hr class="my-0" />
 
@@ -143,6 +143,8 @@ export default {
             "payment-method"
         );
 
+        const reviewDropdownPromise = reviewDropdown.methods.loadInitialData();
+
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
@@ -156,6 +158,10 @@ export default {
                 resultKey: "rainDefense",
                 promise: rainDefensePromise,
             },
+            {
+                resultKey: "reviewDropdownData",
+                promise: reviewDropdownPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -243,6 +249,8 @@ export default {
             );
             vm.updateFooterButtonText(vm.customCtaCopy);
 
+            vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData);
+
             if (revalidatePromoResponse) {
                 const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(
                     revalidatePromoResponse,

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

@@ -31,11 +31,7 @@ export default {
     data() {
         return {};
     },
-    methods: {
-        linkClicked() {
-            this.$emit("edit-clicked");
-        },
-    },
+    methods: {},
     components: {
         textBlock,
         textLink,

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

@@ -1,8 +1,52 @@
 <template>
-    <h2>review component added</h2>
+    <div>
+        <textBlock
+            customText="Appointment Details"
+            typeStyle="label bold"
+            justifyText="justify-text-left"
+            margin="mt-0"
+            class="dark-header" />
+
+        <div class="px-4">
+            <vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
+
+            <hr class="my-0" />
+
+            <damageReview
+                cmsWidgetName="DamageReviewWidget"
+                damageLocationsWidgetName="DamageLocationsWidget"
+                :damage="damageInfo" />
+
+            <hr class="my-0" />
+
+            <servicePackageReview
+                ref="servicePackageReview"
+                servicePackageOptionsCmsName="ServicePackageTitle"
+                defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
+                vapsItemsCmsName="VapsItemDescriptions"
+                :damage="damageInfo"
+                :lineItems="lineItems" />
+
+            <hr class="my-0" />
+
+            <serviceLocationReview
+                cmsWidgetName="ServiceLocationTitleWidget"
+                :serviceLocation="serviceLocationInfo" />
+
+            <hr class="my-0" />
+
+            <scheduleReview cmsWidgetName="ScheduleWidget" :appointmentType="appointmentType" />
+
+            <hr class="my-0" />
+
+            <customerReview cmsWidgetName="CustomerReviewWidget" :customer="customerInfo" />
+        </div>
+    </div>
 </template>
 
 <script>
+import textBlock from "@/digital-components/text-block/text-block";
+
 import customerReview from "@/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review";
 import damageReview from "@/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review";
 import scheduleReview from "@/layouts/payment-method/review-dropdown/review-sections/schedule-review/schedule-review";
@@ -10,13 +54,53 @@ import serviceLocationReview from "@/layouts/payment-method/review-dropdown/revi
 import servicePackageReview from "@/layouts/payment-method/review-dropdown/review-sections/service-package-review/service-package-review";
 import vehicleReview from "@/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review";
 
+import { settleAllPromises } from "@/helpers/layout-helper";
+
 export default {
     name: "review-dropdown",
     props: {},
     data() {
         return {};
     },
+    methods: {
+        async loadInitialData() {
+            const servicePackageInitialDataPromise = servicePackageReview.methods.loadInitialData();
+
+            const promiseResultMap = [
+                {
+                    resultKey: "servicePackageData",
+                    promise: servicePackageInitialDataPromise,
+                },
+            ];
+
+            return settleAllPromises(promiseResultMap);
+        },
+        initializeComponent(apiResponses) {
+            this.$refs.servicePackageReview.initializeComponent(apiResponses.servicePackageData);
+        },
+    },
+    computed: {
+        vehicleInfo() {
+            return this.$store.getters.vehicle;
+        },
+        damageInfo() {
+            return this.$store.getters.damage;
+        },
+        lineItems() {
+            return this.$store.getters.lineItems;
+        },
+        serviceLocationInfo() {
+            return this.$store.getters.order.serviceLocation;
+        },
+        appointmentType() {
+            return this.$store.getters.order.serviceLocation.appointmentType;
+        },
+        customerInfo() {
+            return this.$store.getters.order.customer;
+        },
+    },
     components: {
+        textBlock,
         customerReview,
         damageReview,
         scheduleReview,
@@ -26,3 +110,10 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.dark-header {
+    color: $black;
+    line-height: 1.6;
+}
+</style>