@lukoweb/apitogo-plugin-dev-portal-billing 0.1.41 → 0.1.43

package/dist/index.mjs

@@ -10,6 +10,7 @@ import { useAuth } from "@lukoweb/apitogo/hooks";
 import { Alert, AlertAction, AlertDescription } from "@lukoweb/apitogo/ui/Alert";
 import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button";
 import { Secret } from "@lukoweb/apitogo/ui/Secret.js";
+import { Value } from "@lukoweb/apitogo/ui/Value.js";
 
 //#region src/utils/dev-portal-api.ts
 const DEV_PORTAL_PLACEHOLDER_API_URL = "https://dp-example.azurecontainerapps.io";
@@ -645,11 +646,9 @@ const CredentialsPage = () => {
 								className: "text-sm text-muted-foreground",
 								children: "Base URL for API requests through the gateway."
 							})]
-						}), credentials.gatewayBaseUrl ? /* @__PURE__ */ jsx(Secret, {
+						}), credentials.gatewayBaseUrl ? /* @__PURE__ */ jsx(Value, {
 							className: "max-w-full w-full",
-							secret: credentials.gatewayBaseUrl,
-							status: "none",
-							noReveal: true
+							value: credentials.gatewayBaseUrl
 						}) : /* @__PURE__ */ jsx("p", {
 							className: "text-sm text-muted-foreground",
 							children: "Available after your API is deployed to the gateway."

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "@lukoweb/apitogo-plugin-dev-portal-billing",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
     "directory": "packages/plugin-dev-portal-billing"
   },
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    }
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "build": "tsdown",
@@ -44,7 +46,7 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tsdown": "0.20.3",
-    "@lukoweb/apitogo": "0.1.41"
+    "@lukoweb/apitogo": "0.1.43"
   },
   "peerDependencies": {
     "react": ">=19.2.0",

package/src/DevPortalBillingContext.tsx

@@ -1,19 +0,0 @@
-import { createContext, useContext } from "react";
-import type { DevPortalBillingConfig } from "./types.js";
-
-const DevPortalBillingContext = createContext<DevPortalBillingConfig>({});
-
-export const DevPortalBillingProvider = ({
-  options,
-  children,
-}: {
-  options: DevPortalBillingConfig;
-  children: React.ReactNode;
-}) => (
-  <DevPortalBillingContext.Provider value={options}>
-    {children}
-  </DevPortalBillingContext.Provider>
-);
-
-export const useDevPortalBillingConfig = () =>
-  useContext(DevPortalBillingContext);

package/src/DevPortalBillingPlugin.test.tsx

@@ -1,29 +0,0 @@
-import { StaticZudoku } from "@lukoweb/apitogo/testing";
-import { act, render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { devPortalBillingPlugin } from "./DevPortalBillingPlugin.js";
-
-describe("PricingPage", () => {
-  it("renders pricing page with custom title", async () => {
-    await act(async () => {
-      render(
-        <StaticZudoku
-          plugins={[
-            devPortalBillingPlugin({
-              pricing: {
-                title: "API Plans",
-                subtitle: "Choose the plan that fits your integration.",
-              },
-            }),
-          ]}
-          path="/pricing"
-        />,
-      );
-    });
-
-    expect(screen.getByTestId("title")).toHaveTextContent("API Plans");
-    expect(screen.getByTestId("subtitle")).toHaveTextContent(
-      "Choose the plan that fits your integration.",
-    );
-  });
-});

package/src/DevPortalBillingPlugin.tsx

@@ -1,87 +0,0 @@
-import { createPlugin } from "@lukoweb/apitogo";
-import { KeyRoundIcon, StarsIcon } from "@lukoweb/apitogo/icons";
-import DevPortalBillingWrapper from "./DevPortalBillingWrapper.js";
-import CheckoutPage from "./pages/CheckoutPage.js";
-import CredentialsPage from "./pages/CredentialsPage.js";
-import PricingPage from "./pages/PricingPage.js";
-import SubscriptionsPage from "./pages/SubscriptionsPage.js";
-import {
-  CHECKOUT_PATH,
-  CREDENTIALS_PATH,
-  PRICING_PATH,
-  SUBSCRIPTIONS_PATH,
-} from "./paths.js";
-import type { DevPortalBillingConfig } from "./types.js";
-
-export {
-  CHECKOUT_PATH,
-  CREDENTIALS_PATH,
-  PRICING_PATH,
-  SUBSCRIPTIONS_PATH,
-} from "./paths.js";
-
-export const devPortalBillingPlugin = createPlugin(
-  (options: DevPortalBillingConfig = {}) => ({
-    transformConfig: ({ config, merge }) =>
-      merge({
-        header: {
-          navigation: [
-            ...(config.header?.navigation ?? []),
-            { label: "Pricing", to: PRICING_PATH, display: "anon" },
-          ],
-        },
-      }),
-
-    getProfileMenuItems: () => [
-      {
-        label: "My Subscriptions",
-        path: SUBSCRIPTIONS_PATH,
-        icon: StarsIcon,
-        category: "middle",
-        weight: 25,
-      },
-      {
-        label: "API credentials",
-        path: CREDENTIALS_PATH,
-        icon: KeyRoundIcon,
-        category: "middle",
-        weight: 26,
-      },
-    ],
-
-    getRoutes: () => [
-      {
-        element: <DevPortalBillingWrapper options={options} />,
-        handle: { layout: "none" },
-        children: [
-          {
-            path: PRICING_PATH,
-            handle: { layout: "default" },
-            element: <PricingPage />,
-          },
-          {
-            path: CHECKOUT_PATH,
-            handle: { layout: "default" },
-            element: <CheckoutPage />,
-          },
-          {
-            path: SUBSCRIPTIONS_PATH,
-            handle: { layout: "default" },
-            element: <SubscriptionsPage />,
-          },
-          {
-            path: CREDENTIALS_PATH,
-            handle: { layout: "default" },
-            element: <CredentialsPage />,
-          },
-        ],
-      },
-    ],
-
-    getProtectedRoutes: () => [
-      CHECKOUT_PATH,
-      SUBSCRIPTIONS_PATH,
-      CREDENTIALS_PATH,
-    ],
-  }),
-);

package/src/DevPortalBillingWrapper.tsx

@@ -1,18 +0,0 @@
-import { ClientOnly } from "@lukoweb/apitogo/components";
-import { Outlet } from "@lukoweb/apitogo/router";
-import { DevPortalBillingProvider } from "./DevPortalBillingContext.js";
-import type { DevPortalBillingConfig } from "./types.js";
-
-export const DevPortalBillingWrapper = ({
-  options = {},
-}: {
-  options: DevPortalBillingConfig;
-}) => (
-  <DevPortalBillingProvider options={options}>
-    <ClientOnly>
-      <Outlet />
-    </ClientOnly>
-  </DevPortalBillingProvider>
-);
-
-export default DevPortalBillingWrapper;

package/src/components/PricingCard.test.tsx

@@ -1,47 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import type { DevPortalPlan } from "../types.js";
-import { PricingCard } from "./PricingCard.js";
-
-const plan: DevPortalPlan = {
-  sku: "pro-monthly",
-  displayName: "Pro",
-  limitsJson: null,
-  isFree: false,
-  priceAmount: 29,
-  priceCurrency: "usd",
-  billingPeriod: "monthly",
-};
-
-vi.mock("@lukoweb/apitogo/router", () => ({
-  Link: ({ children, to }: { children: React.ReactNode; to: string }) => (
-    <a href={to}>{children}</a>
-  ),
-}));
-
-describe("PricingCard", () => {
-  it("shows unsubscribe in account mode for active subscriptions", () => {
-    render(
-      <PricingCard
-        plan={plan}
-        mode="account"
-        isSubscribed
-        onUnsubscribe={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByTestId("subscribed-badge-pro-monthly")).toBeTruthy();
-    expect(screen.getByTestId("unsubscribe-pro-monthly")).toBeTruthy();
-    expect(screen.getByText("Current plan")).toBeTruthy();
-  });
-
-  it("shows subscribe in account mode for unsubscribed plans", () => {
-    render(<PricingCard plan={plan} mode="account" isSubscribed={false} />);
-
-    expect(screen.queryByTestId("subscribed-badge-pro-monthly")).toBeNull();
-    expect(screen.getByRole("link", { name: "Subscribe" })).toHaveAttribute(
-      "href",
-      "/checkout?planSku=pro-monthly",
-    );
-  });
-});

package/src/components/PricingCard.tsx

@@ -1,142 +0,0 @@
-import { cn } from "@lukoweb/apitogo";
-import { Button } from "@lukoweb/apitogo/components";
-import { Link } from "@lukoweb/apitogo/router";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@lukoweb/apitogo/ui/AlertDialog.js";
-import type { DevPortalPlan } from "../types.js";
-import {
-  formatBillingPeriod,
-  formatPlanPrice,
-  isActiveSubscription,
-  summarizeLimits,
-} from "../utils/dev-portal-api.js";
-
-export type PricingCardMode = "public" | "account";
-
-export const PricingCard = ({
-  plan,
-  mode = "public",
-  subscriptionStatus,
-  isSubscribed = false,
-  onUnsubscribe,
-  isCanceling = false,
-  cancelDisabled = false,
-}: {
-  plan: DevPortalPlan;
-  mode?: PricingCardMode;
-  subscriptionStatus?: string;
-  isSubscribed?: boolean;
-  onUnsubscribe?: (planSku: string) => void;
-  isCanceling?: boolean;
-  cancelDisabled?: boolean;
-}) => {
-  const limitsSummary = summarizeLimits(plan.limitsJson);
-  const isActive =
-    isSubscribed || isActiveSubscription(subscriptionStatus ?? "");
-
-  return (
-    <article
-      className={cn(
-        "flex w-full max-w-sm flex-col rounded-xl border bg-card/60 p-6 shadow-xs",
-        isActive &&
-          mode === "account" &&
-          "border-primary/40 ring-1 ring-primary/20",
-      )}
-      data-testid={`pricing-card-${plan.sku}`}
-    >
-      <div className="flex items-start justify-between gap-2">
-        <h2 className="text-xl font-semibold">{plan.displayName}</h2>
-        {isActive && mode === "account" ? (
-          <span
-            className="shrink-0 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary"
-            data-testid={`subscribed-badge-${plan.sku}`}
-          >
-            Subscribed
-          </span>
-        ) : null}
-      </div>
-      <p className="mt-2 text-3xl font-bold">{formatPlanPrice(plan)}</p>
-      <p className="mt-1 text-sm text-muted-foreground">
-        {formatBillingPeriod(plan.billingPeriod)}
-      </p>
-      {limitsSummary ? (
-        <p className="mt-4 text-sm text-muted-foreground">{limitsSummary}</p>
-      ) : null}
-      <div className="mt-6 space-y-2">
-        {mode === "account" ? (
-          isActive ? (
-            <>
-              <Button variant="secondary" className="w-full" disabled>
-                Current plan
-              </Button>
-              {onUnsubscribe ? (
-                <AlertDialog>
-                  <AlertDialogTrigger asChild>
-                    <Button
-                      variant="outline"
-                      className="w-full"
-                      disabled={cancelDisabled || isCanceling}
-                      data-testid={`unsubscribe-${plan.sku}`}
-                    >
-                      {isCanceling ? "Canceling…" : "Unsubscribe"}
-                    </Button>
-                  </AlertDialogTrigger>
-                  <AlertDialogContent>
-                    <AlertDialogHeader>
-                      <AlertDialogTitle>
-                        Unsubscribe from {plan.displayName}?
-                      </AlertDialogTitle>
-                      <AlertDialogDescription>
-                        Your API access for this plan will be revoked. You can
-                        subscribe again later.
-                      </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                      <AlertDialogCancel>Keep subscription</AlertDialogCancel>
-                      <AlertDialogAction
-                        onClick={() => onUnsubscribe(plan.sku)}
-                        disabled={isCanceling}
-                      >
-                        Unsubscribe
-                      </AlertDialogAction>
-                    </AlertDialogFooter>
-                  </AlertDialogContent>
-                </AlertDialog>
-              ) : null}
-              {cancelDisabled ? (
-                <p className="text-center text-xs text-muted-foreground">
-                  Unsubscribe is available after the portal is published.
-                </p>
-              ) : null}
-            </>
-          ) : (
-            <Button variant="default" className="w-full" asChild>
-              <Link to={`/checkout?planSku=${encodeURIComponent(plan.sku)}`}>
-                {plan.isFree ? "Get started" : "Subscribe"}
-              </Link>
-            </Button>
-          )
-        ) : isActive ? (
-          <Button variant="secondary" className="w-full" asChild>
-            <Link to="/account/subscriptions">Manage subscription</Link>
-          </Button>
-        ) : (
-          <Button variant="default" className="w-full" asChild>
-            <Link to={`/checkout?planSku=${encodeURIComponent(plan.sku)}`}>
-              {plan.isFree ? "Get started" : "Subscribe"}
-            </Link>
-          </Button>
-        )}
-      </div>
-    </article>
-  );
-};

package/src/components/RedirectPage.tsx

@@ -1,47 +0,0 @@
-import type { LucideIcon } from "@lukoweb/apitogo/icons";
-import { useEffect } from "react";
-
-export const RedirectPage = ({
-  icon: Icon,
-  title,
-  description,
-  url,
-  children,
-}: {
-  icon: LucideIcon;
-  title: string;
-  description: string;
-  url?: string;
-  children?: React.ReactNode;
-}) => {
-  useEffect(() => {
-    if (url) {
-      window.location.assign(url);
-    }
-  }, [url]);
-
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-muted">
-      <div className="flex max-w-md flex-col items-center space-y-6 text-center">
-        <div className="relative">
-          <div className="flex h-24 w-24 items-center justify-center rounded-full bg-foreground/10">
-            <Icon className="h-12 w-12 text-foreground" />
-          </div>
-        </div>
-
-        {children}
-
-        <div className="space-y-2">
-          <h2 className="text-2xl font-bold text-card-foreground">{title}</h2>
-          <p className="text-muted-foreground">{description}</p>
-        </div>
-
-        <div className="flex space-x-2">
-          <div className="h-3 w-3 animate-pulse rounded-full bg-primary [animation-delay:-0.3s]" />
-          <div className="h-3 w-3 animate-pulse rounded-full bg-primary [animation-delay:-0.15s]" />
-          <div className="h-3 w-3 animate-pulse rounded-full bg-primary" />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/env.d.ts

@@ -1,2 +0,0 @@
-declare const VITE_APITOGO_DEV_PORTAL_API_URL: string | undefined;
-declare const VITE_APITOGO_DEV_PORTAL_MOCK_PLANS: string | undefined;

package/src/hooks/useCancelSubscription.ts

@@ -1,44 +0,0 @@
-import { useMutation, useQueryClient } from "@lukoweb/apitogo/react-query";
-import { useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl.js";
-
-type CancelSubscriptionResponse = {
-  canceled: boolean;
-};
-
-export function useCancelSubscription() {
-  const apiBaseUrl = useDevPortalApiBaseUrl();
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (planSku: string) => {
-      if (!apiBaseUrl) {
-        throw new Error("Dev portal API is not configured.");
-      }
-
-      const response = await fetch(
-        `${apiBaseUrl}/api/v1/subscriptions/cancel`,
-        {
-          method: "POST",
-          headers: {
-            Accept: "application/json",
-            "Content-Type": "application/json",
-          },
-          credentials: "include",
-          body: JSON.stringify({ planSku }),
-        },
-      );
-
-      if (!response.ok) {
-        const detail = await response.text();
-        throw new Error(detail || "Failed to cancel subscription.");
-      }
-
-      return (await response.json()) as CancelSubscriptionResponse;
-    },
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({
-        queryKey: ["dev-portal-me", apiBaseUrl],
-      });
-    },
-  });
-}

package/src/hooks/useCredentials.ts

@@ -1,39 +0,0 @@
-import { useAuth } from "@lukoweb/apitogo/hooks";
-import { useQuery } from "@lukoweb/apitogo/react-query";
-import type { DevPortalCredentialsResponse } from "../types.js";
-import {
-  useDevPortalApiBaseUrl,
-  useDevPortalPreviewMode,
-} from "./useDevPortalApiBaseUrl.js";
-
-export function useCredentials() {
-  const auth = useAuth();
-  const apiBaseUrl = useDevPortalApiBaseUrl();
-  const isPreview = useDevPortalPreviewMode();
-
-  return useQuery<DevPortalCredentialsResponse>({
-    queryKey: ["dev-portal-credentials", apiBaseUrl],
-    enabled: auth.isAuthenticated && !isPreview && Boolean(apiBaseUrl),
-    queryFn: async () => {
-      const response = await fetch(`${apiBaseUrl}/api/v1/credentials`, {
-        method: "GET",
-        headers: { Accept: "application/json" },
-        credentials: "include",
-      });
-
-      if (response.status === 404) {
-        throw new Error("NO_ENTITLEMENT");
-      }
-
-      if (!response.ok) {
-        throw new Error("Failed to load API credentials.");
-      }
-
-      return (await response.json()) as DevPortalCredentialsResponse;
-    },
-    retry: (failureCount, error) =>
-      error instanceof Error && error.message === "NO_ENTITLEMENT"
-        ? false
-        : failureCount < 2,
-  });
-}

package/src/hooks/useDevPortalApiBaseUrl.ts

@@ -1,33 +0,0 @@
-import { useAuth } from "@lukoweb/apitogo/hooks";
-import {
-  isPlaceholderDevPortalApiUrl,
-  resolveDevPortalApiBaseUrl,
-} from "../utils/dev-portal-api.js";
-
-type DevPortalProviderData = {
-  type: "dev-portal";
-  apiBaseUrl: string;
-  authMode: "live" | "preview";
-};
-
-export function useDevPortalApiBaseUrl(): string | undefined {
-  const auth = useAuth();
-  const providerData = auth.providerData as DevPortalProviderData | null;
-
-  if (providerData?.type === "dev-portal" && providerData.apiBaseUrl) {
-    return providerData.apiBaseUrl;
-  }
-
-  return resolveDevPortalApiBaseUrl();
-}
-
-export function useDevPortalPreviewMode(): boolean {
-  const auth = useAuth();
-  const apiBaseUrl = useDevPortalApiBaseUrl();
-
-  if (auth.authMode === "preview" || auth.isBackendAvailable === false) {
-    return true;
-  }
-
-  return isPlaceholderDevPortalApiUrl(apiBaseUrl);
-}

package/src/hooks/useMySubscriptions.ts

@@ -1,31 +0,0 @@
-import { useAuth } from "@lukoweb/apitogo/hooks";
-import { useQuery } from "@lukoweb/apitogo/react-query";
-import type { DevPortalMeResponse } from "../types.js";
-import {
-  useDevPortalApiBaseUrl,
-  useDevPortalPreviewMode,
-} from "./useDevPortalApiBaseUrl.js";
-
-export function useMySubscriptions() {
-  const auth = useAuth();
-  const apiBaseUrl = useDevPortalApiBaseUrl();
-  const isPreview = useDevPortalPreviewMode();
-
-  return useQuery<DevPortalMeResponse>({
-    queryKey: ["dev-portal-me", apiBaseUrl],
-    enabled: auth.isAuthenticated && !isPreview && Boolean(apiBaseUrl),
-    queryFn: async () => {
-      const response = await fetch(`${apiBaseUrl}/api/v1/auth/me`, {
-        method: "GET",
-        headers: { Accept: "application/json" },
-        credentials: "include",
-      });
-
-      if (!response.ok) {
-        throw new Error("Failed to load subscription status.");
-      }
-
-      return (await response.json()) as DevPortalMeResponse;
-    },
-  });
-}

package/src/hooks/usePlans.ts

@@ -1,35 +0,0 @@
-import { useQuery } from "@lukoweb/apitogo/react-query";
-import type { DevPortalPlanCatalog } from "../types.js";
-import { parseMockPlans } from "../utils/dev-portal-api.js";
-import {
-  useDevPortalApiBaseUrl,
-  useDevPortalPreviewMode,
-} from "./useDevPortalApiBaseUrl.js";
-
-export function usePlans() {
-  const apiBaseUrl = useDevPortalApiBaseUrl();
-  const isPreview = useDevPortalPreviewMode();
-
-  return useQuery<DevPortalPlanCatalog>({
-    queryKey: ["dev-portal-plans", apiBaseUrl, isPreview],
-    queryFn: async () => {
-      if (isPreview) {
-        return parseMockPlans();
-      }
-
-      if (!apiBaseUrl) {
-        return { plans: [] };
-      }
-
-      const response = await fetch(`${apiBaseUrl}/api/v1/plans`, {
-        headers: { Accept: "application/json" },
-      });
-
-      if (!response.ok) {
-        throw new Error("Failed to load plans.");
-      }
-
-      return (await response.json()) as DevPortalPlanCatalog;
-    },
-  });
-}

package/src/index.ts

@@ -1,8 +0,0 @@
-export { default as AccountPlansPage } from "./pages/AccountPlansPage.js";
-export { devPortalBillingPlugin } from "./DevPortalBillingPlugin.js";
-export {
-  CHECKOUT_PATH,
-  CREDENTIALS_PATH,
-  PRICING_PATH,
-  SUBSCRIPTIONS_PATH,
-} from "./paths.js";