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

Merge remote-tracking branch 'origin/develop' into feature/skiener/CSR-1452

Browse source
This commit is contained in:
Scott Kiener 2023-11-13 10:21:02 -05:00
commit 6058dbe16e
10 changed files with 384 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/constants/error-messages.js
View file

@ -33,6 +33,7 @@ const errorMessages = {
MAKE_REQUIRED: "Please select your vehicle make",
MODEL_REQUIRED: "Please select your vehicle model",
STYLE_REQUIRED: "Please select your vehicle style",
PROMO_REQUIRED: "Please enter a promo code",
};
export { errorMessages };

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

@ -221,15 +221,15 @@ export default {
let cartItem = null;
cartItem = {
name: promoLineItem.promoCode,
name: promoLineItem?.promoCode, // get from CMS?
category: cartItemCategories.PROMOS,
cartItemType: promoLineItem.partType,
cartItemType: promoLineItem?.partType,
isDisplayed: true,
subTotal:
(promoLineItem.kitPrice ?? 0) +
(promoLineItem.laborAmount ?? 0) +
(promoLineItem.sellingPrice ?? 0),
salesTax: promoLineItem.salesTax,
(promoLineItem?.kitPrice ?? 0) +
(promoLineItem?.laborAmount ?? 0) +
(promoLineItem?.sellingPrice ?? 0),
salesTax: promoLineItem?.salesTax,
lineItems: [],
};

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

@ -16,7 +16,7 @@ export const addableVapsPromoPartNumbers = [
promoPartNumberStrings.WIPER_DISCOUNT_PART_NUMBER,
];
const promoErrorCodes = {
export const promoErrorCodes = {
UNKNOWN: "Unknown",
PROMO_NOT_YET_IN_USE: "PromoNotYetInUse",
PROMO_USAGE_COUNT_EXCEEDED: "PromoUsageCountExceeded",

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

@ -2,8 +2,8 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal notFullScreen ref="loadingModal" />
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
@ -30,6 +30,12 @@
recyclingModalCmsWidgetName="RecycleModal" />
<hr class="my-5" />
<promoModalQuestion
class="pb-3"
v-model="lineItems"
:availableVaps="availableVaps"
linkWidgetName="PromoLinkWidget"
modalWidgetName="PromoModalWidget" />
<div>
<alert
@ -73,6 +79,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import cart from "@/fmg-components/cart/cart";
import promoModalQuestion from "@/layouts/payment-method/promo-modal-question/promo-modal-question";
import addVapsModalButtons from "./add-vaps-modal-buttons/add-vaps-modal-buttons";
import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
import alert from "@/ux-components/alert/alert";
@ -487,6 +494,7 @@ export default {
alert,
addVapsModalButtons,
paymentMethodQuestion,
promoModalQuestion,
},
};
</script>

268
src/layouts/payment-method/promo-modal-question/promo-modal-question.vue Normal file
View file

@ -0,0 +1,268 @@
<template>
<div>
<textLink
id="promoLinkPromptId"
linkType="text"
:text="promoLinkText"
href="#!"
@click-event="openModal" />
<modal
:ref="modalName"
:headerText="modalHeaderText"
:onModalClosedCallback="onModalClosed"
:footerButtonText="modalFooterText"
@footer-button-event="addPromoCode">
<promoQuestion
ref="promoQuestion"
customInputId="promoCode"
v-model="promoCode"
cmsWidgetName="PromoQuestionWidget" />
<alert
ref="alertInvalidPromo"
v-if="displayInvalidPromoAlert"
v-html="InvalidPromoText"
class="my-4 alert"
cmsWidgetName="AlertInvalidPromoWidget"
alertClass="alert-danger"
v-bind:isDismissible="true" />
<alert
ref="alertInvalidPromoOnOrder"
v-if="displayInvalidOnOrderPromoAlert"
v-html="InvalidPromoOnOrderText"
class="my-4 alert"
cmsWidgetName="AlertInvalidPromoOnOrderWidget"
alertClass="alert-danger"
v-bind:isDismissible="true" />
<div v-for="(promo, i) in this.getPromoList()" :key="i">
<span class="applied-promo">Promo code "{{ promo.promoCode }}" applied </span>
<textLink
ref="removeLink"
linkType="text"
:text="removeLinkText"
href="#!"
@click-event="removeItem(promo.promoCode)" />
</div>
</modal>
</div>
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
import promoQuestion from "@/layouts/payment-method/promo-modal-question/promo-question/promo-question";
import modal from "@/digital-components/modal/modal";
import alert from "@/ux-components/alert/alert";
import { storeActions } from "@/constants/store-actions.js";
import {
getVapsThatNeedToBeAddedToSatisfyPromos,
promoErrorCodes,
} from "@/helpers/promotions-helper";
import { deepClone } from "@/helpers/object-helper";
import baseMixin from "@/mixins/base-mixin.js";
import { cartItemCategories } from "@/constants/cart-item-categories";
import store from "@/store";
import { mapTaxedLineItemsToStoreFormat } from "@/store";
export default {
name: "promo-modal-question",
data() {
return {
promoCode: "",
promoTextInputId: "",
displayInvalidPromoAlert: false,
displayInvalidOnOrderPromoAlert: false,
lineItems: deepClone(this.modelValue),
};
},
props: {
modelValue: Object,
linkWidgetName: String,
modalWidgetName: String,
availableVaps: Object,
},
computed: {
promoLinkText() {
return this.getCmsContent(this.linkWidgetName, "BodyText");
},
modalHeaderText() {
return this.getCmsContent("PromoQuestionWidget", "QuestionText");
},
modalFooterText() {
return this.getCmsContent(this.modalWidgetName, "FooterText");
},
modalName() {
return this.modalWidgetName;
},
modal() {
return this.$refs[this.modalName];
},
PromoOnOrderText() {
return this.getCmsContent("AlertInvalidPromoOnOrderWidget", "HeadlineText");
},
InvalidPromoOnOrderText() {
return this.PromoText?.replaceAll("{custom:NEWPROMOCODE}", this.promoCode).replaceAll(
"{custom:OLDPROMOCODE}",
this.promoCode
);
},
PromoText() {
return this.getCmsContent("AlertInvalidPromoWidget", "HeadlineText");
},
InvalidPromoText() {
return this.PromoText?.replaceAll("{custom:PROMOCODE}", this.promoCode);
},
removeLinkText() {
return this.getCmsContent("RemoveCartItemTextWidget", "Text");
},
},
methods: {
resetAlerts() {
this.displayInvalidPromoAlert = false;
},
resetsOnPromoInput() {
this.resetAlerts();
},
getPromoList() {
return this.lineItems.promos;
},
openModal() {
this.modal.openModal();
},
closeModal() {
this.modal.closeModal();
},
onModalClosed() {
this.$emit("update:modelValue", this.lineItems);
},
focusOnPromoInput() {
const input = document.getElementById(this.promoTextInputId);
input?.focus();
},
resetModalButtonStyle() {
this.modal.resetButtonStyle();
},
getPromoAddedMessage() {
return this.AddPromoSuccessMessageFromCms?.replaceAll(
"{custom:PROMOCODE}",
this.promoCode
);
},
async getPromoCodeData(promoCode, lineItems, availableVaps, pageNameToLog = null) {
const pageName = pageNameToLog ?? this.$options?.name;
//const addableVaps = getAddableVapsFromAvailableLineItems(availableLineItems);
//const lineItemsToUse = lineItems.Length > 0 ? lineItems : null;
const promoValidationResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.VALIDATE_ORDER_PROMO_AND_SAVE_SERVER_DATA,
{
promoCode: promoCode,
lineItemsToUse: lineItems,
addableVaps: availableVaps,
},
pageName,
false
);
return {
isValid: !("errorCode" in promoValidationResponse),
promoCode: promoValidationResponse?.orderPromos,
errorCode: promoValidationResponse?.errorCode,
};
},
removeItem(promo) {
this.lineItems[cartItemCategories.PROMOS] = this.lineItems[
cartItemCategories.PROMOS
].filter((lineItemsToKeep) => lineItemsToKeep.promoCode != promo);
},
async addPromoCode() {
if (this.promoCode) {
this.resetAlerts();
const promoCodeData = await this.getPromoCodeData(
this.promoCode,
this.lineItems,
this.availableVaps,
"payment-method"
);
if (promoCodeData.isValid) {
const pricedLineItemsToTax = [];
pricedLineItemsToTax.push(...promoCodeData.promoCode);
const taxedLineItems = 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,
pricedLineItems: pricedLineItemsToTax,
},
"payment-method",
false
);
// Match all line items to the line items as they are in the store
// and rebuild the original structure.
this.lineItems = mapTaxedLineItemsToStoreFormat(taxedLineItems, this.lineItems);
const taxedVaps = mapTaxedLineItemsToStoreFormat(
taxedLineItems,
this.availableVaps
);
const getVaps = getVapsThatNeedToBeAddedToSatisfyPromos(
promoCodeData.promoCode,
taxedVaps,
this.lineItems
);
this.lineItems?.promos.push(...promoCodeData.promoCode);
this.lineItems.vaps?.push(...getVaps);
this.closeModal();
this.promoCode = "";
} else {
if (promoCodeData.errorCode == promoErrorCodes.PROMO_STACKING_NOT_ALLOWED) {
this.displayInvalidPromoOnOrderAlert = true;
this.focusOnPromoInput();
this.resetModalButtonStyle();
}
this.displayInvalidPromoAlert = true;
this.focusOnPromoInput();
this.resetModalButtonStyle();
}
}
},
},
watch: {
promoCode() {
this.displayInvalidPromoAlert = false;
this.displayInvalidOnOrderPromoAlert = false;
},
modelValue: {
handler(newValue) {
this.lineItems = deepClone(newValue);
},
deep: true,
},
},
components: {
textLink,
promoQuestion,
modal,
alert,
},
};
</script>
<style lang="scss" scoped>
.applied-promo {
padding-right: 5rem;
font-size: 14px;
font-weight: 500;
line-height: 24px;
color: #0c7e47;
}
.alert {
color: #d4281c;
font-size: 14px;
font-weight: 500;
line-height: 24px;
}
</style>

40
src/layouts/payment-method/promo-modal-question/promo-question/promo-question.spec.js Normal file
View file

@ -0,0 +1,40 @@
import { shallowMount } from "@vue/test-utils";
import promoQuestion from "./promo-question";
describe("promo-question.vue", () => {
it("Should get the modelValue", async () => {
// Arrange
const text = "test";
const wrapper = shallowMount(promoQuestion, {
props: {
modelValue: text,
},
attachTo: document.body,
});
// Act
const modelValueText = wrapper.vm.value;
wrapper.vm.value = "test also";
// Assert
expect(modelValueText).toEqual("test");
});
it("Should emit to set value", async () => {
// Arrange
const text = "test";
const wrapper = shallowMount(promoQuestion, {
props: {
modelValue: text,
},
attachTo: document.body,
});
// Act
const modelValueText = wrapper.vm.value;
wrapper.vm.value = "test also";
// Assert
expect(wrapper.emitted("update:modelValue")).toEqual([["test also"]]);
});
});

45
src/layouts/payment-method/promo-modal-question/promo-question/promo-question.vue Normal file
View file

@ -0,0 +1,45 @@
<template>
<textboxQuestion
ref="promoInputTextQuestion"
:cmsWidgetName="cmsWidgetName"
v-model="value"
inputId="promoCode"
questionAlignment="center"
cornerStyle="rounded"
:displayQuestionText="false"
isRequired
validationRules="promo-required" />
</template>
<script>
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
//Supporting Files
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
// Define Validation Rules
defineRule("promo-required", required(errorMessages.PROMO_REQUIRED));
export default {
name: "promo-question",
props: {
modelValue: String,
cmsWidgetName: String,
},
computed: {
value: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
},
components: {
textboxQuestion,
},
};
</script>

