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

Merge pull request #2608 from Safelite/rlsmerge/2025.07.10-to-dev

Browse source 
Rlsmerge/2025.07.10 to dev
This commit is contained in:
CarlNation 2025-06-26 12:47:03 -04:00 committed by GitHub
commit fa6484c9ed
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 129 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/constants/experiments.js
View file

@ -26,6 +26,7 @@ const experimentSettings = {
FOSTER_LOVE: "DisplayFosterLove",
SKIP_TO_INSURANCE: "SkipToInsurance",
DISPLAY_AFTERPAY_BREAKOUT_DISPLAY: "Display_AfterpayBreakoutDisplay",
AFTERPAY_EXTENDED_PAY_OPTION_THRESHOLD: "AfterPayExtendedPayOptionThreshold",
DYNAMO_LOGGING: "DynamoLogging",
};

4
src/helpers/cms-content-helper.js
View file

@ -339,3 +339,7 @@ export function splitCMSCopyOnParagraphTag(copy) {
// filter removes empty strings that are a result of string.split with regex
return copy.split(/(?:<p(?:.*?)>)|(?:<\/p>)/g).filter((paragraph) => paragraph !== "");
}
export function splitCMSCopyOnBR(copy) {
return copy.split("<br>");
}

8
src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
View file

@ -82,6 +82,8 @@
<span>Amount Due</span>
</div>
</div>
<p>6 or 12 monthly payment plans available</p>
</div>
</div>
</div>
@ -208,6 +210,12 @@ export default {
overflow: hidden;
opacity: 0;
visibility: hidden;
> p {
padding-top: 1rem;
font-size: $font-size-12;
margin: 0;
}
}
}
.payment-section {

110
src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
View file

@ -1,13 +1,14 @@
<template>
<div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
<div id="afterpay-banner" role="alert">
<component
:is="'script'"
src="https://js.squarecdn.com/square-marketplace.js"
async></component>
<div
class="mx-4 my-0 alert-heading text-center"
:class="[isAfterpayBreakoutDisplay ? 'fw-bolder' : 'fw-bold']">
<div>
<span v-for="token in headerCopyTokens" :key="token" v-html="token"></span>
</div>
<div :id="showAfterpayExtendedPayOption ? 'extended-pay-option' : ''">
<span v-for="token in afterpayCopyTokens" :key="token">
<span v-if="isAfterpayPriceToken(token)">{{ afterpayPrice }}</span>
<span v-else-if="isInlineImageToken(token)">
@ -29,7 +30,7 @@
</template>
<script>
import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
import { splitCopyOnCMSPlaceHolder, splitCMSCopyOnBR } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
import { getPromosThatMatchLineItemsOnOrder } from "@/helpers/promotions-helper";
import { getArrayOfAllLineItemsAndChildParts } from "@/store";
@ -55,8 +56,8 @@ export default {
props: {
cmsWidgetName: String,
lineItems: Array,
isAfterpayBreakoutDisplay: Boolean,
isInsuranceSelected: Boolean,
afterpayExtendedPayOptionThreshold: Number,
},
data() {
return {};
@ -73,27 +74,24 @@ export default {
hasImage() {
return !!this.imageUrl;
},
headerCopyTokens() {
return splitCMSCopyOnBR(this.getCmsContent(this.cmsWidgetName, "HeaderText"));
},
afterpayCopyTokens() {
if (this.isAfterpayBreakoutDisplay) {
// Text for Afterpay Breakout experiment
var afterpayBannerCopy = this.getCmsContent(this.cmsWidgetName, "BodyText2");
afterpayBannerCopy =
afterpayBannerCopy &&
afterpayBannerCopy.replaceAll(
"{custom:paymentType}",
this.isInsuranceSelected ? "deductible" : "spending"
);
return splitCopyOnCMSPlaceHolder(afterpayBannerCopy);
if (this.showAfterpayExtendedPayOption) {
return splitCopyOnCMSPlaceHolder(
this.getCmsContent(this.cmsWidgetName, "BodyText")
);
} else {
return splitCopyOnCMSPlaceHolder(
this.getCmsContent(this.cmsWidgetName, "HeaderText")
this.getCmsContent(this.cmsWidgetName, "BodyText2")
);
}
},
modalCopy() {
return this.getCmsContent(this.cmsWidgetName, "BodyText");
return this.getCmsContent(this.cmsWidgetName, "FooterText");
},
afterpayPrice() {
getTierOnePackagePrice() {
let allLineItems = getArrayOfAllLineItemsAndChildParts(this.lineItems);
if (this.lineItems.promos) {
allLineItems = allLineItems?.filter((item) => item.partType !== "PROMO_DISCOUNT");
@ -119,38 +117,76 @@ export default {
});
}
return price;
},
afterpayPrice() {
let price = this.getTierOnePackagePrice;
const adjusted = (price / 4).toFixed(2);
return `$${adjusted}`;
},
showAfterpayExtendedPayOption() {
return (
this.afterpayExtendedPayOptionThreshold &&
this.getTierOnePackagePrice >= this.afterpayExtendedPayOptionThreshold
);
},
},
components: {},
};
</script>
<style lang="scss" scoped>
.alert {
padding: 0.675rem 0;
&.alert-info {
background-color: $blue-100;
.alert-heading {
color: $blue-700;
#afterpay-banner {
display: flex;
flex-direction: column;
background-color: $blue-150;
justify-content: center;
align-items: center;
padding: 1rem;
border-radius: 1rem;
@include media-breakpoint-up(md) {
flex-direction: row;
}
> div:first-of-type {
display: flex;
color: $black;
font-size: $font-size-20;
font-weight: $font-weight-600;
line-height: 2rem;
@include media-breakpoint-down(md) {
border-bottom: 1px solid;
padding-bottom: 1rem;
width: 100%;
justify-content: center;
> span:first-of-type {
margin-right: 0.25rem;
}
}
&.fw-bolder {
font-weight: 600;
}
img {
vertical-align: text-top;
}
svg {
fill: $blue-700;
width: 1rem;
height: 1rem;
@include media-breakpoint-up(md) {
flex-direction: column;
border-right: 1px solid;
padding-right: 1rem;
}
}
& .alert-heading {
font-size: 0.875rem;
> div:last-of-type {
color: $gray-650;
text-align: left;
@include media-breakpoint-down(md) {
padding-top: 1rem;
}
@include media-breakpoint-up(md) {
padding-left: 1rem;
&#extended-pay-option {
max-width: 28rem;
}
}
}
#afterpay-learnmore {
white-space: nowrap;
}

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

@ -46,7 +46,7 @@
<afterpayModalBanner
v-if="showAfterpayBanner"
cmsWidgetName="AfterpayModalWidget"
:isAfterpayBreakoutDisplay="isAfterpayBreakoutDisplay"
:afterpayExtendedPayOptionThreshold="afterpayExtendedPayOptionThreshold"
:isInsuranceSelected="isInsuranceSelected"
:lineItems="lineItems" />
@ -591,10 +591,7 @@ export default {
);
},
showAfterpayBanner() {
return (
(this.isAfterpayBreakoutDisplay || !this.isInsuranceSelected) &&
(!this.isRecalibrationOnOrder || !this.shouldHideRecalibration)
);
return !this.isRecalibrationOnOrder || !this.shouldHideRecalibration;
},
isRecalPriceRemove() {
return (
@ -606,14 +603,12 @@ export default {
showRecalDisclaimer() {
return this.isRecalibrationOnOrder && this.isRecalPriceRemove;
},
isAfterpayBreakoutDisplay() {
return (
(!this.isRecalPriceRemove || !this.isRecalibrationOnOrder) &&
experimentMixin.methods.hasSettingEqualTo(
experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY,
"true"
)
afterpayExtendedPayOptionThreshold() {
let thresholdAmount = experimentMixin.methods.getSettingValue(
experimentSettings.AFTERPAY_EXTENDED_PAY_OPTION_THRESHOLD
);
thresholdAmount && (thresholdAmount = parseInt(thresholdAmount));
return thresholdAmount;
},
},
methods: {

50
src/layouts/schedule/time-slot-question/time-slot-question.vue
View file

@ -12,10 +12,7 @@
buttonTypeString="timeSlotModalListButton"
:buttonTypeObject="timeSlotModalListButton"
class="mt-4"
:class="[
isMobileAppointment ? 'is-mobile-appointment' : '',
isDropOffAppointment ? 'is-drop-off-appointment' : '',
]"
:class="[isMobileAppointment ? 'is-mobile-appointment' : '']"
:answers="availableTimeSlots"
groupName="chooseTimeSlot"
textPosition="text-center"
@ -97,7 +94,7 @@ const cmsWidgetFieldMappings = {
defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
export default {
name: "time-slot-no-modal-question",
name: "time-slot-question",
emits: ["update:modelValue", "TimeSlotSelected", "click-event"],
props: {
modelValue: {
@ -240,6 +237,9 @@ export default {
);
},
disclaimerTextBlockCopy() {
/* AppointmentTypeStrings.DROP_OFF should never be used per CASH-803 epic
but I'm leaving this in assuming that a future card in this epic
will handle disclaimers in a different way */
if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
if (this.isSameDay) {
@ -329,11 +329,7 @@ export default {
return null;
}
if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
return this.getAvailableTimeSlotsForDropOff(
this.timeSlotsForSelectedDate.timeSlots
);
} else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
} else {
return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots);
@ -357,9 +353,6 @@ export default {
isMobileAppointment() {
return this.appointmentType === AppointmentTypeStrings.MOBILE;
},
isDropOffAppointment() {
return this.appointmentType === AppointmentTypeStrings.DROP_OFF;
},
},
methods: {
async setSelectedTimeSlot() {
@ -382,23 +375,20 @@ export default {
}
},
getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
return timeSlotsForSelectedDate.map((timeSlot) => {
let dropOffIndex = -1;
const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot, index) => {
const readableTime = militaryToTwelveHourTime(timeSlot.startTime);
return {
value: timeSlot.id,
buttonLabel: readableTime,
};
});
},
getAvailableTimeSlotsForDropOff(timeSlotsForSelectedDate) {
const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
let buttonLabelValue;
if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
let buttonLabelValue = readableTime;
if (timeSlot.id.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
dropOffIndex = index;
if (this.isSameDay) {
buttonLabelValue = this.sameDayDropoffButtonText;
} else {
buttonLabelValue = this.dropoffButtonText;
}
} else if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
dropOffIndex = index;
buttonLabelValue = this.overnightDropoffButtonText;
} else if (this.isSameDay) {
buttonLabelValue = this.sameDayDropoffButtonText;
} else {
buttonLabelValue = this.dropoffButtonText;
}
return {
value: timeSlot.id,
@ -406,6 +396,10 @@ export default {
};
});
if (dropOffIndex) {
const dropOffTimeSlot = availableTimeSlots.splice(dropOffIndex, 1)[0];
availableTimeSlots.unshift(dropOffTimeSlot);
}
return availableTimeSlots;
},
getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {

10
src/mixins/analytics-mixin.js
View file

@ -132,7 +132,6 @@ export default {
async logDigitalConsumer() {
const currentPageName = getPageNameFromRouter();
const universes = store.getters.applicationUser.experiments;
console.log(JSON.stringify(universes));
let hasDynamoLogging = experimentMixin.methods.hasSettingEqualTo(
experimentSettings.DYNAMO_LOGGING,
@ -150,15 +149,15 @@ export default {
const conceptVariation = variationNames.length > 0 ? variationNames[0] : "";
const isConceptExposed = universes.find(
(item) => item.universeName === experimentUniverses.CONCEPT_FUNNEL
)?.isExposed;
const submittedOrder = baseMixin.methods.getSubmittedOrder();
const hasSubmittedOrder = baseMixin.methods.hasSubmittedOrder();
const hasSubmittedOrderAtConfirmationPage =
hasSubmittedOrder && currentPageName?.toLowerCase() == routeData.CONFIRMATION.name;
const refSequenceNum = hasSubmittedOrderAtConfirmationPage
? submittedOrder.referralSequenceNumber
: store.getters.order.referralSequenceNumber;
var payload = {
actionName: `Browser page:${currentPageName}`,
referralSequenceNumber: hasSubmittedOrderAtConfirmationPage
@ -174,6 +173,7 @@ export default {
? submittedOrder.workOrderNumber
: store.getters.order.workOrderNumber,
conceptVariation: conceptVariation,
isConceptExposed: isConceptExposed,
};
await baseMixin.methods.dispatchStoreAction(

2
src/store/index.js
View file

@ -1570,6 +1570,7 @@ export const actions = {
workOrderId,
workOrderNumber,
conceptVariation,
isConceptExposed,
}
) {
var payload = {
@ -1582,6 +1583,7 @@ export const actions = {
workOrderId: workOrderId ?? "",
workOrderNumber: workOrderNumber ?? "",
conceptVariation: conceptVariation,
isConceptExposed: isConceptExposed,
};
return globalMethods.callHttpClient({

9
src/styles/ux-variables.scss
View file

@ -7,6 +7,7 @@ $black-100: #0a0a0a;
// Blues
$blue-100: #e4f1f7; // Used in theme
$blue-150: #e5f1fa;
$blue-200: #c1dfee;
$blue-300: #9fcee6;
$blue-400: #69adcf; // Used in theme
@ -59,6 +60,7 @@ $gray: #b0b3b3; // Default Gray
$gray-500: #8e9292; // Used in theme
$gray-550: #727676; // Used in theme
$gray-600: #4d5151; // Used in theme
$gray-650: #525656;
$gray-700: #303333; // Used in theme
$gray-800: #222424; // Used in theme
$gray-900: #181a1a; // Used in theme
@ -121,13 +123,16 @@ $body-color: $gray-600;
//Fonts
$font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
$font-family-monospace:
UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base: $font-family-sans-serif;
$font-family-code: $font-family-monospace;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-12: $font-size-base * 0.75; // 12px
$font-size-20: $font-size-base * 1.25; // 20px
//Custom Font size (extra small)
$font-size-xsm: $font-size-base * 0.75;
$font-sizes: (