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

Merge branch 'develop' into feature/CSR-1395-tech-review-changes

Browse source
This commit is contained in:
Leah Schumann 2023-10-17 08:31:35 -04:00
commit a2b39cc918
22 changed files with 110 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/constants/service-type.js Normal file
View file

@ -0,0 +1,6 @@
const serviceType = {
REPLACEMENT: "replacement",
REPAIR: "repair",
REPLACEMENT_AND_RECALIBRATION: "replacement and recalibration",
};
export { serviceType };

4
src/digital-components/modal/modal.vue
View file

@ -22,7 +22,7 @@
@mousedown="closeModal"
aria-label="Close"></button>
</div>
<div class="modal-body ps-5 pe-5 pb-4 pt-0">
<div class="modal-body ps-5 pe-5 pb-4 pt-1">
<slot></slot>
</div>
<div class="modal-footer px-5 py-4">
@ -179,7 +179,7 @@ export default {
}
}
@include media-breakpoint-up(md) {
overflow: scroll;
overflow: auto;
flex: none;
}
}

6
src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
View file

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
@ -16,7 +16,7 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<alert
ref="alertFewMoreQuestions"
@ -28,7 +28,7 @@
v-bind:isDismissible="false" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
<questionChain

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

@ -7,22 +7,6 @@ export function getDateDifferenceInDays(startDate, endDate) {
// Convert milliseconds to days and return the result
return difference / (1000 * 3600 * 24);
}
export function getFullDayName(date) {
// Use a ternary operator to check if the input is a valid date object
return date instanceof Date
? // Use the built-in method toLocaleDateString() to get the full day name in the current locale
date.toLocaleDateString(undefined, { weekday: "long" })
: // Return undefined if the input is not a valid date object
undefined;
}
export function getFullMonthName(date) {
// Use a ternary operator to check if the input is a valid date object
return date instanceof Date
? // Use the built-in method toLocaleDateString() to get the full month name in the current locale
date.toLocaleDateString(undefined, { month: "long" })
: // Return undefined if the input is not a valid date object
undefined;
}
export function get12HourTimeFormat(time) {
// Check correct time format and split into components
time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)?$/) || [time];
@ -112,7 +96,7 @@ export function shortTimeString(date) {
// Use a ternary operator to check if the input is a valid date object
return date instanceof Date
? // Use the built-in method toLocaleTimeString() to get the short time string in the current locale
date.toLocaleTimeString(undefined, { hour: "numeric", minute: "numeric", hour12: true })
date.toLocaleTimeString("en-us", { hour: "numeric", minute: "numeric", hour12: true })
: // Return undefined if the input is not a valid date object
undefined;
}

38
src/helpers/date-helper.spec.js
View file

