-
-
-
- {{ getFormattedAmount("", packagePrice) }}
-
-
+
+
+
+
+
+ {{ getFormattedAmount("", packagePrice) }}
+
+
+ {{ getFormattedAmount("", packagePriceWithoutDiscount) }}
+
+
-
-
- {{ cartItem.name }}
-
-
- {{ cartItem.name }}
-
-
-
+
+
+ <{{ cartItem.name
+ }}>
+
+
+ {{ cartItem.name }}
+
+
+
-
-
- {{ cartItem.name }}
-
-
-
- {{ recycleFeeCartItem.name }}
-
- {{ getFormattedAmount(cartItem.category, cartItem.subTotal) }}
-
+
+
+ {{ cartItem.name }}
+
+
+
+ {{ recycleFeeCartItem.name }}
+
+ {{ getFormattedAmount(cartItem.category, cartItem.subTotal) }}
+
-
-
- {{ subtotalText }}{{ getFormattedAmount("", subTotal) }}
-
-
- {{ salesTaxText }}{{ getFormattedAmount("", salesTax) }}
-
-
- {{ amountPaidText }}{{ getFormattedAmount("", amountPaid) }}
-
-
-
{{ amountDueText }}{{ getFormattedAmount("", amountDue) }}
+
+
+ {{ subtotalText }}{{ getFormattedAmount("", subTotal) }}
+
+
+ {{ salesTaxText }}{{ getFormattedAmount("", salesTax) }}
+
+
+ {{ amountPaidText }}{{ getFormattedAmount("", amountPaid) }}
+
+
+ {{ amountDueText }}{{ getFormattedAmount("", amountDue) }}
+
+
+
+ Promo code <{{ promoCode }}> applied
+
@@ -96,6 +125,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";
@@ -149,6 +179,17 @@ export default {
return subTotal;
},
+ getPromoDiscounts() {
+ const promoItems = this.promoCartItems;
+
+ let subTotal = 0;
+
+ promoItems?.forEach((item) => {
+ subTotal += item.subTotal;
+ });
+
+ return subTotal;
+ },
getVapsCartItemsForSelectedPackage(packageName) {
const packageContentTypes = getPackageContents(
this.glassToReplace,
@@ -167,6 +208,12 @@ export default {
});
});
+ if (this.promoCartItems) {
+ this.promoCartItems.forEach((promoCartItem) => {
+ vapsCartItemsForSelectedPackage.push(promoCartItem);
+ });
+ }
+
return vapsCartItemsForSelectedPackage;
},
getCmsContentForVapsType(vapsType) {
@@ -192,6 +239,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() {
@@ -313,6 +370,12 @@ export default {
return packagePrice;
},
+ packagePriceWithoutDiscount() {
+ let fullPrice = this.packagePrice;
+ let discount = this.getPromoDiscounts();
+ fullPrice += Math.abs(discount);
+ return fullPrice;
+ },
isRepair() {
if (!this.damage) {
return;
@@ -540,7 +603,6 @@ export default {
return cartItem;
},
-
suppliesRepairCartItemName() {
return this.getCmsContent("SuppliesRepairTextWidget", "Text");
},
@@ -578,7 +640,6 @@ export default {
return cartItem;
},
-
mobileFeeCartItemName() {
return this.getCmsContent("MobileServiceTextWidget", "Text");
},
@@ -734,7 +795,6 @@ export default {
return promoCartItems;
},
-
removeLinkText() {
return this.getCmsContent("RemoveCartItemTextWidget", "Text");
},
@@ -795,6 +855,7 @@ export default {
textBlock,
textLink,
contentGroupModal,
+ promoModalQuestion,
},
};
@@ -824,12 +885,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;
@@ -846,6 +909,10 @@ export default {
background-color: $gray-100;
align-items: center;
}
+ .struck-out-price {
+ text-decoration: line-through;
+ padding-left: 0.5rem;
+ }
.packaged-cart-item {
background-color: $gray-100;
padding-left: 2.5rem;
@@ -934,17 +1001,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 {
diff --git a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
index ef2dfc515..dd77ea7fa 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -120,7 +120,7 @@ export default {