Merge branch 'develop' into feature/CSR-2130

public/css/README.md

@@ -6,7 +6,7 @@ This public/css folder uses a standalone .scss > .css setup.
 From a Terminal window, run the Sass Watch command from the public folder only:
 
 ```bash
-sass --no-source-map --watch scss:css
+sass --watch scss:css
 ```
 This will compile and output .css files (into the public/css folder) that can be consumed by the Payment page.
 

src/constants/error-messages.js

@@ -24,6 +24,7 @@ const errorMessages = {
     VIN_FORMAT:
         "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
     OPTION_REQUIRED: "Please select an option",
+    RECAL_ACK_REQUIRED: "Please acknowledge recalibration alert",
     VEHICLE_REQUIRED: "Please select a vehicle",
     MOBILE_LOCATION_REQUIRED: "Please enter your service address",
     DATE_REQUIRED: "Please select a date",

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

@@ -213,7 +213,7 @@ export default {
                     classes = "ui-checkbox d-flex";
                     break;
                 case "servicePackageRadio":
-                    classes = "package-main";
+                    classes = "package-main d-md-flex justify-content-center";
                     break;
             }
             return classes;
@@ -226,7 +226,7 @@ export default {
             if (this.buttonTypeString == "radio") {
                 classes += " radio-button-container";
             } else if (this.buttonTypeString == "servicePackageRadio") {
-                classes = "package-wrapper";
+                classes = "package-wrapper col-md-4";
             }
 
             if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {

src/digital-components/checkbox-question/checkbox-question.spec.js

@@ -29,11 +29,25 @@ describe("checkbox-question.vue", () => {
         expect(input.attributes().name).toEqual("Checkbox");
     });
 
-    it("Should return checkbox id", async () => {
+    it("Should return default id when no custom id is specified", async () => {
+        // Act
+        const wrapper = shallowMount(checkboxQuestion, {
+            propsData: {},
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        const input = wrapper.find("input");
+
+        // Expect
+        expect(input.attributes().id).not.toBeFalsy();
+    });
+
+    it("Should return custom id when specified", async () => {
         // Act
         const wrapper = shallowMount(checkboxQuestion, {
             propsData: {
-                buttonID: "Checkbox ID",
+                customInputId: "Checkbox ID",
             },
             mixins: [mockMixin],
         });

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

@@ -10,32 +10,67 @@
                 type="checkbox"
                 aria-checked="false"
                 :name="checkboxName"
-                :id="buttonID"
+                :validationRules="validationRules"
+                :id="inputId"
                 :tabindex="tabIndex"
                 :aria-required="isRequired" />
-            <p v-html="checkboxLabelCopy" class="m-0"></p>
+            <textBlock
+                class="m-0"
+                :customText="checkboxLabelCopy"
+                marginTopSizeOverride="0"
+                typeStyle="small"
+                @text-link-clicked="bubbleTextBlockClick" />
             <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
         </label>
     </div>
 </template>
 
 <script>
+import { useField, validate } from "vee-validate";
+import { v4 as uuidv4 } from "uuid";
+import textBlock from "@/digital-components/text-block/text-block";
+
 export default {
     name: "checkboxQuestion",
     computed: {
         checkboxLabelCopy() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
         },
-        value: {
+    },
-            get: function () {
+    setup(props) {
-                return this.modelValue;
+        const uuid = uuidv4();
-            },
+        const inputId = !props.customInputId ? `input-${uuid}` : props.customInputId;
-            set: function (newValue) {
+
-                this.$emit("update:modelValue", newValue);
+        const fieldOptions = {
-            },
+            initialValue: props.modelValue,
-        },
+        };
+
+        const {
+            value,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            meta,
+            validate,
+            errors,
+            resetField,
+        } = useField(inputId, props.validationRules, fieldOptions);
+
+        return {
+            value,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+            resetField,
+            inputId,
+        };
     },
     props: {
+        customInputId: String,
+        validationRules: String,
         cmsWidgetName: String,
         checkboxName: String,
         buttonID: String,
@@ -48,6 +83,24 @@ export default {
             default: false,
         },
     },
+    methods: {
+        bubbleTextBlockClick(event) {
+            this.$emit("textLinkClicked", event);
+        },
+    },
+    watch: {
+        modelValue(newValue, oldValue) {
+            if (this.value !== newValue) {
+                this.value = newValue;
+            }
+        },
+        value(newValue, oldValue) {
+            this.$emit("update:modelValue", newValue);
+        },
+    },
+    components: {
+        textBlock,
+    },
 };
 </script>
 
@@ -56,6 +109,7 @@ export default {
     .form-check-input {
         border: 1px solid $gray-500;
         border-radius: 2px;
+        min-width: 1rem; // Prevent squish
         &:checked {
             background-size: 125%;
             border: 1px solid $blue;

src/fmg-components/cart/cart.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="cart">
         <div class="px-0">
+            <!-- set class to 'expaned' on line 7 so cart is open on page load. This may be temporary -->
             <div
                 class="row vin-toggle flex align-items-center pt-4"
-                :class="[isExpanded ? 'expanded' : '']"
+                :class="[isExpanded ? '' : 'expanded']"
                 @click="toggleIsExpanded()">
                 <a
                     aria-label="expand cart"
@@ -666,13 +667,27 @@ export default {
         recycleFeeCartItemName() {
             return this.getCmsContent("RecycleFeeTextWidget", "Text");
         },
+        requiresRecycleFeeCartItem() {
+            return !this.isRepair;
+        },
         recycleFeeCartItem() {
             let cartItem = null;
 
-            const recycleFeeLineItem = this.supportingItems.find(
+            let recycleFeeLineItem = this.supportingItems.find(
                 (supportingItem) => supportingItem.partType == partTypeStrings.REPLACE_FEE
             );
 
+            if (!recycleFeeLineItem && this.requiresRecycleFeeCartItem) {
+                recycleFeeLineItem = {
+                    partNumber: partTypeStrings.RECYCLE_FEE,
+                    partType: partTypeStrings.REPLACE_FEE,
+                    laborAmount: 0,
+                    kitPrice: 0,
+                    sellingPrice: 0,
+                    salesTax: 0,
+                };
+            }
+
             if (recycleFeeLineItem) {
                 cartItem = {
                     name: this.recycleFeeCartItemName,

src/layouts/payment-method/payment-method.spec.js

@@ -47,10 +47,29 @@ describe("payment-method.vue", () => {
 function setupMocks() {
     store.getters = {
         damage: {},
-        lineItems: [],
+        lineItems: {
+            glassParts: [],
+            supportingItems: [],
+            vaps: [],
+            promos: [],
+        },
         order: {
             payment: {
                 isPia: false,
+                insuranceCoverage: {
+                    isVerified: true,
+                },
+            },
+            lineItems: {
+                glassParts: [],
+                supportingItems: [],
+                vaps: [],
+                promos: [],
+            },
+            policy: {
+                currentDeductible: 123,
+                isNoComp: false,
+                isItac: false,
             },
         },
         policy: {

src/layouts/payment-method/payment-method.vue

@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal notFullScreen ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid payment-method">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@@ -22,6 +22,7 @@
                     <hr class="my-0" />
 
                     <cart
+                        ref="cart"
                         :damage="damageInfo"
                         :availableVaps="availableVaps"
                         :allowItemRemoval="true"
@@ -45,13 +46,31 @@
                             v-bind:isDismissible="false" />
                     </div>
 
+                    <div v-if="hasRecal && !isInsurance" class="questions-about-service my-5">
+                        <textBlock
+                            cmsWidgetName="QuestionsAboutYourServiceWidget"
+                            justifyText="left"
+                            class="service-questions" />
+                        <textBlock cmsWidgetName="CallOrTextWidget" justifyText="left" />
+                        <hr class="my-5" />
+                        <div class="d-flex flex-row checkbox-group">
+                            <checkboxQuestion
+                                cmsWidgetName="RecalConfirmWidget"
+                                class="mb-5"
+                                isRequired="true"
+                                v-model="isRecalAckOptIn"
+                                validationRules="recal-ack-required"
+                                @text-link-clicked="openModal('RecalModal')" />
+                        </div>
+                    </div>
+
                     <paymentMethodQuestion
-                        v-if="!isPiaDisabled"
+                        v-if="isPiaEnabled && totalAmountDue > 0"
                         v-model="paymentMethodInternalModel"
-                        validationRules="option-required" />
+                        validationRules="payment-method-required" />
 
                     <alert
-                        v-if="!isPiaDisabled"
+                        v-if="!isPiaEnabled && totalAmountDue > 0"
                         :isDismissible="false"
                         alertClass="alert-info"
                         cmsWidgetName="NoPiaDisclaimerWidget"
@@ -65,6 +84,11 @@
                         buttonSize
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
+
+                    <contentGroupModal
+                        ref="RecalModal"
+                        cmsWidgetName="RecalModal"
+                        class="recal-modal" />
                 </div>
             </div>
         </div>
@@ -82,13 +106,20 @@ import cart from "@/fmg-components/cart/cart";
 import reviewDropdown from "@/layouts/payment-method/review-dropdown/review-dropdown";
 import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
 import alert from "@/ux-components/alert/alert";
+import textBlock from "@/digital-components/text-block/text-block";
+import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
+import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
 
 // Supporting Items
 import baseMixin from "@/mixins/base-mixin.js";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import {
+    fetchCmsContentForPage,
+    doesCopyContainRouterLink,
+    getRouterLinkRouteFromCopy,
+} from "@/helpers/cms-content-helper";
 import { paymentMethods } from "@/constants/payment-method-constants";
 import { experimentSettings } from "@/constants/experiments";
 import {
@@ -115,10 +146,14 @@ import { partTypeStrings } from "@/constants/part-type-strings";
 import { mapTaxedLineItemsToStoreFormat } from "../../store";
 import { coverageStatus } from "@/constants/insurance";
 
-defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+defineRule("payment-method-required", required(errorMessages.OPTION_REQUIRED));
+defineRule("recal-ack-required", required(errorMessages.RECAL_ACK_REQUIRED));
 
 export default {
     name: "paymentMethod",
+    props: {
+        recyclingModalCmsWidgetName: String,
+    },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@@ -309,9 +344,15 @@ export default {
             paymentMethodInternalModel: this.getPaymentMethodFromStore(),
             inactivePromos: this.getInactivePromosFromStore(),
             isAppleDevice: false,
+            isRecalAckOptIn: false,
         };
     },
     methods: {
+        doesCopyContainRouterLink,
+        getRouterLinkRouteFromCopy,
+        navigateWithScenario(scenarioName) {
+            this.$router.navigateWithoutSaving(scenarioName, this.$route);
+        },
         arePagePrerequisitesValid() {
             // Service Location
             const serviceLocation = store.getters.order.serviceLocation;
@@ -451,14 +492,12 @@ export default {
                 this.paymentMethod,
                 false
             );
-
             // save lineitems as they now have salestax added
             await this.dispatchStoreAction(
                 storeActions.SAVE_GLASS_PARTS_SUPPRESSING_STATE_RESETTING,
                 this.lineItems.glassParts,
                 false
             );
-
             await this.dispatchStoreAction(
                 storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
                 this.lineItems.supportingItems,
@@ -473,7 +512,6 @@ export default {
                 },
                 false
             );
-
             if (this.paymentMethod == paymentMethods.LATER) {
                 // this creates the final work order
                 await submitWorkOrder({ pageNameToLog: "payment-method", submitAfterSave: true });
@@ -521,8 +559,20 @@ export default {
         hasSubmittedOrder() {
             return this.$store.getters.hasSubmittedOrder;
         },
+        openModal(modalName) {
+            this.$refs[modalName].openModal();
+        },
     },
     computed: {
+        hasRecal() {
+            const recalLineItem = this.$store.getters.order.lineItems.supportingItems.find(
+                (lineItem) => lineItem.partType == partTypeStrings.RECALIBRATION
+            );
+            if (recalLineItem) {
+                return true;
+            }
+            return false;
+        },
         damageInfo() {
             return this.$store.getters.damage;
         },
@@ -584,21 +634,21 @@ export default {
                     return null;
             }
         },
-        isPiaDisabled() {
+        totalAmountDue() {
+            return baseMixin.methods.getAmountDue(this.lineItems);
+        },
+        isPiaEnabled() {
             const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
             const piaInsurance = this.getSettingValue(experimentSettings.PIA_INSURANCE);
 
-            var isEnabled = false;
             if (this.isInsurance) {
-                isEnabled = piaInsurance === "true" && this.currentDeductible > 0;
+                return piaInsurance === "true" && this.currentDeductible > 0;
             } else {
-                isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required";
+                return piaExperience === "PIA Optional" || piaExperience === "PIA Required";
             }
-
-            return !isEnabled;
         },
         paymentMethod() {
-            if (this.isPiaDisabled) {
+            if (!this.isPiaEnabled) {
                 return paymentMethods.LATER;
             }
 
@@ -665,11 +715,27 @@ export default {
         alert,
         paymentMethodQuestion,
         reviewDropdown,
+        textBlock,
+        checkboxQuestion,
+        contentGroupModal,
     },
 };
 </script>
 
+<style></style>
+
 <style lang="scss" scoped>
+.checkbox-group {
+    align-items: start;
+    > * {
+        margin-top: 0;
+    }
+}
+.questions-about-service {
+    .service-questions {
+        font-weight: $font-weight-bold;
+    }
+}
 .cart {
     margin-bottom: 0;
 }
@@ -677,4 +743,22 @@ export default {
     color: $gray-550;
     margin: 0;
 }
+.payment-method {
+    .recal-modal {
+        :deep(.modal-body) {
+            display: flex;
+            flex-direction: column;
+            h5 {
+                text-align: center;
+                order: 1;
+            }
+            p {
+                order: 3;
+            }
+            img {
+                order: 2;
+            }
+        }
+    }
+}
 </style>

src/layouts/quote/quote.vue

@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles quote">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@@ -20,7 +20,10 @@
                         cmsWidgetName="CashOrInsuranceQuestionWidget"
                         v-model="isInsuranceSelected"
                         groupName="CashOrInsuranceQuestion" />
-
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-lg-4">
                     <servicePackageQuestion
                         ref="servicePackage"
                         cashCmsWidgetName="CashServicePackageQuestionWidget"
@@ -34,7 +37,10 @@
                         v-on="{ 'buttonEvent.openModal': openModalAction }"
                         validationRules="option-required"
                         isRequired />
-
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <afterpayModalBanner
                         v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
                         cmsWidgetName="AfterpayModalWidget"
@@ -43,7 +49,6 @@
                         :lineItems="lineItems" />
 
                     <recalDisclaimer
-                        class="my-5"
                         cmsWidgetName="RecalDisclaimerWidget"
                         v-if="isRecalibrationOnOrder"
                         v-on="{ textLinkClicked: openModalAction }"

src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue

@@ -12,7 +12,9 @@
             ]"
             for="testradio">
             <div class="package-specs">
-                <div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
+                <div
+                    v-if="this.additionalButtonData.servicePackageDiscount"
+                    class="row justify-content-between">
                     <div class="col md-6">
                         <p class="m-0">
                             <span v-html="this.buttonLabel"></span>
@@ -136,24 +138,20 @@ export default {
 </script>
 
 <style lang="scss">
-.discount-text {
-    line-height: 36px;
-    display: flex;
-    border-top-right-radius: 0.5rem;
-    border-top-left-radius: 0.5rem;
-    background-color: #469d2a;
-    align-items: center;
-    justify-content: center;
-    padding: 5px;
-    width: 100%;
-    color: white;
-}
 .package-main {
     .package-wrapper {
-        margin: 0.5rem 0;
+        margin: 1rem 0;
+        @include media-breakpoint-up(md) {
+            margin: 0.5rem 0;
+        }
+        position: relative;
+        @include media-breakpoint-up(md) {
+            margin: 1rem 0.5rem;
+        }
 
         label {
             display: block;
+            height: 100%;
         }
 
         input[type="radio"] {
@@ -174,13 +172,21 @@ export default {
                 border-radius: 0.5rem;
                 overflow: hidden;
                 min-height: 60px;
+                @include media-breakpoint-up(md) {
+                    max-height: 500px;
+                    height: 100%;
+                }
 
                 &.has-subheader {
                     min-height: 80px;
                 }
                 &.has-text {
                     border-radius: 0 0 0.5rem 0.5rem;
-                    border: 1px solid #469d2a !important;
+                    border: 1px solid #469d2a;
+                    @include media-breakpoint-up(md) {
+                        border-radius: 0.5rem;
+                        padding-top: 3.75rem;
+                    }
                 }
 
                 &:before {
@@ -265,6 +271,9 @@ export default {
             width: 100%;
             max-height: 0;
             transition: all 0.5s ease;
+            @include media-breakpoint-up(md) {
+                max-height: 500px;
+            }
 
             p {
                 font-weight: 500;
@@ -337,6 +346,34 @@ export default {
 
             .hide-when-closed {
                 display: none;
+                @include media-breakpoint-up(md) {
+                    display: flex;
+                    flex-direction: column;
+                }
+            }
+        }
+        .discount-text {
+            line-height: 36px;
+            display: flex;
+            border-top-right-radius: 0.5rem;
+            border-top-left-radius: 0.5rem;
+            background-color: #469d2a;
+            align-items: center;
+            justify-content: center;
+            padding: 5px;
+            width: 100%;
+            color: white;
+            height: 2.875rem;
+            @include media-breakpoint-up(md) {
+                position: absolute;
+                z-index: 1;
+                ~ label {
+                    .package-label {
+                        &:after {
+                            top: 68px;
+                        }
+                    }
+                }
             }
         }
     }

src/styles/common-styles.scss

@@ -37,6 +37,19 @@ body {
                 max-width: 100%;
             }
         }
+        // Quote page desktop
+        &.quote {
+            .col-md-6,
+            .col-lg-4 {
+                max-width: 1200px;
+            }
+            .col-md-6.col-lg-4 {
+                @include media-breakpoint-up(lg) {
+                    width: 100%;
+                    max-width: 910px;
+                }
+            }
+        }
         //END set max-width on columns
     }
     .pointer {