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

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

@ -13,78 +13,101 @@
<span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span> <span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span>
</a> </a>
</div> </div>
<div class="price-table"> <div class="cart-panel">
<div class="service-type"> <div class="price-table">
<textBlock :cmsWidgetName="servicePackageTitleWidget" /> <div class="service-type">
<span> <textBlock :cmsWidgetName="servicePackageTitleWidget" />
{{ getFormattedAmount("", packagePrice) }} <span>
</span> {{ getFormattedAmount("", packagePrice) }}
</div> </span>
</div>
<!-- Packaged Cart Items --> <!-- Packaged Cart Items -->
<div v-for="(cartItem, i) in packageCartItems" :key="i" class="packaged-cart-item"> <div
<span>{{ cartItem.name }}</span> v-for="(cartItem, i) in packageCartItems"
<textLink :key="i"
v-if="allowItemRemoval" class="packaged-cart-item">
ref="removeLink" <span
linkType="text" ><span v-if="cartItem.category === 'promos'">&lt;</span
:text="removeLinkText" >{{ cartItem.name
href="javascript:void(0)" }}<span v-if="cartItem.category === 'promos'">&gt;</span></span
@click-event="removeItem(cartItem.cartItemType, cartItem.category)"> >
<template v-slot:after-text> <textLink
<span class="sr-only">{{ cartItem.name }}</span> v-if="allowItemRemoval"
</template> ref="removeLink"
</textLink> linkType="text"
</div> :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 --> <!-- Nonpackaged Cart Items -->
<div <div
v-for="(cartItem, i) in nonpackageCartItems" v-for="(cartItem, i) in nonpackageCartItems"
:key="i" :key="i"
class="non-packaged-cart-item" class="non-packaged-cart-item"
:class="[ :class="[
i % 2 == 0 ? 'even' : 'odd', i % 2 == 0 ? 'even' : 'odd',
cartItem.isRemovable ? 'removable-cart-item' : '', cartItem.isRemovable ? 'removable-cart-item' : '',
]"> ]">
<span v-if="cartItem != recycleFeeCartItem">{{ cartItem.name }}</span> <span v-if="cartItem != recycleFeeCartItem">{{ cartItem.name }}</span>
<textLink <textLink
v-if="allowItemRemoval && cartItem.isRemovable" v-if="allowItemRemoval && cartItem.isRemovable"
ref="removeLink" ref="removeLink"
linkType="text" linkType="text"
:text="removeLinkText" :text="removeLinkText"
href="javascript:void(0)" href="javascript:void(0)"
@click-event="removeItem(cartItem.cartItemType, cartItem.category)" /> @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
<textLink <textLink
v-else-if="cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName" v-else-if="
linkType="text" cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName
:text="recycleFeeCartItem.name" "
href="javascript:void(0)" linkType="text"
@click-event="openModal(recyclingModalCmsWidgetName)" /> :text="recycleFeeCartItem.name"
<span v-else-if="cartItem == recycleFeeCartItem"> href="javascript:void(0)"
{{ recycleFeeCartItem.name }} @click-event="openModal(recyclingModalCmsWidgetName)" />
</span> <span v-else-if="cartItem == recycleFeeCartItem">
<span>{{ getFormattedAmount(cartItem.category, cartItem.subTotal) }}</span> {{ recycleFeeCartItem.name }}
</div> </span>
<span>{{ getFormattedAmount(cartItem.category, cartItem.subTotal) }}</span>
</div>
<!-- Sub total, sales tax, total columns --> <!-- Sub total, sales tax, total columns -->
<div class="sub-total"> <div class="sub-total">
<span>{{ subtotalText }}</span <span>{{ subtotalText }}</span
><span>{{ getFormattedAmount("", subTotal) }}</span> ><span>{{ getFormattedAmount("", subTotal) }}</span>
</div> </div>
<div class="sales-tax"> <div class="sales-tax">
<span>{{ salesTaxText }}</span <span>{{ salesTaxText }}</span
><span>{{ getFormattedAmount("", salesTax) }}</span> ><span>{{ getFormattedAmount("", salesTax) }}</span>
</div> </div>
<div v-if="showAsPaid" class="amount-paid"> <div v-if="showAsPaid" class="amount-paid">
<span>{{ amountPaidText }}</span <span>{{ amountPaidText }}</span
><span>{{ getFormattedAmount("", amountPaid) }}</span> ><span>{{ getFormattedAmount("", amountPaid) }}</span>
</div> </div>
<div class="amount-due"> <div class="amount-due">
<span>{{ amountDueText }}</span <span>{{ amountDueText }}</span
><span>{{ getFormattedAmount("", amountDue) }}</span> ><span>{{ getFormattedAmount("", amountDue) }}</span>
</div>
</div> </div>
<promoModalQuestion
ref="promoModalQuestion"
class="small mt-4"
v-model="lineItems"
:availableVaps="availableVaps"
modalWidgetName="PromoModalWidget" />
</div> </div>
</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"> <contentGroupModal ref="RecycleModal" cmsWidgetName="RecycleModal">
<textBlock cmsWidgetName="RecycleTextBlock" /> <textBlock cmsWidgetName="RecycleTextBlock" />
</contentGroupModal> </contentGroupModal>
@ -96,6 +119,7 @@
import textLink from "@/ux-components/text-link/text-link"; import textLink from "@/ux-components/text-link/text-link";
import textBlock from "@/digital-components/text-block/text-block"; import textBlock from "@/digital-components/text-block/text-block";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal"; import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
import promoModalQuestion from "@/layouts/payment-method/promo-modal-question/promo-modal-question";
// Mixins // Mixins
import baseMixin from "@/mixins/base-mixin.js"; 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; return vapsCartItemsForSelectedPackage;
}, },
getCmsContentForVapsType(vapsType) { getCmsContentForVapsType(vapsType) {
@ -192,6 +222,12 @@ export default {
this.$emit("update:modelValue", this.lineItems); this.$emit("update:modelValue", this.lineItems);
}, },
getPromoCodeList() {
if (this.$refs["promoModalQuestion"]) {
return this.$refs["promoModalQuestion"].getPromoCodeList();
}
return [];
},
}, },
computed: { computed: {
screenReaderTotalAmountDueText() { screenReaderTotalAmountDueText() {
@ -790,16 +826,23 @@ export default {
}, },
deep: true, deep: true,
}, },
lineItems: {
handler(newValue) {
this.$emit("update:modelValue", this.lineItems);
},
deep: true,
},
}, },
components: { components: {
textBlock, textBlock,
textLink, textLink,
contentGroupModal, contentGroupModal,
promoModalQuestion,
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.cart { .cart {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -824,12 +867,15 @@ export default {
.amount-due { .amount-due {
color: $green; color: $green;
} }
.price-table { .cart-panel {
max-height: 0; max-height: 0;
transition: all 350ms ease-in; transition: all 350ms ease-in;
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
color: $gray-600; color: $gray-600;
}
.price-table {
div { div {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -934,17 +980,26 @@ export default {
&.expanded:after { &.expanded:after {
transform: rotate(180deg); transform: rotate(180deg);
} }
&.expanded + .price-table { &.expanded + .cart-panel {
max-height: 650px; max-height: 650px;
transition: all 150ms ease-in; transition: all 150ms ease-in;
overflow: hidden; overflow: hidden;
padding-top: 1rem; padding: 1rem 0 0.5rem;
visibility: visible; visibility: visible;
} }
a { a {
text-decoration: none; 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 { .payment-method-question {
.question-text { .question-text {

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

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