Merge pull request #682 from Safelite/SSR-1201-QA-updates
SSR-1201 misc alignment and spacing fixes.
This commit is contained in:
commit
857ef7db31
4 changed files with 40 additions and 44 deletions
|
|
@ -32,7 +32,8 @@
|
||||||
:allowPageInteraction="true" />
|
:allowPageInteraction="true" />
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
id="availabilityIndicator">
|
id="availabilityIndicator"
|
||||||
|
class="d-flex align-items-center">
|
||||||
<div
|
<div
|
||||||
id="availabilityBadge"
|
id="availabilityBadge"
|
||||||
class="availability-badge"
|
class="availability-badge"
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
class="subheader-secondary d-flex align-items-center overflow-hidden"
|
class="subheader-secondary d-flex align-items-center overflow-hidden"
|
||||||
:class="[justifySubheader, subHeaderClasses]">
|
:class="[justifySubheader, subHeaderClasses]">
|
||||||
<p
|
<p
|
||||||
class="fw-normal mb-0"
|
class="fw-normal"
|
||||||
:class="[alternateFormatting, subTextClasses]">
|
:class="[alternateFormatting, subTextClasses]">
|
||||||
<span v-html="subText"> </span>
|
<span v-html="subText"> </span>
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -33,7 +33,7 @@ import {
|
||||||
splitCopyOnCMSPlaceHolder,
|
splitCopyOnCMSPlaceHolder,
|
||||||
getRouterLinkRouteFromCopy,
|
getRouterLinkRouteFromCopy,
|
||||||
getRouterLinkDisplayTextFromCopy,
|
getRouterLinkDisplayTextFromCopy,
|
||||||
getRouterLinkHtmlStringFromCopy,
|
getRouterLinkHtmlStringFromCopy
|
||||||
} from '@/helpers/cms-content-helper';
|
} from '@/helpers/cms-content-helper';
|
||||||
|
|
||||||
import { stripRteStyle } from '@/helpers/text-helper';
|
import { stripRteStyle } from '@/helpers/text-helper';
|
||||||
|
|
@ -51,7 +51,7 @@ export default {
|
||||||
stripRteStyle: Boolean,
|
stripRteStyle: Boolean,
|
||||||
subContentProperty: String,
|
subContentProperty: String,
|
||||||
subHeaderClasses: String,
|
subHeaderClasses: String,
|
||||||
subTextClasses: String,
|
subTextClasses: String
|
||||||
},
|
},
|
||||||
emits: ['click-event'],
|
emits: ['click-event'],
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -103,10 +103,10 @@ export default {
|
||||||
alternateFormatting() {
|
alternateFormatting() {
|
||||||
// override for service-packages unique style
|
// override for service-packages unique style
|
||||||
if (this.issContainingPage?.toLowerCase() === 'service-packages') {
|
if (this.issContainingPage?.toLowerCase() === 'service-packages') {
|
||||||
return 'service-packages-subtext mt-4 mb-4 px-5';
|
return 'service-packages-subtext my-4';
|
||||||
}
|
}
|
||||||
return this.darkGraySubText ? 'dark-gray' : 'light-gray';
|
return this.darkGraySubText ? 'dark-gray' : 'light-gray';
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
doesCopyContainRouterLink,
|
doesCopyContainRouterLink,
|
||||||
|
|
@ -116,8 +116,8 @@ export default {
|
||||||
getRouterLinkHtmlStringFromCopy,
|
getRouterLinkHtmlStringFromCopy,
|
||||||
clickEvent() {
|
clickEvent() {
|
||||||
this.$emit('click-event');
|
this.$emit('click-event');
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-md-6 col-xl-4">
|
<div class="col-md-6 col-xl-4">
|
||||||
<siteSubHeader
|
<siteSubHeader
|
||||||
|
justification="left"
|
||||||
cmsWidgetName="SiteSubHeaderWidget"
|
cmsWidgetName="SiteSubHeaderWidget"
|
||||||
issContainingPage="service-packages" />
|
issContainingPage="service-packages" />
|
||||||
<servicePackageQuestion
|
<servicePackageQuestion
|
||||||
|
|
@ -34,7 +35,9 @@
|
||||||
@ForwardClicked="forwardButtonAction" />
|
@ForwardClicked="forwardButtonAction" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<loadingModal ref="loadingModal" :textSlides="loadingText" />
|
<loadingModal
|
||||||
|
ref="loadingModal"
|
||||||
|
:textSlides="loadingText" />
|
||||||
<contentGroupModal
|
<contentGroupModal
|
||||||
ref="RainDefenseModal"
|
ref="RainDefenseModal"
|
||||||
cmsWidgetName="RainDefenseModal" />
|
cmsWidgetName="RainDefenseModal" />
|
||||||
|
|
@ -44,7 +47,9 @@
|
||||||
<contentGroupModal
|
<contentGroupModal
|
||||||
ref="RearWiperModal"
|
ref="RearWiperModal"
|
||||||
cmsWidgetName="RearWiperModal" />
|
cmsWidgetName="RearWiperModal" />
|
||||||
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
<contentGroupModal
|
||||||
|
ref="RecalModal"
|
||||||
|
cmsWidgetName="RecalModal" />
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -80,7 +85,7 @@ export default {
|
||||||
Form,
|
Form,
|
||||||
servicePackageQuestion,
|
servicePackageQuestion,
|
||||||
loadingModal,
|
loadingModal,
|
||||||
contentGroupModal,
|
contentGroupModal
|
||||||
},
|
},
|
||||||
mixins: [baseFormMixin],
|
mixins: [baseFormMixin],
|
||||||
async beforeRouteEnter(to, from, next) {
|
async beforeRouteEnter(to, from, next) {
|
||||||
|
|
@ -93,20 +98,20 @@ export default {
|
||||||
const promiseResultMap = [
|
const promiseResultMap = [
|
||||||
{
|
{
|
||||||
resultKey: 'cmsContent',
|
resultKey: 'cmsContent',
|
||||||
promise: cmsContentPromise,
|
promise: cmsContentPromise
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
resultKey: 'wipers',
|
resultKey: 'wipers',
|
||||||
promise: wipersPromise,
|
promise: wipersPromise
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
resultKey: 'rainDefense',
|
resultKey: 'rainDefense',
|
||||||
promise: rainDefensePromise,
|
promise: rainDefensePromise
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
resultKey: 'supportingItems',
|
resultKey: 'supportingItems',
|
||||||
promise: supportingItemsPromise,
|
promise: supportingItemsPromise
|
||||||
},
|
}
|
||||||
];
|
];
|
||||||
const resultMap = await settleAllPromises(promiseResultMap);
|
const resultMap = await settleAllPromises(promiseResultMap);
|
||||||
|
|
||||||
|
|
@ -117,19 +122,17 @@ export default {
|
||||||
resultMap.rainDefense,
|
resultMap.rainDefense,
|
||||||
...resultMap.supportingItems,
|
...resultMap.supportingItems,
|
||||||
...resultMap.wipers,
|
...resultMap.wipers,
|
||||||
...clonedGlassParts,
|
...clonedGlassParts
|
||||||
];
|
];
|
||||||
|
|
||||||
let hasBailedOut = false;
|
let hasBailedOut = false;
|
||||||
const pricingResults = await store
|
const pricingResults = await store
|
||||||
.getPriceOrderItems(availableLineItems)
|
.getPriceOrderItems(availableLineItems)
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
useMainStore().setBailout(
|
useMainStore().setBailout(bailoutMessage.pricingResponseError(
|
||||||
bailoutMessage.pricingResponseError(
|
availableLineItems.map((li) => li.partNumber),
|
||||||
availableLineItems.map((li) => li.partNumber),
|
{ code: err.code, message: err.message, data: err.data }
|
||||||
{ code: err.code, message: err.message, data: err.data }
|
));
|
||||||
)
|
|
||||||
);
|
|
||||||
hasBailedOut = true;
|
hasBailedOut = true;
|
||||||
next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
|
next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
|
||||||
});
|
});
|
||||||
|
|
@ -155,17 +158,17 @@ export default {
|
||||||
'Looking for dates',
|
'Looking for dates',
|
||||||
'Searching for times',
|
'Searching for times',
|
||||||
'Nearly there',
|
'Nearly there',
|
||||||
'Finishing up',
|
'Finishing up'
|
||||||
],
|
],
|
||||||
rules: {
|
rules: {
|
||||||
optionRequired: globalRules.OPTION_REQUIRED,
|
optionRequired: globalRules.OPTION_REQUIRED
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
PriceDisclaimerText() {
|
PriceDisclaimerText() {
|
||||||
return this.getCmsContent('PriceDisclaimerWidget', 'Text');
|
return this.getCmsContent('PriceDisclaimerWidget', 'Text');
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
openModalAction(modalName) {
|
openModalAction(modalName) {
|
||||||
|
|
@ -173,11 +176,11 @@ export default {
|
||||||
},
|
},
|
||||||
arePagePrerequisitesValid() {
|
arePagePrerequisitesValid() {
|
||||||
return (
|
return (
|
||||||
store.order.serviceLocation.zipCode &&
|
store.order.serviceLocation.zipCode
|
||||||
store.order.serviceLocation.zipCodeCtu &&
|
&& store.order.serviceLocation.zipCodeCtu
|
||||||
(store.order.damage.isRepair ||
|
&& (store.order.damage.isRepair
|
||||||
(store.order.lineItems?.glassParts != null &&
|
|| (store.order.lineItems?.glassParts != null
|
||||||
store.order.lineItems.glassParts.length > 0))
|
&& store.order.lineItems.glassParts.length > 0))
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
vapsItemsSelectedAction(vapsItemsSelected) {
|
vapsItemsSelectedAction(vapsItemsSelected) {
|
||||||
|
|
@ -187,12 +190,10 @@ export default {
|
||||||
const parts = {
|
const parts = {
|
||||||
glassParts: this.pricedGlassParts,
|
glassParts: this.pricedGlassParts,
|
||||||
supportingItems: this.supportingItems,
|
supportingItems: this.supportingItems,
|
||||||
vaps: this.selectedVaps,
|
vaps: this.selectedVaps
|
||||||
};
|
};
|
||||||
if (!allGlassPartsAndItemsHavePrices(parts)) {
|
if (!allGlassPartsAndItemsHavePrices(parts)) {
|
||||||
window.console.error(
|
window.console.error('One or more items have no price assigned!');
|
||||||
'One or more items have no price assigned!'
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
if (this.pricedGlassParts.length > 0) {
|
if (this.pricedGlassParts.length > 0) {
|
||||||
store.updateGlassParts(this.pricedGlassParts);
|
store.updateGlassParts(this.pricedGlassParts);
|
||||||
|
|
@ -204,8 +205,8 @@ export default {
|
||||||
this.navigationScenarios.CLICKED_FORWARD,
|
this.navigationScenarios.CLICKED_FORWARD,
|
||||||
this.$route
|
this.$route
|
||||||
);
|
);
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -522,12 +522,6 @@ export default {
|
||||||
flex: 0 auto;
|
flex: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.damage-location-question {
|
|
||||||
span {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.button-question,
|
.button-question,
|
||||||
.windshield-damage-type-question,
|
.windshield-damage-type-question,
|
||||||
.damage-location-question {
|
.damage-location-question {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue