Merge pull request #2823 from Safelite/feature/bugfix/CASH-1450

Feature/bugfix/cash 1450

src/constants/damage-locations-selected.js

@@ -16,6 +16,8 @@ const damageLocationsSelected = {
     PASSENGERSIDE: "PassengerSide",
     STATIONARY: "Stationary",
     SLIDER: "Slider",
+    DOOR: "Door",
+    GLASS: "Glass",
 };
 
 export { damageLocationsSelected };

src/helpers/damage-helper.js

@@ -82,3 +82,56 @@ export async function isGlassAvailableForCarId(carId, pageNameToLog) {
 
     return true;
 }
+
+export function getSideDoorGlassString(glassLocation, glassName) {
+    let glassNameString;
+    switch (glassName) {
+        case glassLocations.BACK:
+            glassNameString = glassLocations.REAR + " " + glassLocations.DOOR; // "Back Door"
+            break;
+        case glassLocations.FRONT:
+            glassNameString = glassName + " " + glassLocations.DOOR; // "Front Door"
+            break;
+        case glassLocations.VENT:
+        case glassLocations.QUARTER:
+            glassNameString = glassName;
+            break;
+    }
+    return glassLocation + " " + glassName + " " + glassLocations.GLASS;
+}
+
+export function getDamageInfoWordingText(damageInfo) {
+    const glassTextArray = [];
+
+    damageInfo.glassToReplace.forEach((item) => {
+        let string = "";
+        if (item.glassLocation === glassLocations.WINDSHIELD) {
+            string = item.glassLocation;
+        }
+        if (item.glassLocation === glassLocations.REAR) {
+            string = glassLocations.BACK + " " + glassLocations.GLASS;
+        }
+        if (item.glassLocation === glassLocations.DRIVER) {
+            string = getSideDoorGlassString(item.glassLocation, item.glassName);
+            // ONLY INCLUDE "DOOR" IF IT'S REAR or FRONT (vent or quarter should NOT)
+        }
+        if (item.glassLocation === glassLocations.PASSENGER) {
+            string = getSideDoorGlassString(item.glassLocation, item.glassName);
+        }
+        glassTextArray.push(string);
+    });
+
+    if (glassTextArray.length === 1) {
+        return glassTextArray[0];
+    }
+    let damageInfoWordingText = glassTextArray.join(", "); // string
+    let lastCommaIndex = damageInfoWordingText.lastIndexOf(", ");
+    if (lastCommaIndex > -1) {
+        return (
+            damageInfoWordingText.slice(0, lastCommaIndex) +
+            " and " +
+            damageInfoWordingText.slice(lastCommaIndex + 2, damageInfoWordingText.length)
+        );
+    }
+    return "";
+}

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

@@ -223,7 +223,8 @@ export default {
             "payment-method"
         );
 
