Merge pull request #2368 from Safelite/feature/CASH-152_CASH-405

Cash 152

src/digital-components/date-picker/mixins/constants.js

@@ -26,43 +26,36 @@ const DAYS_OF_WEEK = [
     {
         label: "Sunday",
         cssClass: "sunday",
-        index: 0,
-        isPricingByDayUpchargeDay: false,
+        isPricingByDayUpchargeDay: true,
     },
     {
         label: "Monday",
         cssClass: "monday",
-        index: 1,
         isPricingByDayUpchargeDay: true,
     },
     {
         label: "Tuesday",
         cssClass: "tuesday",
-        index: 2,
         isPricingByDayUpchargeDay: false,
     },
     {
         label: "Wednesday",
         cssClass: "wednesday",
-        index: 3,
         isPricingByDayUpchargeDay: false,
     },
     {
         label: "Thursday",
         cssClass: "thursday",
-        index: 4,
         isPricingByDayUpchargeDay: false,
     },
     {
         label: "Friday",
         cssClass: "friday",
-        index: 5,
         isPricingByDayUpchargeDay: true,
     },
     {
         label: "Saturday",
         cssClass: "saturday",
-        index: 6,
         isPricingByDayUpchargeDay: true,
     },
 ];

src/experiment-components/date-picker-for-pricing-by-day.vue

@@ -1,5 +1,7 @@
 <template>
-    <div class="date-picker text-center" :class="`${calendarViewDirection} ${isPricingByDayClass}`">
+    <div
+        class="date-picker text-center"
+        :class="`${calendarViewDirection} ${isPricingByDayClass} ${showPricingByDayClass}`">
         <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
             <legend class="sr-only">Select a day and time</legend>
             <div
@@ -60,6 +62,7 @@
                         date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
                         date.dayClasses,
                         date.isSelectable ? 'selectable-day' : '',
+                        date.isPricingByDayUpchargeDay ? 'upch-day' : '',
                     ]">
                     <input
                         :disabled="!date.isSelectable"
@@ -220,6 +223,9 @@ export default {
         isPricingByDayClass() {
             return this.isPricingByDayExperiment ? "pricing-by-day" : "";
         },
+        showPricingByDayClass() {
+            return this.showPricingByDay ? "show-pricing-by-day" : "";
+        },
         selectedDate: {
             get() {
                 return this.modelValue;
@@ -1143,8 +1149,8 @@ export default {
                 label {
                     background-color: $white;
                     border: none;
-                    min-width: initial;
-                    width: initial;
+                    min-width: 100%;
+                    width: 100%;
                     height: -webkit-fill-available;
                     border-radius: 0;
                     cursor: pointer;
@@ -1163,6 +1169,32 @@ export default {
             }
         }
     }
+
+    &.date-picker.show-pricing-by-day {
+        .radio-wrapper {
+            &.selectable-day label span {
+                text-decoration: none;
+                color: $gray-600;
+                font-weight: 600;
+                &.price {
+                    color: $green;
+                }
+            }
+            &.upch-day label span.price {
+                color: $gray-600;
+                font-weight: 400;
+            }
+            input[type="radio"] {
+                &:focus + label,
+                &:checked:focus + label {
+                    color: $gray-600;
+                }
+                &:checked + label {
+                    color: $blue;
+                }
+            }
+        }
+    }
 }
 
 .btn-link {