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

Merge branch 'CSR-1382-order-quote-initial-setup' into feature/CSR-1383-add-product-tiles

Browse source
This commit is contained in:
Adam Caouette 2023-09-14 12:22:25 -04:00
commit 9df70b0964
8 changed files with 572 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

325
src/fmg-components/cart/cart.vue Normal file
View file

@ -0,0 +1,325 @@
<template>
<div class="cart">
<div class="container-fluid px-0">
<div
class="row vin-toggle flex align-items-center"
:class="[isActive ? 'active' : '']"
@click="toggleClass()">
<div class="col d-flex justify-content-between">
<span class="label">Amount Due</span
><span class="label amount-due">$321.00</span>
</div>
</div>
<div class="price-table">
<div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
<textBlock :cmsWidgetName="packageNameWidget" /><span>{{ packagePrice }}</span>
</div>
<div class="vaps" v-for="(lineItem, i) in displayedPackageLineItems" :key="i">
<span>{{ lineItem.name }}</span>
<span><a href="#">Remove</a></span>
</div>
<div class="vaps" v-for="(lineItem, i) in displayedNonPackageLineItems" :key="i">
<span>{{ lineItem.name }}</span>
<span><a href="#">Remove</a></span>
<span>{{ lineItem.price }}</span>
</div>
<div v-if="hasRecycleLineItem">
<span>{{ recycleLabel }}</span
><span>{{ recycleFee }}</span>
</div>
<!-- Sub total, sales tax, total columns -->
<div class="sub-total"><span>Subtotal</span><span>$320</span></div>
<div class="sales-tax"><span>Sales tax</span><span>$1</span></div>
<div class="amount-due"><span>Amount due</span><span>$321</span></div>
</div>
</div>
</div>
</template>
<script>
import cart from "@/fmg-components/cart/cart";
import baseMixin from "@/mixins/base-mixin.js";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import { packageNames } from "@/constants/package-names";
import {
getHighestFullySatisfiedTier,
containsLineItemWithPartType,
getPackageContents,
findLineItemsWithPartType,
} from "@/helpers/service-package-helper";
import reviewBlock from "@/layouts/review/review-block/review-block";
import textBlock from "@/digital-components/text-block/text-block";
export default {
name: "modal",
props: {
headerCmsWidgetName: String,
servicePackageOptionsCmsName: String,
damage: Object,
storeLineItems: Object,
availableLineItems: Object,
},
data() {
return {
isActive: false,
//availableVaps: [], TO DO Do we need this?
packageWithVAPS: false,
// packageLevel: "",
};
},
methods: {
toggleClass: function (event) {
this.isActive = !this.isActive;
},
initializeComponent(apiResponses) {
//TO DO Do we need this?
// const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
// this.availableVaps = vapsFromApi;
},
getPackagePriceString(packageName) {
const formattedPriceFloat = parseFloat(this.getPackagePrice(packageName)).toFixed(2);
return (this.isInsuranceSelected ? "As little as $" : "$") + formattedPriceFloat;
},
getPackagePrice(packageName) {
let priceFloat = this.isInsuranceSelected
? 0
: baseMixin.methods.getTierOnePackagePrice(
baseMixin.methods.filterOutFees(this.nullSafeAvailableLineItems)
);
priceFloat += this.getVapsPrice(packageName);
return priceFloat;
},
getVapsPrice(packageName) {
const vapsItems = this.getVapsLineItemsForSelectedPackage(packageName);
let price = 0;
vapsItems.forEach((item) => {
price += baseMixin.methods.getTotalLineItemPrice(item);
});
return price;
},
//START HERE
getVapsLineItemsForSelectedPackage(packageName) {
const packageContentTypes = getPackageContents(
this.glassToReplace,
this.nullSafeAvailableLineItems,
this.isRepair,
packageName
);
let vapsLineItemsForSelectedPackage = [];
packageContentTypes.forEach((vapType) => {
vapsLineItemsForSelectedPackage.push(
...findLineItemsWithPartType(vapType, this.nullSafeAvailableLineItems)
);
});
console.log("VapsLineItems:", vapsLineItemsForSelectedPackage);
return vapsLineItemsForSelectedPackage;
},
},
computed: {
packageNameWidget() {
const servicePackageNames = this.getCmsContent(
this.servicePackageOptionsCmsName,
"Answers"
);
if (!servicePackageNames) {
return "";
}
const currentPackage = servicePackageNames.find(
(entry) => entry.Name === this.packageLevel
);
console.log("WidgetName", currentPackage);
return currentPackage.SubWidgetName;
},
packageLevel() {
const tier = getHighestFullySatisfiedTier(
this.glassToReplace,
this.availableLineItems,
this.isRepair,
this.vaps
);
return tier;
},
packagePrice() {
let packagePriceString;
if (this.packageLevel.length > 0) {
packagePriceString = this.getPackagePriceString(this.packageLevel);
}
return packagePriceString;
// return (packagePriceString.length > 0) ? packagePriceString : "Test String";
},
displayedPackageLineItems() {
const displayedPackageLineItems = [];
const packageLineItems = this.getVapsLineItemsForSelectedPackage(this.packageLevel);
packageLineItems?.forEach((item) => {
let price = item.sellingPrice + item.kitPrice + item.laborAmount;
const packageLineItem = {
name: item.partType,
price: "$" + parseFloat(price).toFixed(2),
partType: item.partType,
};
displayedPackageLineItems.push(packageLineItem);
});
console.log("What displayedPackageLineItems is", packageLineItems);
return displayedPackageLineItems;
},
displayedNonPackageLineItems() {
const displayedNonPackageLineItems = [];
this.availableLineItems?.forEach((item) => {
let price = item.sellingPrice + item.kitPrice + item.laborAmount;
const indexFound = this.displayedPackageLineItems?.findIndex((packageLineItem) => {
return packageLineItem.partType === item.partType;
});
if (indexFound === -1) {
const nonPackageLineItem = {
name: item.partType,
price: "$" + parseFloat(price).toFixed(2),
partType: item.partType,
};
displayedNonPackageLineItems.push(nonPackageLineItem);
}
});
return displayedNonPackageLineItems;
},
glassToReplace() {
return this.damage.glassToReplace;
},
isRepair() {
return this.damage.isRepair;
},
vaps() {
return this.storeLineItems?.vaps;
},
recycleLabel() {
return "Recycling";
},
recycleFee() {
return "$35.00";
},
hasRecycleLineItem() {
//TO DO
// if (this.lineItems.supportingItems[0].partNumber === "RECYCLE FEE") {
// return true;
// } else {
// return false;
// }
return true;
},
nullSafeAvailableLineItems() {
return this.availableLineItems ?? [];
},
},
components: {
textBlock,
},
};
</script>
<style lang="scss">
.cart {
h5 {
border-bottom: 1px solid $gray-500;
color: $black;
}
.border-bottom {
color: $gray;
}
.label {
font-weight: 500;
}
.amount-due {
color: $green;
}
.price-table {
max-height: 0;
transition: all 350ms ease-in;
overflow: hidden;
div {
display: flex;
justify-content: space-between;
padding: 0.5rem 1.5rem;
&:nth-child(odd) {
background-color: #f5f5f5;
}
&:nth-last-child(-n + 3) {
background-color: #e3f2ea;
}
&:last-child {
background-color: #0c7e47;
color: #ffffff;
}
}
.vaps {
background-color: #f5f5f5;
padding-left: 2.5rem;
align-items: center;
span {
display: flex;
width: 33.33333%;
&:nth-child(2) {
justify-content: flex-end;
}
&:last-child {
justify-content: flex-end;
}
}
}
.package-type,
.service-type {
//background-color: #f5f5f5;
align-items: center;
}
.sub-total,
.sales-tax,
.amount-due {
font-weight: 500;
}
.sub-total {
border-top: 1px solid #0c7e47;
}
.service-type {
// background-color: #f5f5f5;
.text-block {
background: transparent;
margin-top: 0;
padding: 0;
}
}
}
.vin-toggle {
&:after {
content: "";
transition: all 0.5s ease;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right center;
width: 16px;
height: 9px;
display: inline-flex;
position: relative;
right: 0.75rem;
margin: 1rem 0 1rem 1rem;
cursor: pointer;
}
&.active:after {
transform: rotate(180deg);
}
&.active + .price-table {
max-height: 650px;
transition: all 350ms ease-in;
overflow: hidden;
}
}
}
</style>

5
src/fmg-components/funnel-header/funnel-header.vue
View file

@ -63,11 +63,12 @@ export default {
<style lang="scss" scoped>
.funnel-header {
padding: 0.97rem 0;
padding: 1rem 0;
}
.logo-image {
max-width: 78px;
width: 100%;
max-width: 114px;
}
.alert {
left: 0;

6
src/fmg-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -118,7 +118,7 @@ export default {
<style lang="scss" scoped>
.menu-modal-container {
position: absolute;
padding: 1.47rem 1rem 1.47rem 1.47rem;
padding: 1.5rem 1rem 1.5rem 1.5rem;
right: 0;
button {
border: none;
@ -186,9 +186,9 @@ export default {
}
.menu-modal-container {
position: absolute;
padding: 1.47rem 1rem 1.47rem 1.47rem;
padding: 1.5rem 1rem 1.5rem 1.5rem;
right: 0;
top: -4.5rem;
top: -4.25rem;
button {
border: none;
&.menu-button {

5
src/helpers/service-package-helper.js
View file

@ -8,10 +8,11 @@ export function containsLineItemWithPartType(typeToFind, itemsToSearch) {
}
export function findLineItemsWithPartType(typeToFind, itemsToSearch) {
//console.log("typeToFind: ", typeToFind, " / itemsToSearch: ", itemsToSearch);
const partTypeMatches = itemsToSearch?.filter(
(lineItem) => lineItem.partType.toUpperCase() === typeToFind.toUpperCase()
);
//console.log(partTypeMatches);
return partTypeMatches;
}
@ -210,6 +211,7 @@ export function getHighestRequiredTier(glassToReplace, availableLineItems, isRep
export function getHighestFullySatisfiedTier(glassToReplace, availableLineItems, isRepair, vaps) {
const packages = getAvailablePackages(glassToReplace, availableLineItems, isRepair);
console.log(glassToReplace);
let highestSatisfiedPackage = packageNames.TIER_ONE;
for (let i = 0; i < packages.length; i++) {
@ -222,6 +224,7 @@ export function getHighestFullySatisfiedTier(glassToReplace, availableLineItems,
highestSatisfiedPackage = packages[i].packageName;
}
}
console.log(highestSatisfiedPackage);
return highestSatisfiedPackage;
}

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

@ -2,10 +2,55 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles">
<loadingModal ref="loadingModal" />
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" leftAlignHeader />
<hr class="mt-0" />
<funnelSubHeader
typeStyle="h5"
class="mb-5 mt-4 dark-header"
leftAlignHeader
cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<div>
<cart
:damage="damageInfo"
:storeLineItems="storeLineItems"
:availableLineItems="availableLineItems"
servicePackageOptionsCmsName="ServicePackageTitle" />
<vehicleReview
cmsWidgetName="VehicleReviewWidget"
:vehicle="vehicleInfo"
@edit-clicked="editVehicle" />
<hr class="my-0" />
<damageReview
cmsWidgetName="DamageReviewWidget"
damageLocationsWidgetName="DamageLocationsWidget"
:damage="damageInfo"
@edit-clicked="editDamage" />
<hr class="my-0" />
<!-- <servicePackageReview
ref="servicePackageReview"
servicePackageOptionsCmsName="ServicePackageTitle"
defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
vapsItemsCmsName="VapsItemDescriptions"
:damage="damageInfo"
:lineItems="lineItems"
@edit-clicked="editServicePackage" /> -->
<hr class="my-0" />
<serviceLocationReview
cmsWidgetName="ServiceLocationTitleWidget"
:serviceLocation="serviceLocationInfo"
@edit-clicked="editServiceLocation" />
</div>
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ -22,52 +67,219 @@
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";
import damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
import servicePackageReview from "@/layouts/review/review-sections/service-package-review/service-package-review";
import serviceLocationReview from "@/layouts/review/review-sections/service-location-review/service-location-review";
import cart from "@/fmg-components/cart/cart";
import baseMixin from "@/mixins/base-mixin.js";
import vehicleQuestionsMixin from "../../mixins/vehicle-questions-mixin";
import { settleAllPromises } from "@/helpers/layout-helper";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { Form, defineRule } from "vee-validate";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { applicationConfig } from "@/constants/application-config";
// Validation
import { Form } from "vee-validate";
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
export default {
name: "payment-method",
name: "paymentMethod",
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// TODO: Data fetching Promise declarations
const wipersPromise = baseMixin.methods.dispatchStoreAction(storeActions.GET_WIPERS);
const rainDefensePromise = baseMixin.methods.dispatchStoreAction(
storeActions.GET_RAIN_DEFENSE
);
const supportingItemsPromise = baseMixin.methods.dispatchStoreAction(
storeActions.GET_SUPPORTING_ITEMS
);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "wipers",
promise: wipersPromise,
},
{
resultKey: "rainDefense",
promise: rainDefensePromise,
},
{
resultKey: "supportingItems",
promise: supportingItemsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
const clonedGlassParts = store.getters.order.lineItems.glassParts
? JSON.parse(JSON.stringify(store.getters.order.lineItems.glassParts))
: [];
const availableLineItems = [
resultMap.rainDefense,
...resultMap.supportingItems,
...resultMap.wipers,
...clonedGlassParts,
];
const pricingResults = await baseMixin.methods.dispatchStoreAction(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
availableLineItems: availableLineItems,
},
false
);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.pricedGlassParts = clonedGlassParts;
vm.supportingItems = resultMap.supportingItems;
vm.availableLineItems = pricingResults;
vm.isInsuranceSelected = vm.getDefaultIsInsuranceSelectedValue(vm.availableLineItems);
});
},
data() {
return {};
return {
isInsuranceSelected: null,
selectedVaps: null,
availableLineItems: null,
supportingItems: null,
pricedGlassParts: null,
};
},
methods: {
arePagePrerequisitesValid() {
// TODO
return true;
return (
store.getters.order.serviceLocation.zipCode &&
store.getters.order.serviceLocation.zipCodeCtu &&
(store.getters.order.damage.isRepair ||
(store.getters.order.lineItems?.glassParts != null &&
store.getters.order.lineItems.glassParts.length > 0)) &&
store.getters.order.referralNumber?.length !== 6
);
},
getDefaultIsInsuranceSelectedValue(availableLineItems) {
// Override if coming back from QuoteDetails. Remove override after Quote release
const isInsuranceOverrideValue = this.$route.query?.isInsurance;
const defaultIsInsuranceSelectedValue = this.$store.getters.order.payment.isInsurance;
if (isInsuranceOverrideValue != null) {
return isInsuranceOverrideValue == "true";
} else if (defaultIsInsuranceSelectedValue != null) {
return defaultIsInsuranceSelectedValue;
} else {
return availableLineItems
? baseMixin.methods.getTierOnePackagePrice(
baseMixin.methods.filterOutFees(availableLineItems)
) > 300
: null;
}
},
vapsItemsSelectedAction(vapsItemsSelected) {
this.selectedVaps = vapsItemsSelected;
},
backButtonAction() {
vehicleQuestionsMixin.methods.navigateBack(this);
},
forwardButtonAction() {
this.dispatchStoreAction(
this.storeActions.SAVE_PAYMENT_TYPE,
this.isInsuranceSelected,
false
);
if (!this.isInsuranceSelected) {
this.dispatchStoreAction(
this.storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
false
);
}
if (
this.$store.getters.order.payment.parentAccountNumber !=
applicationConfig.CASH_PARENT_ACCOUNT_NUMBER
) {
this.supportingItems = this.filterOutFees(this.supportingItems);
}
if (this.pricedGlassParts.length > 0) {
this.dispatchStoreAction(
this.storeActions.SAVE_GLASS_PART_PRICES,
this.pricedGlassParts,
false
);
}
this.dispatchStoreAction(
this.storeActions.SAVE_SUPPORTING_ITEMS,
this.supportingItems,
false
);
this.dispatchStoreAction(this.storeActions.SAVE_VAPS, this.selectedVaps, false);
const payment = this.$store.getters.payment;
if (payment.isInsurance) {
navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
} else {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_WITH_CASH,
this.$route
);
}
},
},
computed: {
subHeaderTitle() {
return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
},
subHeaderBody() {
return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
},
forwardButtonText() {
return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
},
vehicleInfo() {
return this.$store.getters.vehicle;
},
damageInfo() {
return this.$store.getters.damage;
},
storeLineItems() {
return this.$store.getters.lineItems;
},
serviceLocationInfo() {
return this.$store.getters.order.serviceLocation;
},
backButtonAction() {},
forwardButtonAction() {},
},
components: {
funnelHeader,
funnelFooter,
funnelSubHeader,
Form,
loadingModal,
// servicePackageReview,
serviceLocationReview,
vehicleReview,
damageReview,
cart,
},
};
</script>
<style lang="scss"></style>
<style scoped>
.text-block {
display: block;
}
</style>

4
src/layouts/quote/quote.vue
View file

@ -112,7 +112,7 @@ export default {
...resultMap.wipers,
...clonedGlassParts,
];
console.log("Available line items:", availableLineItems);
const pricingResults = await baseMixin.methods.dispatchStoreAction(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
@ -120,7 +120,7 @@ export default {
},
false
);
console.log("Pricing results:", pricingResults);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);

1
src/layouts/quote/service-package-question/service-package-question.vue
View file

@ -89,6 +89,7 @@ export default {
buttonAuxillaryCopy: this.getPackagePriceString(answer.Name),
buttonFooterCopy: this.getFooterTextFromCms(answer.SubWidgetName),
}));
console.log("avialable packages is", modifiedAnswers);
return modifiedAnswers;
},
isRecalibrationOnOrder() {

8
src/mixins/base-mixin.js
View file

@ -72,6 +72,7 @@ export default {
lineItem.partType != partTypeStrings.RAIN_DEFENSE
);
});
console.log("step one", lineItemsToPrice);
let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice);
return totalPrice;
},
@ -93,7 +94,14 @@ export default {
lineItem.childParts
);
}
console.log(
"step two, lineItem name: ",
lineItem.partNumber,
" / totalPrice: ",
totalPrice
);
});
console.log("step three", totalPrice);
return totalPrice;
},
getTotalLineItemPrice(lineItem) {