Added v-models and catch emit function

src/common-components/button-question/button-question.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="isOverflowScrollable ? 'button_question' : ''">
-    <div v-if="questionText" class="mt-6 mb-4 d-flex">
+    <div v-if="questionText" class="d-flex">
-      <span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
+      <span :class="[buttonType === 'radio' ? ['mb-0', 'text-left', 'mt-2' ] : ['mb-4', 'mt-6', 'text-center'], 'fs-6 fw-bold w-100' ]">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">

src/constants/dynamictext-mapper.js

@@ -0,0 +1,48 @@
+// Used to support custom (non-state) related dynamic text.
+// Example: {custom:glassName}, each key in the array is the value after custom:, like 'glassname'
+// Please use lowercase only so that we don't have to worry about case sensitivity.
+
+const customMappings = {
+    glassname: [
+        { key: 'Single Windshield', transformedValue: 'windshield' },
+        { key: 'Driver split windshield', transformedValue: 'driver side split windshield' },
+        { key: 'Passenger split windshield', transformedValue: 'passenger side split windshield' },
+        { key: 'Stationary backglass', transformedValue: 'rear window' },
+        { key: 'Sliding backglass', transformedValue: 'rear window' },
+        { key: 'Driver front door', transformedValue: 'driver side front door' },
+        { key: 'Driver back door ', transformedValue: 'driver side back door' },
+        { key: 'Driver vent', transformedValue: 'driver side vent glass' },
+        { key: 'Driver quarter', transformedValue: 'driver side quarter panel' },
+        { key: 'Driver sliding door', transformedValue: 'driver side sliding door' },
+        { key: 'Passenger front door', transformedValue: 'passenger side front door' },
+        { key: 'Passenger back door', transformedValue: 'passenger side back door' },
+        { key: 'Passenger vent', transformedValue: 'passenger side vent glass' },
+        { key: 'Passenger quarter', transformedValue: 'passenger side quarter panel' },
+        { key: 'Passenger sliding door', transformedValue: 'passenger side sliding door' },
+    ]
+}
+
+export function getCustomTransformValue(type, key) {
+    const transformArray = customMappings[type.toLowerCase()];
+    
+    if(transformArray === undefined) {
+        return '';
+    }
+
+    const transformValue = transformArray.find(map => map.key === key.toLowerCase());
+
+    return transformValue === undefined ? '' : transformValue;
+}
+
+export function getCustomTransformKey(value) {
+    const regexExp = new RegExp("{(.*?):(.*?)}", "g");
+    const matches = [...value.matchAll(regexExp)];
+
+    if (matches.length === 0) {
+        return '';
+    }
+
+    const key = matches[0][2];
+
+    return key;
+}

src/constants/tint-mapper.js

@@ -34,7 +34,7 @@ const tintMap = {
         { name: "no shade, no tint", src: "BackGlass-NoShade-NoTint.svg" }, // ???
     ],
 
