CASH-256

CASH-256 prettier config change and prevent email and phone getting cleared when navigating back from payment to service-zip.

.prettierrc

@@ -1,5 +1,6 @@
 {
     "tabWidth": 4,
+    "htmlWhitespaceSensitivity": "ignore",
     "bracketSameLine": true,
     "printWidth": 100,
     "trailingComma" : "es5"

src/digital-components/date-picker/date-picker-2.vue

@@ -17,18 +17,40 @@
                 <div
                     v-if="calendarViewDirection === 'future'"
                     class="legend caption d-flex align-items-center justify-content-end">
-                    <span class="legend-circle me-1"></span> &equals; Available
+                    <span class="legend-circle me-1"></span>
+                    &equals; Available
                 </div>
                 <div class="separator-line"></div>
                 <div class="nav-back ps-3"><button></button></div>
                 <div class="nav-forward pe-3"><button></button></div>
-                <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
-                <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
-                <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
-                <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
-                <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
-                <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
-                <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Sunday</span>
+                    S
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Monday</span>
+                    M
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Tuesday</span>
+                    T
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Wednesday</span>
+                    W
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Thursday</span>
+                    T
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Friday</span>
+                    F
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Saturday</span>
+                    S
+                </div>
                 <div
                     v-for="date in month.dates"
                     :key="date.inputValue"

src/digital-components/date-picker/date-picker.vue

@@ -17,18 +17,40 @@
                 <div
                     v-if="calendarViewDirection === 'future'"
                     class="legend caption d-flex align-items-center justify-content-end">
-                    <span class="legend-circle me-1"></span> &equals; Available
+                    <span class="legend-circle me-1"></span>
+                    &equals; Available
                 </div>
                 <div class="separator-line"></div>
                 <div class="nav-back ps-3"><button></button></div>
                 <div class="nav-forward pe-3"><button></button></div>
-                <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
-                <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
-                <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
-                <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
-                <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
-                <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
-                <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Sunday</span>
+                    S
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Monday</span>
+                    M
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Tuesday</span>
+                    T
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Wednesday</span>
+                    W
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Thursday</span>
+                    T
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Friday</span>
+                    F
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Saturday</span>
+                    S
+                </div>
                 <div
                     v-for="date in month.dates"
                     :key="date.inputValue"

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

@@ -16,8 +16,7 @@
                 :maxlength="maxLength"
                 role="textbox"
                 aria-multiline="true"
-                :aria-required="isRequired">
-            </textarea>
+                :aria-required="isRequired"></textarea>
             <p
                 tabindex="-1"
                 class="caption mt-2 mb-0 w-100"

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

@@ -75,9 +75,9 @@
                 class="d-inline-flex small mt-1"
                 aria-atomic="true"
                 aria-live="polite"
-                :class="[centerErrorMessage ? 'center-error-message' : '']"
-                >{{ errorMessage }}</span
-            >
+                :class="[centerErrorMessage ? 'center-error-message' : '']">
+                {{ errorMessage }}
+            </span>
         </div>
     </div>
 </template>

src/fmg-components/cart/cart.vue

@@ -10,9 +10,9 @@
                     href="javascript:void(0)"
                     class="col d-flex justify-content-between py-0">
                     <span class="label">{{ OrderDetailsText }}</span>
-                    <span class="label amount-due">{{
-                        getLineItemAmount(amountDue, showCoverageAsPending)
-                    }}</span>
+                    <span class="label amount-due">
+                        {{ getLineItemAmount(amountDue, showCoverageAsPending) }}
+                    </span>
                 </a>
             </div>
             <div class="cart-panel">
@@ -48,11 +48,11 @@
                         v-for="(cartItem, i) in packageCartItems"
                         :key="i"
                         class="packaged-cart-item">
-                        <span
-                            ><span :class="cartItem.category === 'promos' ? 'promo' : ''">{{
-                                cartItem.name
-                            }}</span></span
-                        >
+                        <span>
+                            <span :class="cartItem.category === 'promos' ? 'promo' : ''">
+                                {{ cartItem.name }}
+                            </span>
+                        </span>
                         <textLink
                             v-if="allowItemRemoval"
                             ref="removeLink"
@@ -99,11 +99,9 @@
                                 !showCoverageAsVerified ||
                                 cartItem.name === 'Recycling' ||
                                 (showCoverageAsVerified && !cartItem.isCoveredByInsurance)
-                            "
-                            >{{
-                                getLineItemAmount(cartItem.subTotal, null, cartItem.category)
-                            }}</span
-                        >
+                            ">
+                            {{ getLineItemAmount(cartItem.subTotal, null, cartItem.category) }}
+                        </span>
                     </div>
 
                     <!-- Sub total, sales tax, total columns -->
@@ -143,8 +141,10 @@
             class="my-2 lh-1 applied-promo-tag"
             v-for="(promoCode, i) in getPromoCodeList"
             :key="i">
-            <span class="caption"
-                >Promo code <span class="promo-code">{{ promoCode }}</span> applied
+            <span class="caption">
+                Promo code
+                <span class="promo-code">{{ promoCode }}</span>
+                applied
             </span>
         </div>
         <contentGroupModal ref="RecycleModal" cmsWidgetName="RecycleModal">

src/fmg-components/promo-modal-question/promo-modal-question.vue

@@ -54,8 +54,10 @@
                 class="mt-4 d-flex align-items-center justify-content-between"
                 v-for="(promoCode, i) in this.getPromoCodeList()"
                 :key="i">
-                <span class="applied-promo"
-                    >Promo code <span class="promo-code">{{ promoCode }}</span> applied
+                <span class="applied-promo">
+                    Promo code
+                    <span class="promo-code">{{ promoCode }}</span>
+                    applied
                 </span>
                 <textLink
                     ref="removeLink"

src/layouts/confirmation/add-to-calendar/add-to-calendar.vue

@@ -4,8 +4,8 @@
             <button v-on:click="openCalendarModal">
                 <span class="add-to-calendar-span">
                     <img src="@/assets/img/icons/add-to-calendar.svg" class="add-to-calendar-img" />
-                    <span class="add-to-calendar-text">Add to calendar</span></span
-                >
+                    <span class="add-to-calendar-text">Add to calendar</span>
+                </span>
             </button>
         </div>
         <calendarModalQuestion
@@ -14,8 +14,7 @@
             cmsWidgetName="CalendarModalQuestion"
             @calendar-modal-closed="calendarModalClosed"
             :calendarOptionsData="calendarValues"
-            v-model="selectedCalendarOption">
-        </calendarModalQuestion>
+            v-model="selectedCalendarOption"></calendarModalQuestion>
     </div>
 </template>
 <script>

src/layouts/insurance-company/insurance-company.vue

@@ -22,7 +22,7 @@
                         linkType="text"
                         :text="payWithCashButtonCopy"
                         href="javascript:void(0)"
-                        @click-event="backButtonAction(foreceCashSelectionOnQuote = true)" />
+                        @click-event="backButtonAction((foreceCashSelectionOnQuote = true))" />
 
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
@@ -102,7 +102,7 @@ export default {
         },
         payWithCashButtonCopy() {
             return this.getCmsContent("PayWithCashWidget", "Text");
-        }
+        },
     },
     methods: {
         isCashParentAccountNumber() {
@@ -123,10 +123,14 @@ export default {
         backButtonAction(forceCashSelectionOnQuote) {
             // Go back to Quote page
             if (forceCashSelectionOnQuote) {
-                this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route, {"isCashSelected": true});
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_BACK,
+                    this.$route,
+                    { isCashSelected: true }
+                );
                 return;
             }
-                
+
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         async forwardButtonAction() {

src/layouts/part-questions/part-questions.vue

@@ -93,7 +93,7 @@ export default {
                         false
                     );
                 }
-                
+
                 baseMixin.methods.ResetExternalParamsAndHideModal();
             }
         });

