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

Merge branch 'develop' into feature/CSR-1370

Browse source
This commit is contained in:
Chloe Herd 2023-07-20 11:53:33 -04:00
commit 50ddc83dd9
8 changed files with 107 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
src/digital-components/date-picker/date-picker.vue
View file

@ -56,10 +56,14 @@
:class="[!isLoading ? 'date-picker-hidden' : '']"
loaderColor="blue"
loaderPosition="center" />
<div class="row form-test-error">
<ErrorMessage name="date-of-month" class="small mt-1"></ErrorMessage>
</div>
<button
v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
type="button"
class="btn btn-link"
id="viewMoreDates"
:disabled="isLoading"
@click="showAnotherMonth">
View more dates
@ -78,6 +82,7 @@ import {
convertDateToDateString,
convertDateStringToDate,
} from "@/layouts/schedule/helpers/schedule-helper";
import { useField, ErrorMessage } from "vee-validate";
export default {
name: "datePicker",
@ -112,6 +117,32 @@ export default {
return [];
},
},
validationRules: {
type: String,
default: "",
},
},
setup(props) {
const propsClone = Object.assign({}, props);
const modelValue = propsClone.modelValue;
const fieldOptions = {
value: modelValue,
initialValue: modelValue,
};
const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
useField("date-of-month", props.validationRules, fieldOptions);
return {
errorMessage,
handleBlur,
handleChange,
validate,
meta,
errors,
resetField,
};
},
computed: {
todayString() {
@ -419,7 +450,7 @@ export default {
monthsAfterToLoadOffset (number),
hideSecondMonth (boolean),
preSelectedDate (string)
data used:
todayDate (date object)
this.hideSomeDaysForInitialView (string)
@ -615,41 +646,39 @@ export default {
});
});
},
scrollToElement(elementId, speed, easing) {
// TODO - needs to be cleaned up & refactored
function scrollTopSmooth(wrapper, target, duration = 300, timingName = "linear") {
const initY = wrapper.scrollTop;
const wrapperRect = wrapper.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
const timingFunc = TIMINGFUNC_MAP[timingName];
let start = null;
const step = (timestamp) => {
start = start || timestamp;
const progress = timestamp - start,
// Growing from 0 to 1
time = Math.min(1, (timestamp - start) / duration);
const percentageNew = timingFunc(time);
const distanceToGo = targetY;
const thisDistance = percentageNew * distanceToGo;
wrapper.scrollTo(0, initY + thisDistance);
if (percentageNew < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
const wrapper = document.getElementById("date-picker-fieldset");
const targetMonth = document.getElementById(elementId);
scrollTopSmooth(wrapper, targetMonth, 800, "ease-in-out");
scrollToElement(elementId, duration = 800, easing = "ease-in-out") {
const wrapper = document.querySelector(".page-container-grouped-styles");
const target = document.getElementById(elementId);
const initY = wrapper.scrollTop;
const wrapperRect = wrapper.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
const timingFunc = TIMINGFUNC_MAP[easing];
let start = null;
const step = (timestamp) => {
start = start || timestamp;
const time = Math.min(1, (timestamp - start) / duration);
const percentageNew = timingFunc(time);
const distanceToGo = targetY;
const thisDistance = percentageNew * distanceToGo;
wrapper.scrollTo(0, initY + thisDistance);
if (percentageNew < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
},
},
watch: {
modelValue(newValue, oldValue) {
this.resetField({
value: newValue,
});
},
},
components: {
loader,
ErrorMessage,
},
};
</script>
@ -911,16 +940,15 @@ export default {
margin-bottom: 0;
overflow: hidden;
}
&.last-available-month:not(&.month-hidden) {
margin-bottom: 14rem;
}
}
.btn-link {
font-weight: 500;
text-underline-offset: 4px;
position: absolute;
bottom: 0;
flex-grow: 0;
&:focus {
box-shadow: none;
}
}
.past {
@ -992,4 +1020,10 @@ export default {
text-underline-offset: 4px;
z-index: 2;
}
.form-test-error {
margin: 0 auto;
max-width: 414px;
text-align: left;
}
</style>

2
src/fmg-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -2,7 +2,7 @@
<div class="funnel-sub-header">
<div
class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
<h5 class="text-center fw-normal mb-2" :class="headerColor">
<h5 class="text-center fw-normal mb-0" :class="headerColor">
<span>
{{ text }}
</span>

10
src/layouts/quote/quote.spec.js
View file

@ -162,6 +162,11 @@ describe("quote.vue", () => {
},
referralNumber: "1234567",
},
payment: {
insuranceCoverage: {
isVerified: false,
},
},
};
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
@ -185,6 +190,11 @@ describe("quote.vue", () => {
glassParts: ["item", "item2"],
},
},
payment: {
insuranceCoverage: {
isVerified: false,
},
},
};
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();

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

@ -150,7 +150,7 @@ export default {
(store.getters.order.damage.isRepair ||
(store.getters.order.lineItems?.glassParts != null &&
store.getters.order.lineItems.glassParts.length > 0)) &&
store.getters.order.referralNumber?.length !== 6
!store.getters.payment.insuranceCoverage.isVerified
);
},
getDefaultIsInsuranceSelectedValue(availableLineItems) {
@ -166,7 +166,7 @@ export default {
return availableLineItems
? baseMixin.methods.getTierOnePackagePrice(
baseMixin.methods.filterOutFees(availableLineItems)
) > 500
) > 300
: null;
}
},

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

