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

Merge branch 'develop' into feature/CSR-1384-modals-for-add-vaps

Browse source
This commit is contained in:
Adam Caouette 2023-11-08 16:44:42 -05:00
commit a475c87bc8
15 changed files with 301 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
public/css/site-2020Styling.css
View file

@ -87,6 +87,20 @@
display: none;
}
.buy-backdrop {
background-color: rgba(0, 0, 0, 0.3) !important;
}
.buy-backdrop #afterpay__iframe-checkout-container {
width: 100%;
}
.buy-backdrop #afterpay__iframe-checkout-container .style_closeWrapper__lIHJe {
display: none;
}
.buy-container-closer {
display: none;
}
@keyframes rotate {
0% {
transform: rotate(0);

18
public/scss/site-2020Styling.scss
View file

@ -90,6 +90,24 @@
}
}
// AfterPay Styles
.buy-backdrop {
background-color: rgba(0,0,0,.3)!important;
#afterpay__iframe-checkout-container {
width: 100%;
.style_closeWrapper__lIHJe {
display: none;
}
}
}
.buy-container-closer {
display: none;
}
// Modal Spinner
@keyframes rotate {
0% { transform: rotate(0)}
100% { transform: rotate(360deg)}

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

@ -1,5 +1,5 @@
<template>
<div class="cart mb-4">
<div class="cart mb-5">
<div class="px-0">
<div
class="row vin-toggle flex align-items-center"
@ -24,6 +24,7 @@
:class="[this.packageCartItems ? 'vaps' : '']">
<span>{{ cartItem.name }}</span>
<textLink
v-if="allowItemRemoval"
ref="removeLink"
linkType="text"
:text="removeLinkText"
@ -32,13 +33,13 @@
</div>
<!-- Nonpackaged Cart Items -->
<hr style="background: red" />
<div
class="premium-appt-cart-item"
v-for="(cartItem, i) in nonpackageCartItems"
:key="i">
<span>{{ cartItem.name }}</span>
<textLink
v-if="allowItemRemoval"
ref="removeLink"
linkType="text"
:text="removeLinkText"
@ -53,7 +54,7 @@
linkType="text"
:text="recycleFeeCartItem.name"
href="#!"
@click-event="openModal(recyclingModal)" />
@click-event="openModal(recyclingModalCmsWidgetName)" />
<span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
</div>
<div v-if="mobileFeeCartItem">
@ -61,9 +62,10 @@
><span>{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}</span>
</div>
<div v-if="premiumAppointmentDiscountCartItem">
<div v-if="premiumAppointmentDiscountCartItem" class="premium-appt-cart-item">
<span>{{ premiumAppointmentDiscountCartItem.name }}</span>
<textLink
v-if="allowItemRemoval"
ref="removeLink"
linkType="text"
:text="removeLinkText"
@ -95,6 +97,9 @@
</div>
</div>
</div>
<contentGroupModal ref="RecycleModal" cmsWidgetName="RecycleModal">
<textBlock cmsWidgetName="RecycleTextBlock" />
</contentGroupModal>
</div>
</template>
@ -102,6 +107,7 @@
// Components
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";
// Mixins
import baseMixin from "@/mixins/base-mixin.js";
@ -122,6 +128,8 @@ export default {
damage: Object,
servicePackageOptionsCmsName: String,
availableVaps: Object,
allowItemRemoval: Boolean,
recyclingModalCmsWidgetName: String,
},
data() {
return {
@ -135,6 +143,9 @@ export default {
};
},
methods: {
openModal(modalName) {
this.$refs[modalName].openModal();
},
toggleClass: function (event) {
this.isActive = !this.isActive;
},
@ -678,6 +689,7 @@ export default {
components: {
textBlock,
textLink,
contentGroupModal,
},
};
</script>
@ -688,6 +700,12 @@ export default {
border-bottom: 1px solid $gray-500;
color: $black;
}
.modal-body {
h5 {
text-align: center;
border-bottom: none;
}
}
.border-bottom {
color: $gray;
}
@ -730,6 +748,9 @@ export default {
justify-content: flex-end;
}
}
a {
font-size: 0.875rem;
}
}
.package-type,
.service-type {
@ -761,6 +782,7 @@ export default {
}
a {
order: 3;
margin-right: 100%;
}
}
}
@ -789,4 +811,12 @@ export default {
}
}
}
.payment-method-question {
.question-text {
margin: 1rem 0 0.5rem 0;
}
span {
line-height: 24px;
}
}
</style>

