Merge remote-tracking branch 'origin/develop' into feature/skiener/CSR-1452

public/css/site-2020Styling.css

@@ -87,6 +87,20 @@
   display: none;
 }
 
+.buy-backdrop {
+  background-color: rgba(0, 0, 0, 0.3) !important;
+}
+.buy-backdrop #afterpay__iframe-checkout-container {
+  width: 100%;
+}
+.buy-backdrop #afterpay__iframe-checkout-container .style_closeWrapper__lIHJe {
+  display: none;
+}
+
+.buy-container-closer {
+  display: none;
+}
+
 @keyframes rotate {
   0% {
     transform: rotate(0);

public/scss/site-2020Styling.scss

@@ -90,6 +90,24 @@
     }
 }
 
+// AfterPay Styles
+
+.buy-backdrop {
+    background-color: rgba(0,0,0,.3)!important;
+    #afterpay__iframe-checkout-container {
+        width: 100%;
+        .style_closeWrapper__lIHJe {
+            display: none;
+        }
+    }
+}
+
+.buy-container-closer {
+    display: none;
+}
+
+// Modal Spinner
+
 @keyframes rotate {
     0% {  transform: rotate(0)}
     100% { transform: rotate(360deg)}

src/constants/cart-item-types.js

@@ -5,6 +5,7 @@ const cartItemTypes = {
     GLASS_PARTS: "GLASS PARTS",
     RAIN_DEFENSE: "RAIN DEFENSE",
     RECYCLE_FEE: "RECYCLE FEE",
+    REPLACE_FEE: "REPLACE FEE",
     MOBILE_FEE: "MOBILE FEE",
     PROMOS: "PROMOS",
     EARLY_BIRD: "EARLY BIRD",

src/constants/part-type-strings.js

@@ -3,6 +3,7 @@ const partTypeStrings = {
     REAR_WIPER: "REAR WIPER",
     RAIN_DEFENSE: "RAIN DEFENSE",
     RECALIBRATION: "RECALIBRATION",
+    REPLACE_FEE: "REPLACE FEE",
     RECYCLE_FEE: "RECYCLE FEE",
     MOBILE_FEE: "MOBILE FEE",
     REPAIR_FEE: "REPAIR FEE",

src/constants/store-mutations.js

@@ -54,6 +54,7 @@ const storeMutations = {
     UPDATE_PIA_TYPE: "updatePiaType",
     WORK_ORDER_NUMBER: "updateWorkOrderNumber",
     Customer_Portal_Login_Token: "updateCustomerPortalLoginToken",
+    LOCK_TOKEN: "updateLockToken",
 
     // EVENT BUS MUTATIONS
     ADD_EVENT_TO_BUS: "addEventToBus",

src/fmg-components/cart/cart.spec.js

@@ -37,13 +37,13 @@ describe("cart.vue", () => {
                 promos: [],
             };
 
-            const availableLineItems = [];
+            const availableVaps = [];
 
             // Act
             const { wrapper } = setupMocks({
                 props: {
                     modelValue: lineItems,
-                    availableLineItems: availableLineItems,
+                    availableVaps: availableVaps,
                 },
             });
 
@@ -89,13 +89,13 @@ describe("cart.vue", () => {
                 promos: [],
             };
 
-            const availableLineItems = [];
+            const availableVaps = [];
 
             // Act
             const { wrapper } = setupMocks({
                 props: {
                     modelValue: lineItems,
-                    availableLineItems: availableLineItems,
+                    availableVaps: availableVaps,
                 },
             });
 
@@ -132,13 +132,13 @@ describe("cart.vue", () => {
                 promos: [],
             };
 
-            const availableLineItems = [];
+            const availableVaps = [];
 
             // Act
             const { wrapper } = setupMocks({
                 props: {
                     modelValue: lineItems,
-                    availableLineItems: availableLineItems,
+                    availableVaps: availableVaps,
                 },
             });
 
@@ -189,13 +189,13 @@ describe("cart.vue", () => {
         //         promos: [],
         //     };
 
-        //     const availableLineItems = [];
+        //     const availableVaps = [];
 
         //     // Act
         //     const { wrapper } = setupMocks({
         //         props: {
         //             modelValue: lineItems,
-        //             availableLineItems: availableLineItems,
+        //             availableVaps: availableVaps,
         //         },
         //     });
 
@@ -234,13 +234,13 @@ describe("cart.vue", () => {
                 promos: [],
             };
 
-            const availableLineItems = [];
+            const availableVaps = [];
 
             // Act
             const { wrapper } = setupMocks({
                 props: {
                     modelValue: lineItems,
-                    availableLineItems: availableLineItems,
+                    availableVaps: availableVaps,
                 },
             });
 
@@ -277,13 +277,13 @@ describe("cart.vue", () => {
                 promos: [],
             };
 
-            const availableLineItems = [];
+            const availableVaps = [];
 
             // Act
             const { wrapper } = setupMocks({
                 props: {
                     modelValue: lineItems,
-                    availableLineItems: availableLineItems,
+                    availableVaps: availableVaps,
                 },
             });
 
@@ -321,13 +321,13 @@ describe("cart.vue", () => {
                 promos: [],
             };
 
-            const availableLineItems = [];
+            const availableVaps = [];
 
             // Act
             const { wrapper } = setupMocks({
                 props: {
                     modelValue: lineItems,
-                    availableLineItems: availableLineItems,
+                    availableVaps: availableVaps,
                 },
             });
 

src/fmg-components/cart/cart.vue

@@ -1,27 +1,24 @@
 <template>
-    <div class="cart mb-4">
+    <div class="cart mb-5">
         <div class="px-0">
             <div
                 class="row vin-toggle flex align-items-center"
-                :class="[isActive ? 'active' : '']"
+                :class="[isExpanded ? 'expanded' : '']"
-                @click="toggleClass()">
+                @click="toggleIsExpanded()">
                 <div class="col d-flex justify-content-between">
                     <span class="label">{{ amountDueText }}</span
                     ><span class="label amount-due">{{ currencyFormatter.format(amountDue) }}</span>
                 </div>
             </div>
             <div class="price-table">
-                <div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
+                <div class="service-type">
                     <textBlock :cmsWidgetName="servicePackageTitleWidget" /><span>{{
                         currencyFormatter.format(packagePrice)
                     }}</span>
                 </div>
 
                 <!-- Packaged Cart Items -->
-                <div
+                <div v-for="(cartItem, i) in packageCartItems" :key="i" class="packaged-cart-item">
-                    v-for="(cartItem, i) in packageCartItems"
-                    :key="i"
-                    :class="[this.packageCartItems ? 'vaps' : '']">
                     <span>{{ cartItem.name }}</span>
                     <textLink
                         v-if="allowItemRemoval"
@@ -33,55 +30,30 @@
                 </div>
 
                 <!-- Nonpackaged Cart Items -->
-                <hr style="background: red" />
                 <div
-                    class="premium-appt-cart-item"
                     v-for="(cartItem, i) in nonpackageCartItems"
-                    :key="i">
+                    :key="i"
-                    <span>{{ cartItem.name }}</span>
+                    class="non-packaged-cart-item"
+                    :class="[
+                        i % 2 == 0 ? 'even' : 'odd',
+                        cartItem.isRemovable ? 'removable-cart-item' : '',
+                    ]">
+                    <span v-if="cartItem != recycleFeeCartItem">{{ cartItem.name }}</span>
                     <textLink
-                        v-if="allowItemRemoval"
+                        v-if="allowItemRemoval && cartItem.isRemovable"
                         ref="removeLink"
                         linkType="text"
                         :text="removeLinkText"
                         href="#!"
                         @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
-                    <span>{{ currencyFormatter.format(cartItem.subTotal) }}</span>
-                </div>
-
-                <!-- Fees -->
-                <div v-if="recycleFeeCartItem">
                     <textLink
+                        v-else-if="cartItem == recycleFeeCartItem"
                         linkType="text"
                         :text="recycleFeeCartItem.name"
                         href="#!"
                         @click-event="openModal(recyclingModalCmsWidgetName)" />
-                    <span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
+                    <span>{{ currencyFormatter.format(cartItem.subTotal) }}</span>
                 </div>
-                <div v-if="mobileFeeCartItem">
-                    <span>{{ mobileFeeCartItem.name }}</span
-                    ><span>{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}</span>
-                </div>
-
-                <div v-if="premiumAppointmentDiscountCartItem" class="premium-appt-cart-item">
-                    <span>{{ premiumAppointmentDiscountCartItem.name }}</span>
-                    <textLink
-                        v-if="allowItemRemoval"
-                        ref="removeLink"
-                        linkType="text"
-                        :text="removeLinkText"
-                        href="#!"
-                        @click-event="
-                            removeItem(
-                                premiumAppointmentDiscountCartItem.cartItemType,
-                                'supportingItems'
-                            )
-                        " />
-                    <span>{{
-                        currencyFormatter.format(premiumAppointmentDiscountCartItem.subTotal)
-                    }}</span>
-                </div>
-                <!-- promos here -->
 
                 <!-- Sub total, sales tax, total columns -->
                 <div class="sub-total">
@@ -128,14 +100,13 @@ export default {
         modelValue: Object,
         damage: Object,
         servicePackageOptionsCmsName: String,
-        availableLineItems: Object,
+        availableVaps: Object,
         allowItemRemoval: Boolean,
         recyclingModalCmsWidgetName: String,
     },
     data() {
         return {
-            isActive: false,
+            isExpanded: false,
-            packageWithVAPS: false,
             currencyFormatter: new Intl.NumberFormat("en-US", {
                 style: "currency",
                 currency: "USD",
@@ -147,8 +118,8 @@ export default {
         openModal(modalName) {
             this.$refs[modalName].openModal();
         },
-        toggleClass: function (event) {
+        toggleIsExpanded() {
-            this.isActive = !this.isActive;
+            this.isExpanded = !this.isExpanded;
         },
         getVapsPrice(packageName) {
             const vapsItems = this.getVapsCartItemsForSelectedPackage(packageName);
@@ -201,6 +172,16 @@ export default {
         },
     },
     computed: {
+        availableLineItems() {
+            if (!this.lineItems || this.lineItems.length < 1) {
+                return [];
+            }
+            return [
+                ...this.lineItems.glassParts,
+                ...this.lineItems.supportingItems,
+                ...this.availableVaps,
+            ];
+        },
         cartItems: {
             get: function () {
                 let cartItems = [];
@@ -251,6 +232,9 @@ export default {
                         salesTax: promoLineItem.salesTax,
                     };
 
+                    promoLineItem.cartItemType = cartItem.cartItemType;
+                    cartItem.lineItems.push(promoLineItem);
+
                     cartItems.push(cartItem);
                 });
 
@@ -336,14 +320,6 @@ export default {
             const nonpackageCartItems = [];
 
             this.cartItems.forEach((cartItem) => {
-                if (
-                    cartItem == this.recycleFeeCartItem ||
-                    cartItem == this.mobileFeeCartItem ||
-                    cartItem == this.premiumAppointmentDiscountCartItem
-                ) {
-                    return;
-                }
-
                 if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) {
                     if (cartItem.isDisplayed) {
                         nonpackageCartItems.push(cartItem);
@@ -441,6 +417,7 @@ export default {
                     category: cartItemCategories.VAPS,
                     cartItemType: cartItemTypes.RAIN_DEFENSE,
                     isDisplayed: true,
+                    isRemovable: true,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -469,6 +446,7 @@ export default {
                         category: cartItemCategories.GLASS_PARTS,
                         cartItemType: cartItemTypes.GLASS_PARTS,
                         isDisplayed: false,
+                        isRemovable: false,
                         subTotal:
                             (lineItem.kitPrice ?? 0) +
                             (lineItem.laborAmount ?? 0) +
@@ -502,15 +480,16 @@ export default {
             let cartItem = null;
 
             const recycleFeeLineItem = this.supportingItems.find(
-                (supportingItem) => supportingItem.partNumber == partTypeStrings.RECYCLE_FEE
+                (supportingItem) => supportingItem.partType == partTypeStrings.REPLACE_FEE
             );
 
             if (recycleFeeLineItem) {
                 cartItem = {
                     name: this.recycleFeeCartItemName,
                     category: cartItemCategories.SUPPORTING_ITEMS,
-                    cartItemType: cartItemTypes.RECYCLE_FEE,
+                    cartItemType: cartItemTypes.REPLACE_FEE,
                     isDisplayed: true,
+                    isRemovable: false,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -545,6 +524,7 @@ export default {
                     category: cartItemCategories.SUPPORTING_ITEMS,
                     cartItemType: cartItemTypes.MOBILE_FEE,
                     isDisplayed: true,
+                    isRemovable: false,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -579,6 +559,7 @@ export default {
                     category: cartItemCategories.SUPPORTING_ITEMS,
                     cartItemType: cartItemTypes.SUPPORTING_ITEMS,
                     isDisplayed: false,
+                    isRemovable: false,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -714,9 +695,6 @@ export default {
             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;
             }
@@ -725,7 +703,11 @@ export default {
                 color: #ffffff;
             }
         }
-        .vaps {
+        .service-type {
+            background-color: #f5f5f5;
+            align-items: center;
+        }
+        .packaged-cart-item {
             background-color: #f5f5f5;
             padding-left: 2.5rem;
             align-items: center;
@@ -743,6 +725,28 @@ export default {
                 font-size: 0.875rem;
             }
         }
+        .non-packaged-cart-item {
+            &.odd {
+                background: var(--neutrals-gray-100, #f4f4f4);
+            }
+        }
+        .non-packaged-cart-item {
+            &.even {
+                background-color: var(--neutrals-white, #fff);
+            }
+        }
+        // Custom order/wrap for removable nonpackaged Cart Items
+        .removable-cart-item {
+            flex-wrap: wrap;
+            span {
+                display: flex;
+                justify-content: space-between;
+            }
+            a {
+                order: 3;
+                margin-right: 100%;
+            }
+        }
         .package-type,
         .service-type {
             //background-color: #f5f5f5;
@@ -764,18 +768,6 @@ export default {
                 padding: 0;
             }
         }
-        // Custom order/wrap for nonpackaged Cart Items
-        .premium-appt-cart-item {
-            flex-wrap: wrap;
-            span {
-                display: flex;
-                justify-content: space-between;
-            }
-            a {
-                order: 3;
-                margin-right: 100%;
-            }
-        }
     }
     .vin-toggle {
         &:after {
@@ -792,14 +784,22 @@ export default {
             margin: 1rem 0 1rem 1rem;
             cursor: pointer;
         }
-        &.active:after {
+        &.expanded:after {
             transform: rotate(180deg);
         }
-        &.active + .price-table {
+        &.expanded + .price-table {
             max-height: 650px;
             transition: all 350ms ease-in;
             overflow: hidden;
         }
     }
 }
+.payment-method-question {
+    .question-text {
+        margin: 1rem 0 0.5rem 0;
+    }
+    span {
+        line-height: 24px;
+    }
+}
 </style>

src/helpers/heritage-integration/order-helper.js

@@ -163,6 +163,7 @@ async function saveSessionHelper(
             eon: savedSessionInfo.data.eon,
             workOrderNumber: savedSessionInfo.data.workOrderNumber,
             customerPortalLoginToken: savedSessionInfo.data.customerPortalLoginToken,
+            lockToken: savedSessionInfo.data.lockToken,
         },
         false
     );

src/layouts/confirmation/confirmation.vue

@@ -14,6 +14,7 @@
                                 <div>
                                     <vehicleBanner
                                         cmsWidgetName="VehicleBannerWidget"
+                                        :displayVehicleImage="vehicleBannerImageUrl"
                                         :displayGenericVehicleImage="false" />
                                 </div>
                                 <div class="scheduleText">
@@ -205,6 +206,9 @@ export default {
                 return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`;
             }
         },
+        vehicleBannerImageUrl() {
+            return store.getters.submittedOrder?.vehicle.imageUrl;
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -238,7 +242,11 @@ export default {
             const schedule = store.getters.order.schedule;
             const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime);
 
-            return serviceLocationReqs && scheduleReqs;
+            // Customer
+            const customer = store.getters.order.customer;
+            const customerReqs = !!customer.emailAddress;
+
+            return serviceLocationReqs && scheduleReqs && customerReqs;
         },
         forwardButtonAction() {
             window.location.assign("//www.safelite.com/");

src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue

@@ -76,13 +76,12 @@ export default {
     name: "add-vaps-modal-buttons",
     props: {
         vapsTilesCmsName: String,
-        availableLineItems: Object,
+        availableVaps: Object,
         modelValue: Object,
     },
     data() {
         return {
             addVapsButton: addVapsButton,
-            wipersOffered: null,
             isModalOpened: false,
             selectedWipers: this.getSelectedWipers(),
         };
@@ -206,7 +205,7 @@ export default {
             return modelValue;
         },
         rainDefenseModal() {
-            const lineItem = this.availableLineItems.find((item) => {
+            const lineItem = this.availableVaps.find((item) => {
                 return item.partType === partTypeStrings.RAIN_DEFENSE;
             });
             if (lineItem)
@@ -217,10 +216,10 @@ export default {
         },
         wipersModal() {
             // create a single wiper item for modal
-            const frontWiperLineItems = this.availableLineItems.filter((item) => {
+            const frontWiperLineItems = this.availableVaps.filter((item) => {
                 return item.partType.includes(partTypeStrings.FRONT_WIPER);
             });
-            const rearWiperLineItems = this.availableLineItems.filter((item) => {
+            const rearWiperLineItems = this.availableVaps.filter((item) => {
                 return item.partType.includes(partTypeStrings.REAR_WIPER);
             });
             let wipersModal;
@@ -249,20 +248,38 @@ export default {
         answersCmsData() {
             return this.getCmsContent(this.vapsTilesCmsName, "Answers");
         },
+        rainDefenseInCart() {
+            return this.currentCartItems.vaps?.some((vap) => {
+                return vap?.partType === partTypeStrings.RAIN_DEFENSE;
+            });
+        },
+        frontWipersInCart() {
+            return this.currentCartItems.vaps?.some((vap) => {
+                return vap?.partType?.includes(partTypeStrings.FRONT_WIPER);
+            });
+        },
+        rearWipersInCart() {
+            return this.currentCartItems.vaps?.some((vap) => {
+                return vap?.partType?.includes(partTypeStrings.REAR_WIPER);
+            });
+        },
+        wipersOffered() {
+            let result;
+            if (!this.frontWipersInCart) {
+                if (!this.rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
+                    result = wipersOfferedStrings.BOTH;
+                } else {
+                    result = wipersOfferedStrings.FRONT;
+                }
+            } else if (!this.rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
+                result = wipersOfferedStrings.REAR;
+            }
+            return result;
+        },
         buttonsToDisplay() {
             const buttons = [];
             if (!this.answersCmsData) return buttons;
 
-            const rainDefenseInCart = this.currentCartItems.vaps?.some((vap) => {
-                return vap?.partType === partTypeStrings.RAIN_DEFENSE;
-            });
-            const frontWipersInCart = this.currentCartItems.vaps?.some((vap) => {
-                return vap?.partType?.includes(partTypeStrings.FRONT_WIPER);
-            });
-            const rearWipersInCart = this.currentCartItems.vaps?.some((vap) => {
-                return vap?.partType?.includes(partTypeStrings.REAR_WIPER);
-            });
-
             const getAnswer = (name, answers) => {
                 const answerIndex = answers.findIndex((answer) => {
                     return answer.Name === name;
@@ -270,7 +287,7 @@ export default {
                 return answers[answerIndex];
             };
 
-            if (!rainDefenseInCart) {
+            if (!this.rainDefenseInCart) {
                 // NO RAIN DEFENSE IN CART; SHOW RAIN DEFENSE BUTTON
                 const modalData = getAnswer("RainDefenseModal", this.answersCmsData);
                 modalData.SubText = "+$" + this.rainDefenseModal?.listPrice;
@@ -278,27 +295,26 @@ export default {
             }
 
             const modalData = getAnswer("WipersModal", this.answersCmsData);
-            if (!frontWipersInCart) {
+            if (this.wipersOffered === wipersOfferedStrings.BOTH) {
-                if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
+                // NO REAR WIPERS or FRONT WIPERS IN CART; SHOW COMBO BUTTON
-                    // NO REAR WIPERS or FRONT WIPERS IN CART; SHOW COMBO BUTTON
+                const prices = [
-                    const prices = [
+                    this.wipersModal?.totalFrontPrice,
-                        this.wipersModal?.totalFrontPrice,
+                    this.wipersModal?.totalRearPrice,
-                        this.wipersModal?.totalRearPrice,
+                ];
-                    ];
+                prices.sort((a, b) => a - b);
-                    prices.sort((a, b) => a - b);
+                modalData.SubText = "+$" + prices[0] + " - $" + prices[prices.length - 1];
-                    modalData.SubText = "+$" + prices[0] + " - $" + prices[prices.length - 1];
+                buttons.push(modalData);
-                    this.updateWipersOffered(wipersOfferedStrings.BOTH);
+            }
-                    buttons.push(modalData);
+
-                } else {
+            if (this.wipersOffered === wipersOfferedStrings.FRONT) {
-                    // NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON
+                // NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON
-                    modalData.SubText = "+$" + this.wipersModal?.totalFrontPrice;
+                modalData.SubText = "+$" + this.wipersModal?.totalFrontPrice;
-                    this.updateWipersOffered(wipersOfferedStrings.FRONT);
+                buttons.push(modalData);
-                    buttons.push(modalData);
+            }
-                }
+
-            } else if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
+            if (this.wipersOffered === wipersOfferedStrings.REAR) {
                 // NO REAR WIPERS IN CART; SHOW ONLY REAR WIPERS BUTTON
                 modalData.SubText = "+$" + this.wipersModal?.totalRearPrice;
-                this.updateWipersOffered(wipersOfferedStrings.REAR);
                 buttons.push(modalData);
             }
 

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

@@ -77,6 +77,7 @@ export default {
 .payment-method-question {
     .question-text span {
         text-align: left;
+        line-height: 24px;
     }
 }
 </style>

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

@@ -23,14 +23,13 @@
 
                     <cart
                         :damage="damageInfo"
-                        :availableLineItems="availableLineItems"
+                        :availableVaps="availableVaps"
                         :allowItemRemoval="true"
                         v-model="lineItems"
                         servicePackageOptionsCmsName="ServicePackageTitle"
-                        @cart-remove="cartRemove"
                         recyclingModalCmsWidgetName="RecycleModal" />
 
-                    <hr />
+                    <hr class="my-5" />
 
                     <div>
                         <alert
@@ -44,7 +43,7 @@
 
                     <add-vaps-modal-buttons
                         v-model="lineItems"
-                        :availableLineItems="availableLineItems"
+                        :availableVaps="availableVaps"
                         vapsTilesCmsName="VapsProductTiles"
                         @added-to-cart="showAlert" />
 
@@ -93,13 +92,14 @@ import {
 } from "@/helpers/promotions-helper";
 import { queryStrings } from "@/constants/query-strings";
 import { getQuerystringParameter } from "@/helpers/querystring-helper";
+import { deepClone } from "@/helpers/object-helper";
 
 import { Form } from "vee-validate";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
-import { mapTaxedAvailableLineItemsToStoreFormat } from "../../store";
+import { mapTaxedLineItemsToStoreFormat } from "../../store";
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 
@@ -121,12 +121,6 @@ export default {
             "payment-method"
         );
 
-        const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
-            storeActions.GET_SUPPORTING_ITEMS,
-            null,
-            "payment-method"
-        );
-
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
@@ -140,29 +134,25 @@ export default {
                 resultKey: "rainDefense",
                 promise: rainDefensePromise,
             },
-            {
-                resultKey: "supportingItems",
-                promise: supportingItemsPromise,
-            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
+        const lineItemsFromStore = deepClone(store.getters.order.lineItems);
+        const glassParts = lineItemsFromStore.glassParts ?? [];
+        const supportingItems = lineItemsFromStore.supportingItems ?? [];
 
-        const glassParts = store.getters.order.lineItems.glassParts ?? [];
+        const lineItemsToTax = [
-
-        let availableLineItems = [
             resultMap.rainDefense,
-            ...resultMap.supportingItems,
+            ...supportingItems,
             ...resultMap.wipers,
             ...glassParts,
         ];
+        const availableVaps = [resultMap.rainDefense, ...resultMap.wipers];
 
-        const lineItemsFromStore = store.getters.order.lineItems;
+        const pricedLineItemsToTax = await baseMixin.methods.dispatchStoreActionWithLogging(
-
-        await baseMixin.methods.dispatchStoreActionWithLogging(
             storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
             {
-                availableLineItems: availableLineItems,
+                availableLineItems: lineItemsToTax,
             },
             "payment-method",
             false
@@ -177,16 +167,16 @@ export default {
         const { validatePromoResponse, revalidatePromoResponse } =
             await revalidatePromosAndValidateNewPromo(
                 promoCodeFromQueryString,
-                availableLineItems,
+                pricedLineItemsToTax,
                 "payment-method"
             );
 
         const newValidatedPromos = validatePromoResponse?.orderPromos ?? [];
 
-        availableLineItems.push(...newValidatedPromos);
+        pricedLineItemsToTax.push(...newValidatedPromos);
         // End of promo logic
 
-        const taxedAvailableLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
+        const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
             storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
             {
                 billToAccountNumber: "87291",
@@ -195,24 +185,23 @@ export default {
                 serviceLocationCity: store.getters.order.serviceLocation.city,
                 serviceLocationState: store.getters.order.serviceLocation.state,
                 serviceLocationZipCode: store.getters.order.serviceLocation.zipCode,
-                pricedAvailableLineItems: availableLineItems,
+                pricedLineItems: pricedLineItemsToTax,
             },
             "payment-method",
             false
         );
 
-        // Match all available line items to the line items as they are in the store
+        // Match all line items to the line items as they are in the store
         // and rebuild the original structure.
-        const lineItems = mapTaxedAvailableLineItemsToStoreFormat(
+        const lineItems = mapTaxedLineItemsToStoreFormat(taxedLineItems, lineItemsFromStore);
-            availableLineItems,
+        const taxedVaps = mapTaxedLineItemsToStoreFormat(taxedLineItems, availableVaps);
-            lineItemsFromStore
+
-        );
         // Add items that were not in the store yet but added via query string promo validation
         lineItems.promos = lineItems.promos ?? [];
         lineItems.promos.push(...newValidatedPromos);
         const vapsToAddToCart = getVapsThatNeedToBeAddedToSatisfyPromos(
             newValidatedPromos,
-            availableLineItems,
+            taxedVaps,
             lineItems
         );
         lineItems.vaps.push(...vapsToAddToCart);
@@ -220,7 +209,7 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.availableLineItems = taxedAvailableLineItems;
+            vm.availableVaps = taxedVaps;
             vm.lineItems = lineItems;
             vm.updateFooterButtonText(vm.customCtaCopy);
 
@@ -239,7 +228,7 @@ export default {
     data() {
         return {
             lineItems: [],
-            availableLineItems: [],
+            availableVaps: [],
             paymentMethodInternalModel: this.getPaymentMethodFromStore(),
             inactivePromos: this.getInactivePromosFromStore(),
         };
@@ -279,7 +268,7 @@ export default {
             const scheduleReqs = !!(
                 schedule.date &&
                 schedule.startTime &&
-                (!isMobile || schedule.endTime) &&
+                schedule.endTime &&
                 schedule.jobMaxMinutes &&
                 schedule.jobMinMinutes
             );
@@ -422,10 +411,11 @@ export default {
             }
         },
         isPiaDisabled() {
-            const piaExperience =
+            const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
-                this.getSettingValue(experimentSettings.PIA_EXPERIENCE) === "PIA Optional";
 
-            return !piaExperience;
+            const isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required";
+
+            return !isEnabled;
         },
         paymentMethod() {
             if (this.isPiaDisabled) {

src/layouts/payment/payment.vue

@@ -21,6 +21,19 @@
                             scrolling="no">
                         </iframe>
                     </div>
+
+                    <hr />
+
+                    <cart
+                        :damage="damageInfo"
+                        :availableLineItems="availableLineItems"
+                        :allowItemRemoval="false"
+                        v-model="lineItems"
+                        servicePackageOptionsCmsName="ServicePackageTitle"
+                        recyclingModalCmsWidgetName="RecycleModal" />
+
+                    <hr />
+
                     <paymentSwitch
                         cmsWidgetName="PaymentMethodWidget"
                         :paymentType="paymentType"
@@ -163,7 +176,7 @@
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-
+import cart from "@/fmg-components/cart/cart";
 import paymentSwitch from "./payment-switch/payment-switch.vue";
 
 import { storeActions } from "@/constants/store-actions";
@@ -175,6 +188,13 @@ import { applicationConfig } from "@/constants/application-config";
 import { paymentMethods } from "@/constants/payment-method-constants";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 import baseMixin from "@/mixins/base-mixin.js";
+import { mapTaxedLineItemsToStoreFormat } from "../../store";
+import {
+    revalidatePromosAndValidateNewPromo,
+    getAddableVapsFromAvailableLineItems,
+} from "@/helpers/promotions-helper";
+import { queryStrings } from "@/constants/query-strings";
+import { getQuerystringParameter } from "@/helpers/querystring-helper";
 
 import iframeResize from "../../../node_modules/iframe-resizer/js/iframeResizer.js";
 
@@ -207,6 +227,8 @@ export default {
             displayAmount: this.getDisplayAmountDue(),
             piaLineItems: this.getPiaLineItems(),
             paypalPayment: this.isPaypal(),
+            lineItems: [],
+            availableLineItems: [],
         };
     },
     directives: {
@@ -231,6 +253,24 @@ export default {
             "payment"
         );
 
+        const wipersPromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_WIPERS,
+            null,
+            "payment"
+        );
+
+        const rainDefensePromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_RAIN_DEFENSE,
+            null,
+            "payment"
+        );
+
+        const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_SUPPORTING_ITEMS,
+            null,
+            "payment"
+        );
+
         // TODO: Data fetching Promise declarations
 
         const promiseResultMap = [
@@ -242,14 +282,81 @@ export default {
                 resultKey: "signature",
                 promise: signaturePromise,
             },
+            {
+                resultKey: "wipers",
+                promise: wipersPromise,
+            },
+            {
+                resultKey: "rainDefense",
+                promise: rainDefensePromise,
+            },
+            {
+                resultKey: "supportingItems",
+                promise: supportingItemsPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
+        const glassParts = store.getters.order.lineItems.glassParts ?? [];
+
+        let availableLineItems = [
+            resultMap.rainDefense,
+            ...resultMap.supportingItems,
+            ...resultMap.wipers,
+            ...glassParts,
+        ];
+
+        const lineItemsFromStore = store.getters.order.lineItems;
+
+        await baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
+            {
+                availableLineItems: availableLineItems,
+            },
+            "payment",
+            false
+        );
+
+        // Promo logic
+        const promoCodeFromQueryString = getQuerystringParameter(queryStrings.PROMO);
+
+        const { validatePromoResponse, revalidatePromoResponse } =
+            await revalidatePromosAndValidateNewPromo(
+                promoCodeFromQueryString,
+                availableLineItems,
+                "payment-method"
+            );
+
+        availableLineItems.push(...(validatePromoResponse?.orderPromos ?? []));
+        // End of promo logic
+
+        const taxedAvailableLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
+            {
+                billToAccountNumber: "87291",
+                providerNumber: store.getters.order.serviceLocation.provider.providerNumber,
+                appointmentType: store.getters.order.serviceLocation.appointmentType,
+                serviceLocationCity: store.getters.order.serviceLocation.city,
+                serviceLocationState: store.getters.order.serviceLocation.state,
+                serviceLocationZipCode: store.getters.order.serviceLocation.zipCode,
+                pricedAvailableLineItems: availableLineItems,
+            },
+            "payment-method",
+            false
+        );
+
+        // Match all available line items to the line items as they are in the store
+        // and rebuild the original structure.
+        const lineItems = mapTaxedLineItemsToStoreFormat(availableLineItems, lineItemsFromStore);
+
         // Call the "next" function to complete the transition to this page.
         next(async (vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.fetchSignatureInfo(resultMap.signature);
+
+            vm.availableLineItems = taxedAvailableLineItems;
+            vm.lineItems = lineItems;
         });
     },
     computed: {
@@ -276,6 +383,9 @@ export default {
         switchPaymentText() {
             return this.getCmsContent("PaymentMethodWidget", "QuestionText");
         },
+        damageInfo() {
+            return this.$store.getters.damage;
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -312,7 +422,7 @@ export default {
             const scheduleReqs = !!(
                 schedule.date &&
                 schedule.startTime &&
-                (!isMobile || schedule.endTime) &&
+                schedule.endTime &&
                 schedule.jobMaxMinutes &&
                 schedule.jobMinMinutes
             );
@@ -466,6 +576,7 @@ export default {
         funnelHeader,
         navbar,
         loadingModal,
+        cart,
         paymentSwitch,
     },
 };
@@ -474,7 +585,7 @@ export default {
 <style lang="scss">
 .hop-iframe {
     position: relative;
-    min-height: 1120px;
+    min-height: 650px;
     width: 100%;
     border: 0 none;
 }

src/layouts/review/review-block/review-block.vue

@@ -55,4 +55,7 @@ export default {
 :deep(.review-block-content > ul) {
     margin-bottom: 0rem;
 }
+.review-block-content {
+    width: 90%;
+}
 </style>

src/layouts/review/review.vue

@@ -207,7 +207,7 @@ export default {
             const scheduleReqs = !!(
                 schedule.date &&
                 schedule.startTime &&
-                (!isMobile || schedule.endTime) &&
+                schedule.endTime &&
                 schedule.jobMaxMinutes &&
                 schedule.jobMinMinutes
             );

src/layouts/service-location/service-location.spec.js

@@ -286,6 +286,7 @@ describe("service-location.vue", () => {
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
+                zipCodeCtu: "01526",
             };
 
             const serviceZipCodeComponent = wrapper.findComponent({
@@ -316,6 +317,7 @@ describe("service-location.vue", () => {
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
+                zipCodeCtu: "01526",
             };
 
             const mobileLocationQuestions = {
@@ -365,6 +367,7 @@ describe("service-location.vue", () => {
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
+                zipCodeCtu: "01526",
             };
 
             wrapper.vm.selectedAppointmentType = "Inshop";
@@ -395,6 +398,7 @@ describe("service-location.vue", () => {
             const newServiceZipCodeQuestion = {
                 zipCode: "45433",
                 state: "OH",
+                zipCodeCtu: "01526",
             };
 
             // Act
@@ -511,11 +515,13 @@ describe("service-location.vue", () => {
             wrapper.vm.serviceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
+                zipCodeCtu: "01526",
             };
 
             const newServiceZipCodeInfo = {
                 state: "OH",
                 zipCode: "43081",
+                zipCodeCtu: "01526",
             };
 
             // Act

src/layouts/service-location/service-location.vue

@@ -245,6 +245,7 @@ export default {
                 return {
                     state: this.state,
                     zipCode: this.zipCode,
+                    zipCodeCtu: this.zipCodeCtu,
                 };
             },
             set: function (newValue) {
@@ -256,6 +257,7 @@ export default {
 
                 this.state = newValue.state;
                 this.zipCode = newValue.zipCode;
+                this.zipCodeCtu = newValue.zipCodeCtu;
 
                 this.$nextTick();
             },

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js

@@ -113,6 +113,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "",
             zipCode: "",
+            zipCodeCtu: "",
         };
 
         // Arrange
@@ -135,6 +136,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "OH",
             zipCode: "43235",
+            zipCodeCtu: "01820",
         };
 
         const wrapper = mount(serviceZipModalQuestion, {
@@ -156,6 +158,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
+            zipCodeCtu: "01526",
         };
 
         const zip = "43235";
@@ -176,7 +179,7 @@ describe("service-zip-modal-question.vue", () => {
 
         await wrapper.vm.setZipCode();
 
-        let expectedEmit = [[{ state: "OH", zipCode: "43235" }]];
+        let expectedEmit = [[{ state: "OH", zipCode: "43235", zipCodeCtu: "01820" }]];
 
         // Assert
         expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit);
@@ -187,6 +190,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
+            zipCodeCtu: "01526",
         };
 
         const zip = "";
@@ -214,6 +218,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
+            zipCodeCtu: "01526",
         };
 
         const zip = "11111";
@@ -241,6 +246,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
+            zipCodeCtu: "01526",
         };
 
         const zip = "";
@@ -269,6 +275,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
+            zipCodeCtu: "01526",
         };
 
         const zip = "123";

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -141,6 +141,7 @@ export default {
                     this.resetModalButtonStyle();
                 } else {
                     this.internalModel.state = zipCodeData.state;
+                    this.internalModel.zipCodeCtu = zipCodeData.zipCodeCtu;
 
                     // retrieve mobile fee part
                     const serviceZipCode = this.internalModel.zipCode;

src/mixins/base-mixin.js

@@ -95,7 +95,7 @@ export default {
         filterOutFees(lineItems) {
             const filteredLineItems = lineItems.filter((item) => {
                 return (
-                    !item.partType.includes("FEE") ||
+                    (!item.partType.includes("FEE") && !item.partType.includes("EARLY BIRD")) ||
                     (item.partType === "REPAIR FEE" && item.partNumber != "SUPPLIES-REPAIR")
                 );
             });

src/store/index.js

@@ -127,6 +127,7 @@ const getDefaultState = () => {
             eon: null,
             workOrderNumber: null,
             customerPortalLoginToken: null,
+            lockToken: null,
         },
         applicationUser: {
             eventBus: [],
@@ -249,6 +250,9 @@ export const mutations = {
     updateCustomerPortalLoginToken(state, customerPortalLoginToken) {
         state.order.customerPortalLoginToken = customerPortalLoginToken;
     },
+    updateLockToken(state, lockToken) {
+        state.order.lockToken = lockToken;
+    },
     updateCCToken(state, ccToken) {
         state.order.payment.ccToken.subscriptionId = ccToken.subscriptionId;
         state.order.payment.ccToken.expMonth = ccToken.expMonth;
@@ -1022,6 +1026,7 @@ export const actions = {
             crmCustomerId,
             workOrderNumber,
             customerPortalLoginToken,
+            lockToken,
         }
     ) {
         context.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber);
@@ -1033,7 +1038,15 @@ export const actions = {
         context.commit(storeMutations.UPDATE_SAVED_SESSION_ID, savedSessionId);
         context.commit(storeMutations.UPDATE_CRM_CUSTOMER_ID, crmCustomerId);
         context.commit(storeMutations.WORK_ORDER_NUMBER, workOrderNumber);
-        context.commit(storeMutations.Customer_Portal_Login_Token, customerPortalLoginToken);
+        context.commit(storeMutations.LOCK_TOKEN, lockToken);
+
+        // if we already have the token, do not update it.  pia does 2 work order submits and the value is not persisted after the first submit
+        if (
+            state.order.customerPortalLoginToken != null &&
+            state.order.customerPortalLoginToken != "00000000-0000-0000-0000-000000000000"
+        ) {
+            context.commit(storeMutations.Customer_Portal_Login_Token, customerPortalLoginToken);
+        }
     },
 
     logPageView(
@@ -1707,6 +1720,7 @@ export const actions = {
                     referralSequenceNumber: order.referralSequenceNumber,
                     eon: order.eon,
                     createDeleteStatusWorkOrderForPia: createDeleteStatusWorkOrderForPia,
+                    lockToken: order.lockToken,
                 },
             },
             logApiCall: true,
@@ -2181,13 +2195,13 @@ export const actions = {
                 serviceLocationCity,
                 serviceLocationState,
                 serviceLocationZipCode,
-                pricedAvailableLineItems,
+                pricedLineItems,
             },
             pageNameToLog,
         }
     ) {
         const flattenedLineItemsWithChildParts =
-            getFlattenedArrayOfLineItemsWithChildParts(pricedAvailableLineItems);
+            getFlattenedArrayOfLineItemsWithChildParts(pricedLineItems);
 
         const lineItemsWithOnlyPriceInfo = flattenedLineItemsWithChildParts.map((lineItem) => ({
             partNumber: lineItem.partNumber,
@@ -2236,12 +2250,9 @@ export const actions = {
 
         context.commit(storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA, response.data.serverData);
 
-        pricedAvailableLineItems = addTaxesToPricedLineItems(
+        pricedLineItems = addTaxesToPricedLineItems(pricedLineItems, response.data.taxedLineItems);
-            pricedAvailableLineItems,
-            response.data.taxedLineItems
-        );
 
-        return pricedAvailableLineItems;
+        return pricedLineItems;
     },
 
     // The <addableVaps> parameter is an array of ALL available front wipers and rain defense
@@ -2611,7 +2622,7 @@ function addTaxesToPricedLineItems(pricedLineItems, taxingLineItems = []) {
     return pricedLineItems;
 }
 
-export function mapTaxedAvailableLineItemsToStoreFormat(availableLineItems, storeLineItems) {
+export function mapTaxedLineItemsToStoreFormat(availableLineItems, storeLineItems) {
     // clone the lineItems array because what we're passing in is referencing the store directly
     const lineItems = deepClone(storeLineItems);