jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Feature/CSR-1952
This commit is contained in:
AdamCaouetteSafelite 2024-02-09 13:39:47 -05:00 committed by GitHub
commit f5351a79fc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 126 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/fmg-components/cart/cart.vue
View file

@ -13,6 +13,7 @@
<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" />
@ -22,8 +23,15 @@
</div>
<!-- Packaged Cart Items -->
<div v-for="(cartItem, i) in packageCartItems" :key="i" class="packaged-cart-item">
<span>{{ cartItem.name }}</span>
<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"
@ -55,7 +63,9 @@
href="javascript:void(0)"
@click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
<textLink
v-else-if="cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName"
v-else-if="
cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName
"
linkType="text"
:text="recycleFeeCartItem.name"
href="javascript:void(0)"
@ -84,6 +94,19 @@
><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" />
@ -96,6 +119,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 "@/layouts/payment-method/promo-modal-question/promo-modal-question";
// Mixins
import baseMixin from "@/mixins/base-mixin.js";
@ -167,6 +191,12 @@ export default {
});
});
if (this.promoCartItems) {
this.promoCartItems.forEach((promoCartItem) => {
vapsCartItemsForSelectedPackage.push(promoCartItem);
});
}
return vapsCartItemsForSelectedPackage;
},
getCmsContentForVapsType(vapsType) {
@ -192,6 +222,12 @@ export default {
this.$emit("update:modelValue", this.lineItems);
},
getPromoCodeList() {
if (this.$refs["promoModalQuestion"]) {
return this.$refs["promoModalQuestion"].getPromoCodeList();
}
return [];
},
},
computed: {
screenReaderTotalAmountDueText() {
@ -790,16 +826,23 @@ export default {
},
deep: true,
},
lineItems: {
handler(newValue) {
this.$emit("update:modelValue", this.lineItems);
},
deep: true,
},
},
components: {
textBlock,
textLink,
contentGroupModal,
promoModalQuestion,
},
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.cart {
margin-bottom: 1rem;
@ -824,12 +867,15 @@ 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;
@ -934,17 +980,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 {

11
src/layouts/payment-method/payment-method.vue
View file

@ -29,14 +29,7 @@
servicePackageOptionsCmsName="ServicePackageTitle"
recyclingModalCmsWidgetName="RecycleModal" />
<promoModalQuestion
class="small mt-4"
v-model="lineItems"
:availableVaps="availableVaps"
pageName="payment-method"
modalWidgetName="PromoModalWidget" />
<hr class="my-5" />
<hr class="mb-5" />
<div>
<alert
@ -83,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 "@/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";
@ -597,7 +589,6 @@ export default {
cart,
alert,
paymentMethodQuestion,
promoModalQuestion,
reviewDropdown,
},
};