feat: course id fields restriction & js uncaught element bug fixed (#46)

* feat: course id fields restriction & js bug fixed

* refactor: whitespace error fixed

admin/js/course-id-restriction.js

@@ -0,0 +1,48 @@
+var originalValue = "";
+
+
+var inputElementForm = document.getElementById("openedx_enrollment_course_id");
+var inputElementProduct = document.getElementById("_course_id");
+var inputElement = null;
+
+if (inputElementForm !== null) {
+    inputElement = inputElementForm;
+} else if (inputElementProduct !== null) {
+    inputElement = inputElementProduct;
+}
+
+if (inputElement !== null) {
+
+    inputElement.addEventListener("input", function() {
+        updateCourseId(this);
+    });
+
+
+    inputElement.addEventListener("focus", function() {
+        saveOriginalValue(this);
+    });
+
+
+    inputElement.addEventListener("blur", function() {
+        restoreOriginalValue(this);
+    });
+
+    function saveOriginalValue(input) {
+        originalValue = input.value;
+    }
+
+    function restoreOriginalValue(input) {
+        if (input.value !== originalValue && !input.value.startsWith("course-v1:")) {
+            input.value = originalValue;
+        }
+    }
+
+    function updateCourseId(input) {
+        var prefix = "course-v1:";
+        var currentValue = input.value;
+
+        if (currentValue !== "" && !currentValue.startsWith(prefix)) {
+            input.value = prefix;
+        }
+    }
+}

admin/js/product-type.js

@@ -1,11 +1,15 @@
 document.addEventListener('DOMContentLoaded', function() {
     var checkbox = document.getElementById("is_openedx_course");
-    handleCheckboxChange(checkbox);
+    if (checkbox !== null) {
+        handleCheckboxChange(checkbox);
+    }
 });
 
 document.addEventListener('change', function() {
     var checkbox = document.getElementById("is_openedx_course");
-    handleCheckboxChange(checkbox);
+    if (checkbox !== null) {
+        handleCheckboxChange(checkbox);
+    }
 });
 
 function handleCheckboxChange(checkbox) {

admin/views/class-openedx-woocommerce-plugin-enrollment-info-form.php

@@ -103,7 +103,7 @@ public function render_enrollment_info_form( $post ) {
 						<tr>
 							<td class="first"><label for="openedx_enrollment_course_id">Course ID</label></td>
 							<td>
-								<input type="text" id="openedx_enrollment_course_id" name="enrollment_course_id" value="<?php echo esc_attr( $course_id ); ?>" oninput="updateCourseId(this)" onfocus="saveOriginalValue(this)" onblur="restoreOriginalValue(this)"
+								<input type="text" id="openedx_enrollment_course_id" name="enrollment_course_id" value="<?php echo esc_attr( $course_id ); ?>"
 								<?php
 								if ( '' !== $course_id ) {
 									?>
@@ -225,26 +225,7 @@ public function render_enrollment_info_form( $post ) {
 		</div>
 
 		<script>
-			var originalValue = "";
-
-			function saveOriginalValue(input) {
-				originalValue = input.value;
-			}
-
-			function restoreOriginalValue(input) {
-				if (input.value !== originalValue && !input.value.startsWith("course-v1:")) {
-					input.value = originalValue;
-				}
-			}
-
-			function updateCourseId(input) {
-				var prefix = "course-v1:";
-				var currentValue = input.value;
-
-				if (currentValue !== "" && !currentValue.startsWith(prefix)) {
-					input.value = prefix;
-				}
-			}
+
 		</script>
 
 		<?php

includes/class-openedx-woocommerce-plugin.php

@@ -277,6 +277,9 @@ private function define_public_hooks() {
 	private function define_enqueue_scripts() {
 		wp_register_script( 'product-type-script', plugin_dir_url( __FILE__ ) . '../admin/js/product-type.js', array(), $this->get_version(), true );
 		wp_enqueue_script( 'product-type-script' );
+
+		wp_register_script( 'course-id-restriction-script', plugin_dir_url( __FILE__ ) . '../admin/js/course-id-restriction.js', array(), $this->get_version(), true );
+		wp_enqueue_script( 'course-id-restriction-script' );
 	}
 
 	/**