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

CSR-343 WIP

Browse source
This commit is contained in:
Katie 2022-06-27 08:40:56 -04:00
parent f0748c4c0b
commit 9d7c6fc1fc
4 changed files with 313 additions and 275 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/common-components/button-question/button-question.vue
View file

@ -1,44 +1,48 @@
<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component --> <!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
<template> <template>
<div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'"> <div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
<div v-if="questionText" class="question-text d-flex"> <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
<span class="fs-5 fw-bold w-100">{{ questionText }}</span> <span class="fs-5 fw-bold w-100">{{ questionText }}</span>
</div> </div>
<div class="w-100 d-flex justify-content-center"> <div class="w-100 justify-content-center">
<fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName"> <fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName">
<legend class="sr-only" :data-focus-target="groupName" :id="groupName" tabindex="-1"> <legend class="sr-only" :data-focus-target="groupName" :id="groupName" tabindex="-1">
{{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }} {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
</legend> </legend>
<div :class="getComponentWrapperClasses"> <div :class="getComponentWrapperClasses" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
<component <component
:is="buttonType" :is="buttonType"
v-for="answer in answers" @isCheckedChanged="handleCheckedChanged"
:key="answer.Name ? answer.Name : answer" :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
@isCheckedChanged="handleCheckedChanged" :value="getValues(answer)"
:buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer" :buttonLabel="answer.Text ? answer.Text : answer"
:value="getValues(answer)" :buttonLabelSubCopy="answer.SubText"
:buttonLabel="answer.Text ? answer.Text : answer" :textPosition="textPosition"
:buttonLabelSubCopy="answer.SubText" :isMultiSelect="isMultiSelect"
:textPosition="textPosition" :groupName="groupName"
:isMultiSelect="isMultiSelect" :selectingInitiatesLoad="selectingInitiatesLoad"
:groupName="groupName" :loaderColor="loaderColor"
:selectingInitiatesLoad="selectingInitiatesLoad" :loaderPosition="loaderPosition"
:loaderColor="loaderColor" :isWide=isWide
:loaderPosition="loaderPosition" :isRequired=isRequired
:isWide=isWide :buttonImage="answer.AnswerImageUrl"
:isRequired=isRequired :buttonImageId="answer.ImageId"
:buttonImage="answer.AnswerImageUrl" :altText="answer.Name ? answer.Name : answer"
:buttonImageId="answer.ImageId" screenReaderOnlyText="(opens new window)"
:altText="answer.Name ? answer.Name : answer" :colLength="getColLength"
screenReaderOnlyText="(opens new window)" :selectedValues="selectedValues"
:colLength="getColLength" data-test="button"
:selectedValues="selectedValues" :validationRules="validationRules"
data-test="button" :class="[suppressError ? 'alertError' : '']"
:validationRules="validationRules" :clearOnUnmount="clearOnUnmount"
:class="[suppressError ? 'alertError' : '']" />
:clearOnUnmount="clearOnUnmount" <!-- For nested questions -->
/> <transition name="fade" mode="out-in">
</div> <div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
<slot></slot>
</div>
</transition>
</div>
</fieldset> </fieldset>
</div> </div>
<div class="row form-test-error mt-1"> <div class="row form-test-error mt-1">
@ -81,14 +85,14 @@ export default {
isRequired: Boolean, isRequired: Boolean,
isOverflowScrollable: Boolean, isOverflowScrollable: Boolean,
isWide: Boolean, isWide: Boolean,
modelValue: Array, modelValue: [Array, String],
validationRules: String, validationRules: String,
suppressError: Boolean, suppressError: Boolean,
useTextForValue: Boolean, useTextForValue: Boolean,
clearOnUnmount: { clearOnUnmount: {
type: Boolean, type: Boolean,
default: true default: true
} },
}, },
computed: { computed: {
getFieldSetClasses() { getFieldSetClasses() {
@ -135,6 +139,7 @@ export default {
if (this.useTextForValue){ if (this.useTextForValue){
return answer.Text return answer.Text
} }
console.log(answer.Name ? answer.Name : answer)
return answer.Name ? answer.Name : answer; return answer.Name ? answer.Name : answer;
}, },
handleCheckedChanged(val) { handleCheckedChanged(val) {
@ -146,6 +151,9 @@ export default {
val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1); val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
this.selectedValues = newSelectedValues; this.selectedValues = newSelectedValues;
} }
else {
this.selectedValues = val.value;
}
} }
}, },
}, },

