Merge branch 'develop' into feature/digital/SSR-313
This commit is contained in:
DavidAtSafelite
GitHub
commit
3fe4322528
11 changed files with 648 additions and 82 deletions
|
|
@ -150,6 +150,7 @@ function processWidgetItemForReplacement(widgetModel, key) {
|
|||
dynamicStrings.GLOBAL_STATE,
|
||||
getStoreValueFromString
|
||||
);
|
||||
|
||||
if (widgetModel[key].includes(dynamicStrings.GLOBAL_STATE)) {
|
||||
widgetModel[key] = mapStringToState(widgetModel[key]);
|
||||
}
|
||||
|
|
@ -184,6 +185,7 @@ function mapStringToModal(str) {
|
|||
const splitParams = params.split(',');
|
||||
|
||||
const bodyText = '<a modalTarget="' + splitParams[0] + '" class="modal-text" aria-label="Modal window">' + splitParams[1] + '</a>';
|
||||
|
||||
let returnVal = str.replace(linkToReplace, bodyText);
|
||||
|
||||
if (returnVal.includes(dynamicStrings.MODAL_LINK)) {
|
||||
|
|
@ -414,7 +416,6 @@ function getIfStatementRegexExpression() {
|
|||
// End of If Statement Processing Logic //
|
||||
//////////////////////////////////////////
|
||||
|
||||
|
||||
export function doesCopyContainTextLink(copy) {
|
||||
return copy.includes(dynamicStrings.TEXT_LINK);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,6 +76,11 @@
|
|||
this.mainStore.issConfig.clientName = data.accountName;
|
||||
this.mainStore.issConfig.accountNumber = data.accountNumber;
|
||||
this.mainStore.issConfig.styleSheet = data.styleSheet;
|
||||
this.mainStore.issConfig.isCoverageEnabled = data.coverageEnabled;
|
||||
|
||||
// NOTE: This is only here for testing purposes. Will be removed and replaced by actual token/signature validation when work is completed.
|
||||
if ( data.authentication == "RSAToken")
|
||||
this.mainStore.issConfig.isAuthenticated = true;
|
||||
|
||||
try
|
||||
{
|
||||
|
|
|
|||
81
src/layouts/payment-page/payment-page.vue
Normal file
81
src/layouts/payment-page/payment-page.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
|
||||
<div class="page-container-grouped-styles">
|
||||
<div class="fade-on-route-transition position-relative">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
|
||||
<div class="container-fluid pb-2">
|
||||
<p>Placeholder for payment page</p>
|
||||
<siteFooter
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
ref="siteFooter"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
@back-clicked="backButtonAction"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
<script>
|
||||
// Components
|
||||
import siteHeader from '@/iss-components/site-header/site-header';
|
||||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { Form } from "vee-validate";
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
import { useMainStore } from '@/store';
|
||||
|
||||
export default {
|
||||
name: "payment-page",
|
||||
mixins: [BaseFormMixin],
|
||||
data() {
|
||||
|
||||
},
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
return { mainStore };
|
||||
},
|
||||
async beforeRouteEnter(to, from, next)
|
||||
{
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},];
|
||||
|
||||
//use resultMap to populate layout content.
|
||||
let resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
},
|
||||
methods:
|
||||
{
|
||||
backButtonAction() {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
|
||||
forwardButtonAction() {
|
||||
},
|
||||
|
||||
navigateForward() {
|
||||
},
|
||||
},
|
||||
components: {
|
||||
siteHeader,
|
||||
siteFooter,
|
||||
Form,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
import { mount } from "@vue/test-utils"
|
||||
import providerPrefRadio from "./provider-pref-radio"
|
||||
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"
|
||||
|
||||
describe.skip("provider-pref-radio.vue", () => {
|
||||
it("Should include buttonLabel in html", async () => {
|
||||
// Arrange
|
||||
let { wrapper } = setupMocks({
|
||||
mountOptionsMockData: {
|
||||
propsData: mockProps,
|
||||
},
|
||||
})
|
||||
|
||||
// Act
|
||||
const outputHtml = wrapper.html()
|
||||
console.log(outputHtml);
|
||||
// Assert
|
||||
expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabel"]))
|
||||
})
|
||||
|
||||
it("Should include buttonLabelAuxillaryCopy in html", async () => {
|
||||
// Arrange
|
||||
let { wrapper } = setupMocks({
|
||||
mountOptionsMockData: {
|
||||
propsData: mockProps,
|
||||
},
|
||||
})
|
||||
|
||||
// Act
|
||||
const outputHtml = wrapper.html()
|
||||
|
||||
// Assert
|
||||
expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelAuxillaryCopy"]))
|
||||
})
|
||||
|
||||
it("Should include buttonLabelSubCopy in html", async () => {
|
||||
// Arrange
|
||||
let { wrapper } = setupMocks({
|
||||
mountOptionsMockData: {
|
||||
propsData: mockProps,
|
||||
},
|
||||
})
|
||||
|
||||
// Act
|
||||
const outputHtml = wrapper.html()
|
||||
|
||||
// Assert
|
||||
expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelSubCopy"]))
|
||||
})
|
||||
it("Should include buttonFooterCopy in html", async () => {
|
||||
// Arrange
|
||||
let { wrapper } = setupMocks({
|
||||
mountOptionsMockData: {
|
||||
propsData: mockProps,
|
||||
},
|
||||
})
|
||||
|
||||
// Act
|
||||
const outputHtml = wrapper.html()
|
||||
|
||||
// Assert
|
||||
expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonFooterCopy"]))
|
||||
})
|
||||
it("Should get 5 strings from getArrayOfListItemsFromRawCmsCopy when provided with a dashed (x5) buttonBodyCopy", async () => {
|
||||
// Arrange
|
||||
let { wrapper } = setupMocks({
|
||||
mountOptionsMockData: {
|
||||
propsData: mockProps,
|
||||
},
|
||||
})
|
||||
// Act
|
||||
const results = wrapper.vm.getArrayOfListItemsFromRawCmsCopy(wrapper.vm.buttonBodyCopy)
|
||||
|
||||
// Assert
|
||||
expect(results.length).toBe(5)
|
||||
})
|
||||
it("Should get strings from getArrayOfListItemsFromRawCmsCopy without dashes when provided with a dashed buttonBodyCopy", async () => {
|
||||
// Arrange
|
||||
let { wrapper } = setupMocks({
|
||||
mountOptionsMockData: {
|
||||
propsData: mockProps,
|
||||
},
|
||||
})
|
||||
|
||||
// Act
|
||||
const results = wrapper.vm.getArrayOfListItemsFromRawCmsCopy(wrapper.vm.buttonBodyCopy)
|
||||
|
||||
// Assert
|
||||
const fileredResults = results.filter((result) => {
|
||||
return result.includes(" -");
|
||||
})
|
||||
expect(fileredResults.length).toBe(0)
|
||||
})
|
||||
it("Should get 5 strings from getArrayOfListItemsFromRawCmsCopy when buttonBodyCopy has 6 total dashes, but one is empty ", async () => {
|
||||
// Arrange
|
||||
const moddedProps = mockProps
|
||||
moddedProps["buttonBodyCopy"] = "- buttonBodyCopy test copy - 2 - 3 - 4 - 5 -"
|
||||
let { wrapper } = setupMocks({
|
||||
mountOptionsMockData: {
|
||||
propsData: moddedProps,
|
||||
},
|
||||
})
|
||||
|
||||
// Act
|
||||
const results = wrapper.vm.getArrayOfListItemsFromRawCmsCopy(wrapper.vm.buttonBodyCopy)
|
||||
|
||||
// Assert
|
||||
expect(results.length).toBe(5)
|
||||
})
|
||||
})
|
||||
|
||||
const mockProps = {
|
||||
buttonLabel: 'buttonLabel test copy',
|
||||
buttonLabelAuxillaryCopy: 'buttonLabelAuxillaryCopy test copy',
|
||||
buttonLabelSubCopy: 'buttonLabelSubCopy test copy',
|
||||
buttonBodyCopy: '- buttonBodyCopy test copy - 2 - 3 - 4 - 5',
|
||||
buttonFooterCopy: 'buttonFooterCopy test copy'
|
||||
}
|
||||
|
||||
function setupMocks({ mountOptionsMockData = {} }) {
|
||||
const wrapper = mount(providerPrefRadio, {
|
||||
...mountOptionsMockData,
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
})
|
||||
|
||||
return { wrapper }
|
||||
}
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
<template>
|
||||
<baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
|
||||
<div class="package-label mb-4"
|
||||
:class="[this.buttonLabelSubCopy ? 'has-subheader' : '']"
|
||||
for="testradio">
|
||||
<div class="package-specs">
|
||||
<p class="m-0">
|
||||
<span v-html="this.buttonLabel"></span>
|
||||
<span class="pricing-info" v-html="this.buttonAuxiliaryCopy"></span>
|
||||
</p>
|
||||
<p class="sub-label m-0"
|
||||
v-if="this.buttonLabelSubCopy"
|
||||
v-html="this.buttonLabelSubCopy"></p>
|
||||
<div>
|
||||
<ul >
|
||||
<li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem" class="mb-0">
|
||||
<!-- no textLink -->
|
||||
<span v-if="!doesCopyContainTextLink(listItem)"
|
||||
v-html="listItem"></span>
|
||||
<!-- with textLink -->
|
||||
<template v-else
|
||||
v-for="copy in splitCopyOnCMSPlaceHolder(listItem)"
|
||||
:key="copy">
|
||||
<span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
|
||||
<span v-else>
|
||||
<textLink linkType="text"
|
||||
:text="getRouterLinkDisplayTextFromCopy(copy)"
|
||||
href="#!"
|
||||
@click-event="
|
||||
$emit('buttonEvent', {
|
||||
eventName: 'openModal',
|
||||
args: getRouterLinkRouteFromCopy(copy),
|
||||
})
|
||||
"
|
||||
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
|
||||
aria-label="Modal window" />
|
||||
</span>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- End of body text parsing -->
|
||||
<!--ms-n6-->
|
||||
<div class="package-footer fw-bold caption mt-4 ml-n4 mr-3"
|
||||
v-if="this.buttonFooterCopy"
|
||||
v-html="this.buttonFooterCopy"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</baseInputButton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseInputButton from '@/digital-components/base-input-button/base-input-button';
|
||||
import textLink from '@/ux-components/text-link/text-link';
|
||||
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
|
||||
import {
|
||||
getRouterLinkDisplayTextFromCopy,
|
||||
getRouterLinkRouteFromCopy,
|
||||
splitCopyOnCMSPlaceHolder,
|
||||
doesCopyContainTextLink,
|
||||
} from '@/helpers/cms-content-helper';
|
||||
export default {
|
||||
name: 'servicePackageRadio',
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
components: {
|
||||
baseInputButton,
|
||||
textLink,
|
||||
},
|
||||
computed: {
|
||||
arrayOfListItemsFromBodyText() {
|
||||
return this.getArrayOfListItemsFromRawCmsCopy(this.buttonBodyCopy);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getRouterLinkDisplayTextFromCopy,
|
||||
getRouterLinkRouteFromCopy,
|
||||
splitCopyOnCMSPlaceHolder,
|
||||
doesCopyContainTextLink,
|
||||
stripUlTagFromCopy(copy) {
|
||||
return copy;
|
||||
},
|
||||
getArrayOfListItemsFromRawCmsCopy(copy) {
|
||||
if (copy) {
|
||||
return copy
|
||||
.split('- ') //At some point we'll want a better delimiter
|
||||
.filter((lineItem) => lineItem);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ml-n4 {
|
||||
margin-left: -$spacer * 2;
|
||||
}
|
||||
.mr-3 {
|
||||
margin-right: $spacer * 1.5;
|
||||
}
|
||||
.package-main {
|
||||
.package-wrapper {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
|
||||
+ .package-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border: 1px solid $gray-300;
|
||||
box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
min-height: 60px;
|
||||
|
||||
&.has-subheader {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 1rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $gray-500;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 19px;
|
||||
top: 24px;
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
min-width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
+ .package-label {
|
||||
&:before {
|
||||
border: 1px solid #8e9292;
|
||||
box-shadow: 0px 0px 0px 4px #9fcee6, 0px 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .package-label {
|
||||
.package-specs {
|
||||
max-height: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
+ .package-label {
|
||||
.package-specs {
|
||||
.hide-when-closed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+ .package-label {
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
+ .package-label {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 1px $blue;
|
||||
}
|
||||
}
|
||||
|
||||
+ .package-label {
|
||||
&:after {
|
||||
background: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
+ .package-label {
|
||||
&:before {
|
||||
border: 2px solid $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.package-footer {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.package-specs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-height: 1000px;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
&.pricing-info {
|
||||
color: $green;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.sub-label {
|
||||
color: $green;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 1rem 0 0 -.6rem;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.714;
|
||||
|
||||
a {
|
||||
line-height: 1.714;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideaway {
|
||||
from {
|
||||
display: block;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(40px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -74,6 +74,12 @@ const ProviderPreferenceMockData = {
|
|||
return siteFooterWidgetMockData.ForwardButtonText;
|
||||
}
|
||||
}
|
||||
|
||||
if (cmsWidgetName === 'StateSteeringModal') {
|
||||
if (fieldName === 'BodyText') {
|
||||
return "{if:custom:OH}ohioText{end}{if:custom:CA}cali's Text{end}";
|
||||
}
|
||||
}
|
||||
|
||||
if (cmsWidgetName === 'ProviderPreference') {
|
||||
if (fieldName === 'QuestionText') {
|
||||
|
|
@ -106,13 +112,48 @@ const ProviderPreferenceMockData = {
|
|||
return { mockRoute, mockRouter, wrapper };
|
||||
}
|
||||
describe('provider-preference.vue', () => {
|
||||
test('"Continue" button is disabled when no Shop Location is selected.', () => {
|
||||
|
||||
test("getStateSpecificText returns true when values match", () => {
|
||||
const { wrapper } = setupMocks();
|
||||
|
||||
useMainStore().order.customer.address.state = "ohio";
|
||||
const actual = wrapper.vm.getStateSpecificText("Ohio")
|
||||
|
||||
expect(actual).toBeTruthy();
|
||||
});
|
||||
|
||||
test("getStateSpecificText returns false when values do not match", () => {
|
||||
const { wrapper } = setupMocks();
|
||||
|
||||
useMainStore().order.customer.address.state = "delaware";
|
||||
const actual = wrapper.vm.getStateSpecificText("Ohio")
|
||||
|
||||
expect(actual).toBeFalsy();
|
||||
});
|
||||
|
||||
test("getStateSpecificText should return correct value for state", () => {
|
||||
const { wrapper } = setupMocks();
|
||||
useMainStore().order.customer.address.state = "ca";
|
||||
|
||||
let actual = wrapper.vm.steeringModalBody;
|
||||
|
||||
expect(actual).toBe("cali's Text");
|
||||
|
||||
useMainStore().order.customer.address.state = "oH";
|
||||
|
||||
actual = wrapper.vm.steeringModalBody;
|
||||
|
||||
expect(actual).toBe("ohioText");
|
||||
});
|
||||
|
||||
test.skip('"Continue" button is disabled when no Shop Location is selected.', () => {
|
||||
const { wrapper } = setupMocks();
|
||||
|
||||
const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]');
|
||||
expect(continueButton.attributes()['aria-disabled']).toBe('true');
|
||||
});
|
||||
test('"Continue" button is enabled after a Shop Location is selected.', async () => {
|
||||
|
||||
test.skip('"Continue" button is enabled after a Shop Location is selected.', async () => {
|
||||
const { wrapper } = setupMocks();
|
||||
|
||||
const ProviderPreferenceWrapper = wrapper.findComponent({ name: 'provider-preference' });
|
||||
|
|
@ -127,7 +168,9 @@ describe('provider-preference.vue', () => {
|
|||
const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]');
|
||||
expect(continueButton.attributes()['aria-disabled']).toBe('false');
|
||||
});
|
||||
test('Select "Schedule with Safelite" then click "Continue". Navigates to "service-location" page.', async () => {
|
||||
|
||||
|
||||
test.skip('Select "Schedule with Safelite" then click "Continue". Navigates to "service-location" page.', async () => {
|
||||
const { mockRoute, mockRouter, wrapper } = setupMocks();
|
||||
|
||||
const ProviderPreferenceWrapper = wrapper.findComponent({ name: 'provider-preference' });
|
||||
|
|
@ -150,7 +193,7 @@ describe('provider-preference.vue', () => {
|
|||
*/
|
||||
});
|
||||
|
||||
test('Click the back button, trigger navigate function from Vue Router with CLICKED_BACK parameter.', async () => {
|
||||
test.skip('Click the back button, trigger navigate function from Vue Router with CLICKED_BACK parameter.', async () => {
|
||||
const { mockRoute, mockRouter, wrapper } = setupMocks();
|
||||
|
||||
await wrapper.get('[data-test-id="site-footer-back-button"]').trigger('click');
|
||||
|
|
|
|||
|
|
@ -4,53 +4,44 @@
|
|||
<div class="fade-on-route-transition position-relative">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
|
||||
<div class="select-car">
|
||||
<div class="container-fluid pb-2">
|
||||
<div class="row px-3">
|
||||
<div class="col">
|
||||
<div class="select-car-form rounded">
|
||||
<div v-html="ProviderPreferenceHeaderText" class="text-center mb-5 modal-link" ></div>
|
||||
<div
|
||||
v-html="ProviderPreferenceBodyText"
|
||||
class="mt-0 body-text"
|
||||
></div>
|
||||
|
||||
<buttonQuestion
|
||||
cmsWidgetName="ServiceLocationQuestion"
|
||||
:questionText="questionText"
|
||||
:answers="answersFromCms"
|
||||
buttonTypeString="listButton"
|
||||
isRequired
|
||||
v-model="SelectedshopLocation"
|
||||
validationRules="questions-required" />
|
||||
|
||||
<siteFooter
|
||||
<div>
|
||||
<siteFooter
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="isForwardActionDisabled"
|
||||
@backClicked="backButtonAction"
|
||||
@forwardClicked="forwardButtonAction"
|
||||
ref="siteFooter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
ref="siteFooter" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<contentGroupModal cmsWidgetName="ShopPreferenceDrawer"
|
||||
ref="ShopPreferenceDrawer"
|
||||
/>
|
||||
<modal
|
||||
ref="SteeringModal"
|
||||
modalId="SteeringModal"
|
||||
@footer-button-event="closeSteeringModal"
|
||||
:footerButtonText="steeringModalFooter">
|
||||
<h5 class="text-center">{{steeringModalHeader}}</h5>
|
||||
<div class="steeringModalBody">
|
||||
<div class="mb-4" >{{steeringModalBody}}</div>
|
||||
<div v-if="steeringModalBody2">{{steeringModalBody2}}</div>
|
||||
</div>
|
||||
</modal>
|
||||
</Form>
|
||||
</template>
|
||||
<script>
|
||||
// Import Supporting Files
|
||||
import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper';
|
||||
import { fetchCmsContentForPage, setupModalLinks, processIfStatements } from '@/helpers/cms-content-helper';
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal"
|
||||
import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal";
|
||||
import modal from "@/digital-components/modal/modal.vue"
|
||||
import { states } from "@/constants/states"
|
||||
|
||||
// Import Component
|
||||
import baseFormMixin from "@/mixins/base-form-mixin";
|
||||
|
|
@ -71,7 +62,8 @@ export default {
|
|||
siteSubHeader,
|
||||
Form,
|
||||
buttonQuestion,
|
||||
contentGroupModal
|
||||
contentGroupModal,
|
||||
modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -99,17 +91,29 @@ export default {
|
|||
ProviderPreferenceHeaderText(){
|
||||
return this.getCmsContent("ProviderPreference", "HeaderText");
|
||||
},
|
||||
ProviderPreferenceBodyText(){
|
||||
return this.getCmsContent("ProviderPreference", "BodyText");
|
||||
},
|
||||
questionText() {
|
||||
return this.getCmsContent("ServiceLocationQuestion", "QuestionText");
|
||||
return this.getCmsContent("ProviderPreference", "SubHeaderText");
|
||||
},
|
||||
answersFromCms() {
|
||||
return this.getCmsContent("ServiceLocationQuestion", "Answers");
|
||||
steeringModalHeader() {
|
||||
let header = this.getCmsContent("StateSteeringModal", "HeaderText");
|
||||
return header.replace("{custom:state}", states[this.mainStore.order.customer.address.state])
|
||||
},
|
||||
steeringModalBody() {
|
||||
const bodyText = this.getCmsContent("StateSteeringModal", "BodyText");
|
||||
return processIfStatements(bodyText, "custom", this.getStateSpecificText);
|
||||
},
|
||||
steeringModalBody2() {
|
||||
const bodyText = this.getCmsContent("StateSteeringModal", "BodyText2");
|
||||
return processIfStatements(bodyText, "custom", this.getStateSpecificText);
|
||||
},
|
||||
steeringModalFooter() {
|
||||
return this.getCmsContent("StateSteeringModal", "FooterText");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStateSpecificText(value) {
|
||||
return this.mainStore.order.customer.address.state?.toLowerCase() == value?.toLowerCase();
|
||||
},
|
||||
arePagePrerequisiteValid() {
|
||||
return true;
|
||||
},
|
||||
|
|
@ -125,10 +129,15 @@ export default {
|
|||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
|
||||
}
|
||||
},
|
||||
resetDependentState() {},
|
||||
closeSteeringModal() {
|
||||
this.$refs["SteeringModal"].closeModal();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setupModalLinks(this);
|
||||
if(this.steeringModalBody) {
|
||||
this.$refs["SteeringModal"].openModal();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -136,12 +145,6 @@ export default {
|
|||
#sub-header span{
|
||||
color: $black;
|
||||
}
|
||||
.body-text {
|
||||
color: $darker-gray;
|
||||
p, li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
.modal-link a{
|
||||
color: $blue-700;
|
||||
font-size: 14px;
|
||||
|
|
@ -154,4 +157,5 @@ export default {
|
|||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,38 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
|
||||
<div class="page-container-grouped-styles">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" class="siteHeader"/>
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" />
|
||||
<div class="fade-on-route-transition position-relative px-5 choose-option">
|
||||
|
||||
<buttonQuestion
|
||||
cmsWidgetName="ServiceTypeQuestionWidget"
|
||||
:questionText="questionText"
|
||||
:answers="answersFromCms"
|
||||
buttonTypeString="listCard"
|
||||
isRequired
|
||||
v-model="selectedValues"
|
||||
validationRules="selection-required"/>
|
||||
<div class="page-container-grouped-styles">
|
||||
<div class="fade-on-route-transition position-relative">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="select-car">
|
||||
<div class="container-fluid pb-2">
|
||||
<div class="row px-3">
|
||||
<div class="col">
|
||||
<div class="select-car-form rounded">
|
||||
<siteFooter
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@backClicked="backButtonAction"
|
||||
@forwardClicked="forwardButtonAction"
|
||||
ref="siteFooter"
|
||||
/>
|
||||
<buttonQuestion
|
||||
cmsWidgetName="ServiceTypeQuestionWidget"
|
||||
:questionText="questionText"
|
||||
:answers="answersFromCms"
|
||||
buttonTypeString="listCard"
|
||||
isRequired
|
||||
v-model="selectedValues"
|
||||
validationRules="selection-required"/>
|
||||
<div class="select-car">
|
||||
<div class="container-fluid pb-2">
|
||||
<div class="row px-3">
|
||||
<div class="col">
|
||||
<div class="select-car-form rounded">
|
||||
<siteFooter
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@backClicked="backButtonAction"
|
||||
@forwardClicked="forwardButtonAction"
|
||||
ref="siteFooter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,7 +43,7 @@
|
|||
</Form>
|
||||
</template>
|
||||
<script>
|
||||
// Import Supporting Files
|
||||
// Import Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
|
|
@ -82,7 +90,7 @@ export default {
|
|||
},
|
||||
answersFromCms() {
|
||||
return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisiteValid() {
|
||||
|
|
@ -90,8 +98,8 @@ export default {
|
|||
},
|
||||
backButtonAction() {
|
||||
/**
|
||||
* this.navigationScenarios comes from base-mixin
|
||||
*/
|
||||
* this.navigationScenarios comes from base-mixin
|
||||
*/
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
async forwardButtonAction() {},
|
||||
|
|
@ -117,30 +125,30 @@ export default {
|
|||
color: $black;
|
||||
}
|
||||
.question-text {
|
||||
& > span {
|
||||
& > span {
|
||||
line-height: 1.500rem;
|
||||
}
|
||||
}
|
||||
.list-card-content p {
|
||||
&:first-of-type {
|
||||
line-height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
&:not(:nth-of-type(1)){
|
||||
line-height: 1.250rem;
|
||||
line-height: 1.250rem;
|
||||
}
|
||||
}
|
||||
.siteHeader{
|
||||
.site-header{
|
||||
margin-bottom: 1.25rem !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.choose-option{
|
||||
.button-question >div {
|
||||
&:first-of-type {
|
||||
margin-bottom: 0.95rem;
|
||||
line-height: 1.500rem;
|
||||
}
|
||||
.button-question >div {
|
||||
&:first-of-type {
|
||||
margin-bottom: 0.95rem;
|
||||
line-height: 1.500rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-question{
|
||||
|
|
@ -149,4 +157,4 @@ export default {
|
|||
padding-left: 0rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,15 @@
|
|||
validationRules="policy-number-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4 px-3" v-if="this.displayPolicyZip">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
inputId="policyZipCode"
|
||||
cmsWidgetName="PolicyZipQuestion"
|
||||
isRequired
|
||||
ref="policyZip" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4 px-3">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
|
|
@ -168,6 +177,8 @@ defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
|
|||
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
|
||||
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
|
||||
defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
|
||||
defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_REQUIRED));
|
||||
defineRule("policy-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT));
|
||||
|
||||
defineRule("email-address-format",
|
||||
regex(
|
||||
|
|
@ -332,6 +343,14 @@ export default {
|
|||
},
|
||||
displayGlassOnlyQuestion(){
|
||||
return !!this.getCmsContent("GlassOnlyQuestion","QuestionText");
|
||||
},
|
||||
displayPolicyZip(){
|
||||
if(this.mainStore.issConfig.isAuthenticated){
|
||||
return false;
|
||||
}
|
||||
else{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -482,6 +482,15 @@ const routingTable = function(store) {
|
|||
destinationIssPageValue: issPageValues.REVIEW_ORDER
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
issPageValue: issPageValues.PAYMENT_PAGE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationIssPageValue: issPageValues.REVIEW_PAGE
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -100,7 +100,9 @@ const getDefaultState = () => {
|
|||
clientDisplayName: "Generic Insurance",
|
||||
styleSheet: "",
|
||||
accountNumber: 0,
|
||||
enableTPAFlow: false,
|
||||
isCoverageEnabled: false, // Indicates if we should be calling coverage on this flow.
|
||||
isAuthenticated: false, // Indicates if user is authenticated or not.
|
||||
enableTPAFlow: false, // Indicates if the TPA flow is supported for this client.
|
||||
returnURL: null,
|
||||
returnURL2: null
|
||||
}
|
||||
|
|
@ -699,6 +701,8 @@ export const useMainStore = defineStore({
|
|||
this.issConfig.clientDisplayName = "Generic Insurance";
|
||||
this.issConfig.accountNumber = 0;
|
||||
this.issConfig.styleSheet = "";
|
||||
this.issConfig.isCoverageEnabled = false;
|
||||
this.issConfig.isAuthenticated = false;
|
||||
this.issConfig.enableTPAFlow = false;
|
||||
this.issConfig.returnURL = null;
|
||||
this.issConfig.returnURL2 = null;
|
||||
|
|
|
|||
Loading…
Reference in a new issue