-        const reviewDropdownPromise = reviewDropdown.methods.loadInitialData();
+        // const reviewDropdownPromise = reviewDropdown.methods.loadInitialData();
+        // (removed temporarily for Heritage parity effort)
 
         const promiseResultMap = [
             {
@@ -238,10 +239,11 @@ export default {
                 resultKey: "rainDefense",
                 promise: rainDefensePromise,
             },
-            {
+            // {
-                resultKey: "reviewDropdownData",
+            //     resultKey: "reviewDropdownData",
-                promise: reviewDropdownPromise,
+            //     promise: reviewDropdownPromise,
-            },
+            // },
+            // (removed temporarily for Heritage parity effort)
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -346,7 +348,8 @@ export default {
             );
             vm.updateFooterButtonText(vm.customCtaCopy);
 
-            vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData);
+            // vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData);
+            // (removed temporarily for Heritage parity effort)
 
             if (revalidatePromoResponse) {
                 const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(
@@ -904,6 +907,9 @@ export default {
             text-transform: lowercase;
         }
     }
+    :deep(.review-table p) {
+        margin: 0.25rem 0 0 0;
+    }
 }
 .checkbox-group {
     align-items: start;

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

@@ -15,30 +15,27 @@
         <div v-html="apptWordingText" v-show="!isExpanded"></div>
 
         <div class="review-table px-4">
-            <serviceLocationReview
+            <appointmentReview
                 class="service-location"
-                cmsWidgetName="ServiceLocationTitleWidget"
+                cmsWidgetName="AppointmentWidget"
-                :serviceLocation="serviceLocationInfo" />
+                :apptWordingText="apptWordingText" />
 
             <hr class="my-0" />
 
-            <scheduleReview cmsWidgetName="ScheduleWidget" :appointmentType="appointmentType" />
+            <parityDamageReview
-
-            <hr class="my-0" />
-
-            <vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
-
-            <hr class="my-0" />
-
-            <damageReview
                 cmsWidgetName="DamageReviewWidget"
                 damageLocationsWidgetName="DamageLocationsWidget"
-                :damage="damageInfo" />
+                :damage="damageInfo"
+                :vehicle="vehicleInfo" />
 
             <hr class="my-0" />
 
             <customerReview cmsWidgetName="CustomerReviewWidget" :customer="customerInfo" />
 
+            <hr class="my-0" />
+
+            <optInReview cmsWidgetName="OptInReviewWidget" :customer="customerInfo" />
+
             <!-- the following was the order prior to Heritage parity
             <vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
 
@@ -82,8 +79,11 @@
 import textBlock from "@/digital-components/text-block/text-block";
 
 import customerReview from "@/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review";
+import optInReview from "@/layouts/payment-method/review-dropdown/review-sections/opt-in-review/opt-in-review";
 import damageReview from "@/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review";
+import parityDamageReview from "@/layouts/payment-method/review-dropdown/review-sections/parity-damage-review/parity-damage-review";
 import scheduleReview from "@/layouts/payment-method/review-dropdown/review-sections/schedule-review/schedule-review";
+import appointmentReview from "@/layouts/payment-method/review-dropdown/review-sections/appointment-review/appointment-review";
 import serviceLocationReview from "@/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review";
 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";
@@ -95,6 +95,7 @@ export default {
     props: {
         apptWordingText: String,
         serviceLocationFullAddress: String,
+        damageInfoHeader: String,
     },
     data() {
         return {
@@ -102,21 +103,22 @@ export default {
         };
     },
     methods: {
-        async loadInitialData() {
+        // the following was used prior to Heritage parity
-            const servicePackageInitialDataPromise = servicePackageReview.methods.loadInitialData();
+        // async loadInitialData() {
+        //     const servicePackageInitialDataPromise = servicePackageReview.methods.loadInitialData();
 
-            const promiseResultMap = [
+        //     const promiseResultMap = [
-                {
+        //         {
-                    resultKey: "servicePackageData",
+        //             resultKey: "servicePackageData",
-                    promise: servicePackageInitialDataPromise,
+        //             promise: servicePackageInitialDataPromise,
-                },
+        //         },
-            ];
+        //     ];
 
-            return settleAllPromises(promiseResultMap);
+        //     return settleAllPromises(promiseResultMap);
-        },
+        // },
-        initializeComponent(apiResponses) {
+        // initializeComponent(apiResponses) {
-            this.$refs.servicePackageReview.initializeComponent(apiResponses.servicePackageData);
+        //     this.$refs.servicePackageReview.initializeComponent(apiResponses.servicePackageData);
-        },
+        // },
         toggleIsExpanded() {
             this.isExpanded = !this.isExpanded;
         },
@@ -143,10 +145,9 @@ export default {
     },
     components: {
         customerReview,
-        damageReview,
+        optInReview,
-        scheduleReview,
+        appointmentReview,
-        vehicleReview,
+        parityDamageReview,
-        serviceLocationReview,
     },
 };
 </script>
@@ -163,6 +164,10 @@ export default {
     overflow: hidden;
     visibility: hidden;
 
+    & > :first-child {
+        margin-top: -0.75rem;
+    }
+
     :deep(.service-location) {
         .review-block-content {
             text-transform: capitalize;

src/layouts/payment-method/review-dropdown/review-sections/appointment-review/appointment-review.spec.js

@@ -0,0 +1,103 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+import appointmentReview from "@/layouts/payment-method/review-dropdown/review-sections/appointment-review/appointment-review";
+
+const testConstants = {
+    cms: {
+        header: {
+            text: "Appointment Details",
+        },
+    },
+    appointment: {
+        apptWordingText:
+            "September 10, 2025 arriving between 9:00 AM — 11:00 AM at 123 Main St, anytown, OH 43215",
+    },
+    displayContent: {
+        apptWordingText:
+            "September 10, 2025 arriving between 9:00 AM — 11:00 AM at 123 Main St, anytown, OH 43215",
+    },
+};
+
+let cmsContent;
+
+describe("Appointment Review Block", () => {
+    beforeEach(() => {
+        cmsContent = {
+            AppointmentWidget: {
+                HeaderText: testConstants.cms.header.text,
+            },
+        };
+    });
+
+    test("Should display header text from cms", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.headerText).toEqual(testConstants.cms.header.text);
+    });
+
+    test("Should render correct display content", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.displayContent).toEqual([testConstants.displayContent.apptWordingText]);
+    });
+
+    test("Should emit edit-clicked when editClicked method is called", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        wrapper.vm.editClicked();
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.emitted("edit-clicked")).toBeTruthy();
+    });
+});
+
+function generateDefaultProps() {
+    return {
+        cmsWidgetName: "AppointmentWidget",
+        apptWordingText: testConstants.appointment.apptWordingText,
+    };
+}
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+                return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
+            }),
+        },
+    };
+
+    mountOptions.global.mixins = [mockMixin];
+
+    const wrapper = shallowMount(appointmentReview, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}

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

