filled out showWarningConfirmation and removeWarningConfirmation

rubyforgood · Nov 4, 2023 · caa2c3a · caa2c3a
1 parent cec8c7f
commit caa2c3a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -19,11 +19,12 @@
 @use "shared/form";
 @use "shared/layout";
 @use "shared/navbar";
+@use "shared/noscript";
 @use "shared/select2_additional_styles";
 @use "shared/sidebar";
 @use "shared/typography";
 @use "shared/utilities";
-@use "shared/noscript";
+@use "shared/validated_form_component";
 
 @use "pages/all_casa_admin_dashboard";
 @use "pages/casa_cases";

diff --git a/app/assets/stylesheets/shared/validated_form_component.scss b/app/assets/stylesheets/shared/validated_form_component.scss
@@ -0,0 +1,10 @@
+.warning-required-checkbox {
+    background-color: #ffc107;
+    padding: 0.5em;
+
+    input[type="checkbox"] {
+        width: 18px;
+        height: 18px;
+        margin-right: 0.5em;
+    }
+}
diff --git a/app/javascript/src/validated_form.js b/app/javascript/src/validated_form.js
@@ -215,6 +215,7 @@ class NonDrivingContactMediumWarning extends ValidatableFormSectionComponent {
 
     this.drivingContactMediumCheckbox = contactMediumCheckboxes.filter('#case_contact_medium_type_in-person')
     this.nonDrivingContactMediumCheckboxes = contactMediumCheckboxes.not(this.drivingContactMediumCheckbox)
+    this.checkboxContainer = this.drivingContactMediumCheckbox.parents('.contact-medium.form-group')
     this.milesDrivenInput = milesDrivenInput
 
     this.notifier = notifier
@@ -231,10 +232,10 @@ class NonDrivingContactMediumWarning extends ValidatableFormSectionComponent {
   // @param  {string} errorState The value returned by getWarningState()
   warningHighlightUI (errorState) {
     if (errorState) {
-      this.drivingContactMediumCheckbox.parents('.contact-medium.form-group').css('background-color', '#fff8e1')
+      this.checkboxContainer.css('background-color', '#fff8e1')
       this.milesDrivenInput.css('border', '2px solid #ffc107')
     } else {
-      this.drivingContactMediumCheckbox.parents('.contact-medium.form-group').css('background-color', '')
+      this.checkboxContainer.css('background-color', '')
       this.milesDrivenInput.css('border', '')
     }
   }
@@ -260,10 +261,16 @@ class NonDrivingContactMediumWarning extends ValidatableFormSectionComponent {
   }
 
   showWarningConfirmation () {
-    // Shows UI requiring the user to acknowledge the warning
+    this.checkboxContainer.append($(
+`<div class="warning-required-checkbox">
+  <input type="checkbox" id="warning-non-driving-contact-medium-check" class="form-check-input" required="true">
+  <label for="warning-non-driving-contact-medium-check">I'm sure I drove for this contact medium.</label>
+</div>`
+    ))
   }
 
   removeWarningConfirmation () {
+    this.checkboxContainer.find('.warning-required-checkbox').remove()
   }
 }