Refactoring the Work policy wizard JavaScript functionality without (#…

…1907)

jQuery and outside of the <script> element.

Co-authored-by: Hector Correa <[email protected]>

app/javascript/entrypoints/application.js

@@ -15,17 +15,14 @@ import Turbolinks from 'turbolinks';
 import './vendor/jquery-ui-triggeredAutocomplete';
 
 import PdcUiLoader from './pdc/pdc_ui_loader.es6';
-
-console.log('Vite ⚡️ Rails');
+import WorksWizardPolicy from './works_wizard_policy';
 
 // If using a TypeScript entrypoint file:
 //     <%= vite_typescript_tag 'application' %>
 //
 // If you want to use .jsx or .tsx, add the extension:
 //     <%= vite_javascript_tag 'application.jsx' %>
 
-console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails');
-
 // Example: Load Rails libraries in Vite.
 //
 // import * as Turbo from '@hotwired/turbo'
@@ -45,6 +42,8 @@ Turbolinks.start();
 function ready() {
   const loader = new PdcUiLoader();
   loader.run();
+
+  WorksWizardPolicy.bind('#agreement');
 }
 
 // Must run the javascript loader on every page even if turbolinks loads it

app/javascript/entrypoints/works_wizard_policy.js

@@ -0,0 +1,47 @@
+class WorksWizardPolicy {
+  static bind(elementSelector) {
+    let built;
+    const root = document.querySelector(elementSelector);
+
+    if (root) {
+      built = new WorksWizardPolicy(root, '#submit-button');
+    }
+
+    return built;
+  }
+
+  handleChange(event) {
+    const { classList } = this.submitButton;
+
+    if (event.target.checked) {
+      classList.remove('btn-secondary');
+      classList.remove('disabled');
+      classList.add('btn-primary');
+
+      this.submitButton.disabled = false;
+    } else {
+      classList.remove('btn-primary');
+      classList.add('disabled');
+      classList.add('btn-secondary');
+
+      this.submitButton.disabled = true;
+    }
+  }
+
+  constructor(root, buttonSelector) {
+    this.root = root;
+    this.submitButton = null;
+
+    if (this.root) {
+      const submitButton = document.querySelector(buttonSelector);
+
+      if (submitButton) {
+        this.submitButton = submitButton;
+        const handleChange = this.handleChange.bind(this);
+        this.root.addEventListener('change', handleChange);
+      }
+    }
+  }
+}
+
+export default WorksWizardPolicy;

app/views/works_wizard_policy/show.html.erb

@@ -19,22 +19,3 @@
   </form>
 
 </div>
-
-<script>
-$(function() {
-  $('#agreement').on('click', function(event) {
-    let submitButton = $("#submit-button");
-    if (event.target.checked) {
-      submitButton.removeClass("btn-secondary");
-      submitButton.removeClass("disabled");
-      submitButton.addClass("btn-primary");
-      submitButton.prop("disabled", false);
-    } else {
-      submitButton.removeClass("btn-primary");
-      submitButton.addClass("disabled");
-      submitButton.addClass("btn-secondary");
-      submitButton.prop("disabled", true);
-    }
-  });
-});
-</script>