From 4fef63de520740d498942612dce134a237a6e516 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Sat, 4 Nov 2023 03:11:30 +0000
Subject: [PATCH] sponsorship: Show error message for the field under the
 field.

---
 templates/corporate/sponsorship.html |  4 +++-
 web/src/billing/sponsorship.ts       | 13 +++++++++++++
 web/styles/portico/billing.css       |  6 ++++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/templates/corporate/sponsorship.html b/templates/corporate/sponsorship.html
index 7fb6083f65..2b78d18add 100644
--- a/templates/corporate/sponsorship.html
+++ b/templates/corporate/sponsorship.html
@@ -69,10 +69,12 @@
                     <div class="input-box sponsorship-form-field no-validation">
                         <label for="org-website" class="inline-block label-title">{{ _('Organization website') }}</label>
                         <input id="org-website" name="website" type="text" placeholder="{{ _('Leave blank if your organization does not have a website.') }}"/>
+                        <div id="sponsorship-org-website-error" class="alert alert-danger sponsorship-field-error"></div>
                     </div>
                     <div class="input-box sponsorship-form-field">
                         <label for="description" class="inline-block label-title">{{ _('Describe your organization') }}</label>
-                        <textarea id="description" name="description" cols="100" rows="5" required></textarea>
+                        <textarea id="description" name="description" cols="100" rows="5"></textarea>
+                        <div id="sponsorship-description-error" class="alert alert-danger sponsorship-field-error"></div>
                     </div>
                     <p id="sponsorship-discount-details"></p>
                     <!-- Disabled buttons do not fire any events, so we need a container div that isn't disabled for tippyjs to work -->
diff --git a/web/src/billing/sponsorship.ts b/web/src/billing/sponsorship.ts
index 080eedca79..3fa580585a 100644
--- a/web/src/billing/sponsorship.ts
+++ b/web/src/billing/sponsorship.ts
@@ -23,6 +23,15 @@ function create_ajax_request(): void {
         data[item.name] = item.value;
     }
 
+    // Clear any previous error messages.
+    $(".sponsorship-field-error").text("");
+
+    if (data.description.trim() === "") {
+        $("#sponsorship-description-error").text("Organization description cannot be blank.");
+        hide_submit_loading_indicator();
+        return;
+    }
+
     void $.ajax({
         type: "post",
         url: "/json/billing/sponsorship",
@@ -33,6 +42,10 @@ function create_ajax_request(): void {
         error(xhr) {
             hide_submit_loading_indicator();
             if (xhr.responseJSON?.msg) {
+                if (xhr.responseJSON.msg === "Enter a valid URL.") {
+                    $("#sponsorship-org-website-error").text(xhr.responseJSON.msg);
+                    return;
+                }
                 $("#sponsorship-error").show().text(xhr.responseJSON.msg);
             }
         },
diff --git a/web/styles/portico/billing.css b/web/styles/portico/billing.css
index 825988dfff..16f1a51c45 100644
--- a/web/styles/portico/billing.css
+++ b/web/styles/portico/billing.css
@@ -409,3 +409,9 @@ input[name="licenses"] {
 .sponsorship-status-page p:last-child {
     margin-bottom: 0;
 }
+
+.sponsorship-field-error {
+    text-align: left;
+    margin-left: 2px;
+    margin-top: 5px;
+}