CASH-256 prettier config change and prevent email and phone getting cleared when navigating back from payment to service-zip.
This commit is contained in:
CarlNation 2025-02-14 15:13:26 -05:00
parent 1d5388aec6
commit 4452f718d0
21 changed files with 138 additions and 86 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1016,8 +1016,12 @@ export const getters = {
return email; 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 // 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 they didn't enter anything on the page default to email
return (
state.applicationUser.pageData[fmgPageValues.EMAIL_SMS_PAGES]?.emailOrSmsValue ??
state.order.customer.emailAddress
);
}, },
}; };

View file

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