Final styling
This commit is contained in:
scottkiener-at-safelite
parent
0017c49a6d
commit
fb7b1ce5ed
2 changed files with 36 additions and 18 deletions
|
|
@ -5,7 +5,7 @@
|
|||
<baseInputButton
|
||||
v-bind="$props"
|
||||
v-model="selectedValue"
|
||||
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-4 no-hover">
|
||||
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 label-margin-bottom no-hover">
|
||||
<div
|
||||
:aria-label="buttonLabel"
|
||||
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
|
||||
|
|
@ -121,19 +121,10 @@ export default {
|
|||
input[type="checkbox"] {
|
||||
position: static; //override bootstrap
|
||||
|
||||
// &:focus-visible + .list-button-content {
|
||||
// box-shadow: 0 0 0 2.5px $blue;
|
||||
// }
|
||||
// &:focus + .list-button-content {
|
||||
// box-shadow: 0 0 0 2.5px $blue;
|
||||
// }
|
||||
&:checked + .list-button-content {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
background: #e7f1f6;
|
||||
border: 1px solid #0070d1;
|
||||
}
|
||||
// &:checked:focus + .list-button-content {
|
||||
// box-shadow: 0 0 0 2.5px $blue;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.list-button-content {
|
||||
|
|
@ -242,4 +233,7 @@ export default {
|
|||
text-align: left;
|
||||
}
|
||||
}
|
||||
div.col:not(:last-child) >.label-margin-bottom{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -99,7 +99,9 @@
|
|||
:text="shopNotListedModalLink"
|
||||
@clickEvent="doNotSeeMyShopLinkClick" />
|
||||
</div>
|
||||
<hr>
|
||||
<siteFooter
|
||||
class="mt-6"
|
||||
ref="siteFooter"
|
||||
:cmsWidgetName="widget.siteFooter"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
|
|
@ -145,6 +147,7 @@ import { shallowRef } from 'vue';
|
|||
import { toTitleCase, toDisplayPhoneNumber } from '@/helpers/text-helper.js';
|
||||
import bailoutMessage from '@/constants/bailoutMessage';
|
||||
import settleAllPromises from '@/helpers/layout-helper';
|
||||
import issPageValues from '@/router/router-constants/issPage-values';
|
||||
|
||||
|
||||
export default {
|
||||
|
|
@ -165,8 +168,9 @@ export default {
|
|||
mixins: [BaseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const zipCode = useMainStore().order.customer.address.zipCode;
|
||||
const pageData = useMainStore().pageData(to.query.issPage);
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
const providersPromise = useMainStore().getTpaAndSafeliteProviders(zipCode);
|
||||
const providersPromise = useMainStore().getTpaAndSafeliteProviders(zipCode, pageData?.tpaSearchValue ?? '');
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
|
|
@ -180,17 +184,21 @@ export default {
|
|||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
next(async (vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.tpaSearchValue = ""; // TODO: use page data to set the value
|
||||
vm.mapZipCode = zipCode;
|
||||
vm.providers = resultMap.providers;
|
||||
vm.providers = resultMap.providers;
|
||||
if (pageData) {
|
||||
vm.tpaSearchValue = pageData?.tpaSearchValue ?? vm.mapZipCode;
|
||||
vm.radiusFilter = pageData?.radiusFilter ?? 25;
|
||||
}
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataLoaded: false,
|
||||
pageData: null,
|
||||
tpaSearchValue: null,
|
||||
mapZipCode: null,
|
||||
radiusFilter: useMainStore().order.serviceLocation.tpaSearchRadius ?? 25, // TODO: use page data to set the value
|
||||
radiusFilter: null,
|
||||
providers: [],
|
||||
selectedProviderNumber: useMainStore().order.serviceLocation.provider.providerNumber,
|
||||
reloadingProviders: false,
|
||||
|
|
@ -252,7 +260,7 @@ export default {
|
|||
return this.getCmsContent(
|
||||
this.widget.noNetworkShopsAlert,
|
||||
widgetFields.ALERT_WIDGET.HEADLINE_TEXT
|
||||
)?.replaceAll('{custom:radiusInMiles}', this.radiusInMiles);
|
||||
)?.replaceAll('{custom:radiusInMiles}', this.radiusFilter + " miles");
|
||||
},
|
||||
radiusFilteredAndCappedProviders() {
|
||||
return this.providers.filter((provider) => provider.distanceInMiles <= this.radiusFilter).slice(0, 5);
|
||||
|
|
@ -289,7 +297,6 @@ export default {
|
|||
const provider = this.providers?.find((p) => p.providerNumber === newNumber);
|
||||
if (provider && this.dataLoaded) {
|
||||
useMainStore().updateServiceLocation({
|
||||
tpaSearchRadius: this.radiusFilter,
|
||||
zipCode: this.zipCode,
|
||||
provider: {
|
||||
providerNumber: provider?.providerNumber,
|
||||
|
|
@ -375,6 +382,10 @@ export default {
|
|||
? this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP
|
||||
: this.navigationScenarios
|
||||
.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP;
|
||||
// Do not save the zip code as the tpa search value, prevents an outdated zipcode from being used
|
||||
// as the default search value if customer goes back and changes zip earlier in the flow
|
||||
const tpaSearchValueToSave = this.tpaSearchValue === this.mapZipCode ? '' : this.tpaSearchValue;
|
||||
this.savePageDataToStore(issPageValues.TPA_SEARCH, {tpaSearchValue: tpaSearchValueToSave, radiusFilter: this.radiusFilter});
|
||||
this.$router.navigate(scenario, this.$route);
|
||||
},
|
||||
getShopButtonDataFromProvider(provider) {
|
||||
|
|
@ -411,7 +422,20 @@ export default {
|
|||
height: 435px;
|
||||
}
|
||||
|
||||
#providerSelectionForm {
|
||||
#alertNoNetworkProviders {
|
||||
:deep(.alert) {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 22px 0;
|
||||
}
|
||||
|
||||
.need-help-link-container {
|
||||
margin-top:30px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue