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

CSR-1452 | Alerts for promos and alert.vue refactoring

Browse source
This commit is contained in:
Scott Kiener 2023-11-09 14:52:18 -05:00
parent a0439e551e
commit 7eea3baa13
5 changed files with 53 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -221,7 +221,7 @@ export default {
let cartItem = null;
cartItem = {
name: "Some Kind of Promo", // get from CMS?
name: promoLineItem.promoCode,
category: cartItemCategories.PROMOS,
cartItemType: promoLineItem.partType,
isDisplayed: true,
@ -230,6 +230,7 @@ export default {
(promoLineItem.laborAmount ?? 0) +
(promoLineItem.sellingPrice ?? 0),
salesTax: promoLineItem.salesTax,
lineItems: [],
};
promoLineItem.cartItemType = cartItem.cartItemType;

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

@ -5,18 +5,18 @@
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
<menuModal />
</div>
<transition name="fade" mode="out-in">
<alert
v-if="displayGlobalAlert"
class="rounded-0 w-100 border-0 shadow-sm"
cmsWidgetName="GlobalAlert"
:manualHeadline="globalAlertMessage.messageHeadline"
:manualCopy="globalAlertMessage.messageCopy"
:alertClass="globalAlertMessage.type"
:onAlertCloseCallback="onAlertClose"
v-bind:isDismissible="globalAlertMessage.isDismissible" />
</transition>
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
<transition name="fade" mode="out-in">
<alert
v-if="globalAlert.displayAlert"
class="rounded-0 w-100 border-0 shadow-sm"
cmsWidgetName="GlobalAlert"
:manualHeadline="globalAlert.messageHeadline"
:manualCopy="globalAlert.messageCopy"
:alertClass="globalAlert.type"
v-bind:isDismissible="globalAlert.isDismissible" />
</transition>
</template>
</template>
<script>
@ -32,14 +32,8 @@ export default {
name: "funnel-header",
data() {
return {
displayGlobalAlert: false,
globalAlertMessage: {
isDismissible: false,
messageCopy: "",
messageHeadline: "",
type: "",
},
countdownTimer: () => {},
alertIdCounter: 0,
globalAlertMessages: [],
};
},
props: {
@ -51,18 +45,18 @@ export default {
},
},
methods: {
triggerGlobalAlert(alertEvent, isAutoDismissing) {
clearTimeout(this.countdownTimer);
this.displayGlobalAlert = true;
this.globalAlertMessage = alertEvent;
pushGlobalAlert(alertToPush, isAutoDismissing) {
alertToPush.displayAlert = true;
alertToPush.id = this.alertIdCounter;
this.alertIdCounter++;
if (isAutoDismissing) {
this.countdownTimer = setTimeout(() => {
this.displayGlobalAlert = false;
setTimeout(() => {
alertToPush.displayAlert = false;
// force a re-evaluation of the globalAlertMessages to detect the v-if change
this.globalAlertMessages = this.globalAlertMessages.splice(0);
}, ALERT_DURATION);
}
},
onAlertClose() {
this.displayGlobalAlert = false;
this.globalAlertMessages.push(alertToPush);
},
},
components: {
@ -77,8 +71,8 @@ export default {
);
// If alert event is on the bus, then display the alert
if (alertEvent !== undefined) {
this.displayGlobalAlert = true;
this.globalAlertMessage = alertEvent;
alertEvent.displayAlert = true;
this.globalAlertMessages.push(alertEvent);
}
},
};

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

@ -115,9 +115,6 @@ export async function revalidatePromosAndValidateNewPromo(
}
export function buildToastMessagesFromRevalidateOrValidatePromoResponse(promoResponse, oldActivePromos = [], oldInactivePromos = []) {
console.log('oldActivePromos', oldActivePromos);
console.log('oldInactivePromos', oldInactivePromos);
console.log('promoResponse', promoResponse);
const alerts = [];
// Revalidate always has an "errors" array
if (promoResponse.errors) {
@ -130,10 +127,14 @@ export function buildToastMessagesFromRevalidateOrValidatePromoResponse(promoRes
activePromoCodesFromResponse.push(promoCodeToDisplay);
}
});
console.log('oldPromoCodes', oldPromoCodes);
console.log('activePromoCodesFromResponse', activePromoCodesFromResponse);
const inactivePromoCodesFromResponse = [];
promoResponse.errors.forEach(newInactive => {
const promoCodeToDisplay = getPromoCodeWithoutBundleIdentifier(newInactive.promoCode);
if (!inactivePromoCodesFromResponse.includes(promoCodeToDisplay)) {
inactivePromoCodesFromResponse.push(promoCodeToDisplay);
}
});
const newlyActivatedPromoCodes = activePromoCodesFromResponse.filter(newPromoCode => !oldPromoCodes.includes(newPromoCode));
const newlyInactivatedPromos = promoResponse.errors.filter(error => !oldInactivePromos.includes(error.promoCode));
newlyActivatedPromoCodes.forEach(newlyActivatedPromoCode => {
alerts.push({
messageHeadline: "Promo applied!",
@ -143,8 +144,9 @@ export function buildToastMessagesFromRevalidateOrValidatePromoResponse(promoRes
shouldAutoFade: true,
});
});
const newlyInactivatedPromos = inactivePromoCodesFromResponse.filter(errorPromoCode => !oldInactivePromos.includes(errorPromoCode));
newlyInactivatedPromos.forEach(newlyInactivatedPromo => {
console.log(newlyInactivatedPromo);
alerts.push({
messageHeadline: "Promo error",
messageCopy: `Sorry, promo code "${newlyInactivatedPromo}" is not valid`,
@ -225,7 +227,7 @@ export function getVapsThatNeedToBeAddedToSatisfyPromos(
// bundle promos look like: "bundlePromo/###"" for each promo, this returns "bundlePromo" only
export function getPromoCodeWithoutBundleIdentifier(promoCode) {
return promoCode.substring(0, promoCode.indexOf("/"));
return promoCode.split("/")[0];
}
export function shouldStripPromoQueryString(fmgPageQueryValue) {

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

@ -214,14 +214,15 @@ export default {
vm.updateFooterButtonText(vm.customCtaCopy);
if (revalidatePromoResponse) {
const validateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(revalidatePromoResponse, oldActivePromos, oldInactivePromos);
if (validateAlerts.length) {
vm.$refs.funnelHeader.triggerGlobalAlert(validateAlerts[0], validateAlerts[0].shouldAutoFade);
}
const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(revalidatePromoResponse, oldActivePromos, oldInactivePromos);
revalidateAlerts.forEach(alert => {
vm.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade);
});
}
if (validatePromoResponse) {
const validateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(validatePromoResponse);
vm.$refs.funnelHeader.triggerGlobalAlert(validateAlerts[0], validateAlerts[0].shouldAutoFade);
vm.$refs.funnelHeader.pushGlobalAlert(validateAlerts[0], validateAlerts[0].shouldAutoFade);
}
});
},
@ -316,6 +317,10 @@ export default {
"payment-method",
false
);
const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(revalidatePromoResponse, this.lineItems.promos, this.inactivePromos);
revalidateAlerts.forEach(alert => {
this.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade);
});
this.lineItems.promos = revalidatePromoResponse.promoLineItems;
this.inactivePromos = revalidatePromoResponse.errors.map((x) => x.promoCode);
@ -388,7 +393,7 @@ export default {
);
},
showAlert(alert) {
this.$refs.funnelHeader.triggerGlobalAlert(alert, true);
this.$refs.funnelHeader.pushGlobalAlert(alert, true);
},
},
computed: {

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

@ -176,14 +176,14 @@ export default {
vm.newValidatedPromos = validatePromoResponse?.orderPromos;
if (revalidatePromoResponse) {
const validateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(revalidatePromoResponse, oldActivePromos, oldInactivePromos);
if (validateAlerts.length) {
vm.$refs.funnelHeader.triggerGlobalAlert(validateAlerts[0], validateAlerts[0].shouldAutoFade);
}
const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(revalidatePromoResponse, oldActivePromos, oldInactivePromos);
revalidateAlerts.forEach(alert => {
vm.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade);
});
}
if (validatePromoResponse) {
const validateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(validatePromoResponse);
vm.$refs.funnelHeader.triggerGlobalAlert(validateAlerts[0], validateAlerts[0].shouldAutoFade);
vm.$refs.funnelHeader.pushGlobalAlert(validateAlerts[0], validateAlerts[0].shouldAutoFade);
}
});
},