439
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -1,245 +1,262 @@
<template> <template>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<p class="mb-0 color-question-text">{{ colorQuestionText }}</p> <p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
</div>
</div> </div>
</div> {{ featureListData }}
<br />
{{ tintSelectionOptions }}
<br />
{{ selectedTint }}
{{ selectedPart }}
<div <div class="container nested-radio">
class="container nested-radio" <div class="row my-2">
v-for="(value, name, index) in featureListData" <div class="col">
:key="index" <buttonQuestion
> v-model="selectedTint"
<div class="row my-2"> :answers="tintSelectionOptions"
<div class="col"> :nestedAnswers="featureListData[selectedTint]"
<listCard buttonType="listCard"
v-model="selectedTint[name]" :isWide="true"
:value="`${glassLocation}-${glassName}-${name}`" altText=""
:isRadio="true" isRequired
:isWide="true" :groupName="`${glassLocation}-${glassName}`"
:buttonImage=" @isCheckedChanged="ResetTintAndPartSelections()"
require(`@/assets/img/tints/${getTintSourceImage( :validationRules="validationRules"
glassLocation, >
name <transition name="fade" mode="out-in">
)}`) <div class="row my-2" aria-live="polite">
" <div class="col">
:buttonLabel="name" <buttonQuestion
altText="" v-model="selectedPart"
isRequired buttonType="radio"
:buttonID="`${glassLocation}-${glassName}-${name}`" class="radioQuestion"
:groupName="`${glassLocation}-${glassName}`" :questionText="glassFeatureQuestion"
@isCheckedChanged="ResetTintAndPartSelections()" :answers="featureListData[selectedTint]"
:validationRules="validationRules" textPosition="text-start"
/> :loaderEnabled="false"
<div class="row form-test-error mt-1"> isRequired
<error-message :name="`${glassLocation}-${glassName}`" v-if="!suppressError"></error-message> :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
:validationRules="validationRules"
/>
</div>
</div>
</transition>
</buttonQuestion>
</div>
</div> </div>
</div>
</div> </div>
<transition name="fade" mode="out-in"> <div class="row form-test-error mt-1">
<div <!-- <error-message
v-if=" :name="`${glassLocation}-${glassName}`"
selectedTint[name] != undefined && v-if="!suppressError"
selectedTint[name].buttonId === ></error-message> -->
`${glassLocation}-${glassName}-${name}` </div>
"
class="row my-2"
aria-live="polite"
>
<div class="col">
<buttonQuestion
v-model="selectedPart[glassLocation]"
buttonType="radio"
class="radioQuestion"
:questionText="glassFeatureQuestion"
:answers="value"
textPosition="text-start"
:loaderEnabled="false"
isRequired
:groupName="`${glassLocation}-${glassName}-${name}`"
:validationRules="validationRules"
/>
</div>
</div>
</transition>
</div>
</template> </template>
<script> <script>
// Components // Components
import listCard from "@/ux-components/list-card/list-card";
import buttonQuestion from "@/common-components/button-question/button-question"; import buttonQuestion from "@/common-components/button-question/button-question";
// Supporting files // Supporting files
import { getTintImage } from "@/constants/tint-mapper"; import { getTintImage } from "@/constants/tint-mapper";
import { getCustomTransformValue } from "@/constants/dynamictext-mapper"; import { getCustomTransformValue } from "@/constants/dynamictext-mapper";
import { ErrorMessage } from 'vee-validate'; // import { ErrorMessage } from "vee-validate";
export default { export default {
name: "glass-part-question", name: "glass-part-question",
inheritAttrs: false, inheritAttrs: false,
data() { data() {
return { return {
glassColorQuestion: "", glassColorQuestion: "",
glassFeatureQuestion: "", glassFeatureQuestion: "",
selectedTint: {}, // v-model for the list card selections selectedTint: "",
}; };
},
props: {
glassName: String,
glassLocation: String,
colorAnswers: Array,
modelValue: Object,
validationRules: String,
},
mounted() {
this.LoadPreselectedValues();
},
components: {
listCard,
buttonQuestion,
ErrorMessage,
},
computed: {
colorQuestionText() {
return getCustomTransformValue(
this.glassColorQuestion,
`${this.glassLocation} ${this.glassName}`
);
}, },
props: {
selectedPart: { glassName: String,
get: function () { glassLocation: String,
return this.modelValue; colorAnswers: Array,
}, modelValue: Object,
set: function (newValue) { validationRules: String,
this.$emit("update:modelValue", newValue);
},
}, },
mounted() {
// Creates a map of the feature list data in the correct Name/Value this.LoadPreselectedValues();
// format for the button-question component.
featureListData() {
const tintMapByColor = this.colorAnswers.reduce((arr, item) => {
// Create the key
const itemColor = item.ColorAnswerText;
arr[itemColor] = arr[itemColor] || [];
// Map the data to Name/Text object for ButtonQuestion
const mappedItem = item.FeatureAnswers.reduce((featureArr, item) => {
featureArr["Text"] = item.FeatureAnswerText; // Display to User
featureArr["Name"] = item.PartNumber; // Backing Value
return featureArr;
}, {});
// Add onto the final object
arr[itemColor].push(mappedItem);
return arr;
}, {});
return tintMapByColor;
}, },
components: {
PartDataFromApi() { buttonQuestion,
return this.$store.getters.pageData(this.$route.query.fmgPage); // ErrorMessage,
},
},
methods: {
// Initialize the component data
initializeComponent(cmsContent) {
this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
}, },
computed: {
colorQuestionText() {
return getCustomTransformValue(
this.glassColorQuestion,
`${this.glassLocation} ${this.glassName}`
);
},
// Gets tint images based on the glass type, and tint name. tintSelectionOptions() {
// Returns an empty string if the src or object is undefined. let tintOptions = [];
getTintSourceImage(glassLocation, tintColor) { Object.keys(this.featureListData).forEach((tintOption) => {
const tintSourceObject = getTintImage(glassLocation, tintColor); tintOptions.push({
Name: tintOption,
if (tintSourceObject === undefined || tintSourceObject.src == undefined) { Text: tintOption,
return ""; AnswerImageUrl: require(`@/assets/img/tints/${this.getTintSourceImage(
} this.glassLocation,
tintOption
return tintSourceObject.src; )}`),
}, });
// Reset selections when tint changes for the same glass to ensure proper selection.
// Also checks if only a single part is present for the tint.
ResetTintAndPartSelections() {
this.selectedTint = {};
this.selectedPart = {};
this.AutoSelectIfSinglePart();
},
// Check if only a single part is present for the tint and set the v-model if it is.
AutoSelectIfSinglePart() {
// Check if the selected tint only has a single feature
Object.keys(this.PartDataFromApi.partsOrQuestions ?? {}).forEach(
(key) => {
const currentGlassSelection =
this.PartDataFromApi.partsOrQuestions[key];
if (
currentGlassSelection.glassName === this.glassName &&
currentGlassSelection.glassLocation === this.glassLocation
) {
if (currentGlassSelection.parts.length === 1) {
this.selectedPart = {
[currentGlassSelection.glassLocation]: [
currentGlassSelection.parts[0].partNumber,
],
};
}
}
}
);
},
// Loads the preselected values from the store.
LoadPreselectedValues() {
this.$nextTick(() => {
if (this.modelValue !== undefined) {
// Populate button-question model-value if parts data already exists in VueX
const alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts;
Object.keys(alreadyPopulatedPartsData).forEach((key) => {
const partNumber = alreadyPopulatedPartsData[key].partNumber;
const tintColor = alreadyPopulatedPartsData[key].color;
Object.keys(this.modelValue).forEach((key) => {
if (this.modelValue[key][0] === partNumber) {
this.selectedTint[tintColor] = {
buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
checkValue: "",
value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
};
}
}); });
});
} return tintOptions;
}); },
selectedPart: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
console.log("modelValue: " + newValue)
this.$emit("update:modelValue", newValue);
},
},
// Creates a map of the feature list data in the correct Name/Value
// format for the button-question component.
featureListData() {
const tintMapByColor = this.colorAnswers.reduce((arr, item) => {
// Create the key
const itemColor = item.ColorAnswerText;
arr[itemColor] = arr[itemColor] || [];
// Map the data to Name/Text object for ButtonQuestion
const mappedItem = item.FeatureAnswers.reduce(
(featureArr, item) => {
featureArr["Text"] = item.FeatureAnswerText; // Display to User
featureArr["Name"] = item.PartNumber; // Backing Value
return featureArr;
},
{}
);
// Add onto the final object
arr[itemColor].push(mappedItem);
return arr;
}, {});
return tintMapByColor;
},
PartDataFromApi() {
return this.$store.getters.pageData(this.$route.query.fmgPage);
},
},
methods: {
// Initialize the component data
initializeComponent(cmsContent) {
this.glassColorQuestion =
cmsContent.ColorQuestionWidget.QuestionText;
this.glassFeatureQuestion =
cmsContent.FeatureQuestionWidget.QuestionText;
},
// Gets tint images based on the glass type, and tint name.
// Returns an empty string if the src or object is undefined.
getTintSourceImage(glassLocation, tintColor) {
const tintSourceObject = getTintImage(glassLocation, tintColor);
if (
tintSourceObject === undefined ||
tintSourceObject.src == undefined
) {
return "";
}
return tintSourceObject.src;
},
// Reset selections when tint changes for the same glass to ensure proper selection.
// Also checks if only a single part is present for the tint.
ResetTintAndPartSelections() {
this.selectedTint = "";
this.selectedPart = {};
this.AutoSelectIfSinglePart();
},
// Check if only a single part is present for the tint and set the v-model if it is.
AutoSelectIfSinglePart() {
// Check if the selected tint only has a single feature
Object.keys(this.PartDataFromApi.partsOrQuestions ?? {}).forEach(
(key) => {
const currentGlassSelection =
this.PartDataFromApi.partsOrQuestions[key];
if (
currentGlassSelection.glassName === this.glassName &&
currentGlassSelection.glassLocation ===
this.glassLocation
) {
if (currentGlassSelection.parts.length === 1) {
this.selectedPart = {
[currentGlassSelection.glassLocation]: [
currentGlassSelection.parts[0].partNumber,
],
};
}
}
}
);
},
// Loads the preselected values from the store.
LoadPreselectedValues() {
this.$nextTick(() => {
if (this.modelValue !== undefined) {
// Populate button-question model-value if parts data already exists in VueX
const alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts;
Object.keys(alreadyPopulatedPartsData).forEach((key) => {
const partNumber =
alreadyPopulatedPartsData[key].partNumber;
const tintColor = alreadyPopulatedPartsData[key].color;
Object.keys(this.modelValue).forEach((key) => {
if (this.modelValue[key][0] === partNumber) {
this.selectedTint = tintColor;
// this.selectedTint[tintColor] = {
// buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
// checkValue: "",
// value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
// };
}
});
});
}
});
},
}, },
},
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.nested-radio { .nested-radio {
.ui-radio { .ui-radio {
flex-direction: column; flex-direction: column;
margin: 0.25rem 0; margin: 0.25rem 0;
} }
p { p {
font-size: 0.875rem; font-size: 0.875rem;
} }
} }
.color-question-text { .color-question-text {
color: $black; color: $black;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
} }
</style> </style>

