@burdenoff/microfe-billing 2026.624.3 → 2026.625.2

package/dist/billing/modules/plans/pages/PlanAssignFreePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlanAssignFreePage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanAssignFreePage.tsx"],"sourcesContent":["/**\n * Plans Module - Assign Plan Free (Admin only)\n *\n * Internal tool for assigning any plan to a billing account at no charge.\n * Protected by PLAN_ASSIGN_SECRET — only team members who know the secret\n * can use this page. Never expose to end users.\n *\n * Route: /billing/plans/assign-free\n */\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useAssignPlanFreeMutation } from '../../../../generated/global-operations';\nimport { usePlans } from '../hooks';\n\nexport const PlanAssignFreePage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n\n  const [secret, setSecret] = useState('');\n  const [billingAccountId, setBillingAccountId] = useState('');\n  const [planId, setPlanId] = useState('');\n  const [workspaceId, setWorkspaceId] = useState('');\n  const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);\n\n  // Fetch all plans (including non-purchasable internal ones) for the dropdown\n  const { plans, isLoading: isPlansLoading } = usePlans({ includeFree: true });\n\n  const [assignPlanFree, { loading: isAssigning }] = useAssignPlanFreeMutation();\n\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.assignFree.noPermission',\n          \"You don't have permission to access this page.\"\n        )}\n      />\n    );\n  }\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setResult(null);\n\n    if (!secret.trim() || !billingAccountId.trim() || !planId) {\n      setResult({ success: false, message: 'All fields are required.' });\n      return;\n    }\n\n    try {\n      const { data } = await assignPlanFree({\n        variables: {\n          secret: secret.trim(),\n          billingAccountId: billingAccountId.trim(),\n          planId,\n          ...(workspaceId.trim() ? { workspaceId: workspaceId.trim() } : {}),\n        },\n      });\n\n      if (data?.assignPlanFree) {\n        const sub = data.assignPlanFree;\n        setResult({\n          success: true,\n          message: `Plan assigned. Subscription ID: ${sub.id} · Status: ${sub.status} · Valid: ${new Date(sub.startDate).toLocaleDateString()} → ${new Date(sub.endDate).toLocaleDateString()}`,\n        });\n        // Clear sensitive fields\n        setSecret('');\n        setBillingAccountId('');\n        setPlanId('');\n        setWorkspaceId('');\n      }\n    } catch (err) {\n      const msg = err instanceof Error ? err.message : 'Failed to assign plan.';\n      setResult({ success: false, message: msg });\n    }\n  };\n\n  const selectedPlan = plans.find((p) => p.id === planId);\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-2xl\">\n      <PageHeader\n        title={tr('billing.assignFree.title', 'Assign Plan for Free')}\n        description={tr(\n          'billing.assignFree.description',\n          'Internally assign any plan to a billing account at no charge. Requires the team secret.'\n        )}\n        actions={\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-3 py-2 text-sm border border-border-subtle rounded-md text-text-primary hover:bg-bg-sunken transition-colors\"\n          >\n            ← Back to Plans\n          </button>\n        }\n      />\n\n      {/* Warning banner */}\n      <div className=\"flex items-start gap-3 p-4 rounded-lg border border-status-warning-border bg-status-warning-bg/10\">\n        <svg\n          className=\"size-5 text-status-warning-text shrink-0 mt-0.5\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L3.072 16.5c-.77.833.192 2.5 1.732 2.5z\"\n          />\n        </svg>\n        <div>\n          <p className=\"text-sm font-medium text-status-warning-text\">Internal admin tool</p>\n          <p className=\"text-xs text-status-warning-text/80 mt-0.5\">\n            This bypasses all payment flows. The plan is assigned immediately with no charge. Use\n            only for enterprise deals or internal accounts.\n          </p>\n        </div>\n      </div>\n\n      <form\n        onSubmit={handleSubmit}\n        className=\"border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\"\n      >\n        <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n          <h2 className=\"font-semibold text-text-primary\">Assignment Details</h2>\n        </div>\n\n        <div className=\"p-4 space-y-4\">\n          {/* Secret */}\n          <div>\n            <label htmlFor=\"secret\" className=\"block text-sm font-medium text-text-primary mb-1\">\n              Team Secret <span className=\"text-status-error-text\">*</span>\n            </label>\n            <input\n              id=\"secret\"\n              type=\"password\"\n              value={secret}\n              onChange={(e) => setSecret(e.target.value)}\n              autoComplete=\"off\"\n              className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] font-mono\"\n              placeholder=\"Enter PLAN_ASSIGN_SECRET\"\n              required\n            />\n            <p className=\"text-xs text-text-muted mt-1\">\n              The secret key shared within the team. Never expose this to users.\n            </p>\n          </div>\n\n          {/* Billing Account ID */}\n          <div>\n            <label\n              htmlFor=\"billingAccountId\"\n              className=\"block text-sm font-medium text-text-primary mb-1\"\n            >\n              Billing Account ID <span className=\"text-status-error-text\">*</span>\n            </label>\n            <input\n              id=\"billingAccountId\"\n              type=\"text\"\n              value={billingAccountId}\n              onChange={(e) => setBillingAccountId(e.target.value)}\n              className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] font-mono text-sm\"\n              placeholder=\"e.g. ba_01jk3n2...\"\n              required\n            />\n            <p className=\"text-xs text-text-muted mt-1\">\n              Find this in the user's billing account settings or via the billing accounts list.\n            </p>\n          </div>\n\n          {/* Workspace ID (optional — auto-resolved from org if omitted) */}\n          <div>\n            <label htmlFor=\"workspaceId\" className=\"block text-sm font-medium text-text-primary mb-1\">\n              Workspace ID <span className=\"text-text-secondary font-normal\">(optional)</span>\n            </label>\n            <input\n              id=\"workspaceId\"\n              type=\"text\"\n              value={workspaceId}\n              onChange={(e) => setWorkspaceId(e.target.value)}\n              className=\"w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary font-mono text-sm\"\n              placeholder=\"e.g. ws_01jk3n2… (leave blank to auto-resolve)\"\n            />\n            <p className=\"text-xs text-text-secondary mt-1\">\n              If blank, the first active workspace for this org is used automatically. Set\n              explicitly when the org has multiple workspaces.\n            </p>\n          </div>\n\n          {/* Plan selector */}\n          <div>\n            <label htmlFor=\"planId\" className=\"block text-sm font-medium text-text-primary mb-1\">\n              Plan <span className=\"text-status-error-text\">*</span>\n            </label>\n            {isPlansLoading ? (\n              <div className=\"h-10 bg-bg-sunken animate-pulse rounded-md\" />\n            ) : (\n              <select\n                id=\"planId\"\n                value={planId}\n                onChange={(e) => setPlanId(e.target.value)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                required\n              >\n                <option value=\"\" disabled>\n                  Select a plan…\n                </option>\n                {plans.map((plan) => (\n                  <option key={plan.id} value={plan.id}>\n                    {plan.name}\n                    {!plan.isPurchasable ? ' (internal)' : ''}\n                    {plan.price != null && plan.price > 0\n                      ? ` — ${plan.currency ?? 'USD'} ${plan.price}`\n                      : ''}\n                  </option>\n                ))}\n              </select>\n            )}\n            {selectedPlan && (\n              <p className=\"text-xs text-text-muted mt-1\">\n                {selectedPlan.isPurchasable ? 'Public plan' : 'Internal / non-purchasable plan'}\n                {selectedPlan.productID ? ` · Product: ${selectedPlan.productID}` : ''}\n              </p>\n            )}\n          </div>\n        </div>\n\n        {/* Result banner */}\n        {result && (\n          <div\n            className={`mx-4 mb-4 p-3 rounded-lg border text-sm ${\n              result.success\n                ? 'border-status-success-border bg-status-success-bg/10 text-status-success-text'\n                : 'border-status-error-border bg-status-error-bg/10 text-status-error-text'\n            }`}\n          >\n            {result.message}\n          </div>\n        )}\n\n        <div className=\"px-4 pb-4 flex items-center gap-3\">\n          <button\n            type=\"submit\"\n            disabled={isAssigning || !secret || !billingAccountId || !planId}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {isAssigning ? 'Assigning…' : 'Assign Plan for Free'}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setSecret('');\n              setBillingAccountId('');\n              setPlanId('');\n              setWorkspaceId('');\n              setResult(null);\n            }}\n            className=\"px-4 py-2 text-sm border border-border-subtle rounded-md text-text-primary hover:bg-bg-sunken transition-colors\"\n          >\n            Clear\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PlanAssignFreePage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanAssignFreePage.tsx"],"sourcesContent":["/**\n * Plans Module - Assign Plan Free (Admin only)\n *\n * Internal tool for assigning any plan to a billing account at no charge.\n * Protected by PLAN_ASSIGN_SECRET — only team members who know the secret\n * can use this page. Never expose to end users.\n *\n * Route: /billing/plans/assign-free\n */\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useAssignPlanFreeMutation } from '../../../../generated/global-operations';\nimport { usePlans } from '../hooks';\n\nexport const PlanAssignFreePage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n\n  const [secret, setSecret] = useState('');\n  const [billingAccountId, setBillingAccountId] = useState('');\n  const [planId, setPlanId] = useState('');\n  const [workspaceId, setWorkspaceId] = useState('');\n  const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);\n\n  // Fetch all plans (including non-purchasable internal ones) for the dropdown\n  const { plans, isLoading: isPlansLoading } = usePlans({ includeFree: true });\n\n  const [assignPlanFree, { loading: isAssigning }] = useAssignPlanFreeMutation();\n\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.assignFree.noPermission',\n          \"You don't have permission to access this page.\"\n        )}\n      />\n    );\n  }\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setResult(null);\n\n    if (!secret.trim() || !billingAccountId.trim() || !planId) {\n      setResult({ success: false, message: 'All fields are required.' });\n      return;\n    }\n\n    try {\n      const { data } = await assignPlanFree({\n        variables: {\n          secret: secret.trim(),\n          billingAccountId: billingAccountId.trim(),\n          planId,\n          ...(workspaceId.trim() ? { workspaceId: workspaceId.trim() } : {}),\n        },\n      });\n\n      if (data?.assignPlanFree) {\n        const sub = data.assignPlanFree;\n        setResult({\n          success: true,\n          message: `Plan assigned. Subscription ID: ${sub.id} · Status: ${sub.status} · Valid: ${new Date(sub.startDate).toLocaleDateString()} → ${new Date(sub.endDate).toLocaleDateString()}`,\n        });\n        // Clear sensitive fields\n        setSecret('');\n        setBillingAccountId('');\n        setPlanId('');\n        setWorkspaceId('');\n      }\n    } catch (err) {\n      const msg = err instanceof Error ? err.message : 'Failed to assign plan.';\n      setResult({ success: false, message: msg });\n    }\n  };\n\n  const selectedPlan = plans.find((p) => p.id === planId);\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-2xl\">\n      <PageHeader\n        title={tr('billing.assignFree.title', 'Assign Plan for Free')}\n        description={tr(\n          'billing.assignFree.description',\n          'Internally assign any plan to a billing account at no charge. Requires the team secret.'\n        )}\n        actions={\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-3 py-2 text-sm border border-border-subtle rounded-md text-text-primary hover:bg-bg-sunken transition-colors\"\n          >\n            ← Back to Plans\n          </button>\n        }\n      />\n\n      {/* Warning banner */}\n      <div className=\"flex items-start gap-3 p-4 rounded-lg border border-status-warning-border bg-status-warning-bg/10\">\n        <svg\n          className=\"size-5 text-status-warning-text shrink-0 mt-0.5\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L3.072 16.5c-.77.833.192 2.5 1.732 2.5z\"\n          />\n        </svg>\n        <div>\n          <p className=\"text-sm font-medium text-status-warning-text\">Internal admin tool</p>\n          <p className=\"text-xs text-status-warning-text/80 mt-0.5\">\n            This bypasses all payment flows. The plan is assigned immediately with no charge. Use\n            only for enterprise deals or internal accounts.\n          </p>\n        </div>\n      </div>\n\n      <form\n        onSubmit={handleSubmit}\n        className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\"\n      >\n        <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n          <h2 className=\"font-semibold text-text-primary\">Assignment Details</h2>\n        </div>\n\n        <div className=\"p-4 space-y-4\">\n          {/* Secret */}\n          <div>\n            <label htmlFor=\"secret\" className=\"block text-sm font-medium text-text-primary mb-1\">\n              Team Secret <span className=\"text-status-error-text\">*</span>\n            </label>\n            <input\n              id=\"secret\"\n              type=\"password\"\n              value={secret}\n              onChange={(e) => setSecret(e.target.value)}\n              autoComplete=\"off\"\n              className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] font-mono\"\n              placeholder=\"Enter PLAN_ASSIGN_SECRET\"\n              required\n            />\n            <p className=\"text-xs text-text-muted mt-1\">\n              The secret key shared within the team. Never expose this to users.\n            </p>\n          </div>\n\n          {/* Billing Account ID */}\n          <div>\n            <label\n              htmlFor=\"billingAccountId\"\n              className=\"block text-sm font-medium text-text-primary mb-1\"\n            >\n              Billing Account ID <span className=\"text-status-error-text\">*</span>\n            </label>\n            <input\n              id=\"billingAccountId\"\n              type=\"text\"\n              value={billingAccountId}\n              onChange={(e) => setBillingAccountId(e.target.value)}\n              className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] font-mono text-sm\"\n              placeholder=\"e.g. ba_01jk3n2...\"\n              required\n            />\n            <p className=\"text-xs text-text-muted mt-1\">\n              Find this in the user's billing account settings or via the billing accounts list.\n            </p>\n          </div>\n\n          {/* Workspace ID (optional — auto-resolved from org if omitted) */}\n          <div>\n            <label htmlFor=\"workspaceId\" className=\"block text-sm font-medium text-text-primary mb-1\">\n              Workspace ID <span className=\"text-text-secondary font-normal\">(optional)</span>\n            </label>\n            <input\n              id=\"workspaceId\"\n              type=\"text\"\n              value={workspaceId}\n              onChange={(e) => setWorkspaceId(e.target.value)}\n              className=\"w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary font-mono text-sm\"\n              placeholder=\"e.g. ws_01jk3n2… (leave blank to auto-resolve)\"\n            />\n            <p className=\"text-xs text-text-secondary mt-1\">\n              If blank, the first active workspace for this org is used automatically. Set\n              explicitly when the org has multiple workspaces.\n            </p>\n          </div>\n\n          {/* Plan selector */}\n          <div>\n            <label htmlFor=\"planId\" className=\"block text-sm font-medium text-text-primary mb-1\">\n              Plan <span className=\"text-status-error-text\">*</span>\n            </label>\n            {isPlansLoading ? (\n              <div className=\"h-10 bg-bg-sunken animate-pulse rounded-md\" />\n            ) : (\n              <select\n                id=\"planId\"\n                value={planId}\n                onChange={(e) => setPlanId(e.target.value)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                required\n              >\n                <option value=\"\" disabled>\n                  Select a plan…\n                </option>\n                {plans.map((plan) => (\n                  <option key={plan.id} value={plan.id}>\n                    {plan.name}\n                    {!plan.isPurchasable ? ' (internal)' : ''}\n                    {plan.price != null && plan.price > 0\n                      ? ` — ${plan.currency ?? 'USD'} ${plan.price}`\n                      : ''}\n                  </option>\n                ))}\n              </select>\n            )}\n            {selectedPlan && (\n              <p className=\"text-xs text-text-muted mt-1\">\n                {selectedPlan.isPurchasable ? 'Public plan' : 'Internal / non-purchasable plan'}\n                {selectedPlan.productID ? ` · Product: ${selectedPlan.productID}` : ''}\n              </p>\n            )}\n          </div>\n        </div>\n\n        {/* Result banner */}\n        {result && (\n          <div\n            className={`mx-4 mb-4 p-3 rounded-lg border text-sm ${\n              result.success\n                ? 'border-status-success-border bg-status-success-bg/10 text-status-success-text'\n                : 'border-status-error-border bg-status-error-bg/10 text-status-error-text'\n            }`}\n          >\n            {result.message}\n          </div>\n        )}\n\n        <div className=\"px-4 pb-4 flex items-center gap-3\">\n          <button\n            type=\"submit\"\n            disabled={isAssigning || !secret || !billingAccountId || !planId}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {isAssigning ? 'Assigning…' : 'Assign Plan for Free'}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setSecret('');\n              setBillingAccountId('');\n              setPlanId('');\n              setWorkspaceId('');\n              setResult(null);\n            }}\n            className=\"px-4 py-2 text-sm border border-border-subtle rounded-md text-text-primary hover:bg-bg-sunken transition-colors\"\n          >\n            Clear\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,UAA+B;CAC1C,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAGnC,IAAa,GAAoB,EACjC,IAAc,GAAuB,EAErC,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,CAAC,GAAkB,KAAuB,EAAS,GAAG,EACtD,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAQ,KAAa,EAAuD,KAAK,EAGlF,EAAE,UAAO,WAAW,MAAmB,EAAS,EAAE,aAAa,IAAM,CAAC,EAEtE,CAAC,GAAgB,EAAE,SAAS,OAAiB,GAA2B;AAE9E,KAAI,CAAC,EAAY,eACf,QACE,kBAAC,GAAD,EACE,SAAS,EACP,mCACA,iDACD,EACD,CAAA;CAIN,IAAM,IAAe,OAAO,MAAiB;AAI3C,MAHA,EAAE,gBAAgB,EAClB,EAAU,KAAK,EAEX,CAAC,EAAO,MAAM,IAAI,CAAC,EAAiB,MAAM,IAAI,CAAC,GAAQ;AACzD,KAAU;IAAE,SAAS;IAAO,SAAS;IAA4B,CAAC;AAClE;;AAGF,MAAI;GACF,IAAM,EAAE,YAAS,MAAM,EAAe,EACpC,WAAW;IACT,QAAQ,EAAO,MAAM;IACrB,kBAAkB,EAAiB,MAAM;IACzC;IACA,GAAI,EAAY,MAAM,GAAG,EAAE,aAAa,EAAY,MAAM,EAAE,GAAG,EAAE;IAClE,EACF,CAAC;AAEF,OAAI,GAAM,gBAAgB;IACxB,IAAM,IAAM,EAAK;AASjB,IARA,EAAU;KACR,SAAS;KACT,SAAS,mCAAmC,EAAI,GAAG,aAAa,EAAI,OAAO,YAAY,IAAI,KAAK,EAAI,UAAU,CAAC,oBAAoB,CAAC,KAAK,IAAI,KAAK,EAAI,QAAQ,CAAC,oBAAoB;KACpL,CAAC,EAEF,EAAU,GAAG,EACb,EAAoB,GAAG,EACvB,EAAU,GAAG,EACb,EAAe,GAAG;;WAEb,GAAK;AAEZ,KAAU;IAAE,SAAS;IAAO,SADhB,aAAe,QAAQ,EAAI,UAAU;IACP,CAAC;;IAIzC,IAAe,EAAM,MAAM,MAAM,EAAE,OAAO,EAAO;AAEvD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,OAAO,EAAG,4BAA4B,uBAAuB;IAC7D,aAAa,EACX,kCACA,0FACD;IACD,SACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,SAAS;KACnC,WAAU;eACX;KAEQ,CAAA;IAEX,CAAA;GAGF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,SAAQ;KACR,QAAO;eAEP,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA+C;KAAuB,CAAA,EACnF,kBAAC,KAAD;KAAG,WAAU;eAA6C;KAGtD,CAAA,CACA,EAAA,CAAA,CACF;;GAEN,kBAAC,QAAD;IACE,UAAU;IACV,WAAU;cAFZ;KAIE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,MAAD;OAAI,WAAU;iBAAkC;OAAuB,CAAA;MACnE,CAAA;KAEN,kBAAC,OAAD;MAAK,WAAU;gBAAf;OAEE,kBAAC,OAAD,EAAA,UAAA;QACE,kBAAC,SAAD;SAAO,SAAQ;SAAS,WAAU;mBAAlC,CAAqF,gBACvE,kBAAC,QAAD;UAAM,WAAU;oBAAyB;UAAQ,CAAA,CACvD;;QACR,kBAAC,SAAD;SACE,IAAG;SACH,MAAK;SACL,OAAO;SACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;SAC1C,cAAa;SACb,WAAU;SACV,aAAY;SACZ,UAAA;SACA,CAAA;QACF,kBAAC,KAAD;SAAG,WAAU;mBAA+B;SAExC,CAAA;QACA,EAAA,CAAA;OAGN,kBAAC,OAAD,EAAA,UAAA;QACE,kBAAC,SAAD;SACE,SAAQ;SACR,WAAU;mBAFZ,CAGC,uBACoB,kBAAC,QAAD;UAAM,WAAU;oBAAyB;UAAQ,CAAA,CAC9D;;QACR,kBAAC,SAAD;SACE,IAAG;SACH,MAAK;SACL,OAAO;SACP,WAAW,MAAM,EAAoB,EAAE,OAAO,MAAM;SACpD,WAAU;SACV,aAAY;SACZ,UAAA;SACA,CAAA;QACF,kBAAC,KAAD;SAAG,WAAU;mBAA+B;SAExC,CAAA;QACA,EAAA,CAAA;OAGN,kBAAC,OAAD,EAAA,UAAA;QACE,kBAAC,SAAD;SAAO,SAAQ;SAAc,WAAU;mBAAvC,CAA0F,iBAC3E,kBAAC,QAAD;UAAM,WAAU;oBAAkC;UAAiB,CAAA,CAC1E;;QACR,kBAAC,SAAD;SACE,IAAG;SACH,MAAK;SACL,OAAO;SACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;SAC/C,WAAU;SACV,aAAY;SACZ,CAAA;QACF,kBAAC,KAAD;SAAG,WAAU;mBAAmC;SAG5C,CAAA;QACA,EAAA,CAAA;OAGN,kBAAC,OAAD,EAAA,UAAA;QACE,kBAAC,SAAD;SAAO,SAAQ;SAAS,WAAU;mBAAlC,CAAqF,SAC9E,kBAAC,QAAD;UAAM,WAAU;oBAAyB;UAAQ,CAAA,CAChD;;QACP,IACC,kBAAC,OAAD,EAAK,WAAU,8CAA+C,CAAA,GAE9D,kBAAC,UAAD;SACE,IAAG;SACH,OAAO;SACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;SAC1C,WAAU;SACV,UAAA;mBALF,CAOE,kBAAC,UAAD;UAAQ,OAAM;UAAG,UAAA;oBAAS;UAEjB,CAAA,EACR,EAAM,KAAK,MACV,kBAAC,UAAD;UAAsB,OAAO,EAAK;oBAAlC;WACG,EAAK;WACJ,EAAK,gBAAgC,KAAhB;WACtB,EAAK,SAAS,QAAQ,EAAK,QAAQ,IAChC,MAAM,EAAK,YAAY,MAAM,GAAG,EAAK,UACrC;WACG;YANI,EAAK,GAMT,CACT,CACK;;QAEV,KACC,kBAAC,KAAD;SAAG,WAAU;mBAAb,CACG,EAAa,gBAAgB,gBAAgB,mCAC7C,EAAa,YAAY,eAAe,EAAa,cAAc,GAClE;;QAEF,EAAA,CAAA;OACF;;KAGL,KACC,kBAAC,OAAD;MACE,WAAW,2CACT,EAAO,UACH,kFACA;gBAGL,EAAO;MACJ,CAAA;KAGR,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,MAAK;OACL,UAAU,KAAe,CAAC,KAAU,CAAC,KAAoB,CAAC;OAC1D,WAAU;iBAET,IAAc,eAAe;OACvB,CAAA,EACT,kBAAC,UAAD;OACE,MAAK;OACL,eAAe;AAKb,QAJA,EAAU,GAAG,EACb,EAAoB,GAAG,EACvB,EAAU,GAAG,EACb,EAAe,GAAG,EAClB,EAAU,KAAK;;OAEjB,WAAU;iBACX;OAEQ,CAAA,CACL;;KACD;;GACH"}

