jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #715 from Safelite/BRM-misc-styling-issues

Browse source 
Fix minor style issues on ISS.
This commit is contained in:
katiekroell 2024-05-23 17:02:33 -04:00 committed by GitHub
commit a4c922a35c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 49 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -6,7 +6,7 @@
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2 mb-5">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
</div> </div>
</div> </div>
@ -74,7 +74,7 @@ export default {
addressQuestions, addressQuestions,
siteFooter, siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form
}, },
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -85,8 +85,8 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise
}, }
]; ];
// use resultMap to populate layout content. // use resultMap to populate layout content.
@ -106,8 +106,8 @@ export default {
vehiclesFound: [], vehiclesFound: [],
rules: { rules: {
firstName: globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED, firstName: globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED, lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED
}, }
}; };
}, },
computed: { computed: {
@ -116,7 +116,7 @@ export default {
}, },
vehiclesCount() { vehiclesCount() {
return this.vehiclesFound.length; return this.vehiclesFound.length;
}, }
}, },
methods: { methods: {
async forwardButtonAction() { async forwardButtonAction() {
@ -150,13 +150,13 @@ export default {
this.mainStore.order.customer.address.streetAddress2, this.mainStore.order.customer.address.streetAddress2,
city: this.mainStore.order.customer.address.city, city: this.mainStore.order.customer.address.city,
state: this.mainStore.order.customer.address.state, state: this.mainStore.order.customer.address.state,
zipCode: this.mainStore.order.customer.address.zipCode, zipCode: this.mainStore.order.customer.address.zipCode
}, },
firstName: this.mainStore.order.customer.firstName, firstName: this.mainStore.order.customer.firstName,
lastName: this.mainStore.order.customer.lastName, lastName: this.mainStore.order.customer.lastName
}; };
}, }
}, }
}; };
</script> </script>

37
src/layouts/tpa-confirmation/tpa-confirmation.vue
View file

@ -19,7 +19,7 @@
class="mb-4" class="mb-4"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />
<div class="text-center text-color--black pb-2 fs-5"> <div class="d-flex justify-content-center align-items-center text-color--black pb-2 fs-5">
<img :src="tpaConfirmationImage" /> <img :src="tpaConfirmationImage" />
<span <span
class="ms-2" class="ms-2"
@ -56,6 +56,7 @@
class="mb-4 small" /> class="mb-4 small" />
<deductibleBox <deductibleBox
ref="deductibleBox" ref="deductibleBox"
class="px-3"
:value="deductibleBoxValue" /> :value="deductibleBoxValue" />
</div> </div>
<siteFooter <siteFooter
@ -82,7 +83,7 @@ import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vu
// Supporting files // Supporting files
import { import {
fetchCmsContentForPage, fetchCmsContentForPage,
processIfStatements, processIfStatements
} from '@/helpers/cms-content-helper'; } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper'; import settleAllPromises from '@/helpers/layout-helper';
import { Form } from 'vee-validate'; import { Form } from 'vee-validate';
@ -91,7 +92,7 @@ import { useMainStore } from '@/store';
import { import {
toTitleCase, toTitleCase,
toDisplayPhoneNumber, toDisplayPhoneNumber,
formatAmountInDollars, formatAmountInDollars
} from '@/helpers/text-helper.js'; } from '@/helpers/text-helper.js';
import bailoutMessage from '@/constants/bailoutMessage'; import bailoutMessage from '@/constants/bailoutMessage';
@ -106,7 +107,7 @@ export default {
textBlock, textBlock,
deductibleBox, deductibleBox,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form
}, },
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -117,12 +118,12 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise
}, },
{ {
resultKey: 'accountInfo', resultKey: 'accountInfo',
promise: accountInfoPromise, promise: accountInfoPromise
}, }
]; ];
// use resultMap to populate layout content. // use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -195,14 +196,10 @@ export default {
return useMainStore().order.currentDeductible; return useMainStore().order.currentDeductible;
}, },
preferredShopName() { preferredShopName() {
return toTitleCase( return toTitleCase(useMainStore().order.serviceLocation.provider.companyName);
useMainStore().order.serviceLocation.provider.companyName
);
}, },
preferredShopPhoneNumber() { preferredShopPhoneNumber() {
return this.toDisplayPhoneNumber( return this.toDisplayPhoneNumber(useMainStore().order.serviceLocation.provider.phoneNumber);
useMainStore().order.serviceLocation.provider.phoneNumber
);
}, },
isVerified() { isVerified() {
return useMainStore().order.payment.insuranceCoverage.isVerified; return useMainStore().order.payment.insuranceCoverage.isVerified;
@ -214,16 +211,12 @@ export default {
return this.mainStore.issConfig.successReturnURL; return this.mainStore.issConfig.successReturnURL;
}, },
carrierPhoneNumber() { carrierPhoneNumber() {
return this.toDisplayPhoneNumber( return this.toDisplayPhoneNumber(useMainStore().order.carrierPhoneNumber);
useMainStore().order.carrierPhoneNumber }
);
},
}, },
mounted() { mounted() {
if (this.carrierUrl) { if (this.carrierUrl) {
this.$refs.siteFooter.updateButtonText( this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`);
`Go back to ${this.carrierName}`
);
} }
}, },
methods: { methods: {
@ -249,8 +242,8 @@ export default {
}, },
toDisplayPhoneNumber, toDisplayPhoneNumber,
formatAmountInDollars, formatAmountInDollars,
processIfStatements, processIfStatements
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

51
src/layouts/tpa-submit/tpa-submit.vue
View file

@ -56,7 +56,9 @@
<div <div
v-for="(section, index) in sections" v-for="(section, index) in sections"
:key="section.title"> :key="section.title">
<hr v-if="index !== 0" class="my-3" /> <hr
v-if="index !== 0"
class="my-3" />
<reviewBlock <reviewBlock
:id="'review-block-' + index" :id="'review-block-' + index"
:customHeaderText="section.title" :customHeaderText="section.title"
@ -83,6 +85,7 @@
class="mb-4 px-4 small text-color--darker-gray" /> class="mb-4 px-4 small text-color--darker-gray" />
<deductibleBox <deductibleBox
ref="deductibleBox" ref="deductibleBox"
class="px-3"
:value="deductibleBoxValue" /> :value="deductibleBoxValue" />
</div> </div>
<siteFooter <siteFooter
@ -115,7 +118,7 @@ import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import { import {
fetchCmsContentForPage, fetchCmsContentForPage,
processIfStatements, processIfStatements,
getStringWithCustomValues, getStringWithCustomValues
} from '@/helpers/cms-content-helper.js'; } from '@/helpers/cms-content-helper.js';
import { Form } from 'vee-validate'; import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from '@/mixins/base-form-mixin.js';
@ -125,11 +128,11 @@ import {
toTitleCase, toTitleCase,
toDisplayPhoneNumber, toDisplayPhoneNumber,
formatAddress, formatAddress,
formatAmountInDollars, formatAmountInDollars
} from '@/helpers/text-helper.js'; } from '@/helpers/text-helper.js';
import { import {
getDamageDisplayContent, getDamageDisplayContent,
getLocationAnswer, getLocationAnswer
} from '@/helpers/damage-review-content-generator.js'; } from '@/helpers/damage-review-content-generator.js';
import damageLocationsSelected from '@/constants/damage-locations-selected.js'; import damageLocationsSelected from '@/constants/damage-locations-selected.js';
@ -147,7 +150,7 @@ export default {
siteFooter, siteFooter,
contactDetailsDrawer, contactDetailsDrawer,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form
}, },
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -170,16 +173,16 @@ export default {
vehicle: 'VehicleSubTitle', vehicle: 'VehicleSubTitle',
damage: 'DamageSubTitle', damage: 'DamageSubTitle',
shop: 'PreferredShopSubTitle', shop: 'PreferredShopSubTitle',
contactInfo: 'ContactDetailsSubTitle', contactInfo: 'ContactDetailsSubTitle'
}, },
damageLocations: 'DamageLocationsWidget', damageLocations: 'DamageLocationsWidget',
orderDetails: 'OrderDetailsContent', orderDetails: 'OrderDetailsContent',
footer: 'SiteFooterWidget', footer: 'SiteFooterWidget'
}, },
companyName, companyName,
customValueMap: { customValueMap: {
glassShop: companyName, glassShop: companyName
}, }
}; };
}, },
computed: { computed: {
@ -250,27 +253,21 @@ export default {
return [line]; return [line];
}, },
locationAnswers() { locationAnswers() {
return this.getInputQuestionWidgetAnswersNullSafe( return this.getInputQuestionWidgetAnswersNullSafe(this.widget.damageLocations);
this.widget.damageLocations
);
}, },
driverSideDamageAnswers() { driverSideDamageAnswers() {
const answerContent = getLocationAnswer( const answerContent = getLocationAnswer(
damageLocationsSelected.DRIVER, damageLocationsSelected.DRIVER,
this.locationAnswers this.locationAnswers
); );
return this.getInputQuestionWidgetAnswersNullSafe( return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
answerContent?.SubWidgetName
);
}, },
passengerSideDamageAnswers() { passengerSideDamageAnswers() {
const answerContent = getLocationAnswer( const answerContent = getLocationAnswer(
damageLocationsSelected.PASSENGER, damageLocationsSelected.PASSENGER,
this.locationAnswers this.locationAnswers
); );
return this.getInputQuestionWidgetAnswersNullSafe( return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
answerContent?.SubWidgetName
);
}, },
getDamageLines() { getDamageLines() {
const { glassToReplace, isRepair } = useMainStore().order.damage; const { glassToReplace, isRepair } = useMainStore().order.damage;
@ -297,7 +294,7 @@ export default {
return [ return [
toTitleCase(this.companyName ?? ''), toTitleCase(this.companyName ?? ''),
displayAddress, displayAddress,
displayPhoneNumber, displayPhoneNumber
]; ];
}, },
getContactInfoLines() { getContactInfoLines() {
@ -306,9 +303,9 @@ export default {
return [ return [
`${firstName} ${lastName}`, `${firstName} ${lastName}`,
emailAddress ?? '', emailAddress ?? '',
toDisplayPhoneNumber(servicePhone), toDisplayPhoneNumber(servicePhone)
]; ];
}, }
}, },
methods: { methods: {
setSections() { setSections() {
@ -332,16 +329,14 @@ export default {
this.widget.subheader.shop, this.widget.subheader.shop,
this.getPreferredShopLines, this.getPreferredShopLines,
() => () =>
this.navigate( this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)
this.navigationScenarios.EDIT_PREFERRED_SHOP
)
), ),
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
this.getSection( this.getSection(
this.widget.subheader.contactInfo, this.widget.subheader.contactInfo,
this.getContactInfoLines, this.getContactInfoLines,
this.openContactDetailsModal this.openContactDetailsModal
), )
]; ];
}, },
getSection(widgetName, lines, onClick) { getSection(widgetName, lines, onClick) {
@ -351,7 +346,7 @@ export default {
widgetFields.TEXT_BLOCK_WIDGET.TEXT widgetFields.TEXT_BLOCK_WIDGET.TEXT
), ),
lines, lines,
onClickEdit: onClick, onClickEdit: onClick
}; };
}, },
forwardButtonAction() { forwardButtonAction() {
@ -374,8 +369,8 @@ export default {
}, },
openContactDetailsModal() { openContactDetailsModal() {
this.$refs.contactDetailsDrawer.openModal(); this.$refs.contactDetailsDrawer.openModal();
}, }
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>