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

CSR-1137 | Formatting

Browse source
This commit is contained in:
Scott Kiener 2023-05-25 08:16:10 -04:00
parent 6bc97bb2df
commit 28e6ff191d
5 changed files with 47 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
View file

@ -28,8 +28,8 @@ export default {
return this.getCmsContent(this.cmsWidgetName, "Answers");
},
additionalButtonData() {
return {
additionalButtonStyling: 'listButtonHorizontalStrong'
return {
additionalButtonStyling: "listButtonHorizontalStrong",
};
},
selectedValues: {

2
src/layouts/schedule/constants/schedule-constants.js
View file

@ -8,4 +8,4 @@ const PREMIUM_TIME_SLOT_ID_FLAG = "-premium";
const PREMIUM_FEE_PART_TYPE = "EARLY BIRD";
export { AppointmentTypeStrings, PREMIUM_TIME_SLOT_ID_FLAG, PREMIUM_FEE_PART_TYPE };
export { AppointmentTypeStrings, PREMIUM_TIME_SLOT_ID_FLAG, PREMIUM_FEE_PART_TYPE };

12
src/layouts/schedule/schedule.vue
View file

@ -73,7 +73,7 @@ import {
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy,
} from "@/helpers/cms-content-helper";
import {PREMIUM_FEE_PART_TYPE} from "./constants/schedule-constants";
import { PREMIUM_FEE_PART_TYPE } from "./constants/schedule-constants";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import store from "@/store";
@ -135,7 +135,13 @@ export default {
const pricingPromise = baseMixin.methods.dispatchStoreAction(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
availableLineItems: [{ partNumber: PREMIUM_FEE_PART_TYPE, partType: PREMIUM_FEE_PART_TYPE, description: null }],
availableLineItems: [
{
partNumber: PREMIUM_FEE_PART_TYPE,
partType: PREMIUM_FEE_PART_TYPE,
description: null,
},
],
},
false
);
@ -286,7 +292,7 @@ export default {
if (newValue !== oldValue) {
this.selectedTimeSlotData = {
id: null,
isPremiumAppointment: null
isPremiumAppointment: null,
};
}
},

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

@ -50,7 +50,11 @@ import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
// Constants
import { AppointmentTypeStrings, PREMIUM_TIME_SLOT_ID_FLAG, PREMIUM_FEE_PART_TYPE} from "../constants/schedule-constants";
import {
AppointmentTypeStrings,
PREMIUM_TIME_SLOT_ID_FLAG,
PREMIUM_FEE_PART_TYPE,
} from "../constants/schedule-constants";
// Validation for the modal button
defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
@ -97,7 +101,7 @@ export default {
if (numberOfOptions === 1) {
this.selectedTimeSlotId = newValue.timeSlots[0].id;
}
}
},
},
computed: {
supplementalInformationBlock() {
@ -110,7 +114,9 @@ export default {
? this.mobilePremiumCmsWidgetName
: this.mobileCmsWidgetName;
} else {
appointmentTypeCmsWidgetName = this.isSameDay ? this.sameDayDropOffCmsWidgetName : this.dropoffCmsWidgetName;
appointmentTypeCmsWidgetName = this.isSameDay
? this.sameDayDropOffCmsWidgetName
: this.dropoffCmsWidgetName;
}
return this.getCmsContent(appointmentTypeCmsWidgetName, "BodyText");
},
@ -130,11 +136,14 @@ export default {
return this.getCmsContent(this.dropoffCmsWidgetName, "SubheaderText");
},
inshopDurationText() {
const inshopDurationTextWithoutTime = this.getCmsContent(this.cmsWidgetName, "SubheaderText");
const inshopDurationTextWithoutTime = this.getCmsContent(
this.cmsWidgetName,
"SubheaderText"
);
const inshopDurationTime = this.getDisplayTextForDurationLength(
this.estimatedServiceMinutesMinimum,
this.estimatedServiceMinutesMaximum
);
this.estimatedServiceMinutesMinimum,
this.estimatedServiceMinutesMaximum
);
return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
},
durationTextBlockCopy() {
@ -195,17 +204,19 @@ export default {
if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
const isPremiumTimeSlot = this.dateAndTimeSlotData.timeSlots[0].offerPremium;
const hasPremiumPartAvailable = this.premiumAppointmentFee?.partType === PREMIUM_FEE_PART_TYPE;
const hasPremiumPartAvailable =
this.premiumAppointmentFee?.partType === PREMIUM_FEE_PART_TYPE;
if (isPremiumTimeSlot && hasPremiumPartAvailable) {
const formattedPrice = "+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2);
const formattedPrice =
"+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2);
availableTimeSlots.unshift({
// Unique value is required for each <input> and the premium appoinment shares a timeslot ID
value: this.addPremiumFlagToInput(this.dateAndTimeSlotData.timeSlots[0].id),
buttonLabel: this.premiumAppointmentButtonText,
buttonLabelSubCopy: formattedPrice,
additionalButtonData: {
isPremiumAppointment: true
}
isPremiumAppointment: true,
},
});
}
}
@ -227,7 +238,7 @@ export default {
const selectedTimeSlotData = {
id: this.selectedTimeSlotId,
isPremiumAppointment: this.isSelectedAppointmentPremium,
}
};
this.$emit("update:modelValue", selectedTimeSlotData);
this.$refs["timeSlots"].closeModal();
},
@ -264,7 +275,7 @@ export default {
return displayTextForDurationLength;
},
addPremiumFlagToInput(timeSlotId) {
return timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG;
return (timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG);
},
removePremiumFlagFromInput(timeSlotId) {
return parseInt(timeSlotId.trim(PREMIUM_TIME_SLOT_ID_FLAG.length));

21
src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue
View file

@ -8,11 +8,14 @@
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0 position-relative" :class="textPosition">
{{ buttonLabel }}
<span v-if="buttonLabelSubCopy" class="premium-appointment-price" :class="textPosition">
{{ formattedButtonLabelSubCopy }}
<span
v-if="buttonLabelSubCopy"
class="premium-appointment-price"
:class="textPosition">
{{ formattedButtonLabelSubCopy }}
</span>
</span>
</span>
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
@ -113,14 +116,14 @@ export default {
width: 100%;
outline: none;
span.premium-appointment-price {
span.premium-appointment-price {
position: absolute;
background: $green-100;
border-radius: 4.5rem;
background: $green-100;
border-radius: 4.5rem;
line-height: 1.25rem;
color: $green-700;
font-size: 0.75rem;
margin-left:4px;
margin-left: 4px;
padding: 2px 8px;
font-weight: 500;
}
@ -129,6 +132,4 @@ export default {
.position-relative {
position: relative;
}
</style>