Merge branch 'develop' into feature/CSR-1392

jest.config.js

@@ -22,6 +22,8 @@ module.exports = {
     "!src/common-components/funnel-header/menu-modal/**/*.vue",
     "!src/layouts/schedule/helpers/schedule-helper.js", // Temp test exclusion while in development
     "!src/layouts/review/*.vue", // Temp test exclusion while in development
+    "!src/layouts/payment/*.vue", // Temp test exclusion while in development
+    "!src/layouts/payment-pia-return/*.vue", // Temp test exclusion while in development
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

package-lock.json

@@ -14,6 +14,7 @@
         "canvas-confetti": "^1.4.0",
         "core-js": "^3.6.5",
         "http-status-codes": "^2.1.4",
+        "iframe-resizer": "^4.3.7",
         "jest-junit": "^13.0.0",
         "maska": "^1.5.0",
         "vee-validate": "^4.5.7",
@@ -11813,6 +11814,18 @@
       "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
       "dev": true
     },
+    "node_modules/iframe-resizer": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.3.7.tgz",
+      "integrity": "sha512-a3EGVScU9NtUpj6lWvGhVw3EfOw5AopRs5xGsQU385kWdgQt++OsD6PCnTV+8YkgBu/g28rLIh0EztFg9UQr1Q==",
+      "engines": {
+        "node": ">=0.8.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/davidjbradshaw/iframe-resizer/blob/master/FUNDING.md"
+      }
+    },
     "node_modules/ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -33845,6 +33858,11 @@
       "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
       "dev": true
     },
+    "iframe-resizer": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.3.7.tgz",
+      "integrity": "sha512-a3EGVScU9NtUpj6lWvGhVw3EfOw5AopRs5xGsQU385kWdgQt++OsD6PCnTV+8YkgBu/g28rLIh0EztFg9UQr1Q=="
+    },
     "ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",

package.json

@@ -17,6 +17,7 @@
     "canvas-confetti": "^1.4.0",
     "core-js": "^3.6.5",
     "http-status-codes": "^2.1.4",
+    "iframe-resizer": "^4.3.7",
     "jest-junit": "^13.0.0",
     "maska": "^1.5.0",
     "vee-validate": "^4.5.7",

public/css/hop-styling.css

@@ -75,14 +75,11 @@ body .creditCardSpecific div {
   padding: 8px 0;
 }
 body .creditCardSpecific div .headerlinecontainer {
-  padding: 0;
+  display: none;
 }
 body .creditCardSpecific div label {
   font-weight: 500;
 }
-body .creditCardSpecific div:first-child {
-  display: none;
-}
 body .creditCardSpecific #infoRow2 {
   margin-bottom: 0;
 }

public/scss/hop-styling.scss

