Merge branch 'develop' into feature/CSR-1392

jest.config.js

@@ -14,6 +14,9 @@ module.exports = {
     "!src/helpers/unit-test-helper.js",
     "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
     "!src/layouts/reveal/**/*.vue",
+    "!src/layouts/payment-method/**/*.vue",
+    "!src/fmg-components/cart/**/*.vue",
+    "!src/fmg-components/add-vaps-modal-buttons/**/*.vue",
     "!src/ux-components/text-link/**/*.vue",
     "!src/layouts/vin-lookup/**/*.vue", //Temporary for Quote page testing
     "!src/common-components/funnel-header/menu-modal/**/*.vue",

src/digital-components/button-question/button-question.vue

@@ -197,6 +197,12 @@ export default {
                         classes += "flex-column";
                     }
                     break;
+                case "addVapsButton":
+                    classes = "row g-4 justify-content-center mb-2";
+                    if (this.isWide) {
+                        classes += " flex-column";
+                    }
+                    break;
                 case "radio":
                     classes = "ui-radio d-flex";
                     break;

src/fmg-components/add-vaps-modal-buttons/add-vaps-button/add-vaps-button.vue

@@ -0,0 +1,218 @@
+<template>
+    <baseInputButton
+        v-bind="$props"
+        :buttonWrapperClasses="[
+            'add-vaps-button w-100 rounded-3 d-flex align-items-center h-100 base-input-button',
+            { horizontal: isWide },
+        ]"
+        v-model="selectedValue">
+        <div
+            class="d-flex w-100 align-items-center px-1 h-100 add-vaps-button-content button-content rounded-3"
+            :class="labelClasses">
+            <img :id="buttonImageId" :src="buttonImage" :alt="altText" />
+            <div class="copy-wrapper" :class="isWide ? 'ms-4 me-2' : ''">
+                <p class="small mb-0" :class="isWide ? 'mt-0' : 'mt-1'">
+                    {{ buttonLabel }}
+                </p>
+                <p v-if="buttonLabelSubCopy" class="fs-7 m-0 sub-copy">
+                    {{ buttonLabelSubCopy }}
+                </p>
+            </div>
+            <p class="fs-7 mb-0 link-styling" :class="isWide ? 'mt-0' : 'mt-2'">View details</p>
+        </div>
+    </baseInputButton>
+</template>
+
+<script>
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+
+export default {
+    name: "addVapsButton",
+    mixins: [inputButtonWrapperMixin],
+    components: {
+        baseInputButton,
+    },
+    computed: {
+        labelClasses() {
+            if (this.isWide) {
+                let classes = "flex-row py-2 ps-4 pe-4";
+                if (this.buttonLabelSubCopy) {
+                    classes += " checkboxTop";
+                }
+                return classes;
+            } else {
+                return "flex-column py-2";
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@mixin add-vaps-button-focus($box-shadow-color) {
+    &:focus-visible + .add-vaps-button-content {
+        box-shadow: 0 0 0 2.5px $box-shadow-color;
+        border-radius: 0.5rem;
+    }
+    &:focus + .add-vaps-button-content {
+        box-shadow: 0 0 0 2.5px $box-shadow-color;
+        border-radius: 0.5rem;
+    }
+    &:checked:focus + .add-vaps-button-content {
+        box-shadow: 0 0 0 2.5px $box-shadow-color;
+    }
+}
+.add-vaps-button {
+    border: 1px solid $gray-500;
+    &.has-error {
+        input[type="checkbox"],
+        input[type="radio"] {
+            @include add-vaps-button-focus($red);
+        }
+    }
+    img {
+        height: auto;
+        width: 2.6rem;
+        max-width: 100%;
+    }
+    .copy-wrapper {
+        flex: 1 1 auto;
+    }
+    .link-styling {
+        font-weight: 500;
+        color: $blue;
+        text-decoration: underline;
+        text-underline-offset: 4px;
+    }
+    input[type="checkbox"],
+    input[type="radio"] {
+        position: absolute;
+
+        + .add-vaps-button-content {
+            outline: none;
+            display: flex;
+            position: relative;
+            justify-content: space-between;
+
+            p {
+                color: $gray-600;
+                text-align: center;
+
+                &.sub-copy {
+                    color: $green;
+                }
+            }
+        }
+
+        @include add-vaps-button-focus($blue);
+
+        + .add-vaps-button-content::before {
+            content: "";
+            position: absolute;
+            display: flex;
+            margin: 0 auto;
+            width: 1rem;
+            height: 1rem;
+            margin: 3rem 0 0 0;
+            background: white;
+            border: 1px solid $gray-500;
+            border-radius: 2px;
+            order: 2;
+            flex-shrink: 0;
+            color: $gray-600;
+        }
+
+        + .add-vaps-button-content.checkboxTop::before {
+            margin: -1.25rem 0.5rem 0 0 !important;
+        }
+
+        + .add-vaps-button-content.checkboxTop::after {
+            margin: -1.5rem 0.5rem 0 0 !important;
+        }
+
+        &:checked + .add-vaps-button-content::before {
+            background: $blue;
+        }
+
+        &:checked + .add-vaps-button-content::after {
+            content: "";
+            position: absolute;
+            margin: 3.2rem 0 0 0;
+            border-left: 2px solid $white;
+            border-bottom: 2px solid $white;
+            height: 6px;
+            width: 11px;
+            transform: rotate(-45deg);
+            z-index: 1;
+        }
+    }
+
+    input[type="radio"] {
+        + .add-vaps-button-content::before {
+            content: "";
+            display: none;
+        }
+
+        + .add-vaps-button-content::after {
+            content: "";
+            display: none;
+        }
+
+        + .add-vaps-button-content {
+            img {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &.horizontal {
+        input[type="checkbox"],
+        input[type="radio"] {
+            + .add-vaps-button-content::before {
+                content: "";
+                position: relative;
+                margin: 0 0.5rem 0 0;
+                order: 1;
+            }
+
+            &:checked + .add-vaps-button-content::after {
+                content: "";
+                margin: -0.15rem 0 0 0;
+                left: 1.175rem;
+            }
+
+            &:checked + .add-vaps-button-content {
+                p {
+                    color: $black;
+                    font-weight: 500;
+                }
+
+                .sub-copy {
+                    color: $gray-600;
+                    font-weight: 400;
+                }
+            }
+
+            + .add-vaps-button-content {
+                outline: none;
+                min-height: 48px;
+                color: $gray-600;
+
+                img {
+                    margin-bottom: 0;
+                }
+
+                p {
+                    color: $gray-600;
+                    text-align: left;
+
+                    &.sub-copy {
+                        color: $gray-550;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue

@@ -0,0 +1,102 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div class="add-vaps-buttons" aria-live="polite" v-if="isDisplayed">
+            <buttonQuestion
+                ref="buttonQuestion"
+                :answers="answersToDisplay"
+                groupName="addVaps"
+                v-model="selectedValues"
+                buttonTypeString="addVapsButton"
+                :buttonTypeObject="addVapsButton"
+                :isWide="answersToDisplay.length > 1 ? false : true" />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import addVapsButton from "./add-vaps-button/add-vaps-button";
+
+export default {
+    name: "add-vaps-modal-buttons",
+    props: {
+        cart: Object,
+        rainDefenseItem: Object,
+        wiperItems: Object,
+        vapsTilesCmsName: String,
+    },
+    data() {
+        return {
+            addVapsButton: addVapsButton,
+        };
+    },
+    computed: {
+        selectedValues: {
+            get: function () {
+                return this.answersToDisplay;
+            },
+            set: function (newValue) {
+                // TODO - emit event to open modal
+            },
+        },
+        isDisplayed() {
+            return this.showAddRainDefense || this.showAddWipers;
+        },
+        showAddRainDefense() {
+            // if it's not found in the cart
+            return !this.cart.some((vap) => {
+                return vap.partType === "RAIN DEFENSE";
+            });
+        },
+        showAddWipers() {
+            // if it's not found in the cart
+            return !this.cart.some((vap) => {
+                return vap.partType.includes(" WIPER");
+            });
+        },
+        rainDefensePrice() {
+            const lineItem = this.rainDefenseItem;
+            const price = lineItem.laborAmount + lineItem.sellingPrice + lineItem.kitPrice;
+            return parseFloat(price).toFixed(2);
+        },
+        wipersPrice() {
+            let price = 0;
+            const lineItems = this.wiperItems;
+            lineItems?.forEach((item) => {
+                price += item.laborAmount + item.sellingPrice + item.kitPrice;
+            });
+            return parseFloat(price).toFixed(2);
+        },
+        answersCmsData() {
+            return this.getCmsContent(this.vapsTilesCmsName, "Answers");
+        },
+        answersToDisplay() {
+            const answers = [];
+            if (!this.answersCmsData) return answers;
+
+            const getAnswer = (name, answers) => {
+                const answerIndex = answers.findIndex((answer) => {
+                    return answer.Name === name;
+                });
+                return answers[answerIndex];
+            };
+
+            if (this.showAddWipers) {
+                const answer = getAnswer("ADD WIPER BLADES", this.answersCmsData);
+                answer.SubText = "+$" + this.wipersPrice;
+                answers.push(answer);
+            }
+            if (this.showAddRainDefense) {
+                const answer = getAnswer("ADD RAIN DEFENSE", this.answersCmsData);
+                answer.SubText = "+$" + this.rainDefensePrice;
+                answers.push(answer);
+            }
+
+            return answers;
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+};
+</script>

src/fmg-components/cart/cart.vue

@@ -0,0 +1,351 @@
+<template>
+    <div class="cart">
+        <div class="container-fluid px-0">
+            <div
+                class="row vin-toggle flex align-items-center"
+                :class="[isActive ? 'active' : '']"
+                @click="toggleClass()">
+                <div class="col d-flex justify-content-between">
+                    <span class="label">Amount Due</span
+                    ><span class="label amount-due">$321.00</span>
+                </div>
+            </div>
+            <div class="price-table">
+                <div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
+                    <textBlock :cmsWidgetName="packageNameWidget" /><span>{{ packagePrice }}</span>
+                </div>
+                <div
+                    v-for="(lineItem, i) in displayedPackageLineItems"
+                    :key="i"
+                    :class="[this.displayedPackageLineItems ? 'vaps' : '']">
+                    <span>{{ lineItem.name }}</span>
+                    <span><a href="#">Remove</a></span>
+                </div>
+                <hr style="background: red" />
+                <div
+                    v-for="(lineItem, i) in displayedNonPackageLineItems"
+                    :key="i"
+                    :class="[this.displayedNonPackageLineItems ? 'vaps' : '']">
+                    <span>{{ lineItem.name }}</span>
+                    <span><a href="#">Remove</a></span>
+                    <span>{{ lineItem.price }}</span>
+                </div>
+                <div v-if="hasRecycleLineItem">
+                    <span>{{ recycleLabel }}</span
+                    ><span>{{ recycleFee }}</span>
+                </div>
+                <!-- Sub total, sales tax, total columns -->
+                <div class="sub-total"><span>Subtotal</span><span>$320</span></div>
+                <div class="sales-tax"><span>Sales tax</span><span>$1</span></div>
+                <div class="amount-due"><span>Amount due</span><span>$321</span></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import cart from "@/fmg-components/cart/cart";
+import baseMixin from "@/mixins/base-mixin.js";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { packageNames } from "@/constants/package-names";
+import {
+    getHighestFullySatisfiedTier,
+    containsLineItemWithPartType,
+    getPackageContents,
+    findLineItemsWithPartType,
+} from "@/helpers/service-package-helper";
+import reviewBlock from "@/layouts/review/review-block/review-block";
+import textBlock from "@/digital-components/text-block/text-block";
+
+export default {
+    name: "modal",
+    props: {
+        headerCmsWidgetName: String,
+        servicePackageOptionsCmsName: String,
+        damage: Object,
+        orderLineItems: Object,
+        availableLineItems: Object,
+        allowableCartItems: Object,
+    },
+    data() {
+        return {
+            isActive: false,
+            //availableVaps: [], TO DO Do we need this?
+            packageWithVAPS: false,
+            // packageLevel: "",
+        };
+    },
+    methods: {
+        toggleClass: function (event) {
+            this.isActive = !this.isActive;
+        },
+        initializeComponent(apiResponses) {
+            //TO DO Do we need this?
+            // const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
+            // this.availableVaps = vapsFromApi;
+        },
+        getPackagePriceString(packageName) {
+            const formattedPriceFloat = parseFloat(this.getPackagePrice(packageName)).toFixed(2);
+            return (this.isInsuranceSelected ? "As little as $" : "$") + formattedPriceFloat;
+        },
+        getPackagePrice(packageName) {
+            let priceFloat = this.isInsuranceSelected
+                ? 0
+                : baseMixin.methods.getTierOnePackagePrice(
+                      baseMixin.methods.filterOutFees(this.nullSafeAvailableLineItems)
+                  );
+
+            priceFloat += this.getVapsPrice(packageName);
+
+            return priceFloat;
+        },
+        getVapsPrice(packageName) {
+            const vapsItems = this.getVapsLineItemsForSelectedPackage(packageName);
+
+            let price = 0;
+
+            vapsItems.forEach((item) => {
+                price += baseMixin.methods.getTotalLineItemPrice(item);
+            });
+
+            return price;
+        },
+        //START HERE
+        getVapsLineItemsForSelectedPackage(packageName) {
+            const packageContentTypes = getPackageContents(
+                this.glassToReplace,
+                this.nullSafeAvailableLineItems,
+                this.isRepair,
+                packageName
+            );
+
+            let vapsLineItemsForSelectedPackage = [];
+
+            packageContentTypes.forEach((vapType) => {
+                vapsLineItemsForSelectedPackage.push(
+                    ...findLineItemsWithPartType(vapType, this.nullSafeAvailableLineItems)
+                );
+            });
+            // console.log("VapsLineItems:", vapsLineItemsForSelectedPackage);
+            return vapsLineItemsForSelectedPackage;
+        },
+    },
+    computed: {
+        packageNameWidget() {
+            const servicePackageNames = this.getCmsContent(
+                this.servicePackageOptionsCmsName,
+                "Answers"
+            );
+
+            if (!servicePackageNames) {
+                return "";
+            }
+
+            const currentPackage = servicePackageNames.find(
+                (entry) => entry.Name === this.packageLevel
+            );
+
+            return currentPackage.SubWidgetName;
+        },
+        packageLevel() {
+            const tier = getHighestFullySatisfiedTier(
+                this.glassToReplace,
+                this.availableLineItems,
+                this.isRepair,
+                this.vaps
+            );
+            return tier;
+        },
+        packagePrice() {
+            let packagePriceString;
+            if (this.packageLevel.length > 0) {
+                packagePriceString = this.getPackagePriceString(this.packageLevel);
+            }
+            return packagePriceString;
+            // return (packagePriceString.length > 0) ? packagePriceString : "Test String";
+        },
+        displayedPackageLineItems() {
+            const displayedPackageLineItems = [];
+            const packageLineItems = this.getVapsLineItemsForSelectedPackage(this.packageLevel);
+            //TO DO Could we get the same list from this.orderLineItems?
+            packageLineItems?.forEach((item) => {
+                let price = item.sellingPrice + item.kitPrice + item.laborAmount;
+                const packageLineItem = {
+                    name: item.partType,
+                    price: "$" + parseFloat(price).toFixed(2),
+                    partType: item.partType,
+                    isRemovable: item.isRemovable,
+                };
+                displayedPackageLineItems.push(packageLineItem);
+            });
+            // console.log("What displayedPackageLineItems is", packageLineItems);
+            return displayedPackageLineItems;
+        },
+        displayedNonPackageLineItems() {
+            const displayedNonPackageLineItems = [];
+            const possibleLineItems = [...this.vaps, ...this.supportingItems];
+            possibleLineItems?.forEach((item) => {
+                let price = item.sellingPrice + item.kitPrice + item.laborAmount;
+                const isAllowed = this.allowableLineItems?.findIndex((lineItem) => {
+                    return lineItem.partType === item.partType;
+                });
+                const indexFound = this.displayedPackageLineItems?.findIndex((packageLineItem) => {
+                    return packageLineItem.partType === item.partType;
+                });
+                const isInPackage = this.displayedPackageLineItems?.findIndex((packageLineItem) => {
+                    return packageLineItem.partType === item.partType;
+                });
+                if (isInPackage === -1 && isAllowed > -1) {
+                    const nonPackageLineItem = {
+                        name: item.partType,
+                        price: "$" + parseFloat(price).toFixed(2),
+                        partType: item.partType,
+                        isRemovable: item.isRemovable,
+                    };
+                    displayedNonPackageLineItems.push(nonPackageLineItem);
+                }
+            });
+            return displayedNonPackageLineItems;
+        },
+        glassToReplace() {
+            if (!this.damage) {
+                return;
+            }
+            return this.damage.glassToReplace;
+        },
+        isRepair() {
+            if (!this.damage) {
+                return;
+            }
+            return this.damage.isRepair;
+        },
+        vaps() {
+            const vaps = this.orderLineItems?.vaps;
+            return vaps?.length > 0 ? vaps : [];
+        },
+        supportingItems() {
+            const supportingItems = this.orderLineItems?.supportingItems;
+            return supportingItems?.length > 0 ? supportingItems : [];
+        },
+        recycleLabel() {
+            return "Recycling";
+        },
+        recycleFee() {
+            return "$35.00";
+        },
+        hasRecycleLineItem() {
+            //TO DO
+            // if (this.lineItems.supportingItems[0].partNumber === "RECYCLE FEE") {
+            //     return true;
+            // } else {
+            //     return false;
+            // }
+            return true;
+        },
+        nullSafeAvailableLineItems() {
+            return this.availableLineItems ?? [];
+        },
+    },
+    components: {
+        textBlock,
+    },
+};
+</script>
+
+<style lang="scss">
+.cart {
+    h5 {
+        border-bottom: 1px solid $gray-500;
+        color: $black;
+    }
+    .border-bottom {
+        color: $gray;
+    }
+    .label {
+        font-weight: 500;
+    }
+    .amount-due {
+        color: $green;
+    }
+    .price-table {
+        max-height: 0;
+        transition: all 350ms ease-in;
+        overflow: hidden;
+        div {
+            display: flex;
+            justify-content: space-between;
+            padding: 0.5rem 1.5rem;
+            &:nth-child(odd) {
+                background-color: #f5f5f5;
+            }
+            &:nth-last-child(-n + 3) {
+                background-color: #e3f2ea;
+            }
+            &:last-child {
+                background-color: #0c7e47;
+                color: #ffffff;
+            }
+        }
+        .vaps {
+            background-color: #f5f5f5;
+            padding-left: 2.5rem;
+            align-items: center;
+            span {
+                display: flex;
+                width: 33.33333%;
+                &:nth-child(2) {
+                    justify-content: flex-end;
+                }
+                &:last-child {
+                    justify-content: flex-end;
+                }
+            }
+        }
+        .package-type,
+        .service-type {
+            //background-color: #f5f5f5;
+            align-items: center;
+        }
+        .sub-total,
+        .sales-tax,
+        .amount-due {
+            font-weight: 500;
+        }
+        .sub-total {
+            border-top: 1px solid #0c7e47;
+        }
+        .service-type {
+            // background-color: #f5f5f5;
+            .text-block {
+                background: transparent;
+                margin-top: 0;
+                padding: 0;
+            }
+        }
+    }
+    .vin-toggle {
+        &:after {
+            content: "";
+            transition: all 0.5s ease;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+            background-repeat: no-repeat;
+            background-position: right center;
+            width: 16px;
+            height: 9px;
+            display: inline-flex;
+            position: relative;
+            right: 0.75rem;
+            margin: 1rem 0 1rem 1rem;
+            cursor: pointer;
+        }
+        &.active:after {
+            transform: rotate(180deg);
+        }
+        &.active + .price-table {
+            max-height: 650px;
+            transition: all 350ms ease-in;
+            overflow: hidden;
+        }
+    }
+}
+</style>

src/helpers/service-package-helper.js

@@ -11,7 +11,6 @@ export function findLineItemsWithPartType(typeToFind, itemsToSearch) {
     const partTypeMatches = itemsToSearch?.filter(
         (lineItem) => lineItem.partType.toUpperCase() === typeToFind.toUpperCase()
     );
-
     return partTypeMatches;
 }
 

src/layouts/payment-method/payment-method.spec.js

@@ -4,6 +4,7 @@ import customerDetails from "@/layouts/payment-method/payment-method.vue";
 // Supporting Files
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -41,15 +42,22 @@ describe("payment-method.vue", () => {
 });
 
 function setupMocks() {
+    store.getters = {
+        damage: {},
+        lineItems: [],
+    };
+
     const wrapper = shallowMount(
         customerDetails,
         getMountOptions({
             router: {
-                navigate: jest.fn(),
                 navigate: jest.fn(),
                 navigateWithSaving: jest.fn(),
                 navigateWithoutSaving: jest.fn(),
             },
+            store: {
+                getters: store.getters,
+            },
         })
     );
 

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

@@ -1,46 +1,39 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles">
+        <loadingModal ref="loadingModal" />
-            <loadingModal ref="loadingModal" />
+        <div class="container-fluid page-container-grouped-styles">
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <div class="row">
-            <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" leftAlignHeader />
+                <div class="col">
-            <hr class="mt-0" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <div>
+                </div>
-                <button v-on:click="ccdPayment">
-                    <img
-                        src="data:image/png;base64,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"
-                        alt="We accept Visa" />
-                </button>
-                <button v-on:click="ccdPayment">
-                    <img
-                        src="data:image/png;base64,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"
-                        alt="Mastercard" />
-                </button>
-                <button v-on:click="ccdPayment">
-                    <img
-                        src="data:image/png;base64,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"
-                        alt="American Express" />
-                </button>
-                <button v-on:click="ccdPayment">
-                    <img
-                        src="data:image/png;base64,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"
-                        alt="and Discover" />
-                </button>
             </div>
-            <div>
+            <div class="row justify-content-md-center">
-                <button v-on:click="paypal">
+                <div class="col-md-6 col-xl-4">
-                    <img
+                    <vehicleBanner
-                        src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/PP_logo_h_100x26.png"
+                        cmsWidgetName="VehicleBannerWidget"
-                        alt="PayPal" />
+                        :displayGenericVehicleImage="false" />
-                </button>
+
-            </div>
+                    <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
-            <div class="fade-on-route-transition sub-container make-tall">
+
-                <navbar
+                    <cart
-                    cmsWidgetName="FunnelFooterWidget"
+                        :damage="damageInfo"
-                    :isForwardActionDisabled="!meta.valid"
+                        :orderLineItems="orderLineItems"
-                    :isBackButtonHidden="shouldHideBackButton"
+                        :availableLineItems="cartItems"
-                    @back-clicked="backButtonAction"
+                        servicePackageOptionsCmsName="ServicePackageTitle" />
-                    @ForwardClicked="forwardButtonAction" />
+
+                    <add-vaps-modal-buttons
+                        :cart="cartItems"
+                        :wiperItems="availableWipers"
+                        :rainDefenseItem="availableRainDefense"
+                        vapsTilesCmsName="VapsProductTiles" />
+
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        :isBackButtonHidden="shouldHideBackButton"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
             </div>
         </div>
     </Form>
@@ -51,44 +44,104 @@
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import cart from "@/fmg-components/cart/cart";
+import addVapsModalButtons from "@/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons";
 import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
 
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import baseMixin from "@/mixins/base-mixin.js";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
-
+import store from "@/store";
-// Validation
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { Form } from "vee-validate";
 
 export default {
-    name: "payment-method",
+    name: "paymentMethod",
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-        // TODO: Data fetching Promise declarations
+        const wipersPromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_WIPERS,
+            null,
+            "payment-method"
+        );
+        const rainDefensePromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_RAIN_DEFENSE,
+            null,
+            "payment-method"
+        );
+        const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_SUPPORTING_ITEMS,
+            null,
+            "payment-method"
+        );
 
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "wipers",
+                promise: wipersPromise,
+            },
+            {
+                resultKey: "rainDefense",
+                promise: rainDefensePromise,
+            },
+            {
+                resultKey: "supportingItems",
+                promise: supportingItemsPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
+        const clonedGlassParts = store.getters.order.lineItems.glassParts
+            ? JSON.parse(JSON.stringify(store.getters.order.lineItems.glassParts))
+            : [];
+        const availableLineItems = [
+            resultMap.rainDefense,
+            ...resultMap.supportingItems,
+            ...resultMap.wipers,
+            ...clonedGlassParts,
+        ];
+        const pricingResults = await baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
+            {
+                availableLineItems: availableLineItems,
+            },
+            "payment-method",
+            false
+        );
 
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.pricedGlassParts = clonedGlassParts;
+            vm.supportingItems = resultMap.supportingItems;
+            vm.availableLineItems = pricingResults;
+            vm.availableWipers = resultMap.wipers;
+            vm.availableRainDefense = resultMap.rainDefense;
         });
     },
     data() {
-        return {};
+        return {
+            cartItems: [],
+            availableWipers: null,
+            availableRainDefense: null,
+            availableLineItems: null,
+            supportingItems: null,
+            pricedGlassParts: null,
+        };
     },
     methods: {
         arePagePrerequisitesValid() {
-            // TODO
             return true;
         },
+        vapsItemsSelectedAction(vapsItemsSelected) {
+            this.cartItems = vapsItemsSelected;
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
@@ -109,13 +162,22 @@ export default {
             this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_PAY_NOW, this.$route);
         },
     },
+    computed: {
+        damageInfo() {
+            return this.$store.getters.damage;
+        },
+        orderLineItems() {
+            return this.$store.getters.lineItems;
+        },
+    },
     components: {
         funnelHeader,
         navbar,
         funnelSubHeader,
         Form,
+        loadingModal,
+        cart,
+        addVapsModalButtons,
     },
 };
 </script>
-
-<style lang="scss"></style>

src/layouts/quote/quote.vue

@@ -146,7 +146,6 @@ export default {
             resultMap.supportingItems,
             false
         );
-
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);