1
src/layouts/payment-pia-return/payment-pia-return.vue
View file

@ -131,6 +131,7 @@ export default {
}
this.$refs.loadingModal.isModalVisible = false;
await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_ORDER);
this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_SUCCESS, this.$route);
},
forwardButtonAction() {

11
src/router/index.js
View file

@ -169,7 +169,16 @@ router.beforeEach(async (to, from, next) => {
showFmgLoadingModal(true);
}
next();
const toQueryPage = to.query?.fmgPage;
const notToPIAReturn = toQueryPage != "payment-pia-return";
const isInIframe = window !== window.top;
if (isInIframe && notToPIAReturn) {
const newUrl = `${window.top.location.origin}${to.href}`;
window.top.location.href = newUrl;
} else {
next();
}
});
router.afterEach(async (to, from) => {

3
src/store/index.js
View file

@ -2122,6 +2122,7 @@ export const actions = {
},
// COMBINE THESE
savePromos(context, promos) {
addGuidToLineItemsIfNotAlreadyThere(promos);
context.commit(storeMutations.UPDATE_PROMOS, promos);
},
saveInactivePromos(context, inactivePromos) {
@ -2805,7 +2806,7 @@ function renameGlassToReplaceAttributes(glassToReplace) {
}
function addGuidToLineItemsIfNotAlreadyThere(lineItems) {
lineItems.forEach((lineItem) => {
lineItems?.forEach((lineItem) => {
if (!lineItem.id) {
lineItem.id = crypto.randomUUID();
}