@@ -88,14 +88,11 @@ body {
         div {
             padding: 8px 0;
             .headerlinecontainer {
-                padding: 0;
+                display: none;
             }
             label {
                 font-weight: 500;
             }
-            &:first-child {
-                display: none;
-            }
         }
         #infoRow2 {
             margin-bottom: 0;

src/App.vue

@@ -5,15 +5,33 @@
             <component :is="Component" @focusin="handleAnyComponentFocus" />
         </transition>
     </router-view>
+    <loadingModal :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
 </template>
 
 <script>
 import { handleAnyComponentFocus } from "@/helpers/button-question-focus-helper";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
 export default {
     name: "app",
+    setup() {
+        const { globalNonpersistedState } = showFmgLoadingModal();
+        return { globalNonpersistedState };
+    },
     methods: {
         handleAnyComponentFocus: handleAnyComponentFocus,
     },
+    computed: {
+        shouldShowLoader() {
+            return this.globalNonpersistedState.showLoadingModal;
+        },
+        shouldShowTextCarousel() {
+            return this.globalNonpersistedState.showTextCarousel;
+        },
+    },
+    components: {
+        loadingModal,
+    },
 };
 </script>
 

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

@@ -92,6 +92,7 @@ import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
+import checkbox from "@/ux-components/checkbox/checkbox";
 import { useField, ErrorMessage } from "vee-validate";
 import { queryStrings } from "@/constants/query-strings";
 
@@ -132,7 +133,6 @@ export default {
         suppressError: Boolean,
         useTextForValue: Boolean,
         valueToLogType: String,
-        additionalButtonData: Object,
         isSmallQuestionText: Boolean,
         customButtonQuestionId: String,
         logDisplayedValuesEvent: {
@@ -209,6 +209,9 @@ export default {
                 case "radio":
                     classes = "ui-radio d-flex";
                     break;
+                case "checkbox":
+                    classes = "ui-checkbox d-flex";
+                    break;
                 case "servicePackageRadio":
                     classes = "package-main";
                     break;
@@ -252,7 +255,7 @@ export default {
                 buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
                 buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
                 buttonImageId: answer.buttonImageId ?? answer.ImageId,
-                additionalButtonData: answer.additionalButtonData ?? answer.additionalButtonData,
+                additionalButtonData: answer.additionalButtonData,
                 groupName: this.formatString(this.groupName),
                 value:
                     answer.value ??
@@ -317,6 +320,7 @@ export default {
         listCard,
         ErrorMessage,
         radio,
+        checkbox,
     },
 };
 </script>

src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue

@@ -1,108 +0,0 @@
-<template>
-    <transition name="fade" mode="out-in">
-        <div class="add-vaps-buttons" aria-live="polite" v-if="isDisplayed">
-            <buttonQuestion
-                ref="buttonQuestion"
-                :answers="answersToDisplay"
-                groupName="addVaps"
-                v-model="selectedValues"
-                buttonTypeString="addVapsButton"
-                :buttonTypeObject="addVapsButton"
-                :isWide="answersToDisplay.length > 1 ? false : true" />
-        </div>
-    </transition>
-</template>
-
-<script>
-import buttonQuestion from "@/digital-components/button-question/button-question";
-import addVapsButton from "./add-vaps-button/add-vaps-button";
-
-export default {
-    name: "add-vaps-modal-buttons",
-    props: {
-        cartItems: Object,
-        vapsTilesCmsName: String,
-        availableLineItems: Object,
-    },
-    data() {
-        return {
-            addVapsButton: addVapsButton,
-        };
-    },
-    computed: {
-        selectedValues: {
-            get: function () {
-                return this.answersToDisplay;
-            },
-            set: function (newValue) {
-                // TODO - emit event to open modal
-            },
-        },
-        isDisplayed() {
-            return this.showAddRainDefense || this.showAddWipers;
-        },
-        showAddRainDefense() {
-            // if not found in the cart
-            return !this.cartItems.some((vap) => {
-                return vap?.partType === "RAIN DEFENSE";
-            });
-        },
-        showAddWipers() {
-            // if not found in the cart
-            return !this.cartItems.some((vap) => {
-                return vap?.partType?.includes(" WIPER");
-            });
-        },
-        rainDefensePrice() {
-            // const lineItem = this.rainDefenseItem;
-            const lineItem = this.availableLineItems.find((item) => {
-                return item.partType === "RAIN DEFENSE";
-            });
-
-            const price = lineItem?.laborAmount + lineItem?.sellingPrice + lineItem?.kitPrice;
-            return parseFloat(price).toFixed(2);
-        },
-        wipersPrice() {
-            let price = 0;
-            const lineItems = this.availableLineItems.filter((item) => {
-                return item.partType.includes(" WIPER");
-            });
-            lineItems?.forEach((item) => {
-                price += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
-            });
-            return parseFloat(price).toFixed(2);
-        },
-        answersCmsData() {
-            return this.getCmsContent(this.vapsTilesCmsName, "Answers");
-        },
-        answersToDisplay() {
-            const answers = [];
-            if (!this.answersCmsData) return answers;
-
-            const getAnswer = (name, answers) => {
-                const answerIndex = answers.findIndex((answer) => {
-                    return answer.Name === name;
-                });
-                return answers[answerIndex];
-            };
-
-            if (this.showAddWipers) {
-                const answer = getAnswer("WipersModal", this.answersCmsData);
-                answer.SubText = "+$" + this.wipersPrice;
-                answers.push(answer);
-            }
-
-            // if (this.showAddRainDefense) {
-            //     const answer = getAnswer("RainDefenseModal", this.answersCmsData);
-            //     answer.SubText = "+$" + this.rainDefensePrice;
-            //     answers.push(answer);
-            // }
-
-            return answers;
-        },
-    },
-    components: {
-        buttonQuestion,
-    },
-};
-</script>

src/fmg-components/loading-modal/loading-modal.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isModalVisible">
+    <div v-if="showModalContent">
         <div v-if="notFullScreen" class="dimmer-overlay"></div>
         <div class="modal-loader" :class="layoutClass">
             <div class="row g-2 h-100 d-flex align-items-center">
@@ -11,7 +11,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="row">
+                    <div v-if="showTextCarouselContent" class="row">
                         <div class="col">
                             <div class="text-container slide">
                                 <p>
@@ -59,6 +59,7 @@ export default {
     data() {
         return {
             isModalVisible: false,
+            isModalTextCarouselVisible: false,
         };
     },
     props: {
@@ -66,15 +67,30 @@ export default {
             type: Boolean,
             default: false,
         },
+        showLoader: {
+            type: Boolean,
+            default: false,
+        },
+        showTextCarousel: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         layoutClass() {
             return this.notFullScreen ? "card-layout" : "full-screen container-fluid";
         },
+        showModalContent() {
+            return this.isModalVisible || this.showLoader;
+        },
+        showTextCarouselContent() {
+            return this.isModalTextCarouselVisible || this.showTextCarousel;
+        },
     },
     methods: {
-        showModal() {
+        showModal(showTextCarousel = true) {
             //Display modal
+            this.isModalTextCarouselVisible = showTextCarousel;
             this.isModalVisible = true;
             //Force page reload on back button
             window.addEventListener(

src/helpers/loading-modal-helper.js

@@ -0,0 +1,18 @@
+import { reactive } from "vue";
+
+// state encapsulated and managed by the composable
+const globalNonpersistedState = reactive({
+    showLoadingModal: true,
+    showTextCarousel: false,
+});
+
+export const showFmgLoadingModal = (newValue, showTextCarousel = false) => {
+    if (newValue !== undefined) {
+        globalNonpersistedState.showLoadingModal = newValue;
+    }
+    if (showTextCarousel !== undefined) {
+        globalNonpersistedState.showTextCarousel = showTextCarousel;
+    }
+
+    return { globalNonpersistedState };
+};

src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue

@@ -26,30 +26,23 @@
                 v-if="wipersModal"
                 @footer-button-action="addWipersToCart('WipersModal', wipersModal)"
                 footerButtonActionName="footer-button-action">
-                <div v-if="wipersToDisplay === wipersToDisplayStrings.BOTH" class="wiper-options">
+                <div v-if="wipersOffered === wipersOfferedStrings.BOTH" class="wiper-options">
-                    <div>
+                    <buttonQuestion
-                        <checkboxQuestion
+                        ref="buttonQuestion"
-                            class="mb-5"
+                        buttonTypeString="checkbox"
-                            cmsWidgetName="AddFrontBladesQuestionWidget"
+                        class="mt-5"
-                            v-model="selectedFrontWipers" />
+                        :answers="wipersOptions"
-                        <p class="price">+${{ wipersModal.totalFrontPrice }}</p>
+                        groupName="wipers-options"
-                    </div>
+                        textPosition="text-center"
-                    <div>
+                        v-model="selectedWipers"
-                        <checkboxQuestion
+                        isMultiSelect
-                            class="mb-5"
+                        isRequired
-                            cmsWidgetName="AddRearBladesQuestionWidget"
+                        validationRules="checkbox-required" />
-                            v-model="selectedRearWipers" />
-                        <p class="price">+${{ wipersModal.totalRearPrice }}</p>
-                    </div>
                 </div>
-                <div
+                <div v-else-if="wipersOffered === wipersOfferedStrings.FRONT" class="wiper-options">
-                    v-else-if="wipersToDisplay === wipersToDisplayStrings.FRONT"
-                    class="wiper-options">
                     <p class="price">+${{ wipersModal.totalFrontPrice }}</p>
                 </div>
-                <div
+                <div v-else-if="wipersOffered === wipersOfferedStrings.REAR" class="wiper-options">
-                    v-else-if="wipersToDisplay === wipersToDisplayStrings.REAR"
-                    class="wiper-options">
                     <p class="price">+${{ wipersModal.totalRearPrice }}</p>
                 </div>
             </contentGroupModal>
@@ -62,12 +55,17 @@
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import addVapsButton from "./add-vaps-button/add-vaps-button";
 import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
-import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
 
 // SUPPORTING
 import { partTypeStrings } from "@/constants/part-type-strings";
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
 
-const wipersToDisplayStrings = {
+// DEFINE VALIDATION RULES
+defineRule("checkbox-required", required(errorMessages.OPTION_REQUIRED));
+
+const wipersOfferedStrings = {
     FRONT: "FRONT",
     REAR: "REAR",
     BOTH: "BOTH",
@@ -83,15 +81,18 @@ export default {
     data() {
         return {
             addVapsButton: addVapsButton,
-            selectedFrontWipers: false,
+            wipersOffered: null,
-            selectedRearWipers: false,
+            isModalOpened: false,
-            wipersToDisplay: null,
+            selectedWipers: this.getSelectedWipers(),
         };
     },
     methods: {
         openModal(modalName) {
             this.$refs[modalName].openModal();
         },
+        closeModal(modalName) {
+            this.$refs[modalName].closeModal();
+        },
         addRainDefenseToCart(modalName, part) {
             const alreadyInCart = this.currentCartItems.vaps.some((item) => {
                 return item.partType === part.partType;
@@ -99,9 +100,11 @@ export default {
             if (!alreadyInCart) {
                 this.currentCartItems.vaps.push(part);
             }
-            this.$refs[modalName].closeModal();
+            this.closeModal(modalName);
         },
         addWipersToCart(modalName, part) {
+            const itemsForCart = [];
+
             const frontWipersAlreadyInCart = this.currentCartItems.vaps.some((item) => {
                 return item.partType === part.frontWiperLineItems[0].partType;
             });
@@ -109,36 +112,43 @@ export default {
                 return item.partType === part.rearWiperLineItems[0]?.partType;
             });
 
-            if (this.wipersToDisplay === wipersToDisplayStrings.FRONT) {
+            if (this.wipersOffered === wipersOfferedStrings.BOTH) {
-                this.selectedFrontWipers = true; // set as true if front wipers is only option
+                this.selectedWipers.forEach((wiper) => {
+                    itemsForCart.push(wiper);
+                });
+            } else {
+                if (
+                    !frontWipersAlreadyInCart &&
+                    this.wipersOffered === wipersOfferedStrings.FRONT
+                ) {
+                    itemsForCart.push(wipersOfferedStrings.FRONT);
+                }
+                if (!rearWipersAlreadyInCart && this.wipersOffered === wipersOfferedStrings.REAR) {
+                    itemsForCart.push(wipersOfferedStrings.REAR);
+                }
             }
-            if (this.wipersToDisplay === wipersToDisplayStrings.REAR) {
+
-                this.selectedRearWipers = true; // set as true if rear wipers is only option
+            itemsForCart.forEach((type) => {
-            }
+                if (type === wipersOfferedStrings.FRONT) {
-            if (!frontWipersAlreadyInCart && this.selectedFrontWipers) {
-                if (part.frontWiperLineItems) {
-                    // for wipers, a "combined" part (frontWiperLineItems)
                     part.frontWiperLineItems.forEach((part) => {
                         this.currentCartItems.vaps.push(part);
                     });
                 }
-            }
+                if (type === wipersOfferedStrings.REAR) {
-            if (!rearWipersAlreadyInCart && this.selectedRearWipers) {
-                if (part.rearWiperLineItems) {
                     part.rearWiperLineItems.forEach((part) => {
                         this.currentCartItems.vaps.push(part);
                     });
                 }
-            }
+            });
-            this.$refs[modalName].closeModal();
 
-            if (this.wipersToDisplay === wipersToDisplayStrings.BOTH) {
+            this.closeModal(modalName);
-                this.selectedFrontWipers = false; // set as false if both options are given
+            this.selectedWipers;
-                this.selectedRearWipers = false; // set as false if both options are given
-            }
         },
-        updateWipersToDisplay(value) {
+        updateWipersOffered(value) {
-            this.wipersToDisplay = value;
+            this.wipersOffered = value;
+        },
+        getSelectedWipers() {
+            return null;
         },
     },
     computed: {
@@ -229,31 +239,72 @@ export default {
                     ];
                     prices.sort((a, b) => a - b);
                     modalData.SubText = "+$" + prices[0] + " - $" + prices[prices.length - 1];
-                    this.updateWipersToDisplay(wipersToDisplayStrings.BOTH);
+                    this.updateWipersOffered(wipersOfferedStrings.BOTH);
                     buttons.push(modalData);
                 } else {
                     // NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON
                     modalData.SubText = "+$" + this.wipersModal?.totalFrontPrice;
-                    this.updateWipersToDisplay(wipersToDisplayStrings.FRONT);
+                    this.updateWipersOffered(wipersOfferedStrings.FRONT);
                     buttons.push(modalData);
                 }
             } else if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
                 // NO REAR WIPERS IN CART; SHOW ONLY REAR WIPERS BUTTON
                 modalData.SubText = "+$" + this.wipersModal?.totalRearPrice;
-                this.updateWipersToDisplay(wipersToDisplayStrings.REAR);
+                this.updateWipersOffered(wipersOfferedStrings.REAR);
                 buttons.push(modalData);
             }
 
             return buttons;
         },
-        wipersToDisplayStrings() {
+        wipersOfferedStrings() {
-            return wipersToDisplayStrings;
+            return wipersOfferedStrings;
+        },
+        wipersOptions() {
+            const wipersOptions = [];
+            const wipersFrontCopy = this.getCmsContent(
+                "AddFrontBladesQuestionWidget",
+                "QuestionText"
+            );
+            const wipersRearCopy = this.getCmsContent(
+                "AddRearBladesQuestionWidget",
+                "QuestionText"
+            );
+            const frontWipersLineItems = this.wipersModal.frontWiperLineItems;
+            const rearWipersLineItems = this.wipersModal.rearWiperLineItems;
+
+            if (frontWipersLineItems) {
+                const wipersOption = {
+                    buttonLabel: wipersFrontCopy,
+                    groupName: "wipers-options",
+                    value: wipersOfferedStrings.FRONT,
+                    buttonLabelSubCopy: "buttonLabelSubCopy",
+                    buttonBodyCopy: "buttonBodyCopy",
+                    buttonAuxillaryCopy: "buttonAuxillaryCopy",
+                    buttonFooterCopy: "buttonFooterCopy",
+                    additionalButtonData: "+$" + this.wipersModal.totalFrontPrice,
+                };
+                wipersOptions.push(wipersOption);
+            }
+            if (rearWipersLineItems) {
+                const wipersOption = {
+                    buttonLabel: wipersRearCopy,
+                    groupName: "wipers-options",
+                    value: wipersOfferedStrings.REAR,
+                    buttonLabelSubCopy: "buttonLabelSubCopy",
+                    buttonBodyCopy: "buttonBodyCopy",
+                    buttonAuxillaryCopy: "buttonAuxillaryCopy",
+                    buttonFooterCopy: "buttonFooterCopy",
+                    additionalButtonData: "+$" + this.wipersModal.totalRearPrice,
+                };
+                wipersOptions.push(wipersOption);
+            }
+
+            return wipersOptions;
         },
     },
     components: {
         buttonQuestion,
         contentGroupModal,
-        checkboxQuestion,
     },
 };
 </script>
@@ -286,26 +337,31 @@ export default {
                             text-align: center;
                         }
                         .wiper-options {
-                            & > div {
+                            .ui-checkbox {
-                                display: flex;
+                                display: block;
-                                justify-content: space-between;
-                                margin-bottom: 1rem;
 
-                                &:last-child {
+                                & > div.col {
-                                    margin-bottom: 0;
+                                    margin-bottom: 1rem;
+
+                                    &:last-child {
+                                        margin-bottom: 0;
+                                    }
                                 }
+                                .checkbox {
+                                    display: flex;
+                                    justify-content: space-between;
 
-                                .form-check {
+                                    .additional-button-data {
-                                    margin-bottom: 0;
+                                        font-size: 0.875rem;
+                                        line-height: 1.75;
+                                        padding-left: 0.5rem;
+                                        color: $green;
+                                    }
                                 }
                             }
                             p {
                                 margin-bottom: 0;
-                            }
+                                line-height: 1.75;
-                            p.price {
-                                font-size: 0.875rem;
-                                padding-left: 0.5rem;
-                                color: $green;
                             }
                         }
                     }

src/layouts/payment/payment.vue

@@ -12,6 +12,7 @@
                 <div class="col-md-6 col-xl-4 p-0">
                     <div id="card-container">
                         <iframe
+                            v-resize
                             ref="paymentFrame"
                             class="hop-iframe payment-iframe"
                             name="card-frame"
@@ -202,7 +203,7 @@ import { paymentMethods } from "@/constants/payment-method-constants";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 import baseMixin from "@/mixins/base-mixin.js";
 
-// Validation
+import iframeResize from "../../../node_modules/iframe-resizer/js/iframeResizer.js";
 
 export default {
     name: "payment",
@@ -235,6 +236,18 @@ export default {
             paypalPayment: this.isPaypal(),
         };
     },
+    directives: {
+        resize: {
+            mounted: function (el) {
+                el.addEventListener("load", () => {
+                    iframeResize({ checkOrigin: false }, el);
+                });
+            },
+            unmounted: function (el) {
+                el.iFrameResizer.removeListeners();
+            },
+        },
+    },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@@ -487,7 +500,7 @@ export default {
 <style lang="scss">
 .hop-iframe {
     position: relative;
-    min-height: 1320px;
+    min-height: 1120px;
     width: 100%;
     border: 0 none;
 }

src/layouts/service-location/shop-question/shop-question.spec.js

@@ -186,18 +186,21 @@ describe("shop-question.vue", () => {
                 buttonLabel: "Westerville",
                 buttonLabelSubCopy: "5 mi",
                 value: "003335",
+                additionalButtonData: wrapper.vm.additionalButtonData,
             },
             {
                 buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
                 buttonLabel: "Worthington",
                 buttonLabelSubCopy: "10.5 mi",
                 value: "001820",
+                additionalButtonData: wrapper.vm.additionalButtonData,
             },
             {
                 buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
                 buttonLabel: "Columbus",
                 buttonLabelSubCopy: "11.5 mi",
                 value: "003343",
+                additionalButtonData: wrapper.vm.additionalButtonData,
             },
         ]);
     });
@@ -414,6 +417,10 @@ describe("shop-question.vue", () => {
             },
         });
 
+        displayedAnswers.forEach(
+            (answer) => (answer.additionalButtonData = wrapper.vm.additionalButtonData)
+        );
+
         // Act
         await wrapper.setProps({
             shopProviderData: shopQuestionInitialData,
@@ -445,42 +452,49 @@ describe("shop-question.vue", () => {
 
         // Assert
         expect(wrapper.vm.answers.length).toBe(6);
+        console.log(wrapper.vm.answers);
         expect(wrapper.vm.answers).toEqual([
             {
                 buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
                 buttonLabel: "Westerville",
                 buttonLabelSubCopy: "5 mi",
                 value: "003335",
+                additionalButtonData: wrapper.vm.additionalButtonData,
             },
             {
                 buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
                 buttonLabel: "Worthington",
                 buttonLabelSubCopy: "10.5 mi",
                 value: "001820",
+                additionalButtonData: wrapper.vm.additionalButtonData,
             },
             {
                 buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
                 buttonLabel: "Columbus",
                 buttonLabelSubCopy: "11.5 mi",
                 value: "003343",
+                additionalButtonData: wrapper.vm.additionalButtonData,
             },
             {
                 buttonBodyCopy: "1670 Harmon Ave, Columbus, OH 43223",
                 buttonLabel: "Columbus",
                 buttonLabelSubCopy: "16 mi",
                 value: "006747",
+                additionalButtonData: wrapper.vm.additionalButtonData,
             },
             {
                 buttonBodyCopy: "3938 Powell Rd, Powell, OH 43065",
                 buttonLabel: "Powell",
                 buttonLabelSubCopy: "16.5 mi",
                 value: "003341",
+                additionalButtonData: wrapper.vm.additionalButtonData,
             },
             {
                 buttonBodyCopy: "4580 W Broad St, Columbus, OH 43228",
                 buttonLabel: "Columbus",
                 buttonLabelSubCopy: "19.5 mi",
                 value: "003342",
+                additionalButtonData: wrapper.vm.additionalButtonData,
             },
         ]);
     });

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

@@ -19,8 +19,7 @@
                 textPosition="text-start"
                 v-model="selectedProviderNumber"
                 isRequired
-                validationRules="option-required"
+                validationRules="option-required" />
-                :additionalButtonData="additionalButtonData" />
             <textLink
                 v-if="displaySeeMoreLocationsLink"
                 ref="showMoreShopsLink"
@@ -156,6 +155,7 @@ export default {
                     buttonLabel: city,
                     buttonLabelSubCopy: `${distanceInMiles} mi`,
                     buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
+                    additionalButtonData: this.additionalButtonData,
                     value: shopProvider.providerNumber,
                 };
             });

src/router/index.js

@@ -8,6 +8,7 @@ import { globalEvents, globalEventTypes } from "@/constants/events";
 import { queryStrings } from "@/constants/query-strings";
 import { getQuerystringParameter } from "@/helpers/querystring-helper";
 import { getDeviceIdValue } from "@/helpers/heritage-integration/cookie-helper";
+import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
 
 // Heritage integration
 import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper";
@@ -154,6 +155,11 @@ router.beforeEach(async (to, from, next) => {
     // use current page url query string name when to.name is "root" (due to unresolved navigation in beforeEach)
     router.lastNavigationPage = to.name == "root" ? analyticsMixin.methods.getPageName() : to.name;
 
+    const fromQueryPage = from.query?.fmgPage;
+    if (fromQueryPage === undefined) {
+        showFmgLoadingModal(true);
+    }
+
     next();
 });
 
@@ -171,6 +177,8 @@ router.afterEach(async (to, from) => {
         }
     }
 
+    showFmgLoadingModal(false);
+
     // Push page view to GA
     analyticsMixin.methods.pushPageViewToGA();
 

src/store/index.js

@@ -2196,15 +2196,25 @@ export const actions = {
                 "lineItems"
             );
 
-        let queryString =
+        let queryString = "";
-            `ParentAccountNumber=${applicationConfig.CASH_PARENT_ACCOUNT_NUMBER}` +
+        if (appointmentType == "Mobile") {
-            `&BillToAccountNumber=${billToAccountNumber}` +
+            queryString =
-            `&ProviderNumber=${providerNumber}` +
+                `ParentAccountNumber=${applicationConfig.CASH_PARENT_ACCOUNT_NUMBER}` +
-            `&AppointmentType=${appointmentType}` +
+                `&BillToAccountNumber=${billToAccountNumber}` +
-            `&ServiceLocation.City=${serviceLocationCity}` +
+                `&ProviderNumber=${providerNumber}` +
-            `&ServiceLocation.State=${serviceLocationState}` +
+                `&AppointmentType=${appointmentType}` +
-            `&ServiceLocation.ZipCode=${serviceLocationZipCode}` +
+                `&ServiceLocation.City=${serviceLocationCity}` +
-            `&${pricedLineItemsFormattedForRequest}`;
+                `&ServiceLocation.State=${serviceLocationState}` +
+                `&ServiceLocation.ZipCode=${serviceLocationZipCode}` +
+                `&${pricedLineItemsFormattedForRequest}`;
+        } else {
+            queryString =
+                `ParentAccountNumber=${applicationConfig.CASH_PARENT_ACCOUNT_NUMBER}` +
+                `&BillToAccountNumber=${billToAccountNumber}` +
+                `&ProviderNumber=${providerNumber}` +
+                `&AppointmentType=${appointmentType}` +
+                `&${pricedLineItemsFormattedForRequest}`;
+        }
 
         const lineItemServerData = context.getters.order.lineItems.serverData;
         if (lineItemServerData) {
@@ -2257,13 +2267,18 @@ export const actions = {
             },
         };
 
-        const validateResponse = await globalMethods.callHttpClient({
+        const validateResponse = await globalMethods
-            method: endpoints.ValidatePromo.method,
+            .callHttpClient({
-            endpoint: endpoints.ValidatePromo.url,
+                method: endpoints.ValidatePromo.method,
-            payload: requestObject,
+                endpoint: endpoints.ValidatePromo.url,
-            logApiCall: true,
+                payload: requestObject,
-            pageNameToLog: pageNameToLog,
+                logApiCall: true,
-        });
+                pageNameToLog: pageNameToLog,
+            })
+            .catch((error) => {
+                // Validate promo will return 4xx errors when an invalid promo
+                return error;
+            });
 
         if (validateResponse?.data?.serverData) {
             context.commit(

src/ux-components/checkbox/checkbox.spec.js

@@ -0,0 +1,66 @@
+import { mount } from "@vue/test-utils";
+import checkbox from "./checkbox";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+
+describe("checkbox.vue", () => {
+    it("Should have correct group name", async () => {
+        // Arrange
+        let { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                propsData: {
+                    groupName: "checkbox-button-test",
+                    value: "test value",
+                },
+            },
+        });
+
+        // Act
+        const input = wrapper.find("input");
+
+        // Assert
+        expect(input.attributes().name).toEqual("checkbox-button-test");
+    });
+
+    it("Should have correct label text", async () => {
+        // Act
+        let { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                propsData: {
+                    buttonLabel: "label text",
+                    value: "test value",
+                },
+            },
+        });
+
+        // Arrange
+        const paragraph = wrapper.find("p");
+
+        // Assert
+        expect(paragraph.text()).toEqual("label text");
+    });
+
+    it("Should have correct screenreader-only text", async () => {
+        // Act
+        let { wrapper } = setupMocks({});
+
+        // Arrange
+        await wrapper.setProps({
+            screenReaderOnlyText: "screenreader text",
+            value: "test value",
+        });
+        const paragraph = wrapper.find(".sr-only");
+
+        // Assert
+        expect(paragraph.text()).toEqual("screenreader text");
+    });
+});
+
+function setupMocks({ mountOptionsMockData = {} }) {
+    const wrapper = mount(checkbox, {
+        ...mountOptionsMockData,
+        mixins: [inputButtonWrapperMixin],
+    });
+
+    return { wrapper };
+}

src/ux-components/checkbox/checkbox.vue

@@ -0,0 +1,74 @@
+<template>
+    <baseInputButton
+        v-bind="$props"
+        buttonWrapperClasses="form-check base-input-button checkbox"
+        inputClasses="form-check-input"
+        v-model="selectedValue">
+        <div class="d-flex align-items-start form-check-label">
+            <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
+            <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
+        </div>
+        <div
+            v-if="additionalButtonData"
+            v-html="additionalButtonData"
+            class="additional-button-data"></div>
+    </baseInputButton>
+</template>
+
+<script>
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+
+export default {
+    name: "checkbox",
+    mixins: [inputButtonWrapperMixin],
+    components: {
+        baseInputButton,
+    },
+};
+</script>
+
+<style lang="scss">
+.form-check {
+    position: relative;
+
+    .form-check-input {
+        border: 1px solid $gray-500; //
+        border-radius: 2px; //
+        margin-right: 0.5rem;
+        opacity: 1;
+        height: 1em;
+        width: 1em;
+
+        &:checked {
+            background-color: $blue; //
+            background-size: contain;
+            background-position: center;
+            border: 1px solid $blue;
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+
+            + .form-check-label {
+                p {
+                    font-weight: 400;
+                    font-size: 0.875rem;
+                    color: $gray-600;
+                }
+            }
+        }
+        &:focus {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+    }
+
+    &:hover {
+        .form-check-input:not(:checked) {
+            box-shadow: 0 0 0 4px $blue-300;
+        }
+    }
+    p {
+        font-weight: 400;
+        font-size: 0.875rem;
+        color: $gray-600;
+    }
+}
+</style>