INSR-6047 - New elements and functionality

Page is functional and has all necessary elements
No styling done
This commit is contained in:
scottkiener-at-safelite 2026-01-14 09:17:58 -05:00
parent d56629b346
commit 55f7dcf0fb

View file

@ -15,16 +15,26 @@
id="sub-header"
cmsWidgetName="SiteSubHeader"
class="mb-0 mt-4 text-center" />
<buttonQuestion
ref="buttonQuestion"
v-model="selectedProvider"
class="provider-preference"
questionText="Select an option:"
:answers="prefAnswers"
groupName="prefQuestions"
buttonTypeString="providerPrefRadio"
:validationRules="rules.optionRequired"
isRequired />
<div
class="body-text"
v-html="scheduleWithSafeliteText"></div>
<buttonMain
ref="buttonMain"
variant="navigation"
buttonText="Schedule now"
:class="
(disableForwardAction || isForwardActionDisabled) &&
'form-test-invalid'
"
@clickEvent="forwardButtonAction(options.SAFELITE)" />
<div
class="body-text"
v-html="scheduleWithOtherText"></div>
<textLink
linkType="navigation"
text="Find another shop"
href="#"
@clickEvent="forwardButtonAction(options.TPA)" />
<siteFooter
:ref="SITE_FOOTER_REF_NAME"
class="mt-5"
@ -33,6 +43,7 @@
:isForwardButtonNavigationDisabled="isForwardNavigationDisabled"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
@ -80,6 +91,8 @@ import globalRules from '@/constants/global-rules';
import bailoutMessage from '@/constants/bailoutMessage';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
import showIssLoadingModal from '@/helpers/loading-modal-helper';
import textLink from '@/ux-components/text-link/text-link.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue';
const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
const RECAL_MODAL_REF_NAME = 'RecalModal';
@ -97,10 +110,12 @@ export default {
// eslint-disable-next-line vue/no-reserved-component-names
Form,
buttonQuestion,
buttonMain,
steeringModal,
shopPreferenceModal,
tpaRecalModal,
contentGroupModal
contentGroupModal,
textLink
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -176,6 +191,15 @@ export default {
},
ackError() {
return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
},
scheduleWithSafeliteText() {
return this.getCmsContent('ScheduleWithSafeliteText', 'BodyText');
},
scheduleWithOtherText() {
return this.getCmsContent('ScheduleWithOtherText', 'BodyText');
},
options() {
return options;
}
},
watch: {
@ -223,41 +247,42 @@ export default {
showIssLoadingModal(true);
this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
},
forwardButtonAction() {
if (this.selectedProvider) {
let scenario = null;
switch (this.selectedProvider) {
case options.SAFELITE:
this.mainStore.updateIsSafeliteProvider(true);
forwardButtonAction(selectedProvider) {
console.log('forwardButtonAction', selectedProvider);
let scenario = null;
switch (selectedProvider) {
case options.SAFELITE:
this.mainStore.updateIsSafeliteProvider(true);
scenario =
this.navigationScenarios
.CLICKED_FORWARD_WITH_SAFELITE;
break;
case options.TPA:
this.mainStore.updateIsSafeliteProvider(false);
console.log('enableTPAFlow', this.mainStore.issConfig.enableTPAFlow);
if (this.mainStore.issConfig.enableTPAFlow) {
console.log('hasRecalibrationPart', this.mainStore.hasRecalibrationPart);
if (this.mainStore.hasRecalibrationPart) {
this.$refs[TPA_RECAL_MODAL_REF_NAME].openModal();
return;
}
scenario =
this.navigationScenarios
.CLICKED_FORWARD_WITH_SAFELITE;
break;
case options.TPA:
this.mainStore.updateIsSafeliteProvider(false);
if (this.mainStore.issConfig.enableTPAFlow) {
if (this.mainStore.hasRecalibrationPart) {
this.$refs[TPA_RECAL_MODAL_REF_NAME].openModal();
return;
}
scenario =
this.navigationScenarios
.CLICKED_FORWARD_WITH_TPA_ENABLED;
} else {
this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
scenario =
this.navigationScenarios
.CLICKED_FORWARD_WITH_TPA_DISABLED;
}
break;
default:
}
this.navigateForward(scenario);
this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement
});
.CLICKED_FORWARD_WITH_TPA_ENABLED;
} else {
this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
scenario =
this.navigationScenarios
.CLICKED_FORWARD_WITH_TPA_DISABLED;
}
break;
default:
}
this.navigateForward(scenario);
this.mainStore.saveProviderPreferenceData({
selectedProvider: selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement
});
},
openStateSteeringModal() {
this.$refs[STEERING_MODAL_REF_NAME].openModal();