Added subscription form for institutions

institutions/urls.py

@@ -17,6 +17,7 @@
     path('preferences/<str:pk>/', views.account_preferences, name="preferences-institution"),
     path('api-key/<str:pk>/', views.api_keys, name="institution-api-key"),
     path('connect-service-provider/<str:pk>/', views.connect_service_provider, name="institution-connect-service-provider"),
+    path('subscription-form/<str:pk>/', views.create_institution_subscription, name="institution-create-subscription-form"),
 
     # Notices
     path('notices/<str:pk>/', views.institution_notices, name="institution-notices"),

institutions/views.py

@@ -1642,4 +1642,46 @@ def api_keys(request, pk):
         }
         return render(request, 'account_settings_pages/_api-keys.html', context)
     except:
-        raise Http404()
+        raise Http404()
+
+@login_required(login_url="login")
+def create_institution_subscription(request, pk):
+    institute = get_institution(pk)
+    env = dev_prod_or_local(request.get_host())
+    initial_data = {
+        "first_name": request.user._wrapped.first_name,
+        "last_name": request.user._wrapped.last_name,
+        "email": request.user._wrapped.email,
+        "organization_name": institute.institution_name,
+    }
+    subscription_form = SubscriptionForm(initial=initial_data)
+    subscription_form.fields['organization_name'].widget.attrs.update({"class": "w-100 readonly-input"})
+
+    if request.method == "POST":
+        if validate_recaptcha(request):
+            mutable_post_data = request.POST.copy()
+            subscription_data = {
+                "first_name": request.POST['first_name'],
+                "last_name": request.POST['last_name'],
+                "email": request.POST['email'],
+                "account_type": "institution_account",
+                "inquiry_type": request.POST['inquiry_type'],
+                "organization_name": request.POST['organization_name'],
+            }
+
+            mutable_post_data.update(subscription_data)
+            subscription_form = SubscriptionForm(mutable_post_data)
+            if subscription_form.is_valid() and env != 'SANDBOX':
+                handle_confirmation_and_subscription(request, subscription_form, institute, env)
+                return redirect('dashboard')
+            else:
+                messages.add_message(
+                    request, messages.ERROR, "Something went wrong. Please Try again later.",
+                )
+                return redirect('dashboard')
+    return render(
+        request, "account_settings_pages/_subscription-form.html", {
+            "subscription_form": subscription_form,
+            'institution': institute
+        }
+    )

templates/account_settings_pages/_subscription-form.html

