Merge branch 'develop' into feature/CASH-273

src/constants/experiments.js

@@ -19,6 +19,7 @@ const experimentSettings = {
     INSURANCE_TAB_TO_DISPLAY_THRESHOLD_EXTERNAL: "NextGen_ExternalInsuranceTabDisplayThreshold",
     DISPLAY_MSR: "DisplayMSR",
     PRICING_BY_DAY: "DisplayPricingByDay",
+    FOSTER_LOVE: "DisplayFosterLove",
 };
 
 const experimentTriggers = {

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

@@ -99,8 +99,16 @@
 // Supporting files
 import loader from "@/ux-components/loader/loader";
 import store from "@/store";
-import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from "@/digital-components/date-picker/mixins/constants";
+import {
-import { selectableDaysOptions, requiredParameter, forceTwoDigitString } from "@/digital-components/date-picker/mixins/helpers";
+    TIMINGFUNC_MAP,
+    BUFFER_OFFSET,
+    MONTHS_OF_YEAR,
+} from "@/digital-components/date-picker/mixins/constants";
+import {
+    selectableDaysOptions,
+    requiredParameter,
+    forceTwoDigitString,
+} from "@/digital-components/date-picker/mixins/helpers";
 import {
     convertDateToDateString,
     convertDateStringToDate,
@@ -111,7 +119,7 @@ import { deepClone } from "@/helpers/object-helper";
 import { v4 as uuidv4 } from "uuid";
 
 export default {
-    name: "datePicker2",
+    name: "datePickerForPricingByDay",
     data() {
         return {
             isLoading: true,

src/experiment-components/donation-block.vue

@@ -20,7 +20,9 @@
                         target="_blank" />
                 </div>
             </div>
-            <div class="px-4" :class="[showDonationSuccess ? 'hide-donation-block' : 'show-donation-block']">
+            <div
+                class="px-4"
+                :class="[showDonationSuccess ? 'hide-donation-block' : 'show-donation-block']">
                 <div class="row">
                     <div class="col-12">
                         <div class="donation-slider my-4">
@@ -31,9 +33,17 @@
                                 :value="donationValues[0]"
                                 checked />
                             <label for="one" class="label">$1</label>
-                            <input name="amount" id="three" type="radio" :value="donationValues[1]" />
+                            <input
+                                name="amount"
+                                id="three"
+                                type="radio"
+                                :value="donationValues[1]" />
                             <label for="three" class="label">$3</label>
-                            <input name="amount" id="five" type="radio" :value="donationValues[2]" />
+                            <input
+                                name="amount"
+                                id="five"
+                                type="radio"
+                                :value="donationValues[2]" />
                             <label for="five" class="label">$5</label>
                             <div class="indicator-bar"></div>
                         </div>

src/experiment-components/service-package-radio.vue

@@ -201,19 +201,44 @@ export default {
                 If this experiment wins, move this to package-label ::before/::after below
                 */
                 &:before {
-                    top: 15px;
+                    top: 0.9375rem;
                 }
                 &:after {
-                    top: 30px;
+                    top: 1.875rem;
+                }
+                @include media-breakpoint-up(lg) {
+                    &:before {
+                        top: .5rem;
+                    }
+                    &:after {
+                        top: 1.4375rem;
+                    }
+                    p {
+                        span {
+                            align-self: center;
+                        }
+                    }
                 }
             }
 
             + .package-label.pricing-by-day-pkg-lbl-ins {
                 &:before {
-                    top: 5px;
+                    top: .3125rem;
                 }
                 &:after {
-                    top: 20px;
+                    top: 1.25rem;
+                }
+            }
+
+            + .package-label.pricing-by-day-pkg-lbl {
+                &:before {
+                    top: 0.9375rem;
+                    @include media-breakpoint-up(lg) {
+                        top: .3125rem;
+                    }
+                }
+                &:after {
+                    top: 1.25rem;
                 }
             }
 
@@ -233,8 +258,7 @@ export default {
                 min-height: 52px;
                 max-height: 126px;
                 @include media-breakpoint-up(md) {
-                    max-height: 500px;
+                    max-height: 500px;                    
-                    padding-bottom: 3rem;
                 }
                 transition: max-height 0.25s ease-in;
 
@@ -351,7 +375,8 @@ export default {
                     &.pricing-info-pricing-by-day {
                         text-align: end;
                         color: $green;
-                        font-size: 0.875rem;
+                        font-size: 1rem;
+                        line-height: 1;
                         span.strikethrough-price {
                             text-decoration: line-through;
                             font-size: 0.75rem;
@@ -377,6 +402,7 @@ export default {
                     justify-content: flex-end;
                     align-items: center;
                     align-self: flex-start;
+                    line-height: 1;
                     div.strikethrough-discount-price {
                         display: inline;
                         text-decoration: line-through;
@@ -393,8 +419,12 @@ export default {
                     div.discount-price {
                         color: $green;
                         display: inline;
+                        font-size: 1rem;
                     }
                 }
+                .caption {
+                    font-size: 0.625rem;
+                }
             }
             ul {
                 margin: 1rem 0 0 -5px;

src/layouts/confirmation/confirmation.vue

@@ -64,7 +64,7 @@
                                 :isItac="isItac"
                                 :isNoComp="isNoComp" />
 
-                            <div class="mt-3">
+                            <div class="mt-3" v-if="displayFosterLove">
                                 <donationBlock
                                     cmsWidgetName="DonationWidget"
                                     v-model="donationAmount"
@@ -245,6 +245,12 @@ export default {
         };
     },
     computed: {
+        DisplayFosterLove() {
+            return experimentMixin.methods.hasSettingEqualTo(
+                experimentSettings.FOSTER_LOVE,
+                "true"
+            );
+        },
         isRecalibrationOnOrder() {
             return containsRecalParts(this?.lineItems);
         },

src/layouts/schedule/schedule.vue

@@ -18,8 +18,8 @@
                             marginTopSizeOverride="1" />
                     </template>
                     <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
-                    <datePicker
+                    <datePickerForPricingByDay
-                        v-if="!isPricingByDayExperiment"
+                        v-if="isPricingByDayExperiment"
                         customComponentId="dateQuestion"
                         selectableDatesSetting="custom"
                         ref="datePicker"
@@ -28,8 +28,8 @@
                         :customSelectableDatesCallback="getAvailableDatesMethod"
                         validationRules="date-required"
                         @date-clicked="openInshopTimeSlotsModal" />
-                    <datePicker2
+                    <datePicker
-                        v-if="isPricingByDayExperiment"
+                        v-else
                         customComponentId="dateQuestion"
                         selectableDatesSetting="custom"
                         ref="datePicker"
@@ -81,7 +81,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form, defineRule } from "vee-validate";
 import datePicker from "@/digital-components/date-picker/date-picker";
-import datePicker2 from "@/experiment-components/date-picker-2";
+import datePickerForPricingByDay from "@/experiment-components/date-picker-for-pricing-by-day";
 import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
 import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
 import textBlock from "@/digital-components/text-block/text-block";
@@ -227,13 +227,15 @@ export default {
             preSelectedDate = null;
         }
 
-        const datePickerInitialDataPromise = await datePicker2.methods.loadInitialData({
+        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
             // setup config options for date-picker
             selectableDatesSetting: "custom",
             initialViewRowsToShow: 5,
             customSelectableDatesCallback: getAvailableDates,
             preSelectedDate: preSelectedDate,
         });
+        // TODO - ONCE A DATEPICKER VERSION IS FINALIZED,
+        //     MAKE SURE THE ABOVE METHOD loadInitialData POINTS TO THE RIGHT FILE
 
         const premiumFeePromise = baseMixin.methods.dispatchStoreActionWithLogging(
             storeActions.GET_MOBILE_PREMIUM_FEE,
@@ -559,7 +561,7 @@ export default {
         Form,
         loadingModal,
         datePicker,
-        datePicker2,
+        datePickerForPricingByDay,
         locationAlerts,
         timeSlotModalQuestion,
         textBlock,