From 168a948d04d8d3331286b0636e93fb8d70c12b73 Mon Sep 17 00:00:00 2001 From: Minojhini Valaiyapathi Date: Tue, 6 May 2025 13:04:42 -0400 Subject: [PATCH 1/4] CASH-535 - New field needed for datalayer (CashSubtotal) --- src/constants/analytics.js | 15 +++++++++++++-- src/constants/store-mutations.js | 1 + src/layouts/quote/quote.vue | 17 ++++++++--------- .../service-package-question.vue | 9 +++++++++ src/mixins/analytics-mixin.js | 8 ++++++++ src/store/index.js | 4 ++++ 6 files changed, 43 insertions(+), 11 deletions(-) diff --git a/src/constants/analytics.js b/src/constants/analytics.js index f6534cda4..3461d82d1 100644 --- a/src/constants/analytics.js +++ b/src/constants/analytics.js @@ -23,7 +23,6 @@ const GaActions = { SUBMITTED: "Submitted", DISPLAYED: "Displayed", CASH_QUOTE_DISPLAYED: "Cash quote displayed", - SERVICE_PACKAGE_PRICE: "Service package price", MOBILE_AVAILABLE: "mobile_available", SHOPS_FIRST_DISPLAYED: "shops_first_displayed", MORE_LOCATIONS_CLICKED: "more_locations_clicked", @@ -43,4 +42,16 @@ const ValueToLogTypes = { LAST_5: "last_5", }; -export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes }; +const Variables = { + CASH_SUBTOTAL: "cashSubTotal", +}; + +export { + analyticsPageEvents, + GaCategories, + GaActions, + GaLabels, + GaEvents, + ValueToLogTypes, + Variables, +}; diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js index 2f53d8133..89c82e3c9 100644 --- a/src/constants/store-mutations.js +++ b/src/constants/store-mutations.js @@ -69,6 +69,7 @@ const storeMutations = { UPDATE_SETTLED_TENDER_AMOUNT: "updateSettledTenderAmount", UPDATE_IS_RECAL_ACK_OPT_IN: "updateIsRecalAckOptIn", UPDATE_IS_MSR_FEE_APPLICABLE: "updateIsMSRFeeApplicable", + UPDATE_CASH_SUBTOTAL: "updateCashSubTotal", // EVENT BUS MUTATIONS ADD_EVENT_TO_BUS: "addEventToBus", diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue index 4a20b4dbc..c4ae1ff4c 100644 --- a/src/layouts/quote/quote.vue +++ b/src/layouts/quote/quote.vue @@ -789,8 +789,10 @@ export default { }); this.$nextTick(() => { const availablePackageNames = this.$refs.servicePackage?.servicePackageAnswers; - var eventLabel = ""; - availablePackageNames?.forEach((tier) => { + var priceLabel = ""; + + if (availablePackageNames.length > 1 || availablePackageNames.length == 1) { + var tier = availablePackageNames[0]; if (tier) { let lineItemsToPrice = this.availableLineItems; if (this.isRecalibrationOnOrder && this.shouldHideRecalibration) { @@ -815,14 +817,11 @@ export default { baseMixin.methods.filterOutFees(lineItemsToPrice) ); price += this.$refs.servicePackage.getVapsPrice(tier.value); - const formattedPrice = parseFloat(price).toFixed(2); - eventLabel += tier.value + "_" + formattedPrice; + priceLabel = price.toFixed(2); } - eventLabel += ","; - }); - eventLabel = eventLabel.slice(0, -1); - - this.pushEventToGA("quote", this.GaActions.SERVICE_PACKAGE_PRICE, eventLabel, true); + } + const subTotalLabel = this.Variables.CASH_SUBTOTAL; + this.pushVariableToDataLayer({ [subTotalLabel]: priceLabel }); }); }, async skip(insuranceSelection, packageSelection) { diff --git a/src/layouts/quote/service-package-question/service-package-question.vue b/src/layouts/quote/service-package-question/service-package-question.vue index 64c075408..10dfb2724 100644 --- a/src/layouts/quote/service-package-question/service-package-question.vue +++ b/src/layouts/quote/service-package-question/service-package-question.vue @@ -21,6 +21,8 @@ import servicePackageRadioExperiment from "@/experiment-components/service-packa import servicePackageRadioAfterpayExperiment from "@/experiment-components/service-package-radio-for-afterpay"; import { partTypeStrings } from "@/constants/part-type-strings"; import { packageNames } from "@/constants/package-names"; +import store from "@/store"; +import { storeMutations } from "@/constants/store-mutations"; import { shouldFrontWipersBeAvailable, shouldRearWipersBeAvailable, @@ -161,6 +163,13 @@ export default { isInsuranceSelected: this.isInsuranceSelected, }, })); + if (availablePackages.length > 1 || availablePackages.length == 1) { + let price = this.getPackagePrice(availablePackages[0].packageName, { + discountedPrice: false, + servicePackageDiscount: false, + }); + store.commit(storeMutations.UPDATE_CASH_SUBTOTAL, price?.toFixed(2)); + } this.$emit("currentNumberOfPackages", modifiedAnswers.length); return modifiedAnswers; }, diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js index d6e608d4b..05d6f2632 100644 --- a/src/mixins/analytics-mixin.js +++ b/src/mixins/analytics-mixin.js @@ -30,6 +30,7 @@ import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper"; import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; import router from "@/router/index.js"; import { getQuerystringParameter } from "@/helpers/querystring-helper"; +import { Variables } from "../constants/analytics"; export default { methods: { @@ -120,6 +121,10 @@ export default { } }, + async pushVariableToDataLayer(data) { + pushToDataLayerIfDefined(data); + }, + async pushPageViewToGA() { const currentPageName = getPageNameByQueryString(); const pageViewEvent = { @@ -770,6 +775,9 @@ export default { ValueToLogTypes() { return ValueToLogTypes; }, + Variables() { + return Variables; + }, }, }; diff --git a/src/store/index.js b/src/store/index.js index c36af8bb0..973108d3f 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -340,6 +340,9 @@ export const mutations = { updateIsMSRFeeApplicable(state, isMSRFeeApplicable) { state.order.isMSRFeeApplicable = isMSRFeeApplicable; }, + updateCashSubTotal(state, cashSubTotal) { + state.order.cashSubTotal = cashSubTotal; + }, updateCCToken(state, ccToken) { state.order.payment.ccToken.subscriptionId = ccToken.subscriptionId; state.order.payment.ccToken.expMonth = ccToken.expMonth; @@ -2339,6 +2342,7 @@ export const actions = { lockToken: order.lockToken, isRecalAckOptIn: order.isRecalAckOptIn, isMSRFeeApplicable: order.isMSRFeeApplicable, + cashSubTotal: order.cashSubTotal, }, }, logApiCall: true, From fc459f89cf929659fb03c938737a712cca8a7978 Mon Sep 17 00:00:00 2001 From: Minojhini Valaiyapathi Date: Tue, 6 May 2025 14:27:06 -0400 Subject: [PATCH 2/4] CASH-535 - Added null check --- src/layouts/quote/quote.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue index c4ae1ff4c..57c0178e3 100644 --- a/src/layouts/quote/quote.vue +++ b/src/layouts/quote/quote.vue @@ -791,7 +791,7 @@ export default { const availablePackageNames = this.$refs.servicePackage?.servicePackageAnswers; var priceLabel = ""; - if (availablePackageNames.length > 1 || availablePackageNames.length == 1) { + if (availablePackageNames?.length > 1 || availablePackageNames?.length == 1) { var tier = availablePackageNames[0]; if (tier) { let lineItemsToPrice = this.availableLineItems; @@ -820,8 +820,8 @@ export default { priceLabel = price.toFixed(2); } } - const subTotalLabel = this.Variables.CASH_SUBTOTAL; - this.pushVariableToDataLayer({ [subTotalLabel]: priceLabel }); + const subTotalLabel = this.Variables?.CASH_SUBTOTAL; + this.pushVariableToDataLayer?.({ [subTotalLabel]: priceLabel }); }); }, async skip(insuranceSelection, packageSelection) { From 63c9f8e184c8c235856979d910436adeacfe0dbe Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Tue, 6 May 2025 15:42:14 -0400 Subject: [PATCH 3/4] CASH-313 Chat style updates. --- .../salesforce-webchat/salesforce-webchat.vue | 164 +++++++++++------- 1 file changed, 97 insertions(+), 67 deletions(-) diff --git a/src/digital-components/salesforce-webchat/salesforce-webchat.vue b/src/digital-components/salesforce-webchat/salesforce-webchat.vue index 975c639a8..84a06d241 100644 --- a/src/digital-components/salesforce-webchat/salesforce-webchat.vue +++ b/src/digital-components/salesforce-webchat/salesforce-webchat.vue @@ -65,77 +65,107 @@ export default { } } -.dockableContainer.showDockableContainer .sidebarBody { - button { - background: #0070d1; - color: #fff; - &:hover { - background: #06577c !important; +.dockableContainer { + &.showDockableContainer { + font-family: AvertaRegular; + color: #4d5151; + .sidebarBody { + button { + background: #0070d1; + color: #fff; + &:hover { + background: #06577c !important; + } + } + .form-element__help { + color: #db0020; + } + .embeddedServiceSidebarFormField { + .uiInput { + .uiLabel-left { + color: #4d5151; + } + } + } + .embeddedServiceSidebarButton { + &.uiButton--inverse { + .label { + color: #fff; + text-decoration: underline; + } + &:not(:disabled):focus { + background-color: #0070d1; + } + } + } + .embeddedServiceLiveAgentStateChatAvatar { + &.isLightningOutContext { + .agentIconColor0 { + background-color: #0070d1; + } + } + } + .embeddedServiceLiveAgentStateChatInputFooter { + .footerMenuWrapper { + .footer-menu-items { + .slds-dropdown__item { + > a { + padding-left: 0; + max-width: 100%; + display: flex; + justify-content: center; + } + } + } + } + } + .embeddedServiceLiveAgentStateChatInputFooter { + .footerMenuWrapper { + .footer-menu-items { + a { + margin: 0 auto; + } + } + } + } + } + .chatHeaderBranding { + background-color: #0070d1; + } + span { + &.required { + color: #db0020; + } } } - .embeddedServiceSidebarFormField .uiInput input { - border: 1px solid #8e9292; +} +.embeddedServiceHelpButton { + .helpButton { + .uiButton { + background-color: #0070d1 !important; + } } - .embeddedServiceSidebarButton.uiButton--inverse .label { - color: #fff; - text-decoration: underline; - } - .embeddedServiceLiveAgentStateChatAvatar.isLightningOutContext .agentIconColor0 { - background-color: #0070d1; - } - .embeddedServiceSidebarFormField .uiInput .uiLabel-left { - font-family: AvertaRegular; - color: #727676; - } - .form-element__help { - color: #db0020; - } - .embeddedServiceSidebarFormField .uiInput input { - border: 1px solid #06577c; - } - .embeddedServiceLiveAgentStateChatInputFooter - .footerMenuWrapper - .footer-menu-items - .slds-dropdown__item - > a { - padding-left: 0; - max-width: 100%; - display: flex; - justify-content: center; - } - .embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu-items a { - margin: 0 auto; - } - .embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):focus { - background-color: #0070d1; + .embeddedServiceIcon { + display: inline-block!important; } } - -.embeddedServiceHelpButton .helpButton .uiButton { - background-color: #0070d1 !important; -} - -.modalContainer.sidebarMinimized.layout-docked.embeddedServiceSidebar - .embeddedServiceSidebarMinimizedDefaultUI.helpButton, -.modalContainer.sidebarMinimized.layout-docked.embeddedServiceSidebar - .sidebarHeader.minimizedContainer.embeddedServiceSidebarMinimizedDefaultUI { - background-color: #0070d1; - border: 1px solid #0070d1; -} - -.dockableContainer.showDockableContainer .chatHeaderBranding { - background-color: #0070d1; -} - -.dockableContainer.showDockableContainer { - font-family: AvertaRegular; - color: #727676; -} - -.dockableContainer.showDockableContainer span.required { - color: #db0020; -} - -.dockableContainer.showDockableContainer .sidebarBody button:hover { +.modalContainer { + &.sidebarMinimized { + &.layout-docted { + &.embeddedServiceSidebar { + .embeddedServiceSidebarMinimizedDefaultUI { + .helpButton, + .sidebarHeader { + &.minimizedContainer { + .embeddedServiceSidebarMinimizedDefaultUI { + background-color: #0070d1; + border: 1px solid #0070d1; + } + } + } + } + } + } + } } From 30b290b4e92303ebe0b4a3ca32942c4ee52d5b8a Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Tue, 6 May 2025 15:49:45 -0400 Subject: [PATCH 4/4] Format code. --- .../salesforce-webchat/salesforce-webchat.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/digital-components/salesforce-webchat/salesforce-webchat.vue b/src/digital-components/salesforce-webchat/salesforce-webchat.vue index 84a06d241..9022553a7 100644 --- a/src/digital-components/salesforce-webchat/salesforce-webchat.vue +++ b/src/digital-components/salesforce-webchat/salesforce-webchat.vue @@ -146,7 +146,7 @@ export default { } } .embeddedServiceIcon { - display: inline-block!important; + display: inline-block !important; } } .modalContainer {