Merge pull request #355 from Safelite/feature/digital/SSR-468.2

Feature/digital/ssr 468.2

src/digital-components/base-input-button/base-input-button.vue

@@ -121,9 +121,7 @@ export default {
             return this.isMultiSelect ? "checkbox" : "radio";
         },
         buttonId() {
-            return `${this.groupName?.replace(" ", "-")}-${this.value
+            return `${this.groupName}-${this.value}`.replaceAll(" ", "-");
-                ?.toString()
-                ?.replace(" ", "-")}`;
         },
         isValueSelectedOnClick() {
             return this.isMultiSelect || this.selectingInitiatesLoad;

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

@@ -31,7 +31,7 @@
                     <div
                         :class="getComponentWrapperClasses"
                         v-for="answer in buttonsInfo"
-                        :key="answer.value ? answer.value : answer">
+                        :key="answer.value ?? answer">
                         <component
                             :is="buttonTypeString"
                             :buttonLabel="answer.buttonLabel"

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

@@ -12,7 +12,7 @@
                     :isWide="true"
                     altText=""
                     isRequired
-                    :groupName="`${glassLocation}-${glassName}`"
+                    :groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}`)"
                     :validationRules="tintValidationRules">
                     <div class="row my-2" aria-live="polite">
                         <div class="col">
@@ -27,7 +27,7 @@
                                 :loaderEnabled="false"
                                 isRequired
                                 isSmallQuestionText
-                                :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
+                                :groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}-${selectedTint}`)"
                                 :validationRules="partValidationRules" />
                         </div>
                     </div>
@@ -210,6 +210,10 @@ export default {
                 }
             });
         },
+
+        replaceAllSpaceWithDash(str) {
+            return String(str).replaceAll(" ", "-");
+        },
     },
     watch: {
         selectedTint() {

src/ux-components/radio/radio.vue

@@ -76,69 +76,75 @@ export default {
             value: inputValue,
             handleChange,
             errors,
+            resetField
         } = useField(props.groupName, props.validationRules,
-            {
+        {
-                type: inputType,
+            type: inputType
-                checkedValue: props.value,
+        });
-            });
-            return {
-                handleChange,
-                errors,
-            };
-        },
-    };
-    </script>
 
-    <style lang="scss" scoped>
+        return {
-    .form-check {
+            handleChange,
-        position: relative;
+            errors,
+            resetField
+        };
+    },
+    unmounted(){
+        this.resetField();
+    }
+};
+</script>
 
-        label {
+<style lang="scss" scoped>
-            &:hover {
-                cursor: pointer;
-            }
-        }
 
-        .form-check-input {
+.form-check {
-            border: 1px solid $gray-500;
+    position: relative;
-            border-radius: 50%;
-            margin-right: 0.5rem;
-
-            &:checked {
-                background-color: $white;
-                background-size: 71%;
-                background-position: center;
-                border: 1px solid $blue;
-                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
-                + label {
-                    p {
-                        font-weight: 500;
-                        font-size: .875rem;
-                        color: $black;
-                    }
-                }
-            }
-            &:focus {
-                box-shadow: 0 0 0 2.5px $blue;
-            }
-
-            &, & + label {
-                margin-top: 0;
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-            }
-        }
 
+    label {
         &:hover {
-            .form-check-input {
+            cursor: pointer;
-                box-shadow: 0 0 0 4px $blue-300;
-            }
-        }
-        p {
-            font-weight: 400;
-            font-size: .875rem;
-            color: $gray-600;
         }
     }
-    </style>
+
+    .form-check-input {
+        border: 1px solid $gray-500;
+        border-radius: 50%;
+        margin-right: 0.5rem;
+
+        &:checked {
+            background-color: $white;
+            background-size: 71%;
+            background-position: center;
+            border: 1px solid $blue;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
+            + label {
+                p {
+                    font-weight: 500;
+                    font-size: .875rem;
+                    color: $black;
+                }
+            }
+        }
+        &:focus {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+
+        &, & + label {
+            margin-top: 0;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+
+    &:hover {
+        .form-check-input {
+            box-shadow: 0 0 0 4px $blue-300;
+        }
+    }
+    p {
+        font-weight: 400;
+        font-size: .875rem;
+        color: $gray-600;
+    }
+}
+</style>