@ -18,6 +18,7 @@
v-model="selectedDate"
class="text-link-small"
:customSelectableDatesCallback="getAvailableDatesMethod"
validationRules="date-required"
@date-clicked="openInshopTimeSlotsModal" />
<time-slot-modal-question
ref="timeSlotModalQuestion"
@ -93,7 +94,7 @@ const getAvailableDates = async (
const timeSlotsData = {};
timeSlotsData.days = [];
let apiStartDate = startDateString;
let apiEndDate = apiEndDateLimit;
let apiEndDate = endDateString;
for (let i = 1; i <= apiCallsCount; i++) {
let storeActionConfig;
@ -105,6 +106,10 @@ const getAvailableDates = async (
if (i === apiCallsCount) {
apiEndDate = endDateString;
}
} else {
if (apiEndDate > apiEndDateLimit) {
apiEndDate = apiEndDateLimit;
}
}
if (appointmentType === AppointmentTypeStrings.MOBILE) {
@ -126,13 +131,13 @@ const getAvailableDates = async (
},
};
}
storeActionConfigs.push(storeActionConfig);
if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
}
// ASYNC METHOD
const timeSlotsResponsesData = {
days: [],
};
function compareDayStrings(a, b) {
if (a.date < b.date) return -1;
if (a.date > b.date) return 1;

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

@ -319,15 +319,19 @@ export default {
return `${hours}:${minutes} ${meridianNotation}`;
},
getDisplayTextForDurationLength(durationMinimum, durationMaximum) {
let displayTextForDurationLength;
if (durationMaximum >= 120) {
displayTextForDurationLength = `${durationMinimum / 60} - ${
durationMaximum / 60
} hours`;
} else {
displayTextForDurationLength = `${durationMinimum} - ${durationMaximum} minutes`;
}
return displayTextForDurationLength;
const isLongAppointment = durationMaximum >= 120;
const isDurationRange = durationMinimum !== durationMaximum;
const adjustedMinimum = isLongAppointment ? durationMinimum / 60 : durationMinimum;
const adjustedMaximum = isLongAppointment ? durationMaximum / 60 : durationMaximum;
const durationText = isDurationRange
? `${adjustedMinimum} - ${adjustedMaximum}`
: adjustedMinimum;
const unitText = isLongAppointment ? "hours" : "minutes";
return `${durationText} ${unitText}`;
},
getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
selectedTimeSlotId,

4
src/mixins/vehicle-questions-mixin.js
View file

@ -446,9 +446,7 @@ export default {
const payment = store.getters.payment;
if (store.getters.order.referralNumber?.length === 6) {
navigateToHeritageFunnel({ loadingModal: self.$refs.loadingModal });
} else if (payment.isInsurance && payment.insuranceCoverage.isVerified) {
if (payment.isInsurance && payment.insuranceCoverage.isVerified) {
navigateToHeritageFunnel({ loadingModal: self.$refs.loadingModal });
} else {
self.$router.navigateWithSaving(

1
src/ux-components/list-card/list-card.vue
View file

@ -96,6 +96,7 @@ export default {
outline: none;
display: flex;
position: relative;
justify-content: space-between;
p {
color: $gray-600;