Expose card on web app config page to manage subscription to Khoj cloud

src/khoj/interface/web/base_config.html

@@ -229,7 +229,7 @@
             text-align: right;
         }
 
-        button.card-button.happy {
+        .card-button.happy {
             color: var(--leaf);
         }
 

src/khoj/interface/web/config.html

@@ -157,6 +157,42 @@
                 </button>
             </div>
         </div>
+    </div>
+     <div class="section">
+        <h2 class="section-title">Billing</h2>
+        <div class="section-cards">
+            <div class="card">
+                <div class="card-title-row">
+                    <img class="card-icon" src="/static/assets/icons/credit-card.png" alt="Credit Card">
+                    <h3 class="card-title">
+                        <span>Subscription</span>
+                        <img id="configured-icon-subscription"
+                            style="display: {% if not is_subscribed %}none{% endif %}"
+                            class="configured-icon"
+                            src="/static/assets/icons/confirm-icon.svg"
+                            alt="Configured">
+                    </h3>
+                </div>
+                <div class="card-description-row">
+                    <p class="card-description">Manage your subscription to Khoj Cloud</p>
+                </div>
+                {% if not is_subscribed %}
+                <div class="card-action-row">
+                    <a class="card-button happy" href="https://buy.stripe.com/28ocQb7kb4iD0cEdQQ?email={{ username }}" target="_blank">
+                        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>
+                </div>
+                {% else %}
+                <div class="card-action-row"
+                    style="display: {% if not current_model_state.github %}none{% endif %}">
+                    <button class="card-button" onclick="unsubscribe()">
+                        Unsubscribe
+                    </button>
+                </div>
+                {% endif %}
+            </div>
+        </div>
     </div>
     <div class="section general-settings">
         <div id="results-count" title="Number of items to show in search and use for chat response">
@@ -222,6 +258,18 @@
         })
     };
 
+    function unsubscribe() {
+        fetch('/api/subscription', {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "email": "{{ username }}"
+            })
+        })
+    }
+
     var configure = document.getElementById("configure");
     configure.addEventListener("click", function(event) {
         event.preventDefault();

src/khoj/routers/web_client.py

@@ -1,4 +1,5 @@
 # System Packages
+from datetime import datetime
 import json
 import os
 
@@ -8,6 +9,7 @@ from fastapi import Request
 from fastapi.responses import HTMLResponse, FileResponse, RedirectResponse
 from fastapi.templating import Jinja2Templates
 from starlette.authentication import requires
+from database.models import KhojUser
 from khoj.utils.rawconfig import (
     GithubContentConfig,
     GithubRepoConfig,
@@ -16,7 +18,13 @@ from khoj.utils.rawconfig import (
 
 # Internal Packages
 from khoj.utils import constants, state
-from database.adapters import EntryAdapters, get_user_github_config, get_user_notion_config, ConversationAdapters
+from database.adapters import (
+    EntryAdapters,
+    get_user_github_config,
+    get_user_notion_config,
+    ConversationAdapters,
+    is_user_subscribed,
+)
 
 # Initialize Router
 web_client = APIRouter()
@@ -108,8 +116,10 @@ def login_page(request: Request):
 @web_client.get("/config", response_class=HTMLResponse)
 @requires(["authenticated"], redirect="login_page")
 def config_page(request: Request):
-    user = request.user.object
+    user: KhojUser = request.user.object
     user_picture = request.session.get("user", {}).get("picture")
+    user_is_subscribed = is_user_subscribed(user.email)
+    days_to_renewal = (user.subscription_renewal_date - datetime.now()).days if user.subscription_renewal_date else 0
     enabled_content_source = set(EntryAdapters.get_unique_file_source(user).all())
 
     successfully_configured = {
@@ -131,10 +141,12 @@ def config_page(request: Request):
             "request": request,
             "current_model_state": successfully_configured,
             "anonymous_mode": state.anonymous_mode,
-            "username": user.username if user else None,
+            "username": user.username,
             "conversation_options": all_conversation_options,
             "selected_conversation_config": selected_conversation_config.id if selected_conversation_config else None,
             "user_photo": user_picture,
+            "is_subscribed": user_is_subscribed,
+            "days_to_renewal": days_to_renewal,
         },
     )