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

CSR-1952: rearrange promo link and promos applied into cart

Browse source
This commit is contained in:
Adam Caouette 2024-02-09 12:00:00 -05:00
parent 5e09c22e33
commit 9f527ce18d
2 changed files with 113 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,78 +13,94 @@
<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><span v-if="cartItem.category === 'promos'">&lt;</span>{{ cartItem.name }}<span v-if="cartItem.category === 'promos'">&gt;</span></span>
linkType="text" <textLink
:text="removeLinkText" v-if="allowItemRemoval"
href="javascript:void(0)" ref="removeLink"
@click-event="removeItem(cartItem.cartItemType, cartItem.category)"> linkType="text"
<template v-slot:after-text> :text="removeLinkText"
<span class="sr-only">{{ cartItem.name }}</span> href="javascript:void(0)"
</template> @click-event="removeItem(cartItem.cartItemType, cartItem.category)">
</textLink> <template v-slot:after-text>
</div> <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 +112,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";
@ -198,6 +215,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() {
@ -796,16 +819,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;
@ -830,12 +860,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;
@ -940,17 +973,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 .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 {

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

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