From ee098afdbee6a00a05b0ca42e6b58686a80081c2 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Thu, 9 May 2024 13:36:38 -0400
Subject: [PATCH] Updated switch in settings view

---
 .../cloudcare/js/formplayer/layout/views/settings.js | 12 +++++++-----
 .../cloudcare/bootstrap5/preview_app_base.html       |  2 --
 .../cloudcare/partials/bootstrap5/settings_view.html | 10 ++++++++--
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/layout/views/settings.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/layout/views/settings.js
index f4bad5ccb33f..c9285dec04e9 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/layout/views/settings.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/layout/views/settings.js
@@ -7,7 +7,7 @@ hqDefine("cloudcare/js/formplayer/layout/views/settings", [
     'cloudcare/js/formplayer/apps/api',
     'cloudcare/js/formplayer/users/models',
     'cloudcare/js/formplayer/utils/utils',
-    'bootstrap-switch/dist/js/bootstrap-switch', // bootstrapSwitch
+    'bootstrap-switch/dist/js/bootstrap-switch', // bootstrapSwitch: only when window.USE_BOOTSTRAP5 is false
 ], function (
     $,
     _,
@@ -70,10 +70,12 @@ hqDefine("cloudcare/js/formplayer/layout/views/settings", [
             'switchChange.bootstrapSwitch @ui.oneQuestionPerScreen': 'onChangeOneQuestionPerScreen',
         },
         onRender: function () {
-            this.ui.oneQuestionPerScreen.bootstrapSwitch(
-                'state',
-                this.currentUser.displayOptions.oneQuestionPerScreen
-            );
+            if (!window.USE_BOOTSTRAP5) {
+                this.ui.oneQuestionPerScreen.bootstrapSwitch(
+                    'state',
+                    this.currentUser.displayOptions.oneQuestionPerScreen
+                );
+            }
         },
         onChangeOneQuestionPerScreen: function (e, switchValue) {
             this.currentUser.displayOptions.oneQuestionPerScreen = switchValue;
diff --git a/corehq/apps/cloudcare/templates/cloudcare/bootstrap5/preview_app_base.html b/corehq/apps/cloudcare/templates/cloudcare/bootstrap5/preview_app_base.html
index 494fc0772095..2599026a2580 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/bootstrap5/preview_app_base.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/bootstrap5/preview_app_base.html
@@ -35,8 +35,6 @@
 
   {% block css %}{% endblock %}
 
-  <link rel="stylesheet"
-        href="{% static 'bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css' %}"/>
   <link type="text/css"
         rel="stylesheet"
         media="screen"
diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/bootstrap5/settings_view.html b/corehq/apps/cloudcare/templates/cloudcare/partials/bootstrap5/settings_view.html
index 206b6db5a0be..8cbd4d6c8f87 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/partials/bootstrap5/settings_view.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/partials/bootstrap5/settings_view.html
@@ -18,8 +18,14 @@ <h1 class="page-title">Settings</h1>
   </div>
 </script>
 <script type="text/template" id="display-setting-template">
-  <th>{% trans "Use one question per screen" %}</th>
-  <td><input class="js-one-question-per-screen" type="checkbox" data-size="mini" /></td>  {# todo B5: css:checkbox #}
+  <th>
+    <label class="form-check-label" for="oqps-switch">{% trans "Use one question per screen" %}</label>
+  </th>
+  <td>
+    <div class="form-check form-switch">
+      <input class="js-one-question-per-screen" type="checkbox" id="oqps-switch"/>
+    </div>
+  </td>
 </script>
 <script type="text/template" id="lang-setting-template">
   <th>{% trans "Set the application language" %}</th>