Merge pull request #1522 from Safelite/feature/CSR-1689-ajc
CSR-1689: add cart to confirmation page
This commit is contained in:
AdamCaouetteSafelite
GitHub
commit
881a144573
5 changed files with 72 additions and 24 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="cart mb-5">
|
||||
<div class="cart">
|
||||
<div class="px-0">
|
||||
<div
|
||||
class="row vin-toggle flex align-items-center"
|
||||
|
|
@ -47,11 +47,14 @@
|
|||
href="#!"
|
||||
@click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
|
||||
<textLink
|
||||
v-else-if="cartItem == recycleFeeCartItem"
|
||||
v-else-if="cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName"
|
||||
linkType="text"
|
||||
:text="recycleFeeCartItem.name"
|
||||
href="#!"
|
||||
@click-event="openModal(recyclingModalCmsWidgetName)" />
|
||||
<span v-else-if="cartItem == recycleFeeCartItem">{{
|
||||
recycleFeeCartItem.name
|
||||
}}</span>
|
||||
<span
|
||||
>{{
|
||||
`${
|
||||
|
|
@ -72,6 +75,10 @@
|
|||
<span>{{ salesTaxText }}</span
|
||||
><span>{{ currencyFormatter.format(salesTax) }}</span>
|
||||
</div>
|
||||
<div v-if="showAsPaid" class="amount-paid">
|
||||
<span>{{ amountPaidText }}</span
|
||||
><span>{{ currencyFormatter.format(amountPaid) }}</span>
|
||||
</div>
|
||||
<div class="amount-due">
|
||||
<span>{{ amountDueText }}</span
|
||||
><span>{{ currencyFormatter.format(amountDue) }}</span>
|
||||
|
|
@ -112,6 +119,7 @@ export default {
|
|||
availableVaps: Object,
|
||||
allowItemRemoval: Boolean,
|
||||
recyclingModalCmsWidgetName: String,
|
||||
showAsPaid: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -319,7 +327,6 @@ export default {
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
return nonpackageCartItems;
|
||||
},
|
||||
frontWiperCartItemName() {
|
||||
|
|
@ -670,6 +677,9 @@ export default {
|
|||
amountDueText() {
|
||||
return this.getCmsContent("AmountDueTextWidget", "Text");
|
||||
},
|
||||
amountPaidText() {
|
||||
return this.getCmsContent("AmountPaidTextWidget", "Text");
|
||||
},
|
||||
subtotalText() {
|
||||
return this.getCmsContent("SubtotalTextWidget", "Text");
|
||||
},
|
||||
|
|
@ -691,6 +701,15 @@ export default {
|
|||
return salesTax;
|
||||
},
|
||||
amountDue() {
|
||||
if (this.showAsPaid) {
|
||||
return 0;
|
||||
}
|
||||
return this.subTotal + this.salesTax;
|
||||
},
|
||||
amountPaid() {
|
||||
if (!this.showAsPaid) {
|
||||
return 0;
|
||||
}
|
||||
return this.subTotal + this.salesTax;
|
||||
},
|
||||
},
|
||||
|
|
@ -712,6 +731,8 @@ export default {
|
|||
|
||||
<style lang="scss">
|
||||
.cart {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
h5 {
|
||||
border-bottom: 1px solid $gray-500;
|
||||
color: $black;
|
||||
|
|
@ -735,6 +756,7 @@ export default {
|
|||
max-height: 0;
|
||||
transition: all 350ms ease-in;
|
||||
overflow: hidden;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -798,7 +820,8 @@ export default {
|
|||
}
|
||||
.sub-total,
|
||||
.sales-tax,
|
||||
.amount-due {
|
||||
.amount-due,
|
||||
.amount-paid {
|
||||
font-weight: 500;
|
||||
}
|
||||
.sub-total {
|
||||
|
|
@ -825,7 +848,7 @@ export default {
|
|||
display: inline-flex;
|
||||
position: relative;
|
||||
right: 0.75rem;
|
||||
margin: 1rem 0 1rem 1rem;
|
||||
margin: 0.5rem 0 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.expanded:after {
|
||||
|
|
@ -835,6 +858,7 @@ export default {
|
|||
max-height: 650px;
|
||||
transition: all 350ms ease-in;
|
||||
overflow: hidden;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,9 @@ beforeEach(() => {
|
|||
damage: {
|
||||
isRepair: false,
|
||||
},
|
||||
payment: {
|
||||
isPia: true,
|
||||
},
|
||||
referralNumber: "1234567",
|
||||
vehicle: {
|
||||
year: "2004",
|
||||
|
|
@ -113,6 +116,7 @@ beforeEach(() => {
|
|||
emailAddress: "test@test.com",
|
||||
},
|
||||
},
|
||||
damage: {},
|
||||
payment: {
|
||||
isInsurance: true,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -37,6 +37,15 @@
|
|||
|
||||
<div class="appoinmenttext" v-html="AppointmentWordingText"></div>
|
||||
</div>
|
||||
<hr />
|
||||
<cart
|
||||
:damage="damageInfo"
|
||||
:availableVaps="vaps"
|
||||
:allowItemRemoval="false"
|
||||
v-model="lineItems"
|
||||
:showAsPaid="isPia"
|
||||
servicePackageOptionsCmsName="ServicePackageTitle" />
|
||||
<hr class="mb-5" />
|
||||
<div class="emailtext" v-html="ConfirmationEmailText"></div>
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
|
|
@ -57,19 +66,21 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
|||
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
|
||||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||
import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar";
|
||||
import cart from "@/fmg-components/cart/cart";
|
||||
|
||||
//Supporting files
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { applicationConfig } from "@/constants/application-config.js";
|
||||
import { convertDateStringToDate } from "@/layouts/schedule/helpers/schedule-helper";
|
||||
|
||||
import { deepClone } from "@/helpers/object-helper";
|
||||
import { Form } from "vee-validate";
|
||||
import store from "@/store";
|
||||
|
||||
import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-helper";
|
||||
|
||||
export default {
|
||||
name: "confirmation",
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -87,11 +98,21 @@ export default {
|
|||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const lineItemsFromStore = deepClone(store.getters.order.lineItems);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.lineItems = lineItemsFromStore;
|
||||
vm.vaps = lineItemsFromStore.vaps;
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineItems: [],
|
||||
vaps: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
ScheduleConfirmationText() {
|
||||
return this.getCmsContent("ScheduleConfirmationWidget", "BodyText");
|
||||
|
|
@ -209,6 +230,12 @@ export default {
|
|||
vehicleBannerImageUrl() {
|
||||
return store.getters.submittedOrder?.vehicle.imageUrl;
|
||||
},
|
||||
damageInfo() {
|
||||
return store.getters.damage;
|
||||
},
|
||||
isPia() {
|
||||
return store.getters.submittedOrder?.payment.isPia;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
|
|
@ -258,12 +285,14 @@ export default {
|
|||
navbar,
|
||||
vehicleBanner,
|
||||
addToCalendar,
|
||||
cart,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.main {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem 1.5rem 1.5rem;
|
||||
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
|
||||
border-radius: 5px;
|
||||
|
|
@ -336,7 +365,7 @@ export default {
|
|||
}
|
||||
|
||||
.emailtext {
|
||||
padding: 1.5rem 0 0;
|
||||
padding: 0.5rem 0 0;
|
||||
|
||||
p {
|
||||
font-size: 0.875rem;
|
||||
|
|
|
|||
|
|
@ -29,14 +29,15 @@
|
|||
servicePackageOptionsCmsName="ServicePackageTitle"
|
||||
recyclingModalCmsWidgetName="RecycleModal" />
|
||||
|
||||
<hr class="my-5" />
|
||||
<promoModalQuestion
|
||||
class="pb-3"
|
||||
class="pb-2"
|
||||
v-model="lineItems"
|
||||
:availableVaps="availableVaps"
|
||||
linkWidgetName="PromoLinkWidget"
|
||||
modalWidgetName="PromoModalWidget" />
|
||||
|
||||
<hr class="mb-5" />
|
||||
|
||||
<div>
|
||||
<alert
|
||||
ref="piaErrorAlert"
|
||||
|
|
@ -409,7 +410,6 @@ export default {
|
|||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.CLICKED_PAY_NOW,
|
||||
|
|
|
|||
|
|
@ -26,13 +26,13 @@
|
|||
|
||||
<cart
|
||||
:damage="damageInfo"
|
||||
:availableLineItems="availableLineItems"
|
||||
:availableVaps="availableVaps"
|
||||
:allowItemRemoval="false"
|
||||
v-model="lineItems"
|
||||
servicePackageOptionsCmsName="ServicePackageTitle"
|
||||
recyclingModalCmsWidgetName="RecycleModal" />
|
||||
|
||||
<hr />
|
||||
<hr class="mb-5" />
|
||||
|
||||
<paymentSwitch
|
||||
cmsWidgetName="PaymentMethodWidget"
|
||||
|
|
@ -267,12 +267,6 @@ export default {
|
|||
"payment"
|
||||
);
|
||||
|
||||
const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
storeActions.GET_SUPPORTING_ITEMS,
|
||||
null,
|
||||
"payment"
|
||||
);
|
||||
|
||||
// TODO: Data fetching Promise declarations
|
||||
|
||||
const promiseResultMap = [
|
||||
|
|
@ -292,10 +286,6 @@ export default {
|
|||
resultKey: "rainDefense",
|
||||
promise: rainDefensePromise,
|
||||
},
|
||||
{
|
||||
resultKey: "supportingItems",
|
||||
promise: supportingItemsPromise,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
|
@ -363,6 +353,7 @@ export default {
|
|||
taxedVaps,
|
||||
lineItems
|
||||
);
|
||||
lineItems.vaps = lineItems.vaps ?? [];
|
||||
lineItems.vaps.push(...vapsToAddToCart);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
|
|
|
|||
Loading…
Reference in a new issue