@@ -0,0 +1,38 @@
+<template>
+    <reviewBlock
+        :customHeaderText="headerText"
+        :content="displayContent"
+        @edit-clicked="editClicked" />
+</template>
+
+<script>
+import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+
+export default {
+    name: "appointment-review",
+    props: {
+        cmsWidgetName: String,
+        apptWordingText: String,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        editClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {
+        displayContent() {
+            return [this.apptWordingText];
+        },
+        headerText() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+    },
+    components: {
+        reviewBlock,
+    },
+};
+</script>

src/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review.spec.js

@@ -13,17 +13,17 @@ const testConstants = {
         },
     },
     customer: {
-        firstName: "First",
+        // firstName: "First",
-        lastName: "Last",
+        // lastName: "Last",
         phoneNumber: "111-111-1111",
         emailAddress: "builddigitaltest@safelite.com",
-        isSmsOptIn: false,
+        // isSmsOptIn: false,
     },
     displayContent: {
-        fullName: "First Last",
+        // fullName: "First Last",
         phoneNumber: "111-111-1111",
         emailAddress: "builddigitaltest@safelite.com",
-        smsOptIn: "Sms",
+        // smsOptIn: "Sms",
     },
 };
 
@@ -54,20 +54,20 @@ describe("Customer Review Block", () => {
         expect(wrapper.vm.header).toEqual(testConstants.cms.header.text);
     });
 
-    test("Should display sms text from cms", async () => {
+    // test("Should display sms text from cms", async () => {
-        // Arrange
+    //     // Arrange
-        let props = generateDefaultProps();
+    //     let props = generateDefaultProps();
 
-        const { wrapper } = setupMocks({
+    //     const { wrapper } = setupMocks({
-            propsData: props,
+    //         propsData: props,
-        });
+    //     });
 
-        // Act
+    //     // Act
-        await wrapper.vm.$nextTick();
+    //     await wrapper.vm.$nextTick();
 
-        // Assert
+    //     // Assert
-        expect(wrapper.vm.smsOptIn).toEqual(testConstants.cms.sms.text);
+    //     expect(wrapper.vm.smsOptIn).toEqual(testConstants.cms.sms.text);
-    });
+    // });
 
     test("Should render correct display content", async () => {
         // Arrange
@@ -84,7 +84,7 @@ describe("Customer Review Block", () => {
         expect(wrapper.vm.displayContent).toEqual([
             testConstants.displayContent.emailAddress,
             testConstants.displayContent.phoneNumber,
-            testConstants.displayContent.smsOptIn,
+            // testConstants.displayContent.smsOptIn,
         ]);
     });
 });
