Merge pull request #1744 from Safelite/feature/CSR-1952-revert

CSR-1952 revert

src/fmg-components/cart/cart.vue

@@ -13,7 +13,6 @@
                     <span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span>
                 </a>
             </div>
-            <div class="cart-panel">
             <div class="price-table">
                 <div class="service-type">
                     <textBlock :cmsWidgetName="servicePackageTitleWidget" />
@@ -23,15 +22,8 @@
                 </div>
 
                 <!-- Packaged Cart Items -->
-                    <div
+                <div v-for="(cartItem, i) in packageCartItems" :key="i" class="packaged-cart-item">
-                        v-for="(cartItem, i) in packageCartItems"
+                    <span>{{ cartItem.name }}</span>
-                        :key="i"
-                        class="packaged-cart-item">
-                        <span
-                            ><span v-if="cartItem.category === 'promos'">&lt;</span
-                            >{{ cartItem.name
-                            }}<span v-if="cartItem.category === 'promos'">&gt;</span></span
-                        >
                     <textLink
                         v-if="allowItemRemoval"
                         ref="removeLink"
@@ -63,9 +55,7 @@
                         href="javascript:void(0)"
                         @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
                     <textLink
-                            v-else-if="
+                        v-else-if="cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName"
-                                cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName
-                            "
                         linkType="text"
                         :text="recycleFeeCartItem.name"
                         href="javascript:void(0)"
@@ -94,19 +84,6 @@
                     ><span>{{ getFormattedAmount("", amountDue) }}</span>
                 </div>
             </div>
-                <promoModalQuestion
-                    ref="promoModalQuestion"
-                    class="small mt-4"
-                    v-model="lineItems"
-                    :availableVaps="availableVaps"
-                    modalWidgetName="PromoModalWidget" />
-            </div>
-        </div>
-        <div
-            class="my-2 lh-1 applied-promo"
-            v-for="(promoCode, i) in this.getPromoCodeList()"
-            :key="i">
-            <span class="caption">Promo code &lt;{{ promoCode }}&gt; applied </span>
         </div>
         <contentGroupModal ref="RecycleModal" cmsWidgetName="RecycleModal">
             <textBlock cmsWidgetName="RecycleTextBlock" />
@@ -119,7 +96,6 @@
 import textLink from "@/ux-components/text-link/text-link";
 import textBlock from "@/digital-components/text-block/text-block";
 import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
-import promoModalQuestion from "@/layouts/payment-method/promo-modal-question/promo-modal-question";
 
 // Mixins
 import baseMixin from "@/mixins/base-mixin.js";
@@ -222,12 +198,6 @@ export default {
 
             this.$emit("update:modelValue", this.lineItems);
         },
-        getPromoCodeList() {
-            if (this.$refs["promoModalQuestion"]) {
-                return this.$refs["promoModalQuestion"].getPromoCodeList();
-            }
-            return [];
-        },
     },
     computed: {
         screenReaderTotalAmountDueText() {
@@ -826,23 +796,16 @@ export default {
             },
             deep: true,
         },
-        lineItems: {
-            handler(newValue) {
-                this.$emit("update:modelValue", this.lineItems);
-            },
-            deep: true,
-        },
     },
     components: {
         textBlock,
         textLink,
         contentGroupModal,
-        promoModalQuestion,
     },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .cart {
     margin-bottom: 1rem;
 
@@ -867,15 +830,12 @@ export default {
     .amount-due {
         color: $green;
     }
-    .cart-panel {
+    .price-table {
         max-height: 0;
         transition: all 350ms ease-in;
         overflow: hidden;
         visibility: hidden;
         color: $gray-600;
-    }
-
-    .price-table {
         div {
             display: flex;
             justify-content: space-between;
@@ -980,26 +940,17 @@ export default {
         &.expanded:after {
             transform: rotate(180deg);
         }
-        &.expanded + .cart-panel {
+        &.expanded + .price-table {
             max-height: 650px;
             transition: all 150ms ease-in;
             overflow: hidden;
-            padding: 1rem 0 0.5rem;
+            padding-top: 1rem;
             visibility: visible;
         }
         a {
             text-decoration: none;
         }
     }
-    .applied-promo {
-        span {
-            color: $green-700;
-            font-weight: 500;
-            padding: 2px 8px;
-            background-color: $green-100;
-            border-radius: 12px;
-        }
-    }
 }
 .payment-method-question {
     .question-text {

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

@@ -29,7 +29,13 @@
                         servicePackageOptionsCmsName="ServicePackageTitle"
                         recyclingModalCmsWidgetName="RecycleModal" />
 
-                    <hr class="mb-5" />
+                    <promoModalQuestion
+                        class="small mt-4"
+                        v-model="lineItems"
+                        :availableVaps="availableVaps"
+                        modalWidgetName="PromoModalWidget" />
+
+                    <hr class="my-5" />
 
                     <div>
                         <alert
@@ -76,6 +82,7 @@ import paymentMethodQuestion from "@/layouts/payment-method/payment-method-quest
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import cart from "@/fmg-components/cart/cart";
 import reviewDropdown from "@/layouts/payment-method/review-dropdown/review-dropdown";
+import promoModalQuestion from "@/layouts/payment-method/promo-modal-question/promo-modal-question";
 import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
 import alert from "@/ux-components/alert/alert";
 
@@ -589,6 +596,7 @@ export default {
         cart,
         alert,
         paymentMethodQuestion,
+        promoModalQuestion,
         reviewDropdown,
     },
 };