From 09e1235832778188d469aaa67e294fec86afa1d1 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Wed, 8 Nov 2023 18:38:12 -0800
Subject: [PATCH] Auto update billing card UI on (re/un-)subscribe click on web
 app

Previously required a page load to see the updated billing state after
clicking resubscribe or unsubscribe buttons
---
 src/khoj/interface/web/config.html | 69 +++++++++++++++++++++++-------
 src/khoj/routers/subscription.py   |  2 +-
 2 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/src/khoj/interface/web/config.html b/src/khoj/interface/web/config.html
index 58c68349..082c5d01 100644
--- a/src/khoj/interface/web/config.html
+++ b/src/khoj/interface/web/config.html
@@ -174,31 +174,47 @@
                     </h3>
                 </div>
                 <div class="card-description-row">
-                {% if subscription_state == "subscribed" %}
-                    <p class="card-description">You are <b>subscribed</b> to Khoj Cloud. Subscription will <b>renew</b> on <b>{{ subscription_renewal_date }}</b></p>
-                {% elif subscription_state == "unsubscribed" %}
-                    <p class="card-description">You are <b>subscribed</b> to Khoj Cloud. Subscription will <b>expire</b> on <b>{{ subscription_renewal_date }}</b></p>
-                {% elif subscription_state == "expired" %}
-                    <p class="card-description">Subscribe to Khoj Cloud. Subscription <b>expired</b> on <b>{{ subscription_renewal_date }}</b></p>
-                {% else %}
-                    <p class="card-description">Subscribe to Khoj Cloud</p>
-                {% endif %}
+                    <p id="trial-description"
+                       class="card-description"
+                       style="display: {% if subscription_state != 'trial' %}none{% endif %}">
+                        Subscribe to Khoj Cloud
+                    </p>
+                    <p id="unsubscribe-description"
+                       class="card-description"
+                       style="display: {% if subscription_state != 'subscribed' %}none{% endif %}">
+                       You are <b>subscribed</b> to Khoj Cloud. Subscription will <b>renew</b> on <b>{{ subscription_renewal_date }}</b>
+                    </p>
+                    <p id="resubscribe-description"
+                       class="card-description"
+                       style="display: {% if subscription_state != 'unsubscribed' %}none{% endif %}">
+                       You are <b>subscribed</b> to Khoj Cloud. Subscription will <b>expire</b> on <b>{{ subscription_renewal_date }}</b>
+                    </p>
+                    <p id="expire-description"
+                       class="card-description"
+                       style="display: {% if subscription_state != 'expired' %}none{% endif %}">
+                       Subscribe to Khoj Cloud. Subscription <b>expired</b> on <b>{{ subscription_renewal_date }}</b>
+                    </p>
                 </div>
                 <div class="card-action-row">
-                    {% if subscription_state == "subscribed" %}
-                    <button class="card-button" onclick="unsubscribe()">
+                    <button id="unsubscribe-button"
+                            class="card-button"
+                            onclick="unsubscribe()"
+                            style="display: {% if subscription_state != 'subscribed' %}none{% endif %};">
                         Unsubscribe
                     </button>
-                    {% elif subscription_state == "unsubscribed" %}
-                    <button class="card-button" onclick="resubscribe()">
+                    <button id="resubscribe-button"
+                            class="card-button happy"
+                            onclick="resubscribe()"
+                            style="display: {% if subscription_state != 'unsubscribed' %}none{% endif %};">
                         Resubscribe
                     </button>
-                    {% else %}
-                    <a class="card-button happy" href="{{ khoj_cloud_subscription_url }}?prefilled_email={{ username }}" target="_blank">
+                    <a id="subscribe-button"
+                       class="card-button happy"
+                       href="{{ khoj_cloud_subscription_url }}?prefilled_email={{ username }}"
+                       style="display: {% if subscription_state == 'subscribed' or subscription_state == 'unsubscribed' %}none{% endif %};">
                         Subscribe
                         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
                     </a>
-                    {% endif %}
                 </div>
             </div>
         </div>
@@ -274,6 +290,17 @@
                 'Content-Type': 'application/json',
             },
         })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+               document.getElementById("unsubscribe-description").style.display = "none";
+               document.getElementById("unsubscribe-button").style.display = "none";
+
+               document.getElementById("resubscribe-description").style.display = "";
+               document.getElementById("resubscribe-button").style.display = "";
+
+             }
+        })
     }
 
     function resubscribe() {
@@ -283,6 +310,16 @@
                 'Content-Type': 'application/json',
             },
         })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+               document.getElementById("resubscribe-description").style.display = "none";
+               document.getElementById("resubscribe-button").style.display = "none";
+
+               document.getElementById("unsubscribe-description").style.display = "";
+               document.getElementById("unsubscribe-button").style.display = "";
+            }
+        })
     }
 
     var configure = document.getElementById("configure");
diff --git a/src/khoj/routers/subscription.py b/src/khoj/routers/subscription.py
index a9862f51..5b6998c0 100644
--- a/src/khoj/routers/subscription.py
+++ b/src/khoj/routers/subscription.py
@@ -64,7 +64,7 @@ async def subscribe(request: Request):
     elif event_type in {"customer.subscription.updated"}:
         user_subscription = await sync_to_async(adapters.get_user_subscription)(customer_email)
         # Allow updating subscription status if paid user
-        if user_subscription.renewal_date:
+        if user_subscription and user_subscription.renewal_date:
             # Mark user as unsubscribed or resubscribed
             is_recurring = not subscription["cancel_at_period_end"]
             updated_user = await adapters.set_user_subscription(customer_email, is_recurring=is_recurring)