From 272cd34895d2588b5f5b693c4ab09bcc469d9ddb Mon Sep 17 00:00:00 2001
From: Anton Krasovsky <anton@no-mad.net>
Date: Thu, 30 Apr 2026 18:13:45 +0100
Subject: [PATCH] Update Config and Capture webapps to reflect changed counters
 for freemium billing

---
 packages/web/src/app/capture/Start.tsx        |   6 -
 packages/web/src/app/capture/Subscription.tsx | 164 ------------------
 packages/web/src/app/config/Subscription.tsx  |  60 ++-----
 .../src/features/http-client/freemiumd-api.ts |  14 +-
 4 files changed, 17 insertions(+), 227 deletions(-)
 delete mode 100644 packages/web/src/app/capture/Subscription.tsx

diff --git a/packages/web/src/app/capture/Start.tsx b/packages/web/src/app/capture/Start.tsx
index a102eaf98..b677e6c86 100644
--- a/packages/web/src/app/capture/Start.tsx
+++ b/packages/web/src/app/capture/Start.tsx
@@ -5,7 +5,6 @@ import { FileImport } from "../../icons";
 
 import { useAppDispatch, useAppSelector } from "./store";
 import { selectFiles } from "./slice";
-import Subscription from "./Subscription";
 import GeneralError from "../../features/general-error/GeneralError";
 
 export default function Start() {
@@ -61,11 +60,6 @@ export default function Start() {
         and security.
       </p>
 
-      {token !== undefined && (
-        <SubscriptionDetails>
-          <Subscription token={token} useDevEndpoints={useDevEndpoints} />
-        </SubscriptionDetails>
-      )}
       <GeneralError />
     </Contents>
   );
diff --git a/packages/web/src/app/capture/Subscription.tsx b/packages/web/src/app/capture/Subscription.tsx
deleted file mode 100644
index 53732e995..000000000
--- a/packages/web/src/app/capture/Subscription.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import styled from "styled-components";
-
-import { ThemeColorVariables } from "@xliic/common/theme";
-import { getEndpoints } from "@xliic/common/endpoints";
-
-import { Banner, ErrorBanner } from "../../components/Banner";
-import { useGetSubscriptionQuery } from "../../features/http-client/freemiumd-api";
-import ProgressBar from "./ProgressBar";
-import Button from "../../new-components/Button";
-import { useAppDispatch, useAppSelector } from "./store";
-import { openLink } from "./slice";
-
-export default function Subscription({
-  token,
-  useDevEndpoints,
-}: {
-  token: string;
-  useDevEndpoints: boolean;
-}) {
-  const { data, error, isLoading } = useGetSubscriptionQuery(token.trim(), {
-    refetchOnFocus: true,
-    pollingInterval: 1000 * 60 * 10, // refresh every 10 minutes
-  });
-
-  const dispatch = useAppDispatch();
-
-  const authType = useAppSelector((state) => state.config.data.platformAuthType);
-
-  const { upgradeUrl, stripeBillingUrl } = getEndpoints(useDevEndpoints);
-
-  if (error) {
-    return (
-      <Container>
-        <ErrorBanner message="Failed to load subscription status">
-          {error.code} {error.message}
-        </ErrorBanner>
-      </Container>
-    );
-  }
-
-  if (isLoading || data === undefined) {
-    return (
-      <Container>
-        <Banner message="Loading..." />
-      </Container>
-    );
-  }
-
-  return (
-    <Container>
-      {authType === "anond-token" && (
-        <>
-          <Section>
-            <Title>API Contract Generator</Title>
-            <Subtitle>Monthly operations left</Subtitle>
-            <Counters>
-              {data.monthlyCapture - data.currentCaptureUsage} / {data.monthlyCapture}
-            </Counters>
-            <ProgressBar label="" progress={1 - data.currentCaptureUsage / data.monthlyCapture} />
-          </Section>
-          <Section>
-            <Title>Subscription type: {data?.subscriptionKind}</Title>
-            <Subtitle>Upgrade or manage your subscription plan</Subtitle>
-            <Counters>
-              {data.subscriptionKind === "free" && (
-                <Button
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    dispatch(openLink(`${upgradeUrl}?email=${encodeURIComponent(data.userEmail)}`));
-                  }}
-                >
-                  Upgrade
-                </Button>
-              )}
-              {data.subscriptionKind !== "free" && (
-                <Button
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    dispatch(
-                      openLink(
-                        `${stripeBillingUrl}?prefilled_email=${encodeURIComponent(data.userEmail)}`
-                      )
-                    );
-                  }}
-                >
-                  Manage
-                </Button>
-              )}
-            </Counters>
-          </Section>
-        </>
-      )}
-      {authType === "api-token" && (
-        <>
-          <Section>
-            <Title>Tenant Allowance</Title>
-            <Subtitle>Monthly operations left</Subtitle>
-            <Counters>
-              {data.monthlyCapture - data.currentCaptureUsage} / {data.monthlyCapture}
-            </Counters>
-            <ProgressBar label="" progress={1 - data.currentCaptureUsage / data.monthlyCapture} />
-          </Section>
-          <Section>
-            <Title>Subscription type: {data?.subscriptionKind}</Title>
-            <div></div>
-            To upgrade or change your subscription plan please contact your administrator
-          </Section>
-        </>
-      )}
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-width: 560px;
-`;
-
-const Title = styled.div`
-  font-weight: 700;
-`;
-
-const Subtitle = styled.div`
-  font-weight: 400;
-  font-size: 90%;
-`;
-
-const Counters = styled.div`
-  font-weight: 600;
-  font-size: 110%;
-  > div {
-    font-size: 80%;
-  }
-`;
-
-const Section = styled.div`
-  display: grid;
-  grid-template-columns: 7fr 3fr;
-  gap: 4px;
-  padding-top: 8px;
-  border-top: 1px solid var(${ThemeColorVariables.border});
-  > ${Title} {
-    grid-column: 1;
-    grid-row: 1;
-  }
-  > ${Subtitle} {
-    grid-column: 1;
-    grid-row: 2;
-  }
-  > ${Counters} {
-    grid-column: 2;
-    grid-row: span 2;
-    align-self: center;
-    justify-self: end;
-  }
-  > :nth-child(4) {
-    grid-column: span 2;
-    grid-row: 3;
-  }
-`;
diff --git a/packages/web/src/app/config/Subscription.tsx b/packages/web/src/app/config/Subscription.tsx
index 92585a5b4..25e2e21de 100644
--- a/packages/web/src/app/config/Subscription.tsx
+++ b/packages/web/src/app/config/Subscription.tsx
@@ -44,6 +44,16 @@ export default function Subscription({
     );
   }
 
+  const currentAllowance = data.monthlyOp + data.bonusOp;
+  const currentUsage =
+    data.currentAuditUsage +
+    data.currentScanUsage +
+    data.currentGraphqlAuditUsage +
+    data.currentGraphqlScanUsage +
+    data.currentCaptureUsage;
+  const currentAllowanceLeftPercentage =
+    currentAllowance > 0 ? 1 - currentUsage / currentAllowance : 0;
+
   return (
     <Container>
       <Section>
@@ -91,54 +101,12 @@ export default function Subscription({
       </Section>
 
       <Section>
-        <Title>Audit</Title>
-        <Subtitle>Monthly operation audits left</Subtitle>
-        <Counters>
-          {data.monthlyAudit - data.currentAuditUsage} / {data.monthlyAudit}
-        </Counters>
-        <ProgressBar label="" progress={1 - data.currentAuditUsage / data.monthlyAudit} />
-      </Section>
-
-      <Section>
-        <Title>Scan</Title>
-        <Subtitle>Monthly operation scans left</Subtitle>
-        <Counters>
-          {data.monthlyScan - data.currentScanUsage} / {data.monthlyScan}
-        </Counters>
-        <ProgressBar label="" progress={1 - data.currentScanUsage / data.monthlyScan} />
-      </Section>
-
-      <Section>
-        <Title>GraphQL Audit</Title>
-        <Subtitle>Monthly operation audits left</Subtitle>
-        <Counters>
-          {data.monthlyGraphqlAudit - data.currentGraphqlAuditUsage} / {data.monthlyGraphqlAudit}
-        </Counters>
-        <ProgressBar
-          label=""
-          progress={1 - data.currentGraphqlAuditUsage / data.monthlyGraphqlAudit}
-        />
-      </Section>
-
-      <Section>
-        <Title>GraphQL Scan</Title>
-        <Subtitle>Monthly operation scans left</Subtitle>
-        <Counters>
-          {data.monthlyGraphqlScan - data.currentGraphqlScanUsage} / {data.monthlyGraphqlScan}
-        </Counters>
-        <ProgressBar
-          label=""
-          progress={1 - data.currentGraphqlScanUsage / data.monthlyGraphqlScan}
-        />
-      </Section>
-
-      <Section>
-        <Title>API Contract Generator</Title>
-        <Subtitle>Monthly operations left</Subtitle>
+        <Title>Usage</Title>
+        <Subtitle>Monthly allowance left</Subtitle>
         <Counters>
-          {data.monthlyCapture - data.currentCaptureUsage} / {data.monthlyCapture}
+          {currentAllowance - currentUsage} / {currentAllowance}
         </Counters>
-        <ProgressBar label="" progress={1 - data.currentCaptureUsage / data.monthlyCapture} />
+        <ProgressBar label="" progress={currentAllowanceLeftPercentage} />
       </Section>
     </Container>
   );
diff --git a/packages/web/src/features/http-client/freemiumd-api.ts b/packages/web/src/features/http-client/freemiumd-api.ts
index fb5ac8a7a..7a1e9363e 100644
--- a/packages/web/src/features/http-client/freemiumd-api.ts
+++ b/packages/web/src/features/http-client/freemiumd-api.ts
@@ -10,21 +10,13 @@ export type Subscription = {
   userEmail: string;
   subscriptionKind: string;
   periodStart: string;
-  monthlyAudit: number;
-  bonusAuditOp: number;
+  monthlyOp: number;
+  bonusOp: number;
   currentAuditUsage: number;
-  monthlyScan: number;
-  bonusScanOp: number;
   currentScanUsage: number;
-  monthlyCapture: number;
-  bonusCaptureOp: number;
-  currentCaptureUsage: number;
-  monthlyGraphqlAudit: number;
-  bonusGraphqlAuditOp: number;
   currentGraphqlAuditUsage: number;
-  monthlyGraphqlScan: number;
-  bonusGraphqlScanOp: number;
   currentGraphqlScanUsage: number;
+  currentCaptureUsage: number;
 };
 
 export const freemiumdApi = createApi({