From 1d9bf793fa168e656e40cd203100abe3d9e4f00c Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Thu, 26 Feb 2026 11:09:28 +0600
Subject: [PATCH 1/6] feat: add LicensePage component with activation
 functionality and related types

---
 package.json                           |   1 +
 src/components/LicensePage.stories.tsx | 302 +++++++++++++++++
 src/components/license-page.tsx        | 453 +++++++++++++++++++++++++
 src/index.ts                           |   1 +
 4 files changed, 757 insertions(+)
 create mode 100644 src/components/LicensePage.stories.tsx
 create mode 100644 src/components/license-page.tsx

diff --git a/package.json b/package.json
index b047fe2..a0c6a85 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@wordpress/dataviews": "^11.3.0",
+    "@wordpress/hooks": "^4.39.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "input-otp": "^1.4.2",
diff --git a/src/components/LicensePage.stories.tsx b/src/components/LicensePage.stories.tsx
new file mode 100644
index 0000000..e2f1aca
--- /dev/null
+++ b/src/components/LicensePage.stories.tsx
@@ -0,0 +1,302 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "storybook/test";
+import { LicensePage, type LicenseStatus } from "./license-page";
+import React, { useState } from "react";
+
+const DefaultHeaderImage = () => (
+  <svg
+    width="122"
+    height="83"
+    viewBox="0 0 122 83"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      y="13.7734"
+      width="112.215"
+      height="68.6155"
+      rx="4.58333"
+      fill="oklch(0.93 0.03 285)"
+    />
+    <path
+      d="M0 18.3568C0 15.8255 2.05203 13.7734 4.58333 13.7734H17.5738C20.1051 13.7734 22.1571 15.8255 22.1571 18.3568V77.8089C22.1571 80.3384 20.1065 82.3889 17.5771 82.3889H4.57999C2.05053 82.3889 0 80.3384 0 77.8089V18.3568Z"
+      fill="oklch(0.85 0.06 285)"
+    />
+    <rect
+      x="38.5977"
+      y="36.6445"
+      width="45.7437"
+      height="4.28847"
+      rx="2.14423"
+      fill="white"
+    />
+    <rect
+      x="38.5977"
+      y="45.2188"
+      width="45.7437"
+      height="4.28847"
+      rx="2.14423"
+      fill="white"
+    />
+    <rect
+      x="38.5977"
+      y="53.7969"
+      width="45.7437"
+      height="4.28847"
+      rx="2.14423"
+      fill="white"
+    />
+    <rect
+      x="38.5977"
+      y="62.375"
+      width="45.7437"
+      height="4.28847"
+      rx="2.14423"
+      fill="white"
+    />
+    <path
+      d="M98 53.6712C98 51.5638 99.7084 49.8555 101.816 49.8555H118.184C120.292 49.8555 122 51.5638 122 53.6712V68.4034C122 70.5107 120.292 72.2191 118.184 72.2191H101.816C99.7084 72.2191 98 70.5107 98 68.4034V53.6712Z"
+      fill="oklch(0.54 0.21 285)"
+    />
+    <rect
+      x="35.3672"
+      width="24"
+      height="22.8837"
+      rx="3.90447"
+      fill="oklch(0.54 0.21 285)"
+    />
+  </svg>
+);
+
+const meta = {
+  title: "Components/LicensePage",
+  component: LicensePage,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  args: {
+    onActivate: fn(),
+    onDeactivate: fn(),
+    onRefresh: fn(),
+    onLicenseKeyChange: fn(),
+  },
+  argTypes: {
+    licenseKey: { control: "text" },
+    loading: { control: "boolean" },
+    error: { control: "text" },
+    pluginName: { control: "text" },
+    hookNamespace: { control: "text" },
+  },
+} satisfies Meta<typeof LicensePage>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// --- Inactive state (no license) ---
+
+export const Inactive: Story = {
+  args: {
+    licenseKey: "",
+    status: null,
+    loading: false,
+    error: "",
+    pluginName: "MyPlugin Pro",
+    headerImage: <DefaultHeaderImage />,
+  },
+};
+
+export const InactiveWithKey: Story = {
+  args: {
+    licenseKey: "abc123-def456-ghi789-jkl012",
+    status: null,
+    loading: false,
+    error: "",
+    pluginName: "MyPlugin Pro",
+    headerImage: <DefaultHeaderImage />,
+  },
+};
+
+// --- Active state ---
+
+const activeStatus: LicenseStatus = {
+  is_valid: true,
+  expiry_days: 120,
+  data: {
+    key: "abc123-def456-ghi789-jkl012-mno345",
+    remaining: 3,
+    activation_limit: 5,
+  },
+};
+
+export const Active: Story = {
+  args: {
+    licenseKey: "abc123-def456-ghi789-jkl012-mno345",
+    status: activeStatus,
+    loading: false,
+    error: "",
+    pluginName: "MyPlugin Pro",
+    headerImage: <DefaultHeaderImage />,
+  },
+};
+
+// --- Active with perpetual license ---
+
+const perpetualStatus: LicenseStatus = {
+  is_valid: true,
+  expiry_days: 0,
+  data: {
+    key: "abc123-def456-ghi789-jkl012-mno345",
+    remaining: 10,
+    activation_limit: 25,
+  },
+};
+
+export const ActivePerpetual: Story = {
+  args: {
+    licenseKey: "abc123-def456-ghi789-jkl012-mno345",
+    status: perpetualStatus,
+    loading: false,
+    error: "",
+    pluginName: "MyPlugin Pro",
+    headerImage: <DefaultHeaderImage />,
+  },
+};
+
+// --- Loading state ---
+
+export const Loading: Story = {
+  args: {
+    licenseKey: "",
+    status: null,
+    loading: true,
+    error: "",
+    pluginName: "MyPlugin Pro",
+    headerImage: <DefaultHeaderImage />,
+  },
+};
+
+// --- Error state ---
+
+export const WithError: Story = {
+  args: {
+    licenseKey: "invalid-key",
+    status: null,
+    loading: false,
+    error: "The license key you entered is invalid. Please check and try again.",
+    pluginName: "MyPlugin Pro",
+    headerImage: <DefaultHeaderImage />,
+  },
+};
+
+// --- Without header image ---
+
+export const WithoutHeaderImage: Story = {
+  args: {
+    licenseKey: "",
+    status: null,
+    loading: false,
+    error: "",
+    pluginName: "wePos",
+  },
+};
+
+// --- Custom labels ---
+
+export const CustomLabels: Story = {
+  args: {
+    licenseKey: "",
+    status: null,
+    loading: false,
+    error: "",
+    pluginName: "Starter Plugin",
+    headerImage: <DefaultHeaderImage />,
+    labels: {
+      title: "Activation",
+      activationTitle: "Product Activation",
+      activateButton: "Activate Now",
+      licenseKeyPlaceholder: "Paste your license key...",
+    },
+  },
+};
+
+// --- Interactive playground ---
+
+const InteractiveTemplate = () => {
+  const [licenseKey, setLicenseKey] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [status, setStatus] = useState<LicenseStatus | null>(null);
+
+  const handleActivate = async () => {
+    setLoading(true);
+    setError("");
+    // Simulate API call
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+
+    if (licenseKey === "invalid") {
+      setError("Invalid license key. Please try again.");
+      setLoading(false);
+      return;
+    }
+
+    setStatus({
+      is_valid: true,
+      expiry_days: 365,
+      data: {
+        key: licenseKey,
+        remaining: 4,
+        activation_limit: 5,
+      },
+    });
+    setLoading(false);
+  };
+
+  const handleDeactivate = async () => {
+    setLoading(true);
+    setError("");
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    setStatus(null);
+    setLicenseKey("");
+    setLoading(false);
+  };
+
+  const handleRefresh = async () => {
+    setLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 800));
+    setLoading(false);
+  };
+
+  return (
+    <LicensePage
+      licenseKey={licenseKey}
+      onLicenseKeyChange={setLicenseKey}
+      status={status}
+      loading={loading}
+      error={error}
+      onActivate={handleActivate}
+      onDeactivate={handleDeactivate}
+      onRefresh={handleRefresh}
+      pluginName="Demo Plugin"
+      hookNamespace="demo_plugin"
+      headerImage={<DefaultHeaderImage />}
+    />
+  );
+};
+
+export const Interactive: Story = {
+  render: () => <InteractiveTemplate />,
+  args: {
+    licenseKey: "",
+    status: null,
+    loading: false,
+    error: "",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A fully interactive demo with simulated API calls. Type any key to activate (type 'invalid' to see error state).",
+      },
+    },
+  },
+};
diff --git a/src/components/license-page.tsx b/src/components/license-page.tsx
new file mode 100644
index 0000000..1375a55
--- /dev/null
+++ b/src/components/license-page.tsx
@@ -0,0 +1,453 @@
+import { useMemo, useState, type HTMLAttributes, type ReactNode } from "react";
+import { doAction } from "@wordpress/hooks";
+import { Calendar, Eye, EyeOff, Info, KeyRound, RefreshCw } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Modal,
+  ModalHeader,
+  ModalTitle,
+  ModalDescription,
+  ModalFooter,
+} from "@/components/ui/modal";
+
+export interface LicenseStatus {
+  is_valid: boolean;
+  expiry_days?: number;
+  data?: {
+    key?: string;
+    remaining?: number;
+    activation_limit?: number;
+  };
+}
+
+export interface LicensePageLabels {
+  title?: string;
+  activationTitle?: string;
+  activationDescription?: string;
+  activateLicenseHeading?: string;
+  activateLicenseSubheading?: string;
+  licenseKeyLabel?: string;
+  licenseKeyPlaceholder?: string;
+  activateButton?: string;
+  deactivateButton?: string;
+  refreshButton?: string;
+  activeStatus?: string;
+  maskedKeyInfo?: string;
+  activationsRemainingTitle?: string;
+  usageLabel?: string;
+  outOfLabel?: string;
+  activationInfoUnavailable?: string;
+  licenseExpiryTitle?: string;
+  perpetualLicenseMessage?: string;
+  expiryMessage?: (date: string, days: number) => string;
+  expiryInfoUnavailable?: string;
+  deactivateConfirmTitle?: string;
+  deactivateConfirmMessage?: string;
+  cancelButton?: string;
+  confirmDeactivateButton?: string;
+  showKeyLabel?: string;
+  hideKeyLabel?: string;
+}
+
+export interface LicensePageProps extends HTMLAttributes<HTMLDivElement> {
+  /** Current license key value */
+  licenseKey: string;
+  /** Callback when the license key input changes */
+  onLicenseKeyChange: (key: string) => void;
+  /** Current license status data */
+  status: LicenseStatus | null;
+  /** Whether a license operation is in progress */
+  loading: boolean;
+  /** Current error message, empty string if no error */
+  error: string;
+  /** Called when user clicks the Activate button */
+  onActivate: () => void;
+  /** Called when user confirms deactivation */
+  onDeactivate: () => void;
+  /** Called when user clicks the Refresh button */
+  onRefresh: () => void;
+  /** Custom header image/illustration rendered in the top-right of the card */
+  headerImage?: ReactNode;
+  /** Namespace for WordPress hooks (doAction). Defaults to 'plugin_ui' */
+  hookNamespace?: string;
+  /** Plugin name used in default label strings. Defaults to 'Plugin' */
+  pluginName?: string;
+  /** Override default label strings for i18n or customization */
+  labels?: LicensePageLabels;
+  /** Format a date string for display (e.g., using dateI18n from @wordpress/date) */
+  formatDate?: (date: Date) => string;
+}
+
+const maskKey = (key: string): string => {
+  if (!key) return "";
+  if (key.length <= 8) return "*".repeat(key.length);
+  return key.substring(0, 18) + "*".repeat(Math.max(10, key.length - 18));
+};
+
+const getUsagePercentage = (
+  limit: number,
+  remaining: number,
+): number => {
+  return Math.min(100, Math.round(((limit - remaining) / (limit || 1)) * 100));
+};
+
+const defaultFormatDate = (date: Date): string => {
+  return date.toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+};
+
+export function LicensePage({
+  licenseKey,
+  onLicenseKeyChange,
+  status,
+  loading,
+  error,
+  onActivate,
+  onDeactivate,
+  onRefresh,
+  headerImage,
+  hookNamespace = "plugin_ui",
+  pluginName = "Plugin",
+  labels: labelOverrides = {},
+  formatDate = defaultFormatDate,
+  className,
+  ...props
+}: LicensePageProps) {
+  const [showKey, setShowKey] = useState(false);
+  const [showDeactivateModal, setShowDeactivateModal] = useState(false);
+
+  const hasActive = useMemo(() => Boolean(status?.is_valid), [status]);
+
+  const labels = useMemo(() => {
+    const defaults: Required<LicensePageLabels> = {
+      title: "License",
+      activationTitle: "License Activation",
+      activationDescription: `Activate ${pluginName} with your license key for automatic updates and expert support from your dashboard.`,
+      activateLicenseHeading: "Activate License",
+      activateLicenseSubheading:
+        "Enter your license key to activate your software",
+      licenseKeyLabel: `${pluginName} License Key`,
+      licenseKeyPlaceholder: "Enter your key here",
+      activateButton: "Activate License",
+      deactivateButton: "Deactivate License",
+      refreshButton: "Refresh",
+      activeStatus: "Active",
+      maskedKeyInfo: "Your license key is masked for security purposes",
+      activationsRemainingTitle: "Activations Remaining",
+      usageLabel: "Usage",
+      outOfLabel: "out of",
+      activationInfoUnavailable: "Activation information not available.",
+      licenseExpiryTitle: "License Expiry",
+      perpetualLicenseMessage: `Your ${pluginName} license is perpetual and will never expire.`,
+      expiryMessage: (date: string, days: number) =>
+        `Your ${pluginName} license expires on <strong>${date}</strong> (${days} days left)`,
+      expiryInfoUnavailable: "Expiry information not available.",
+      deactivateConfirmTitle:
+        "Are you sure you want to deactivate the license key?",
+      deactivateConfirmMessage:
+        "Deactivating will disable updates and support until you activate again.",
+      cancelButton: "Cancel",
+      confirmDeactivateButton: "Yes, Deactivate",
+      showKeyLabel: "Show key",
+      hideKeyLabel: "Hide key",
+    };
+    return { ...defaults, ...labelOverrides };
+  }, [labelOverrides, pluginName]);
+
+  const maskedOrReal = showKey ? licenseKey : maskKey(licenseKey);
+
+  const handleActivate = () => {
+    doAction(`${hookNamespace}_license_action`, {
+      action: "activate",
+      licenseKey,
+    });
+    onActivate();
+  };
+
+  const handleDeactivate = () => {
+    setShowDeactivateModal(false);
+    doAction(`${hookNamespace}_license_action`, {
+      action: "deactivate",
+    });
+    onDeactivate();
+  };
+
+  const handleRefresh = () => {
+    doAction(`${hookNamespace}_license_action`, {
+      action: "refresh",
+    });
+    onRefresh();
+  };
+
+  const expiryDate =
+    typeof status?.expiry_days === "number" && status.expiry_days > 0
+      ? new Date(Date.now() + status.expiry_days * 24 * 60 * 60 * 1000)
+      : null;
+
+  return (
+    <div
+      className={cn("pui-root w-full max-w-2xl lg:max-w-3xl mx-auto", className)}
+      {...props}
+    >
+      <h1 className="text-2xl font-bold mb-6">{labels.title}</h1>
+
+      <div className="relative">
+        {loading && (
+          <div className="absolute inset-0 rounded-lg w-full h-full z-10 backdrop-blur-sm">
+            <div className="flex items-center justify-center h-full">
+              <Spinner className="size-10" />
+            </div>
+          </div>
+        )}
+
+        <Card className="bg-card rounded-lg mb-6 p-0 gap-0">
+          {/* Header section */}
+          <div className="flex items-start justify-between p-6 border-b border-border">
+            <div className="flex justify-between w-full">
+              <div className="w-full md:w-1/2">
+                <div className="flex gap-2.5 items-center">
+                  <h2 className="text-lg font-bold">{labels.activationTitle}</h2>
+                  {hasActive && (
+                    <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/15 text-success">
+                      {labels.activeStatus}
+                    </span>
+                  )}
+                </div>
+                <p className="mt-4 text-muted-foreground text-sm leading-snug">
+                  {labels.activationDescription}
+                </p>
+              </div>
+              {headerImage && (
+                <div className="hidden md:flex w-1/2 justify-end">
+                  {headerImage}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Body section */}
+          <div className="p-6">
+            {/* Activate heading (shown when not active) */}
+            {!hasActive && (
+              <div className="flex gap-3.5 mb-7">
+                <div className="bg-primary/10 size-11 rounded-xl flex items-center justify-center">
+                  <KeyRound size={20} className="text-primary" />
+                </div>
+                <div className="flex flex-col justify-between">
+                  <h3 className="text-foreground font-bold text-lg">
+                    {labels.activateLicenseHeading}
+                  </h3>
+                  <span className="text-xs text-muted-foreground">
+                    {labels.activateLicenseSubheading}
+                  </span>
+                </div>
+              </div>
+            )}
+
+            {/* License key label */}
+            <div className="cursor-pointer text-sm font-semibold text-foreground mb-2.5 inline-block">
+              {labels.licenseKeyLabel}
+            </div>
+
+            {/* License key input */}
+            <div className="relative">
+              <Input
+                type={showKey || hasActive ? "text" : "password"}
+                placeholder={labels.licenseKeyPlaceholder}
+                name="license_key"
+                value={hasActive ? maskedOrReal : licenseKey}
+                onChange={(e) => onLicenseKeyChange(e.target.value)}
+                disabled={loading || hasActive}
+                className={cn(
+                  "pr-10",
+                  error && "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20"
+                )}
+              />
+              <button
+                type="button"
+                className="absolute text-muted-foreground hover:text-foreground top-1/2 -translate-y-1/2 right-3"
+                onClick={() => setShowKey((v) => !v)}
+                aria-label={showKey ? labels.hideKeyLabel : labels.showKeyLabel}
+                disabled={loading || hasActive}
+              >
+                {showKey || hasActive ? <EyeOff size={18} /> : <Eye size={18} />}
+              </button>
+            </div>
+
+            {/* Error message */}
+            {error && (
+              <p className="text-destructive text-sm mt-2">{error}</p>
+            )}
+
+            {/* Masked key info */}
+            {!error && hasActive && (
+              <div className="text-sm text-muted-foreground mt-2 flex gap-1.5 items-center">
+                <Info size={16} strokeWidth={3} />
+                <span>{labels.maskedKeyInfo}</span>
+              </div>
+            )}
+
+            {/* Action buttons */}
+            <div className="flex items-center gap-3 mt-6">
+              {hasActive ? (
+                <>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => setShowDeactivateModal(true)}
+                    disabled={loading}
+                  >
+                    {labels.deactivateButton}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleRefresh}
+                    disabled={loading}
+                  >
+                    <RefreshCw size={16} strokeWidth={3} />
+                    {labels.refreshButton}
+                  </Button>
+                </>
+              ) : (
+                <Button
+                  size="sm"
+                  onClick={handleActivate}
+                  disabled={loading || !licenseKey.length}
+                >
+                  {labels.activateButton}
+                </Button>
+              )}
+            </div>
+          </div>
+        </Card>
+
+        {/* Status cards (shown when active) */}
+        {hasActive && (
+          <div className="grid gap-6 grid-cols-1 md:grid-cols-2 max-w-4xl">
+            {/* Activations Remaining card */}
+            <Card className="bg-card rounded-lg p-6 gap-0">
+              <div className="flex items-center gap-3 mb-5">
+                <div className="bg-primary/10 size-11 rounded-full flex items-center justify-center">
+                  <KeyRound size={20} className="text-primary" />
+                </div>
+                <div className="font-semibold text-sm text-foreground">
+                  {labels.activationsRemainingTitle}
+                </div>
+              </div>
+              {typeof status?.data?.remaining !== "undefined" &&
+              typeof status?.data?.activation_limit !== "undefined" ? (
+                <>
+                  <div className="text-xs text-muted-foreground mb-2">
+                    {labels.usageLabel}
+                  </div>
+                  <div className="flex flex-row items-center gap-4">
+                    <div className="h-2 bg-destructive/15 rounded-full overflow-hidden w-full">
+                      <div
+                        className="h-2 bg-destructive rounded-full"
+                        style={{
+                          width: `${getUsagePercentage(
+                            status.data.activation_limit,
+                            status.data.remaining,
+                          )}%`,
+                        }}
+                      />
+                    </div>
+                    <div className="text-foreground text-xs flex flex-row w-8 justify-end">
+                      {getUsagePercentage(
+                        status.data.activation_limit,
+                        status.data.remaining,
+                      )}
+                      %
+                    </div>
+                  </div>
+                  <div className="text-destructive mt-2 text-xs">
+                    {`${status.data.activation_limit - status.data.remaining} ${labels.outOfLabel} ${status.data.activation_limit}`}
+                  </div>
+                </>
+              ) : (
+                <div className="text-muted-foreground text-sm">
+                  {labels.activationInfoUnavailable}
+                </div>
+              )}
+            </Card>
+
+            {/* License Expiry card */}
+            <Card className="bg-card rounded-lg p-6 gap-0">
+              <div className="flex items-center gap-3 mb-5">
+                <div className="bg-primary/10 size-11 rounded-full flex items-center justify-center">
+                  <Calendar size={20} className="text-primary" />
+                </div>
+                <div className="font-semibold text-sm text-foreground">
+                  {labels.licenseExpiryTitle}
+                </div>
+              </div>
+              {typeof status?.expiry_days === "number" ? (
+                status.expiry_days <= 0 ? (
+                  <div className="text-sm text-foreground">
+                    {labels.perpetualLicenseMessage}
+                  </div>
+                ) : (
+                  <div className="flex gap-2.5">
+                    <Info
+                      size={16}
+                      strokeWidth={3}
+                      className="min-w-4 mt-0.5"
+                    />
+                    <div
+                      className="text-sm text-foreground"
+                      dangerouslySetInnerHTML={{
+                        __html: labels.expiryMessage!(
+                          expiryDate ? formatDate(expiryDate) : "",
+                          status.expiry_days,
+                        ),
+                      }}
+                    />
+                  </div>
+                )
+              ) : (
+                <div className="text-sm text-muted-foreground">
+                  {labels.expiryInfoUnavailable}
+                </div>
+              )}
+            </Card>
+          </div>
+        )}
+      </div>
+
+      {/* Deactivation confirmation modal */}
+      <Modal
+        open={showDeactivateModal}
+        onClose={() => setShowDeactivateModal(false)}
+        size="sm"
+      >
+        <ModalHeader>
+          <ModalTitle>{labels.deactivateConfirmTitle}</ModalTitle>
+        </ModalHeader>
+        <ModalDescription className="text-muted-foreground">
+          {labels.deactivateConfirmMessage}
+        </ModalDescription>
+        <ModalFooter>
+          <div className="flex gap-2">
+            <Button
+              variant="secondary"
+              onClick={() => setShowDeactivateModal(false)}
+            >
+              {labels.cancelButton}
+            </Button>
+            <Button variant="destructive" onClick={handleDeactivate}>
+              {labels.confirmDeactivateButton}
+            </Button>
+          </div>
+        </ModalFooter>
+      </Modal>
+    </div>
+  );
+}
diff --git a/src/index.ts b/src/index.ts
index 12dd9b9..5e7fe78 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -260,6 +260,7 @@ export {
 export { TopBar, type TopBarProps } from './components/top-bar'
 export { CrownIcon, type CrownIconProps } from './components/crown-icon'
 export { ButtonToggleGroup, type ButtonToggleGroupProps, type ButtonToggleGroupItem } from './components/button-toggle-group'
+export { LicensePage, type LicensePageProps, type LicensePageLabels, type LicenseStatus } from './components/license-page'
 
 // Settings (schema-driven settings page)
 export {

From 947c47614d36d6642b17173f64f88f44eeb9ee45 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:46:14 +0600
Subject: [PATCH 2/6] feat: replace modal with alert dialog for license
 deactivation confirmation and improve UI elements

---
 src/components/LicensePage.stories.tsx | 163 +++++++++++++++----------
 src/components/license-page.tsx        | 111 ++++++++---------
 2 files changed, 152 insertions(+), 122 deletions(-)

diff --git a/src/components/LicensePage.stories.tsx b/src/components/LicensePage.stories.tsx
index e2f1aca..b13f61a 100644
--- a/src/components/LicensePage.stories.tsx
+++ b/src/components/LicensePage.stories.tsx
@@ -5,67 +5,104 @@ import React, { useState } from "react";
 
 const DefaultHeaderImage = () => (
   <svg
-    width="122"
-    height="83"
-    viewBox="0 0 122 83"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect
-      y="13.7734"
-      width="112.215"
-      height="68.6155"
-      rx="4.58333"
-      fill="oklch(0.93 0.03 285)"
-    />
-    <path
-      d="M0 18.3568C0 15.8255 2.05203 13.7734 4.58333 13.7734H17.5738C20.1051 13.7734 22.1571 15.8255 22.1571 18.3568V77.8089C22.1571 80.3384 20.1065 82.3889 17.5771 82.3889H4.57999C2.05053 82.3889 0 80.3384 0 77.8089V18.3568Z"
-      fill="oklch(0.85 0.06 285)"
-    />
-    <rect
-      x="38.5977"
-      y="36.6445"
-      width="45.7437"
-      height="4.28847"
-      rx="2.14423"
-      fill="white"
-    />
-    <rect
-      x="38.5977"
-      y="45.2188"
-      width="45.7437"
-      height="4.28847"
-      rx="2.14423"
-      fill="white"
-    />
-    <rect
-      x="38.5977"
-      y="53.7969"
-      width="45.7437"
-      height="4.28847"
-      rx="2.14423"
-      fill="white"
-    />
-    <rect
-      x="38.5977"
-      y="62.375"
-      width="45.7437"
-      height="4.28847"
-      rx="2.14423"
-      fill="white"
-    />
-    <path
-      d="M98 53.6712C98 51.5638 99.7084 49.8555 101.816 49.8555H118.184C120.292 49.8555 122 51.5638 122 53.6712V68.4034C122 70.5107 120.292 72.2191 118.184 72.2191H101.816C99.7084 72.2191 98 70.5107 98 68.4034V53.6712Z"
-      fill="oklch(0.54 0.21 285)"
-    />
-    <rect
-      x="35.3672"
-      width="24"
-      height="22.8837"
-      rx="3.90447"
-      fill="oklch(0.54 0.21 285)"
-    />
-  </svg>
+            width="122"
+            height="83"
+            viewBox="0 0 122 83"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <rect
+                y="13.7734"
+                width="112.215"
+                height="68.6155"
+                rx="4.58333"
+                fill="#EFEAFF"
+            />
+            <path
+                d="M0 18.3568C0 15.8255 2.05203 13.7734 4.58333 13.7734H17.5738C20.1051 13.7734 22.1571 15.8255 22.1571 18.3568V77.8089C22.1571 80.3384 20.1065 82.3889 17.5771 82.3889H4.57999C2.05053 82.3889 0 80.3384 0 77.8089V18.3568Z"
+                fill="#DFD7FA"
+            />
+            <rect
+                x="38.5977"
+                y="36.6445"
+                width="45.7437"
+                height="4.28847"
+                rx="2.14423"
+                fill="white"
+            />
+            <rect
+                x="38.5977"
+                y="45.2188"
+                width="45.7437"
+                height="4.28847"
+                rx="2.14423"
+                fill="white"
+            />
+            <rect
+                x="38.5977"
+                y="53.7969"
+                width="45.7437"
+                height="4.28847"
+                rx="2.14423"
+                fill="white"
+            />
+            <rect
+                x="38.5977"
+                y="62.375"
+                width="45.7437"
+                height="4.28847"
+                rx="2.14423"
+                fill="white"
+            />
+            <path
+                d="M98 53.6712C98 51.5638 99.7084 49.8555 101.816 49.8555H118.184C120.292 49.8555 122 51.5638 122 53.6712V68.4034C122 70.5107 120.292 72.2191 118.184 72.2191H101.816C99.7084 72.2191 98 70.5107 98 68.4034V53.6712Z"
+                fill="#7047EB"
+            />
+            <path
+                d="M114.976 61.4473C114.976 64.5562 112.8 66.1107 110.213 67.0123C110.078 67.0582 109.93 67.056 109.796 67.0061C107.204 66.1107 105.027 64.5562 105.027 61.4473V57.0948C105.027 56.9299 105.093 56.7718 105.209 56.6552C105.326 56.5386 105.484 56.4731 105.649 56.4731C106.893 56.4731 108.447 55.7269 109.529 54.7818C109.661 54.6693 109.828 54.6074 110.002 54.6074C110.175 54.6074 110.342 54.6693 110.474 54.7818C111.562 55.7331 113.111 56.4731 114.354 56.4731C114.519 56.4731 114.677 56.5386 114.794 56.6552C114.91 56.7718 114.976 56.9299 114.976 57.0948V61.4473Z"
+                stroke="white"
+                strokeWidth="1.09051"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <rect
+                x="35.3672"
+                width="24"
+                height="22.8837"
+                rx="3.90447"
+                fill="#7047EB"
+            />
+            <g clipPath="url(#clip0_5284_103333)">
+                <path
+                    d="M50.5517 8.99219C50.7274 8.99219 50.8698 8.84976 50.8698 8.67406C50.8698 8.49837 50.7274 8.35594 50.5517 8.35594C50.376 8.35594 50.2336 8.49837 50.2336 8.67406C50.2336 8.84976 50.376 8.99219 50.5517 8.99219Z"
+                    fill="black"
+                />
+                <path
+                    d="M41.699 14.9818C41.4604 15.2204 41.3262 15.544 41.3262 15.8814V17.2634C41.3262 17.4321 41.3932 17.5939 41.5125 17.7132C41.6318 17.8326 41.7937 17.8996 41.9624 17.8996H43.8711C44.0399 17.8996 44.2017 17.8326 44.321 17.7132C44.4404 17.5939 44.5074 17.4321 44.5074 17.2634V16.6271C44.5074 16.4584 44.5744 16.2965 44.6937 16.1772C44.8131 16.0579 44.9749 15.9909 45.1436 15.9909H45.7799C45.9486 15.9909 46.1105 15.9238 46.2298 15.8045C46.3491 15.6852 46.4161 15.5234 46.4161 15.3546V14.7184C46.4161 14.5496 46.4832 14.3878 46.6025 14.2685C46.7218 14.1492 46.8836 14.0821 47.0524 14.0821H47.1618C47.4993 14.0821 47.8229 13.9479 48.0614 13.7093L48.5793 13.1914C49.4636 13.4994 50.4263 13.4983 51.3098 13.1881C52.1933 12.8779 52.9454 12.277 53.443 11.4838C53.9407 10.6906 54.1544 9.75197 54.0492 8.82151C53.944 7.89104 53.5262 7.02381 52.8641 6.36168C52.202 5.69955 51.3347 5.28173 50.4043 5.17656C49.4738 5.0714 48.5352 5.28511 47.742 5.78275C46.9488 6.28038 46.3479 7.03247 46.0377 7.91599C45.7275 8.79951 45.7263 9.76215 46.0344 10.6464L41.699 14.9818Z"
+                    stroke="white"
+                    strokeWidth="1.11587"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    d="M50.5517 8.99219C50.7274 8.99219 50.8698 8.84976 50.8698 8.67406C50.8698 8.49837 50.7274 8.35594 50.5517 8.35594C50.376 8.35594 50.2336 8.49837 50.2336 8.67406C50.2336 8.84976 50.376 8.99219 50.5517 8.99219Z"
+                    stroke="white"
+                    strokeWidth="1.11587"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_5284_103333">
+                    <rect
+                        width="15.2698"
+                        height="15.2698"
+                        fill="white"
+                        transform="translate(40.0547 3.90234)"
+                    />
+                </clipPath>
+            </defs>
+        </svg>
 );
 
 const meta = {
@@ -226,7 +263,6 @@ const InteractiveTemplate = () => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [status, setStatus] = useState<LicenseStatus | null>(null);
-
   const handleActivate = async () => {
     setLoading(true);
     setError("");
@@ -251,13 +287,14 @@ const InteractiveTemplate = () => {
     setLoading(false);
   };
 
-  const handleDeactivate = async () => {
+  const handleDeactivate = async (closeDialog: () => void) => {
     setLoading(true);
     setError("");
     await new Promise((resolve) => setTimeout(resolve, 1000));
     setStatus(null);
     setLicenseKey("");
     setLoading(false);
+    closeDialog();
   };
 
   const handleRefresh = async () => {
diff --git a/src/components/license-page.tsx b/src/components/license-page.tsx
index 1375a55..abc7497 100644
--- a/src/components/license-page.tsx
+++ b/src/components/license-page.tsx
@@ -1,4 +1,5 @@
 import { useMemo, useState, type HTMLAttributes, type ReactNode } from "react";
+import { RawHTML } from "@wordpress/element";
 import { doAction } from "@wordpress/hooks";
 import { Calendar, Eye, EyeOff, Info, KeyRound, RefreshCw } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -7,12 +8,16 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
 import {
-  Modal,
-  ModalHeader,
-  ModalTitle,
-  ModalDescription,
-  ModalFooter,
-} from "@/components/ui/modal";
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "@/components/ui/alert-dialog";
 
 export interface LicenseStatus {
   is_valid: boolean;
@@ -66,8 +71,8 @@ export interface LicensePageProps extends HTMLAttributes<HTMLDivElement> {
   error: string;
   /** Called when user clicks the Activate button */
   onActivate: () => void;
-  /** Called when user confirms deactivation */
-  onDeactivate: () => void;
+  /** Called when user confirms deactivation. Receives `closeDialog` to dismiss the confirmation when ready. */
+  onDeactivate: (closeDialog: () => void) => void;
   /** Called when user clicks the Refresh button */
   onRefresh: () => void;
   /** Custom header image/illustration rendered in the top-right of the card */
@@ -121,7 +126,7 @@ export function LicensePage({
   ...props
 }: LicensePageProps) {
   const [showKey, setShowKey] = useState(false);
-  const [showDeactivateModal, setShowDeactivateModal] = useState(false);
+  const [deactivateDialogOpen, setDeactivateDialogOpen] = useState(false);
 
   const hasActive = useMemo(() => Boolean(status?.is_valid), [status]);
 
@@ -172,11 +177,10 @@ export function LicensePage({
   };
 
   const handleDeactivate = () => {
-    setShowDeactivateModal(false);
     doAction(`${hookNamespace}_license_action`, {
       action: "deactivate",
     });
-    onDeactivate();
+    onDeactivate(() => setDeactivateDialogOpen(false));
   };
 
   const handleRefresh = () => {
@@ -193,7 +197,7 @@ export function LicensePage({
 
   return (
     <div
-      className={cn("pui-root w-full max-w-2xl lg:max-w-3xl mx-auto", className)}
+      className={cn("w-full max-w-2xl lg:max-w-3xl mx-auto", className)}
       {...props}
     >
       <h1 className="text-2xl font-bold mb-6">{labels.title}</h1>
@@ -213,14 +217,14 @@ export function LicensePage({
             <div className="flex justify-between w-full">
               <div className="w-full md:w-1/2">
                 <div className="flex gap-2.5 items-center">
-                  <h2 className="text-lg font-bold">{labels.activationTitle}</h2>
+                  <h2 className="text-lg font-bold m-0">{labels.activationTitle}</h2>
                   {hasActive && (
                     <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/15 text-success">
                       {labels.activeStatus}
                     </span>
                   )}
                 </div>
-                <p className="mt-4 text-muted-foreground text-sm leading-snug">
+                <p className="m-0 mt-4 text-muted-foreground text-sm leading-snug">
                   {labels.activationDescription}
                 </p>
               </div>
@@ -241,7 +245,7 @@ export function LicensePage({
                   <KeyRound size={20} className="text-primary" />
                 </div>
                 <div className="flex flex-col justify-between">
-                  <h3 className="text-foreground font-bold text-lg">
+                  <h3 className="text-foreground font-bold text-lg p-0 m-0">
                     {labels.activateLicenseHeading}
                   </h3>
                   <span className="text-xs text-muted-foreground">
@@ -283,7 +287,7 @@ export function LicensePage({
 
             {/* Error message */}
             {error && (
-              <p className="text-destructive text-sm mt-2">{error}</p>
+              <p className="text-destructive text-sm m-0 mt-2">{error}</p>
             )}
 
             {/* Masked key info */}
@@ -298,14 +302,32 @@ export function LicensePage({
             <div className="flex items-center gap-3 mt-6">
               {hasActive ? (
                 <>
-                  <Button
-                    variant="destructive"
-                    size="sm"
-                    onClick={() => setShowDeactivateModal(true)}
-                    disabled={loading}
-                  >
-                    {labels.deactivateButton}
-                  </Button>
+                  <AlertDialog open={deactivateDialogOpen} onOpenChange={setDeactivateDialogOpen}>
+                    <AlertDialogTrigger>
+                      <Button variant="destructive" size="sm" disabled={loading}>{labels.deactivateButton}</Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>
+                          {labels.deactivateConfirmTitle}
+                        </AlertDialogTitle>
+                        <AlertDialogDescription>
+                          {labels.deactivateConfirmMessage}
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>
+                          {labels.cancelButton}
+                        </AlertDialogCancel>
+                        <AlertDialogAction
+                          variant="destructive"
+                          onClick={handleDeactivate}
+                        >
+                          {labels.confirmDeactivateButton}
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
                   <Button
                     variant="outline"
                     size="sm"
@@ -401,15 +423,12 @@ export function LicensePage({
                       strokeWidth={3}
                       className="min-w-4 mt-0.5"
                     />
-                    <div
-                      className="text-sm text-foreground"
-                      dangerouslySetInnerHTML={{
-                        __html: labels.expiryMessage!(
-                          expiryDate ? formatDate(expiryDate) : "",
-                          status.expiry_days,
-                        ),
-                      }}
-                    />
+                    <RawHTML className="text-sm text-foreground">
+                      {labels.expiryMessage!(
+                        expiryDate ? formatDate(expiryDate) : "",
+                        status.expiry_days,
+                      )}
+                    </RawHTML>
                   </div>
                 )
               ) : (
@@ -422,32 +441,6 @@ export function LicensePage({
         )}
       </div>
 
-      {/* Deactivation confirmation modal */}
-      <Modal
-        open={showDeactivateModal}
-        onClose={() => setShowDeactivateModal(false)}
-        size="sm"
-      >
-        <ModalHeader>
-          <ModalTitle>{labels.deactivateConfirmTitle}</ModalTitle>
-        </ModalHeader>
-        <ModalDescription className="text-muted-foreground">
-          {labels.deactivateConfirmMessage}
-        </ModalDescription>
-        <ModalFooter>
-          <div className="flex gap-2">
-            <Button
-              variant="secondary"
-              onClick={() => setShowDeactivateModal(false)}
-            >
-              {labels.cancelButton}
-            </Button>
-            <Button variant="destructive" onClick={handleDeactivate}>
-              {labels.confirmDeactivateButton}
-            </Button>
-          </div>
-        </ModalFooter>
-      </Modal>
     </div>
   );
 }

From 8e0824b1bf807010200bdb4176706b4dd3769d63 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Fri, 27 Feb 2026 09:54:39 +0600
Subject: [PATCH 3/6] feat: add License component with activation functionality
 and update exports

---
 ...ensePage.stories.tsx => License.stories.tsx} | 10 +++++-----
 .../{license-page.tsx => license.tsx}           | 17 ++++++++---------
 src/index.ts                                    |  2 +-
 3 files changed, 14 insertions(+), 15 deletions(-)
 rename src/components/{LicensePage.stories.tsx => License.stories.tsx} (98%)
 rename src/components/{license-page.tsx => license.tsx} (97%)

diff --git a/src/components/LicensePage.stories.tsx b/src/components/License.stories.tsx
similarity index 98%
rename from src/components/LicensePage.stories.tsx
rename to src/components/License.stories.tsx
index b13f61a..4f1a839 100644
--- a/src/components/LicensePage.stories.tsx
+++ b/src/components/License.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "storybook/test";
-import { LicensePage, type LicenseStatus } from "./license-page";
+import { License, type LicenseStatus } from "./license";
 import React, { useState } from "react";
 
 const DefaultHeaderImage = () => (
@@ -106,8 +106,8 @@ const DefaultHeaderImage = () => (
 );
 
 const meta = {
-  title: "Components/LicensePage",
-  component: LicensePage,
+  title: "Components/License",
+  component: License,
   parameters: { layout: "padded" },
   tags: ["autodocs"],
   args: {
@@ -123,7 +123,7 @@ const meta = {
     pluginName: { control: "text" },
     hookNamespace: { control: "text" },
   },
-} satisfies Meta<typeof LicensePage>;
+} satisfies Meta<typeof License>;
 
 export default meta;
 
@@ -304,7 +304,7 @@ const InteractiveTemplate = () => {
   };
 
   return (
-    <LicensePage
+    <License
       licenseKey={licenseKey}
       onLicenseKeyChange={setLicenseKey}
       status={status}
diff --git a/src/components/license-page.tsx b/src/components/license.tsx
similarity index 97%
rename from src/components/license-page.tsx
rename to src/components/license.tsx
index abc7497..77d9763 100644
--- a/src/components/license-page.tsx
+++ b/src/components/license.tsx
@@ -1,12 +1,11 @@
 import { useMemo, useState, type HTMLAttributes, type ReactNode } from "react";
 import { RawHTML } from "@wordpress/element";
 import { doAction } from "@wordpress/hooks";
-import { Calendar, Eye, EyeOff, Info, KeyRound, RefreshCw } from "lucide-react";
+import { Calendar, Eye, EyeOff, Info, KeyRound, Loader, LoaderCircle, RefreshCw } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/spinner";
 import {
   AlertDialog,
   AlertDialogTrigger,
@@ -29,7 +28,7 @@ export interface LicenseStatus {
   };
 }
 
-export interface LicensePageLabels {
+export interface LicenseLabels {
   title?: string;
   activationTitle?: string;
   activationDescription?: string;
@@ -58,7 +57,7 @@ export interface LicensePageLabels {
   hideKeyLabel?: string;
 }
 
-export interface LicensePageProps extends HTMLAttributes<HTMLDivElement> {
+export interface LicenseProps extends HTMLAttributes<HTMLDivElement> {
   /** Current license key value */
   licenseKey: string;
   /** Callback when the license key input changes */
@@ -82,7 +81,7 @@ export interface LicensePageProps extends HTMLAttributes<HTMLDivElement> {
   /** Plugin name used in default label strings. Defaults to 'Plugin' */
   pluginName?: string;
   /** Override default label strings for i18n or customization */
-  labels?: LicensePageLabels;
+  labels?: LicenseLabels;
   /** Format a date string for display (e.g., using dateI18n from @wordpress/date) */
   formatDate?: (date: Date) => string;
 }
@@ -108,7 +107,7 @@ const defaultFormatDate = (date: Date): string => {
   });
 };
 
-export function LicensePage({
+export function License({
   licenseKey,
   onLicenseKeyChange,
   status,
@@ -124,14 +123,14 @@ export function LicensePage({
   formatDate = defaultFormatDate,
   className,
   ...props
-}: LicensePageProps) {
+}: LicenseProps) {
   const [showKey, setShowKey] = useState(false);
   const [deactivateDialogOpen, setDeactivateDialogOpen] = useState(false);
 
   const hasActive = useMemo(() => Boolean(status?.is_valid), [status]);
 
   const labels = useMemo(() => {
-    const defaults: Required<LicensePageLabels> = {
+    const defaults: Required<LicenseLabels> = {
       title: "License",
       activationTitle: "License Activation",
       activationDescription: `Activate ${pluginName} with your license key for automatic updates and expert support from your dashboard.`,
@@ -206,7 +205,7 @@ export function LicensePage({
         {loading && (
           <div className="absolute inset-0 rounded-lg w-full h-full z-10 backdrop-blur-sm">
             <div className="flex items-center justify-center h-full">
-              <Spinner className="size-10" />
+              <LoaderCircle role="status" aria-label="Loading" className={cn("animate-spin size-10 text-primary")} strokeWidth={1} />
             </div>
           </div>
         )}
diff --git a/src/index.ts b/src/index.ts
index 5e7fe78..57d5be4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -260,7 +260,7 @@ export {
 export { TopBar, type TopBarProps } from './components/top-bar'
 export { CrownIcon, type CrownIconProps } from './components/crown-icon'
 export { ButtonToggleGroup, type ButtonToggleGroupProps, type ButtonToggleGroupItem } from './components/button-toggle-group'
-export { LicensePage, type LicensePageProps, type LicensePageLabels, type LicenseStatus } from './components/license-page'
+export { License, type LicenseProps, type LicenseLabels, type LicenseStatus } from './components/license'
 
 // Settings (schema-driven settings page)
 export {

From 62fc56c7ab1163e8139de92ce4ab3e4963d05024 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Fri, 27 Feb 2026 11:07:58 +0600
Subject: [PATCH 4/6] feat: enhance AlertDialog for license deactivation with
 improved loading state handling and styling

---
 src/components/license.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/license.tsx b/src/components/license.tsx
index 77d9763..800981e 100644
--- a/src/components/license.tsx
+++ b/src/components/license.tsx
@@ -301,26 +301,27 @@ export function License({
             <div className="flex items-center gap-3 mt-6">
               {hasActive ? (
                 <>
-                  <AlertDialog open={deactivateDialogOpen} onOpenChange={setDeactivateDialogOpen}>
+                  <AlertDialog open={deactivateDialogOpen} onOpenChange={(open) => { if (!loading) setDeactivateDialogOpen(open); }}>
                     <AlertDialogTrigger>
                       <Button variant="destructive" size="sm" disabled={loading}>{labels.deactivateButton}</Button>
                     </AlertDialogTrigger>
                     <AlertDialogContent>
                       <AlertDialogHeader>
-                        <AlertDialogTitle>
+                        <AlertDialogTitle className="p-0! m-0!">
                           {labels.deactivateConfirmTitle}
                         </AlertDialogTitle>
-                        <AlertDialogDescription>
+                        <AlertDialogDescription className="p-0! m-0!">
                           {labels.deactivateConfirmMessage}
                         </AlertDialogDescription>
                       </AlertDialogHeader>
                       <AlertDialogFooter>
-                        <AlertDialogCancel>
+                        <AlertDialogCancel disabled={loading}>
                           {labels.cancelButton}
                         </AlertDialogCancel>
                         <AlertDialogAction
                           variant="destructive"
                           onClick={handleDeactivate}
+                          disabled={loading}
                         >
                           {labels.confirmDeactivateButton}
                         </AlertDialogAction>

From 82895ccea770cf999ba311d1f02e4d93f0d21c13 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Fri, 27 Feb 2026 11:27:59 +0600
Subject: [PATCH 5/6] feat: integrate Badge component for active license status
 display and adjust responsive layout

---
 src/components/license.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/license.tsx b/src/components/license.tsx
index 800981e..f7a9120 100644
--- a/src/components/license.tsx
+++ b/src/components/license.tsx
@@ -17,6 +17,7 @@ import {
   AlertDialogAction,
   AlertDialogCancel,
 } from "@/components/ui/alert-dialog";
+import { Badge } from "./ui";
 
 export interface LicenseStatus {
   is_valid: boolean;
@@ -218,9 +219,9 @@ export function License({
                 <div className="flex gap-2.5 items-center">
                   <h2 className="text-lg font-bold m-0">{labels.activationTitle}</h2>
                   {hasActive && (
-                    <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/15 text-success">
+                    <Badge variant="success">
                       {labels.activeStatus}
-                    </span>
+                    </Badge>
                   )}
                 </div>
                 <p className="m-0 mt-4 text-muted-foreground text-sm leading-snug">
@@ -228,7 +229,7 @@ export function License({
                 </p>
               </div>
               {headerImage && (
-                <div className="hidden md:flex w-1/2 justify-end">
+                <div className="sm:hidden md:flex w-1/2 justify-end">
                   {headerImage}
                 </div>
               )}

From 73cda82f63361a3a5b7e87e2fbd2791c70890ed8 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Fri, 27 Feb 2026 14:47:37 +0600
Subject: [PATCH 6/6] feat: add LicenseClassNames interface for customizable
 styling in License component

---
 src/components/license.tsx | 95 +++++++++++++++++++++++++++++---------
 src/index.ts               |  2 +-
 2 files changed, 74 insertions(+), 23 deletions(-)

diff --git a/src/components/license.tsx b/src/components/license.tsx
index f7a9120..c582ddf 100644
--- a/src/components/license.tsx
+++ b/src/components/license.tsx
@@ -58,6 +58,53 @@ export interface LicenseLabels {
   hideKeyLabel?: string;
 }
 
+export interface LicenseClassNames {
+  /** Root wrapper div */
+  root?: string;
+  /** Page title (h1) */
+  title?: string;
+  /** Loading overlay backdrop */
+  loadingOverlay?: string;
+  /** Loading spinner icon */
+  loadingSpinner?: string;
+  /** Main license card */
+  card?: string;
+  /** Card header section (contains title, badge, description, image) */
+  header?: string;
+  /** Header title (h2) */
+  headerTitle?: string;
+  /** Header description paragraph */
+  headerDescription?: string;
+  /** Header image container */
+  headerImageContainer?: string;
+  /** Card body section */
+  body?: string;
+  /** Activate license heading section (icon + text) */
+  activateHeading?: string;
+  /** Activate heading icon container */
+  activateHeadingIcon?: string;
+  /** Activate heading title (h3) */
+  activateHeadingTitle?: string;
+  /** Activate heading subtitle */
+  activateHeadingSubtitle?: string;
+  /** License key label */
+  licenseKeyLabel?: string;
+  /** License key input */
+  input?: string;
+  /** Error message text */
+  errorMessage?: string;
+  /** Masked key info row */
+  maskedKeyInfo?: string;
+  /** Action buttons container */
+  actions?: string;
+  /** Status cards grid (activations + expiry) */
+  statusGrid?: string;
+  /** Activations remaining card */
+  activationsCard?: string;
+  /** License expiry card */
+  expiryCard?: string;
+}
+
 export interface LicenseProps extends HTMLAttributes<HTMLDivElement> {
   /** Current license key value */
   licenseKey: string;
@@ -85,6 +132,8 @@ export interface LicenseProps extends HTMLAttributes<HTMLDivElement> {
   labels?: LicenseLabels;
   /** Format a date string for display (e.g., using dateI18n from @wordpress/date) */
   formatDate?: (date: Date) => string;
+  /** Override Tailwind class names for individual sections of the component */
+  classNames?: LicenseClassNames;
 }
 
 const maskKey = (key: string): string => {
@@ -122,6 +171,7 @@ export function License({
   pluginName = "Plugin",
   labels: labelOverrides = {},
   formatDate = defaultFormatDate,
+  classNames: cx = {},
   className,
   ...props
 }: LicenseProps) {
@@ -197,39 +247,39 @@ export function License({
 
   return (
     <div
-      className={cn("w-full max-w-2xl lg:max-w-3xl mx-auto", className)}
+      className={cn("w-full max-w-2xl lg:max-w-3xl mx-auto", cx.root, className)}
       {...props}
     >
-      <h1 className="text-2xl font-bold mb-6">{labels.title}</h1>
+      <h1 className={cn("text-2xl font-bold mb-6", cx.title)}>{labels.title}</h1>
 
       <div className="relative">
         {loading && (
-          <div className="absolute inset-0 rounded-lg w-full h-full z-10 backdrop-blur-sm">
+          <div className={cn("absolute inset-0 rounded-lg w-full h-full z-10 backdrop-blur-sm", cx.loadingOverlay)}>
             <div className="flex items-center justify-center h-full">
-              <LoaderCircle role="status" aria-label="Loading" className={cn("animate-spin size-10 text-primary")} strokeWidth={1} />
+              <LoaderCircle role="status" aria-label="Loading" className={cn("animate-spin size-10 text-primary", cx.loadingSpinner)} strokeWidth={1} />
             </div>
           </div>
         )}
 
-        <Card className="bg-card rounded-lg mb-6 p-0 gap-0">
+        <Card className={cn("bg-card rounded-lg mb-6 p-0 gap-0", cx.card)}>
           {/* Header section */}
-          <div className="flex items-start justify-between p-6 border-b border-border">
+          <div className={cn("flex items-start justify-between p-6 border-b border-border", cx.header)}>
             <div className="flex justify-between w-full">
               <div className="w-full md:w-1/2">
                 <div className="flex gap-2.5 items-center">
-                  <h2 className="text-lg font-bold m-0">{labels.activationTitle}</h2>
+                  <h2 className={cn("text-lg font-bold m-0", cx.headerTitle)}>{labels.activationTitle}</h2>
                   {hasActive && (
                     <Badge variant="success">
                       {labels.activeStatus}
                     </Badge>
                   )}
                 </div>
-                <p className="m-0 mt-4 text-muted-foreground text-sm leading-snug">
+                <p className={cn("m-0 mt-4 text-muted-foreground text-sm leading-snug", cx.headerDescription)}>
                   {labels.activationDescription}
                 </p>
               </div>
               {headerImage && (
-                <div className="sm:hidden md:flex w-1/2 justify-end">
+                <div className={cn("sm:hidden md:flex w-1/2 justify-end", cx.headerImageContainer)}>
                   {headerImage}
                 </div>
               )}
@@ -237,18 +287,18 @@ export function License({
           </div>
 
           {/* Body section */}
-          <div className="p-6">
+          <div className={cn("p-6", cx.body)}>
             {/* Activate heading (shown when not active) */}
             {!hasActive && (
-              <div className="flex gap-3.5 mb-7">
-                <div className="bg-primary/10 size-11 rounded-xl flex items-center justify-center">
+              <div className={cn("flex gap-3.5 mb-7", cx.activateHeading)}>
+                <div className={cn("bg-primary/10 size-11 rounded-xl flex items-center justify-center", cx.activateHeadingIcon)}>
                   <KeyRound size={20} className="text-primary" />
                 </div>
                 <div className="flex flex-col justify-between">
-                  <h3 className="text-foreground font-bold text-lg p-0 m-0">
+                  <h3 className={cn("text-foreground font-bold text-lg p-0 m-0", cx.activateHeadingTitle)}>
                     {labels.activateLicenseHeading}
                   </h3>
-                  <span className="text-xs text-muted-foreground">
+                  <span className={cn("text-xs text-muted-foreground", cx.activateHeadingSubtitle)}>
                     {labels.activateLicenseSubheading}
                   </span>
                 </div>
@@ -256,7 +306,7 @@ export function License({
             )}
 
             {/* License key label */}
-            <div className="cursor-pointer text-sm font-semibold text-foreground mb-2.5 inline-block">
+            <div className={cn("cursor-pointer text-sm font-semibold text-foreground mb-2.5 inline-block", cx.licenseKeyLabel)}>
               {labels.licenseKeyLabel}
             </div>
 
@@ -271,7 +321,8 @@ export function License({
                 disabled={loading || hasActive}
                 className={cn(
                   "pr-10",
-                  error && "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20"
+                  error && "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20",
+                  cx.input
                 )}
               />
               <button
@@ -287,19 +338,19 @@ export function License({
 
             {/* Error message */}
             {error && (
-              <p className="text-destructive text-sm m-0 mt-2">{error}</p>
+              <p className={cn("text-destructive text-sm m-0 mt-2", cx.errorMessage)}>{error}</p>
             )}
 
             {/* Masked key info */}
             {!error && hasActive && (
-              <div className="text-sm text-muted-foreground mt-2 flex gap-1.5 items-center">
+              <div className={cn("text-sm text-muted-foreground mt-2 flex gap-1.5 items-center", cx.maskedKeyInfo)}>
                 <Info size={16} strokeWidth={3} />
                 <span>{labels.maskedKeyInfo}</span>
               </div>
             )}
 
             {/* Action buttons */}
-            <div className="flex items-center gap-3 mt-6">
+            <div className={cn("flex items-center gap-3 mt-6", cx.actions)}>
               {hasActive ? (
                 <>
                   <AlertDialog open={deactivateDialogOpen} onOpenChange={(open) => { if (!loading) setDeactivateDialogOpen(open); }}>
@@ -354,9 +405,9 @@ export function License({
 
         {/* Status cards (shown when active) */}
         {hasActive && (
-          <div className="grid gap-6 grid-cols-1 md:grid-cols-2 max-w-4xl">
+          <div className={cn("grid gap-6 grid-cols-1 md:grid-cols-2 max-w-4xl", cx.statusGrid)}>
             {/* Activations Remaining card */}
-            <Card className="bg-card rounded-lg p-6 gap-0">
+            <Card className={cn("bg-card rounded-lg p-6 gap-0", cx.activationsCard)}>
               <div className="flex items-center gap-3 mb-5">
                 <div className="bg-primary/10 size-11 rounded-full flex items-center justify-center">
                   <KeyRound size={20} className="text-primary" />
@@ -403,7 +454,7 @@ export function License({
             </Card>
 
             {/* License Expiry card */}
-            <Card className="bg-card rounded-lg p-6 gap-0">
+            <Card className={cn("bg-card rounded-lg p-6 gap-0", cx.expiryCard)}>
               <div className="flex items-center gap-3 mb-5">
                 <div className="bg-primary/10 size-11 rounded-full flex items-center justify-center">
                   <Calendar size={20} className="text-primary" />
diff --git a/src/index.ts b/src/index.ts
index 57d5be4..db1ae6b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -260,7 +260,7 @@ export {
 export { TopBar, type TopBarProps } from './components/top-bar'
 export { CrownIcon, type CrownIconProps } from './components/crown-icon'
 export { ButtonToggleGroup, type ButtonToggleGroupProps, type ButtonToggleGroupItem } from './components/button-toggle-group'
-export { License, type LicenseProps, type LicenseLabels, type LicenseStatus } from './components/license'
+export { License, type LicenseProps, type LicenseLabels, type LicenseStatus, type LicenseClassNames } from './components/license'
 
 // Settings (schema-driven settings page)
 export {