Merge pull request #520 from Safelite/feature/richardson/SiteHeaderPoc
Site header proof of concept
This commit is contained in:
brich1212safe
GitHub
commit
09a3a52554
5 changed files with 64 additions and 16 deletions
|
|
@ -1,3 +1,8 @@
|
|||
/* eslint-disable no-use-before-define */
|
||||
/* eslint-disable no-param-reassign */
|
||||
/* eslint-disable jsdoc/require-param-type */
|
||||
/* eslint-disable jsdoc/require-param-description */
|
||||
/* eslint-disable jsdoc/require-returns */
|
||||
import dynamicStrings from '@/constants/dynamic-strings';
|
||||
import { useMainStore } from '@/store';
|
||||
|
||||
|
|
@ -174,6 +179,45 @@ export function fetchCmsContentForPage(issPage) {
|
|||
);
|
||||
}
|
||||
|
||||
export function fetchGlobalCmsContent(issComponent) {
|
||||
const store = useMainStore();
|
||||
|
||||
return (
|
||||
store.getPageData(issComponent)
|
||||
.then((baseResponse) => processPageData(baseResponse, null)));
|
||||
}
|
||||
|
||||
export function updateCmsSiteHeader(cmsResponse) {
|
||||
const clientCmsSiteHeader = getCmsSiteHeader(cmsResponse);
|
||||
useMainStore().issConfig.clientHeader = clientCmsSiteHeader;
|
||||
}
|
||||
|
||||
function getCmsSiteHeader(cmsResponse) {
|
||||
if (cmsResponse?.SiteHeaderWidget) {
|
||||
const siteHeader = cmsResponse?.SiteHeaderWidget;
|
||||
if (siteHeader.Answers) {
|
||||
const { parentAccountNumber } = useMainStore().issConfig;
|
||||
let headerAnswersToUse = siteHeader.Answers
|
||||
.find((answer) => answer.AccountNumber === parentAccountNumber.toString());
|
||||
if (headerAnswersToUse === null) {
|
||||
headerAnswersToUse = siteHeader.Answers
|
||||
.find((answer) => answer.AccountNumber === '0');
|
||||
}
|
||||
|
||||
if (headerAnswersToUse) {
|
||||
return {
|
||||
altText: headerAnswersToUse.AltText,
|
||||
clientName: headerAnswersToUse.ClientName,
|
||||
hexCode: headerAnswersToUse.HexCode,
|
||||
imageId: headerAnswersToUse.ImageId,
|
||||
imageUrl: headerAnswersToUse.AnswerImageUrl
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
/**
|
||||
* @function mapStringToModal
|
||||
* @param str
|
||||
|
|
@ -476,6 +520,7 @@ export function doesCopyContainTextLink(copy) {
|
|||
export function setupModalLinks(context) {
|
||||
context.$nextTick(() => {
|
||||
const elements = document.getElementsByClassName('modal-text');
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const element of elements) {
|
||||
const target = element.getAttribute('modalTarget');
|
||||
if (target) {
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
<script>
|
||||
import menuModal from '@/iss-components/site-header/menu-modal/menu-modal.vue';
|
||||
import alert from '@/ux-components/alert/alert.vue';
|
||||
import { useMainStore } from '@/store';
|
||||
import eventBus from '@/helpers/event-bus/event-bus';
|
||||
import { globalEvents } from '@/constants/events';
|
||||
|
||||
|
|
@ -45,19 +46,19 @@ export default ({
|
|||
messageHeadline: '',
|
||||
type: ''
|
||||
},
|
||||
headerAnswers: null
|
||||
cmsClientHeader: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
imageSrc() {
|
||||
return this.headerAnswers ? this.headerAnswers.AnswerImageUrl : '';
|
||||
return this.cmsClientHeader ? this.cmsClientHeader.imageUrl : '';
|
||||
},
|
||||
altText() {
|
||||
return this.headerAnswers ? this.headerAnswers.AltText : '';
|
||||
return this.cmsClientHeader ? this.cmsClientHeader.altText : '';
|
||||
},
|
||||
logoBackgroundStyle() {
|
||||
return {
|
||||
'background-color': this.headerAnswers ? this.headerAnswers.HexCode : '#FFFFFF'
|
||||
'background-color': this.cmsClientHeader ? this.cmsClientHeader.hexCode : '#FFFFFF'
|
||||
};
|
||||
}
|
||||
},
|
||||
|
|
@ -85,10 +86,9 @@ export default ({
|
|||
},
|
||||
methods: {
|
||||
setupHeader() {
|
||||
const answers = this.getCmsContent(this.cmsWidgetName, 'Answers');
|
||||
if (Array.isArray(answers)) {
|
||||
this.headerAnswers = answers.filter((x) => x.AccountNumber == this.mainStore.issConfig.parentAccountNumber)[0];
|
||||
this.headerAnswers = !this.headerAnswers ? answers.filter((x) => x.AccountNumber === '0')[0] : this.headerAnswers;
|
||||
const { clientHeader } = useMainStore().issConfig;
|
||||
if (clientHeader) {
|
||||
this.cmsClientHeader = clientHeader;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,12 +64,10 @@ export default {
|
|||
|
||||
if (resp?.data.active && resp?.data.accountName.length > 0) {
|
||||
if (resp.data.authentication === 'RSAToken') {
|
||||
const token = queryStringParams.token;
|
||||
const signature = queryStringParams.signature;
|
||||
|
||||
const { token, signature } = queryStringParams;
|
||||
const vsigResp = await validateISSClientSignature(clientTag, token, signature);
|
||||
this.mainStore.issConfig.isAuthenticated = vsigResp?.data?.valid ?? false;
|
||||
|
||||
this.mainStore.issConfig.isAuthenticated = vsigResp?.data?.valid ?? false;
|
||||
if (this.mainStore.issConfig.isAuthenticated) {
|
||||
authorized = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-qu
|
|||
import textBlock from '@/digital-components/text-block/text-block.vue';
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import { fetchCmsContentForPage, fetchGlobalCmsContent, updateCmsSiteHeader } from '@/helpers/cms-content-helper';
|
||||
import settleAllPromises from '@/helpers/layout-helper';
|
||||
import { required, regex } from '@/helpers/validation-rules';
|
||||
import errorMessages from '@/constants/error-messages';
|
||||
|
|
@ -226,19 +226,24 @@ export default {
|
|||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
const cmsGlobalSiteHeaderContentPromise = fetchGlobalCmsContent('iss-siteheader');
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'globalSiteHeaderCmsContent',
|
||||
promise: cmsGlobalSiteHeaderContentPromise
|
||||
}
|
||||
];
|
||||
|
||||
// use resultMap to populate layout content.
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
next((vm) => {
|
||||
updateCmsSiteHeader(resultMap.globalSiteHeaderCmsContent);
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
},
|
||||
|
|
@ -317,7 +322,6 @@ export default {
|
|||
this.navigateForward();
|
||||
});
|
||||
},
|
||||
|
||||
navigateForward() {
|
||||
if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) {
|
||||
this.$router.navigate(
|
||||
|
|
@ -354,7 +358,6 @@ export default {
|
|||
);
|
||||
}
|
||||
},
|
||||
|
||||
getWelcomePageModelFromStore() {
|
||||
return {
|
||||
policyNumber: this.mainStore.order.policy.policyNumber,
|
||||
|
|
|
|||
|
|
@ -173,6 +173,7 @@ const getDefaultState = () => ({
|
|||
issConfig: {
|
||||
clientName: 'Generic Insurance', // this is the default and will be overriden by the client's name
|
||||
clientDisplayName: 'Generic Insurance', // this is the default and will be overridden by the client's name or client display name.
|
||||
clientHeader: {},
|
||||
styleSheet: '', // Stylesheet used by the client.
|
||||
parentAccountNumber: 0, // Parent account number used by the client.
|
||||
isCoverageEnabled: false, // Indicates if we should be calling coverage on this flow.
|
||||
|
|
@ -1462,6 +1463,7 @@ export const useMainStore = defineStore({
|
|||
resetISSConfigState() {
|
||||
this.issConfig.clientName = 'Generic Insurance';
|
||||
this.issConfig.clientDisplayName = 'Generic Insurance';
|
||||
this.issConfig.clientHeader = {};
|
||||
this.issConfig.parentAccountNumber = 0;
|
||||
this.issConfig.styleSheet = '';
|
||||
this.issConfig.isCoverageEnabled = false;
|
||||
|
|
|
|||
Loading…
Reference in a new issue