diff --git a/public/css/README.md b/public/css/README.md
index f08e6c6d7..74cd82e39 100644
--- a/public/css/README.md
+++ b/public/css/README.md
@@ -3,11 +3,11 @@
 This public/css folder uses a standalone .scss > .css setup.
 ## Usage
 
-From a Terminal window, run the Sass Watch command on this folder only:
+From a Terminal window, run the Sass Watch command from the public folder only:
 
 ```bash
-sass --no-source-map --watch public/css/hop-styling.scss:public/css/hop-styling.css
+sass --no-source-map --watch scss:css
 ```
-This will output a CSS file that can be consumed by the Payment page.
+This will compile and output .css files (into the public/css folder) that can be consumed by the Payment page.
 
-# Do not use the .css file on its own. You must use the .scss file and have Sass compile it to the .css file.
+# Do not use the .css files on their own. You must use the .scss files and have Sass compile them to .css files.
diff --git a/public/css/site-2020Styling.css b/public/css/site-2020Styling.css
new file mode 100644
index 000000000..4aacb297d
--- /dev/null
+++ b/public/css/site-2020Styling.css
@@ -0,0 +1,90 @@
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* Style the modal when PayPal button is selected */
+#pageLoadingModal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.35);
+  display: flex;
+}
+#pageLoadingModal .modal-content {
+  margin: auto auto;
+}
+#pageLoadingModal p {
+  margin: 0;
+  text-transform: uppercase;
+  font-size: 14px;
+}
+#pageLoadingModal .modal {
+  display: none;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+}
+#pageLoadingModal .modal-content {
+  position: relative;
+  background-color: #fff;
+  border-radius: 8px;
+  background-clip: padding-box;
+  outline: 0;
+  width: 168px;
+  height: 168px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#pageLoadingModal .modal-content:before, #pageLoadingModal .modal-content:after {
+  content: "";
+  border-radius: 50%;
+  position: absolute;
+  inset: 0;
+  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25) inset;
+  top: 24px;
+  bottom: 24px;
+  right: 24px;
+  left: 24px;
+}
+#pageLoadingModal .modal-content:after {
+  box-shadow: 0 3px 0 #da291c inset;
+  animation: rotate 1s linear infinite;
+}
+#pageLoadingModal .modal-backdrop {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  background-color: #000000;
+}
+#pageLoadingModal .modal-backdrop.fade {
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+#pageLoadingModal.hide {
+  display: none;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.creditCardSpecific {
+  display: none;
+}
diff --git a/public/css/hop-styling.scss b/public/scss/hop-styling.scss
similarity index 100%
rename from public/css/hop-styling.scss
rename to public/scss/hop-styling.scss
diff --git a/public/scss/site-2020Styling.scss b/public/scss/site-2020Styling.scss
new file mode 100644
index 000000000..4630bfdfc
--- /dev/null
+++ b/public/scss/site-2020Styling.scss
@@ -0,0 +1,95 @@
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+
+/* Style the modal when PayPal button is selected */
+#pageLoadingModal {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1040;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.35);
+    display: flex;
+
+    .modal-content {
+        margin: auto auto;
+    }
+
+    p {
+        margin: 0;
+        text-transform: uppercase;
+        font-size: 14px;
+    }
+
+    .modal {
+        display: none;
+        overflow: hidden;
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1040;
+        -webkit-overflow-scrolling: touch;
+        outline: 0;
+    }
+
+    .modal-content {
+        position: relative;
+        background-color: #fff;
+        border-radius: 8px;
+        background-clip: padding-box;
+        outline: 0;
+        width: 168px;
+        height: 168px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &:before,
+        &:after {
+            content: '';
+            border-radius: 50%;
+            position: absolute;
+            inset: 0;
+            box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25) inset;
+            top: 24px;
+            bottom: 24px;
+            right: 24px;
+            left: 24px;
+        }
+        &:after {
+            box-shadow: 0 3px 0 #da291c inset;
+            animation: rotate 1s linear infinite;
+        }
+    }
+
+    .modal-backdrop {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        background-color: #000000;
+        &.fade {
+            opacity: 0;
+            filter: alpha(opacity=0);
+        }
+    }
+
+    &.hide {
+        display: none;
+    }
+}
+
+@keyframes rotate {
+    0% {  transform: rotate(0)}
+    100% { transform: rotate(360deg)}
+}
+
+.creditCardSpecific {
+    display: none;
+}
diff --git a/src/constants/cart-item-categories.js b/src/constants/cart-item-categories.js
new file mode 100644
index 000000000..509cc626b
--- /dev/null
+++ b/src/constants/cart-item-categories.js
@@ -0,0 +1,8 @@
+const cartItemCategories = {
+    VAPS: "vaps",
+    GLASS_PARTS: "glassParts",
+    SUPPORTING_ITEMS: "supportingItems",
+    PROMOS: "promos",
+};
+
+export { cartItemCategories };
diff --git a/src/constants/cart-item-types.js b/src/constants/cart-item-types.js
new file mode 100644
index 000000000..62bc40012
--- /dev/null
+++ b/src/constants/cart-item-types.js
@@ -0,0 +1,11 @@
+const cartItemTypes = {
+    FRONT_WIPER: "FRONT WIPER",
+    REAR_WIPER: "REAR WIPER",
+    SUPPORTING_ITEMS: "SUPPORTING ITEMS",
+    GLASS_PARTS: "GLASS PARTS",
+    RAIN_DEFENSE: "RAIN DEFENSE",
+    RECYCLE_FEE: "RECYCLE FEE",
+    MOBILE_FEE: "MOBILE FEE",
+};
+
+export { cartItemTypes };
diff --git a/src/constants/part-type-strings.js b/src/constants/part-type-strings.js
index 2dfab2071..50d92832c 100644
--- a/src/constants/part-type-strings.js
+++ b/src/constants/part-type-strings.js
@@ -3,6 +3,8 @@ const partTypeStrings = {
     REAR_WIPER: "REAR WIPER",
     RAIN_DEFENSE: "RAIN DEFENSE",
     RECALIBRATION: "RECALIBRATION",
+    RECYCLE_FEE: "RECYCLE FEE",
+    MOBILE_FEE: "MOBILE FEE",
 };
 
 export { partTypeStrings };
diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index ee67ff77d..bb2ef16a0 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -89,8 +89,6 @@ const storeActions = {
     SAVE_PROMOS: "savePromos",
     SAVE_CUSTOMER_DETAILS: "saveCustomerDetails",
     SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
-    SAVE_WORK_ORDER_FLAG: "saveWorkOrderFlag",
-    SAVE_PIA_WORK_ORDER: "savePiaWorkOrder",
     SAVE_CCTOKEN: "saveCCToken",
     SAVE_PAYPAL_TOKEN: "savePaypalToken",
 };
diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index ca0afadf2..b7ac47d38 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -1,7 +1,5 @@
 const storeMutations = {
     // PAYMENT MUTATIONS
-    UPDATE_WORK_ORDER_FLAG: "updateWorkOrderFlag",
-    UPDATE_PIA_WORK_ORDER: "updatePiaWorkOrder",
     UPDATE_CCTOKEN: "updateCCToken",
     UPDATE_PAYPAL_TOKEN: "updatePaypalToken",
 
diff --git a/src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue b/src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
index 05ea8504b..11ee74e32 100644
--- a/src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
+++ b/src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
@@ -92,11 +92,11 @@ export default {
                 answers.push(answer);
             }
 
-            if (this.showAddRainDefense) {
-                const answer = getAnswer("RainDefenseModal", this.answersCmsData);
-                answer.SubText = "+$" + this.rainDefensePrice;
-                answers.push(answer);
-            }
+            // if (this.showAddRainDefense) {
+            //     const answer = getAnswer("RainDefenseModal", this.answersCmsData);
+            //     answer.SubText = "+$" + this.rainDefensePrice;
+            //     answers.push(answer);
+            // }
 
             return answers;
         },
diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index cca06cbca..c48f48582 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -1,60 +1,71 @@
 <template>
     <div class="cart">
-        <div class="container-fluid px-0">
+        <div class="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">{{ amountDueText }}</span
                     ><span class="label amount-due">{{ currencyFormatter.format(amountDue) }}</span>
                 </div>
             </div>
             <div class="price-table">
                 <div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
-                    <textBlock :cmsWidgetName="packageNameWidget" /><span>{{
+                    <textBlock :cmsWidgetName="servicePackageTitleWidget" /><span>{{
                         currencyFormatter.format(packagePrice)
                     }}</span>
                 </div>
+
+                <!-- Packaged Cart Items -->
                 <div
-                    v-for="(lineItem, i) in displayedPackageLineItems"
+                    v-for="(cartItem, i) in packageCartItems"
                     :key="i"
-                    :class="[this.displayedPackageLineItems ? 'vaps' : '']">
-                    <span>{{ lineItem.name }}</span>
+                    :class="[this.packageCartItems ? 'vaps' : '']">
+                    <span>{{ cartItem.name }}</span>
                     <textLink
                         ref="removeLink"
                         linkType="text"
-                        text="removeLinkText"
+                        :text="removeLinkText"
                         href="#!"
-                        @click-event="removeItem(lineItem)" />
+                        @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
                 </div>
+
+                <!-- Nonpackaged Cart Items -->
                 <hr style="background: red" />
-                <div
-                    v-for="(lineItem, i) in displayedNonPackageLineItems"
-                    :key="i"
-                    :class="[this.displayedNonPackageLineItems ? 'vaps' : '']">
-                    <span>{{ lineItem.name }}</span>
+                <div v-for="(cartItem, i) in nonpackageCartItems" :key="i">
+                    <span>{{ cartItem.name }}</span>
                     <textLink
                         ref="removeLink"
                         linkType="text"
-                        text="removeLinkText"
+                        :text="removeLinkText"
                         href="#!"
-                        @click-event="removeItem(lineItem)" />
-                    <span>{{ lineItem.price }}</span>
+                        @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
+                    <span>{{ currencyFormatter.format(cartItem.subTotal) }}</span>
                 </div>
-                <div v-if="hasRecycleLineItem">
-                    <span>{{ recycleLabel }}</span
-                    ><span>{{ recycleFee }}</span>
+
+                <!-- Fees -->
+                <div v-if="recycleFeeCartItem">
+                    <span>{{ recycleFeeCartItem.name }}</span
+                    ><span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
                 </div>
+                <div v-if="mobileFeeCartItem">
+                    <span>{{ mobileFeeCartItem.name }}</span
+                    ><span>{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}</span>
+                </div>
+
                 <!-- Sub total, sales tax, total columns -->
                 <div class="sub-total">
-                    <span>Subtotal</span><span>{{ currencyFormatter.format(subTotal) }}</span>
+                    <span>{{ subtotalText }}</span
+                    ><span>{{ currencyFormatter.format(subTotal) }}</span>
                 </div>
                 <div class="sales-tax">
-                    <span>Sales tax</span><span>{{ currencyFormatter.format(salesTax) }}</span>
+                    <span>{{ salesTaxText }}</span
+                    ><span>{{ currencyFormatter.format(salesTax) }}</span>
                 </div>
                 <div class="amount-due">
-                    <span>Amount due</span><span>{{ currencyFormatter.format(amountDue) }}</span>
+                    <span>{{ amountDueText }}</span
+                    ><span>{{ currencyFormatter.format(amountDue) }}</span>
                 </div>
             </div>
         </div>
@@ -63,22 +74,23 @@
 
 <script>
 import baseMixin from "@/mixins/base-mixin.js";
-import {
-    getHighestFullySatisfiedTier,
-    containsLineItemWithPartType,
-    getPackageContents,
-    findLineItemsWithPartType,
-} from "@/helpers/service-package-helper";
+import { getHighestFullySatisfiedTier, getPackageContents } from "@/helpers/service-package-helper";
+
 import textLink from "@/ux-components/text-link/text-link";
 import textBlock from "@/digital-components/text-block/text-block";
+import { LineItemUtilities } from "@/store";
+import { deepClone } from "@/helpers/object-helper";
+import { partTypeStrings } from "@/constants/part-type-strings";
+import { cartItemCategories } from "@/constants/cart-item-categories";
+import { cartItemTypes } from "@/constants/cart-item-types";
 
 export default {
-    name: "modal",
+    name: "cart",
     props: {
+        modelValue: Object,
         damage: Object,
         servicePackageOptionsCmsName: String,
         availableLineItems: Object,
-        lineItems: Object,
     },
     data() {
         return {
@@ -88,6 +100,8 @@ export default {
                 style: "currency",
                 currency: "USD",
             }),
+            lineItems: deepClone(this.modelValue),
+            lineItemUtilities: new LineItemUtilities(),
         };
     },
     methods: {
@@ -95,23 +109,17 @@ export default {
             this.isActive = !this.isActive;
         },
         getVapsPrice(packageName) {
-            const vapsItems = this.getVapsLineItemsForSelectedPackage(packageName);
+            const vapsItems = this.getVapsCartItemsForSelectedPackage(packageName);
 
-            let price = 0;
+            let subTotal = 0;
 
             vapsItems.forEach((item) => {
-                price += baseMixin.methods.getTotalLineItemPrice(item);
+                subTotal += item.subTotal; //    baseMixin.methods.getTotalLineItemPrice(item);
             });
 
-            return price;
+            return subTotal;
         },
-        getAmountDue() {
-            return baseMixin.methods.getDisplayAmountDue(this.storeLineItems);
-        },
-        removeItem(item) {
-            this.$emit("cart-remove", item);
-        },
-        getVapsLineItemsForSelectedPackage(packageName) {
+        getVapsCartItemsForSelectedPackage(packageName) {
             const packageContentTypes = getPackageContents(
                 this.glassToReplace,
                 this.availableLineItems,
@@ -119,18 +127,83 @@ export default {
                 packageName
             );
 
-            let vapsLineItemsForSelectedPackage = [];
+            let vapsCartItemsForSelectedPackage = [];
 
-            packageContentTypes.forEach((vapType) => {
-                vapsLineItemsForSelectedPackage.push(
-                    ...findLineItemsWithPartType(vapType, this.availableLineItems)
-                );
+            console.log(this.cartItems);
+            console.log(packageContentTypes);
+            this.cartItems.forEach((cartItem) => {
+                packageContentTypes.forEach((vapType) => {
+                    if (vapType == cartItem.cartItemType) {
+                        vapsCartItemsForSelectedPackage.push(cartItem);
+                    }
+                });
             });
-            return vapsLineItemsForSelectedPackage;
+
+            return vapsCartItemsForSelectedPackage;
+        },
+        getCmsContentForVapsType(vapsType) {
+            const vapsItemDescriptions = this.getCmsContent("VapsItemDescriptions", "Answers");
+
+            if (!vapsItemDescriptions) {
+                return "";
+            }
+
+            const vapsTypeName = vapsItemDescriptions.find((entry) => entry.Name === vapsType);
+
+            return vapsTypeName.Text;
+        },
+        removeItem(cartItemType, category) {
+            console.log(
+                this.lineItems[category].filter(
+                    (lineItemsToKeep) => lineItemsToKeep.cartItemType != cartItemType
+                )
+            );
+            this.lineItems[category] = this.lineItems[category].filter(
+                (lineItemsToKeep) => lineItemsToKeep.cartItemType != cartItemType
+            );
+
+            //console.log(`lineItemToDelete: ${lineItemIdToDelete}`)
+
+            this.$emit("update:modelValue", this.lineItems);
         },
     },
     computed: {
-        packageNameWidget() {
+        cartItems: {
+            get: function () {
+                let cartItems = [];
+
+                if (this.frontWipersCartItem) {
+                    cartItems.push(this.frontWipersCartItem);
+                }
+
+                if (this.rearWipersCartItem) {
+                    cartItems.push(this.rearWipersCartItem);
+                }
+
+                if (this.rainDefenseCartItem) {
+                    cartItems.push(this.rainDefenseCartItem);
+                }
+
+                if (this.glassPartsCartItem) {
+                    cartItems.push(this.glassPartsCartItem);
+                }
+
+                if (this.supportingItemsCartItem) {
+                    cartItems.push(this.supportingItemsCartItem);
+                }
+
+                if (this.recycleFeeCartItem) {
+                    cartItems.push(this.recycleFeeCartItem);
+                }
+
+                if (this.mobileFeeCartItem) {
+                    cartItems.push(this.mobileFeeCartItem);
+                }
+
+                return cartItems;
+            },
+        },
+        servicePackageTitleWidget() {
             const servicePackageNames = this.getCmsContent(
                 this.servicePackageOptionsCmsName,
                 "Answers"
@@ -167,62 +240,20 @@ export default {
 
             return packagePrice;
         },
-        displayedPackageLineItems() {
-            const displayedPackageLineItems = [];
-            const packageLineItems = this.getVapsLineItemsForSelectedPackage(this.packageLevel);
+        isRepair() {
+            if (!this.damage) {
+                return;
+            }
 
-            // TODO Determine if we could get the same list from this.lineItems?
-            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);
-            });
-
-            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;
+            return this.damage.isRepair;
         },
         glassToReplace() {
             if (!this.damage) {
                 return;
             }
+
             return this.damage.glassToReplace;
         },
-        isRepair() {
-            if (!this.damage) {
-                return;
-            }
-            return this.damage.isRepair;
-        },
         vaps() {
             const vaps = this.lineItems?.vaps;
             return vaps?.length > 0 ? vaps : [];
@@ -231,40 +262,294 @@ export default {
             const supportingItems = this.lineItems?.supportingItems;
             return supportingItems?.length > 0 ? supportingItems : [];
         },
+        // Cart Items
+        packageCartItems() {
+            return this.getVapsCartItemsForSelectedPackage(this.packageLevel);
+        },
+        nonpackageCartItems() {
+            const nonpackageCartItems = [];
+
+            console.log("packageCartItems");
+
+            this.cartItems.forEach((cartItem) => {
+                if (cartItem == this.recycleFeeCartItem || cartItem == this.mobileFeeCartItem) {
+                    return;
+                }
+
+                if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) {
+                    if (cartItem.isDisplayed) {
+                        nonpackageCartItems.push(cartItem);
+                    }
+                }
+            });
+
+            return nonpackageCartItems;
+        },
+        frontWiperCartItemName() {
+            return this.getCmsContentForVapsType(partTypeStrings.FRONT_WIPER);
+        },
+        frontWipersCartItem() {
+            let cartItem = null;
+
+            const frontWiperLineItems = this.vaps.filter(
+                (vapsLineItem) => vapsLineItem.partType == partTypeStrings.FRONT_WIPER
+            );
+
+            if (frontWiperLineItems.length > 0) {
+                cartItem = {
+                    name: this.frontWiperCartItemName,
+                    category: cartItemCategories.VAPS,
+                    cartItemType: cartItemTypes.FRONT_WIPER,
+                    isDisplayed: true,
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                frontWiperLineItems.forEach((lineItem) => {
+                    lineItem.cartItemType = cartItem.cartItemType;
+                    cartItem.lineItems.push(lineItem);
+
+                    cartItem.subTotal +=
+                        (lineItem.kitPrice ?? 0) +
+                        (lineItem.laborAmount ?? 0) +
+                        (lineItem.sellingPrice ?? 0);
+
+                    cartItem.salesTax += lineItem.salesTax ?? 0;
+                });
+            }
+
+            return cartItem;
+        },
+        rearWiperCartItemName() {
+            return this.getCmsContentForVapsType(partTypeStrings.REAR_WIPER);
+        },
+        rearWipersCartItem() {
+            let cartItem = null;
+
+            const rearWiperLineItems = this.vaps.filter(
+                (vapsLineItem) => vapsLineItem.partType == partTypeStrings.REAR_WIPER
+            );
+
+            if (rearWiperLineItems.length > 0) {
+                cartItem = {
+                    name: this.rearWiperCartItemName,
+                    category: cartItemCategories.VAPS,
+                    cartItemType: cartItemTypes.REAR_WIPER,
+                    isDisplayed: true,
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                rearWiperLineItems.forEach((lineItem) => {
+                    lineItem.cartItemType = cartItem.cartItemType;
+                    cartItem.lineItems.push(lineItem);
+
+                    cartItem.subTotal +=
+                        (lineItem.kitPrice ?? 0) +
+                        (lineItem.laborAmount ?? 0) +
+                        (lineItem.sellingPrice ?? 0);
+
+                    cartItem.salesTax += lineItem.salesTax ?? 0;
+                });
+            }
+
+            return cartItem;
+        },
+        rainDefenseCartItemName() {
+            return this.getCmsContentForVapsType(partTypeStrings.RAIN_DEFENSE);
+        },
+        rainDefenseCartItem() {
+            let cartItem = null;
+
+            const rainDefenseLineItem = this.vaps.find(
+                (vapsLineItem) => vapsLineItem.partType == partTypeStrings.RAIN_DEFENSE
+            );
+
+            if (rainDefenseLineItem) {
+                cartItem = {
+                    name: this.getCmsContentForVapsType(partTypeStrings.RAIN_DEFENSE),
+                    category: cartItemCategories.VAPS,
+                    cartItemType: cartItemTypes.RAIN_DEFENSE,
+                    isDisplayed: true,
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                rainDefenseLineItem.cartItemType = cartItem.cartItemType;
+                cartItem.lineItems.push(rainDefenseLineItem);
+
+                cartItem.subTotal +=
+                    (rainDefenseLineItem.kitPrice ?? 0) +
+                    (rainDefenseLineItem.laborAmount ?? 0) +
+                    (rainDefenseLineItem.sellingPrice ?? 0);
+
+                cartItem.salesTax += rainDefenseLineItem.salesTax ?? 0;
+            }
+
+            return cartItem;
+        },
+        glassPartsCartItem() {
+            let cartItem = null;
+
+            const flattenedGlassPartsLineItems =
+                this.lineItemUtilities.getFlattenedArrayOfLineItemsWithChildParts(
+                    this.lineItems.glassParts
+                );
+
+            if (flattenedGlassPartsLineItems.length > 0) {
+                cartItem = {
+                    name: null,
+                    category: cartItemCategories.GLASS_PARTS,
+                    cartItemType: cartItemTypes.GLASS_PARTS,
+                    isDisplayed: false,
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                flattenedGlassPartsLineItems.forEach((lineItem) => {
+                    lineItem.cartItemType = cartItem.cartItemType;
+                    cartItem.lineItems.push(lineItem);
+
+                    cartItem.subTotal +=
+                        (lineItem.kitPrice ?? 0) +
+                        (lineItem.laborAmount ?? 0) +
+                        (lineItem.sellingPrice ?? 0);
+
+                    cartItem.salesTax += lineItem.salesTax ?? 0;
+                });
+            }
+
+            return cartItem;
+        },
+        supportingItemsCartItem() {
+            let cartItem = null;
+
+            if (this.supportingItems.length > 0) {
+                cartItem = {
+                    name: null,
+                    category: cartItemCategories.SUPPORTING_ITEMS,
+                    cartItemType: cartItemTypes.SUPPORTING_ITEMS,
+                    isDisplayed: false,
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                this.supportingItems.forEach((lineItem) => {
+                    lineItem.cartItemType = cartItem.cartItemType;
+                    cartItem.lineItems.push(lineItem);
+
+                    cartItem.subTotal +=
+                        (lineItem.kitPrice ?? 0) +
+                        (lineItem.laborAmount ?? 0) +
+                        (lineItem.sellingPrice ?? 0);
+
+                    cartItem.salesTax += lineItem.salesTax ?? 0;
+                });
+            }
+
+            return cartItem;
+        },
+        recycleFeeCartItemName() {
+            return this.getCmsContent("RecycleFeeTextWidget", "Text");
+        },
+        recycleFeeCartItem() {
+            let cartItem = null;
+
+            const recycleFeeLineItem = this.supportingItems.find(
+                (supportingItem) => supportingItem.partNumber == partTypeStrings.RECYCLE_FEE
+            );
+
+            if (recycleFeeLineItem) {
+                cartItem = {
+                    name: this.recycleFeeCartItemName,
+                    category: cartItemCategories.SUPPORTING_ITEMS,
+                    cartItemType: cartItemTypes.RECYCLE_FEE,
+                    isDisplayed: true,
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                recycleFeeLineItem.cartItemType = cartItem.cartItemType;
+                cartItem.lineItems.push(recycleFeeLineItem);
+
+                cartItem.subTotal +=
+                    (recycleFeeLineItem.kitPrice ?? 0) +
+                    (recycleFeeLineItem.laborAmount ?? 0) +
+                    (recycleFeeLineItem.sellingPrice ?? 0);
+
+                cartItem.salesTax += recycleFeeLineItem.salesTax ?? 0;
+            }
+
+            return cartItem;
+        },
+        mobileFeeCartItemName() {
+            return this.getCmsContent("MobileServiceTextWidget", "Text");
+        },
+        mobileFeeCartItem() {
+            let cartItem = null;
+
+            const mobileFeeLineItem = this.supportingItems.find(
+                (lineItem) => lineItem.partNumber == partTypeStrings.MOBILE_FEE
+            );
+
+            if (mobileFeeLineItem) {
+                cartItem = {
+                    name: this.mobileFeeCartItemName,
+                    category: cartItemCategories.SUPPORTING_ITEMS,
+                    cartItemType: cartItemTypes.MOBILE_FEE,
+                    isDisplayed: true,
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                mobileFeeLineItem.cartItemType = cartItem.cartItemType;
+                cartItem.lineItems.push(mobileFeeLineItem);
+
+                cartItem.subTotal +=
+                    (mobileFeeLineItem.kitPrice ?? 0) +
+                    (mobileFeeLineItem.laborAmount ?? 0) +
+                    (mobileFeeLineItem.sellingPrice ?? 0);
+
+                cartItem.salesTax += mobileFeeLineItem.salesTax ?? 0;
+            }
+
+            return cartItem;
+        },
         removeLinkText() {
-            return "Remove"; // TODO: get from CMS
+            return this.getCmsContent("RemoveCartItemTextWidget", "Text");
         },
-        recycleLabel() {
-            return "Recycling";
+        recycleFeeText() {
+            return this.getCmsContent("RecycleFeeTextWidget", "Text");
         },
-        recycleFee() {
-            return "$35.00";
+        salesTaxText() {
+            return this.getCmsContent("SalesTaxTextWidget", "Text");
         },
-        hasRecycleLineItem() {
-            //TO DO
-            // if (this.lineItems.supportingItems[0].partNumber === "RECYCLE FEE") {
-            //     return true;
-            // } else {
-            //     return false;
-            // }
-            return true;
+        amountDueText() {
+            return this.getCmsContent("AmountDueTextWidget", "Text");
+        },
+        subtotalText() {
+            return this.getCmsContent("SubtotalTextWidget", "Text");
         },
         subTotal() {
             let subTotal = 0;
 
-            this.lineItems.forEach((lineItem) => {
-                subTotal +=
-                    (lineItem.kitPrice ?? 0) +
-                    (lineItem.laborAmount ?? 0) +
-                    (lineItem.sellingPrice ?? 0);
+            this.cartItems.forEach((cartItem) => {
+                subTotal += cartItem.subTotal;
             });
 
             return subTotal;
         },
         salesTax() {
             let salesTax = 0;
-            this.lineItems.forEach((lineItem) => {
-                salesTax += lineItem.salesTax;
+            this.cartItems.forEach((cartItem) => {
+                salesTax += cartItem.salesTax ?? 0;
             });
 
             return salesTax;
@@ -273,6 +558,14 @@ export default {
             return this.subTotal + this.salesTax;
         },
     },
+    watch: {
+        modelValue: {
+            handler(newValue) {
+                this.lineItems = deepClone(newValue);
+            },
+            deep: true,
+        },
+    },
     components: {
         textBlock,
         textLink,
diff --git a/src/helpers/heritage-integration/order-helper.js b/src/helpers/heritage-integration/order-helper.js
index 91f4768f3..01a5a780f 100644
--- a/src/helpers/heritage-integration/order-helper.js
+++ b/src/helpers/heritage-integration/order-helper.js
@@ -53,17 +53,30 @@ export async function loadSessionIfPresent(isConceptInsurance, pageNameToLog) {
     This will also set Referral information in the store after saving, and then
     update the cookie. To force synchronous behavior pass in 'true' for shouldAwaitSaveSessionQueue
 */
-export async function saveSession({ pageNameToLog, shouldAwaitSaveSessionQueue = false }) {
+export async function saveSession({
+    pageNameToLog,
+    shouldAwaitSaveSessionQueue = false,
+    submitAfterSave = false,
+    createDeleteStatusWorkOrderForPia = false,
+}) {
     var saveSessionPromise;
     if (store.getters.applicationUser.saveSessionPromise) {
         // queue newest request after current saveSessionPromise resolves
         saveSessionPromise = store.getters.applicationUser.saveSessionPromise.then(() => {
             // get a new saveSessionPromise
-            return saveSessionHelper(pageNameToLog);
+            return saveSessionHelper(
+                pageNameToLog,
+                submitAfterSave,
+                createDeleteStatusWorkOrderForPia
+            );
         });
     } else {
         // create an initial saveSessionPromise
-        saveSessionPromise = saveSessionHelper(pageNameToLog);
+        saveSessionPromise = saveSessionHelper(
+            pageNameToLog,
+            submitAfterSave,
+            createDeleteStatusWorkOrderForPia
+        );
     }
     store.commit(storeMutations.UPDATE_SAVE_SESSION_PROMISE, saveSessionPromise);
     // await here to allow for a caller to await and make the function synchronous
@@ -72,10 +85,16 @@ export async function saveSession({ pageNameToLog, shouldAwaitSaveSessionQueue =
     }
 }
 
-export async function submitWorkOrder({ pageNameToLog }) {
+export async function submitWorkOrder({
+    pageNameToLog,
+    submitAfterSave = false,
+    createDeleteStatusWorkOrderForPia = false,
+}) {
     await saveSession({
         pageNameToLog: pageNameToLog,
         shouldAwaitSaveSessionQueue: true,
+        submitAfterSave: submitAfterSave,
+        createDeleteStatusWorkOrderForPia: createDeleteStatusWorkOrderForPia,
     });
 }
 
@@ -117,10 +136,17 @@ async function loadSession(
 /*
     Encapsulates asynchronous Save Session logic inside a promise to allow for Save Session queuing 
 */
-async function saveSessionHelper(pageNameToLog) {
+async function saveSessionHelper(
+    pageNameToLog,
+    submitAfterSave = false,
+    createDeleteStatusWorkOrderForPia = false
+) {
     const savedSessionInfo = await baseMixin.methods.dispatchStoreActionWithLogging(
         storeActions.SAVE_SESSION,
-        null,
+        {
+            submitAfterSave: submitAfterSave,
+            createDeleteStatusWorkOrderForPia: createDeleteStatusWorkOrderForPia,
+        },
         pageNameToLog
     );
     // Update the store with information received from the saveSession response
diff --git a/src/helpers/heritage-integration/order-helper.spec.js b/src/helpers/heritage-integration/order-helper.spec.js
index 322d9237d..daf9af6bb 100644
--- a/src/helpers/heritage-integration/order-helper.spec.js
+++ b/src/helpers/heritage-integration/order-helper.spec.js
@@ -179,7 +179,7 @@ describe("saveSession", () => {
         // Assert
         expect(mocks.baseMixin.methods.dispatchStoreActionWithLogging).toHaveBeenCalledWith(
             storeActions.SAVE_SESSION,
-            null,
+            { createDeleteStatusWorkOrderForPia: false, submitAfterSave: false },
             "test"
         );
         expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(
@@ -282,12 +282,12 @@ describe("submitWorkOrder", () => {
         const mocks = setupMocksForJsFiles(mockData);
 
         // Act
-        await submitWorkOrder({ pageNameToLog: "test" });
+        await submitWorkOrder({ pageNameToLog: "test", submitAfterSave: true });
 
         // Assert
         expect(mocks.baseMixin.methods.dispatchStoreActionWithLogging).toHaveBeenCalledWith(
             storeActions.SAVE_SESSION,
-            null,
+            { createDeleteStatusWorkOrderForPia: false, submitAfterSave: true },
             "test"
         );
         expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(
@@ -345,7 +345,7 @@ describe("submitWorkOrder", () => {
         setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) });
 
         // Act
-        await submitWorkOrder({ pageNameToLog: "test" });
+        await submitWorkOrder({ pageNameToLog: "test", submitAfterSave: true });
 
         // Assert
         expect(cookieHelper.getFunnelCookie().DidHeritageFunnelUpdateLast).toEqual(false);
diff --git a/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
index fa78915c1..0c7976ea8 100644
--- a/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
+++ b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
@@ -26,7 +26,7 @@
                 v-if="wipersModal"
                 @footer-button-action="addWipersToCart('WipersModal', wipersModal)"
                 footerButtonActionName="footer-button-action">
-                <div v-if="wipersToDisplay === 'both'" class="wiper-options">
+                <div v-if="wipersToDisplay === wipersToDisplayStrings.BOTH" class="wiper-options">
                     <div>
                         <checkboxQuestion
                             class="mb-5"
@@ -42,10 +42,14 @@
                         <p class="price">+${{ wipersModal.totalRearPrice }}</p>
                     </div>
                 </div>
-                <div v-else-if="wipersToDisplay === 'front'" class="wiper-options">
+                <div
+                    v-else-if="wipersToDisplay === wipersToDisplayStrings.FRONT"
+                    class="wiper-options">
                     <p class="price">+${{ wipersModal.totalFrontPrice }}</p>
                 </div>
-                <div v-else-if="wipersToDisplay === 'rear'" class="wiper-options">
+                <div
+                    v-else-if="wipersToDisplay === wipersToDisplayStrings.REAR"
+                    class="wiper-options">
                     <p class="price">+${{ wipersModal.totalRearPrice }}</p>
                 </div>
             </contentGroupModal>
@@ -139,11 +143,13 @@ export default {
     },
     computed: {
         currentCartItems() {
-            return this.modelValue;
+            const modelValue = this.modelValue;
+            if (!modelValue.vaps) modelValue.vaps = [];
+            return modelValue;
         },
         rainDefenseModal() {
             const lineItem = this.availableLineItems.find((item) => {
-                return item.partType === partTypeStrings.FRONT_WIPER;
+                return item.partType === partTypeStrings.RAIN_DEFENSE;
             });
             if (lineItem)
                 lineItem.listPrice = parseFloat(
@@ -190,7 +196,7 @@ export default {
             if (!this.answersCmsData) return buttons;
 
             const rainDefenseInCart = this.currentCartItems.vaps?.some((vap) => {
-                return vap?.partType === partTypeStrings.FRONT_WIPER;
+                return vap?.partType === partTypeStrings.RAIN_DEFENSE;
             });
             const frontWipersInCart = this.currentCartItems.vaps?.some((vap) => {
                 return vap?.partType?.includes(partTypeStrings.FRONT_WIPER);
@@ -209,17 +215,17 @@ export default {
             if (!rainDefenseInCart) {
                 // NO RAIN DEFENSE IN CART; SHOW RAIN DEFENSE BUTTON
                 const modalData = getAnswer("RainDefenseModal", this.answersCmsData);
-                modalData.SubText = "+$" + this.rainDefenseModal.listPrice;
+                modalData.SubText = "+$" + this.rainDefenseModal?.listPrice;
                 buttons.push(modalData);
             }
 
             const modalData = getAnswer("WipersModal", this.answersCmsData);
             if (!frontWipersInCart) {
-                if (!rearWipersInCart && this.wipersModal.rearWiperLineItems.length > 0) {
+                if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
                     // NO REAR WIPERS or FRONT WIPERS IN CART; SHOW COMBO BUTTON
                     const prices = [
-                        this.wipersModal.totalFrontPrice,
-                        this.wipersModal.totalRearPrice,
+                        this.wipersModal?.totalFrontPrice,
+                        this.wipersModal?.totalRearPrice,
                     ];
                     prices.sort((a, b) => a - b);
                     modalData.SubText = "+$" + prices[0] + " - $" + prices[prices.length - 1];
@@ -227,19 +233,22 @@ export default {
                     buttons.push(modalData);
                 } else {
                     // NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON
-                    modalData.SubText = "+$" + this.wipersModal.totalFrontPrice;
+                    modalData.SubText = "+$" + this.wipersModal?.totalFrontPrice;
                     this.updateWipersToDisplay(wipersToDisplayStrings.FRONT);
                     buttons.push(modalData);
                 }
-            } else if (!rearWipersInCart && this.wipersModal.rearWiperLineItems.length > 0) {
+            } else if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
                 // NO REAR WIPERS IN CART; SHOW ONLY REAR WIPERS BUTTON
-                modalData.SubText = "+$" + this.wipersModal.totalRearPrice;
+                modalData.SubText = "+$" + this.wipersModal?.totalRearPrice;
                 this.updateWipersToDisplay(wipersToDisplayStrings.REAR);
                 buttons.push(modalData);
             }
 
             return buttons;
         },
+        wipersToDisplayStrings() {
+            return wipersToDisplayStrings;
+        },
     },
     components: {
         buttonQuestion,
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index a3044994b..59e17d92d 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -27,7 +27,7 @@
                     <cart
                         :damage="damageInfo"
                         :availableLineItems="availableLineItems"
-                        :lineItems="taxedLineItems"
+                        v-model="lineItems"
                         servicePackageOptionsCmsName="ServicePackageTitle"
                         @cart-remove="cartRemove" />
 
@@ -90,6 +90,7 @@ import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+import { LineItemUtilities, mapTaxedAvailableLineItemsToStoreFormat } from "../../store";
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 
@@ -98,6 +99,7 @@ export default {
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
         const wipersPromise = baseMixin.methods.dispatchStoreActionWithLogging(
             storeActions.GET_WIPERS,
             null,
@@ -139,14 +141,16 @@ export default {
 
         const glassParts = store.getters.order.lineItems.glassParts ?? [];
 
-        const availableLineItems = [
+        let availableLineItems = [
             resultMap.rainDefense,
             ...resultMap.supportingItems,
             ...resultMap.wipers,
             ...glassParts,
         ];
 
-        const pricedAvailableLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
+        const lineItemsFromStore = store.getters.order.lineItems;
+
+        await baseMixin.methods.dispatchStoreActionWithLogging(
             storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
             {
                 availableLineItems: availableLineItems,
@@ -155,43 +159,39 @@ export default {
             false
         );
 
-        const lineItems = store.getters.order.lineItems;
-
-        const combinedLineItems = [];
-        combinedLineItems.push(lineItems.glassParts ?? []);
-        combinedLineItems.push(lineItems.supportingItems ?? []);
-        combinedLineItems.push(lineItems.vaps ?? []);
-
-        const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
+        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,
-                pricedLineItems: combinedLineItems,
+                pricedAvailableLineItems: availableLineItems,
             },
             "payment-method",
             false
         );
 
+        const lineItemUtilities = new LineItemUtilities();
+        lineItemUtilities.addGuidToLineItemsIfNotAlreadyThere(availableLineItems);
+
+        const lineItems = mapTaxedAvailableLineItemsToStoreFormat(
+            availableLineItems,
+            lineItemsFromStore
+        );
+
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
-            vm.cartItems = combinedLineItems; // TOBEREMOVED BY AJC IN CSR-1384
-
             vm.setCmsContent(resultMap.cmsContent);
-            vm.availableLineItems = pricedAvailableLineItems;
-            vm.taxedLineItems = taxedLineItems;
+            vm.availableLineItems = taxedAvailableLineItems;
             vm.lineItems = lineItems;
         });
     },
     data() {
         return {
-            cartItems: [], // TOBEREMOVED BY AJC IN CSR-1384
-
             lineItems: [],
-            taxedLineItems: [], // temporary, for use by cart.vue
             availableLineItems: [],
             paymentMethodInternalModel: this.getPaymentMethodFromStore(),
         };
@@ -262,18 +262,6 @@ export default {
                 return paymentMethods.LATER;
             }
         },
-        cartRemove(item) {
-            const matchedIndices = [];
-            this.cartItems.forEach((cartItem, i) => {
-                if (cartItem.partType === item.partType) {
-                    // console.log("adding this to matchedIndices: ", i);
-                    matchedIndices.push(i);
-                }
-            });
-            this.cartItems = this.cartItems.filter((cartItem, index) => {
-                return cartItem.partType !== item.partType;
-            });
-        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
@@ -289,8 +277,8 @@ export default {
             await this.dispatchStoreAction(storeActions.SAVE_PROMOS, this.lineItems.promos, false);
 
             if (this.paymentMethod == paymentMethods.LATER) {
-                this.dispatchStoreAction(this.storeActions.SAVE_WORK_ORDER_FLAG, true, false);
-                await submitWorkOrder({ pageNameToLog: "payment-method" });
+                // this creates the final work order
+                await submitWorkOrder({ pageNameToLog: "payment-method", submitAfterSave: true });
                 this.$router.navigateWithoutSaving(
                     this.navigationScenarios.CLICKED_FORWARD,
                     this.$route
@@ -302,14 +290,24 @@ export default {
         async setupPia() {
             this.$refs.loadingModal.showModal();
 
-            // if we don't have a work order in delete substatus, set the flag and submit
+            // if we don't have a work order in delete substatus, set the flag and submit.
+            // we need a work order number for pia so we can pass it to safeliteHop.
             if (!store.getters.order.workOrderNumber) {
-                this.dispatchStoreAction(storeActions.SAVE_PIA_WORK_ORDER, true);
-                await submitWorkOrder({ pageNameToLog: "payment-method" });
-                this.dispatchStoreAction(storeActions.SAVE_PIA_WORK_ORDER, false);
-                this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
+                try {
+                    await submitWorkOrder({
+                        pageNameToLog: "payment-method",
+                        submitAfterSave: false,
+                        createDeleteStatusWorkOrderForPia: true,
+                    });
+                } catch (error) {
+                    console.log("error: response from pia submit work order:" + error.message);
+                    this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
+                    this.$route.params[this.routerParams.DISPLAY_PIA_ALERT] = true;
+                    return;
+                }
             }
 
+            this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
             this.$router.navigateWithoutSaving(
                 this.navigationScenarios.CLICKED_PAY_NOW,
                 this.$route
diff --git a/src/layouts/payment-pia-return/payment-pia-return.vue b/src/layouts/payment-pia-return/payment-pia-return.vue
index 3eb819810..54e49c620 100644
--- a/src/layouts/payment-pia-return/payment-pia-return.vue
+++ b/src/layouts/payment-pia-return/payment-pia-return.vue
@@ -58,14 +58,12 @@ export default {
         async processPaypalResponse() {
             const token = getQuerystringParameter(queryStrings.TOKEN);
             const payerId = getQuerystringParameter(queryStrings.PAYERID);
-            baseMixin.methods.dispatchStoreAction(storeActions.SAVE_WORK_ORDER_FLAG, true, false);
             baseMixin.methods.dispatchStoreAction(storeActions.SAVE_PAYPAL_TOKEN, token, false);
 
             await this.saveAndSubmitWorkOrder();
         },
         async processCreditCardResponse() {
             const subscriptionID = getQuerystringParameter(queryStrings.SUBSCRIPTIONID);
-            baseMixin.methods.dispatchStoreAction(storeActions.SAVE_WORK_ORDER_FLAG, true, false);
 
             const referralSeqNum = getQuerystringParameter(queryStrings.REFERRAL_SEQ_NUM);
             if (referralSeqNum != store.getters.order.referralSequenceNumber) {
@@ -115,7 +113,23 @@ export default {
         async saveAndSubmitWorkOrder() {
             // Final work order submit after returning from PIA.
             await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
-            await submitWorkOrder({ pageNameToLog: "payment-pia-return" });
+            try {
+                await submitWorkOrder({
+                    pageNameToLog: "payment-pia-return",
+                    submitAfterSave: true,
+                });
+            } catch (error) {
+                console.log("error: response from submit work order:" + error.message);
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.PIA_ERROR,
+                    this.$route,
+                    {},
+                    { [routerParams.DISPLAY_PIA_ALERT]: true }
+                );
+                this.$refs.loadingModal.isModalVisible = false;
+                return;
+            }
+
             this.$refs.loadingModal.isModalVisible = false;
             this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_SUCCESS, this.$route);
         },
diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue
index 10de5cedf..437fbe743 100644
--- a/src/layouts/payment/payment.vue
+++ b/src/layouts/payment/payment.vue
@@ -20,6 +20,39 @@
                             scrolling="no">
                         </iframe>
                     </div>
+                    <div>{{ switchPaymentText }}</div>
+                    <div>
+                        <button
+                            v-if="paymentType !== 'cc'"
+                            ref="switchToCCButton"
+                            type="button"
+                            @mousedown="switchPIAMethod('cc')"
+                            aria-label="Switch to Credit Card">
+                            Switch to Credit Card
+                        </button>
+                    </div>
+                    <div v-if="paymentType !== 'cc'">or</div>
+                    <div>
+                        <button
+                            v-if="paymentType !== 'pp'"
+                            ref="switchToPPButton"
+                            type="button"
+                            @mousedown="switchPIAMethod('pp')"
+                            aria-label="Switch to PayPal">
+                            Switch to PayPal
+                        </button>
+                    </div>
+                    <div v-if="paymentType === 'cc'">or</div>
+                    <div>
+                        <button
+                            v-if="paymentType !== 'ap'"
+                            ref="switchToAPButton"
+                            type="button"
+                            @mousedown="switchPIAMethod('ap')"
+                            aria-label="Switch to Afterpay">
+                            Switch to Afterpay
+                        </button>
+                    </div>
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         isForwardActionDisabled="true"
@@ -32,7 +65,7 @@
     </Form>
 
     <form
-        ref="myForm"
+        ref="hopForm"
         id="card-data"
         :target="paypalPayment ? '_top' : 'card-frame'"
         method="POST"
@@ -52,6 +85,7 @@
         <input type="hidden" name="sgNoKeystrokeProcessing" value="false" />
 
         <input type="hidden" name="maskCharacter" value="*" />
+        <input type="hidden" name="styleSheetCode" :value="dynamicCSSUrl" />
         <input type="hidden" name="styleSheetCode2" :value="dynamicHopCSSUrl" />
 
         <input type="hidden" name="sgReceiptResponseURL" :value="piaResponseUrl" />
@@ -165,6 +199,7 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 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";
 
 // Validation
@@ -232,6 +267,10 @@ export default {
         });
     },
     computed: {
+        dynamicCSSUrl() {
+            const { protocol, hostname, port } = window.location;
+            return `${protocol}//${hostname}:${port}/fmg/css/site-2020Styling.css`;
+        },
         dynamicHopCSSUrl() {
             const { protocol, hostname, port } = window.location;
             return `${protocol}//${hostname}:${port}/fmg/css/hop-styling.css`;
@@ -248,11 +287,71 @@ export default {
             }
             return "";
         },
+        switchPaymentText() {
+            return this.getCmsContent("PaymentMethodWidget", "QuestionText");
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
-            // TODO
-            return true;
+            // Line Items
+            const packageReqs = !!store.getters.order.lineItems.supportingItems;
+
+            // Service Location
+            const serviceLocation = store.getters.order.serviceLocation;
+            const mobileReqs = !!(
+                serviceLocation.address &&
+                serviceLocation.city &&
+                serviceLocation.state &&
+                serviceLocation.zipCode
+            );
+
+            const providerLocation = serviceLocation.provider.address;
+            const dropOffInshopReqs = !!(
+                providerLocation.streetAddress &&
+                providerLocation.city &&
+                providerLocation.state &&
+                providerLocation.zipCode
+            );
+
+            const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
+
+            const serviceLocationReqs =
+                (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
+
+            // Insurance
+            const isInsuranceSet = store.getters.order.payment.isInsurance !== null;
+
+            // Schedule
+            const schedule = store.getters.order.schedule;
+            const scheduleReqs = !!(
+                schedule.date &&
+                schedule.startTime &&
+                (!isMobile || schedule.endTime) &&
+                schedule.jobMaxMinutes &&
+                schedule.jobMinMinutes
+            );
+
+            // Customer
+            const customer = store.getters.order.customer;
+            const customerReqs = !!(
+                customer.firstName &&
+                customer.lastName &&
+                customer.phoneNumber &&
+                customer.emailAddress
+            );
+
+            const paymentMethodReqs =
+                store.getters.order.payment.isPia !== null &&
+                (store.getters.order.payment.isPia || !!store.getters.order.payment.piaType);
+
+            return (
+                packageReqs &&
+                serviceLocationReqs &&
+                isInsuranceSet &&
+                scheduleReqs &&
+                customerReqs &&
+                paymentMethodReqs
+            );
         },
         getWOrkOrderNumber() {
             if (store.getters.order.workOrderNumber) {
@@ -345,6 +444,28 @@ export default {
             window.location = applicationConfig.PIA_CANCEL_URL;
             //this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
+        switchPIAMethod(payMethod) {
+            this.paymentType = payMethod;
+            this.submitHopForm();
+        },
+        submitHopForm() {
+            this.$nextTick(() => {
+                this.$refs.hopForm.submit();
+
+                const iframe = this.$refs.paymentFrame;
+                if (iframe) {
+                    iframe.onload = () => {
+                        if (iframe.contentWindow) {
+                            if (this.paymentType == "cc") {
+                                iframe.contentWindow.postMessage("CreditCardChosen", "*");
+                            } else if (this.paymentType == "ap") {
+                                iframe.contentWindow.postMessage("afterpay", "*");
+                            }
+                        }
+                    };
+                }
+            });
+        },
         async fetchSignatureInfo(signatureInfo) {
             if (this.isPaypal()) {
                 this.$refs.loadingModal.showModal();
@@ -354,20 +475,7 @@ export default {
             this.authSignature = signatureInfo.signature;
             this.authSignatureStart = signatureInfo.startDate;
 
-            this.$nextTick(() => {
-                this.$refs.myForm.submit();
-
-                if (this.paymentType == "ap") {
-                    const iframe = this.$refs.paymentFrame;
-                    if (iframe) {
-                        iframe.onload = () => {
-                            if (iframe.contentWindow) {
-                                iframe.contentWindow.postMessage("afterpay", "*");
-                            }
-                        };
-                    }
-                }
-            });
+            this.submitHopForm();
         },
     },
     components: {
@@ -385,4 +493,7 @@ export default {
     width: 100%;
     border: 0 none;
 }
+#pageLoadingModal {
+    background-color: red;
+}
 </style>
diff --git a/src/store/index.js b/src/store/index.js
index 64640bca2..6a9be935e 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -28,7 +28,6 @@ import { getDateDifferenceInDays } from "@/helpers/date-helper";
 // Export State
 const getDefaultState = () => {
     return {
-        submitAfterSave: false,
         order: {
             vehicle: {
                 year: null,
@@ -127,7 +126,6 @@ const getDefaultState = () => {
             referralCorrelationId: null,
             eon: null,
             workOrderNumber: null,
-            createDeleteStatusWorkOrderForPia: false,
         },
         applicationUser: {
             eventBus: [],
@@ -147,10 +145,6 @@ export const state = getDefaultState();
 
 // Export Mutations
 export const mutations = {
-    updateWorkOrderFlag(state, submitAfterSave) {
-        state.submitAfterSave = submitAfterSave;
-    },
-
     // VEHICLE MUTATIONS
     updateYear(state, year) {
         state.order.vehicle.year = year;
@@ -248,9 +242,6 @@ export const mutations = {
     updatePiaType(state, piaType) {
         state.order.payment.piaType = piaType;
     },
-    updatePiaWorkOrder(state, piaWorkOrder) {
-        state.order.createDeleteStatusWorkOrderForPia = piaWorkOrder;
-    },
     updateWorkOrderNumber(state, workOrderNumber) {
         state.order.workOrderNumber = workOrderNumber;
     },
@@ -566,7 +557,6 @@ export const mutations = {
 
 // Export Getters
 export const getters = {
-    submitAfterSave: (state) => state.submitAfterSave,
     vehicle: (state) => state.order.vehicle,
     eventBusItem: (state) => (eventCategory, eventSubCategory) => {
         const matchedEvent = state.applicationUser.eventBus.find(
@@ -1301,6 +1291,7 @@ export const actions = {
             });
 
         syncLineItemIds(response.data, context.getters.order.lineItems.vaps);
+        console.log(response.data);
         return response;
     },
 
@@ -1577,13 +1568,17 @@ export const actions = {
     },
 
     // Session API Actions
-    saveSession(context, { pageNameToLog }) {
+    saveSession(context, { pageNameToLog, payload }) {
         const vehicle = context.getters.vehicle;
         const damage = context.getters.damage;
         const order = context.state.order;
         const applicationUser = context.getters.applicationUser;
         const lineItems = context.state.order.lineItems;
 
+        const submitAfterSave = payload?.submitAfterSave === "true";
+        const createDeleteStatusWorkOrderForPia =
+            payload?.createDeleteStatusWorkOrderForPia === "true";
+
         // create a new array to avoid mutating state
         const newGlassToReplace = convertGlassPieceNamingForApi(damage.glassToReplace);
 
@@ -1591,7 +1586,7 @@ export const actions = {
             method: endpoints.SaveSession.method,
             endpoint: endpoints.SaveSession.url,
             payload: {
-                submitAfterSave: context.state.submitAfterSave,
+                submitAfterSave: submitAfterSave,
                 userAgent: navigator.userAgent,
                 applicationUser: {
                     crmCustomerId: applicationUser.crmCustomerId,
@@ -1702,7 +1697,7 @@ export const actions = {
                     referralNumber: order.referralNumber?.toString(),
                     referralSequenceNumber: order.referralSequenceNumber,
                     eon: order.eon,
-                    createDeleteStatusWorkOrderForPia: order.createDeleteStatusWorkOrderForPia,
+                    createDeleteStatusWorkOrderForPia: createDeleteStatusWorkOrderForPia,
                 },
             },
             logApiCall: true,
@@ -1773,12 +1768,6 @@ export const actions = {
             );
     },
 
-    saveWorkOrderFlag(context, submitAfterSave) {
-        context.commit(storeMutations.UPDATE_WORK_ORDER_FLAG, submitAfterSave);
-    },
-    savePiaWorkOrder(context, piaWorkOrder) {
-        context.commit(storeMutations.UPDATE_PIA_WORK_ORDER, piaWorkOrder);
-    },
     saveCCToken(context, ccToken) {
         context.commit(storeMutations.UPDATE_CCTOKEN, ccToken);
     },
@@ -2163,9 +2152,9 @@ export const actions = {
 
         context.commit(storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA, response.data.serverData);
 
-        const pricedLineItems = addPricesToLineItems(availableLineItems, response.data.lineItems);
+        availableLineItems = addPricesToLineItems(availableLineItems, response.data.lineItems);
 
-        return pricedLineItems;
+        return availableLineItems;
     },
 
     // Tax order actions
@@ -2176,16 +2165,15 @@ export const actions = {
                 billToAccountNumber,
                 providerNumber,
                 appointmentType,
+                serviceLocationCity,
                 serviceLocationState,
                 serviceLocationZipCode,
-                pricedLineItems,
+                pricedAvailableLineItems,
             },
             pageNameToLog,
         }
     ) {
-        // const flattenedLineItemsWithChildParts =
-        //     getFlattenedArrayOfLineItemsWithChildParts(pricedLineItems);
-        const lineItemsWithOnlyPriceInfo = pricedLineItems.map((lineItem) => ({
+        const lineItemsWithOnlyPriceInfo = pricedAvailableLineItems.map((lineItem) => ({
             partNumber: lineItem.partNumber,
             laborAmount: lineItem.laborAmount ?? 0,
             kitPrice: lineItem.kitPrice ?? 0,
@@ -2203,6 +2191,7 @@ export const actions = {
             `&BillToAccountNumber=${billToAccountNumber}` +
             `&ProviderNumber=${providerNumber}` +
             `&AppointmentType=${appointmentType}` +
+            `&ServiceLocation.City=${serviceLocationCity}` +
             `&ServiceLocation.State=${serviceLocationState}` +
             `&ServiceLocation.ZipCode=${serviceLocationZipCode}` +
             `&${pricedLineItemsFormattedForRequest}`;
@@ -2221,12 +2210,12 @@ export const actions = {
 
         context.commit(storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA, response.data.serverData);
 
-        const taxedLineItems = addTaxesToPricedLineItems(
-            pricedLineItems,
+        pricedAvailableLineItems = addTaxesToPricedLineItems(
+            pricedAvailableLineItems,
             response.data.taxedLineItems
         );
 
-        return taxedLineItems;
+        return pricedAvailableLineItems;
     },
 
     async validateOrderPromoAndSaveServerData(
@@ -2545,34 +2534,67 @@ function addPricesToLineItems(lineItems, pricingLineItems) {
     return lineItems;
 }
 
-function addTaxesToPricedLineItems(lineItems, taxingLineItems) {
-    const taxedLineItems = deepClone(lineItems);
-    taxedLineItems.forEach((lineItem) => {
+function addTaxesToPricedLineItems(pricedLineItems, taxingLineItems = []) {
+    pricedLineItems.forEach((pricedLineItem) => {
         let lineItemIndex = taxingLineItems.findIndex(
-            (taxingLineItem) => taxingLineItem.partNumber === lineItem.partNumber
+            (taxingLineItem) => taxingLineItem.partNumber === pricedLineItem.partNumber
         );
 
-        if (lineItem.childParts) {
-            addTaxesToPricedLineItems(lineItem.childParts, taxingLineItems);
+        if (pricedLineItem.childParts) {
+            addTaxesToPricedLineItems(pricedLineItem.childParts, taxingLineItems);
         }
 
         let taxedLineItem = taxingLineItems.splice(lineItemIndex, 1)[0];
-        lineItem.salesTax = taxedLineItem.salesTax;
+        pricedLineItem.salesTax = taxedLineItem?.salesTax ?? 0;
     });
 
-    return taxedLineItems;
+    return pricedLineItems;
+}
+
+export class LineItemUtilities {
+    constructor() {
+        this.getArrayOfAllLineItems = getArrayOfAllLineItems;
+        this.getFlattenedArrayOfLineItemsWithChildParts =
+            getFlattenedArrayOfLineItemsWithChildParts;
+        this.addGuidToLineItemsIfNotAlreadyThere = addGuidToLineItemsIfNotAlreadyThere;
+    }
+}
+
+export function mapTaxedAvailableLineItemsToStoreFormat(availableLineItems, storeLineItems) {
+    // clone the lineItems array because what we're passing in is referencing the store directly
+    const lineItems = deepClone(storeLineItems);
+
+    for (let [category, lineItemsInCategory] of Object.entries(lineItems)) {
+        lineItemsInCategory = lineItemsInCategory ?? [];
+
+        for (let lineItemIndex = 0; lineItemIndex < lineItemsInCategory.length; lineItemIndex++) {
+            const availableLineItem = availableLineItems.find(
+                (ali) => ali.partNumber == lineItemsInCategory[lineItemIndex].partNumber
+            );
+            if (availableLineItem) {
+                lineItemsInCategory[lineItemIndex].salesTax = availableLineItem.salesTax;
+            }
+        }
+    }
+
+    return lineItems;
 }
 
 function getArrayOfAllLineItems(lineItems) {
     let consolidatedLineItemsArray = [];
+
     if (lineItems.glassParts != null)
         consolidatedLineItemsArray = [...consolidatedLineItemsArray, ...lineItems.glassParts];
+
     if (lineItems.supportingItems != null)
         consolidatedLineItemsArray = [...consolidatedLineItemsArray, ...lineItems.supportingItems];
+
     if (lineItems.vaps != null)
         consolidatedLineItemsArray = [...consolidatedLineItemsArray, ...lineItems.vaps];
+
     if (lineItems.promos != null)
         consolidatedLineItemsArray = [...consolidatedLineItemsArray, ...lineItems.promos];
+
     return consolidatedLineItemsArray;
 }
 
@@ -2587,6 +2609,7 @@ function getFlattenedArrayOfLineItemsWithChildParts(lineItems) {
             ];
         }
     });
+
     return flattenedArray;
 }
 
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index b0cd5154a..e7c004090 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -2791,17 +2791,6 @@ describe("Actions", () => {
 });
 
 describe("Getters", () => {
-    it("submitAfterSave, should return true", () => {
-        // Arrange
-        const storeState = state;
-
-        // Act
-        mutations.updateWorkOrderFlag(storeState, true);
-
-        // Assert
-        expect(getters.submitAfterSave(storeState)).toEqual(true);
-    });
-
     it("Vehicle getter, should return vehicle data", () => {
         // Arrange
         const storeState = state;