From b0478d533275e18e00f4c6991e23bc2b692596bd Mon Sep 17 00:00:00 2001
From: Kevin Etchells <kevetchells@hotmail.com>
Date: Tue, 10 Sep 2024 11:41:39 +0100
Subject: [PATCH] Ensure profile data is saved whenever the dialog box is
 closed

---
 .../src/js/web-components/profile-overlay.js  | 72 ++++++++++---------
 django_app/redbox_app/redbox_core/forms.py    |  4 +-
 .../templates/macros/profile-overlay.html     |  8 +--
 3 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/django_app/frontend/src/js/web-components/profile-overlay.js b/django_app/frontend/src/js/web-components/profile-overlay.js
index 4c85c48eb..d4c1a46a4 100644
--- a/django_app/frontend/src/js/web-components/profile-overlay.js
+++ b/django_app/frontend/src/js/web-components/profile-overlay.js
@@ -72,44 +72,48 @@ class ProfileOverlay extends HTMLElement {
       });
     });
 
+    // Send data on dialog close
+    dialog.addEventListener("close", () => {
+      this.currentPage = 0;
+
+      /**
+       * Sends data to endpoint, retrying if necessary
+       * @param {FormData} data
+       * @param {number} retry
+       */
+      const sendData = async (data, retry = 0) => {
+        const MAX_RETRIES = 10;
+        const RETRY_INTERVAL_SECONDS = 10;
+        const csrfToken =
+          /** @type {HTMLInputElement | null} */ (
+            this.querySelector('[name="csrfmiddlewaretoken"]')
+          )?.value || "";
+        try {
+          await fetch(`/update-demographics`, {
+            method: "POST",
+            headers: {
+              "X-CSRFToken": csrfToken,
+            },
+            body: data,
+          });
+        } catch (err) {
+          if (retry < MAX_RETRIES) {
+            window.setTimeout(() => {
+              sendData(data, retry + 1);
+            }, RETRY_INTERVAL_SECONDS * 1000);
+          }
+        }
+      };
+
+      // Format and send data
+      const formData = new FormData(this.querySelector("form") || undefined);
+      sendData(formData);
+    });
+
     let closeButtons = this.querySelectorAll(`button[data-action="close"]`);
     closeButtons.forEach((closeButton) => {
       closeButton.addEventListener("click", () => {
-        this.currentPage = 0;
         this.querySelector("dialog")?.close();
-
-        /**
-         * Sends data to endpoint, retrying if necessary
-         * @param {FormData} data
-         * @param {number} retry
-         */
-        const sendData = async (data, retry = 0) => {
-          const MAX_RETRIES = 10;
-          const RETRY_INTERVAL_SECONDS = 10;
-          const csrfToken =
-            /** @type {HTMLInputElement | null} */ (
-              this.querySelector('[name="csrfmiddlewaretoken"]')
-            )?.value || "";
-          try {
-            await fetch(`/update-demographics`, {
-              method: "POST",
-              headers: {
-                "X-CSRFToken": csrfToken,
-              },
-              body: data,
-            });
-          } catch (err) {
-            if (retry < MAX_RETRIES) {
-              window.setTimeout(() => {
-                sendData(data, retry + 1);
-              }, RETRY_INTERVAL_SECONDS * 1000);
-            }
-          }
-        };
-
-        // Format and send data
-        const formData = new FormData(this.querySelector("form") || undefined);
-        sendData(formData);
       });
     });
   }
diff --git a/django_app/redbox_app/redbox_core/forms.py b/django_app/redbox_app/redbox_core/forms.py
index b6f8293da..e5f53e668 100644
--- a/django_app/redbox_app/redbox_core/forms.py
+++ b/django_app/redbox_app/redbox_core/forms.py
@@ -23,6 +23,6 @@ class Meta:
         widgets: ClassVar[Mapping[str, forms.Widget]] = {
             "name": forms.TextInput(attrs={"class": "govuk-input govuk-!-width-one-half"}),
             "ai_experience": forms.RadioSelect(attrs={"class": "govuk-radios__item"}),
-            "info_about_user": forms.Textarea(attrs={"class": "govuk-textarea govuk-!-width-one-half"}),
-            "redbox_response_preferences": forms.Textarea(attrs={"class": "govuk-textarea govuk-!-width-one-half"}),
+            "info_about_user": forms.Textarea(attrs={"class": "govuk-textarea govuk-!-width-one-half", "rows": "5"}),
+            "redbox_response_preferences": forms.Textarea(attrs={"class": "govuk-textarea govuk-!-width-one-half", "rows": "5"}),
         }
diff --git a/django_app/redbox_app/templates/macros/profile-overlay.html b/django_app/redbox_app/templates/macros/profile-overlay.html
index 4dc312ff8..c005fc37b 100644
--- a/django_app/redbox_app/templates/macros/profile-overlay.html
+++ b/django_app/redbox_app/templates/macros/profile-overlay.html
@@ -32,14 +32,8 @@ <h2 id="profile-overlay-title">Redbox can give better responses if you tell it a
             <legend class="profile-label">Which level best describes your experience with Generative AI tools?</legend>
             <div class="profile__radio-container-inner">
 
-              {# TO DO: Pull these in from the model #}
-              {% set experience_levels = ["Curious Newcomer", "Cautious Explorer", "Enthusiastic Experimenter", "Experienced Navigator", "AI Alchemist"] %}
               {% set selected_level = user.ai_experience %}
-              {% if not selected_level %}
-                {% set selected_level = experience_levels[0] %}
-              {% endif %}
-
-              {% for level in experience_levels %}
+              {% for level in user.AIExperienceLevel %}
                 <div>
                   <input class="profile__radio" type="radio" id="profile-experience-1" name="ai_experience" value="{{ level }}" required {% if level == selected_level %}checked{% endif %} />
                   <label class="profile__radio-card" for="profile-experience-1">{{ level }}</label>