Merge branch 'develop' into feature/CSR-1390-style

src/digital-components/checkbox-question/checkbox-question.vue

@@ -1,16 +1,18 @@
 <template>
     <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
-    <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
+    <div
-        <input
+        class="form-check ui-checkbox d-flex align-items-center"
-            v-model="value"
+        :class="[hasError ? 'has-error' : '']">
-            class="form-check-input"
-            type="checkbox"
-            aria-checked="false"
-            :name="checkboxName"
-            :id="buttonID"
-            :tabindex="tabIndex"
-            :aria-required="isRequired" />
         <label class="d-flex align-items-start" :for="buttonID">
+            <input
+                v-model="value"
+                class="form-check-input me-2"
+                type="checkbox"
+                aria-checked="false"
+                :name="checkboxName"
+                :id="buttonID"
+                :tabindex="tabIndex"
+                :aria-required="isRequired" />
             <p v-html="checkboxLabelCopy" class="m-0"></p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
         </label>

src/digital-components/textbox-question/textbox-question.vue

@@ -67,7 +67,7 @@
         </div>
         <div v-show="errorMessage" class="row form-test-error">
             <span
-                class="d-inline-flex small my-1"
+                class="d-inline-flex small mt-1"
                 aria-atomic="true"
                 aria-live="polite"
                 :class="[centerErrorMessage ? 'center-error-message' : '']"

src/fmg-components/vehicle-banner/vehicle-banner.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="vehicle_banner mb-3 text-center">
+    <div class="vehicle_banner mb-4 text-center">
         <img class="vehicle-image img-fluid" :src="vehicleImageToDisplay" alt="" />
     </div>
 </template>

src/layouts/customer-details/customer-details.vue

@@ -8,7 +8,7 @@
             </div>
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" />
                     <textboxQuestion
                         class="mb-4"
                         cmsWidgetName="FirstNameWidget"

src/layouts/review/review.vue

@@ -30,7 +30,7 @@
                         isPrimary
                         :buttonText="forwardButtonText"
                         loaderColor="white"
-                        class="mb-2"
+                        class="mb-2 w-100"
                         @click-event="forwardButtonAction" />
 
                     <div>

src/layouts/schedule/location-alerts/location-alerts.vue

@@ -3,7 +3,7 @@
         v-for="alert in prefixedAlertReasons"
         :key="alert.cmsWidgetName"
         :ref="alert.cmsWidgetName"
-        class="mt-2 mb-3"
+        class="mt-5 mb-4"
         :cmsWidgetName="alert.cmsWidgetName"
         alertClass="alert-warning" />
 </template>

src/layouts/schedule/schedule.vue

@@ -439,16 +439,16 @@ export default {
                 this.appointmentType === AppointmentTypeStrings.MOBILE &&
                 this.selectedTimeSlotInfo?.isPremiumAppointment
             ) {
-                const earlyBirdIndex = supportingItems.findIndex(
+                const premiumFeeIndex = supportingItems.findIndex(
                     (item) => item.partType == PREMIUM_FEE_PART_TYPE
                 );
 
-                if (earlyBirdIndex >= 0) {
+                if (premiumFeeIndex >= 0) {
-                    supportingItems[earlyBirdIndex].laborAmount =
+                    supportingItems[premiumFeeIndex].laborAmount =
                         this.mobilePremiumAppointmentFee.laborAmount;
-                    supportingItems[earlyBirdIndex].selingPrice =
+                    supportingItems[premiumFeeIndex].sellingPrice =
-                        this.mobilePremiumAppointmentFee.selingPrice;
+                        this.mobilePremiumAppointmentFee.sellingPrice;
-                    supportingItems[earlyBirdIndex].kitPrice =
+                    supportingItems[premiumFeeIndex].kitPrice =
                         this.mobilePremiumAppointmentFee.kitPrice;
                 } else {
                     supportingItems.push(this.mobilePremiumAppointmentFee);
@@ -461,12 +461,12 @@ export default {
                 );
             } else {
                 // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
-                const removeEarlyBirdIndex = supportingItems.findIndex(
+                const removePremiumFeeIndex = supportingItems.findIndex(
                     (item) => item.partType == PREMIUM_FEE_PART_TYPE
                 );
 
-                if (removeEarlyBirdIndex >= 0) {
+                if (removePremiumFeeIndex >= 0) {
-                    supportingItems.splice(removeEarlyBirdIndex, 1);
+                    supportingItems.splice(removePremiumFeeIndex, 1);
                     this.dispatchStoreAction(
                         this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
                         supportingItems,

src/layouts/service-location/service-location.vue

@@ -441,7 +441,7 @@ export default {
                 // If it already exists, update the price with latest data
                 if (mobileFeeIndex >= 0) {
                     supportingItems[mobileFeeIndex].laborAmount = this.mobileFeePart.laborAmount;
-                    supportingItems[mobileFeeIndex].selingPrice = this.mobileFeePart.selingPrice;
+                    supportingItems[mobileFeeIndex].sellingPrice = this.mobileFeePart.sellingPrice;
                     supportingItems[mobileFeeIndex].kitPrice = this.mobileFeePart.kitPrice;
                 } else {
                     supportingItems.push(this.mobileFeePart);