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

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

@ -145,11 +145,14 @@ function findAndReplaceGlobalStateValues(widgetModel, widgetName) {
function processWidgetItemForReplacement(widgetModel, key) {
// If we have a string, and it needs to be replaced.
if (typeof widgetModel[key] === 'string') {
widgetModel[key] = processIfStatements(
widgetModel[key],
dynamicStrings.GLOBAL_STATE,
getStoreValueFromString
);
if (widgetModel[key].includes("{if:"))
{
widgetModel[key] = processIfStatements(
widgetModel[key],
dynamicStrings.GLOBAL_STATE,
getStoreValueFromString
);
}
if (widgetModel[key].includes(dynamicStrings.MODAL_LINK)) {
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 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);

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

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

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

@ -2,19 +2,20 @@
<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" />
<siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" class="mb-5" />
<buttonQuestion ref="buttonQuestion"
questionText="Select an option:"
:answers="prefAnswers"
:groupName="prefQuestions"
buttonTypeString="providerPrefRadio"
:buttonTypeObject="providerPrefRadio"
v-model="selectedProvider"
:validationRules="option-required"
:isRequired="isRequired"
isRequired
class="mx-4" />
<siteFooter
@ -24,23 +25,23 @@
@forwardClicked="forwardButtonAction"
ref="siteFooter" />
</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>
</Form>
<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>
</template>
<script>
// Import Supporting Files
@ -55,7 +56,7 @@ import { states } from "@/constants/states"
// Import Component
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 siteHeader from "@/iss-components/site-header/site-header";
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
@ -172,18 +173,18 @@ export default {
return true;
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
//todo
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
//if(this.selectedProvider == "Schedule with Safelite")
//{
// this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
//}
console.log("here!")
if(this.selectedProvider.toLowerCase() == "safeliteoption")
{
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
}
else
{
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA, this.$route);
}
},
closeSteeringModal() {
this.$refs["SteeringModal"].closeModal();
@ -197,12 +198,11 @@ export default {
}
};
</script>
<style lang="scss">
<style lang="scss" >
#sub-header span{
color: $black;
}
.modal-link a{
color: $blue-700;
font-size: 14px;
@ -211,6 +211,7 @@ export default {
}
.question-text {
margin-top: 0;
margin-bottom: .5rem;
& > span {
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,
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,
&.list-button.list-group,
&.list-card {
&.list-card
&.option-label {
border: 1px solid $red;
position: relative;
z-index: 4;