Cancle subscription button

caiiiycuk · Dec 22, 2023 · 42c3f47 · 42c3f47
1 parent a7d7b92
commit 42c3f47
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 6 deletions.
diff --git a/src/frame/account-frame.tsx b/src/frame/account-frame.tsx
@@ -4,8 +4,8 @@ import { uiSlice } from "../store/ui";
 import { authSlice } from "../store/auth";
 import { useT } from "../i18n";
 import { State } from "../store";
-import { linkToBuy } from "../v8/subscriptions";
-import { cancelSubscription } from "../v8/config";
+import { linkToBuy, cancle as cancelSubscription } from "../v8/subscriptions";
+import { cancelSubscriptionPage } from "../v8/config";
 
 export function AccountFrame(props: {}) {
     const t = useT();
@@ -38,6 +38,7 @@ function PremiumPlan(props: {}) {
     const lang = useSelector((state: State) => state.i18n.lang);
     const account = useSelector((state: State) => state.auth.account);
     const [locked, setLocked] = useState<boolean>(false);
+    const dispatch = useDispatch();
 
     if (account === null) {
         return null;
@@ -60,17 +61,43 @@ function PremiumPlan(props: {}) {
             .finally(() => setLocked(false));
     }
 
+    async function cancle() {
+        const openPage = () => {
+            dispatch(uiSlice.actions.showToast({
+                message: t("unable_to_cancle_subscription"),
+                intent: "error",
+            }));
+            window.open(cancelSubscriptionPage[lang] ?? cancelSubscriptionPage.en, "_blank");
+        };
+        if (!account) {
+            openPage();
+        } else {
+            try {
+                if (await cancelSubscription(account.token.access_token)) {
+                    dispatch(uiSlice.actions.showToast({
+                        message: t("subscription_cancelled"),
+                        intent: "success",
+                    }));
+                } else {
+                    openPage();
+                }
+            } catch (e) {
+                openPage();
+            }
+        }
+    }
+
     return <div class={"premium-plan-root " + (account.premium ? "have-premium" : "")}>
         <div class="premium-plan-head flex">
             <PremiumCheck />
             {t("premium")}
             <div class="flex-grow"></div>
             {account.premium &&
-                <a href={cancelSubscription[lang] ?? cancelSubscription.en}
-                    target="_blank"
+                <button
+                    onClick={cancle}
                     class="ml-2 btn btn-ghost btn-xs text-success-content">
                     {t("cancle")}
-                </a>}
+                </button>}
         </div>
         {!account.premium &&
             <>

diff --git a/src/i18n.ts b/src/i18n.ts
@@ -65,6 +65,8 @@ const translations: {[lang: string]: {[key: string]: string} } = {
         close: "Закрыть",
         cancle: "Отказаться",
         manage: "Управлять",
+        unable_to_cancle_subscription: "Не удалось отменить подписку",
+        subscription_cancelled: "Подписка отменена",
     },
     en: {
         logout: "Logout",
@@ -128,6 +130,8 @@ const translations: {[lang: string]: {[key: string]: string} } = {
         close: "Close",
         cancle: "Cancle",
         manage: "Manage",
+        unable_to_cancle_subscription: "Unable to cancle subscription",
+        subscription_cancelled: "Subscription cancelled",
     },
 };
 

diff --git a/src/v8/config.ts b/src/v8/config.ts
@@ -12,7 +12,7 @@ export const xsollaPremiumId = "sumOxNVr";
 
 export const brCdn = "https://br.cdn.dos.zone";
 
-export const cancelSubscription = {
+export const cancelSubscriptionPage = {
     en: "https://v8.js-dos.com/cancel-your-subscription/",
     ru: "https://v8.js-dos.com/ru/cancel-your-subscription/",
 };
diff --git a/src/v8/subscriptions.ts b/src/v8/subscriptions.ts
@@ -40,3 +40,23 @@ export async function havePremium(token: string): Promise<boolean> {
 
     return json.items.length > 0 && json.items[0].plan_external_id === xsollaPremiumId;
 }
+
+export async function cancle(token: string): Promise<boolean> {
+    // eslint-disable-next-line
+    // https://subscriptions.xsolla.com/api/doc/user#/Subscriptions/put_xsolla_subscription_apiuser_cancelusersubscription
+    const response = await fetch(xsollaSubscriptons + "/" + xsollaPremiumId + "/cancel", {
+        method: "PUT",
+        cache: "no-cache",
+        headers: {
+            "Authorization": "Bearer " + token,
+        },
+    });
+
+    const json = await response.json();
+    if (json.error) {
+        console.error("Unexpected subscriptions response:", json);
+        return false;
+    }
+
+    return true;
+}