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; let cartItem = null;
cartItem = { cartItem = {
name: "Some Kind of Promo", // get from CMS? name: promoLineItem.promoCode,
category: cartItemCategories.PROMOS, category: cartItemCategories.PROMOS,
cartItemType: promoLineItem.partType, cartItemType: promoLineItem.partType,
isDisplayed: true, isDisplayed: true,
@ -230,6 +230,7 @@ export default {
(promoLineItem.laborAmount ?? 0) + (promoLineItem.laborAmount ?? 0) +
(promoLineItem.sellingPrice ?? 0), (promoLineItem.sellingPrice ?? 0),
salesTax: promoLineItem.salesTax, salesTax: promoLineItem.salesTax,
lineItems: [],
}; };
promoLineItem.cartItemType = cartItem.cartItemType; 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" /> <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
<menuModal /> <menuModal />
</div> </div>
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<alert <alert
v-if="displayGlobalAlert" v-if="globalAlert.displayAlert"
class="rounded-0 w-100 border-0 shadow-sm" class="rounded-0 w-100 border-0 shadow-sm"
cmsWidgetName="GlobalAlert" cmsWidgetName="GlobalAlert"
:manualHeadline="globalAlertMessage.messageHeadline" :manualHeadline="globalAlert.messageHeadline"
:manualCopy="globalAlertMessage.messageCopy" :manualCopy="globalAlert.messageCopy"
:alertClass="globalAlertMessage.type" :alertClass="globalAlert.type"
:onAlertCloseCallback="onAlertClose" v-bind:isDismissible="globalAlert.isDismissible" />
v-bind:isDismissible="globalAlertMessage.isDismissible" /> </transition>
</transition> </template>
</template> </template>
<script> <script>
@ -32,14 +32,8 @@ export default {
name: "funnel-header", name: "funnel-header",
data() { data() {
return { return {
displayGlobalAlert: false, alertIdCounter: 0,
globalAlertMessage: { globalAlertMessages: [],
isDismissible: false,
messageCopy: "",
messageHeadline: "",
type: "",
},
countdownTimer: () => {},
}; };
}, },
props: { props: {
@ -51,18 +45,18 @@ export default {
}, },
}, },
methods: { methods: {
triggerGlobalAlert(alertEvent, isAutoDismissing) { pushGlobalAlert(alertToPush, isAutoDismissing) {
clearTimeout(this.countdownTimer); alertToPush.displayAlert = true;
this.displayGlobalAlert = true; alertToPush.id = this.alertIdCounter;
this.globalAlertMessage = alertEvent; this.alertIdCounter++;
if (isAutoDismissing) { if (isAutoDismissing) {
this.countdownTimer = setTimeout(() => { setTimeout(() => {
this.displayGlobalAlert = false; alertToPush.displayAlert = false;
// force a re-evaluation of the globalAlertMessages to detect the v-if change
this.globalAlertMessages = this.globalAlertMessages.splice(0);
}, ALERT_DURATION); }, ALERT_DURATION);
} }
}, this.globalAlertMessages.push(alertToPush);
onAlertClose() {
this.displayGlobalAlert = false;
}, },
}, },
components: { components: {
@ -77,8 +71,8 @@ export default {
); );
// If alert event is on the bus, then display the alert // If alert event is on the bus, then display the alert
if (alertEvent !== undefined) { if (alertEvent !== undefined) {
this.displayGlobalAlert = true; alertEvent.displayAlert = true;
this.globalAlertMessage = alertEvent; 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 = []) { export function buildToastMessagesFromRevalidateOrValidatePromoResponse(promoResponse, oldActivePromos = [], oldInactivePromos = []) {
console.log('oldActivePromos', oldActivePromos);
console.log('oldInactivePromos', oldInactivePromos);
console.log('promoResponse', promoResponse);
const alerts = []; const alerts = [];
// Revalidate always has an "errors" array // Revalidate always has an "errors" array
if (promoResponse.errors) { if (promoResponse.errors) {
@ -130,10 +127,14 @@ export function buildToastMessagesFromRevalidateOrValidatePromoResponse(promoRes
activePromoCodesFromResponse.push(promoCodeToDisplay); activePromoCodesFromResponse.push(promoCodeToDisplay);
} }
}); });
console.log('oldPromoCodes', oldPromoCodes); const inactivePromoCodesFromResponse = [];
console.log('activePromoCodesFromResponse', activePromoCodesFromResponse); 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 newlyActivatedPromoCodes = activePromoCodesFromResponse.filter(newPromoCode => !oldPromoCodes.includes(newPromoCode));
const newlyInactivatedPromos = promoResponse.errors.filter(error => !oldInactivePromos.includes(error.promoCode));
newlyActivatedPromoCodes.forEach(newlyActivatedPromoCode => { newlyActivatedPromoCodes.forEach(newlyActivatedPromoCode => {
alerts.push({ alerts.push({
messageHeadline: "Promo applied!", messageHeadline: "Promo applied!",
@ -143,8 +144,9 @@ export function buildToastMessagesFromRevalidateOrValidatePromoResponse(promoRes
shouldAutoFade: true, shouldAutoFade: true,
}); });
}); });
const newlyInactivatedPromos = inactivePromoCodesFromResponse.filter(errorPromoCode => !oldInactivePromos.includes(errorPromoCode));
newlyInactivatedPromos.forEach(newlyInactivatedPromo => { newlyInactivatedPromos.forEach(newlyInactivatedPromo => {
console.log(newlyInactivatedPromo);
alerts.push({ alerts.push({
messageHeadline: "Promo error", messageHeadline: "Promo error",
messageCopy: `Sorry, promo code "${newlyInactivatedPromo}" is not valid`, 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 // bundle promos look like: "bundlePromo/###"" for each promo, this returns "bundlePromo" only
export function getPromoCodeWithoutBundleIdentifier(promoCode) { export function getPromoCodeWithoutBundleIdentifier(promoCode) {
return promoCode.substring(0, promoCode.indexOf("/")); return promoCode.split("/")[0];
} }
export function shouldStripPromoQueryString(fmgPageQueryValue) { export function shouldStripPromoQueryString(fmgPageQueryValue) {

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

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

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

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