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

nightly

Browse source
This commit is contained in:
Jason Wheeler 2023-04-28 16:48:44 -04:00
parent bb216d1487
commit 7d3b781ce4
6 changed files with 84 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/digital-components/button-question/button-question.vue
View file

@ -67,8 +67,8 @@
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div v-if="!suppressError" class="row form-test-error mt-1"> <div v-if="!suppressError" >
<error-message <error-message class="row form-test-error mt-1"
:name="formatString(groupName)" :name="formatString(groupName)"
></error-message> ></error-message>
</div> </div>
@ -171,9 +171,11 @@ export default {
classes = "ui-radio d-flex"; classes = "ui-radio d-flex";
break; break;
case "servicePackageRadio": case "servicePackageRadio":
case "providerPrefRadio":
classes = "package-main"; classes = "package-main";
break; break;
case "providerPrefRadio":
classes = "option-main";
break;
} }
return classes; return classes;
}, },
@ -182,10 +184,17 @@ export default {
classes += this.isWide ? "col-12" : "col"; classes += this.isWide ? "col-12" : "col";
if (this.buttonTypeString == "radio") { switch(this.buttonTypeString) {
classes += " radio-button-container"; case "radio":
} else if (this.buttonTypeString == "servicePackageRadio" || this.buttonTypeString == "providerPrefRadio") { classes += " radio-button-container";
classes = "package-wrapper"; break;
case "servicePackageRadio":
classes = "package-wrapper";
break;
case "providerPrefRadio":
classes = "option-wrapper";
break;
default:
} }
return classes; return classes;

15
src/helpers/cms-content-helper.js
View file

@ -145,11 +145,14 @@ function findAndReplaceGlobalStateValues(widgetModel, widgetName) {
function processWidgetItemForReplacement(widgetModel, key) { function processWidgetItemForReplacement(widgetModel, key) {
// If we have a string, and it needs to be replaced. // If we have a string, and it needs to be replaced.
if (typeof widgetModel[key] === 'string') { if (typeof widgetModel[key] === 'string') {
widgetModel[key] = processIfStatements( if (widgetModel[key].includes("{if:"))
widgetModel[key], {
dynamicStrings.GLOBAL_STATE, widgetModel[key] = processIfStatements(
getStoreValueFromString widgetModel[key],
); dynamicStrings.GLOBAL_STATE,
getStoreValueFromString
);
}
if (widgetModel[key].includes(dynamicStrings.MODAL_LINK)) { if (widgetModel[key].includes(dynamicStrings.MODAL_LINK)) {
widgetModel[key] = mapStringToModal(widgetModel[key]); widgetModel[key] = mapStringToModal(widgetModel[key]);
@ -205,7 +208,7 @@ function mapStringToLink(str) {
const params = linkToReplace.substring((dynamicStrings.EXTERNAL_LINK).length + 2, linkToReplace.length - 1); const params = linkToReplace.substring((dynamicStrings.EXTERNAL_LINK).length + 2, linkToReplace.length - 1);
const splitParams = params.split(','); const splitParams = params.split(',');
const bodyText = '<a href="' + splitParams[0] + '" class="external-text">' + splitParams[1] + '</a>'; const bodyText = '<a href="' + splitParams[0] + '" class="external-text" target="_blank">' + splitParams[1] + '</a>';
let returnVal = str.replace(linkToReplace, bodyText); let returnVal = str.replace(linkToReplace, bodyText);

61
src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.vue
View file

@ -1,12 +1,12 @@
<template> <template>
<baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue"> <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
<div class="package-label mb-4" <div class="option-label mb-4"
:class="[this.buttonLabelSubCopy ? 'has-subheader' : '']" :class="[this.buttonLabelSubCopy ? 'has-subheader' : '']"
for="testradio"> for="testradio">
<div class="package-specs"> <div class="option-specs">
<p class="m-0"> <p class="m-0">
<span v-html="this.buttonLabel"></span> <span v-html="this.buttonLabel"></span>
<span class="pricing-info" v-html="this.buttonAuxiliaryCopy"></span> <span class="option-info" v-html="this.buttonAuxiliaryCopy"></span>
</p> </p>
<p class="sub-label m-0" <p class="sub-label m-0"
v-if="this.buttonLabelSubCopy" v-if="this.buttonLabelSubCopy"
@ -15,32 +15,12 @@
<ul > <ul >
<li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem" class="mb-0"> <li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem" class="mb-0">
<!-- no textLink --> <!-- no textLink -->
<span v-if="!doesCopyContainTextLink(listItem)" <span v-html="listItem"></span>
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> </li>
</ul> </ul>
<!-- End of body text parsing --> <!-- End of body text parsing -->
<!--ms-n6--> <!--ms-n6-->
<div class="package-footer fw-bold caption mt-4 ml-n4 mr-3" <div class="option-footer fw-bold caption mt-4 ml-n4 mr-3"
v-if="this.buttonFooterCopy" v-if="this.buttonFooterCopy"
v-html="this.buttonFooterCopy"></div> v-html="this.buttonFooterCopy"></div>
</div> </div>
@ -59,6 +39,7 @@ import {
splitCopyOnCMSPlaceHolder, splitCopyOnCMSPlaceHolder,
doesCopyContainTextLink, doesCopyContainTextLink,
} from '@/helpers/cms-content-helper'; } from '@/helpers/cms-content-helper';
export default { export default {
name: 'providerPrefRadio', name: 'providerPrefRadio',
mixins: [inputButtonWrapperMixin], mixins: [inputButtonWrapperMixin],
@ -97,8 +78,8 @@ export default {
.mr-3 { .mr-3 {
margin-right: $spacer * 1.5; margin-right: $spacer * 1.5;
} }
.package-main { .option-main {
.package-wrapper { .option-wrapper {
margin: 0.5rem 0; margin: 0.5rem 0;
label { label {
@ -110,7 +91,7 @@ export default {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
+ .package-label { + .option-label {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
position: relative; position: relative;
@ -152,7 +133,7 @@ export default {
} }
&:hover { &:hover {
+ .package-label { + .option-label {
&:before { &:before {
border: 1px solid #8e9292; border: 1px solid #8e9292;
box-shadow: 0px 0px 0px 4px #9fcee6, 0px 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 0px 4px #9fcee6, 0px 1px 4px rgba(0, 0, 0, 0.2);
@ -161,33 +142,33 @@ export default {
} }
&:checked { &:checked {
+ .package-label { + .option-label {
.package-specs { .option-specs {
max-height: 1000px; max-height: 1000px;
} }
} }
+ .package-label { + .option-label {
.package-specs { .option-specs {
.hide-when-closed { .hide-when-closed {
display: block; display: block;
} }
} }
} }
+ .package-label { + .option-label {
background-color: $blue-100; background-color: $blue-100;
border: 1px solid $blue; border: 1px solid $blue;
max-height: 500px; max-height: 500px;
} }
+ .package-label { + .option-label {
&:before { &:before {
box-shadow: 0px 0px 0px 1px $blue; box-shadow: 0px 0px 0px 1px $blue;
} }
} }
+ .package-label { + .option-label {
&:after { &:after {
background: $blue; background: $blue;
} }
@ -195,7 +176,7 @@ export default {
} }
&:focus { &:focus {
+ .package-label { + .option-label {
&:before { &:before {
border: 2px solid $blue; border: 2px solid $blue;
} }
@ -203,11 +184,11 @@ export default {
} }
} }
.package-footer { .option-footer {
color: $red; color: $red;
} }
.package-specs { .option-specs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
@ -220,7 +201,7 @@ export default {
justify-content: space-between; justify-content: space-between;
span { span {
&.pricing-info { &.option-info {
color: $green; color: $green;
font-size: 0.875rem; font-size: 0.875rem;
} }

63
src/layouts/provider-preference/provider-preference.vue
View file

@ -2,19 +2,20 @@
<Form @submit="onSubmit" <Form @submit="onSubmit"
@invalid-submit="onInvalidSubmit" @invalid-submit="onInvalidSubmit"
ref="theForm" ref="theForm"
v-slot="{ meta }" > >
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" class="mb-5" /> <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" class="mb-5" />
<buttonQuestion ref="buttonQuestion" <buttonQuestion ref="buttonQuestion"
questionText="Select an option:"
:answers="prefAnswers" :answers="prefAnswers"
:groupName="prefQuestions" :groupName="prefQuestions"
buttonTypeString="providerPrefRadio" buttonTypeString="providerPrefRadio"
:buttonTypeObject="providerPrefRadio"
v-model="selectedProvider" v-model="selectedProvider"
:validationRules="option-required" :validationRules="option-required"
:isRequired="isRequired" isRequired
class="mx-4" /> class="mx-4" />
<siteFooter <siteFooter
@ -24,23 +25,23 @@
@forwardClicked="forwardButtonAction" @forwardClicked="forwardButtonAction"
ref="siteFooter" /> ref="siteFooter" />
</div> </div>
</div> </div>
<contentGroupModal cmsWidgetName="ShopPreferenceDrawer" </Form>
ref="ShopPreferenceDrawer"
/> <contentGroupModal cmsWidgetName="ShopPreferenceDrawer" ref="ShopPreferenceDrawer" />
<modal
ref="SteeringModal" <modal
modalId="SteeringModal" ref="SteeringModal"
@footer-button-event="closeSteeringModal" modalId="SteeringModal"
:footerButtonText="steeringModalFooter"> @footer-button-event="closeSteeringModal"
<h5 class="text-center">{{steeringModalHeader}}</h5> :footerButtonText="steeringModalFooter">
<div class="steeringModalBody"> <h5 class="text-center">{{steeringModalHeader}}</h5>
<div class="mb-4" >{{steeringModalBody}}</div> <div class="steeringModalBody">
<div v-if="steeringModalBody2">{{steeringModalBody2}}</div> <div class="mb-4" >{{steeringModalBody}}</div>
</div> <div v-if="steeringModalBody2">{{steeringModalBody2}}</div>
</modal> </div>
</Form> </modal>
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
@ -55,7 +56,7 @@ import { states } from "@/constants/states"
// Import Component // Import Component
import baseFormMixin from "@/mixins/base-form-mixin"; import baseFormMixin from "@/mixins/base-form-mixin";
import { Form,defineRule } from "vee-validate"; import { Form, defineRule } from "vee-validate";
import siteFooter from "@/iss-components/site-footer/site-footer"; import siteFooter from "@/iss-components/site-footer/site-footer";
import siteHeader from "@/iss-components/site-header/site-header"; import siteHeader from "@/iss-components/site-header/site-header";
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header"; import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
@ -172,18 +173,18 @@ export default {
return true; return true;
}, },
backButtonAction() { backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
forwardButtonAction() { forwardButtonAction() {
//todo console.log("here!")
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route); if(this.selectedProvider.toLowerCase() == "safeliteoption")
//if(this.selectedProvider == "Schedule with Safelite") {
//{ this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
// this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route); }
//} else
{
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA, this.$route);
}
}, },
closeSteeringModal() { closeSteeringModal() {
this.$refs["SteeringModal"].closeModal(); this.$refs["SteeringModal"].closeModal();
@ -197,12 +198,11 @@ export default {
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss" >
#sub-header span{ #sub-header span{
color: $black; color: $black;
} }
.modal-link a{ .modal-link a{
color: $blue-700; color: $blue-700;
font-size: 14px; font-size: 14px;
@ -211,6 +211,7 @@ export default {
} }
.question-text { .question-text {
margin-top: 0; margin-top: 0;
margin-bottom: .5rem;
& > span { & > span {
text-align: left; text-align: left;
} }

4
src/router/router-constants/routing-table.js
View file

@ -440,6 +440,10 @@ const routingTable = function(store) {
{ {
scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
destinationIssPageValue: issPageValues.SERVICE_LOCATION destinationIssPageValue: issPageValues.SERVICE_LOCATION
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_TPA,
destinationIssPageValue: issPageValues.TPA_SEARCH
} }
] ]
}, },

3
src/styles/common-error-styles.scss
View file

@ -4,7 +4,8 @@ html {
&.list-button-horizontal, &.list-button-horizontal,
&.list-button, &.list-button,
&.list-button.list-group, &.list-button.list-group,
&.list-card { &.list-card
&.option-label {
border: 1px solid $red; border: 1px solid $red;
position: relative; position: relative;
z-index: 4; z-index: 4;