@@ -0,0 +1,146 @@
+{% extends 'register-base.html' %} {% block title %} Create Institution {% endblock %}{% load static %} {% block card %}
+<script src="https://www.google.com/recaptcha/api.js?render=6LchglYpAAAAAABKj7CtiTlfvmPVN5eU2DzTVl2U"></script>
+<script>
+    grecaptcha.ready(function () {
+      grecaptcha
+        .execute("6LchglYpAAAAAABKj7CtiTlfvmPVN5eU2DzTVl2U", {
+          action: "subscription",
+        })
+        .then(function (token) {
+          document.getElementById("g-recaptcha-response").value = token;
+        });
+    });
+  </script>
+<div class="flex-this column account-registration-container">
+    <div class="flex-this space-between">
+        <div><h2 class="mt-0 mb-8">Institution Account </h2></div>
+        <div>Or <a class="default-a" href="{% url 'connect-institution' %}">request to join an existing institution</a>  </div>
+    </div>
+
+    <p class="mb-0 mt-0">
+        The institution details provided below will default to a public display in the Local Contexts Registry.
+        Providing your details will give consent to publicly being listed on the Registry.
+        Read more about our privacy standards <a class="default-a" href="https://localcontexts.org/privacy-policy/" target="_blank" rel="noopener">here <i class="fa-solid fa-arrow-up-right-from-square fa-xs"></i></a>
+    </p>
+
+    <form action="{%url 'institution-create-subscription-form' institution.id  %}" method="POST" class="flex-this column w-100">
+        {% csrf_token %}
+
+        <div class="w-100 flex-this mt-16">
+            <div class="w-50 mr-1p">
+                <label class="pad-top-1-5" >First Name<span class="orange-text required-label" title="">*</span></label><br>
+                {{ subscription_form.first_name }}
+            </div>
+
+            <div class="w-50">
+                <label>Last Name</label><br>
+                {{ subscription_form.last_name }}
+            </div>
+        </div>
+
+        <div class="mt-8">
+            <label>Email<span class="orange-text required-label" title="">*</span></label>
+            {{ subscription_form.email }}
+        </div>
+
+        <div class="mt-8">
+            <label>Institution Name<span class="orange-text required-label" title="">*</span></label>
+            {{ subscription_form.organization_name }}
+        </div>
+
+        <div class="w-100">
+            <div class="pad-top-1-5 radio-group mb-1p">
+                <label for="inquiry_type" class="inquiry-label">Inquiry Type<span class="orange-text required-label" title="">*</span></label>
+                <div class="tooltip"><strong>i</strong>
+                    <span class="tooltiptext">An institution inquiry type allows you to select the desired role for the subscription process.</span>
+                </div>
+                <br>
+                <div class="flex-this row ">
+                    <label class="radio-container w-50 mt-2p">
+                        <input class="pointer" type="radio" name="inquiry_type" value="Subscription">
+                        <span class="ml-5">Subscription</span>
+                    </label>
+                    <label class="radio-container w-50 mt-2p">
+                        <input class="pointer" type="radio" name="inquiry_type" value="Subscription -- CC Notices Only">
+                        <span class="ml-5">Collections Care Notices</span>
+                    </label>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex-this flex-end mt-8">
+            <div class="flex-this creat-account__container-width__buttons">
+                <input
+                type="hidden"
+                name="g-recaptcha-response"
+                id="g-recaptcha-response"
+                />
+
+                <div class="mr-8">
+                    <button id="clearFormBtn" class="primary-btn white-btn btn-width__clear-form mt-2p">Clear form <i class="fa-regular fa-eraser"></i></button>
+                </div>
+
+                <div class="flex-this flex-end">
+                    <button id="createSubscription" class="primary-btn action-btn mt-2p" onclick="disableButton()">
+                      Continue <i class="fa fa-arrow-right"></i>
+                    </button>
+                    <div id="loading-spinner" class="primary-btn action-btn mt-2p hide disabled-btn">
+                      Continue <i class="fa fa-arrow-right"></i>
+                      <i class="fa spinner-container fa-spinner fa-spin fa-2x spinner "></i>
+                    </div>
+                  </div>                 
+            </div>
+        </div>
+
+    </form>
+
+</div>
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const firstNameInput = document.querySelector('input[name="first_name"]');
+        const lastNameInput = document.querySelector('input[name="last_name"]');
+        const emailInput = document.querySelector('input[type="email"]');
+        const organizationInput = document.querySelector('input[name="organization_name"]');
+        const inquiryTypeRadios = document.querySelectorAll('input[name="inquiry_type"]');
+        const submitButton = document.getElementById("createSubscription");
+        const clearFormBtn = document.getElementById('clearFormBtn')
+
+        // Disable the button by default
+        submitButton.disabled = true;
+
+        // Add event listeners to inputs
+        firstNameInput.addEventListener("input", validateForm);
+        emailInput.addEventListener("input", validateForm);
+        inquiryTypeRadios.forEach(radio => radio.addEventListener("change", validateForm));
+
+    function validateForm() {
+        const firstNameFilled = firstNameInput.value.trim() !== "";
+        const emailFilled = emailInput.value.trim() !== "" && isValidEmail(emailInput.value.trim());
+        const inquiryTypeSelected = Array.from(inquiryTypeRadios).some(radio => radio.checked);
+
+        // Enable the button if all fields are valid
+        if (firstNameFilled && emailFilled && inquiryTypeSelected) {
+          submitButton.disabled = false;
+        } else {
+          submitButton.disabled = true;
+        }
+    }
+
+    function isValidEmail(email) {
+        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    }
+    clearFormBtn.addEventListener('click', (e) => {
+        e.preventDefault()
+        firstNameInput.value = ''
+        submitButton.disabled = true
+
+        lastNameInput.value = ''
+        emailInput.value = ''
+        inquiryTypeRadios.forEach(radio => {
+            radio.checked = false;
+        });
+    })
+});
+</script>
+{% endblock %}

templates/account_settings_pages/_subscription.html

@@ -18,7 +18,9 @@
   {% elif subscription is None  %}    
   <p class='red-text'>To unlock more activities in your account please subscribe</p>
   <div>
-    <button type="submit" class="primary-btn action-btn" name="generatebtn">Fill out Subscription Form</button>
+    <a href="{% if institution %}{% url 'institution-create-subscription-form' institution.id  %}{% else %}{% url 'subscription' researcher.id 'researcher' %}{% endif %}">
+      <button type="submit" class="primary-btn action-btn" name="generatebtn">Fill out Subscription Form</button>
+    </a>
   </div> 
   {% else %}
     <div class="flex-this w-60 subscription-details">