From 2be3fe359317a86f2ef0aeb6758cc77ed5badd58 Mon Sep 17 00:00:00 2001
From: sab-LC <sabeen.ammar@localcontexts.org>
Date: Mon, 21 Oct 2024 14:18:05 -0700
Subject: [PATCH] Updated UI of bundle modal

---
 accounts/forms.py                             | 24 ++++++--
 accounts/views.py                             |  2 +-
 localcontexts/static/css/main.css             | 10 +++
 .../account_settings_pages/_subscription.html | 61 +++++++++++--------
 4 files changed, 67 insertions(+), 30 deletions(-)

diff --git a/accounts/forms.py b/accounts/forms.py
index f56b4365..2a4130c2 100644
--- a/accounts/forms.py
+++ b/accounts/forms.py
@@ -294,10 +294,26 @@ def __init__(self, *args, **kwargs):
         super(BundleTypeForm, self).__init__(*args, **kwargs)
 
         self.bundle_details = {
-            'User': {'label': 'User Bundle  5 @ US$1500', 'quantity': 5},
-            'API': {'label': 'API Bundle  3 @ US$1500', 'quantity': 3},
-            'Project': {'label': 'Project Bundle  10 @ US$1500', 'quantity': 10},
-            'Notification': {'label': 'Notification Bundle  10 @ US$1500', 'quantity': 10},
+            'User': {
+                'label': 'User Bundle',
+                'description': 'Add 5 more users to this account.',
+                'quantity': 5
+                },
+            'API': {
+                'label': 'API Bundle',
+                'description': 'Add 3 more API keys to this account.',
+                'quantity': 3
+                },
+            'Project': {
+                'label': 'Project Bundle',
+                'description': 'Add 10 more projects to this account.',
+                'quantity': 10
+                },
+            'Notification': {
+                'label': 'Notification Bundle',
+                'description': 'Add 10 more notifications to this account.',
+                'quantity': 10
+                },
         }
 
         self.fields['bundle_type'].choices = [
diff --git a/accounts/views.py b/accounts/views.py
index 4ec62e20..7bd0a7c8 100644
--- a/accounts/views.py
+++ b/accounts/views.py
@@ -934,7 +934,7 @@ def subscription(request, pk, account_type, related=None):
                 try:
                     access_token = get_access_token_of_SF(request)
                     for bundle in form.cleaned_data['bundle_type']:
-                        bundle_data = BundleTypeForm().bundle_details[bundle]
+                        bundle_data = form.bundle_details[bundle]
                         quantity = bundle_data['quantity']
                         bundle_data = {
                             "hubId": str(request.user.id) + "_i",
diff --git a/localcontexts/static/css/main.css b/localcontexts/static/css/main.css
index d28ecbaf..dacf1f06 100644
--- a/localcontexts/static/css/main.css
+++ b/localcontexts/static/css/main.css
@@ -1844,4 +1844,14 @@ i[data-tooltip]:hover:after {
     visibility: visible;
     background-color: #EF6C00;
     color: #fff;
+}
+
+.bundle-modal {
+    width: 690px;
+}
+
+input[type="checkbox"]:focus {
+    background: none;
+    border: none;
+    box-shadow: none;
 }
\ No newline at end of file
diff --git a/templates/account_settings_pages/_subscription.html b/templates/account_settings_pages/_subscription.html
index 3e3edac1..7de4b027 100644
--- a/templates/account_settings_pages/_subscription.html
+++ b/templates/account_settings_pages/_subscription.html
@@ -55,7 +55,10 @@
     {% include 'partials/_alerts.html' %}
     <div class="flex-this">
       <div>
-          <button type="submit" class="primary-btn action-btn" name="generatebtn" onclick="openAddModalView()">Update Subscription</button>
+          <button type="submit" class="primary-btn action-btn" name="generatebtn" onclick="openAddModalView()">Add a bundle<i class="fa-solid fa-plus"></i></button>
+      </div>   
+      <div class="ml-2p">
+        <button type="submit" class="primary-btn action-btn" name="generatebtn">Edit Subscription<i class="fa-solid fa-pen-line"></i></button>
       </div>        
       <div class="ml-2p">
         <button type="submit" class="primary-btn white-btn" name="generatebtn">Cancel Subscription</button>
@@ -70,32 +73,40 @@
 
 <div id="bundleModal" class="modal hide">
   <span id="bundleModalContent">
-      <!-- ADD MEMBER MODAL VIEW -->
-      <div id="addMemberModalView" class="modal-defaults add-member-modal flex-this column w-100">
-        <div class="flex-this space-between">
-          <div>
-              <h2 class="mt-0">Bundles</h2>
-                  <p class="mb-2p">
-                    Add Bundles to increase your resources.
-                  </p>
-          </div>
-
-          <div id='close-model-button' onClick="closeBundleModal()">
-              <div class="close-modal-btn"><i class="fa-regular fa-xmark fa-xl"></i></div>
-          </div>
-      </div>  
-        
-        <div class="w-100 flex-this column">
-              <form id="addBundleForm" method="POST" action="">
-                  {% csrf_token %}
-
-                  {{ form.as_p }} 
-                  <button type="submit" class="primary-btn action-btn">Submit</button>
+    <div class="modal-defaults bundle-modal flex-this column w-100">
+      <div class="flex-this space-between">
+        <div>
+          <h2 class="mt-0">Add a Bundle</h2>
+            <p class="mb-2p">
+              Upgrade your subscription to unlock additional features. Choose from the available bundles below and submit your request to enhance your experience.
+            </p>
+        </div>
+        <div id='close-model-button' onClick="closeBundleModal()">
+            <div class="close-modal-btn"><i class="fa-regular fa-xmark fa-xl"></i></div>
+        </div>
+    </div>
 
-              </form>
-          </div>
+    <div class="w-100 flex-this column">
+      <form method="POST" action="{% if institution %}{% url 'subscription' institution.id 'institution' %}{% else %}{% url 'subscription' researcher.id 'researcher' %}{% endif %}">
+        {% csrf_token %}
+        <div id="labelsContainer">
+            {% for key, bundle in form.bundle_details.items %}
+            <div class="flex-this flex-start">
+                <input class="mr-10" type="checkbox" id="label_{{ key }}" name="bundle_type" value="{{ key }}">
+                <div class="flex-this column ml-16 mt-2p">
+                    <label class="bold" for="label_{{ key }}">{{ bundle.label }}</label>
+                    <p class="mt-0">{{ bundle.description }}</p>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    
+        <button type="submit" class="primary-btn action-btn w-100 mb-2p">Submit request</button>
+        <button class="primary-btn white-btn w-100 darkteal-text" onClick="closeBundleModal()">Cancel</button>
+    </form>
+    </div>
 
-      </div>
+  </div>
   </span>
 </div>