sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-24 07:55:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 33

Auto update billing card UI on (re/un-)subscribe click on web app

Browse source 
Previously required a page load to see the updated billing state after
clicking resubscribe or unsubscribe buttons
This commit is contained in:
Debanjum Singh Solanky 2023-11-08 18:38:12 -08:00
parent 8b8bb15866
commit 09e1235832
2 changed files with 54 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/khoj/interface/web/config.html
View file

@ -174,31 +174,47 @@
</h3> </h3>
</div> </div>
<div class="card-description-row"> <div class="card-description-row">
{% if subscription_state == "subscribed" %} <p id="trial-description"
<p class="card-description">You are <b>subscribed</b> to Khoj Cloud. Subscription will <b>renew</b> on <b>{{ subscription_renewal_date }}</b></p> class="card-description"
{% elif subscription_state == "unsubscribed" %} style="display: {% if subscription_state != 'trial' %}none{% endif %}">
<p class="card-description">You are <b>subscribed</b> to Khoj Cloud. Subscription will <b>expire</b> on <b>{{ subscription_renewal_date }}</b></p> Subscribe to Khoj Cloud
{% elif subscription_state == "expired" %} </p>
<p class="card-description">Subscribe to Khoj Cloud. Subscription <b>expired</b> on <b>{{ subscription_renewal_date }}</b></p> <p id="unsubscribe-description"
{% else %} class="card-description"
<p class="card-description">Subscribe to Khoj Cloud</p> style="display: {% if subscription_state != 'subscribed' %}none{% endif %}">
{% 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>
<div class="card-action-row"> <div class="card-action-row">
{% if subscription_state == "subscribed" %} <button id="unsubscribe-button"
<button class="card-button" onclick="unsubscribe()"> class="card-button"
onclick="unsubscribe()"
style="display: {% if subscription_state != 'subscribed' %}none{% endif %};">
Unsubscribe Unsubscribe
</button> </button>
{% elif subscription_state == "unsubscribed" %} <button id="resubscribe-button"
<button class="card-button" onclick="resubscribe()"> class="card-button happy"
onclick="resubscribe()"
style="display: {% if subscription_state != 'unsubscribed' %}none{% endif %};">
Resubscribe Resubscribe
</button> </button>
{% else %} <a id="subscribe-button"
<a class="card-button happy" href="{{ khoj_cloud_subscription_url }}?prefilled_email={{ username }}" target="_blank"> 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 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> <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> </a>
{% endif %}
</div> </div>
</div> </div>
</div> </div>
@ -274,6 +290,17 @@
'Content-Type': 'application/json', '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() { function resubscribe() {
@ -283,6 +310,16 @@
'Content-Type': 'application/json', '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"); var configure = document.getElementById("configure");

2
src/khoj/routers/subscription.py
View file

@ -64,7 +64,7 @@ async def subscribe(request: Request):
elif event_type in {"customer.subscription.updated"}: elif event_type in {"customer.subscription.updated"}:
user_subscription = await sync_to_async(adapters.get_user_subscription)(customer_email) user_subscription = await sync_to_async(adapters.get_user_subscription)(customer_email)
# Allow updating subscription status if paid user # 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 # Mark user as unsubscribed or resubscribed
is_recurring = not subscription["cancel_at_period_end"] is_recurring = not subscription["cancel_at_period_end"]
updated_user = await adapters.set_user_subscription(customer_email, is_recurring=is_recurring) updated_user = await adapters.set_user_subscription(customer_email, is_recurring=is_recurring)