Adding textbox question page

src/digital-components/textbox-question/textbox-question.vue

@@ -30,7 +30,7 @@
                 :aria-label="questionText"
                 :min="min"
                 :max="max"
-                required
+                :required="isRequired"
                 :class="[
                     hasIcon ? 'has-icon' : '',
                     iconRight ? 'icon-right' : '',
@@ -59,6 +59,7 @@
         </div>
         <div
             v-show="errorMessage"
+            ref="errorMessageDiv"
             class="row my-1 form-test-error">
             <span
                 class="d-inline-flex mt-0"
@@ -100,7 +101,10 @@ export default {
             default: ''
         },
         validationRules: String,
-        cmsWidgetName: String,
+        cmsWidgetName: {
+            String,
+            default: ''
+        },
         maxLength: String,
         questionAlignment: String, // Left or center. Left is default.
         cornerStyle: String, // Rounded or square. Square is default.
@@ -153,6 +157,7 @@ export default {
                 return this.modelValue;
             },
             set(newValue) {
+                console.log('set happened');
                 this.$emit('update:modelValue', newValue);
             }
         },
@@ -183,7 +188,9 @@ export default {
     },
     watch: {
         async value(newValue) {
+            console.log('watch triggered');
             const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
+            console.log(JSON.stringify(result));
             if (result.valid) {
                 this.handleChange(newValue); // trigger full validation on this field only
             }

src/helpers/cms-content-helper.js

@@ -246,7 +246,8 @@ function mapStringToState(str) {
             console.warn('Unable to resolve global state data.');
             return ''; // if we can't map our string to state data, return an empty string.
         }
-        const stringWithReplacement = str.replace(match[0], valueFromStore);
+        const valueFromStoreWrapped = `<span>${valueFromStore}</span>`;
+        const stringWithReplacement = str.replace(match[0], valueFromStoreWrapped);
 
         // If we still have values we need to substitute, call this function again.
         if (stringWithReplacement.includes(dynamicStrings.GLOBAL_STATE)) {

src/layouts/bailout-page/bailout-page.vue

@@ -89,7 +89,6 @@ export default {
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
-        console.log('beforeRouteEnter');
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
         // Settle promises and get results
@@ -105,7 +104,6 @@ export default {
         const pageData = useMainStore().pageData(to.query.issPage);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            console.log(JSON.stringify(pageData[routerParams.NOT_SEEING_PREFERRED_SHOP]));
             vm.setNotSeeingPreferShop(pageData[routerParams.NOT_SEEING_PREFERRED_SHOP]);
         });
     },
@@ -176,7 +174,6 @@ export default {
             };
         },
         setNotSeeingPreferShop(value) {
-            console.log(`set flag: ${value}`);
             this.notSeeingPreferredShop = value ?? false;
         }
     }

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -93,6 +93,7 @@ import errorMessages from '@/constants/error-messages';
 import damageLocationsCms from '@/constants/damage-locations-cms.js';
 import damageLocationsSelected from '@/constants/damage-locations-selected.js';
 import { useMainStore } from '@/store';
+import routerParams from '@/router/router-constants/router-params';
 
 // DEFINE VALIDATION RULES
 defineRule('replace-options-required', required(errorMessages.REPLACE_OPTIONS_REQUIRED));
@@ -226,7 +227,7 @@ export default {
             );
         },
         shouldDisplayVehicleChangeAlert() {
-            return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
+            return this.$route.params[routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
         }
     },
     methods: {