@@ -93,11 +93,11 @@ function generateDefaultProps() {
     return {
         cmsWidgetName: "CustomerWidget",
         customer: {
-            firstName: testConstants.customer.firstName,
+            // firstName: testConstants.customer.firstName,
-            lastName: testConstants.customer.lastName,
+            // lastName: testConstants.customer.lastName,
             phoneNumber: testConstants.customer.phoneNumber,
             emailAddress: testConstants.customer.emailAddress,
-            isSmsOptIn: testConstants.customer.isSmsOptIn,
+            // isSmsOptIn: testConstants.customer.isSmsOptIn,
         },
     };
 }

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

@@ -21,7 +21,7 @@ export default {
     },
     computed: {
         displayContent() {
-            return [this.email, this.phoneNumber, this.smsOptIn];
+            return [this.email, this.phoneNumber];
             // return [this.fullName, this.email, this.phoneNumber, this.smsOptIn]; // prior to Heritage parity
         },
         header() {

src/layouts/payment-method/review-dropdown/review-sections/opt-in-review/opt-in-review.spec.js

@@ -0,0 +1,141 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+import optInReview from "@/layouts/payment-method/review-dropdown/review-sections/opt-in-review/opt-in-review";
+
+const testConstants = {
+    cms: {
+        header: {
+            text: "Text Message Updates",
+        },
+        bodyText: {
+            text: "We'll send appointment updates to {custom:SMSNUMBER}",
+        },
+        processedBodyText: {
+            text: "We'll send appointment updates to 111-111-1111",
+        },
+    },
+    customer: {
+        phoneNumber: "111-111-1111",
+    },
+    displayContent: {
+        processedBodyText: "We'll send appointment updates to 111-111-1111",
+    },
+};
+
+let cmsContent;
+
+describe("Opt-In Review Block", () => {
+    beforeEach(() => {
+        cmsContent = {
+            OptInWidget: {
+                HeaderText: testConstants.cms.header.text,
+                BodyText: testConstants.cms.bodyText.text,
+            },
+        };
+    });
+
+    test("Should display header text from cms", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.header).toEqual(testConstants.cms.header.text);
+    });
+
+    test("Should render correct display content with phone number replacement", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.displayContent).toEqual([testConstants.displayContent.processedBodyText]);
+    });
+
+    test("Should return customer phone number", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.phoneNumber).toEqual(testConstants.customer.phoneNumber);
+    });
+
+    test("Should emit edit-clicked when editClicked method is called", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        wrapper.vm.editClicked();
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.emitted("edit-clicked")).toBeTruthy();
+    });
+
+    test("Should handle missing customer gracefully", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+        props.customer = null;
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.phoneNumber).toBeUndefined();
+    });
+});
+
+function generateDefaultProps() {
+    return {
+        cmsWidgetName: "OptInWidget",
+        customer: {
+            phoneNumber: testConstants.customer.phoneNumber,
+        },
+    };
+}
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+                return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
+            }),
+        },
+    };
+
+    mountOptions.global.mixins = [mockMixin];
+
+    const wrapper = shallowMount(optInReview, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}

src/layouts/payment-method/review-dropdown/review-sections/opt-in-review/opt-in-review.vue

