Merge pull request #1750 from Safelite/feature/CSR-1952-ajc-try2

Feature/CSR-1952: revised updates for triggering toast message upon promo applied

src/fmg-components/cart/cart.vue

@@ -13,78 +13,102 @@
                     <span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span>
                 </a>
             </div>
-            <div class="price-table">
-                <div class="service-type">
-                    <textBlock :cmsWidgetName="servicePackageTitleWidget" />
-                    <span>
-                        {{ getFormattedAmount("", packagePrice) }}
-                    </span>
-                </div>
+            <div class="cart-panel">
+                <div class="price-table">
+                    <div class="service-type">
+                        <textBlock :cmsWidgetName="servicePackageTitleWidget" />
+                        <span>
+                            {{ getFormattedAmount("", packagePrice) }}
+                        </span>
+                    </div>
 
-                <!-- Packaged Cart Items -->
-                <div v-for="(cartItem, i) in packageCartItems" :key="i" class="packaged-cart-item">
-                    <span>{{ cartItem.name }}</span>
-                    <textLink
-                        v-if="allowItemRemoval"
-                        ref="removeLink"
-                        linkType="text"
-                        :text="removeLinkText"
-                        href="javascript:void(0)"
-                        @click-event="removeItem(cartItem.cartItemType, cartItem.category)">
-                        <template v-slot:after-text>
-                            <span class="sr-only">{{ cartItem.name }}</span>
-                        </template>
-                    </textLink>
-                </div>
+                    <!-- Packaged Cart Items -->
+                    <div
+                        v-for="(cartItem, i) in packageCartItems"
+                        :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"
+                            linkType="text"
+                            :text="removeLinkText"
+                            href="javascript:void(0)"
+                            @click-event="removeItem(cartItem.cartItemType, cartItem.category)">
+                            <template v-slot:after-text>
+                                <span class="sr-only">{{ cartItem.name }}</span>
+                            </template>
+                        </textLink>
+                    </div>
 
-                <!-- Nonpackaged Cart Items -->
-                <div
-                    v-for="(cartItem, i) in nonpackageCartItems"
-                    :key="i"
-                    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 && cartItem.isRemovable"
-                        ref="removeLink"
-                        linkType="text"
-                        :text="removeLinkText"
-                        href="javascript:void(0)"
-                        @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
-                    <textLink
-                        v-else-if="cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName"
-                        linkType="text"
-                        :text="recycleFeeCartItem.name"
-                        href="javascript:void(0)"
-                        @click-event="openModal(recyclingModalCmsWidgetName)" />
-                    <span v-else-if="cartItem == recycleFeeCartItem">
-                        {{ recycleFeeCartItem.name }}
-                    </span>
-                    <span>{{ getFormattedAmount(cartItem.category, cartItem.subTotal) }}</span>
-                </div>
+                    <!-- Nonpackaged Cart Items -->
+                    <div
+                        v-for="(cartItem, i) in nonpackageCartItems"
+                        :key="i"
+                        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 && cartItem.isRemovable"
+                            ref="removeLink"
+                            linkType="text"
+                            :text="removeLinkText"
+                            href="javascript:void(0)"
+                            @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
+                        <textLink
+                            v-else-if="
+                                cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName
+                            "
+                            linkType="text"
+                            :text="recycleFeeCartItem.name"
+                            href="javascript:void(0)"
+                            @click-event="openModal(recyclingModalCmsWidgetName)" />
+                        <span v-else-if="cartItem == recycleFeeCartItem">
+                            {{ recycleFeeCartItem.name }}
+                        </span>
+                        <span>{{ getFormattedAmount(cartItem.category, cartItem.subTotal) }}</span>
+                    </div>
 
-                <!-- Sub total, sales tax, total columns -->
-                <div class="sub-total">
-                    <span>{{ subtotalText }}</span
-                    ><span>{{ getFormattedAmount("", subTotal) }}</span>
-                </div>
-                <div class="sales-tax">
-                    <span>{{ salesTaxText }}</span
-                    ><span>{{ getFormattedAmount("", salesTax) }}</span>
-                </div>
-                <div v-if="showAsPaid" class="amount-paid">
-                    <span>{{ amountPaidText }}</span
-                    ><span>{{ getFormattedAmount("", amountPaid) }}</span>
-                </div>
-                <div class="amount-due">
-                    <span>{{ amountDueText }}</span
-                    ><span>{{ getFormattedAmount("", amountDue) }}</span>
+                    <!-- Sub total, sales tax, total columns -->
+                    <div class="sub-total">
+                        <span>{{ subtotalText }}</span
+                        ><span>{{ getFormattedAmount("", subTotal) }}</span>
+                    </div>
+                    <div class="sales-tax">
+                        <span>{{ salesTaxText }}</span
+                        ><span>{{ getFormattedAmount("", salesTax) }}</span>
+                    </div>
+                    <div v-if="showAsPaid" class="amount-paid">
+                        <span>{{ amountPaidText }}</span
+                        ><span>{{ getFormattedAmount("", amountPaid) }}</span>
+                    </div>
+                    <div class="amount-due">
+                        <span>{{ amountDueText }}</span
+                        ><span>{{ getFormattedAmount("", amountDue) }}</span>
+                    </div>
                 </div>
