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" @mousedown="closeModal"
aria-label="Close"></button> aria-label="Close"></button>
</div> </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> <slot></slot>
</div> </div>
<div class="modal-footer px-5 py-4"> <div class="modal-footer px-5 py-4">
@ -179,7 +179,7 @@ export default {
} }
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
overflow: scroll; overflow: auto;
flex: none; flex: none;
} }
} }

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

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-md-6">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
@ -16,7 +16,7 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
</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"> <div class="col-md-6 col-xl-4">
<alert <alert
ref="alertFewMoreQuestions" ref="alertFewMoreQuestions"
@ -28,7 +28,7 @@
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
</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"> <div class="col-md-6 col-xl-4">
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key"> <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
<questionChain <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 // Convert milliseconds to days and return the result
return difference / (1000 * 3600 * 24); 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) { export function get12HourTimeFormat(time) {
// Check correct time format and split into components // Check correct time format and split into components
time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)?$/) || [time]; 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 // Use a ternary operator to check if the input is a valid date object
return date instanceof Date return date instanceof Date
? // Use the built-in method toLocaleTimeString() to get the short time string in the current locale ? // 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 : // Return undefined if the input is not a valid date object
undefined; undefined;
} }

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

@ -1,6 +1,4 @@
import { import {
getFullDayName,
getFullMonthName,
get12HourTimeFormat, get12HourTimeFormat,
get12HourTimeMobileFormat, get12HourTimeMobileFormat,
getDateFormat, getDateFormat,
@ -52,33 +50,17 @@ describe("date-helper.js", () => {
} }
}); });
// it("getFullMonthName should return full month format.", () => { it("getDateFormat should return date in the given format.", () => {
// // Arrange / Act // Arrange / Act
// const date = new Date("2023-10-01"); const dateString = "2023-10-01";
// const monthName = getFullMonthName(date); 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 // Assert
// expect(monthName).toEqual("October"); expect(formattedDate).toEqual("2023-10-01");
// }); });
// 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");
// });
it("should return the correct difference in days", function () { it("should return the correct difference in days", function () {
// Define some sample dates and their expected differences // 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 //Assert
expect(wrapper.vm.$refs.calendarModalQuestion.openModal).toBeCalled(); 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 //Arrange
store.getters.order.damage.isRepair = true; store.getters.order.damage.isRepair = false;
store.getters.funnelHasRecalibrationPart = true; store.getters.funnelHasRecalibrationPart = true;
const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
@ -89,9 +89,9 @@ describe("Add-to-calendar methods...", () => {
//Assert //Assert
expect(testValue).toEqual("replacement and recalibration"); 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 //Arrange
store.getters.order.damage.isRepair = true; store.getters.order.damage.isRepair = false;
store.getters.funnelHasRecalibrationPart = false; store.getters.funnelHasRecalibrationPart = false;
const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
@ -101,9 +101,9 @@ describe("Add-to-calendar methods...", () => {
//Assert //Assert
expect(testValue).toEqual("replacement"); expect(testValue).toEqual("replacement");
}); });
test("serviceType should return 'repair' when isRepair is false.", () => { test("serviceType should return 'repair' when isRepair is true.", () => {
//Arrange //Arrange
store.getters.order.damage.isRepair = false; store.getters.order.damage.isRepair = true;
const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
//Act //Act
@ -126,7 +126,7 @@ describe("Add-to-calendar methods...", () => {
test("getappointmentData should return expected model value for appointmentType mobile.", () => { test("getappointmentData should return expected model value for appointmentType mobile.", () => {
//Arrange //Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE; store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
store.getters.order.damage.isRepair = true; store.getters.order.damage.isRepair = false;
store.getters.funnelHasRecalibrationPart = true; store.getters.funnelHasRecalibrationPart = true;
const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
@ -176,7 +176,7 @@ describe("Add-to-calendar methods...", () => {
test("getappointmentData should return expected model value for appointmentType DROP_OFF.", () => { test("getappointmentData should return expected model value for appointmentType DROP_OFF.", () => {
//Arrange //Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
store.getters.order.damage.isRepair = false; store.getters.order.damage.isRepair = true;
const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
//Act //Act
@ -188,7 +188,7 @@ describe("Add-to-calendar methods...", () => {
test("getappointmentData should return expected model value for appointmentType IN_SHOP.", () => { test("getappointmentData should return expected model value for appointmentType IN_SHOP.", () => {
//Arrange //Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP; store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
store.getters.order.damage.isRepair = false; store.getters.order.damage.isRepair = true;
const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
//Act //Act
@ -239,12 +239,6 @@ function setupMocks({ customMountOptions }) {
}); });
const wrapper = shallowMount(addToCalendar, mountOptions); 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(); wrapper.vm.$refs.calendarModalQuestion.openModal = jest.fn();
return { wrapper }; 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 { getCalendarFile, download } from "@/helpers/add-to-calendar-helper";
import { AppointmentTypeStrings, RouteCodeFlags } from "@/constants/schedule-constants"; import { AppointmentTypeStrings, RouteCodeFlags } from "@/constants/schedule-constants";
import store from "@/store"; import store from "@/store";
import { serviceType } from "@/constants/service-type";
export default { export default {
name: "add-to-calendar", name: "add-to-calendar",
@ -127,14 +128,14 @@ export default {
serviceType() { serviceType() {
const isRepair = store.getters.order.damage.isRepair; const isRepair = store.getters.order.damage.isRepair;
const funnelHasRecalibrationPart = store.getters.funnelHasRecalibrationPart; const funnelHasRecalibrationPart = store.getters.funnelHasRecalibrationPart;
if (isRepair) { if (!isRepair) {
if (funnelHasRecalibrationPart) { if (funnelHasRecalibrationPart) {
return "replacement and recalibration"; return serviceType.REPLACEMENT_AND_RECALIBRATION;
} else { } else {
return "replacement"; return serviceType.REPLACEMENT;
} }
} }
return "repair"; return serviceType.REPAIR;
}, },
routeCode() { routeCode() {
return store.getters.order.schedule.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" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</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"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"

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

@ -6,7 +6,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</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"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"

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

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

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

@ -6,7 +6,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</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"> <div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
<textboxQuestion <textboxQuestion

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

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

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

@ -6,7 +6,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</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"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"

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

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

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

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</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"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"

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

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</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"> <div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
<template v-if="ChangeShopLink.length"> <template v-if="ChangeShopLink.length">

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

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

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

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

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

@ -8,7 +8,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<vehicleBanner <vehicleBanner
ref="vehicleBanner" ref="vehicleBanner"
@ -17,20 +17,18 @@
<funnelSubHeader <funnelSubHeader
ref="funnelSubHeader" ref="funnelSubHeader"
cmsWidgetName="FunnelSubHeaderWidget" /> 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> </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 class="col-md-6 col-xl-4">
<div v-for="(item, i) in PartsOrQuestions" :key="i"> <div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) --> <!-- 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" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</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"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
@ -16,7 +16,7 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<textboxQuestion <textboxQuestion
class="mb-4 mt-5" class="mb-2 mt-5"
cmsWidgetName="VinNumberQuestionWidget" cmsWidgetName="VinNumberQuestionWidget"
v-model="vin" v-model="vin"
customInputId="vin" customInputId="vin"

5
src/store/index.js
View file

@ -672,7 +672,10 @@ function getTimeSlotsAdditionalEventData(
) { ) {
var numberOfDays = null; var numberOfDays = null;
if (firstAvailableAppointmentDateString) if (firstAvailableAppointmentDateString)
numberOfDays = getDateDifferenceInDays(new Date(), firstAvailableAppointmentDateString); numberOfDays = getDateDifferenceInDays(
new Date().toISOString().split("T")[0],
firstAvailableAppointmentDateString
);
if (shopAppointmentType) if (shopAppointmentType)
return `FirstAvailableAppointment:${numberOfDays},Zip:${zipCode},ShopAppointmentType:${shopAppointmentType},ProvisionalTriggers:${provisionalTriggers.join( 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; display: flex;
flex-direction: column; 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 { .pointer {
cursor: pointer; cursor: pointer;