26
src/helpers/promotions-helper.js
View file

@ -1,6 +1,7 @@
import store from "@/store";
import { storeActions } from "@/constants/store-actions";
import { partTypeStrings } from "@/constants/part-type-strings";
import { deepClone } from "@/helpers/object-helper";
import baseMixin from "@/mixins/base-mixin.js";
export const promoPartNumberStrings = {
@ -126,6 +127,31 @@ export function getPromosThatMatchLineItemsOnOrder(promos, lineItemsOnOrder) {
return matchingPromos;
}
// Returns the vaps that the provided <promos> requires to be on the order to satisfy
// Items that are already in <lineItemsOnOrder> will not be returned
export function getVapsThatNeedToBeAddedToSatisfyPromos(
promos,
availableLineItems,
lineItemsOnOrder
) {
const clonedVaps = deepClone(lineItemsOnOrder.vaps ?? []);
const promosWithAddableVaps = getPromosWithAddableVaps(promos);
if (promosWithAddableVaps.length) {
const matchingLineItems = getLineItemsThatMatchPromos(
promosWithAddableVaps,
availableLineItems
);
// Check if matching items are already in the order
const idsOfVapsAlreadyInOrder = clonedVaps.map((lineItem) => lineItem.id);
const vapsToAddToCart = matchingLineItems.filter(
(lineItem) => !idsOfVapsAlreadyInOrder.includes(lineItem.id)
);
return vapsToAddToCart;
} else {
return [];
}
}
export function shouldStripPromoQueryString(fmgPageQueryValue) {
return pagesToStripPromoQueryStringFrom.includes(fmgPageQueryValue);
}

10
src/layouts/confirmation/confirmation.vue
View file

@ -14,6 +14,7 @@
<div>
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayVehicleImage="vehicleBannerImageUrl"
:displayGenericVehicleImage="false" />
</div>
<div class="scheduleText">
@ -205,6 +206,9 @@ export default {
return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`;
}
},
vehicleBannerImageUrl() {
return store.getters.submittedOrder?.vehicle.imageUrl;
},
},
methods: {
arePagePrerequisitesValid() {
@ -238,7 +242,11 @@ export default {
const schedule = store.getters.order.schedule;
const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime);
return serviceLocationReqs && scheduleReqs;
// Customer
const customer = store.getters.order.customer;
const customerReqs = !!customer.emailAddress;
return serviceLocationReqs && scheduleReqs && customerReqs;
},
forwardButtonAction() {
window.location.assign("//www.safelite.com/");

14
src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
View file

@ -97,7 +97,11 @@ export default {
this.$refs[modalName].closeModal();
},
addRainDefenseToCart(modalName, part) {
this.currentCartItems.vaps.push(part);
// Clone vaps array, then replace this.currentCartItems.vaps with it at the end
// in order to successfully trigger parent's watcher
const clonedVaps = this.currentCartItems.vaps.slice(0);
clonedVaps.push(part);
this.currentCartItems.vaps = clonedVaps;
this.closeModal(modalName);
const message = this.getRainDefenseAddedMessage();
this.$emit("added-to-cart", {
@ -133,19 +137,23 @@ export default {
this.selectedWipers = ["REAR"];
}
}
// Clone vaps array, then replace this.currentCartItems.vaps with it at the end
// in order to successfully trigger parent's watcher
const clonedVaps = this.currentCartItems.vaps.slice(0);
itemsForCart.forEach((type) => {
if (type === wipersOfferedStrings.FRONT) {
part.frontWiperLineItems.forEach((part) => {
this.currentCartItems.vaps.push(part);
clonedVaps.push(part);
});
}
if (type === wipersOfferedStrings.REAR) {
part.rearWiperLineItems.forEach((part) => {
this.currentCartItems.vaps.push(part);
clonedVaps.push(part);
});
}
});
this.currentCartItems.vaps = clonedVaps;
this.closeModal(modalName);

1
src/layouts/payment-method/payment-method-question/payment-method-question.vue
View file

@ -77,6 +77,7 @@ export default {
.payment-method-question {
.question-text span {
text-align: left;
line-height: 24px;
}
}
</style>

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

@ -1,7 +1,7 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal notFullScreen ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="container-fluid">
<div class="row">
<div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@ -24,11 +24,13 @@
<cart
:damage="damageInfo"
:availableVaps="availableVaps"
:allowItemRemoval="true"
v-model="lineItems"
servicePackageOptionsCmsName="ServicePackageTitle"
@cart-remove="cartRemove" />
@cart-remove="cartRemove"
recyclingModalCmsWidgetName="RecycleModal" />
<hr />
<hr class="my-5" />
<div>
<alert
@ -86,7 +88,8 @@ import { paymentMethods } from "@/constants/payment-method-constants";
import { experimentSettings } from "@/constants/experiments";
import {
revalidatePromosAndValidateNewPromo,
getAddableVapsFromAvailableLineItems,
getPromosWithAddableVaps,
getVapsThatNeedToBeAddedToSatisfyPromos,
} from "@/helpers/promotions-helper";
import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
@ -166,7 +169,10 @@ export default {
"payment-method"
);
pricedLineItemsToTax.push(...(validatePromoResponse?.orderPromos ?? []));
const newValidatedPromos = validatePromoResponse?.orderPromos ?? [];
pricedLineItemsToTax.push(...newValidatedPromos);
// End of promo logic
const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
@ -189,6 +195,16 @@ export default {
const lineItems = mapTaxedLineItemsToStoreFormat(taxedLineItems, lineItemsFromStore);
const taxedVaps = mapTaxedLineItemsToStoreFormat(taxedLineItems, availableVaps);
// Add items that were not in the store yet but added via query string promo validation
lineItems.promos = lineItems.promos ?? [];
lineItems.promos.push(...newValidatedPromos);
const vapsToAddToCart = getVapsThatNeedToBeAddedToSatisfyPromos(
newValidatedPromos,
taxedVaps,
lineItems
);
lineItems.vaps.push(...vapsToAddToCart);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
@ -240,7 +256,7 @@ export default {
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
(!isMobile || schedule.endTime) &&
schedule.endTime &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);
@ -383,10 +399,11 @@ export default {
}
},
isPiaDisabled() {
const piaExperience =
this.getSettingValue(experimentSettings.PIA_EXPERIENCE) === "PIA Optional";
const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
return !piaExperience;
const isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required";
return !isEnabled;
},
paymentMethod() {
if (this.isPiaDisabled) {
@ -398,11 +415,35 @@ export default {
shouldDisplayPiaAlert() {
return this.$route.params[this.routerParams.DISPLAY_PIA_ALERT];
},
// Necessary to make the watcher of lineItems work
// JavaScript does not keep a record of the old value, only a reference to it's location in the memory.
// This creates a separate location for oldValue/newValue so they can be compared
// See Vue github issue #2164
lineItemsCloneForWatcher() {
return Object.assign({}, this.lineItems);
},
},
watch: {
customCtaCopy(newValue) {
this.updateFooterButtonText(newValue);
},
lineItemsCloneForWatcher: {
handler(newValue, oldValue) {
if (
!oldValue ||
oldValue.length == 0 ||
!oldValue.vaps ||
!newValue ||
newValue.length == 0
) {
return;
}
if (oldValue.vaps.length != newValue.vaps.length) {
this.revalidatePromos();
}
},
deep: true,
},
},
components: {
funnelHeader,

120
src/layouts/payment/payment.vue
View file

@ -21,6 +21,19 @@
scrolling="no">
</iframe>
</div>
<hr />
<cart
:damage="damageInfo"
:availableLineItems="availableLineItems"
:allowItemRemoval="false"
v-model="lineItems"
servicePackageOptionsCmsName="ServicePackageTitle"
recyclingModalCmsWidgetName="RecycleModal" />
<hr />
<paymentSwitch
cmsWidgetName="PaymentMethodWidget"
:paymentType="paymentType"
@ -163,7 +176,7 @@
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import cart from "@/fmg-components/cart/cart";
import paymentSwitch from "./payment-switch/payment-switch.vue";
import { storeActions } from "@/constants/store-actions";
@ -175,6 +188,13 @@ import { applicationConfig } from "@/constants/application-config";
import { paymentMethods } from "@/constants/payment-method-constants";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import baseMixin from "@/mixins/base-mixin.js";
import { mapTaxedAvailableLineItemsToStoreFormat } from "../../store";
import {
revalidatePromosAndValidateNewPromo,
getAddableVapsFromAvailableLineItems,
} from "@/helpers/promotions-helper";
import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import iframeResize from "../../../node_modules/iframe-resizer/js/iframeResizer.js";
@ -207,6 +227,8 @@ export default {
displayAmount: this.getDisplayAmountDue(),
piaLineItems: this.getPiaLineItems(),
paypalPayment: this.isPaypal(),
lineItems: [],
availableLineItems: [],
};
},
directives: {
@ -231,6 +253,24 @@ export default {
"payment"
);
const wipersPromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_WIPERS,
null,
"payment"
);
const rainDefensePromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_RAIN_DEFENSE,
null,
"payment"
);
const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_SUPPORTING_ITEMS,
null,
"payment"
);
// TODO: Data fetching Promise declarations
const promiseResultMap = [
@ -242,14 +282,84 @@ export default {
resultKey: "signature",
promise: signaturePromise,
},
{
resultKey: "wipers",
promise: wipersPromise,
},
{
resultKey: "rainDefense",
promise: rainDefensePromise,
},
{
resultKey: "supportingItems",
promise: supportingItemsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
const glassParts = store.getters.order.lineItems.glassParts ?? [];
let availableLineItems = [
resultMap.rainDefense,
...resultMap.supportingItems,
...resultMap.wipers,
...glassParts,
];
const lineItemsFromStore = store.getters.order.lineItems;
await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
availableLineItems: availableLineItems,
},
"payment",
false
);
// Promo logic
const promoCodeFromQueryString = getQuerystringParameter(queryStrings.PROMO);
const { validatePromoResponse, revalidatePromoResponse } =
await revalidatePromosAndValidateNewPromo(
promoCodeFromQueryString,
availableLineItems,
"payment-method"
);
availableLineItems.push(...(validatePromoResponse?.orderPromos ?? []));
// End of promo logic
const taxedAvailableLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
billToAccountNumber: "87291",
providerNumber: store.getters.order.serviceLocation.provider.providerNumber,
appointmentType: store.getters.order.serviceLocation.appointmentType,
serviceLocationCity: store.getters.order.serviceLocation.city,
serviceLocationState: store.getters.order.serviceLocation.state,
serviceLocationZipCode: store.getters.order.serviceLocation.zipCode,
pricedAvailableLineItems: availableLineItems,
},
"payment-method",
false
);
// Match all available line items to the line items as they are in the store
// and rebuild the original structure.
const lineItems = mapTaxedAvailableLineItemsToStoreFormat(
availableLineItems,
lineItemsFromStore
);
// Call the "next" function to complete the transition to this page.
next(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.fetchSignatureInfo(resultMap.signature);
vm.availableLineItems = taxedAvailableLineItems;
vm.lineItems = lineItems;
});
},
computed: {
@ -276,6 +386,9 @@ export default {
switchPaymentText() {
return this.getCmsContent("PaymentMethodWidget", "QuestionText");
},
damageInfo() {
return this.$store.getters.damage;
},
},
methods: {
arePagePrerequisitesValid() {
@ -312,7 +425,7 @@ export default {
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
(!isMobile || schedule.endTime) &&
schedule.endTime &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);
@ -466,6 +579,7 @@ export default {
funnelHeader,
navbar,
loadingModal,
cart,
paymentSwitch,
},
};
@ -474,7 +588,7 @@ export default {
<style lang="scss">
.hop-iframe {
position: relative;
min-height: 1120px;
min-height: 650px;
width: 100%;
border: 0 none;
}

3
src/layouts/review/review-block/review-block.vue
View file

@ -55,4 +55,7 @@ export default {
:deep(.review-block-content > ul) {
margin-bottom: 0rem;
}
.review-block-content {
width: 90%;
}
</style>

2
src/layouts/review/review.vue
View file

@ -207,7 +207,7 @@ export default {
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
(!isMobile || schedule.endTime) &&
schedule.endTime &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);

6
src/layouts/service-location/service-location.spec.js
View file

@ -286,6 +286,7 @@ describe("service-location.vue", () => {
const newServiceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
zipCodeCtu: "01526",
};
const serviceZipCodeComponent = wrapper.findComponent({
@ -316,6 +317,7 @@ describe("service-location.vue", () => {
const newServiceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
zipCodeCtu: "01526",
};
const mobileLocationQuestions = {
@ -365,6 +367,7 @@ describe("service-location.vue", () => {
const newServiceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
zipCodeCtu: "01526",
};
wrapper.vm.selectedAppointmentType = "Inshop";
@ -395,6 +398,7 @@ describe("service-location.vue", () => {
const newServiceZipCodeQuestion = {
zipCode: "45433",
state: "OH",
zipCodeCtu: "01526",
};
// Act
@ -511,11 +515,13 @@ describe("service-location.vue", () => {
wrapper.vm.serviceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
zipCodeCtu: "01526",
};
const newServiceZipCodeInfo = {
state: "OH",
zipCode: "43081",
zipCodeCtu: "01526",
};
// Act

2
src/layouts/service-location/service-location.vue
View file

@ -245,6 +245,7 @@ export default {
return {
state: this.state,
zipCode: this.zipCode,
zipCodeCtu: this.zipCodeCtu,
};
},
set: function (newValue) {
@ -256,6 +257,7 @@ export default {
this.state = newValue.state;
this.zipCode = newValue.zipCode;
this.zipCodeCtu = newValue.zipCodeCtu;
this.$nextTick();
},

9
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js
View file

@ -113,6 +113,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "",
zipCode: "",
zipCodeCtu: "",
};
// Arrange
@ -135,6 +136,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "OH",
zipCode: "43235",
zipCodeCtu: "01820",
};
const wrapper = mount(serviceZipModalQuestion, {
@ -156,6 +158,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "IL",
zipCode: "61606",
zipCodeCtu: "01526",
};
const zip = "43235";
@ -176,7 +179,7 @@ describe("service-zip-modal-question.vue", () => {
await wrapper.vm.setZipCode();
let expectedEmit = [[{ state: "OH", zipCode: "43235" }]];
let expectedEmit = [[{ state: "OH", zipCode: "43235", zipCodeCtu: "01820" }]];
// Assert
expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit);
@ -187,6 +190,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "IL",
zipCode: "61606",
zipCodeCtu: "01526",
};
const zip = "";
@ -214,6 +218,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "IL",
zipCode: "61606",
zipCodeCtu: "01526",
};
const zip = "11111";
@ -241,6 +246,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "IL",
zipCode: "61606",
zipCodeCtu: "01526",
};
const zip = "";
@ -269,6 +275,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "IL",
zipCode: "61606",
zipCodeCtu: "01526",
};
const zip = "123";

1
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -141,6 +141,7 @@ export default {
this.resetModalButtonStyle();
} else {
this.internalModel.state = zipCodeData.state;
this.internalModel.zipCodeCtu = zipCodeData.zipCodeCtu;
// retrieve mobile fee part
const serviceZipCode = this.internalModel.zipCode;