71
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -30,13 +30,13 @@
</div> </div>
<glassPartQuestion <glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`" :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="glassParts[item.glassLocation + '-' + item.glassName]" v-model="glassParts[item.glassLocation + '-' + item.glassName]"
:glassLocation="item.glassLocation" :glassLocation="item.glassLocation"
:glassName="item.glassName" :glassName="item.glassName"
:colorAnswers="item.colorAnswers" :colorAnswers="item.colorAnswers"
validationRules="replace-options-required" validationRules="replace-options-required"
/> />
</div> </div>
<funnelFooter <funnelFooter
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
@ -170,41 +170,54 @@ methods: {
// Compile all selected parts from the page. // Compile all selected parts from the page.
for (let [key, value] of Object.entries(this.glassParts)) { for (let [key, value] of Object.entries(this.glassParts)) {
for (let [glassKey, glassValue] of Object.entries(value)) { selectedGlassPartNumbers.push(value);
selectedGlassPartNumbers.push(glassValue[0]); // for (let [glassKey, glassValue] of Object.entries(value)) {
} // selectedGlassPartNumbers.push(glassValue[0]);
// }
} }
console.log(this.glassParts)
console.log(selectedGlassPartNumbers)
console.log(this.PartsFromApi.partsOrQuestions)
// Match them to the parts from the API. // Match them to the parts from the API.
for (let [key, value] of Object.entries( for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
this.PartsFromApi.partsOrQuestions // const partsForGlassPart = value
)) { const isMatched = selectedGlassPartNumbers.some(
for (let [partKey, partValue] of Object.entries(value.parts)) { (p) => p === value.partNumber
const currentPart = );
this.PartsFromApi.partsOrQuestions[key].parts[partKey];
const isMatched = selectedGlassPartNumbers.some(
(p) => p === currentPart.partNumber
);
if (isMatched) { if (isMatched) {
matchedParts.push(currentPart); matchedParts.push(currentPart);
}
} }
// for (let [partKey, partValue] of Object.entries(value.parts)) {
// const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
// const isMatched = selectedGlassPartNumbers.some(
// (p) => p === currentPart.partNumber
// );
// if (isMatched) {
// matchedParts.push(currentPart);
// }
// }
} }
console.log(matchedParts)
// If no parts could be matched, throw an error. // If no parts could be matched, throw an error.
if (matchedParts.length === 0) { if (matchedParts.length === 0) {
throw new Error("Could not match any parts to the selected parts"); throw new Error("Could not match any parts to the selected parts");
} }
// Save parts to the store. // // Save parts to the store.
store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts); // store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts);
// Navigate to the next page. // // Navigate to the next page.
this.$router.navigateAfterSave( // this.$router.navigateAfterSave(
this.navigationScenarios.SELECTED_PARTS, // this.navigationScenarios.SELECTED_PARTS,
this.$route // this.$route
); // );
}, },
resetDependentState() { resetDependentState() {

2
src/ux-components/radio/radio.vue
View file

@ -86,7 +86,7 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>yu78zas
.form-check { .form-check {
.form-check-input { .form-check-input {
border: 1px solid $gray-500; border: 1px solid $gray-500;