Remove unnecessary files.
This commit is contained in:
Chloe Herd
parent
e15125da8a
commit
52e75590ec
2 changed files with 0 additions and 703 deletions
|
|
@ -1,217 +0,0 @@
|
||||||
<template>
|
|
||||||
<baseInputButton
|
|
||||||
v-bind="$props"
|
|
||||||
:buttonWrapperClasses="[
|
|
||||||
'add-vaps-button w-100 rounded-3 d-flex align-items-center h-100 base-input-button',
|
|
||||||
{ horizontal: isWide },
|
|
||||||
]"
|
|
||||||
v-model="selectedValue">
|
|
||||||
<div
|
|
||||||
class="d-flex w-100 align-items-center px-1 h-100 add-vaps-button-content button-content rounded-3"
|
|
||||||
:class="labelClasses">
|
|
||||||
<img :id="buttonImageId" :src="buttonImage" :alt="altText" />
|
|
||||||
<div class="copy-wrapper" :class="isWide ? 'ms-4 me-2' : ''">
|
|
||||||
<p class="small mb-0" :class="isWide ? 'mt-0' : 'mt-1'">
|
|
||||||
{{ buttonLabel }}
|
|
||||||
</p>
|
|
||||||
<p v-if="buttonLabelSubCopy" class="fs-7 m-0 sub-copy">
|
|
||||||
{{ buttonLabelSubCopy }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<p class="fs-7 mb-0 link-styling" :class="isWide ? 'mt-0' : 'mt-2'">View details</p>
|
|
||||||
</div>
|
|
||||||
</baseInputButton>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
|
|
||||||
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "addVapsButton",
|
|
||||||
mixins: [inputButtonWrapperMixin],
|
|
||||||
components: {
|
|
||||||
baseInputButton,
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
labelClasses() {
|
|
||||||
if (this.isWide) {
|
|
||||||
let classes = "flex-row py-2 ps-4 pe-4";
|
|
||||||
if (this.buttonLabelSubCopy) {
|
|
||||||
classes += " checkboxTop";
|
|
||||||
}
|
|
||||||
return classes;
|
|
||||||
} else {
|
|
||||||
return "flex-column py-2";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@mixin add-vaps-button-focus($box-shadow-color) {
|
|
||||||
&:focus-visible + .add-vaps-button-content {
|
|
||||||
box-shadow: 0 0 0 2.5px $box-shadow-color;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
}
|
|
||||||
&:focus + .add-vaps-button-content {
|
|
||||||
box-shadow: 0 0 0 2.5px $box-shadow-color;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
}
|
|
||||||
&:checked:focus + .add-vaps-button-content {
|
|
||||||
box-shadow: 0 0 0 2.5px $box-shadow-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.add-vaps-button {
|
|
||||||
border: 1px solid $gray-500;
|
|
||||||
&.has-error {
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"] {
|
|
||||||
@include add-vaps-button-focus($red);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
height: auto;
|
|
||||||
width: 2.6rem;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.copy-wrapper {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"] {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
+ .add-vaps-button-content {
|
|
||||||
outline: none;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: $gray-600;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&.sub-copy {
|
|
||||||
color: $green;
|
|
||||||
}
|
|
||||||
&.link-styling {
|
|
||||||
font-weight: 500;
|
|
||||||
color: $blue;
|
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-offset: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include add-vaps-button-focus($blue);
|
|
||||||
|
|
||||||
+ .add-vaps-button-content::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
margin: 3rem 0 0 0;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid $gray-500;
|
|
||||||
border-radius: 2px;
|
|
||||||
order: 2;
|
|
||||||
flex-shrink: 0;
|
|
||||||
color: $gray-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .add-vaps-button-content.checkboxTop::before {
|
|
||||||
margin: -1.25rem 0.5rem 0 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .add-vaps-button-content.checkboxTop::after {
|
|
||||||
margin: -1.5rem 0.5rem 0 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked + .add-vaps-button-content::before {
|
|
||||||
background: $blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked + .add-vaps-button-content::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
margin: 3.2rem 0 0 0;
|
|
||||||
border-left: 2px solid $white;
|
|
||||||
border-bottom: 2px solid $white;
|
|
||||||
height: 6px;
|
|
||||||
width: 11px;
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="radio"] {
|
|
||||||
+ .add-vaps-button-content::before {
|
|
||||||
content: "";
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .add-vaps-button-content::after {
|
|
||||||
content: "";
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .add-vaps-button-content {
|
|
||||||
img {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.horizontal {
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"] {
|
|
||||||
+ .add-vaps-button-content::before {
|
|
||||||
content: "";
|
|
||||||
position: relative;
|
|
||||||
margin: 0 0.5rem 0 0;
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked + .add-vaps-button-content::after {
|
|
||||||
content: "";
|
|
||||||
margin: -0.15rem 0 0 0;
|
|
||||||
left: 1.175rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked + .add-vaps-button-content {
|
|
||||||
p {
|
|
||||||
color: $black;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-copy {
|
|
||||||
color: $gray-600;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .add-vaps-button-content {
|
|
||||||
outline: none;
|
|
||||||
min-height: 48px;
|
|
||||||
color: $gray-600;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p:not(.link-styling) {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
p:not(.link-styling):not(.sub-copy) {
|
|
||||||
color: $gray-600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,486 +0,0 @@
|
||||||
<template>
|
|
||||||
<transition name="fade" mode="out-in">
|
|
||||||
<div class="add-vaps-buttons" aria-live="polite">
|
|
||||||
<buttonQuestion
|
|
||||||
ref="buttonQuestion"
|
|
||||||
:answers="buttonsToDisplay"
|
|
||||||
groupName="addVaps"
|
|
||||||
v-model="buttonsToDisplay"
|
|
||||||
buttonTypeString="addVapsButton"
|
|
||||||
:buttonTypeObject="addVapsButton"
|
|
||||||
:isWide="buttonsToDisplay.length > 1 ? false : true"
|
|
||||||
@update:modelValue="openModal" />
|
|
||||||
|
|
||||||
<contentGroupModal
|
|
||||||
ref="RainDefenseModal"
|
|
||||||
cmsWidgetName="RainDefenseModal"
|
|
||||||
v-if="rainDefenseModal"
|
|
||||||
@footer-button-action="addRainDefenseToCart('RainDefenseModal', rainDefenseModal)"
|
|
||||||
footerButtonActionName="footer-button-action">
|
|
||||||
<p class="price">+${{ rainDefenseModal.listPrice }}</p>
|
|
||||||
</contentGroupModal>
|
|
||||||
|
|
||||||
<contentGroupModal
|
|
||||||
ref="WipersModal"
|
|
||||||
cmsWidgetName="WipersModal"
|
|
||||||
v-if="wipersModal"
|
|
||||||
@footer-button-action="addWipersToCart('WipersModal', wipersModal)"
|
|
||||||
footerButtonActionName="footer-button-action">
|
|
||||||
<div v-if="wipersOffered === wipersOfferedStrings.BOTH" class="wiper-options">
|
|
||||||
<buttonQuestion
|
|
||||||
ref="buttonQuestion"
|
|
||||||
buttonTypeString="checkbox"
|
|
||||||
class="mt-5"
|
|
||||||
:answers="wipersOptions"
|
|
||||||
groupName="wipers-options"
|
|
||||||
textPosition="text-center"
|
|
||||||
v-model="selectedWipers"
|
|
||||||
isMultiSelect
|
|
||||||
isRequired
|
|
||||||
validationRules="checkbox-required" />
|
|
||||||
</div>
|
|
||||||
<div v-else-if="wipersOffered === wipersOfferedStrings.FRONT" class="wiper-options">
|
|
||||||
<p class="price">+${{ wipersModal.totalFrontPrice }}</p>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="wipersOffered === wipersOfferedStrings.REAR" class="wiper-options">
|
|
||||||
<p class="price">+${{ wipersModal.totalRearPrice }}</p>
|
|
||||||
</div>
|
|
||||||
</contentGroupModal>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// COMPONENTS
|
|
||||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
|
||||||
import addVapsButton from "./add-vaps-button/add-vaps-button";
|
|
||||||
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
|
|
||||||
|
|
||||||
// SUPPORTING
|
|
||||||
import { partTypeStrings } from "@/constants/part-type-strings";
|
|
||||||
import { defineRule } from "vee-validate";
|
|
||||||
import { required } from "@/helpers/validation-rules";
|
|
||||||
import { errorMessages } from "@/constants/error-messages";
|
|
||||||
import { processIfStatements } from "@/helpers/cms-content-helper";
|
|
||||||
import { deepClone } from "@/helpers/object-helper";
|
|
||||||
|
|
||||||
// DEFINE VALIDATION RULES
|
|
||||||
defineRule("checkbox-required", required(errorMessages.OPTION_REQUIRED));
|
|
||||||
|
|
||||||
const wipersOfferedStrings = {
|
|
||||||
FRONT: "FRONT",
|
|
||||||
REAR: "REAR",
|
|
||||||
BOTH: "BOTH",
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "add-vaps-modal-buttons",
|
|
||||||
props: {
|
|
||||||
vapsTilesCmsName: String,
|
|
||||||
availableVaps: Object,
|
|
||||||
modelValue: Object,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
addVapsButton: addVapsButton,
|
|
||||||
isModalOpened: false,
|
|
||||||
selectedWipers: this.getSelectedWipers(),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
processIfStatements,
|
|
||||||
openModal(modalName) {
|
|
||||||
this.selectedWipers = this.getSelectedWipers(); // reset selectedWipers to null upon modal open
|
|
||||||
this.$refs[modalName].openModal();
|
|
||||||
},
|
|
||||||
closeModal(modalName) {
|
|
||||||
this.$refs[modalName].closeModal();
|
|
||||||
},
|
|
||||||
addRainDefenseToCart(modalName, 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 headline = this.AddedToCartSuccessMessageFromCms;
|
|
||||||
const message = this.AddRainDefenseSuccessMessageFromCms;
|
|
||||||
this.$emit("added-to-cart", {
|
|
||||||
messageHeadline: headline,
|
|
||||||
messageCopy: message,
|
|
||||||
type: "alert-success",
|
|
||||||
isDismissible: true,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
addWipersToCart(modalName, part) {
|
|
||||||
const itemsForCart = [];
|
|
||||||
|
|
||||||
const frontWipersAlreadyInCart = this.currentCartItems.vaps.some((item) => {
|
|
||||||
return item.partType === part.frontWiperLineItems[0].partType;
|
|
||||||
});
|
|
||||||
const rearWipersAlreadyInCart = this.currentCartItems.vaps.some((item) => {
|
|
||||||
return item.partType === part.rearWiperLineItems[0]?.partType;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.wipersOffered === wipersOfferedStrings.BOTH) {
|
|
||||||
this.selectedWipers.forEach((wiper) => {
|
|
||||||
itemsForCart.push(wiper);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (
|
|
||||||
!frontWipersAlreadyInCart &&
|
|
||||||
this.wipersOffered === wipersOfferedStrings.FRONT
|
|
||||||
) {
|
|
||||||
itemsForCart.push(wipersOfferedStrings.FRONT);
|
|
||||||
this.selectedWipers = ["FRONT"];
|
|
||||||
}
|
|
||||||
if (!rearWipersAlreadyInCart && this.wipersOffered === wipersOfferedStrings.REAR) {
|
|
||||||
itemsForCart.push(wipersOfferedStrings.REAR);
|
|
||||||
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) => {
|
|
||||||
clonedVaps.push(part);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (type === wipersOfferedStrings.REAR) {
|
|
||||||
part.rearWiperLineItems.forEach((part) => {
|
|
||||||
clonedVaps.push(part);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.currentCartItems.vaps = clonedVaps;
|
|
||||||
|
|
||||||
this.closeModal(modalName);
|
|
||||||
|
|
||||||
const headline = this.AddedToCartSuccessMessageFromCms;
|
|
||||||
const message = this.getWipersAddedMessage();
|
|
||||||
this.$emit("added-to-cart", {
|
|
||||||
messageHeadline: headline,
|
|
||||||
messageCopy: message,
|
|
||||||
type: "alert-success",
|
|
||||||
isDismissible: true,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
updateWipersOffered(value) {
|
|
||||||
this.wipersOffered = value;
|
|
||||||
},
|
|
||||||
getSelectedWipers() {
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
getWipersAddedMessage() {
|
|
||||||
return this.processIfStatements(
|
|
||||||
this.AddWipersSuccessMessageFromCms,
|
|
||||||
"custom",
|
|
||||||
this.getCustomValueFromString
|
|
||||||
);
|
|
||||||
},
|
|
||||||
getCustomValueFromString(str) {
|
|
||||||
switch (str) {
|
|
||||||
case "vapsAddedIsFrontWipers":
|
|
||||||
return (
|
|
||||||
this.selectedWipers?.length === 1 &&
|
|
||||||
this.selectedWipers[0] === wipersOfferedStrings.FRONT
|
|
||||||
);
|
|
||||||
case "vapsAddedIsRearWipers":
|
|
||||||
return (
|
|
||||||
this.selectedWipers?.length === 1 &&
|
|
||||||
this.selectedWipers[0] === wipersOfferedStrings.REAR
|
|
||||||
);
|
|
||||||
case "vapsAddedIsBothWipers":
|
|
||||||
return this.selectedWipers?.length > 1;
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getAnswerFromCms(name, answers) {
|
|
||||||
const answerIndex = answers.findIndex((answer) => {
|
|
||||||
return answer.Name === name;
|
|
||||||
});
|
|
||||||
return answers[answerIndex];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
currentCartItems() {
|
|
||||||
const modelValue = this.modelValue;
|
|
||||||
if (!modelValue.vaps) modelValue.vaps = [];
|
|
||||||
return modelValue;
|
|
||||||
},
|
|
||||||
rainDefenseModal() {
|
|
||||||
const lineItem = this.availableVaps.find((item) => {
|
|
||||||
return item.partType === partTypeStrings.RAIN_DEFENSE;
|
|
||||||
});
|
|
||||||
if (lineItem)
|
|
||||||
lineItem.listPrice = parseFloat(
|
|
||||||
lineItem?.laborAmount + lineItem?.sellingPrice + lineItem?.kitPrice
|
|
||||||
).toFixed(2);
|
|
||||||
return lineItem;
|
|
||||||
},
|
|
||||||
wipersModal() {
|
|
||||||
// create a single wiper item for modal
|
|
||||||
const frontWiperLineItems = this.availableVaps.filter((item) => {
|
|
||||||
return item.partType.includes(partTypeStrings.FRONT_WIPER);
|
|
||||||
});
|
|
||||||
const rearWiperLineItems = this.availableVaps.filter((item) => {
|
|
||||||
return item.partType.includes(partTypeStrings.REAR_WIPER);
|
|
||||||
});
|
|
||||||
let wipersModal;
|
|
||||||
let totalFrontPrice = 0;
|
|
||||||
let totalRearPrice = 0;
|
|
||||||
|
|
||||||
// calculate prices to display
|
|
||||||
frontWiperLineItems?.forEach((item) => {
|
|
||||||
totalFrontPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
|
|
||||||
});
|
|
||||||
rearWiperLineItems?.forEach((item) => {
|
|
||||||
totalRearPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
|
|
||||||
});
|
|
||||||
|
|
||||||
wipersModal = {
|
|
||||||
description: "WIPERS ITEM",
|
|
||||||
partType: "WIPERS",
|
|
||||||
frontWiperLineItems: frontWiperLineItems,
|
|
||||||
rearWiperLineItems: rearWiperLineItems,
|
|
||||||
totalFrontPrice: parseFloat(totalFrontPrice).toFixed(2),
|
|
||||||
totalRearPrice: parseFloat(totalRearPrice).toFixed(2),
|
|
||||||
};
|
|
||||||
|
|
||||||
return wipersModal;
|
|
||||||
},
|
|
||||||
answersCmsData() {
|
|
||||||
return this.getCmsContent(this.vapsTilesCmsName, "Answers");
|
|
||||||
},
|
|
||||||
rainDefenseInCart() {
|
|
||||||
return this.currentCartItems.vaps?.some((vap) => {
|
|
||||||
return vap?.partType === partTypeStrings.RAIN_DEFENSE;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
frontWipersInCart() {
|
|
||||||
return this.currentCartItems.vaps?.some((vap) => {
|
|
||||||
return vap?.partType?.includes(partTypeStrings.FRONT_WIPER);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
rearWipersInCart() {
|
|
||||||
return this.currentCartItems.vaps?.some((vap) => {
|
|
||||||
return vap?.partType?.includes(partTypeStrings.REAR_WIPER);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
wipersOffered() {
|
|
||||||
let result;
|
|
||||||
if (!this.frontWipersInCart) {
|
|
||||||
if (!this.rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
|
|
||||||
result = wipersOfferedStrings.BOTH;
|
|
||||||
} else if (
|
|
||||||
!this.frontWipersInCart &&
|
|
||||||
this.wipersModal?.frontWiperLineItems.length > 0
|
|
||||||
) {
|
|
||||||
result = wipersOfferedStrings.FRONT;
|
|
||||||
}
|
|
||||||
} else if (!this.rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
|
|
||||||
result = wipersOfferedStrings.REAR;
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
},
|
|
||||||
wipersModalDataFromCms() {
|
|
||||||
return this.getAnswerFromCms("WipersModal", this.answersCmsData);
|
|
||||||
},
|
|
||||||
rainDefenseModalDataFromCms() {
|
|
||||||
return this.getAnswerFromCms("RainDefenseModal", this.answersCmsData);
|
|
||||||
},
|
|
||||||
buttonsToDisplay() {
|
|
||||||
const buttons = [];
|
|
||||||
if (!this.answersCmsData) return buttons;
|
|
||||||
|
|
||||||
const wipersModalData = deepClone(this.wipersModalDataFromCms);
|
|
||||||
|
|
||||||
if (this.wipersOffered === wipersOfferedStrings.BOTH) {
|
|
||||||
// NO REAR WIPERS or FRONT WIPERS IN CART; SHOW COMBO BUTTON
|
|
||||||
const prices = [
|
|
||||||
this.wipersModal?.totalFrontPrice,
|
|
||||||
this.wipersModal?.totalRearPrice,
|
|
||||||
];
|
|
||||||
prices.sort((a, b) => a - b);
|
|
||||||
wipersModalData.SubText = "+$" + prices[0] + " - $" + prices[prices.length - 1];
|
|
||||||
wipersModalData.Text = wipersModalData.Text?.replaceAll("{custom:WIPERTYPE}", "");
|
|
||||||
buttons.push(wipersModalData);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.wipersOffered === wipersOfferedStrings.FRONT) {
|
|
||||||
// NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON
|
|
||||||
wipersModalData.SubText = "+$" + this.wipersModal?.totalFrontPrice;
|
|
||||||
if (this.rearWipersInCart) {
|
|
||||||
wipersModalData.Text = wipersModalData.Text?.replaceAll(
|
|
||||||
"{custom:WIPERTYPE}",
|
|
||||||
wipersOfferedStrings.FRONT.toLowerCase() + " "
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
wipersModalData.Text = wipersModalData.Text?.replaceAll(
|
|
||||||
"{custom:WIPERTYPE}",
|
|
||||||
""
|
|
||||||
);
|
|
||||||
}
|
|
||||||
buttons.push(wipersModalData);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.wipersOffered === wipersOfferedStrings.REAR) {
|
|
||||||
// NO REAR WIPERS IN CART; SHOW ONLY REAR WIPERS BUTTON
|
|
||||||
wipersModalData.SubText = "+$" + this.wipersModal?.totalRearPrice;
|
|
||||||
if (this.frontWipersInCart) {
|
|
||||||
wipersModalData.Text = wipersModalData.Text?.replaceAll(
|
|
||||||
"{custom:WIPERTYPE}",
|
|
||||||
wipersOfferedStrings.REAR.toLowerCase() + " "
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
wipersModalData.Text = wipersModalData.Text?.replaceAll(
|
|
||||||
"{custom:WIPERTYPE}",
|
|
||||||
""
|
|
||||||
);
|
|
||||||
}
|
|
||||||
buttons.push(wipersModalData);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.rainDefenseInCart) {
|
|
||||||
// NO RAIN DEFENSE IN CART; SHOW RAIN DEFENSE BUTTON
|
|
||||||
const rainDefenseModalData = deepClone(this.rainDefenseModalDataFromCms);
|
|
||||||
rainDefenseModalData.SubText = "+$" + this.rainDefenseModal?.listPrice;
|
|
||||||
buttons.push(rainDefenseModalData);
|
|
||||||
}
|
|
||||||
|
|
||||||
return buttons;
|
|
||||||
},
|
|
||||||
wipersOfferedStrings() {
|
|
||||||
return wipersOfferedStrings;
|
|
||||||
},
|
|
||||||
wipersOptions() {
|
|
||||||
const wipersOptions = [];
|
|
||||||
const wipersFrontCopy = this.getCmsContent(
|
|
||||||
"AddFrontBladesQuestionWidget",
|
|
||||||
"QuestionText"
|
|
||||||
);
|
|
||||||
const wipersRearCopy = this.getCmsContent(
|
|
||||||
"AddRearBladesQuestionWidget",
|
|
||||||
"QuestionText"
|
|
||||||
);
|
|
||||||
const frontWipersLineItems = this.wipersModal?.frontWiperLineItems;
|
|
||||||
const rearWipersLineItems = this.wipersModal?.rearWiperLineItems;
|
|
||||||
|
|
||||||
if (frontWipersLineItems) {
|
|
||||||
const wipersOption = {
|
|
||||||
buttonLabel: wipersFrontCopy,
|
|
||||||
groupName: "wipers-options",
|
|
||||||
value: wipersOfferedStrings.FRONT,
|
|
||||||
buttonLabelSubCopy: "buttonLabelSubCopy",
|
|
||||||
buttonBodyCopy: "buttonBodyCopy",
|
|
||||||
buttonAuxillaryCopy: "buttonAuxillaryCopy",
|
|
||||||
buttonFooterCopy: "buttonFooterCopy",
|
|
||||||
additionalButtonData: "+$" + this.wipersModal.totalFrontPrice,
|
|
||||||
};
|
|
||||||
wipersOptions.push(wipersOption);
|
|
||||||
}
|
|
||||||
if (rearWipersLineItems) {
|
|
||||||
const wipersOption = {
|
|
||||||
buttonLabel: wipersRearCopy,
|
|
||||||
groupName: "wipers-options",
|
|
||||||
value: wipersOfferedStrings.REAR,
|
|
||||||
buttonLabelSubCopy: "buttonLabelSubCopy",
|
|
||||||
buttonBodyCopy: "buttonBodyCopy",
|
|
||||||
buttonAuxillaryCopy: "buttonAuxillaryCopy",
|
|
||||||
buttonFooterCopy: "buttonFooterCopy",
|
|
||||||
additionalButtonData: "+$" + this.wipersModal.totalRearPrice,
|
|
||||||
};
|
|
||||||
wipersOptions.push(wipersOption);
|
|
||||||
}
|
|
||||||
|
|
||||||
return wipersOptions;
|
|
||||||
},
|
|
||||||
AddedToCartSuccessMessageFromCms() {
|
|
||||||
return this.getCmsContent("AddedToCartSuccessMessageWidget", "Text");
|
|
||||||
},
|
|
||||||
AddRainDefenseSuccessMessageFromCms() {
|
|
||||||
return this.getCmsContent("AddRainDefenseSuccessMessageWidget", "Text");
|
|
||||||
},
|
|
||||||
AddWipersSuccessMessageFromCms() {
|
|
||||||
return this.getCmsContent("AddWipersSuccessMessageWidget", "Text");
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
buttonQuestion,
|
|
||||||
contentGroupModal,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.add-vaps-buttons {
|
|
||||||
// necessary overrides for modals
|
|
||||||
.modal {
|
|
||||||
&.modal-component {
|
|
||||||
.modal-dialog {
|
|
||||||
.modal-content {
|
|
||||||
.modal-body {
|
|
||||||
padding-bottom: 1.5rem;
|
|
||||||
|
|
||||||
& > img {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
line-height: 2;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
& > h5 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
p.subheader-text {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
p.price {
|
|
||||||
text-align: center;
|
|
||||||
color: $green;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
p:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.wiper-options {
|
|
||||||
.ui-checkbox {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
& > div.col {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.checkbox {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.additional-button-data {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1.75;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
color: $green;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
line-height: 1.75;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in a new issue