-    windhshield: [
+    windshield: [
         // Blue Shade
         { name: "blue shade, blue tint", src: "Windshield-BlueShade-BlueTint.svg" },
         { name: "blue shade, brown tint", src: "Windshield-BlueShade-BrownTint.svg" },
@@ -72,5 +72,10 @@ const tintMap = {
 }
 
 export function getTintImage(glassType, colorString) {
+    
+    if(tintMap[glassType.toLowerCase()] === undefined) {
+        return '';
+    }
+
     return tintMap[glassType.toLowerCase()].find(item => item.name == colorString.toLowerCase())
 }

src/layouts/nested-radio-poc/nested-radio.vue

@@ -1,56 +1,31 @@
 <template>
-
 <div class="container-fluid nested-radio">
     <div class="row mb-1">
         <div class="col">
-        <listCard
+            <listCard groupName="listcard1" isWide="true" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3" buttonLabel="Green Tint, Blue Shade" buttonID="radio1" />
-        groupName="listcard1"
-        isWide="true"
-        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-        buttonLabel="Green Tint, Blue Shade"
-        buttonID="radio1"
-        />
         </div>
     </div>
     <div class="row mb-1">
         <div class="col">
-        <p class="mb-0 fw-bold">Ok, select the features</p>
+            <buttonQuestion buttonType="radio" groupName="Demo Group" buttonID="button1" isRequired value="test button" screenReaderOnlyText="rain sensor, solar, 3rd visor band" :answers="demoArray" questionText="ok now select your features" />
-        <buttonQuestion
-          buttonType="radio"
-          groupName="Demo Group"
-          buttonID="button1"
-          isRequired
-          value="test button"
-          screenReaderOnlyText="rain sensor, solar, 3rd visor band"
-          :answers="demoArray"
-        />
         </div>
     </div>
     <div class="row mb-2">
         <div class="col">
-        <listCard
+            <listCard groupName="listcard1" isWide="true" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3" buttonLabel="Green Tint" buttonID="radio2" />
-        groupName="listcard1"
-        isWide="true"
-        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-        buttonLabel="Green Tint"
-        buttonID="radio2"
-        />
         </div>
     </div>
 </div>
-
 </template>
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import listCard from "@/ux-components/list-card/list-card";
-import radio from "@/ux-components/radio/radio";
 
 export default {
     name: "nestedRadio",
     components: {
         buttonQuestion,
-    radio,
         listCard,
     },
     data() {
@@ -70,6 +45,7 @@ export default {
         flex-direction: column;
         margin: .25rem 0;
     }
+
     p {
         font-size: .875rem;
     }

src/layouts/vehicle-parts/part-question/part-question.vue

@@ -1,22 +1,40 @@
 <template>
-<p>Select your current {{ colorQuestionText }} color:</p>
+<div class="container">
-
+    <div class="row">
-<div v-for="(value, name, index) in featureListData" :key="index">
+        <p>Select your current {{ glassName }} color:</p>
-    <listCard isRadio isWide :buttonImage="require(`@/assets/img/tints/${getTintImage(glassName, name)}`)" :buttonLabel="name" altText="" :buttonID="`${name}-${index}`" groupName="test" />
+    </div>
-
-    <buttonQuestion v-model="inputParams['question'+index]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled=false isRequired=true  :groupName="name" />
-
 </div>
 
+<div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
+    <div class="row my-2">
+        <div class="col">
+            {{ selectedTint }}
+            <listCard v-model="selectedTint[name]" isRadio=true isWide=true :buttonImage="require(`@/assets/img/tints/${getTintImage(glassName, name)}`)" :buttonLabel="name" altText="" :buttonID="`${glassName}-${name}`" :groupName="`${glassName}`" @isCheckedChanged="TestMethod(name, $event)" />
+        </div>
+    </div>
+    <div v-show="selectedTint[name] != undefined && selectedTint[name].isChecked === `${glassName}-${name}`" class="row my-2">
+        <div class="col">
+            {{ selectedPart }}
+            <buttonQuestion v-model="selectedPart[glassName]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled=false isRequired=true :groupName="`${glassName}-${name}`" />
+        </div>
+    </div>
+
+</div>
 </template>
 
 <script>
+// Components
 import listCard from "@/ux-components/list-card/list-card";
 import buttonQuestion from "@/common-components/button-question/button-question";
 
+// Supporting files
 import {
     getTintImage
 } from "@/constants/tint-mapper";
+import {
+    getCustomTransformValue,
+    getCustomTransformKey
+} from '@/constants/dynamictext-mapper';
 
 export default {
     name: "part-question",
@@ -24,7 +42,8 @@ export default {
         return {
             glassColorQuestion: String,
             glassFeatureQuestion: String,
-            inputParams: []
+            selectedPart: {}, // v-model for the radio button selections
+            selectedTint: {} // v-model for the list card selections
         };
     },
     props: {
@@ -43,6 +62,10 @@ export default {
             return this.createFeatureListMap(this.colorAnswers);
         },
     },
+    mounted() {
+        const s = getCustomTransformKey('Select your current {custom:glassName} color')
+        const r = getCustomTransformValue(s, this.glassName);
+    },
     methods: {
         initializeComponent(cmsContent, initialData) {
             this.glassColorQuestion = cmsContent.ColorQuestion;
@@ -77,7 +100,24 @@ export default {
             const tintObject = getTintImage(glassType, tintColor);
 
             return tintObject === undefined ? "" : tintObject.src;
-        }
+        },
+
+        TestMethod(name, event) {
+            this.selectedTint[name] = event;
+        },
     },
 };
 </script>
+
+<style lang="scss">
+.nested-radio {
+    .ui-radio {
+        flex-direction: column;
+        margin: .25rem 0;
+    }
+
+    p {
+        font-size: .875rem;
+    }
+}
+</style>

src/layouts/vehicle-parts/response.json

@@ -1,96 +0,0 @@
-{
-    "partsOrQuestions": [
-      {
-        "glassName": "Backglass",
-        "parts": [
-          {
-            "partNumber": "DB12209GTYN",
-            "description": "heated glass, solar, 1 hole",
-            "color": "Green Tint",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DB12209YPYN",
-            "description": "heated glass, solar, 1 hole",
-            "color": "Gray Tint Privacy",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          }
-        ],
-        "partQuestions": null
-      },
-      {
-        "glassName": "DriverRearQuarterGlass",
-        "parts": [
-          {
-            "partNumber": "DQ12204GTYNOEM",
-            "description": "solar, driver side, encap",
-            "color": "Green Tint",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12204YPYNOEM",
-            "description": "solar, driver side, encap",
-            "color": "Gray Tint Privacy",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12205GTYNOEM",
-            "description": "solar, antenna, driver side, encap",
-            "color": "Green Tint",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12205YPYNOEM",
-            "description": "solar, antenna, driver side, encap",
-            "color": "Gray Tint Privacy",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12207GTYN",
-            "description": "solar, driver side, encap, chrome molding",
-            "color": "Green Tint",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12207YPYNOEM",
-            "description": "solar, driver side, encap, chrome molding",
-            "color": "Gray Tint Privacy",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12208GTYNOEM",
-            "description": "solar, antenna, driver side, encap, chrome molding",
-            "color": "Green Tint",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12208YPYNOEM",
-            "description": "solar, antenna, driver side, encap, chrome molding",
-            "color": "Gray Tint Privacy",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          }
-        ],
-        "partQuestions": null
-      }
-    ]
-  }

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -12,38 +12,72 @@ export default {
     name: "vehicle-parts",
     data() {
         return {
-            Parts: [{
+            Parts: [
+                {
                     glassName: 'Backglass',
                     colorAnswers: [{
                             ColorAnswerText: 'Green Tint',
                             FeatureAnswers: [{
-                            FeatureAnswerText: 'heated glass, solar, 1 hole',
+                                FeatureAnswerText: 'Backglass - heated glass, solar, 1 hole',
-                            PartNumber: 'DB12209GTYN'
+                                PartNumber: 'test-backglass-green-tint-1-hole',
                             }]
                         },
                         {
                             ColorAnswerText: 'Green Tint',
                             FeatureAnswers: [{
-                            FeatureAnswerText: 'heated glass, solar, 3 hole',
+                                FeatureAnswerText: 'Backglass - heated glass, solar, 2 hole',
-                            PartNumber: 'DB12209XXXX'
+                                PartNumber: 'test-backglass-green-tint-2-hole'
                             }]
                         },
                         {
                             ColorAnswerText: 'Gray Tint Privacy',
                             FeatureAnswers: [{
-                            FeatureAnswerText: 'heated glass, solar, 1 hole',
+                                FeatureAnswerText: 'Backglass - heated glass, solar, 3 hole',
-                            PartNumber: 'DB12209YPYN'
+                                PartNumber: 'test-backglass-gray-tint-privacy-3-hole'
                             }]
                         },
                         {
                             ColorAnswerText: 'Gray Tint Privacy',
                             FeatureAnswers: [{
-                            FeatureAnswerText: 'heated glass, solar, 5 hole',
+                                FeatureAnswerText: 'Backglass - heated glass, solar, 4 hole',
-                            PartNumber: 'DB12209YZZZ'
+                                PartNumber: 'test-backglass-blue-tint-4-hole'
                             }]
                         },
                     ]
+                },
+                {
+                    glassName: 'Windshield',
+                    colorAnswers: [{
+                            ColorAnswerText: 'Blue Tint',
+                            FeatureAnswers: [{
+                                FeatureAnswerText: 'Windshield - heated glass, solar, 1 hole',
+                                PartNumber: 'test-windshield-blue-tint-1-hole'
                             }]
+                        },
+                        {
+                            ColorAnswerText: 'Blue Tint',
+                            FeatureAnswers: [{
+                                FeatureAnswerText: 'Windshield -heated glass, solar, 2 hole',
+                                PartNumber: 'test-blue-tint-windshield-2-hole'
+                            }]
+                        },
+                        {
+                            ColorAnswerText: 'Gray Tint Privacy',
+                            FeatureAnswers: [{
+                                FeatureAnswerText: 'Windshield -heated glass, solar, 3 hole',
+                                PartNumber: 'test-gray-tint-privacy-windshield-3-hole'
+                            }]
+                        },
+                        {
+                            ColorAnswerText: 'Gray Tint Privacy',
+                            FeatureAnswers: [{
+                                FeatureAnswerText: 'Windshield -heated glass, solar, 4 hole',
+                                PartNumber: 'test-brown-tint-windshield-4-hole'
+                            }]
+                        },
+                    ]
+                },
+            ]
         }
     },
     components: {

src/ux-components/list-card/list-card.vue

@@ -1,36 +1,10 @@
 <template>
 <div :class="'col' + colLength">
-    <div
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']">
-      class="list-card w-100 rounded-3 d-flex align-items-center h-100"
+        <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" @click="handleChange(value)" v-model="checkValue" @change="handleCheckChange()" />
-      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
+        <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
-    >
+            <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" :src="buttonImage" :alt="altText" />
-      <input
+            <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
-        :type="isMultiSelect ? 'checkbox' : 'radio'"
-        :id="buttonID"
-        :name="groupName"
-        :value="buttonID"
-        :aria-required="isRequired"
-        :data-focus-target="groupName"
-        @click="handleChange(value)"
-        v-model="checkValue"
-        @change="handleCheckChange()"
-      />
-      <label
-        :for="buttonID"
-        class="d-flex w-100 align-items-center px-2 h-100"
-        :class="getLabelClasses" tabindex="-1"
-      >
-        <img
-          :id="buttonImageId"
-          :class="!isWide ? 'order-1' : 'ms-auto order-3'"
-          :src="buttonImage"
-          :alt="altText"
-        />
-        <p
-          v-if="!isWide"
-          class="small order-3"
-          :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
-        >
                 {{buttonLabel}}
             </p>
             <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
@@ -48,7 +22,9 @@
 </template>
 
 <script>
-import { useField } from "vee-validate";
+import {
+    useField
+} from "vee-validate";
 
 export default {
     name: "listCard",
@@ -97,11 +73,11 @@ export default {
         },
     },
     methods: {
-    handleCheckChange(newValue, oldValue){
+        handleCheckChange() {
-      const isInitialization = typeof(oldValue) === 'function';
+            this.$emit('isCheckedChanged', {
-      if (!isInitialization) {
+                isChecked: this.checkValue,
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+                buttonId: this.buttonID.toString()
-      }
+            });
         }
     },
     setup(props) {
@@ -111,8 +87,7 @@ export default {
             value: inputValue,
             handleChange,
             errors,
-    } = useField(props.groupName, props.validationRules,
+        } = useField(props.groupName, props.validationRules, {
-    {
             type: inputType,
             checkedValue: props.value,
         });
@@ -127,10 +102,12 @@ export default {
 <style lang="scss">
 .list-card {
     border: 1px solid $gray-500;
+
     &.invalid {
         //Red border if invalid
         border: 1px solid $red;
     }
+
     img {
         // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
         height: auto;
@@ -138,47 +115,58 @@ export default {
         margin-bottom: 3rem;
         max-width: 100%;
     }
+
     &:hover {
         box-shadow: 0px 0px 0px 4px $blue-300;
         border: 1px solid transparent;
     }
+
     input[type="checkbox"],
     input[type="radio"] {
         opacity: 0;
         width: 0;
         height: 0;
+
         +label {
             display: block;
             position: relative;
+
             &:hover {
                 cursor: pointer;
             }
+
             p {
                 color: $gray-600;
                 text-align: center;
+
                 &.sub-copy {
                     color: $gray-550;
                 }
             }
         }
+
         &:focus+label {
             box-shadow: 0 0 0 2.5px $blue;
             border-radius: 0.5rem;
         }
+
         &:checked+label {
             background: $blue-100;
             box-shadow: 0 0 0 1px $blue;
             border-radius: 0.5rem;
         }
+
         &:checked+label {
             p {
                 color: $black;
                 font-weight: 500;
             }
+
             .sub-copy {
                 color: $gray-600;
             }
         }
+
         +label::before {
             content: "";
             position: absolute;
@@ -194,15 +182,19 @@ export default {
             flex-shrink: 0;
             color: $gray-600;
         }
+
         +label.checkboxTop::before {
             margin: -1.25rem 0.5rem 0 0 !important;
         }
+
         +label.checkboxTop::after {
             margin: -1.5rem 0.5rem 0 0 !important;
         }
+
         &:checked+label::before {
             background: $blue;
         }
+
         &:checked+label::after {
             content: "";
             position: absolute;
@@ -214,26 +206,31 @@ export default {
             transform: rotate(-45deg);
         }
     }
+
     input[type="radio"] {
         +label::before {
             content: "";
             display: none;
         }
+
         +label::after {
             content: "";
             display: none;
         }
+
         +label {
             img {
                 margin-bottom: 0;
             }
         }
     }
+
     &.horizontal {
         img {
             margin-bottom: 0;
             width: 5.5rem;
         }
+
         input[type="checkbox"],
         input[type="radio"] {
             +label::before {
@@ -242,19 +239,24 @@ export default {
                 margin: 0 0.5rem 0 0;
                 order: 1;
             }
+
             &:checked+label::after {
                 content: "";
                 margin: -0.25rem 0 0 0;
                 left: 0.875rem;
             }
+
             +label {
                 min-height: 48px;
                 color: $gray-600;
+
                 img {
                     margin-bottom: 0;
                 }
+
                 p {
                     text-align: left;
+
                     &.sub-copy {
                         color: $gray-550;
                     }

src/ux-components/radio/radio.vue

@@ -10,7 +10,7 @@
     :aria-required="isRequired"
     :value="value"
     :v-model="checkValue"
-    @change="handleCheckChanged()"
+    @change="handleCheckChanged"
     />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@@ -22,8 +22,12 @@
 </template>
 
 <script>
-import { toRefs } from "vue";
+import {
-import { useField } from "vee-validate";
+    toRefs
+} from "vue";
+import {
+    useField
+} from "vee-validate";
 export default {
     name: "radio",
     props: {
@@ -36,35 +40,36 @@ export default {
             default: "",
         },
         screenReaderOnlyText: String,
-    hasError: Boolean,
     },
     data() {
         return {
             checkValue: Boolean,
         };
     },
-  created(){
-    if(this.selectedButtonIDs){
-      this.checkValue = this.selectedButtonIDs[0];
-    }
-  },
     methods: {
-    handleClick(value) {
+        handleCheckChanged(newValue, oldValue) {
-      this.handleChange(value);
+            const isInitialization = typeof oldValue === "function";
-    },
+
-    handleCheckChange(newValue, oldValue){
-      const isInitialization = typeof(oldValue) === 'function';
             if (!isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+                this.$emit("isCheckedChanged", {
-      }
+                    isChecked: newValue.target.checked,
+                    buttonId: this.buttonID.toString(),
+                });
             }
         },
+    },
     setup(props) {
-    const { groupName, value } = toRefs(props);
+        const {
-    const { checked, handleChange, errorMessage } = useField(
             groupName,
-      undefined,
+            value
-      {
+        } = toRefs(props);
+        const {
+            checked,
+            handleChange,
+            errorMessage
+        } = useField(
+            groupName,
+            undefined, {
                 type: "radio",
                 checkedValue: value,
             }
@@ -77,7 +82,6 @@ export default {
     },
 };
 </script>
-
 <style lang="scss" scoped>
 .form-check {
   .form-check-input {