package/dist/billing/modules/plans/pages/PlanBrowseDetailPage.js

@@ -9,10 +9,15 @@ import { usePlan as s } from "../hooks/usePlans.js";
 import "../hooks/index.js";
 import { useMemo as c } from "react";
 import { useParams as l } from "react-router-dom";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ShowMore as m } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/plans/pages/PlanBrowseDetailPage.tsx
-function p(e) {
+var h = ({ when: e, collapsedHeight: t, children: n }) => e ? /* @__PURE__ */ d(m, {
+	collapsedHeight: t,
+	children: n
+}) : /* @__PURE__ */ d(u, { children: n });
+function g(e) {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) {
 		if (!n.quota) continue;
@@ -27,236 +32,240 @@ function p(e) {
 	}
 	return Array.from(t.values());
 }
-var m = () => {
-	let { t: a } = f(), m = (e, t) => {
+var _ = () => {
+	let { t: a } = p(), u = (e, t) => {
 		let n = a(e);
 		return n === e ? t : n;
-	}, { planId: h } = l(), g = o(), { plan: _, isLoading: v, error: y, refetch: b } = s(h), x = c(() => p(_?.features || []), [_?.features]);
-	return v ? /* @__PURE__ */ d("div", {
+	}, { planId: m } = l(), _ = o(), { plan: v, isLoading: y, error: b, refetch: x } = s(m), S = c(() => g(v?.features || []), [v?.features]);
+	return y ? /* @__PURE__ */ f("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
-		children: [/* @__PURE__ */ d("div", {
+		children: [/* @__PURE__ */ f("div", {
 			className: "flex items-center gap-4",
-			children: [/* @__PURE__ */ u("div", { className: "size-10 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ u("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" })]
-		}), /* @__PURE__ */ d("div", {
+			children: [/* @__PURE__ */ d("div", { className: "size-10 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ d("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" })]
+		}), /* @__PURE__ */ f("div", {
 			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-			children: [/* @__PURE__ */ u("div", {
+			children: [/* @__PURE__ */ d("div", {
 				className: "lg:col-span-2 space-y-6",
-				children: /* @__PURE__ */ d("div", {
+				children: /* @__PURE__ */ f("div", {
 					className: "border border-border-subtle rounded-lg p-6 space-y-4",
-					children: [/* @__PURE__ */ u("div", { className: "h-6 w-32 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ u("div", { className: "h-4 w-full bg-bg-sunken animate-pulse rounded" })]
+					children: [/* @__PURE__ */ d("div", { className: "h-6 w-32 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ d("div", { className: "h-4 w-full bg-bg-sunken animate-pulse rounded" })]
 				})
-			}), /* @__PURE__ */ d("div", {
+			}), /* @__PURE__ */ f("div", {
 				className: "border border-border-subtle rounded-lg p-6 space-y-4",
-				children: [/* @__PURE__ */ u("div", { className: "h-6 w-24 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ u("div", { className: "h-10 w-full bg-bg-sunken animate-pulse rounded" })]
+				children: [/* @__PURE__ */ d("div", { className: "h-6 w-24 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ d("div", { className: "h-10 w-full bg-bg-sunken animate-pulse rounded" })]
 			})]
 		})]
-	}) : y && i(y) ? /* @__PURE__ */ u("div", {
+	}) : b && i(b) ? /* @__PURE__ */ d("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ u(e, {
-			title: m("billing.plans.serverUnavailable", "Server Unavailable"),
-			message: m("billing.plans.unableToLoadPlanDetails", "Unable to load plan details."),
-			onRetry: () => b(),
+		children: /* @__PURE__ */ d(e, {
+			title: u("billing.plans.serverUnavailable", "Server Unavailable"),
+			message: u("billing.plans.unableToLoadPlanDetails", "Unable to load plan details."),
+			onRetry: () => x(),
 			showRetry: !0
 		})
-	}) : _ ? /* @__PURE__ */ d("div", {
+	}) : v ? /* @__PURE__ */ f("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
-		children: [/* @__PURE__ */ d("div", {
+		children: [/* @__PURE__ */ f("div", {
 			className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
-			children: [/* @__PURE__ */ d("div", {
+			children: [/* @__PURE__ */ f("div", {
 				className: "flex items-start gap-4",
-				children: [/* @__PURE__ */ u("button", {
+				children: [/* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: () => g("/plans"),
+					onClick: () => _("/plans"),
 					className: "p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors",
-					children: /* @__PURE__ */ u("svg", {
+					children: /* @__PURE__ */ d("svg", {
 						className: "size-5",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ u("path", {
+						children: /* @__PURE__ */ d("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
 							d: "M15 19l-7-7 7-7"
 						})
 					})
-				}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h1", {
+				}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
 					className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
-					children: _.name
-				}), /* @__PURE__ */ d("p", {
+					children: v.name
+				}), /* @__PURE__ */ f("p", {
 					className: "text-sm text-text-secondary mt-1",
-					children: [r(_.duration), " billing plan"]
+					children: [r(v.duration), " billing plan"]
 				})] })]
-			}), /* @__PURE__ */ u("button", {
+			}), /* @__PURE__ */ d("button", {
 				type: "button",
-				onClick: () => g(`/checkout/${_.id}`),
+				onClick: () => _(`/checkout/${v.id}`),
 				className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
 				children: "Subscribe to Plan"
 			})]
-		}), /* @__PURE__ */ d("div", {
+		}), /* @__PURE__ */ f("div", {
 			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-			children: [/* @__PURE__ */ d("div", {
+			children: [/* @__PURE__ */ f("div", {
 				className: "lg:col-span-2 space-y-6",
-				children: [/* @__PURE__ */ d("div", {
-					className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
-					children: [/* @__PURE__ */ u("div", {
-						className: "p-6 border-b border-border-subtle bg-bg-sunken",
-						children: /* @__PURE__ */ u("h2", {
+				children: [/* @__PURE__ */ f("div", {
+					className: "border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
+					children: [/* @__PURE__ */ d("div", {
+						className: "p-6 border-b border-border-seam bg-bg-sunken",
+						children: /* @__PURE__ */ d("h2", {
 							className: "text-lg font-semibold text-text-primary",
-							children: m("billing.plans.pricing", "Pricing")
+							children: u("billing.plans.pricing", "Pricing")
 						})
-					}), /* @__PURE__ */ d("div", {
+					}), /* @__PURE__ */ f("div", {
 						className: "p-6",
-						children: [/* @__PURE__ */ d("div", {
+						children: [/* @__PURE__ */ f("div", {
 							className: "flex items-baseline gap-1",
-							children: [/* @__PURE__ */ u("span", {
+							children: [/* @__PURE__ */ d("span", {
 								className: "text-4xl font-bold text-text-primary",
-								children: t(_.price, _.currency)
-							}), /* @__PURE__ */ d("span", {
+								children: t(v.price, v.currency)
+							}), /* @__PURE__ */ f("span", {
 								className: "text-lg text-text-secondary",
-								children: ["/ ", n(_.duration)]
+								children: ["/ ", n(v.duration)]
 							})]
-						}), /* @__PURE__ */ d("p", {
+						}), /* @__PURE__ */ f("p", {
 							className: "text-sm text-text-secondary mt-2",
 							children: [
-								m("billing.plans.billed", "Billed"),
+								u("billing.plans.billed", "Billed"),
 								" ",
-								_.duration === "monthly" ? m("billing.plans.everyMonth", "every month") : m("billing.plans.annually", "annually")
+								v.duration === "monthly" ? u("billing.plans.everyMonth", "every month") : u("billing.plans.annually", "annually")
 							]
 						})]
 					})]
-				}), /* @__PURE__ */ d("div", {
-					className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
-					children: [/* @__PURE__ */ u("div", {
-						className: "p-6 border-b border-border-subtle bg-bg-sunken",
-						children: /* @__PURE__ */ d("h2", {
+				}), /* @__PURE__ */ f("div", {
+					className: "border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
+					children: [/* @__PURE__ */ d("div", {
+						className: "p-6 border-b border-border-seam bg-bg-sunken",
+						children: /* @__PURE__ */ f("h2", {
 							className: "text-lg font-semibold text-text-primary",
 							children: [
-								m("billing.plans.featuresAndQuotas", "Features & Quotas"),
+								u("billing.plans.featuresAndQuotas", "Features & Quotas"),
 								" (",
-								x.length,
+								S.length,
 								")"
 							]
 						})
-					}), /* @__PURE__ */ u("div", {
+					}), /* @__PURE__ */ d("div", {
 						className: "p-6",
-						children: x.length === 0 ? /* @__PURE__ */ u("p", {
+						children: S.length === 0 ? /* @__PURE__ */ d("p", {
 							className: "text-sm text-text-secondary",
-							children: m("billing.plans.noFeatures", "No features configured for this plan.")
-						}) : /* @__PURE__ */ u("ul", {
-							className: "space-y-3",
-							children: x.map((e) => /* @__PURE__ */ d("li", {
-								className: "flex items-start gap-3 p-3 rounded-lg bg-bg-sunken",
-								children: [/* @__PURE__ */ u("div", {
-									className: "size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0",
-									children: /* @__PURE__ */ u("svg", {
-										className: "size-4 text-status-success-text",
-										fill: "none",
-										viewBox: "0 0 24 24",
-										stroke: "currentColor",
-										children: /* @__PURE__ */ u("path", {
-											strokeLinecap: "round",
-											strokeLinejoin: "round",
-											strokeWidth: 2,
-											d: "M5 13l4 4L19 7"
-										})
-									})
-								}), /* @__PURE__ */ d("div", {
-									className: "flex-1",
+							children: u("billing.plans.noFeatures", "No features configured for this plan.")
+						}) : /* @__PURE__ */ d(h, {
+							when: S.length > 4,
+							collapsedHeight: 280,
+							children: /* @__PURE__ */ d("ul", {
+								className: "space-y-3",
+								children: S.map((e) => /* @__PURE__ */ f("li", {
+									className: "flex items-start gap-3 p-3 rounded-lg bg-bg-sunken",
 									children: [/* @__PURE__ */ d("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ u("p", {
-											className: "font-medium text-text-primary",
-											children: e.name
-										}), /* @__PURE__ */ u("span", {
-											className: "font-semibold text-text-primary",
-											children: e.totalValue.toLocaleString()
-										})]
-									}), /* @__PURE__ */ d("div", {
-										className: "flex items-center gap-2 mt-1",
-										children: [/* @__PURE__ */ d("span", {
-											className: "text-sm text-text-secondary capitalize",
-											children: ["Type: ", e.limitType]
-										}), e.quotaType && /* @__PURE__ */ u("span", {
-											className: "px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded",
-											children: e.quotaType
+										className: "size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0",
+										children: /* @__PURE__ */ d("svg", {
+											className: "size-4 text-status-success-text",
+											fill: "none",
+											viewBox: "0 0 24 24",
+											stroke: "currentColor",
+											children: /* @__PURE__ */ d("path", {
+												strokeLinecap: "round",
+												strokeLinejoin: "round",
+												strokeWidth: 2,
+												d: "M5 13l4 4L19 7"
+											})
+										})
+									}), /* @__PURE__ */ f("div", {
+										className: "flex-1",
+										children: [/* @__PURE__ */ f("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ d("p", {
+												className: "font-medium text-text-primary",
+												children: e.name
+											}), /* @__PURE__ */ d("span", {
+												className: "font-semibold text-text-primary",
+												children: e.totalValue.toLocaleString()
+											})]
+										}), /* @__PURE__ */ f("div", {
+											className: "flex items-center gap-2 mt-1",
+											children: [/* @__PURE__ */ f("span", {
+												className: "text-sm text-text-secondary capitalize",
+												children: ["Type: ", e.limitType]
+											}), e.quotaType && /* @__PURE__ */ d("span", {
+												className: "px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded",
+												children: e.quotaType
+											})]
 										})]
 									})]
-								})]
-							}, e.quotaId))
+								}, e.quotaId))
+							})
 						})
 					})]
 				})]
-			}), /* @__PURE__ */ d("div", {
-				className: "space-y-6",
-				children: [/* @__PURE__ */ d("div", {
-					className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
-					children: [/* @__PURE__ */ u("div", {
-						className: "p-6 border-b border-border-subtle bg-bg-sunken",
-						children: /* @__PURE__ */ u("h2", {
+			}), /* @__PURE__ */ f("div", {
+				className: "space-y-6 lg:sticky lg:top-6 lg:self-start",
+				children: [/* @__PURE__ */ f("div", {
+					className: "border border-border-seam rounded-card bg-bg-surface bg-accent-wash shadow-[var(--shadow-pop)] overflow-hidden",
+					children: [/* @__PURE__ */ d("div", {
+						className: "p-6 border-b border-border-seam bg-bg-sunken",
+						children: /* @__PURE__ */ d("h2", {
 							className: "text-lg font-semibold text-text-primary",
-							children: m("billing.plans.subscribeTitle", "Subscribe")
+							children: u("billing.plans.subscribeTitle", "Subscribe")
 						})
-					}), /* @__PURE__ */ d("div", {
+					}), /* @__PURE__ */ f("div", {
 						className: "p-6 space-y-4",
 						children: [
-							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
 								className: "text-sm text-text-secondary",
-								children: m("billing.plans.price", "Price")
-							}), /* @__PURE__ */ d("p", {
+								children: u("billing.plans.price", "Price")
+							}), /* @__PURE__ */ f("p", {
 								className: "text-sm font-medium text-text-primary mt-0.5",
 								children: [
-									t(_.price, _.currency),
+									t(v.price, v.currency),
 									" / ",
-									n(_.duration)
+									n(v.duration)
 								]
 							})] }),
-							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
 								className: "text-sm text-text-secondary",
-								children: m("billing.plans.billingPeriod", "Billing Period")
-							}), /* @__PURE__ */ u("p", {
+								children: u("billing.plans.billingPeriod", "Billing Period")
+							}), /* @__PURE__ */ d("p", {
 								className: "text-sm text-text-primary mt-0.5",
-								children: r(_.duration)
+								children: r(v.duration)
 							})] }),
-							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
 								className: "text-sm text-text-secondary",
-								children: m("billing.plans.quotasIncluded", "Quotas Included")
-							}), /* @__PURE__ */ u("p", {
+								children: u("billing.plans.quotasIncluded", "Quotas Included")
+							}), /* @__PURE__ */ d("p", {
 								className: "text-sm font-medium text-text-primary mt-0.5",
-								children: x.length
+								children: S.length
 							})] }),
-							/* @__PURE__ */ u("button", {
+							/* @__PURE__ */ d("button", {
 								type: "button",
-								onClick: () => g(`/checkout/${_.id}`),
+								onClick: () => _(`/checkout/${v.id}`),
 								className: "w-full px-4 py-2.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
 								children: "Subscribe to Plan"
 							})
 						]
 					})]
-				}), /* @__PURE__ */ u("button", {
+				}), /* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: () => g("/plans"),
+					onClick: () => _("/plans"),
 					className: "w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 					children: "Back to Plans"
 				})]
 			})]
 		})]
-	}) : /* @__PURE__ */ u("div", {
+	}) : /* @__PURE__ */ d("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ d("div", {
+		children: /* @__PURE__ */ f("div", {
 			className: "text-center space-y-4",
 			children: [
-				/* @__PURE__ */ u("h2", {
+				/* @__PURE__ */ d("h2", {
 					className: "text-lg font-semibold text-text-primary",
-					children: m("billing.plans.planNotFound", "Plan not found")
+					children: u("billing.plans.planNotFound", "Plan not found")
 				}),
-				/* @__PURE__ */ u("p", {
+				/* @__PURE__ */ d("p", {
 					className: "text-sm text-text-secondary",
-					children: y?.message || m("billing.plans.planNotFoundMessage", "The plan you are looking for does not exist.")
+					children: b?.message || u("billing.plans.planNotFoundMessage", "The plan you are looking for does not exist.")
 				}),
-				/* @__PURE__ */ u("button", {
+				/* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: () => g("/plans"),
+					onClick: () => _("/plans"),
 					className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
 					children: "Back to Plans"
 				})
@@ -265,6 +274,6 @@ var m = () => {
 	});
 };
 //#endregion
-export { m as PlanBrowseDetailPage };
+export { _ as PlanBrowseDetailPage };
 
 //# sourceMappingURL=PlanBrowseDetailPage.js.map

package/dist/billing/modules/plans/pages/PlanBrowseDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlanBrowseDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanBrowseDetailPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Browse Detail Page (User-facing)\n * View plan details and subscribe. No edit/toggle actions.\n */\n\nimport { type FC, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan } from '../hooks';\nimport { ServerError } from '../../../shared/components';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n  getPlanFeatureQuantity,\n  isServerError,\n} from '../../../shared/utils';\nimport type { PlanFeature } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  quotaType: string;\n  limitType: string;\n  totalValue: number;\n}\n\nfunction combineQuotas(features: PlanFeature[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n  for (const feature of features) {\n    if (!feature.quota) continue;\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { type?: string; value?: number } | null;\n    const limitType = limits?.type ?? 'unknown';\n    const limitValue = getPlanFeatureQuantity(feature);\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        quotaType: feature.quota.quotaType ?? '',\n        limitType,\n        totalValue: limitValue,\n      });\n    }\n  }\n  return Array.from(quotaMap.values());\n}\n\nexport const PlanBrowseDetailPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const { planId } = useParams<{ planId: string }>();\n  const navigateTo = useBillingNavigate();\n  const { plan, isLoading, error, refetch } = usePlan(planId);\n\n  const combinedQuotas = useMemo(() => combineQuotas(plan?.features || []), [plan?.features]);\n\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-bg-sunken animate-pulse rounded\" />\n          <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          </div>\n          <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n            <div className=\"h-10 w-full bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title={tr('billing.plans.serverUnavailable', 'Server Unavailable')}\n          message={tr('billing.plans.unableToLoadPlanDetails', 'Unable to load plan details.')}\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  if (!plan) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.plans.planNotFound', 'Plan not found')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {error?.message ||\n              tr(\n                'billing.plans.planNotFoundMessage',\n                'The plan you are looking for does not exist.'\n              )}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n              {plan.name}\n            </h1>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {formatPlanDurationLabel(plan.duration)} billing plan\n            </p>\n          </div>\n        </div>\n\n        <button\n          type=\"button\"\n          onClick={() => navigateTo(`/checkout/${plan.id}`)}\n          className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n        >\n          Subscribe to Plan\n        </button>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Pricing Card */}\n          <div className=\"border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.pricing', 'Pricing')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-4xl font-bold text-text-primary\">\n                  {formatCurrency(plan.price, plan.currency)}\n                </span>\n                <span className=\"text-lg text-text-secondary\">\n                  / {formatPlanDuration(plan.duration)}\n                </span>\n              </div>\n              <p className=\"text-sm text-text-secondary mt-2\">\n                {tr('billing.plans.billed', 'Billed')}{' '}\n                {plan.duration === 'monthly'\n                  ? tr('billing.plans.everyMonth', 'every month')\n                  : tr('billing.plans.annually', 'annually')}\n              </p>\n            </div>\n          </div>\n\n          {/* Features Card */}\n          <div className=\"border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.featuresAndQuotas', 'Features & Quotas')} (\n                {combinedQuotas.length})\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              {combinedQuotas.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.noFeatures', 'No features configured for this plan.')}\n                </p>\n              ) : (\n                <ul className=\"space-y-3\">\n                  {combinedQuotas.map((quota) => (\n                    <li\n                      key={quota.quotaId}\n                      className=\"flex items-start gap-3 p-3 rounded-lg bg-bg-sunken\"\n                    >\n                      <div className=\"size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0\">\n                        <svg\n                          className=\"size-4 text-status-success-text\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M5 13l4 4L19 7\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"flex-1\">\n                        <div className=\"flex items-center justify-between\">\n                          <p className=\"font-medium text-text-primary\">{quota.name}</p>\n                          <span className=\"font-semibold text-text-primary\">\n                            {quota.totalValue.toLocaleString()}\n                          </span>\n                        </div>\n                        <div className=\"flex items-center gap-2 mt-1\">\n                          <span className=\"text-sm text-text-secondary capitalize\">\n                            Type: {quota.limitType}\n                          </span>\n                          {quota.quotaType && (\n                            <span className=\"px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded\">\n                              {quota.quotaType}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Subscribe Card */}\n          <div className=\"border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.subscribeTitle', 'Subscribe')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-text-secondary\">{tr('billing.plans.price', 'Price')}</p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {formatCurrency(plan.price, plan.currency)} / {formatPlanDuration(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.billingPeriod', 'Billing Period')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatPlanDurationLabel(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.quotasIncluded', 'Quotas Included')}\n                </p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {combinedQuotas.length}\n                </p>\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => navigateTo(`/checkout/${plan.id}`)}\n                className=\"w-full px-4 py-2.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n              >\n                Subscribe to Plan\n              </button>\n            </div>\n          </div>\n\n          {/* Back */}\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PlanBrowseDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanBrowseDetailPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Browse Detail Page (User-facing)\n * View plan details and subscribe. No edit/toggle actions.\n */\n\nimport { type FC, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan } from '../hooks';\nimport { ServerError } from '../../../shared/components';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n  getPlanFeatureQuantity,\n  isServerError,\n} from '../../../shared/utils';\nimport type { PlanFeature } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { ShowMore } from '@burdenoff/fe-libs/ui';\nimport type { ReactNode } from 'react';\n\n/** Wraps children in a ShowMore progressive-disclosure region only when `when` is true. */\nconst ShowMoreIf: FC<{ when: boolean; collapsedHeight?: number; children: ReactNode }> = ({\n  when,\n  collapsedHeight,\n  children,\n}) => (when ? <ShowMore collapsedHeight={collapsedHeight}>{children}</ShowMore> : <>{children}</>);\n\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  quotaType: string;\n  limitType: string;\n  totalValue: number;\n}\n\nfunction combineQuotas(features: PlanFeature[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n  for (const feature of features) {\n    if (!feature.quota) continue;\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { type?: string; value?: number } | null;\n    const limitType = limits?.type ?? 'unknown';\n    const limitValue = getPlanFeatureQuantity(feature);\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        quotaType: feature.quota.quotaType ?? '',\n        limitType,\n        totalValue: limitValue,\n      });\n    }\n  }\n  return Array.from(quotaMap.values());\n}\n\nexport const PlanBrowseDetailPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const { planId } = useParams<{ planId: string }>();\n  const navigateTo = useBillingNavigate();\n  const { plan, isLoading, error, refetch } = usePlan(planId);\n\n  const combinedQuotas = useMemo(() => combineQuotas(plan?.features || []), [plan?.features]);\n\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-bg-sunken animate-pulse rounded\" />\n          <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          </div>\n          <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n            <div className=\"h-10 w-full bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title={tr('billing.plans.serverUnavailable', 'Server Unavailable')}\n          message={tr('billing.plans.unableToLoadPlanDetails', 'Unable to load plan details.')}\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  if (!plan) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.plans.planNotFound', 'Plan not found')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {error?.message ||\n              tr(\n                'billing.plans.planNotFoundMessage',\n                'The plan you are looking for does not exist.'\n              )}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n              {plan.name}\n            </h1>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {formatPlanDurationLabel(plan.duration)} billing plan\n            </p>\n          </div>\n        </div>\n\n        <button\n          type=\"button\"\n          onClick={() => navigateTo(`/checkout/${plan.id}`)}\n          className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n        >\n          Subscribe to Plan\n        </button>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Pricing Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n            <div className=\"p-6 border-b border-border-seam bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.pricing', 'Pricing')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-4xl font-bold text-text-primary\">\n                  {formatCurrency(plan.price, plan.currency)}\n                </span>\n                <span className=\"text-lg text-text-secondary\">\n                  / {formatPlanDuration(plan.duration)}\n                </span>\n              </div>\n              <p className=\"text-sm text-text-secondary mt-2\">\n                {tr('billing.plans.billed', 'Billed')}{' '}\n                {plan.duration === 'monthly'\n                  ? tr('billing.plans.everyMonth', 'every month')\n                  : tr('billing.plans.annually', 'annually')}\n              </p>\n            </div>\n          </div>\n\n          {/* Features Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n            <div className=\"p-6 border-b border-border-seam bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.featuresAndQuotas', 'Features & Quotas')} (\n                {combinedQuotas.length})\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              {combinedQuotas.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.noFeatures', 'No features configured for this plan.')}\n                </p>\n              ) : (\n                <ShowMoreIf when={combinedQuotas.length > 4} collapsedHeight={280}>\n                  <ul className=\"space-y-3\">\n                  {combinedQuotas.map((quota) => (\n                    <li\n                      key={quota.quotaId}\n                      className=\"flex items-start gap-3 p-3 rounded-lg bg-bg-sunken\"\n                    >\n                      <div className=\"size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0\">\n                        <svg\n                          className=\"size-4 text-status-success-text\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M5 13l4 4L19 7\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"flex-1\">\n                        <div className=\"flex items-center justify-between\">\n                          <p className=\"font-medium text-text-primary\">{quota.name}</p>\n                          <span className=\"font-semibold text-text-primary\">\n                            {quota.totalValue.toLocaleString()}\n                          </span>\n                        </div>\n                        <div className=\"flex items-center gap-2 mt-1\">\n                          <span className=\"text-sm text-text-secondary capitalize\">\n                            Type: {quota.limitType}\n                          </span>\n                          {quota.quotaType && (\n                            <span className=\"px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded\">\n                              {quota.quotaType}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    </li>\n                  ))}\n                  </ul>\n                </ShowMoreIf>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6 lg:sticky lg:top-6 lg:self-start\">\n          {/* Subscribe Card — primary emphasis zone */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface bg-accent-wash shadow-[var(--shadow-pop)] overflow-hidden\">\n            <div className=\"p-6 border-b border-border-seam bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.subscribeTitle', 'Subscribe')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-text-secondary\">{tr('billing.plans.price', 'Price')}</p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {formatCurrency(plan.price, plan.currency)} / {formatPlanDuration(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.billingPeriod', 'Billing Period')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatPlanDurationLabel(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.quotasIncluded', 'Quotas Included')}\n                </p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {combinedQuotas.length}\n                </p>\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => navigateTo(`/checkout/${plan.id}`)}\n                className=\"w-full px-4 py-2.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n              >\n                Subscribe to Plan\n              </button>\n            </div>\n          </div>\n\n          {/* Back */}\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/plans/pages/PlanCreatePage.js

@@ -107,7 +107,7 @@ var p = () => {
 				/* @__PURE__ */ d("div", {
 					className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
 					children: [/* @__PURE__ */ d("div", {
-						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
+						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
 						children: [/* @__PURE__ */ u("div", {
 							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 							children: /* @__PURE__ */ u("h2", {
@@ -248,7 +248,7 @@ var p = () => {
 							]
 						})]
 					}), /* @__PURE__ */ d("div", {
-						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
+						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
 						children: [/* @__PURE__ */ d("div", {
 							className: "p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between",
 							children: [/* @__PURE__ */ d("h2", {