@@ -0,0 +1,42 @@
+<template>
+    <reviewBlock :customHeaderText="header" :content="displayContent" @edit-clicked="editClicked" />
+</template>
+
+<script>
+import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
+
+export default {
+    name: "opt-in-review",
+    props: {
+        cmsWidgetName: String,
+        customer: Object,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        editClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {
+        displayContent() {
+            return [
+                this.getCmsContent(this.cmsWidgetName, "BodyText")?.replaceAll(
+                    "{custom:SMSNUMBER}",
+                    this.phoneNumber
+                ),
+            ];
+        },
+        header() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        phoneNumber() {
+            return this.customer?.phoneNumber;
+        },
+    },
+    components: {
+        reviewBlock,
+    },
+};
+</script>

src/layouts/payment-method/review-dropdown/review-sections/parity-damage-review/parity-damage-review.spec.js

@@ -0,0 +1,149 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { getDamageInfoWordingText } from "@/helpers/damage-helper";
+
+import parityDamageReview from "@/layouts/payment-method/review-dropdown/review-sections/parity-damage-review/parity-damage-review";
+
+// Mock the damage helper
+jest.mock("@/helpers/damage-helper", () => ({
+    getDamageInfoWordingText: jest.fn(),
+}));
+
+const testConstants = {
+    cms: {
+        damageInfoHeader: {
+            text: "We'll replace your {custom:GLASSPARTS}",
+        },
+        processedHeader: {
+            text: "We'll replace your windshield and passenger side window",
+        },
+    },
+    vehicle: {
+        year: "2020",
+        make: "Honda",
+        model: "Civic",
+    },
+    damage: {
+        glassType: "windshield",
+        location: "passenger",
+    },
+    damageInfoWordingText: "windshield and passenger side window",
+    displayContent: {
+        vehicleInfo: "2020 Honda Civic",
+    },
+};
+
+let cmsContent;
+
+describe("Parity Damage Review Block", () => {
+    beforeEach(() => {
+        cmsContent = {
+            DamageInfoHeaderWidget: {
+                Text: testConstants.cms.damageInfoHeader.text,
+            },
+        };
+
+        // Mock the damage helper function
+        getDamageInfoWordingText.mockReturnValue(testConstants.damageInfoWordingText);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test("Should display processed damage info header text with custom replacement", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.damageInfoHeader).toEqual(testConstants.cms.processedHeader.text);
+    });
+
+    test("Should render correct display content with vehicle information", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.displayContent).toEqual([testConstants.displayContent.vehicleInfo]);
+    });
+
+    test("Should call getDamageInfoWordingText with damage prop", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+        const result = wrapper.vm.damageInfoWordingText;
+
+        // Assert
+        expect(getDamageInfoWordingText).toHaveBeenCalledWith(testConstants.damage);
+        expect(result).toEqual(testConstants.damageInfoWordingText);
+    });
+
+    test("Should emit edit-clicked when editClicked method is called", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        wrapper.vm.editClicked();
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.emitted("edit-clicked")).toBeTruthy();
+    });
+});
+
+function generateDefaultProps() {
+    return {
+        cmsWidgetName: "DamageReviewWidget",
+        vehicle: {
+            year: testConstants.vehicle.year,
+            make: testConstants.vehicle.make,
+            model: testConstants.vehicle.model,
+        },
+        damage: {
+            glassType: testConstants.damage.glassType,
+            location: testConstants.damage.location,
+        },
+    };
+}
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+                return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
+            }),
+        },
+    };
+
+    mountOptions.global.mixins = [mockMixin];
+
+    const wrapper = shallowMount(parityDamageReview, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}

src/layouts/payment-method/review-dropdown/review-sections/parity-damage-review/parity-damage-review.vue

@@ -0,0 +1,46 @@
+<template>
+    <reviewBlock
+        :headerCmsWidgetName="cmsWidgetName"
+        :content="displayContent"
+        :customHeaderText="damageInfoHeader"
+        @edit-clicked="editClicked" />
+</template>
+
+<script>
+import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
+import { getDamageInfoWordingText } from "@/helpers/damage-helper";
+
+export default {
+    name: "vehicle-review",
+    props: {
+        cmsWidgetName: String,
+        vehicle: Object,
+        damage: Object,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        editClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {
+        displayContent() {
+            return [`${this.vehicle.year} ${this.vehicle.make} ${this.vehicle.model}`];
+        },
+        damageInfoWordingText() {
+            return getDamageInfoWordingText(this.damage);
+        },
+        damageInfoHeader() {
+            return this.getCmsContent("DamageInfoHeaderWidget", "Text")?.replaceAll(
+                "{custom:GLASSPARTS}",
+                this.damageInfoWordingText
+            );
+        },
+    },
+    components: {
+        reviewBlock,
+    },
+};
+</script>