From fa3ae5cca367155d239b458d88e885d8fc742cdb Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Thu, 10 Apr 2025 17:00:04 -0400 Subject: [PATCH 01/16] CASH-499 WIP calendar updates. --- .../date-picker-for-pricing-by-day.vue | 99 +++++++++---------- 1 file changed, 45 insertions(+), 54 deletions(-) diff --git a/src/experiment-components/date-picker-for-pricing-by-day.vue b/src/experiment-components/date-picker-for-pricing-by-day.vue index cad976cf7..5e50def6b 100644 --- a/src/experiment-components/date-picker-for-pricing-by-day.vue +++ b/src/experiment-components/date-picker-for-pricing-by-day.vue @@ -962,9 +962,7 @@ export default { &.selectable-day { label { - color: $blue; background-color: $blue-100; - border: 1px solid $blue; min-width: 2.5rem; width: 2.5rem; border-radius: 50%; @@ -972,12 +970,11 @@ export default { } &.unavailable-day { label { - color: $gray-500; - background-color: $gray-100; border: none; pointer-events: none; } } + //NEEDED? &.unavailable-day:not(&.sunday) { label { &::before { @@ -987,7 +984,6 @@ export default { left: -1rem; width: 1rem; height: 2.5rem; - background: $gray-100; } } } @@ -1094,11 +1090,10 @@ export default { } } } - + // pricing by day override styles &.pricing-by-day { - // pricing by day override styles .calendar-grid-container .grid-item { - margin: 0; + margin: 0 0 0.15rem 0; } .month-year { grid-area: 1 / 1 / 2 / 8; @@ -1109,9 +1104,8 @@ export default { .radio-wrapper { align-items: flex-start; width: 100%; - height: 3rem; - color: $gray-500; - background-color: $gray-100; + height: 2.5rem; + color: $black; input[type="radio"] { &:focus-visible + label { @@ -1122,42 +1116,35 @@ export default { &:checked:focus + label { box-shadow: none; background-color: $white; - color: $blue; + color: $black; } &:checked + label { background: $blue-100; border: 2px solid $blue; - border-radius: 4px; - color: $blue; + border-radius: .25rem; + color: $black; + span { + font-family: AvertaSemibold; + font-weight: 400; + } } } label { flex-direction: column; - height: 3rem; + height: 2.5rem; width: 100%; font-size: 0.75rem; line-height: 1.2; - justify-content: flex-start; + justify-content: center; padding: 0.25rem; - - span { - margin-top: 0.25rem; - } } &.selectable-day { - background-color: $white; label { - background-color: $white; - border: none; - min-width: 100%; - width: 100%; - height: -webkit-fill-available; - border-radius: 0; - cursor: pointer; - - span { - text-decoration: underline; - } + color: $black; + background-color: $blue-100; + min-width: 2.5rem; + width: 2.5rem; + border-radius: 0.25rem; } } &.current-day { @@ -1168,32 +1155,36 @@ export default { } } } - } + &.show-pricing-by-day { + .radio-wrapper { + &.selectable-day label span { + text-decoration: none; + color: $black; + font-weight: 400; + font-family: "AvertaSemibold"; - &.date-picker.show-pricing-by-day { - .radio-wrapper { - &.selectable-day label span { - text-decoration: none; - color: $gray-600; - font-weight: 400; - font-family: "AvertaSemibold"; - - &.price { - color: $green; + &.price { + font-family: "AvertaRegular"; + font-weight: 400; + } } - } - &.upch-day label span.price { - color: $gray-600; - font-weight: 400; - font-family: $font-family-sans-serif; - } - input[type="radio"] { - &:focus + label, - &:checked:focus + label { + &.upch-day label span.price { color: $gray-600; + font-weight: 400; + font-family: $font-family-sans-serif; } - &:checked + label { - color: $blue; + input[type="radio"] { + &:focus + label, + &:checked:focus + label { + color: $gray-600; + } + &:checked + label { + color: $blue; + span { + font-weight: 400; + font-family: "AvertaSemibold"; + } + } } } } From 3053e10db9b17219884ab07a9a191a9fdeb16721 Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Tue, 15 Apr 2025 15:17:41 -0400 Subject: [PATCH 02/16] CASH-499 refactor to use date-picker instead of experiment file. Delete experiment file. --- .../date-picker/date-picker.vue | 172 ++- .../date-picker-for-pricing-by-day.vue | 1212 ----------------- src/layouts/schedule/schedule.vue | 8 +- src/store/index.js | 10 +- 4 files changed, 162 insertions(+), 1240 deletions(-) delete mode 100644 src/experiment-components/date-picker-for-pricing-by-day.vue diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 71c09bbbf..c869dc02c 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -1,5 +1,7 @@ - Date: Tue, 15 Apr 2025 15:21:34 -0400 Subject: [PATCH 03/16] CASH-499 undo changes. --- src/store/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/store/index.js b/src/store/index.js index 5d604e5ea..2ee5e2ec0 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1856,11 +1856,11 @@ export const actions = { const shopRadiusInMiles = 100; - let url = `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${shopRadiusInMiles}/${accountNumber}/true/${carId}/false`; + let url = `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${shopRadiusInMiles}/${accountNumber}/true/${carId}`; - // if (windshieldPartWithRecal) { - // url += `/${windshieldPartWithRecal.partNumber}`; - // } + if (windshieldPartWithRecal) { + url += `/${windshieldPartWithRecal.partNumber}`; + } return globalMethods.callHttpClient({ method: endpoints.GetProviders.method, From 4918364282991e598226ba556fc3ee769140fff9 Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Tue, 15 Apr 2025 15:22:41 -0400 Subject: [PATCH 04/16] CASH-499 remove changes to store/index. --- src/store/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/index.js b/src/store/index.js index 2ee5e2ec0..97a31068e 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1474,7 +1474,7 @@ export const actions = { applicationName: applicationConfig.ANALYTICS_APPLICATION_NAME, category: category, action: action, - label: "x" + label, + label: label, value: value, shouldUseSessionId: shouldUseSessionId, experimentsForUser: experimentsForUser, From 35154ad3d1fde96426bcc903c876db8cfcf51609 Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Tue, 15 Apr 2025 16:06:50 -0400 Subject: [PATCH 05/16] Format code. --- .../date-picker/date-picker.vue | 2 +- src/layouts/schedule/schedule.vue | 15 +++++++-------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index c869dc02c..0d0ef066d 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -1121,7 +1121,7 @@ export default { &:checked + label { background: $blue-100; border: 2px solid $blue; - border-radius: .25rem; + border-radius: 0.25rem; color: $black; span { font-family: AvertaSemibold; diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index ab1af257d..b30fd88d8 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -298,14 +298,13 @@ export default { ); // While Pricing By Day Experiment is active, using the updated datePicker - const datePickerInitialDataPromise = - await datePicker.methods.loadInitialData({ - // setup config options for date-picker - selectableDatesSetting: "custom", - initialViewRowsToShow: 5, - customSelectableDatesCallback: getAvailableDates, - preSelectedDate: preSelectedDate, - }); + const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({ + // setup config options for date-picker + selectableDatesSetting: "custom", + initialViewRowsToShow: 5, + customSelectableDatesCallback: getAvailableDates, + preSelectedDate: preSelectedDate, + }); // Get pricingByDayUpcharge needed for Pricing By Day const pricingByDayUpchargePartPromise = showPricingByDay From 91577a4d400297ec34f453ad87fc9e5e05822f74 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Wed, 16 Apr 2025 10:22:02 -0400 Subject: [PATCH 06/16] CASH-501: bugfix re setting PBD on preselected date on Schedule --- src/layouts/schedule/schedule.vue | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 2fd06d312..ba4430e03 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -100,6 +100,9 @@ import { PREMIUM_FEE_PART_TYPE, PRICING_BY_DAY_PART_TYPE, } from "@/constants/schedule-constants"; +import { + DAYS_OF_WEEK, +} from "@/digital-components/date-picker/mixins/constants"; import { errorMessages } from "@/constants/error-messages"; import { required } from "@/helpers/validation-rules"; import store from "@/store"; @@ -269,24 +272,22 @@ export default { const priceString = getAmountDue(lineItemsToBePriced, false); // pass the IncludeTax param as false const priceStringIntegerRoundedDown = priceString?.split(".")[0]; // same method used as getDisplayPrice() in service-package-radio used on /quote const pricingByDayBasePrice = parseInt(priceStringIntegerRoundedDown); - const payment = store.getters.order.payment; - const isInsurance = payment?.isInsurance; - - // Check to see if includePricingByDayUpcharge should already be set (based on order lineItems) let includePricingByDayUpcharge = false; - if (supportingItemsFromStore) { - const pricingByDayUpchargeFeeIndex = supportingItemsFromStore?.findIndex( - (item) => item.partType == PRICING_BY_DAY_PART_TYPE - ); - if (pricingByDayUpchargeFeeIndex > -1 && !isInsurance) { - includePricingByDayUpcharge = true; - } - } - // Load page with date already selected? + // Check to see if date should be pre-selected let preSelectedDate = await store.getters.order.schedule.date; if (!preSelectedDate || preSelectedDate.startTime === null) { preSelectedDate = null; + } else { + // Check to see if pre-selected date should have pricing by day upcharge + if (showPricingByDay) { + // is this preSelectedDate a premium day? + const dayIndex = convertDateStringToDate(preSelectedDate).getDay(); + const dayObject = DAYS_OF_WEEK[dayIndex]; + if (dayObject.isPricingByDayUpchargeDay) { + includePricingByDayUpcharge = true; + } + } } // Set up promises @@ -767,4 +768,4 @@ export default { margin-bottom: 0.25rem; } } - + \ No newline at end of file From 0c4a6606fd0ead82d4f07c47126bc4c72a9b1b7c Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Wed, 16 Apr 2025 10:24:02 -0400 Subject: [PATCH 07/16] CASH-501: prettier changes --- src/layouts/schedule/schedule.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index ba4430e03..cd3e09806 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -100,9 +100,7 @@ import { PREMIUM_FEE_PART_TYPE, PRICING_BY_DAY_PART_TYPE, } from "@/constants/schedule-constants"; -import { - DAYS_OF_WEEK, -} from "@/digital-components/date-picker/mixins/constants"; +import { DAYS_OF_WEEK } from "@/digital-components/date-picker/mixins/constants"; import { errorMessages } from "@/constants/error-messages"; import { required } from "@/helpers/validation-rules"; import store from "@/store"; @@ -768,4 +766,4 @@ export default { margin-bottom: 0.25rem; } } - \ No newline at end of file + From 43b53c9be898eef958199edd09a2da5a1ef2a97d Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Mon, 21 Apr 2025 22:59:36 -0400 Subject: [PATCH 08/16] CASH-464: working without modal and validation works too --- .../date-picker/date-picker.vue | 168 +++++++++++++++++- src/layouts/schedule/schedule.vue | 143 +++++++++++---- 2 files changed, 276 insertions(+), 35 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 0d0ef066d..235d32b26 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -4,6 +4,12 @@ :class="`${calendarViewDirection} ${isPricingByDayClass} ${showPricingByDayClass}`">
Select a day and time +
+
componentId {{ componentId }}
+
meta {{ meta }}
+
errors {{ errors }}
+
errorMessage {{ errorMessage }}
+
View more dates + +
+
selectedDate: {{ selectedDate }}
+
selectedTimeSlotInfo: {{ selectedTimeSlotInfo }}
+ +
+ +
@@ -1115,7 +1271,7 @@ export default { &:focus + label, &:checked:focus + label { box-shadow: none; - background-color: $white; + background-color: $blue-100; color: $black; } &:checked + label { @@ -1209,4 +1365,12 @@ export default { max-width: 414px; text-align: left; } + +.new-times { + min-height: 1rem; + padding: .2rem; + margin: 1rem 0; + background: lightgreen; + font-size: .6rem; +} diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index c3081d0fe..f061e39a0 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -1,6 +1,14 @@