@ -1,6 +1,4 @@
import {
getFullDayName,
getFullMonthName,
get12HourTimeFormat,
get12HourTimeMobileFormat,
getDateFormat,
@ -52,33 +50,17 @@ describe("date-helper.js", () => {
}
});
// it("getFullMonthName should return full month format.", () => {
// // Arrange / Act
// const date = new Date("2023-10-01");
// const monthName = getFullMonthName(date);
it("getDateFormat should return date in the given format.", () => {
// Arrange / Act
const dateString = "2023-10-01";
const dateParts = dateString.split("-");
const date = new Date(dateParts[0], parseInt(dateParts[1]) - 1, dateParts[2]);
const format = "yyyy-MM-dd";
const formattedDate = getDateFormat(date, format);
// // Assert
// expect(monthName).toEqual("October");
// });
// it("getFullDayName should return full Day Name format.", () => {
// // Arrange / Act
// const date = new Date("2023-10-01");
// const dayName = getFullDayName(date);
// // Assert
// expect(dayName).toEqual("Sunday");
// });
// it("getDateFormat should return date in the given format.", () => {
// // Arrange / Act
// const date = new Date("2023-10-01");
// const format = "yyyy-MM-dd";
// const formattedDate = getDateFormat(date, format);
// // Assert
// expect(formattedDate).toEqual("2023-10-01");
// });
// Assert
expect(formattedDate).toEqual("2023-10-01");
});
it("should return the correct difference in days", function () {
// Define some sample dates and their expected differences

24
src/layouts/add-to-calendar/add-to-calendar.spec.js
View file

@ -77,9 +77,9 @@ describe("Add-to-calendar methods...", () => {
//Assert
expect(wrapper.vm.$refs.calendarModalQuestion.openModal).toBeCalled();
});
test("serviceType should return 'replacement and recalibration' when isRepair and funnelHasRecalibrationPart true.", () => {
test("serviceType should return 'replacement and recalibration' when isRepair is false and funnelHasRecalibrationPart true.", () => {
//Arrange
store.getters.order.damage.isRepair = true;
store.getters.order.damage.isRepair = false;
store.getters.funnelHasRecalibrationPart = true;
const { wrapper } = setupMocks({});
@ -89,9 +89,9 @@ describe("Add-to-calendar methods...", () => {
//Assert
expect(testValue).toEqual("replacement and recalibration");
});
test("serviceType should return 'replacement' when isRepair is true and funnelHasRecalibrationPart is false.", () => {
test("serviceType should return 'replacement' when isRepair is false and funnelHasRecalibrationPart is false.", () => {
//Arrange
store.getters.order.damage.isRepair = true;
store.getters.order.damage.isRepair = false;
store.getters.funnelHasRecalibrationPart = false;
const { wrapper } = setupMocks({});
@ -101,9 +101,9 @@ describe("Add-to-calendar methods...", () => {
//Assert
expect(testValue).toEqual("replacement");
});
test("serviceType should return 'repair' when isRepair is false.", () => {
test("serviceType should return 'repair' when isRepair is true.", () => {
//Arrange
store.getters.order.damage.isRepair = false;
store.getters.order.damage.isRepair = true;
const { wrapper } = setupMocks({});
//Act
@ -126,7 +126,7 @@ describe("Add-to-calendar methods...", () => {
test("getappointmentData should return expected model value for appointmentType mobile.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
store.getters.order.damage.isRepair = true;
store.getters.order.damage.isRepair = false;
store.getters.funnelHasRecalibrationPart = true;
const { wrapper } = setupMocks({});
@ -176,7 +176,7 @@ describe("Add-to-calendar methods...", () => {
test("getappointmentData should return expected model value for appointmentType DROP_OFF.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
store.getters.order.damage.isRepair = false;
store.getters.order.damage.isRepair = true;
const { wrapper } = setupMocks({});
//Act
@ -188,7 +188,7 @@ describe("Add-to-calendar methods...", () => {
test("getappointmentData should return expected model value for appointmentType IN_SHOP.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
store.getters.order.damage.isRepair = false;
store.getters.order.damage.isRepair = true;
const { wrapper } = setupMocks({});
//Act
@ -239,12 +239,6 @@ function setupMocks({ customMountOptions }) {
});
const wrapper = shallowMount(addToCalendar, mountOptions);
//wrapper.vm.setCmsContent = jest.fn();
//wrapper.vm.$refs.datePicker.initializeComponent = jest.fn();
//wrapper.vm.$refs.locationAlerts.initializeComponent = jest.fn();
//wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
wrapper.vm.$refs.calendarModalQuestion.openModal = jest.fn();
return { wrapper };
}

9
src/layouts/add-to-calendar/add-to-calendar.vue
View file

@ -32,6 +32,7 @@ import {
import { getCalendarFile, download } from "@/helpers/add-to-calendar-helper";
import { AppointmentTypeStrings, RouteCodeFlags } from "@/constants/schedule-constants";
import store from "@/store";
import { serviceType } from "@/constants/service-type";
export default {
name: "add-to-calendar",
@ -127,14 +128,14 @@ export default {
serviceType() {
const isRepair = store.getters.order.damage.isRepair;
const funnelHasRecalibrationPart = store.getters.funnelHasRecalibrationPart;
if (isRepair) {
if (!isRepair) {
if (funnelHasRecalibrationPart) {
return "replacement and recalibration";
return serviceType.REPLACEMENT_AND_RECALIBRATION;
} else {
return "replacement";
return serviceType.REPLACEMENT;
}
}
return "repair";
return serviceType.REPAIR;
},
routeCode() {
return store.getters.order.schedule.routeCode;

2
src/layouts/address-lookup/address-lookup.vue
View file

@ -11,7 +11,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"

2
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -6,7 +6,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"

22
src/layouts/confirmation/confirmation.vue
View file

@ -4,7 +4,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div>
<div class="container-fluid pb-2">
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="header-container">
<img :src="ScheduleConfirmationImage" />
@ -55,15 +55,11 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import { settleAllPromises } from "@/helpers/layout-helper";
import { applicationConfig } from "@/constants/application-config.js";
import { convertDateStringToDate } from "@/layouts/schedule/helpers/schedule-helper";
import { Form } from "vee-validate";
import store from "@/store";
import {
getFullDayName,
getFullMonthName,
get12HourTimeFormat,
get12HourTimeMobileFormat,
} from "@/helpers/date-helper";
import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-helper";
export default {
name: "confirmation",
async beforeRouteEnter(to, from, next) {
@ -174,10 +170,14 @@ export default {
return `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
},
ScheduleDateFormatted() {
const scheduleDate = new Date(this.ScheduleDate);
return `${getFullDayName(scheduleDate)}, ${getFullMonthName(
scheduleDate
)} ${scheduleDate.getDate()}`;
// This conversion ensures we don't get get GMT induced date changes
const dateObject = convertDateStringToDate(this.ScheduleDate);
// Ex: Tuesday, April 22
return dateObject.toLocaleDateString("en-us", {
weekday: "long",
month: "long",
day: "numeric",
});
},
ScheduleTimeFormatted() {
if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {

2
src/layouts/customer-details/customer-details.vue
View file

@ -6,7 +6,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
<textboxQuestion

6
src/layouts/estimate/estimate.vue
View file

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
@ -33,12 +33,13 @@
<div v-else>
<alert
class="my-4"
class="mt-4 mb-4"
:cmsWidgetName="alertInfo"
alertClass="alert-info"
v-bind:isDismissible="false" />
<textboxQuestion
class="mb-4"
cmsWidgetName="ServiceZipQuestionWidget"
v-model="serviceZipCode"
inputId="serviceZipCode"
@ -47,6 +48,7 @@
validationRules="zip-required|zip-format" />
<textboxQuestion
class="mb-0"
cmsWidgetName="EmailAddressQuestionWidget"
v-model="emailAddress"
inputId="emailAddress"

2
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -6,7 +6,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"

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

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
@ -38,7 +38,6 @@
vapsTilesCmsName="VapsProductTiles"
v-on="{ 'buttonEvent.openModal': openModal }" />
<button @click="openModal('RainDefenseModal')">OPEN MODAL</button>
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
<paymentMethodQuestion
v-if="!isPiaDisabled"

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

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"

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

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
<template v-if="ChangeShopLink.length">

7
src/layouts/service-location/service-location.vue
View file

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
@ -58,7 +58,7 @@
alertClass="alert-warning" />
</div>
</div>
<div class="row justify-content-md-center appointment-type">
<div class="row justify-content-center appointment-type">
<div class="col-md-6">
<appointmentTypeQuestion
v-model="selectedAppointmentType"
@ -72,7 +72,7 @@
validationRules="option-required" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<mobileLocationModalQuestions
customComponentId="mobileLocationQuestions"
@ -537,7 +537,6 @@ export default {
.appointment-type-question {
.button-question {
.col {
padding: 0 0.5rem;
@include media-breakpoint-up(md) {
padding: 0 0.75rem;
}

18
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -6,7 +6,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
@ -23,7 +23,7 @@
:isDismissible="false" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6">
<damageLocationQuestion
ref="damageLocation"
@ -32,7 +32,7 @@
groupName="DamageLocationQuestion" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<windshieldOptions
class="windshield-options"
@ -66,7 +66,7 @@
validationRules="replace-options-required" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<navbar
cmsWidgetName="FunnelFooterWidget"
@ -551,9 +551,19 @@ export default {
<style lang="scss">
.replace-options-question {
.question-text {
margin: 1rem 0 0 0;
@include media-breakpoint-up(md) {
margin: 1rem 0;
}
}
.two-list-card-width {
width: 100%;
flex: 0 auto;
margin-top: 0.5rem;
&:first-child {
margin-top: 1rem;
}
}
}
</style>

24
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -8,7 +8,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<vehicleBanner
ref="vehicleBanner"
@ -17,20 +17,18 @@
<funnelSubHeader
ref="funnelSubHeader"
cmsWidgetName="FunnelSubHeaderWidget" />
<div class="prevent-squish my-5">
<div class="row">
<div class="col pb-0">
<alert
class="rounded border-0 shadow-sm"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
:isDismissible="false" />
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 my-5">
<alert
class="rounded border-0 shadow-sm"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
:isDismissible="false" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->

4
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
@ -16,7 +16,7 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<textboxQuestion
class="mb-4 mt-5"
class="mb-2 mt-5"
cmsWidgetName="VinNumberQuestionWidget"
v-model="vin"
customInputId="vin"

5
src/store/index.js
View file

@ -672,7 +672,10 @@ function getTimeSlotsAdditionalEventData(
) {
var numberOfDays = null;
if (firstAvailableAppointmentDateString)
numberOfDays = getDateDifferenceInDays(new Date(), firstAvailableAppointmentDateString);
numberOfDays = getDateDifferenceInDays(
new Date().toISOString().split("T")[0],
firstAvailableAppointmentDateString
);
if (shopAppointmentType)
return `FirstAvailableAppointment:${numberOfDays},Zip:${zipCode},ShopAppointmentType:${shopAppointmentType},ProvisionalTriggers:${provisionalTriggers.join(

18
src/styles/common-styles.scss
View file

@ -14,6 +14,24 @@ body {
display: flex;
flex-direction: column;
}
// Set max-width on columns to prevent overly-wide
// components on extra wide screens.
.col-md-6 {
max-width: 472px;
@include media-breakpoint-up(xl) {
max-width: 708px;
}
.col {
max-width: 236px;
}
}
.col-xl-4 {
max-width: 472px;
.col {
max-width: 100%;
}
}
//END set max-width on columns
}
.pointer {
cursor: pointer;