src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue

@@ -18,7 +18,7 @@
                                 v-if="hasImage"
                                 :src="buttonImage"
                                 :alt="getInlineAltText(token)" />
-                            <span v-else> {{ getInlineAltText(token) }}</span>
+                            <span v-else>{{ getInlineAltText(token) }}</span>
                         </span>
                         <span v-else>
                             {{ token }}

src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue

@@ -11,7 +11,7 @@
                     class="ms-2"
                     :src="buttonImage"
                     :alt="getInlineAltText(token)" />
-                <span v-else> {{ getInlineAltText(token) }}</span>
+                <span v-else>{{ getInlineAltText(token) }}</span>
             </span>
             <span v-else>
                 {{ token }}

src/layouts/payment/payment.vue

@@ -41,8 +41,7 @@
                             id="card-frame"
                             seamless
                             scrolling="no"
-                            allow="payment *; microphone *; geolocation *;">
-                        </iframe>
+                            allow="payment *; microphone *; geolocation *;"></iframe>
                     </div>
 
                     <hr />

src/layouts/quote/quote.spec.js

@@ -612,14 +612,10 @@ describe("quote.vue", () => {
         mockTierOnePrice = 505;
         const { wrapper } = setupMocks({});
 
-
         //Act
         await quote.beforeRouteEnter.call(
             wrapper.vm,
-            { query: { fmgPage: "quote",
-                isInsuranceSelected: true,
-                isCashSelected: true,
-             } },
+            { query: { fmgPage: "quote", isInsuranceSelected: true, isCashSelected: true } },
             undefined,
             (c) => c(wrapper.vm)
         );

src/layouts/quote/recal-disclaimer/recal-disclaimer.vue

@@ -3,7 +3,7 @@
         <div class="alert-heading">
             <span>
                 <img v-if="hasImage" :src="imageUrl" />
-                <span class="px-2"> {{ recalHeaderText }}</span>
+                <span class="px-2">{{ recalHeaderText }}</span>
             </span>
         </div>
         <div>

src/layouts/return-user/return-user.vue

@@ -27,9 +27,10 @@
                 </div>
                 <div class="row justify-content-center">
                     <div class="col-md-6 col-xl-4 start-over">
-                        <a @click="startOver" alt="Start Over Button"
-                            ><img v-bind:src="startOverImage" />{{ startOverText }}</a
-                        >
+                        <a @click="startOver" alt="Start Over Button">
+                            <img v-bind:src="startOverImage" />
+                            {{ startOverText }}
+                        </a>
                     </div>
                 </div>
             </div>

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -8,7 +8,7 @@
                 href="#!"
                 @click-event="openModal">
                 <template v-slot:after-text v-if="editScreenReaderTextCmsWidgetName">
-                    <span class="sr-only"> {{ screenReaderOnlyText }} </span>
+                    <span class="sr-only">{{ screenReaderOnlyText }}</span>
                 </template>
             </textLink>
         </div>

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

@@ -8,12 +8,12 @@
                 :aria-label="buttonLabel"
                 class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
                 <div class="row-one">
-                    <span class="m-0 button-label-copy text-truncate" :class="textPosition">{{
-                        buttonLabel
-                    }}</span>
-                    <span class="m-0 caption mx-1 text-nowrap" :class="textPosition">{{
-                        buttonLabelSubCopy
-                    }}</span>
+                    <span class="m-0 button-label-copy text-truncate" :class="textPosition">
+                        {{ buttonLabel }}
+                    </span>
+                    <span class="m-0 caption mx-1 text-nowrap" :class="textPosition">
+                        {{ buttonLabelSubCopy }}
+                    </span>
                     <div
                         v-if="displayAvailabilityIndicators"
                         class="availability-indicator rounded-pill text-nowrap"
@@ -22,9 +22,9 @@
                             v-if="!isLoaderDisplayed"
                             class="availability-badge"
                             :class="availabilityRating == 'high' ? 'green' : 'orange'"></div>
-                        <span v-if="!isLoaderDisplayed" class="m-0 button-auxillary-copy">{{
-                            badgeText
-                        }}</span>
+                        <span v-if="!isLoaderDisplayed" class="m-0 button-auxillary-copy">
+                            {{ badgeText }}
+                        </span>
                         <loader
                             v-if="isLoaderDisplayed"
                             :loaderPosition="left"

src/layouts/service-zip/service-zip.vue

@@ -206,8 +206,7 @@ export default {
             if (!this.emailOrSms) {
                 await this.dispatchStoreAction(storeActions.SAVE_PHONE_NUMBER, "", false);
                 await this.dispatchStoreAction(storeActions.SAVE_EMAIL, "", false);
-            }
-            else { 
+            } else {
                 if (vinPagesMixin.methods.isPhoneNumber(this.emailOrSms)) {
                     const phone = this.emailOrSms.replace(/[()]/g, "");
                     await this.dispatchStoreAction(storeActions.SAVE_PHONE_NUMBER, phone, false);

src/store/index.js

@@ -1016,8 +1016,12 @@ export const getters = {
             return email;
         }
 
-        // if we're here, then we have both email and phone so get the value from pageData to reflect what they entered on the page
-        return state.applicationUser.pageData[fmgPageValues.EMAIL_SMS_PAGES]?.emailOrSmsValue;
+        // if we're here, then we have both email and phone so get the value from pageData to reflect what they entered on the page.
+        // if they didn't enter anything on the page default to email
+        return (
+            state.applicationUser.pageData[fmgPageValues.EMAIL_SMS_PAGES]?.emailOrSmsValue ??
+            state.order.customer.emailAddress
+        );
     },
 };
 

src/ux-components/text-link/text-link.vue

@@ -1,22 +1,26 @@
 <template>
     <loadingModal v-if="useLoadingModal" notFullScreen ref="loadingModal" />
-    <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href"
-        >{{ text }}<slot name="after-text"></slot
-    ></a>
+    <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">
+        {{ text }}
+        <slot name="after-text"></slot>
+    </a>
     <a
         v-else-if="linkType === 'newWindowLink'"
         @click="handleClick"
         class="new-window-link"
         :href="href"
-        target="_blank"
-        >{{ text }}<slot name="after-text"></slot
-    ></a>
-    <a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href"
-        >{{ text }}<slot name="after-text"></slot
-    ></a>
-    <a v-else-if="linkType === 'text'" @click="handleClick" :href="href"
-        >{{ text }}<slot name="after-text"></slot
-    ></a>
+        target="_blank">
+        {{ text }}
+        <slot name="after-text"></slot>
+    </a>
+    <a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">
+        {{ text }}
+        <slot name="after-text"></slot>
+    </a>
+    <a v-else-if="linkType === 'text'" @click="handleClick" :href="href">
+        {{ text }}
+        <slot name="after-text"></slot>
+    </a>
 </template>
 
 <script>