+                <promoModalQuestion
+                    ref="promoModalQuestion"
+                    class="small mt-4"
+                    v-model="lineItems"
+                    @addedPromo="handleAddedPromo"
+                    :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" />
         </contentGroupModal>
@@ -96,6 +120,7 @@
 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 "@/fmg-components/promo-modal-question/promo-modal-question";
 
 // Mixins
 import baseMixin from "@/mixins/base-mixin.js";
@@ -198,6 +223,16 @@ export default {
 
             this.$emit("update:modelValue", this.lineItems);
         },
+        getPromoCodeList() {
+            if (this.$refs["promoModalQuestion"]) {
+                return this.$refs["promoModalQuestion"].getPromoCodeList();
+            }
+            return [];
+        },
+        handleAddedPromo(lineItems) {
+            // NOTE: these lineItems are passed from promo-modal-question
+            this.$emit("update:modelValue", lineItems);
+        },
     },
     computed: {
         screenReaderTotalAmountDueText() {
@@ -546,7 +581,6 @@ export default {
 
             return cartItem;
         },
-
         suppliesRepairCartItemName() {
             return this.getCmsContent("SuppliesRepairTextWidget", "Text");
         },
@@ -584,7 +618,6 @@ export default {
 
             return cartItem;
         },
-
         mobileFeeCartItemName() {
             return this.getCmsContent("MobileServiceTextWidget", "Text");
         },
@@ -740,7 +773,6 @@ export default {
 
             return promoCartItems;
         },
-
         removeLinkText() {
             return this.getCmsContent("RemoveCartItemTextWidget", "Text");
         },
@@ -801,6 +833,7 @@ export default {
         textBlock,
         textLink,
         contentGroupModal,
+        promoModalQuestion,
     },
 };
 </script>
@@ -830,12 +863,14 @@ export default {
     .amount-due {
         color: $green;
     }
-    .price-table {
+    .cart-panel {
         max-height: 0;
         transition: all 350ms ease-in;
         overflow: hidden;
         visibility: hidden;
         color: $gray-600;
+    }
+    .price-table {
         div {
             display: flex;
             justify-content: space-between;
@@ -940,17 +975,26 @@ export default {
         &.expanded:after {
             transform: rotate(180deg);
         }
-        &.expanded + .price-table {
+        &.expanded + .cart-panel {
             max-height: 650px;
             transition: all 150ms ease-in;
             overflow: hidden;
-            padding-top: 1rem;
+            padding: 1rem 0 0.5rem;
             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/fmg-components/promo-modal-question/promo-modal-question.vue

@@ -305,6 +305,7 @@ export default {
                         this.lineItems.vaps?.push(...getVaps);
                     }
                     this.lineItems?.promos.push(...promoCodeData.promoCode);
+                    this.$emit("added-promo", this.lineItems);
                     this.closeModal();
                 } else {
                     this.getErrorMessage(promoCodeData.errorCode, promoCodeData.additionalInfo);

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

@@ -29,12 +29,6 @@
                         servicePackageOptionsCmsName="ServicePackageTitle"
                         recyclingModalCmsWidgetName="RecycleModal" />
 
-                    <promoModalQuestion
-                        class="small mt-4"
-                        v-model="lineItems"
-                        :availableVaps="availableVaps"
-                        modalWidgetName="PromoModalWidget" />
-
                     <hr class="my-5" />
 
                     <div>
@@ -82,7 +76,6 @@ 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 "@/fmg-components/promo-modal-question/promo-modal-question";
 import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
 import alert from "@/ux-components/alert/alert";
 
@@ -596,7 +589,6 @@ export default {
         cart,
         alert,
         paymentMethodQuestion,
-        promoModalQuestion,
         reviewDropdown,
     },
 };