@burdenoff/microfe-billing 2026.828.4 → 2026.830.1

package/dist/billing/modules/addons/pages/AddonCreatePage.js

@@ -265,7 +265,7 @@ var h = () => {
 									className: "text-sm text-text-muted",
 									children: g("billing.addons.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
 								}) : F.map((e, t) => {
-									let n = y.find((t) => t.id === e.quotaId), r = n?.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = i * e.quantity;
+									let n = y.find((t) => t.id === e.quotaId), r = n?.limits?.type ?? "unknown";
 									return /* @__PURE__ */ f("div", {
 										className: "p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3",
 										children: [/* @__PURE__ */ f("div", {
@@ -302,50 +302,21 @@ var h = () => {
 											})]
 										}), n && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
 											className: "flex items-center justify-between text-sm",
-											children: /* @__PURE__ */ f("div", {
-												className: "text-text-muted",
-												children: [
-													/* @__PURE__ */ f("span", {
-														className: "capitalize",
-														children: ["Type: ", a]
-													}),
-													/* @__PURE__ */ d("span", {
-														className: "mx-2",
-														children: "•"
-													}),
-													/* @__PURE__ */ f("span", { children: [
-														"Value per unit:",
-														" ",
-														/* @__PURE__ */ d("span", {
-															className: "font-medium text-text-primary",
-															children: i.toLocaleString()
-														})
-													] })
-												]
+											children: /* @__PURE__ */ f("span", {
+												className: "capitalize text-text-muted",
+												children: ["Type: ", r]
 											})
 										}), /* @__PURE__ */ f("div", {
-											className: "flex items-center gap-4",
-											children: [/* @__PURE__ */ f("div", {
-												className: "flex items-center gap-2",
-												children: [/* @__PURE__ */ f("label", {
-													className: "text-sm text-text-muted",
-													children: [g("billing.addons.quantity", "Quantity"), ":"]
-												}), /* @__PURE__ */ d("input", {
-													type: "number",
-													min: "1",
-													value: e.quantity,
-													onChange: (e) => G(t, "quantity", e.target.value),
-													className: "w-24 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center"
-												})]
-											}), /* @__PURE__ */ f("div", {
-												className: "flex items-center gap-2 text-sm",
-												children: [/* @__PURE__ */ d("span", {
-													className: "text-text-muted",
-													children: "="
-												}), /* @__PURE__ */ f("span", {
-													className: "font-semibold text-status-success-text",
-													children: [o.toLocaleString(), " total"]
-												})]
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ f("label", {
+												className: "text-sm text-text-muted",
+												children: [g("billing.addons.limit", "Limit"), ":"]
+											}), /* @__PURE__ */ d("input", {
+												type: "number",
+												min: "1",
+												value: e.quantity,
+												onChange: (e) => G(t, "quantity", e.target.value),
+												className: "w-36 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center"
 											})]
 										})] })]
 									}, t);

package/dist/billing/modules/addons/pages/AddonCreatePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddonCreatePage.js","names":[],"sources":["../../../../../src/billing/modules/addons/pages/AddonCreatePage.tsx"],"sourcesContent":["/**\n * Addons Module - Addon Create Page\n * Form to create a new addon\n */\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useAddonMutations } from '../hooks';\nimport { useQuotas } from '../../plans/hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useProducts } from '../../../hooks/useProducts';\nimport { AccessDenied, CurrencyPriceOverridesEditor, PageHeader } from '../../../shared/components';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport {\n  PlanDuration,\n  type CreateAddonInput,\n  type CurrencyPriceOverrideInput,\n} from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface QuotaAllocation {\n  quotaId: string;\n  quantity: number;\n}\n\nexport const AddonCreatePage: 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 navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { quotas, isLoading: isQuotasLoading } = useQuotas({ onlyActive: true });\n  const { products, isLoading: isProductsLoading } = useProducts();\n  const { createAddon, isCreating } = useAddonMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [price, setPrice] = useState('');\n  const [currency, setCurrency] = useState('USD');\n  const [duration, setDuration] = useState<PlanDuration>(PlanDuration.MONTHLY);\n  const [productId, setProductId] = useState('');\n  const [quotaAllocations, setQuotaAllocations] = useState<QuotaAllocation[]>([]);\n  const [currencyPriceOverrides, setCurrencyPriceOverrides] = useState<\n    CurrencyPriceOverrideInput[]\n  >([]);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Permission check\n  if (!permissions.canManageAddons) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.addons.noCreatePermission',\n          \"You don't have permission to create addons.\"\n        )}\n      />\n    );\n  }\n\n  // Loading state\n  if (isQuotasLoading || isProductsLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"max-w-2xl space-y-4\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  const handleAddQuota = () => {\n    // Add new quota at the top with empty quotaId (placeholder)\n    setQuotaAllocations([{ quotaId: '', quantity: 1 }, ...quotaAllocations]);\n  };\n\n  const handleRemoveQuota = (index: number) => {\n    setQuotaAllocations(quotaAllocations.filter((_, i) => i !== index));\n  };\n\n  const handleQuotaChange = (\n    index: number,\n    field: 'quotaId' | 'quantity',\n    value: string | number\n  ) => {\n    const updated = [...quotaAllocations];\n    if (field === 'quotaId') {\n      updated[index].quotaId = value as string;\n    } else {\n      updated[index].quantity = Number(value);\n    }\n    setQuotaAllocations(updated);\n  };\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSuccess(false);\n\n    // Validation\n    if (!name.trim()) {\n      setError('Addon name is required');\n      return;\n    }\n    if (!price || isNaN(Number(price)) || Number(price) < 0) {\n      setError('Valid price is required');\n      return;\n    }\n    if (!productId.trim()) {\n      setError('Product ID is required');\n      return;\n    }\n    if (quotaAllocations.length === 0) {\n      setError('At least one quota is required');\n      return;\n    }\n    // Check for unselected quotas\n    const unselectedQuotas = quotaAllocations.filter((a) => a.quotaId === '');\n    if (unselectedQuotas.length > 0) {\n      setError('Please select a quota for all allocations');\n      return;\n    }\n\n    const input: CreateAddonInput = {\n      name: name.trim(),\n      price: Number(price),\n      currency,\n      duration,\n      productId: productId.trim(),\n      quotas: quotaAllocations.map((a) => ({\n        quotaId: a.quotaId,\n        quantity: a.quantity,\n      })),\n      ...(currencyPriceOverrides.length > 0 ? { currencyPriceOverrides } : {}),\n    };\n\n    try {\n      await createAddon(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo('/addons'), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to create addon');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={tr('billing.addons.createNewAddon', 'Create New Addon')}\n        description={tr('billing.addons.createNewAddonDesc', 'Set up a new addon with quotas')}\n      />\n\n      <PagePurpose>\n        {tr(\n          'billing.addons.createPurpose',\n          'Create an add-on that customers can buy on top of a subscription — extra seats, storage, usage credits and so on. Set its price (with optional per-currency overrides) and the quotas it grants, then make it available to purchase.'\n        )}\n      </PagePurpose>\n\n      <form onSubmit={handleSubmit} className=\"space-y-6\">\n        {/* Error/Success Messages */}\n        {error && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n        {success && (\n          <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-success-text\">\n              {tr('billing.addons.createSuccess', 'Addon created successfully! Redirecting...')}\n            </p>\n          </div>\n        )}\n\n        {/* Two-column layout on desktop */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Basic Info */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.addons.basicInfo', 'Basic Information')}\n              </h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              {/* Name */}\n              <div>\n                <label htmlFor=\"name\" className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('billing.addons.addonNameLabel', 'Addon Name')} *\n                </label>\n                <input\n                  id=\"name\"\n                  type=\"text\"\n                  value={name}\n                  onChange={(e) => setName(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                  placeholder={tr('billing.addons.addonNamePlaceholder', 'e.g., Extra Storage')}\n                  required\n                />\n              </div>\n\n              {/* Product */}\n              <div>\n                <label\n                  htmlFor=\"productId\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.addons.product', 'Product')} *\n                </label>\n                <select\n                  id=\"productId\"\n                  value={productId}\n                  onChange={(e) => setProductId(e.target.value)}\n                  disabled={products.length === 0}\n                  className={`w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] disabled:opacity-50 ${\n                    productId === '' ? 'text-text-muted' : 'text-text-primary'\n                  }`}\n                  required\n                >\n                  <option value=\"\" disabled>\n                    {tr('billing.addons.selectProduct', 'Select a product...')}\n                  </option>\n                  {products.map((product) => (\n                    <option key={product.id} value={product.id}>\n                      {product.name}\n                    </option>\n                  ))}\n                </select>\n                <p className=\"text-xs text-text-muted mt-1\">\n                  {products.length === 0\n                    ? tr('billing.addons.noProductsAvailable', 'No active products found.')\n                    : tr('billing.addons.productIdDesc', 'The product this addon belongs to')}\n                </p>\n              </div>\n\n              {/* Price & Currency */}\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <label\n                    htmlFor=\"price\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.addons.priceLabel', 'Price')} *\n                  </label>\n                  <input\n                    id=\"price\"\n                    type=\"number\"\n                    step=\"0.01\"\n                    min=\"0\"\n                    value={price}\n                    onChange={(e) => setPrice(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                    placeholder=\"9.99\"\n                    required\n                  />\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"currency\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.addons.currencyLabel', 'Currency')} *\n                  </label>\n                  <select\n                    id=\"currency\"\n                    value={currency}\n                    onChange={(e) => setCurrency(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                  >\n                    <option value=\"USD\">USD ($)</option>\n                    <option value=\"EUR\">EUR</option>\n                    <option value=\"GBP\">GBP</option>\n                    <option value=\"INR\">INR</option>\n                    <option value=\"AUD\">AUD</option>\n                    <option value=\"CAD\">CAD</option>\n                    <option value=\"JPY\">JPY</option>\n                    <option value=\"SGD\">SGD</option>\n                  </select>\n                </div>\n              </div>\n\n              {/* Duration */}\n              <div>\n                <label\n                  htmlFor=\"duration\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.addons.billingPeriodLabel', 'Billing Period')} *\n                </label>\n                <select\n                  id=\"duration\"\n                  value={duration}\n                  onChange={(e) => setDuration(e.target.value as PlanDuration)}\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                >\n                  <option value={PlanDuration.MONTHLY}>Monthly</option>\n                  <option value={PlanDuration.YEARLY}>Yearly</option>\n                </select>\n              </div>\n            </div>\n          </div>\n\n          {/* Quota Allocations */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.addons.quotaAllocations', 'Quota Allocations')} *\n              </h2>\n              <button\n                type=\"button\"\n                onClick={handleAddQuota}\n                disabled={quotas.length === 0}\n                className=\"px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors disabled:opacity-50\"\n              >\n                + Add Quota\n              </button>\n            </div>\n            <div className=\"p-4 space-y-3\">\n              {quotas.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.addons.noQuotasAvailable',\n                    'No quotas available. Please create quotas first.'\n                  )}\n                </p>\n              ) : quotaAllocations.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.addons.noQuotasAllocated',\n                    'No quotas allocated. Click \"Add Quota\" to add one.'\n                  )}\n                </p>\n              ) : (\n                quotaAllocations.map((allocation, index) => {\n                  const selectedQuota = quotas.find((q) => q.id === allocation.quotaId);\n                  const limits = selectedQuota?.limits as { type?: string; value?: number } | null;\n                  const limitValue = limits?.value ?? 0;\n                  const limitType = limits?.type ?? 'unknown';\n                  const totalValue = limitValue * allocation.quantity;\n\n                  return (\n                    <div\n                      key={index}\n                      className=\"p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3\"\n                    >\n                      <div className=\"flex items-center gap-3\">\n                        <select\n                          value={allocation.quotaId}\n                          onChange={(e) => handleQuotaChange(index, 'quotaId', e.target.value)}\n                          className={`flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${\n                            allocation.quotaId === '' ? 'text-text-muted' : 'text-text-primary'\n                          }`}\n                        >\n                          <option value=\"\" disabled>\n                            {tr('billing.addons.selectQuota', 'Select a quota...')}\n                          </option>\n                          {quotas.map((quota) => (\n                            <option key={quota.id} value={quota.id}>\n                              {quota.name}\n                            </option>\n                          ))}\n                        </select>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleRemoveQuota(index)}\n                          className=\"p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors\"\n                          title=\"Remove quota\"\n                        >\n                          <svg\n                            className=\"size-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=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                            />\n                          </svg>\n                        </button>\n                      </div>\n\n                      {/* Quota Info - only show when quota is selected */}\n                      {selectedQuota && (\n                        <>\n                          <div className=\"flex items-center justify-between text-sm\">\n                            <div className=\"text-text-muted\">\n                              <span className=\"capitalize\">Type: {limitType}</span>\n                              <span className=\"mx-2\">•</span>\n                              <span>\n                                Value per unit:{' '}\n                                <span className=\"font-medium text-text-primary\">\n                                  {limitValue.toLocaleString()}\n                                </span>\n                              </span>\n                            </div>\n                          </div>\n\n                          {/* Quantity & Total */}\n                          <div className=\"flex items-center gap-4\">\n                            <div className=\"flex items-center gap-2\">\n                              <label className=\"text-sm text-text-muted\">\n                                {tr('billing.addons.quantity', 'Quantity')}:\n                              </label>\n                              <input\n                                type=\"number\"\n                                min=\"1\"\n                                value={allocation.quantity}\n                                onChange={(e) =>\n                                  handleQuotaChange(index, 'quantity', e.target.value)\n                                }\n                                className=\"w-24 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center\"\n                              />\n                            </div>\n                            <div className=\"flex items-center gap-2 text-sm\">\n                              <span className=\"text-text-muted\">=</span>\n                              <span className=\"font-semibold text-status-success-text\">\n                                {totalValue.toLocaleString()} total\n                              </span>\n                            </div>\n                          </div>\n                        </>\n                      )}\n                    </div>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        </div>\n\n        <CurrencyPriceOverridesEditor\n          overrides={currencyPriceOverrides}\n          onChange={setCurrencyPriceOverrides}\n        />\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3 pt-4\">\n          <button\n            type=\"submit\"\n            disabled={isCreating || quotas.length === 0}\n            className=\"px-6 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\"\n          >\n            {isCreating\n              ? tr('billing.addons.creating', 'Creating...')\n              : tr('billing.addons.createAddonBtn', 'Create Addon')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/addons')}\n            className=\"px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            Cancel\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,IAAa,UAA4B;CACvC,IAAM,EAAE,SAAM,EAAQ,GAChB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,CAAG;EACxB,OAAO,MAAe,IAAM,IAAW;CACzC,GACM,IAAa,EAAmB,GAChC,IAAc,EAAsB,GACpC,EAAE,WAAQ,WAAW,MAAoB,EAAU,EAAE,YAAY,GAAK,CAAC,GACvE,EAAE,aAAU,WAAW,MAAsB,EAAY,GACzD,EAAE,gBAAa,kBAAe,EAAkB,GAGhD,CAAC,GAAM,KAAW,EAAS,EAAE,GAC7B,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAU,KAAe,EAAS,KAAK,GACxC,CAAC,GAAU,KAAe,EAAuB,EAAa,OAAO,GACrE,CAAC,GAAW,KAAgB,EAAS,EAAE,GACvC,CAAC,GAAkB,KAAuB,EAA4B,CAAC,CAAC,GACxE,CAAC,GAAwB,KAA6B,EAE1D,CAAC,CAAC,GACE,CAAC,GAAO,KAAY,EAAwB,IAAI,GAChD,CAAC,GAAS,KAAc,EAAS,EAAK;CAG5C,IAAI,CAAC,EAAY,iBACf,OACE,kBAAC,GAAD,EACE,SAAS,EACP,qCACA,6CACF,EACD,CAAA;CAKL,IAAI,KAAmB,GACrB,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAK,WAAU,8CAA+C,CAAA,GAC9D,kBAAC,OAAD;GAAK,WAAU;aACZ;IAAC;IAAG;IAAG;IAAG;IAAG;GAAC,EAAE,KAAK,MACpB,kBAAC,OAAD,EAAa,WAAU,0CAA2C,GAAxD,CAAwD,CACnE;EACE,CAAA,CACF;;CAIT,IAAM,UAAuB;EAE3B,EAAoB,CAAC;GAAE,SAAS;GAAI,UAAU;EAAE,GAAG,GAAG,CAAgB,CAAC;CACzE,GAEM,KAAqB,MAAkB;EAC3C,EAAoB,EAAiB,QAAQ,GAAG,MAAM,MAAM,CAAK,CAAC;CACpE,GAEM,KACJ,GACA,GACA,MACG;EACH,IAAM,IAAU,CAAC,GAAG,CAAgB;EAMpC,AALI,MAAU,YACZ,EAAQ,GAAO,UAAU,IAEzB,EAAQ,GAAO,WAAW,OAAO,CAAK,GAExC,EAAoB,CAAO;CAC7B;CAsDA,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,OAAO,EAAG,iCAAiC,kBAAkB;IAC7D,aAAa,EAAG,qCAAqC,gCAAgC;GACtF,CAAA;GAED,kBAAC,GAAD,EAAA,UACG,EACC,gCACA,sOACF,EACW,CAAA;GAEb,kBAAC,QAAD;IAAM,UAAU,OAlEQ,MAAiB;KAM3C,IALA,EAAE,eAAe,GACjB,EAAS,IAAI,GACb,EAAW,EAAK,GAGZ,CAAC,EAAK,KAAK,GAAG;MAChB,EAAS,wBAAwB;MACjC;KACF;KACA,IAAI,CAAC,KAAS,MAAM,OAAO,CAAK,CAAC,KAAK,OAAO,CAAK,IAAI,GAAG;MACvD,EAAS,yBAAyB;MAClC;KACF;KACA,IAAI,CAAC,EAAU,KAAK,GAAG;MACrB,EAAS,wBAAwB;MACjC;KACF;KACA,IAAI,EAAiB,WAAW,GAAG;MACjC,EAAS,gCAAgC;MACzC;KACF;KAGA,IADyB,EAAiB,QAAQ,MAAM,EAAE,YAAY,EAClE,EAAiB,SAAS,GAAG;MAC/B,EAAS,2CAA2C;MACpD;KACF;KAEA,IAAM,IAA0B;MAC9B,MAAM,EAAK,KAAK;MAChB,OAAO,OAAO,CAAK;MACnB;MACA;MACA,WAAW,EAAU,KAAK;MAC1B,QAAQ,EAAiB,KAAK,OAAO;OACnC,SAAS,EAAE;OACX,UAAU,EAAE;MACd,EAAE;MACF,GAAI,EAAuB,SAAS,IAAI,EAAE,0BAAuB,IAAI,CAAC;KACxE;KAEA,IAAI;MAIF,AAHA,MAAM,EAAY,CAAK,GACvB,EAAW,EAAI,GAEf,iBAAiB,EAAW,SAAS,GAAG,IAAI;KAC9C,SAAS,GAAK;MACZ,EAAS,aAAe,QAAQ,EAAI,UAAU,wBAAwB;KACxE;IACF;IAgBkC,WAAU;cAAxC;KAEG,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,KAAD;OAAG,WAAU;iBAAkC;MAAS,CAAA;KACrD,CAAA;KAEN,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAG,gCAAgC,4CAA4C;MAC/E,CAAA;KACA,CAAA;KAIP,kBAAC,OAAD;MAAK,WAAU;gBAAf,CAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,4BAA4B,mBAAmB;QACjD,CAAA;OACD,CAAA,GACL,kBAAC,OAAD;QAAK,WAAU;kBAAf;SAEE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,SAAQ;UAAO,WAAU;oBAAhC,CACG,EAAG,iCAAiC,YAAY,GAAE,IAC9C;aACP,kBAAC,SAAD;UACE,IAAG;UACH,MAAK;UACL,OAAO;UACP,WAAW,MAAM,EAAQ,EAAE,OAAO,KAAK;UACvC,WAAU;UACV,aAAa,EAAG,uCAAuC,qBAAqB;UAC5E,UAAA;SACD,CAAA,CACE,EAAA,CAAA;SAGL,kBAAC,OAAD,EAAA,UAAA;UACE,kBAAC,SAAD;WACE,SAAQ;WACR,WAAU;qBAFZ,CAIG,EAAG,0BAA0B,SAAS,GAAE,IACpC;;UACP,kBAAC,UAAD;WACE,IAAG;WACH,OAAO;WACP,WAAW,MAAM,EAAa,EAAE,OAAO,KAAK;WAC5C,UAAU,EAAS,WAAW;WAC9B,WAAW,qKACT,MAAc,KAAK,oBAAoB;WAEzC,UAAA;qBARF,CAUE,kBAAC,UAAD;YAAQ,OAAM;YAAG,UAAA;sBACd,EAAG,gCAAgC,qBAAqB;WACnD,CAAA,GACP,EAAS,KAAK,MACb,kBAAC,UAAD;YAAyB,OAAO,EAAQ;sBACrC,EAAQ;WACH,GAFK,EAAQ,EAEb,CACT,CACK;;UACR,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAS,WAAW,IACjB,EAAG,sCAAsC,2BAA2B,IACpE,EAAG,gCAAgC,mCAAmC;UACzE,CAAA;SACA,EAAA,CAAA;SAGL,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;WACE,SAAQ;WACR,WAAU;qBAFZ,CAIG,EAAG,6BAA6B,OAAO,GAAE,IACrC;cACP,kBAAC,SAAD;WACE,IAAG;WACH,MAAK;WACL,MAAK;WACL,KAAI;WACJ,OAAO;WACP,WAAW,MAAM,EAAS,EAAE,OAAO,KAAK;WACxC,WAAU;WACV,aAAY;WACZ,UAAA;UACD,CAAA,CACE,EAAA,CAAA,GACL,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;WACE,SAAQ;WACR,WAAU;qBAFZ,CAIG,EAAG,gCAAgC,UAAU,GAAE,IAC3C;cACP,kBAAC,UAAD;WACE,IAAG;WACH,OAAO;WACP,WAAW,MAAM,EAAY,EAAE,OAAO,KAAK;WAC3C,WAAU;qBAJZ;YAME,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAe,CAAA;YACnC,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;YAC/B,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;YAC/B,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;YAC/B,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;YAC/B,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;YAC/B,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;YAC/B,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;WACzB;YACL,EAAA,CAAA,CACF;;SAGL,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UACE,SAAQ;UACR,WAAU;oBAFZ,CAIG,EAAG,qCAAqC,gBAAgB,GAAE,IACtD;aACP,kBAAC,UAAD;UACE,IAAG;UACH,OAAO;UACP,WAAW,MAAM,EAAY,EAAE,OAAO,KAAqB;UAC3D,WAAU;oBAJZ,CAME,kBAAC,UAAD;WAAQ,OAAO,EAAa;qBAAS;UAAe,CAAA,GACpD,kBAAC,UAAD;WAAQ,OAAO,EAAa;qBAAQ;UAAc,CAAA,CAC5C;WACL,EAAA,CAAA;QACF;SACF;UAGL,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAAd,CACG,EAAG,mCAAmC,mBAAmB,GAAE,IAC1D;YACJ,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,UAAU,EAAO,WAAW;SAC5B,WAAU;mBACX;QAEO,CAAA,CACL;WACL,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAO,WAAW,IACjB,kBAAC,KAAD;SAAG,WAAU;mBACV,EACC,oCACA,kDACF;QACC,CAAA,IACD,EAAiB,WAAW,IAC9B,kBAAC,KAAD;SAAG,WAAU;mBACV,EACC,oCACA,sDACF;QACC,CAAA,IAEH,EAAiB,KAAK,GAAY,MAAU;SAC1C,IAAM,IAAgB,EAAO,MAAM,MAAM,EAAE,OAAO,EAAW,OAAO,GAC9D,IAAS,GAAe,QACxB,IAAa,GAAQ,SAAS,GAC9B,IAAY,GAAQ,QAAQ,WAC5B,IAAa,IAAa,EAAW;SAE3C,OACE,kBAAC,OAAD;UAEE,WAAU;oBAFZ,CAIE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,UAAD;YACE,OAAO,EAAW;YAClB,WAAW,MAAM,EAAkB,GAAO,WAAW,EAAE,OAAO,KAAK;YACnE,WAAW,iJACT,EAAW,YAAY,KAAK,oBAAoB;sBAJpD,CAOE,kBAAC,UAAD;aAAQ,OAAM;aAAG,UAAA;uBACd,EAAG,8BAA8B,mBAAmB;YAC/C,CAAA,GACP,EAAO,KAAK,MACX,kBAAC,UAAD;aAAuB,OAAO,EAAM;uBACjC,EAAM;YACD,GAFK,EAAM,EAEX,CACT,CACK;eACR,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,EAAkB,CAAK;YACtC,WAAU;YACV,OAAM;sBAEN,kBAAC,OAAD;aACE,WAAU;aACV,MAAK;aACL,SAAQ;aACR,QAAO;uBAEP,kBAAC,QAAD;cACE,eAAc;cACd,gBAAe;cACf,aAAa;cACb,GAAE;aACH,CAAA;YACE,CAAA;WACC,CAAA,CACL;cAGJ,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;WAAK,WAAU;qBACb,kBAAC,OAAD;YAAK,WAAU;sBAAf;aACE,kBAAC,QAAD;cAAM,WAAU;wBAAhB,CAA6B,UAAO,CAAgB;;aACpD,kBAAC,QAAD;cAAM,WAAU;wBAAO;aAAO,CAAA;aAC9B,kBAAC,QAAD,EAAA,UAAA;cAAM;cACY;cAChB,kBAAC,QAAD;eAAM,WAAU;yBACb,EAAW,eAAe;cACvB,CAAA;aACF,EAAA,CAAA;YACH;;UACF,CAAA,GAGL,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,SAAD;aAAO,WAAU;uBAAjB,CACG,EAAG,2BAA2B,UAAU,GAAE,GACtC;gBACP,kBAAC,SAAD;aACE,MAAK;aACL,KAAI;aACJ,OAAO,EAAW;aAClB,WAAW,MACT,EAAkB,GAAO,YAAY,EAAE,OAAO,KAAK;aAErD,WAAU;YACX,CAAA,CACE;eACL,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBAAkB;YAAO,CAAA,GACzC,kBAAC,QAAD;aAAM,WAAU;uBAAhB,CACG,EAAW,eAAe,GAAE,QACzB;cACH;aACF;YACL,EAAA,CAAA,CAED;YAnFE,CAmFF;QAET,CAAC;OAEA,CAAA,CACF;QACF;;KAEL,kBAAC,GAAD;MACE,WAAW;MACX,UAAU;KACX,CAAA;KAGD,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,MAAK;OACL,UAAU,KAAc,EAAO,WAAW;OAC1C,WAAU;iBAET,IACG,EAAG,2BAA2B,aAAa,IAC3C,EAAG,iCAAiC,cAAc;MAChD,CAAA,GACR,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAW,SAAS;OACnC,WAAU;iBACX;MAEO,CAAA,CACL;;IACD;;EACH;;AAET"}
+{"version":3,"file":"AddonCreatePage.js","names":[],"sources":["../../../../../src/billing/modules/addons/pages/AddonCreatePage.tsx"],"sourcesContent":["/**\n * Addons Module - Addon Create Page\n * Form to create a new addon\n */\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useAddonMutations } from '../hooks';\nimport { useQuotas } from '../../plans/hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useProducts } from '../../../hooks/useProducts';\nimport { AccessDenied, CurrencyPriceOverridesEditor, PageHeader } from '../../../shared/components';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport {\n  PlanDuration,\n  type CreateAddonInput,\n  type CurrencyPriceOverrideInput,\n} from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface QuotaAllocation {\n  quotaId: string;\n  quantity: number;\n}\n\nexport const AddonCreatePage: 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 navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { quotas, isLoading: isQuotasLoading } = useQuotas({ onlyActive: true });\n  const { products, isLoading: isProductsLoading } = useProducts();\n  const { createAddon, isCreating } = useAddonMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [price, setPrice] = useState('');\n  const [currency, setCurrency] = useState('USD');\n  const [duration, setDuration] = useState<PlanDuration>(PlanDuration.MONTHLY);\n  const [productId, setProductId] = useState('');\n  const [quotaAllocations, setQuotaAllocations] = useState<QuotaAllocation[]>([]);\n  const [currencyPriceOverrides, setCurrencyPriceOverrides] = useState<\n    CurrencyPriceOverrideInput[]\n  >([]);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Permission check\n  if (!permissions.canManageAddons) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.addons.noCreatePermission',\n          \"You don't have permission to create addons.\"\n        )}\n      />\n    );\n  }\n\n  // Loading state\n  if (isQuotasLoading || isProductsLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"max-w-2xl space-y-4\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  const handleAddQuota = () => {\n    // Add new quota at the top with empty quotaId (placeholder)\n    setQuotaAllocations([{ quotaId: '', quantity: 1 }, ...quotaAllocations]);\n  };\n\n  const handleRemoveQuota = (index: number) => {\n    setQuotaAllocations(quotaAllocations.filter((_, i) => i !== index));\n  };\n\n  const handleQuotaChange = (\n    index: number,\n    field: 'quotaId' | 'quantity',\n    value: string | number\n  ) => {\n    const updated = [...quotaAllocations];\n    if (field === 'quotaId') {\n      updated[index].quotaId = value as string;\n    } else {\n      updated[index].quantity = Number(value);\n    }\n    setQuotaAllocations(updated);\n  };\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSuccess(false);\n\n    // Validation\n    if (!name.trim()) {\n      setError('Addon name is required');\n      return;\n    }\n    if (!price || isNaN(Number(price)) || Number(price) < 0) {\n      setError('Valid price is required');\n      return;\n    }\n    if (!productId.trim()) {\n      setError('Product ID is required');\n      return;\n    }\n    if (quotaAllocations.length === 0) {\n      setError('At least one quota is required');\n      return;\n    }\n    // Check for unselected quotas\n    const unselectedQuotas = quotaAllocations.filter((a) => a.quotaId === '');\n    if (unselectedQuotas.length > 0) {\n      setError('Please select a quota for all allocations');\n      return;\n    }\n\n    const input: CreateAddonInput = {\n      name: name.trim(),\n      price: Number(price),\n      currency,\n      duration,\n      productId: productId.trim(),\n      quotas: quotaAllocations.map((a) => ({\n        quotaId: a.quotaId,\n        quantity: a.quantity,\n      })),\n      ...(currencyPriceOverrides.length > 0 ? { currencyPriceOverrides } : {}),\n    };\n\n    try {\n      await createAddon(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo('/addons'), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to create addon');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={tr('billing.addons.createNewAddon', 'Create New Addon')}\n        description={tr('billing.addons.createNewAddonDesc', 'Set up a new addon with quotas')}\n      />\n\n      <PagePurpose>\n        {tr(\n          'billing.addons.createPurpose',\n          'Create an add-on that customers can buy on top of a subscription — extra seats, storage, usage credits and so on. Set its price (with optional per-currency overrides) and the quotas it grants, then make it available to purchase.'\n        )}\n      </PagePurpose>\n\n      <form onSubmit={handleSubmit} className=\"space-y-6\">\n        {/* Error/Success Messages */}\n        {error && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n        {success && (\n          <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-success-text\">\n              {tr('billing.addons.createSuccess', 'Addon created successfully! Redirecting...')}\n            </p>\n          </div>\n        )}\n\n        {/* Two-column layout on desktop */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Basic Info */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.addons.basicInfo', 'Basic Information')}\n              </h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              {/* Name */}\n              <div>\n                <label htmlFor=\"name\" className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('billing.addons.addonNameLabel', 'Addon Name')} *\n                </label>\n                <input\n                  id=\"name\"\n                  type=\"text\"\n                  value={name}\n                  onChange={(e) => setName(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                  placeholder={tr('billing.addons.addonNamePlaceholder', 'e.g., Extra Storage')}\n                  required\n                />\n              </div>\n\n              {/* Product */}\n              <div>\n                <label\n                  htmlFor=\"productId\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.addons.product', 'Product')} *\n                </label>\n                <select\n                  id=\"productId\"\n                  value={productId}\n                  onChange={(e) => setProductId(e.target.value)}\n                  disabled={products.length === 0}\n                  className={`w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] disabled:opacity-50 ${\n                    productId === '' ? 'text-text-muted' : 'text-text-primary'\n                  }`}\n                  required\n                >\n                  <option value=\"\" disabled>\n                    {tr('billing.addons.selectProduct', 'Select a product...')}\n                  </option>\n                  {products.map((product) => (\n                    <option key={product.id} value={product.id}>\n                      {product.name}\n                    </option>\n                  ))}\n                </select>\n                <p className=\"text-xs text-text-muted mt-1\">\n                  {products.length === 0\n                    ? tr('billing.addons.noProductsAvailable', 'No active products found.')\n                    : tr('billing.addons.productIdDesc', 'The product this addon belongs to')}\n                </p>\n              </div>\n\n              {/* Price & Currency */}\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <label\n                    htmlFor=\"price\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.addons.priceLabel', 'Price')} *\n                  </label>\n                  <input\n                    id=\"price\"\n                    type=\"number\"\n                    step=\"0.01\"\n                    min=\"0\"\n                    value={price}\n                    onChange={(e) => setPrice(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                    placeholder=\"9.99\"\n                    required\n                  />\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"currency\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.addons.currencyLabel', 'Currency')} *\n                  </label>\n                  <select\n                    id=\"currency\"\n                    value={currency}\n                    onChange={(e) => setCurrency(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                  >\n                    <option value=\"USD\">USD ($)</option>\n                    <option value=\"EUR\">EUR</option>\n                    <option value=\"GBP\">GBP</option>\n                    <option value=\"INR\">INR</option>\n                    <option value=\"AUD\">AUD</option>\n                    <option value=\"CAD\">CAD</option>\n                    <option value=\"JPY\">JPY</option>\n                    <option value=\"SGD\">SGD</option>\n                  </select>\n                </div>\n              </div>\n\n              {/* Duration */}\n              <div>\n                <label\n                  htmlFor=\"duration\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.addons.billingPeriodLabel', 'Billing Period')} *\n                </label>\n                <select\n                  id=\"duration\"\n                  value={duration}\n                  onChange={(e) => setDuration(e.target.value as PlanDuration)}\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                >\n                  <option value={PlanDuration.MONTHLY}>Monthly</option>\n                  <option value={PlanDuration.YEARLY}>Yearly</option>\n                </select>\n              </div>\n            </div>\n          </div>\n\n          {/* Quota Allocations */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.addons.quotaAllocations', 'Quota Allocations')} *\n              </h2>\n              <button\n                type=\"button\"\n                onClick={handleAddQuota}\n                disabled={quotas.length === 0}\n                className=\"px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors disabled:opacity-50\"\n              >\n                + Add Quota\n              </button>\n            </div>\n            <div className=\"p-4 space-y-3\">\n              {quotas.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.addons.noQuotasAvailable',\n                    'No quotas available. Please create quotas first.'\n                  )}\n                </p>\n              ) : quotaAllocations.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.addons.noQuotasAllocated',\n                    'No quotas allocated. Click \"Add Quota\" to add one.'\n                  )}\n                </p>\n              ) : (\n                quotaAllocations.map((allocation, index) => {\n                  const selectedQuota = quotas.find((q) => q.id === allocation.quotaId);\n                  const limits = selectedQuota?.limits as { type?: string; value?: number } | null;\n                  const limitType = limits?.type ?? 'unknown';\n\n                  return (\n                    <div\n                      key={index}\n                      className=\"p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3\"\n                    >\n                      <div className=\"flex items-center gap-3\">\n                        <select\n                          value={allocation.quotaId}\n                          onChange={(e) => handleQuotaChange(index, 'quotaId', e.target.value)}\n                          className={`flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${\n                            allocation.quotaId === '' ? 'text-text-muted' : 'text-text-primary'\n                          }`}\n                        >\n                          <option value=\"\" disabled>\n                            {tr('billing.addons.selectQuota', 'Select a quota...')}\n                          </option>\n                          {quotas.map((quota) => (\n                            <option key={quota.id} value={quota.id}>\n                              {quota.name}\n                            </option>\n                          ))}\n                        </select>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleRemoveQuota(index)}\n                          className=\"p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors\"\n                          title=\"Remove quota\"\n                        >\n                          <svg\n                            className=\"size-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=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                            />\n                          </svg>\n                        </button>\n                      </div>\n\n                      {/* Quota Info - only show when quota is selected */}\n                      {selectedQuota && (\n                        <>\n                          <div className=\"flex items-center justify-between text-sm\">\n                            <span className=\"capitalize text-text-muted\">Type: {limitType}</span>\n                          </div>\n\n                          {/* Limit value — allocation.quantity is the absolute limit */}\n                          <div className=\"flex items-center gap-2\">\n                            <label className=\"text-sm text-text-muted\">\n                              {tr('billing.addons.limit', 'Limit')}:\n                            </label>\n                            <input\n                              type=\"number\"\n                              min=\"1\"\n                              value={allocation.quantity}\n                              onChange={(e) => handleQuotaChange(index, 'quantity', e.target.value)}\n                              className=\"w-36 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center\"\n                            />\n                          </div>\n                        </>\n                      )}\n                    </div>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        </div>\n\n        <CurrencyPriceOverridesEditor\n          overrides={currencyPriceOverrides}\n          onChange={setCurrencyPriceOverrides}\n        />\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3 pt-4\">\n          <button\n            type=\"submit\"\n            disabled={isCreating || quotas.length === 0}\n            className=\"px-6 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\"\n          >\n            {isCreating\n              ? tr('billing.addons.creating', 'Creating...')\n              : tr('billing.addons.createAddonBtn', 'Create Addon')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/addons')}\n            className=\"px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            Cancel\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -274,7 +274,7 @@ var m = () => {
 									className: "text-sm text-text-muted",
 									children: h("billing.plans.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
 								}) : P.map((e, t) => {
-									let n = v.find((t) => t.id === e.quotaId), r = n?.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = i * e.quantity;
+									let n = v.find((t) => t.id === e.quotaId), r = n?.limits?.type ?? "unknown";
 									return /* @__PURE__ */ d("div", {
 										className: "p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3",
 										children: [/* @__PURE__ */ d("div", {
@@ -311,50 +311,21 @@ var m = () => {
 											})]
 										}), n && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
 											className: "flex items-center justify-between text-sm",
-											children: /* @__PURE__ */ d("div", {
-												className: "text-text-muted",
-												children: [
-													/* @__PURE__ */ d("span", {
-														className: "capitalize",
-														children: ["Type: ", a]
-													}),
-													/* @__PURE__ */ u("span", {
-														className: "mx-2",
-														children: "•"
-													}),
-													/* @__PURE__ */ d("span", { children: [
-														"Value per unit:",
-														" ",
-														/* @__PURE__ */ u("span", {
-															className: "font-medium text-text-primary",
-															children: i.toLocaleString()
-														})
-													] })
-												]
+											children: /* @__PURE__ */ d("span", {
+												className: "capitalize text-text-muted",
+												children: ["Type: ", r]
 											})
 										}), /* @__PURE__ */ d("div", {
-											className: "flex items-center gap-4",
-											children: [/* @__PURE__ */ d("div", {
-												className: "flex items-center gap-2",
-												children: [/* @__PURE__ */ d("label", {
-													className: "text-sm text-text-muted",
-													children: [h("billing.plans.quantity", "Quantity"), ":"]
-												}), /* @__PURE__ */ u("input", {
-													type: "number",
-													min: "1",
-													value: e.quantity,
-													onChange: (e) => W(t, "quantity", e.target.value),
-													className: "w-24 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center"
-												})]
-											}), /* @__PURE__ */ d("div", {
-												className: "flex items-center gap-2 text-sm",
-												children: [/* @__PURE__ */ u("span", {
-													className: "text-text-muted",
-													children: "="
-												}), /* @__PURE__ */ d("span", {
-													className: "font-semibold text-status-success-text",
-													children: [o.toLocaleString(), " total"]
-												})]
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ d("label", {
+												className: "text-sm text-text-muted",
+												children: [h("billing.plans.limit", "Limit"), ":"]
+											}), /* @__PURE__ */ u("input", {
+												type: "number",
+												min: "1",
+												value: e.quantity,
+												onChange: (e) => W(t, "quantity", e.target.value),
+												className: "w-36 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center"
 											})]
 										})] })]
 									}, t);

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

@@ -1 +1 @@
-{"version":3,"file":"PlanCreatePage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanCreatePage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Create Page\n * Form to create a new plan\n */\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlanMutations, useQuotas } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, CurrencyPriceOverridesEditor, PageHeader } from '../../../shared/components';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport {\n  PlanDuration,\n  type CreatePlanInput,\n  type CurrencyPriceOverrideInput,\n} from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface QuotaAllocation {\n  quotaId: string;\n  quantity: number;\n}\n\nexport const PlanCreatePage: 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 navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { quotas, isLoading: isQuotasLoading } = useQuotas({ onlyActive: true });\n  const { createPlan, isCreating } = usePlanMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [price, setPrice] = useState('');\n  const [currency, setCurrency] = useState('USD');\n  const [duration, setDuration] = useState<PlanDuration>(PlanDuration.MONTHLY);\n  const [productId, setProductId] = useState('');\n  const [isPurchasable, setIsPurchasable] = useState(true);\n  const [quotaAllocations, setQuotaAllocations] = useState<QuotaAllocation[]>([]);\n  const [currencyPriceOverrides, setCurrencyPriceOverrides] = useState<\n    CurrencyPriceOverrideInput[]\n  >([]);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Permission check\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.plans.noCreatePermission',\n          \"You don't have permission to create plans.\"\n        )}\n      />\n    );\n  }\n\n  // Loading state\n  if (isQuotasLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"max-w-2xl space-y-4\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  const handleAddQuota = () => {\n    // Add new quota at the top with empty quotaId (placeholder)\n    setQuotaAllocations([{ quotaId: '', quantity: 1 }, ...quotaAllocations]);\n  };\n\n  const handleRemoveQuota = (index: number) => {\n    setQuotaAllocations(quotaAllocations.filter((_, i) => i !== index));\n  };\n\n  const handleQuotaChange = (\n    index: number,\n    field: 'quotaId' | 'quantity',\n    value: string | number\n  ) => {\n    const updated = [...quotaAllocations];\n    if (field === 'quotaId') {\n      updated[index].quotaId = value as string;\n    } else {\n      updated[index].quantity = Number(value);\n    }\n    setQuotaAllocations(updated);\n  };\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSuccess(false);\n\n    // Validation\n    if (!name.trim()) {\n      setError('Plan name is required');\n      return;\n    }\n    if (!price || isNaN(Number(price)) || Number(price) < 0) {\n      setError('Valid price is required');\n      return;\n    }\n    if (!productId.trim()) {\n      setError('Product ID is required');\n      return;\n    }\n    if (quotaAllocations.length === 0) {\n      setError('At least one quota is required');\n      return;\n    }\n    // Check for unselected quotas\n    const unselectedQuotas = quotaAllocations.filter((a) => a.quotaId === '');\n    if (unselectedQuotas.length > 0) {\n      setError('Please select a quota for all allocations');\n      return;\n    }\n\n    const input: CreatePlanInput = {\n      name: name.trim(),\n      price: Number(price),\n      currency,\n      duration,\n      productId: productId.trim(),\n      isPurchasable,\n      quotas: quotaAllocations.map((a) => ({\n        quotaId: a.quotaId,\n        quantity: a.quantity,\n      })),\n      ...(currencyPriceOverrides.length > 0 ? { currencyPriceOverrides } : {}),\n    };\n\n    try {\n      await createPlan(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo('/plans'), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to create plan');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={tr('billing.plans.createNewPlan', 'Create New Plan')}\n        description={tr('billing.plans.createNewPlanDesc', 'Set up a new pricing plan with quotas')}\n      />\n\n      <PagePurpose>\n        {tr(\n          'billing.plans.createPurpose',\n          'Define a new subscription tier customers can buy — its price and billing period, optional per-currency and per-seat pricing, and the quotas it includes. Once active, it appears on the Plans page for purchase.'\n        )}\n      </PagePurpose>\n\n      <form onSubmit={handleSubmit} className=\"space-y-6\">\n        {/* Error/Success Messages */}\n        {error && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n        {success && (\n          <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-success-text\">\n              {tr('billing.plans.createSuccess', 'Plan created successfully! Redirecting...')}\n            </p>\n          </div>\n        )}\n\n        {/* Two-column layout on desktop */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Basic Info */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.plans.basicInfo', 'Basic Information')}\n              </h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              {/* Name */}\n              <div>\n                <label htmlFor=\"name\" className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('billing.plans.planNameLabel', 'Plan Name')} *\n                </label>\n                <input\n                  id=\"name\"\n                  type=\"text\"\n                  value={name}\n                  onChange={(e) => setName(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                  placeholder={tr('billing.plans.planNamePlaceholder', 'e.g., Pro Plan')}\n                  required\n                />\n              </div>\n\n              {/* Product ID */}\n              <div>\n                <label\n                  htmlFor=\"productId\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.plans.productId', 'Product ID')} *\n                </label>\n                <input\n                  id=\"productId\"\n                  type=\"text\"\n                  value={productId}\n                  onChange={(e) => setProductId(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                  placeholder={tr('billing.plans.productIdPlaceholder', 'e.g., prod_abc123')}\n                  required\n                />\n                <p className=\"text-xs text-text-muted mt-1\">\n                  {tr('billing.plans.productIdDesc', 'The product this plan belongs to')}\n                </p>\n              </div>\n\n              {/* Price & Currency */}\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <label\n                    htmlFor=\"price\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.plans.priceLabel', 'Price')} *\n                  </label>\n                  <input\n                    id=\"price\"\n                    type=\"number\"\n                    step=\"0.01\"\n                    min=\"0\"\n                    value={price}\n                    onChange={(e) => setPrice(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                    placeholder=\"49.99\"\n                    required\n                  />\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"currency\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.plans.currencyLabel', 'Currency')} *\n                  </label>\n                  <select\n                    id=\"currency\"\n                    value={currency}\n                    onChange={(e) => setCurrency(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                  >\n                    <option value=\"USD\">USD ($)</option>\n                    <option value=\"EUR\">EUR</option>\n                    <option value=\"GBP\">GBP</option>\n                    <option value=\"INR\">INR</option>\n                    <option value=\"AUD\">AUD</option>\n                    <option value=\"CAD\">CAD</option>\n                    <option value=\"JPY\">JPY</option>\n                    <option value=\"SGD\">SGD</option>\n                  </select>\n                </div>\n              </div>\n\n              {/* Duration */}\n              <div>\n                <label\n                  htmlFor=\"duration\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.plans.billingPeriodLabel', 'Billing Period')} *\n                </label>\n                <select\n                  id=\"duration\"\n                  value={duration}\n                  onChange={(e) => setDuration(e.target.value as PlanDuration)}\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                >\n                  <option value={PlanDuration.MONTHLY}>Monthly</option>\n                  <option value={PlanDuration.YEARLY}>Yearly</option>\n                </select>\n              </div>\n\n              {/* Purchasable toggle */}\n              <div className=\"flex items-start justify-between gap-4 pt-1\">\n                <div>\n                  <p className=\"text-sm font-medium text-text-primary\">\n                    {tr('billing.plans.isPurchasableLabel', 'Publicly purchasable')}\n                  </p>\n                  <p className=\"text-xs text-text-muted mt-0.5\">\n                    {isPurchasable\n                      ? tr(\n                          'billing.plans.isPurchasableOn',\n                          'Visible on pricing page — users can subscribe directly.'\n                        )\n                      : tr(\n                          'billing.plans.isPurchasableOff',\n                          'Internal / custom plan — hidden from pricing page, assign via API only.'\n                        )}\n                  </p>\n                </div>\n                <button\n                  type=\"button\"\n                  role=\"switch\"\n                  aria-checked={isPurchasable}\n                  onClick={() => setIsPurchasable((v) => !v)}\n                  className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:ring-offset-2 ${\n                    isPurchasable ? 'bg-action-primary-bg' : 'bg-text-muted/30'\n                  }`}\n                >\n                  <span\n                    className={`inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${\n                      isPurchasable ? 'translate-x-5' : 'translate-x-0'\n                    }`}\n                  />\n                </button>\n              </div>\n            </div>\n          </div>\n\n          {/* Quota Allocations */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.plans.quotaAllocations', 'Quota Allocations')} *\n              </h2>\n              <button\n                type=\"button\"\n                onClick={handleAddQuota}\n                disabled={quotas.length === 0}\n                className=\"px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors disabled:opacity-50\"\n              >\n                + Add Quota\n              </button>\n            </div>\n            <div className=\"p-4 space-y-3\">\n              {quotas.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.plans.noQuotasAvailable',\n                    'No quotas available. Please create quotas first.'\n                  )}\n                </p>\n              ) : quotaAllocations.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.plans.noQuotasAllocated',\n                    'No quotas allocated. Click \"Add Quota\" to add one.'\n                  )}\n                </p>\n              ) : (\n                quotaAllocations.map((allocation, index) => {\n                  const selectedQuota = quotas.find((q) => q.id === allocation.quotaId);\n                  const limits = selectedQuota?.limits as { type?: string; value?: number } | null;\n                  const limitValue = limits?.value ?? 0;\n                  const limitType = limits?.type ?? 'unknown';\n                  const totalValue = limitValue * allocation.quantity;\n\n                  return (\n                    <div\n                      key={index}\n                      className=\"p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3\"\n                    >\n                      <div className=\"flex items-center gap-3\">\n                        <select\n                          value={allocation.quotaId}\n                          onChange={(e) => handleQuotaChange(index, 'quotaId', e.target.value)}\n                          className={`flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${\n                            allocation.quotaId === '' ? 'text-text-muted' : 'text-text-primary'\n                          }`}\n                        >\n                          <option value=\"\" disabled>\n                            {tr('billing.plans.selectQuota', 'Select a quota...')}\n                          </option>\n                          {quotas.map((quota) => (\n                            <option key={quota.id} value={quota.id}>\n                              {quota.name}\n                            </option>\n                          ))}\n                        </select>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleRemoveQuota(index)}\n                          className=\"p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors\"\n                          title=\"Remove quota\"\n                        >\n                          <svg\n                            className=\"size-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=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                            />\n                          </svg>\n                        </button>\n                      </div>\n\n                      {/* Quota Info - only show when quota is selected */}\n                      {selectedQuota && (\n                        <>\n                          <div className=\"flex items-center justify-between text-sm\">\n                            <div className=\"text-text-muted\">\n                              <span className=\"capitalize\">Type: {limitType}</span>\n                              <span className=\"mx-2\">•</span>\n                              <span>\n                                Value per unit:{' '}\n                                <span className=\"font-medium text-text-primary\">\n                                  {limitValue.toLocaleString()}\n                                </span>\n                              </span>\n                            </div>\n                          </div>\n\n                          {/* Quantity & Total */}\n                          <div className=\"flex items-center gap-4\">\n                            <div className=\"flex items-center gap-2\">\n                              <label className=\"text-sm text-text-muted\">\n                                {tr('billing.plans.quantity', 'Quantity')}:\n                              </label>\n                              <input\n                                type=\"number\"\n                                min=\"1\"\n                                value={allocation.quantity}\n                                onChange={(e) =>\n                                  handleQuotaChange(index, 'quantity', e.target.value)\n                                }\n                                className=\"w-24 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center\"\n                              />\n                            </div>\n                            <div className=\"flex items-center gap-2 text-sm\">\n                              <span className=\"text-text-muted\">=</span>\n                              <span className=\"font-semibold text-status-success-text\">\n                                {totalValue.toLocaleString()} total\n                              </span>\n                            </div>\n                          </div>\n                        </>\n                      )}\n                    </div>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        </div>\n\n        <CurrencyPriceOverridesEditor\n          overrides={currencyPriceOverrides}\n          onChange={setCurrencyPriceOverrides}\n        />\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3 pt-4\">\n          <button\n            type=\"submit\"\n            disabled={isCreating || quotas.length === 0}\n            className=\"px-6 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\"\n          >\n            {isCreating\n              ? tr('billing.plans.creating', 'Creating...')\n              : tr('billing.plans.createPlanBtn', 'Create Plan')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            Cancel\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PlanCreatePage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanCreatePage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Create Page\n * Form to create a new plan\n */\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlanMutations, useQuotas } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, CurrencyPriceOverridesEditor, PageHeader } from '../../../shared/components';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport {\n  PlanDuration,\n  type CreatePlanInput,\n  type CurrencyPriceOverrideInput,\n} from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface QuotaAllocation {\n  quotaId: string;\n  quantity: number;\n}\n\nexport const PlanCreatePage: 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 navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { quotas, isLoading: isQuotasLoading } = useQuotas({ onlyActive: true });\n  const { createPlan, isCreating } = usePlanMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [price, setPrice] = useState('');\n  const [currency, setCurrency] = useState('USD');\n  const [duration, setDuration] = useState<PlanDuration>(PlanDuration.MONTHLY);\n  const [productId, setProductId] = useState('');\n  const [isPurchasable, setIsPurchasable] = useState(true);\n  const [quotaAllocations, setQuotaAllocations] = useState<QuotaAllocation[]>([]);\n  const [currencyPriceOverrides, setCurrencyPriceOverrides] = useState<\n    CurrencyPriceOverrideInput[]\n  >([]);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Permission check\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.plans.noCreatePermission',\n          \"You don't have permission to create plans.\"\n        )}\n      />\n    );\n  }\n\n  // Loading state\n  if (isQuotasLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"max-w-2xl space-y-4\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  const handleAddQuota = () => {\n    // Add new quota at the top with empty quotaId (placeholder)\n    setQuotaAllocations([{ quotaId: '', quantity: 1 }, ...quotaAllocations]);\n  };\n\n  const handleRemoveQuota = (index: number) => {\n    setQuotaAllocations(quotaAllocations.filter((_, i) => i !== index));\n  };\n\n  const handleQuotaChange = (\n    index: number,\n    field: 'quotaId' | 'quantity',\n    value: string | number\n  ) => {\n    const updated = [...quotaAllocations];\n    if (field === 'quotaId') {\n      updated[index].quotaId = value as string;\n    } else {\n      updated[index].quantity = Number(value);\n    }\n    setQuotaAllocations(updated);\n  };\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSuccess(false);\n\n    // Validation\n    if (!name.trim()) {\n      setError('Plan name is required');\n      return;\n    }\n    if (!price || isNaN(Number(price)) || Number(price) < 0) {\n      setError('Valid price is required');\n      return;\n    }\n    if (!productId.trim()) {\n      setError('Product ID is required');\n      return;\n    }\n    if (quotaAllocations.length === 0) {\n      setError('At least one quota is required');\n      return;\n    }\n    // Check for unselected quotas\n    const unselectedQuotas = quotaAllocations.filter((a) => a.quotaId === '');\n    if (unselectedQuotas.length > 0) {\n      setError('Please select a quota for all allocations');\n      return;\n    }\n\n    const input: CreatePlanInput = {\n      name: name.trim(),\n      price: Number(price),\n      currency,\n      duration,\n      productId: productId.trim(),\n      isPurchasable,\n      quotas: quotaAllocations.map((a) => ({\n        quotaId: a.quotaId,\n        quantity: a.quantity,\n      })),\n      ...(currencyPriceOverrides.length > 0 ? { currencyPriceOverrides } : {}),\n    };\n\n    try {\n      await createPlan(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo('/plans'), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to create plan');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={tr('billing.plans.createNewPlan', 'Create New Plan')}\n        description={tr('billing.plans.createNewPlanDesc', 'Set up a new pricing plan with quotas')}\n      />\n\n      <PagePurpose>\n        {tr(\n          'billing.plans.createPurpose',\n          'Define a new subscription tier customers can buy — its price and billing period, optional per-currency and per-seat pricing, and the quotas it includes. Once active, it appears on the Plans page for purchase.'\n        )}\n      </PagePurpose>\n\n      <form onSubmit={handleSubmit} className=\"space-y-6\">\n        {/* Error/Success Messages */}\n        {error && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n        {success && (\n          <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-success-text\">\n              {tr('billing.plans.createSuccess', 'Plan created successfully! Redirecting...')}\n            </p>\n          </div>\n        )}\n\n        {/* Two-column layout on desktop */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Basic Info */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.plans.basicInfo', 'Basic Information')}\n              </h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              {/* Name */}\n              <div>\n                <label htmlFor=\"name\" className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('billing.plans.planNameLabel', 'Plan Name')} *\n                </label>\n                <input\n                  id=\"name\"\n                  type=\"text\"\n                  value={name}\n                  onChange={(e) => setName(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                  placeholder={tr('billing.plans.planNamePlaceholder', 'e.g., Pro Plan')}\n                  required\n                />\n              </div>\n\n              {/* Product ID */}\n              <div>\n                <label\n                  htmlFor=\"productId\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.plans.productId', 'Product ID')} *\n                </label>\n                <input\n                  id=\"productId\"\n                  type=\"text\"\n                  value={productId}\n                  onChange={(e) => setProductId(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                  placeholder={tr('billing.plans.productIdPlaceholder', 'e.g., prod_abc123')}\n                  required\n                />\n                <p className=\"text-xs text-text-muted mt-1\">\n                  {tr('billing.plans.productIdDesc', 'The product this plan belongs to')}\n                </p>\n              </div>\n\n              {/* Price & Currency */}\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <label\n                    htmlFor=\"price\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.plans.priceLabel', 'Price')} *\n                  </label>\n                  <input\n                    id=\"price\"\n                    type=\"number\"\n                    step=\"0.01\"\n                    min=\"0\"\n                    value={price}\n                    onChange={(e) => setPrice(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                    placeholder=\"49.99\"\n                    required\n                  />\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"currency\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.plans.currencyLabel', 'Currency')} *\n                  </label>\n                  <select\n                    id=\"currency\"\n                    value={currency}\n                    onChange={(e) => setCurrency(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                  >\n                    <option value=\"USD\">USD ($)</option>\n                    <option value=\"EUR\">EUR</option>\n                    <option value=\"GBP\">GBP</option>\n                    <option value=\"INR\">INR</option>\n                    <option value=\"AUD\">AUD</option>\n                    <option value=\"CAD\">CAD</option>\n                    <option value=\"JPY\">JPY</option>\n                    <option value=\"SGD\">SGD</option>\n                  </select>\n                </div>\n              </div>\n\n              {/* Duration */}\n              <div>\n                <label\n                  htmlFor=\"duration\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.plans.billingPeriodLabel', 'Billing Period')} *\n                </label>\n                <select\n                  id=\"duration\"\n                  value={duration}\n                  onChange={(e) => setDuration(e.target.value as PlanDuration)}\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                >\n                  <option value={PlanDuration.MONTHLY}>Monthly</option>\n                  <option value={PlanDuration.YEARLY}>Yearly</option>\n                </select>\n              </div>\n\n              {/* Purchasable toggle */}\n              <div className=\"flex items-start justify-between gap-4 pt-1\">\n                <div>\n                  <p className=\"text-sm font-medium text-text-primary\">\n                    {tr('billing.plans.isPurchasableLabel', 'Publicly purchasable')}\n                  </p>\n                  <p className=\"text-xs text-text-muted mt-0.5\">\n                    {isPurchasable\n                      ? tr(\n                          'billing.plans.isPurchasableOn',\n                          'Visible on pricing page — users can subscribe directly.'\n                        )\n                      : tr(\n                          'billing.plans.isPurchasableOff',\n                          'Internal / custom plan — hidden from pricing page, assign via API only.'\n                        )}\n                  </p>\n                </div>\n                <button\n                  type=\"button\"\n                  role=\"switch\"\n                  aria-checked={isPurchasable}\n                  onClick={() => setIsPurchasable((v) => !v)}\n                  className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:ring-offset-2 ${\n                    isPurchasable ? 'bg-action-primary-bg' : 'bg-text-muted/30'\n                  }`}\n                >\n                  <span\n                    className={`inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${\n                      isPurchasable ? 'translate-x-5' : 'translate-x-0'\n                    }`}\n                  />\n                </button>\n              </div>\n            </div>\n          </div>\n\n          {/* Quota Allocations */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.plans.quotaAllocations', 'Quota Allocations')} *\n              </h2>\n              <button\n                type=\"button\"\n                onClick={handleAddQuota}\n                disabled={quotas.length === 0}\n                className=\"px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors disabled:opacity-50\"\n              >\n                + Add Quota\n              </button>\n            </div>\n            <div className=\"p-4 space-y-3\">\n              {quotas.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.plans.noQuotasAvailable',\n                    'No quotas available. Please create quotas first.'\n                  )}\n                </p>\n              ) : quotaAllocations.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.plans.noQuotasAllocated',\n                    'No quotas allocated. Click \"Add Quota\" to add one.'\n                  )}\n                </p>\n              ) : (\n                quotaAllocations.map((allocation, index) => {\n                  const selectedQuota = quotas.find((q) => q.id === allocation.quotaId);\n                  const limits = selectedQuota?.limits as { type?: string; value?: number } | null;\n                  const limitType = limits?.type ?? 'unknown';\n\n                  return (\n                    <div\n                      key={index}\n                      className=\"p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3\"\n                    >\n                      <div className=\"flex items-center gap-3\">\n                        <select\n                          value={allocation.quotaId}\n                          onChange={(e) => handleQuotaChange(index, 'quotaId', e.target.value)}\n                          className={`flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${\n                            allocation.quotaId === '' ? 'text-text-muted' : 'text-text-primary'\n                          }`}\n                        >\n                          <option value=\"\" disabled>\n                            {tr('billing.plans.selectQuota', 'Select a quota...')}\n                          </option>\n                          {quotas.map((quota) => (\n                            <option key={quota.id} value={quota.id}>\n                              {quota.name}\n                            </option>\n                          ))}\n                        </select>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleRemoveQuota(index)}\n                          className=\"p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors\"\n                          title=\"Remove quota\"\n                        >\n                          <svg\n                            className=\"size-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=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                            />\n                          </svg>\n                        </button>\n                      </div>\n\n                      {/* Quota Info - only show when quota is selected */}\n                      {selectedQuota && (\n                        <>\n                          <div className=\"flex items-center justify-between text-sm\">\n                            <span className=\"capitalize text-text-muted\">Type: {limitType}</span>\n                          </div>\n\n                          {/* Limit value — allocation.quantity is the absolute limit */}\n                          <div className=\"flex items-center gap-2\">\n                            <label className=\"text-sm text-text-muted\">\n                              {tr('billing.plans.limit', 'Limit')}:\n                            </label>\n                            <input\n                              type=\"number\"\n                              min=\"1\"\n                              value={allocation.quantity}\n                              onChange={(e) => handleQuotaChange(index, 'quantity', e.target.value)}\n                              className=\"w-36 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center\"\n                            />\n                          </div>\n                        </>\n                      )}\n                    </div>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        </div>\n\n        <CurrencyPriceOverridesEditor\n          overrides={currencyPriceOverrides}\n          onChange={setCurrencyPriceOverrides}\n        />\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3 pt-4\">\n          <button\n            type=\"submit\"\n            disabled={isCreating || quotas.length === 0}\n            className=\"px-6 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\"\n          >\n            {isCreating\n              ? tr('billing.plans.creating', 'Creating...')\n              : tr('billing.plans.createPlanBtn', 'Create Plan')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            Cancel\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -9,32 +9,32 @@ import { getPlanFeatureQuantity as o } from "../../../shared/utils/planFeatureQu
 import "../../../shared/utils/index.js";
 import { useBillingPermissions as s } from "../../../hooks/useBillingPermissions.js";
 import { useBillingNavigate as c } from "../../../hooks/useBillingNavigate.js";
-import { usePlan as l, usePlanMutations as ee } from "../hooks/usePlans.js";
-import { useQuotas as u } from "../hooks/useQuotas.js";
+import { usePlan as l, usePlanMutations as u } from "../hooks/usePlans.js";
+import { useQuotas as d } from "../hooks/useQuotas.js";
 import "../hooks/index.js";
-import { useEffect as d, useState as f } from "react";
-import { useParams as p } from "react-router";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
-import { useI18n as _ } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { PagePurpose as v } from "@burdenoff/fe-libs/ui";
+import { useEffect as f, useState as p } from "react";
+import { useParams as m } from "react-router";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useI18n as v } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { PagePurpose as y } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/plans/pages/PlanEditPage.tsx
-var y = () => {
-	let { t: y } = _(), b = (e, t) => {
-		let n = y(e);
+var b = () => {
+	let { t: b } = v(), x = (e, t) => {
+		let n = b(e);
 		return n === e ? t : n;
-	}, { planId: x } = p(), S = c(), C = s(), { plan: w, isLoading: T, error: E, refetch: D } = l(x), { quotas: O, isLoading: k } = u({ onlyActive: !0 }), { updatePlan: A, isUpdating: j } = ee(), [M, N] = f(""), [P, F] = f(""), [I, L] = f("USD"), [R, z] = f(i.MONTHLY), [B, V] = f(!0), [H, U] = f(!0), [W, G] = f([]), [K, q] = f([]), [J, Y] = f(null), [X, Z] = f(!1);
-	if (d(() => {
-		if (w) {
-			if (N(w.name ?? ""), F(String(w.price ?? "")), L(w.currency ?? "USD"), z(w.duration ?? i.MONTHLY), V(w.isActive ?? !0), U(w.isPurchasable ?? !0), w.currencyPrices && typeof w.currencyPrices == "object") {
-				let e = w.currencyPrices;
+	}, { planId: S } = m(), C = c(), w = s(), { plan: T, isLoading: ee, error: E, refetch: D } = l(S), { quotas: O, isLoading: k } = d({ onlyActive: !0 }), { updatePlan: A, isUpdating: j } = u(), [M, N] = p(""), [P, F] = p(""), [I, L] = p("USD"), [R, z] = p(i.MONTHLY), [B, V] = p(!0), [H, U] = p(!0), [W, G] = p([]), [K, q] = p([]), [J, Y] = p(null), [X, Z] = p(!1);
+	if (f(() => {
+		if (T) {
+			if (N(T.name ?? ""), F(String(T.price ?? "")), L(T.currency ?? "USD"), z(T.duration ?? i.MONTHLY), V(T.isActive ?? !0), U(T.isPurchasable ?? !0), T.currencyPrices && typeof T.currencyPrices == "object") {
+				let e = T.currencyPrices;
 				q(Object.entries(e).filter(([, e]) => typeof e == "number").map(([e, t]) => ({
 					currency: e,
 					amount: t
 				})));
 			}
-			if (w.features && w.features.length > 0) {
+			if (T.features && T.features.length > 0) {
 				let e = [], t = /* @__PURE__ */ new Map();
-				for (let e of w.features) if (e.quota?.id) {
+				for (let e of T.features) if (e.quota?.id) {
 					let n = e.quota.id, r = o(e) || 1;
 					t.set(n, r);
 				}
@@ -45,10 +45,10 @@ var y = () => {
 				G(e);
 			}
 		}
-	}, [w]), !C.canManagePlans) return /* @__PURE__ */ h(e, { message: b("billing.plans.noEditPermission", "You don't have permission to edit plans.") });
-	if (T || k) return /* @__PURE__ */ g("div", {
+	}, [T]), !w.canManagePlans) return /* @__PURE__ */ g(e, { message: x("billing.plans.noEditPermission", "You don't have permission to edit plans.") });
+	if (ee || k) return /* @__PURE__ */ _("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ h("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ h("div", {
+		children: [/* @__PURE__ */ g("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ g("div", {
 			className: "max-w-2xl space-y-4",
 			children: [
 				1,
@@ -56,28 +56,28 @@ var y = () => {
 				3,
 				4,
 				5
-			].map((e) => /* @__PURE__ */ h("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
+			].map((e) => /* @__PURE__ */ g("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
 		})]
 	});
-	if (E && a(E)) return /* @__PURE__ */ h("div", {
+	if (E && a(E)) return /* @__PURE__ */ g("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ h(n, {
-			title: b("billing.plans.serverUnavailable", "Server Unavailable"),
-			message: b("billing.plans.serverUnavailableLoadPlan", "Unable to load plan. The server might be down or experiencing issues."),
+		children: /* @__PURE__ */ g(n, {
+			title: x("billing.plans.serverUnavailable", "Server Unavailable"),
+			message: x("billing.plans.serverUnavailableLoadPlan", "Unable to load plan. The server might be down or experiencing issues."),
 			onRetry: () => D(),
 			showRetry: !0
 		})
 	});
-	if (!w) return /* @__PURE__ */ h("div", {
+	if (!T) return /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ g("div", {
+		children: /* @__PURE__ */ _("div", {
 			className: "text-center space-y-4",
-			children: [/* @__PURE__ */ h("h2", {
+			children: [/* @__PURE__ */ g("h2", {
 				className: "text-lg font-semibold text-text-primary",
-				children: b("billing.plans.planNotFound", "Plan not found")
-			}), /* @__PURE__ */ h("button", {
+				children: x("billing.plans.planNotFound", "Plan not found")
+			}), /* @__PURE__ */ g("button", {
 				type: "button",
-				onClick: () => S("/plans"),
+				onClick: () => C("/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",
 				children: "Back to Plans"
 			})]
@@ -94,15 +94,15 @@ var y = () => {
 		let r = [...W];
 		t === "quotaId" ? r[e].quotaId = n : r[e].quantity = Number(n), G(r);
 	};
-	return /* @__PURE__ */ g("div", {
+	return /* @__PURE__ */ _("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ h(t, {
-				title: `Edit Plan: ${w.name}`,
-				description: b("billing.plans.editPlanDesc", "Update the plan details and quota allocations")
+			/* @__PURE__ */ g(t, {
+				title: `Edit Plan: ${T.name}`,
+				description: x("billing.plans.editPlanDesc", "Update the plan details and quota allocations")
 			}),
-			/* @__PURE__ */ h(v, { children: b("billing.plans.editPurpose", "Update this plan's price, currency/seat pricing and the quotas it grants. Changes apply to new subscriptions; existing subscribers keep the terms they signed up with until they renew or change plans.") }),
-			/* @__PURE__ */ g("form", {
+			/* @__PURE__ */ g(y, { children: x("billing.plans.editPurpose", "Update this plan's price, currency/seat pricing and the quotas it grants. Changes apply to new subscriptions; existing subscribers keep the terms they signed up with until they renew or change plans.") }),
+			/* @__PURE__ */ _("form", {
 				onSubmit: async (e) => {
 					if (e.preventDefault(), Y(null), Z(!1), !M.trim()) {
 						Y("Plan name is required");
@@ -121,7 +121,7 @@ var y = () => {
 						return;
 					}
 					let t = {
-						id: x,
+						id: S,
 						name: M.trim(),
 						price: Number(P),
 						currency: I,
@@ -135,60 +135,60 @@ var y = () => {
 						...K.length > 0 ? { currencyPriceOverrides: K } : {}
 					};
 					try {
-						await A(t), Z(!0), setTimeout(() => S(`/plans/${x}`), 1500);
+						await A(t), Z(!0), setTimeout(() => C(`/plans/${S}`), 1500);
 					} catch (e) {
 						Y(e instanceof Error ? e.message : "Failed to update plan");
 					}
 				},
 				className: "space-y-6",
 				children: [
-					J && /* @__PURE__ */ h("div", {
+					J && /* @__PURE__ */ g("div", {
 						className: "p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg",
-						children: /* @__PURE__ */ h("p", {
+						children: /* @__PURE__ */ g("p", {
 							className: "text-sm text-status-error-text",
 							children: J
 						})
 					}),
-					X && /* @__PURE__ */ h("div", {
+					X && /* @__PURE__ */ g("div", {
 						className: "p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg",
-						children: /* @__PURE__ */ h("p", {
+						children: /* @__PURE__ */ g("p", {
 							className: "text-sm text-status-success-text",
-							children: b("billing.plans.updateSuccess", "Plan updated successfully! Redirecting...")
+							children: x("billing.plans.updateSuccess", "Plan updated successfully! Redirecting...")
 						})
 					}),
-					/* @__PURE__ */ g("div", {
+					/* @__PURE__ */ _("div", {
 						className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
-						children: [/* @__PURE__ */ g("div", {
+						children: [/* @__PURE__ */ _("div", {
 							className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
-							children: [/* @__PURE__ */ h("div", {
+							children: [/* @__PURE__ */ g("div", {
 								className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-								children: /* @__PURE__ */ h("h2", {
+								children: /* @__PURE__ */ g("h2", {
 									className: "font-semibold text-text-primary",
-									children: b("billing.plans.basicInfo", "Basic Information")
+									children: x("billing.plans.basicInfo", "Basic Information")
 								})
-							}), /* @__PURE__ */ g("div", {
+							}), /* @__PURE__ */ _("div", {
 								className: "p-4 space-y-4",
 								children: [
-									/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
 										htmlFor: "name",
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: [b("billing.plans.planNameLabel", "Plan Name"), " *"]
-									}), /* @__PURE__ */ h("input", {
+										children: [x("billing.plans.planNameLabel", "Plan Name"), " *"]
+									}), /* @__PURE__ */ g("input", {
 										id: "name",
 										type: "text",
 										value: M,
 										onChange: (e) => N(e.target.value),
 										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)]",
-										placeholder: b("billing.plans.planNamePlaceholder", "e.g., Pro Plan"),
+										placeholder: x("billing.plans.planNamePlaceholder", "e.g., Pro Plan"),
 										required: !0
 									})] }),
-									/* @__PURE__ */ g("div", {
+									/* @__PURE__ */ _("div", {
 										className: "grid grid-cols-2 gap-4",
-										children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+										children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
 											htmlFor: "price",
 											className: "block text-sm font-medium text-text-primary mb-1",
-											children: [b("billing.plans.priceLabel", "Price"), " *"]
-										}), /* @__PURE__ */ h("input", {
+											children: [x("billing.plans.priceLabel", "Price"), " *"]
+										}), /* @__PURE__ */ g("input", {
 											id: "price",
 											type: "number",
 											step: "0.01",
@@ -198,148 +198,148 @@ var y = () => {
 											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)]",
 											placeholder: "49.99",
 											required: !0
-										})] }), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+										})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
 											htmlFor: "currency",
 											className: "block text-sm font-medium text-text-primary mb-1",
-											children: [b("billing.plans.currencyLabel", "Currency"), " *"]
-										}), /* @__PURE__ */ g("select", {
+											children: [x("billing.plans.currencyLabel", "Currency"), " *"]
+										}), /* @__PURE__ */ _("select", {
 											id: "currency",
 											value: I,
 											onChange: (e) => L(e.target.value),
 											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)]",
 											children: [
-												/* @__PURE__ */ h("option", {
+												/* @__PURE__ */ g("option", {
 													value: "USD",
 													children: "USD ($)"
 												}),
-												/* @__PURE__ */ h("option", {
+												/* @__PURE__ */ g("option", {
 													value: "EUR",
 													children: "EUR"
 												}),
-												/* @__PURE__ */ h("option", {
+												/* @__PURE__ */ g("option", {
 													value: "GBP",
 													children: "GBP"
 												}),
-												/* @__PURE__ */ h("option", {
+												/* @__PURE__ */ g("option", {
 													value: "INR",
 													children: "INR"
 												}),
-												/* @__PURE__ */ h("option", {
+												/* @__PURE__ */ g("option", {
 													value: "AUD",
 													children: "AUD"
 												}),
-												/* @__PURE__ */ h("option", {
+												/* @__PURE__ */ g("option", {
 													value: "CAD",
 													children: "CAD"
 												}),
-												/* @__PURE__ */ h("option", {
+												/* @__PURE__ */ g("option", {
 													value: "JPY",
 													children: "JPY"
 												}),
-												/* @__PURE__ */ h("option", {
+												/* @__PURE__ */ g("option", {
 													value: "SGD",
 													children: "SGD"
 												})
 											]
 										})] })]
 									}),
-									/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
 										htmlFor: "duration",
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: [b("billing.plans.billingPeriodLabel", "Billing Period"), " *"]
-									}), /* @__PURE__ */ g("select", {
+										children: [x("billing.plans.billingPeriodLabel", "Billing Period"), " *"]
+									}), /* @__PURE__ */ _("select", {
 										id: "duration",
 										value: R,
 										onChange: (e) => z(e.target.value),
 										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)]",
-										children: [/* @__PURE__ */ h("option", {
+										children: [/* @__PURE__ */ g("option", {
 											value: i.MONTHLY,
 											children: "Monthly"
-										}), /* @__PURE__ */ h("option", {
+										}), /* @__PURE__ */ g("option", {
 											value: i.YEARLY,
 											children: "Yearly"
 										})]
 									})] }),
-									/* @__PURE__ */ g("div", {
+									/* @__PURE__ */ _("div", {
 										className: "flex items-center gap-3",
-										children: [/* @__PURE__ */ h("input", {
+										children: [/* @__PURE__ */ g("input", {
 											id: "isActive",
 											type: "checkbox",
 											checked: B,
 											onChange: (e) => V(e.target.checked),
 											className: "size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]"
-										}), /* @__PURE__ */ h("label", {
+										}), /* @__PURE__ */ g("label", {
 											htmlFor: "isActive",
 											className: "text-sm font-medium text-text-primary",
-											children: b("billing.plans.planIsActive", "Plan is active")
+											children: x("billing.plans.planIsActive", "Plan is active")
 										})]
 									}),
-									/* @__PURE__ */ g("div", {
+									/* @__PURE__ */ _("div", {
 										className: "flex items-start justify-between gap-4 pt-1",
-										children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
+										children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 											className: "text-sm font-medium text-text-primary",
-											children: b("billing.plans.isPurchasableLabel", "Publicly purchasable")
-										}), /* @__PURE__ */ h("p", {
+											children: x("billing.plans.isPurchasableLabel", "Publicly purchasable")
+										}), /* @__PURE__ */ g("p", {
 											className: "text-xs text-text-muted mt-0.5",
-											children: H ? b("billing.plans.isPurchasableOn", "Visible on pricing page — users can subscribe directly.") : b("billing.plans.isPurchasableOff", "Internal / custom plan — hidden from pricing page, assign via API only.")
-										})] }), /* @__PURE__ */ h("button", {
+											children: H ? x("billing.plans.isPurchasableOn", "Visible on pricing page — users can subscribe directly.") : x("billing.plans.isPurchasableOff", "Internal / custom plan — hidden from pricing page, assign via API only.")
+										})] }), /* @__PURE__ */ g("button", {
 											type: "button",
 											role: "switch",
 											"aria-checked": H,
 											onClick: () => U((e) => !e),
 											className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:ring-offset-2 ${H ? "bg-action-primary-bg" : "bg-text-muted/30"}`,
-											children: /* @__PURE__ */ h("span", { className: `inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${H ? "translate-x-5" : "translate-x-0"}` })
+											children: /* @__PURE__ */ g("span", { className: `inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${H ? "translate-x-5" : "translate-x-0"}` })
 										})]
 									})
 								]
 							})]
-						}), /* @__PURE__ */ g("div", {
+						}), /* @__PURE__ */ _("div", {
 							className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
-							children: [/* @__PURE__ */ g("div", {
+							children: [/* @__PURE__ */ _("div", {
 								className: "p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between",
-								children: [/* @__PURE__ */ h("h2", {
+								children: [/* @__PURE__ */ g("h2", {
 									className: "font-semibold text-text-primary",
-									children: b("billing.plans.quotaAllocations", "Quota Allocations")
-								}), /* @__PURE__ */ h("button", {
+									children: x("billing.plans.quotaAllocations", "Quota Allocations")
+								}), /* @__PURE__ */ g("button", {
 									type: "button",
 									onClick: Q,
 									className: "px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors",
 									children: "+ Add Quota"
 								})]
-							}), /* @__PURE__ */ h("div", {
+							}), /* @__PURE__ */ g("div", {
 								className: "p-4 space-y-3",
-								children: W.length === 0 ? /* @__PURE__ */ h("p", {
+								children: W.length === 0 ? /* @__PURE__ */ g("p", {
 									className: "text-sm text-text-muted",
-									children: b("billing.plans.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
+									children: x("billing.plans.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
 								}) : W.map((e, t) => {
-									let n = O.find((t) => t.id === e.quotaId), r = n?.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = i * e.quantity;
-									return /* @__PURE__ */ g("div", {
+									let n = O.find((t) => t.id === e.quotaId), r = n?.limits?.type ?? "unknown";
+									return /* @__PURE__ */ _("div", {
 										className: "p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3",
-										children: [/* @__PURE__ */ g("div", {
+										children: [/* @__PURE__ */ _("div", {
 											className: "flex items-center gap-3",
-											children: [/* @__PURE__ */ g("select", {
+											children: [/* @__PURE__ */ _("select", {
 												value: e.quotaId,
 												onChange: (e) => $(t, "quotaId", e.target.value),
 												className: `flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${e.quotaId === "" ? "text-text-muted" : "text-text-primary"}`,
-												children: [/* @__PURE__ */ h("option", {
+												children: [/* @__PURE__ */ g("option", {
 													value: "",
 													disabled: !0,
-													children: b("billing.plans.selectQuota", "Select a quota...")
-												}), O.map((e) => /* @__PURE__ */ h("option", {
+													children: x("billing.plans.selectQuota", "Select a quota...")
+												}), O.map((e) => /* @__PURE__ */ g("option", {
 													value: e.id,
 													children: e.name
 												}, e.id))]
-											}), /* @__PURE__ */ h("button", {
+											}), /* @__PURE__ */ g("button", {
 												type: "button",
 												onClick: () => te(t),
 												className: "p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors",
 												title: "Remove quota",
-												children: /* @__PURE__ */ h("svg", {
+												children: /* @__PURE__ */ g("svg", {
 													className: "size-5",
 													fill: "none",
 													viewBox: "0 0 24 24",
 													stroke: "currentColor",
-													children: /* @__PURE__ */ h("path", {
+													children: /* @__PURE__ */ g("path", {
 														strokeLinecap: "round",
 														strokeLinejoin: "round",
 														strokeWidth: 2,
@@ -347,52 +347,23 @@ var y = () => {
 													})
 												})
 											})]
-										}), n && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
+										}), n && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("div", {
 											className: "flex items-center justify-between text-sm",
-											children: /* @__PURE__ */ g("div", {
-												className: "text-text-muted",
-												children: [
-													/* @__PURE__ */ g("span", {
-														className: "capitalize",
-														children: ["Type: ", a]
-													}),
-													/* @__PURE__ */ h("span", {
-														className: "mx-2",
-														children: "•"
-													}),
-													/* @__PURE__ */ g("span", { children: [
-														"Value per unit:",
-														" ",
-														/* @__PURE__ */ h("span", {
-															className: "font-medium text-text-primary",
-															children: i.toLocaleString()
-														})
-													] })
-												]
+											children: /* @__PURE__ */ _("span", {
+												className: "capitalize text-text-muted",
+												children: ["Type: ", r]
 											})
-										}), /* @__PURE__ */ g("div", {
-											className: "flex items-center gap-4",
-											children: [/* @__PURE__ */ g("div", {
-												className: "flex items-center gap-2",
-												children: [/* @__PURE__ */ g("label", {
-													className: "text-sm text-text-muted",
-													children: [b("billing.plans.quantity", "Quantity"), ":"]
-												}), /* @__PURE__ */ h("input", {
-													type: "number",
-													min: "1",
-													value: e.quantity,
-													onChange: (e) => $(t, "quantity", e.target.value),
-													className: "w-24 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center"
-												})]
-											}), /* @__PURE__ */ g("div", {
-												className: "flex items-center gap-2 text-sm",
-												children: [/* @__PURE__ */ h("span", {
-													className: "text-text-muted",
-													children: "="
-												}), /* @__PURE__ */ g("span", {
-													className: "font-semibold text-status-success-text",
-													children: [o.toLocaleString(), " total"]
-												})]
+										}), /* @__PURE__ */ _("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ _("label", {
+												className: "text-sm text-text-muted",
+												children: [x("billing.plans.limit", "Limit"), ":"]
+											}), /* @__PURE__ */ g("input", {
+												type: "number",
+												min: "1",
+												value: e.quantity,
+												onChange: (e) => $(t, "quantity", e.target.value),
+												className: "w-36 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center"
 											})]
 										})] })]
 									}, t);
@@ -400,20 +371,20 @@ var y = () => {
 							})]
 						})]
 					}),
-					/* @__PURE__ */ h(r, {
+					/* @__PURE__ */ g(r, {
 						overrides: K,
 						onChange: q
 					}),
-					/* @__PURE__ */ g("div", {
+					/* @__PURE__ */ _("div", {
 						className: "flex items-center gap-3 pt-4",
-						children: [/* @__PURE__ */ h("button", {
+						children: [/* @__PURE__ */ g("button", {
 							type: "submit",
 							disabled: j,
 							className: "px-6 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",
-							children: j ? b("billing.plans.saving", "Saving...") : b("billing.plans.saveChanges", "Save Changes")
-						}), /* @__PURE__ */ h("button", {
+							children: j ? x("billing.plans.saving", "Saving...") : x("billing.plans.saveChanges", "Save Changes")
+						}), /* @__PURE__ */ g("button", {
 							type: "button",
-							onClick: () => S(`/plans/${x}`),
+							onClick: () => C(`/plans/${S}`),
 							className: "px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 							children: "Cancel"
 						})]
@@ -424,6 +395,6 @@ var y = () => {
 	});
 };
 //#endregion
-export { y as PlanEditPage };
+export { b as PlanEditPage };
 
 //# sourceMappingURL=PlanEditPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlanEditPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanEditPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Edit Page\n * Form to edit an existing plan\n */\n\nimport { useState, useEffect, type FC, type FormEvent } from 'react';\nimport { useParams } from 'react-router';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan, usePlanMutations, useQuotas } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  AccessDenied,\n  CurrencyPriceOverridesEditor,\n  PageHeader,\n  ServerError,\n} from '../../../shared/components';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { getPlanFeatureQuantity, isServerError } from '../../../shared/utils';\nimport {\n  PlanDuration,\n  type CurrencyPriceOverrideInput,\n  type UpdatePlanInput,\n} from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface QuotaAllocation {\n  quotaId: string;\n  quantity: number;\n}\n\nexport const PlanEditPage: 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 permissions = useBillingPermissions();\n  const { plan, isLoading: isPlanLoading, error: planError, refetch } = usePlan(planId);\n  const { quotas, isLoading: isQuotasLoading } = useQuotas({ onlyActive: true });\n  const { updatePlan, isUpdating } = usePlanMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [price, setPrice] = useState('');\n  const [currency, setCurrency] = useState('USD');\n  const [duration, setDuration] = useState<PlanDuration>(PlanDuration.MONTHLY);\n  const [isActive, setIsActive] = useState(true);\n  const [isPurchasable, setIsPurchasable] = useState(true);\n  const [quotaAllocations, setQuotaAllocations] = useState<QuotaAllocation[]>([]);\n  const [currencyPriceOverrides, setCurrencyPriceOverrides] = useState<\n    CurrencyPriceOverrideInput[]\n  >([]);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Populate form when plan data loads\n  useEffect(() => {\n    if (plan) {\n      setName(plan.name ?? '');\n      setPrice(String(plan.price ?? ''));\n      setCurrency(plan.currency ?? 'USD');\n      setDuration(plan.duration ?? PlanDuration.MONTHLY);\n      setIsActive(plan.isActive ?? true);\n      setIsPurchasable(plan.isPurchasable ?? true);\n      // Pre-populate currency price overrides so existing prices are preserved on save\n      if (plan.currencyPrices && typeof plan.currencyPrices === 'object') {\n        const existing = plan.currencyPrices as Record<string, number>;\n        setCurrencyPriceOverrides(\n          Object.entries(existing)\n            .filter(([, v]) => typeof v === 'number')\n            .map(([currency, amount]) => ({ currency, amount }))\n        );\n      }\n      // Extract quota allocations from features\n      if (plan.features && plan.features.length > 0) {\n        const allocations: QuotaAllocation[] = [];\n        const quotaMap = new Map<string, number>();\n\n        for (const feature of plan.features) {\n          if (feature.quota?.id) {\n            const quotaId = feature.quota.id;\n            // SubscriptionFeature now stores per-plan override in context.quantity.\n            // Fall back to quota.limits.value for legacy autoseeded plans.\n            const value = getPlanFeatureQuantity(feature) || 1;\n            quotaMap.set(quotaId, value);\n          }\n        }\n\n        for (const [quotaId, quantity] of quotaMap) {\n          allocations.push({ quotaId, quantity });\n        }\n\n        setQuotaAllocations(allocations);\n      }\n    }\n  }, [plan]);\n\n  // Permission check\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr('billing.plans.noEditPermission', \"You don't have permission to edit plans.\")}\n      />\n    );\n  }\n\n  // Loading state\n  if (isPlanLoading || isQuotasLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"max-w-2xl space-y-4\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (planError && isServerError(planError)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title={tr('billing.plans.serverUnavailable', 'Server Unavailable')}\n          message={tr(\n            'billing.plans.serverUnavailableLoadPlan',\n            'Unable to load plan. The server might be down or experiencing issues.'\n          )}\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          <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\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleAddQuota = () => {\n    // Add new quota at the top with empty quotaId (placeholder)\n    setQuotaAllocations([{ quotaId: '', quantity: 1 }, ...quotaAllocations]);\n  };\n\n  const handleRemoveQuota = (index: number) => {\n    setQuotaAllocations(quotaAllocations.filter((_, i) => i !== index));\n  };\n\n  const handleQuotaChange = (\n    index: number,\n    field: 'quotaId' | 'quantity',\n    value: string | number\n  ) => {\n    const updated = [...quotaAllocations];\n    if (field === 'quotaId') {\n      updated[index].quotaId = value as string;\n    } else {\n      updated[index].quantity = Number(value);\n    }\n    setQuotaAllocations(updated);\n  };\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSuccess(false);\n\n    // Validation\n    if (!name.trim()) {\n      setError('Plan name is required');\n      return;\n    }\n    if (!price || isNaN(Number(price)) || Number(price) < 0) {\n      setError('Valid price is required');\n      return;\n    }\n    if (quotaAllocations.length === 0) {\n      setError('At least one quota is required');\n      return;\n    }\n    // Check for unselected quotas\n    const unselectedQuotas = quotaAllocations.filter((a) => a.quotaId === '');\n    if (unselectedQuotas.length > 0) {\n      setError('Please select a quota for all allocations');\n      return;\n    }\n\n    const input: UpdatePlanInput = {\n      id: planId!,\n      name: name.trim(),\n      price: Number(price),\n      currency,\n      duration,\n      isActive,\n      isPurchasable,\n      quotas: quotaAllocations.map((a) => ({\n        quotaId: a.quotaId,\n        quantity: a.quantity,\n      })),\n      ...(currencyPriceOverrides.length > 0 ? { currencyPriceOverrides } : {}),\n    };\n\n    try {\n      await updatePlan(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo(`/plans/${planId}`), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to update plan');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={`Edit Plan: ${plan.name}`}\n        description={tr(\n          'billing.plans.editPlanDesc',\n          'Update the plan details and quota allocations'\n        )}\n      />\n\n      <PagePurpose>\n        {tr(\n          'billing.plans.editPurpose',\n          \"Update this plan's price, currency/seat pricing and the quotas it grants. Changes apply to new subscriptions; existing subscribers keep the terms they signed up with until they renew or change plans.\"\n        )}\n      </PagePurpose>\n\n      <form onSubmit={handleSubmit} className=\"space-y-6\">\n        {/* Error/Success Messages */}\n        {error && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n        {success && (\n          <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-success-text\">\n              {tr('billing.plans.updateSuccess', 'Plan updated successfully! Redirecting...')}\n            </p>\n          </div>\n        )}\n\n        {/* Two-column layout on desktop */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Basic Info */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.plans.basicInfo', 'Basic Information')}\n              </h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              {/* Name */}\n              <div>\n                <label htmlFor=\"name\" className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('billing.plans.planNameLabel', 'Plan Name')} *\n                </label>\n                <input\n                  id=\"name\"\n                  type=\"text\"\n                  value={name}\n                  onChange={(e) => setName(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                  placeholder={tr('billing.plans.planNamePlaceholder', 'e.g., Pro Plan')}\n                  required\n                />\n              </div>\n\n              {/* Price & Currency */}\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <label\n                    htmlFor=\"price\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.plans.priceLabel', 'Price')} *\n                  </label>\n                  <input\n                    id=\"price\"\n                    type=\"number\"\n                    step=\"0.01\"\n                    min=\"0\"\n                    value={price}\n                    onChange={(e) => setPrice(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                    placeholder=\"49.99\"\n                    required\n                  />\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"currency\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.plans.currencyLabel', 'Currency')} *\n                  </label>\n                  <select\n                    id=\"currency\"\n                    value={currency}\n                    onChange={(e) => setCurrency(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                  >\n                    <option value=\"USD\">USD ($)</option>\n                    <option value=\"EUR\">EUR</option>\n                    <option value=\"GBP\">GBP</option>\n                    <option value=\"INR\">INR</option>\n                    <option value=\"AUD\">AUD</option>\n                    <option value=\"CAD\">CAD</option>\n                    <option value=\"JPY\">JPY</option>\n                    <option value=\"SGD\">SGD</option>\n                  </select>\n                </div>\n              </div>\n\n              {/* Duration */}\n              <div>\n                <label\n                  htmlFor=\"duration\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.plans.billingPeriodLabel', 'Billing Period')} *\n                </label>\n                <select\n                  id=\"duration\"\n                  value={duration}\n                  onChange={(e) => setDuration(e.target.value as PlanDuration)}\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                >\n                  <option value={PlanDuration.MONTHLY}>Monthly</option>\n                  <option value={PlanDuration.YEARLY}>Yearly</option>\n                </select>\n              </div>\n\n              {/* Status */}\n              <div className=\"flex items-center gap-3\">\n                <input\n                  id=\"isActive\"\n                  type=\"checkbox\"\n                  checked={isActive}\n                  onChange={(e) => setIsActive(e.target.checked)}\n                  className=\"size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]\"\n                />\n                <label htmlFor=\"isActive\" className=\"text-sm font-medium text-text-primary\">\n                  {tr('billing.plans.planIsActive', 'Plan is active')}\n                </label>\n              </div>\n\n              {/* Purchasable toggle */}\n              <div className=\"flex items-start justify-between gap-4 pt-1\">\n                <div>\n                  <p className=\"text-sm font-medium text-text-primary\">\n                    {tr('billing.plans.isPurchasableLabel', 'Publicly purchasable')}\n                  </p>\n                  <p className=\"text-xs text-text-muted mt-0.5\">\n                    {isPurchasable\n                      ? tr(\n                          'billing.plans.isPurchasableOn',\n                          'Visible on pricing page — users can subscribe directly.'\n                        )\n                      : tr(\n                          'billing.plans.isPurchasableOff',\n                          'Internal / custom plan — hidden from pricing page, assign via API only.'\n                        )}\n                  </p>\n                </div>\n                <button\n                  type=\"button\"\n                  role=\"switch\"\n                  aria-checked={isPurchasable}\n                  onClick={() => setIsPurchasable((v) => !v)}\n                  className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:ring-offset-2 ${\n                    isPurchasable ? 'bg-action-primary-bg' : 'bg-text-muted/30'\n                  }`}\n                >\n                  <span\n                    className={`inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${\n                      isPurchasable ? 'translate-x-5' : 'translate-x-0'\n                    }`}\n                  />\n                </button>\n              </div>\n            </div>\n          </div>\n\n          {/* Quota Allocations */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.plans.quotaAllocations', 'Quota Allocations')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={handleAddQuota}\n                className=\"px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors\"\n              >\n                + Add Quota\n              </button>\n            </div>\n            <div className=\"p-4 space-y-3\">\n              {quotaAllocations.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.plans.noQuotasAllocated',\n                    'No quotas allocated. Click \"Add Quota\" to add one.'\n                  )}\n                </p>\n              ) : (\n                quotaAllocations.map((allocation, index) => {\n                  const selectedQuota = quotas.find((q) => q.id === allocation.quotaId);\n                  const limits = selectedQuota?.limits as { type?: string; value?: number } | null;\n                  const limitValue = limits?.value ?? 0;\n                  const limitType = limits?.type ?? 'unknown';\n                  const totalValue = limitValue * allocation.quantity;\n\n                  return (\n                    <div\n                      key={index}\n                      className=\"p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3\"\n                    >\n                      <div className=\"flex items-center gap-3\">\n                        <select\n                          value={allocation.quotaId}\n                          onChange={(e) => handleQuotaChange(index, 'quotaId', e.target.value)}\n                          className={`flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${\n                            allocation.quotaId === '' ? 'text-text-muted' : 'text-text-primary'\n                          }`}\n                        >\n                          <option value=\"\" disabled>\n                            {tr('billing.plans.selectQuota', 'Select a quota...')}\n                          </option>\n                          {quotas.map((quota) => (\n                            <option key={quota.id} value={quota.id}>\n                              {quota.name}\n                            </option>\n                          ))}\n                        </select>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleRemoveQuota(index)}\n                          className=\"p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors\"\n                          title=\"Remove quota\"\n                        >\n                          <svg\n                            className=\"size-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=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                            />\n                          </svg>\n                        </button>\n                      </div>\n\n                      {/* Quota Info - only show when quota is selected */}\n                      {selectedQuota && (\n                        <>\n                          <div className=\"flex items-center justify-between text-sm\">\n                            <div className=\"text-text-muted\">\n                              <span className=\"capitalize\">Type: {limitType}</span>\n                              <span className=\"mx-2\">•</span>\n                              <span>\n                                Value per unit:{' '}\n                                <span className=\"font-medium text-text-primary\">\n                                  {limitValue.toLocaleString()}\n                                </span>\n                              </span>\n                            </div>\n                          </div>\n\n                          {/* Quantity & Total */}\n                          <div className=\"flex items-center gap-4\">\n                            <div className=\"flex items-center gap-2\">\n                              <label className=\"text-sm text-text-muted\">\n                                {tr('billing.plans.quantity', 'Quantity')}:\n                              </label>\n                              <input\n                                type=\"number\"\n                                min=\"1\"\n                                value={allocation.quantity}\n                                onChange={(e) =>\n                                  handleQuotaChange(index, 'quantity', e.target.value)\n                                }\n                                className=\"w-24 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center\"\n                              />\n                            </div>\n                            <div className=\"flex items-center gap-2 text-sm\">\n                              <span className=\"text-text-muted\">=</span>\n                              <span className=\"font-semibold text-status-success-text\">\n                                {totalValue.toLocaleString()} total\n                              </span>\n                            </div>\n                          </div>\n                        </>\n                      )}\n                    </div>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        </div>\n\n        <CurrencyPriceOverridesEditor\n          overrides={currencyPriceOverrides}\n          onChange={setCurrencyPriceOverrides}\n        />\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3 pt-4\">\n          <button\n            type=\"submit\"\n            disabled={isUpdating}\n            className=\"px-6 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\"\n          >\n            {isUpdating\n              ? tr('billing.plans.saving', 'Saving...')\n              : tr('billing.plans.saveChanges', 'Save Changes')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/plans/${planId}`)}\n            className=\"px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            Cancel\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8BA,IAAa,UAAyB;CACpC,IAAM,EAAE,SAAM,EAAQ,GAChB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,CAAG;EACxB,OAAO,MAAe,IAAM,IAAW;CACzC,GACM,EAAE,cAAW,EAA8B,GAC3C,IAAa,EAAmB,GAChC,IAAc,EAAsB,GACpC,EAAE,SAAM,WAAW,GAAe,OAAO,GAAW,eAAY,EAAQ,CAAM,GAC9E,EAAE,WAAQ,WAAW,MAAoB,EAAU,EAAE,YAAY,GAAK,CAAC,GACvE,EAAE,eAAY,kBAAe,GAAiB,GAG9C,CAAC,GAAM,KAAW,EAAS,EAAE,GAC7B,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAU,KAAe,EAAS,KAAK,GACxC,CAAC,GAAU,KAAe,EAAuB,EAAa,OAAO,GACrE,CAAC,GAAU,KAAe,EAAS,EAAI,GACvC,CAAC,GAAe,KAAoB,EAAS,EAAI,GACjD,CAAC,GAAkB,KAAuB,EAA4B,CAAC,CAAC,GACxE,CAAC,GAAwB,KAA6B,EAE1D,CAAC,CAAC,GACE,CAAC,GAAO,KAAY,EAAwB,IAAI,GAChD,CAAC,GAAS,KAAc,EAAS,EAAK;CA6C5C,IA1CA,QAAgB;EACd,IAAI,GAAM;GAQR,IAPA,EAAQ,EAAK,QAAQ,EAAE,GACvB,EAAS,OAAO,EAAK,SAAS,EAAE,CAAC,GACjC,EAAY,EAAK,YAAY,KAAK,GAClC,EAAY,EAAK,YAAY,EAAa,OAAO,GACjD,EAAY,EAAK,YAAY,EAAI,GACjC,EAAiB,EAAK,iBAAiB,EAAI,GAEvC,EAAK,kBAAkB,OAAO,EAAK,kBAAmB,UAAU;IAClE,IAAM,IAAW,EAAK;IACtB,EACE,OAAO,QAAQ,CAAQ,EACpB,QAAQ,GAAG,OAAO,OAAO,KAAM,QAAQ,EACvC,KAAK,CAAC,GAAU,QAAa;KAAE;KAAU;IAAO,EAAE,CACvD;GACF;GAEA,IAAI,EAAK,YAAY,EAAK,SAAS,SAAS,GAAG;IAC7C,IAAM,IAAiC,CAAC,GAClC,oBAAW,IAAI,IAAoB;IAEzC,KAAK,IAAM,KAAW,EAAK,UACzB,IAAI,EAAQ,OAAO,IAAI;KACrB,IAAM,IAAU,EAAQ,MAAM,IAGxB,IAAQ,EAAuB,CAAO,KAAK;KACjD,EAAS,IAAI,GAAS,CAAK;IAC7B;IAGF,KAAK,IAAM,CAAC,GAAS,MAAa,GAChC,EAAY,KAAK;KAAE;KAAS;IAAS,CAAC;IAGxC,EAAoB,CAAW;GACjC;EACF;CACF,GAAG,CAAC,CAAI,CAAC,GAGL,CAAC,EAAY,gBACf,OACE,kBAAC,GAAD,EACE,SAAS,EAAG,kCAAkC,0CAA0C,EACzF,CAAA;CAKL,IAAI,KAAiB,GACnB,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAK,WAAU,8CAA+C,CAAA,GAC9D,kBAAC,OAAD;GAAK,WAAU;aACZ;IAAC;IAAG;IAAG;IAAG;IAAG;GAAC,EAAE,KAAK,MACpB,kBAAC,OAAD,EAAa,WAAU,0CAA2C,GAAxD,CAAwD,CACnE;EACE,CAAA,CACF;;CAKT,IAAI,KAAa,EAAc,CAAS,GACtC,OACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,OAAO,EAAG,mCAAmC,oBAAoB;GACjE,SAAS,EACP,2CACA,uEACF;GACA,eAAe,EAAQ;GACvB,WAAA;EACD,CAAA;CACE,CAAA;CAIT,IAAI,CAAC,GACH,OACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,MAAD;IAAI,WAAU;cACX,EAAG,8BAA8B,gBAAgB;GAChD,CAAA,GACJ,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAW,QAAQ;IAClC,WAAU;cACX;GAEO,CAAA,CACL;;CACF,CAAA;CAIT,IAAM,UAAuB;EAE3B,EAAoB,CAAC;GAAE,SAAS;GAAI,UAAU;EAAE,GAAG,GAAG,CAAgB,CAAC;CACzE,GAEM,MAAqB,MAAkB;EAC3C,EAAoB,EAAiB,QAAQ,GAAG,MAAM,MAAM,CAAK,CAAC;CACpE,GAEM,KACJ,GACA,GACA,MACG;EACH,IAAM,IAAU,CAAC,GAAG,CAAgB;EAMpC,AALI,MAAU,YACZ,EAAQ,GAAO,UAAU,IAEzB,EAAQ,GAAO,WAAW,OAAO,CAAK,GAExC,EAAoB,CAAO;CAC7B;CAoDA,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,OAAO,cAAc,EAAK;IAC1B,aAAa,EACX,8BACA,+CACF;GACD,CAAA;GAED,kBAAC,GAAD,EAAA,UACG,EACC,6BACA,yMACF,EACW,CAAA;GAEb,kBAAC,QAAD;IAAM,UAAU,OAnEQ,MAAiB;KAM3C,IALA,EAAE,eAAe,GACjB,EAAS,IAAI,GACb,EAAW,EAAK,GAGZ,CAAC,EAAK,KAAK,GAAG;MAChB,EAAS,uBAAuB;MAChC;KACF;KACA,IAAI,CAAC,KAAS,MAAM,OAAO,CAAK,CAAC,KAAK,OAAO,CAAK,IAAI,GAAG;MACvD,EAAS,yBAAyB;MAClC;KACF;KACA,IAAI,EAAiB,WAAW,GAAG;MACjC,EAAS,gCAAgC;MACzC;KACF;KAGA,IADyB,EAAiB,QAAQ,MAAM,EAAE,YAAY,EAClE,EAAiB,SAAS,GAAG;MAC/B,EAAS,2CAA2C;MACpD;KACF;KAEA,IAAM,IAAyB;MAC7B,IAAI;MACJ,MAAM,EAAK,KAAK;MAChB,OAAO,OAAO,CAAK;MACnB;MACA;MACA;MACA;MACA,QAAQ,EAAiB,KAAK,OAAO;OACnC,SAAS,EAAE;OACX,UAAU,EAAE;MACd,EAAE;MACF,GAAI,EAAuB,SAAS,IAAI,EAAE,0BAAuB,IAAI,CAAC;KACxE;KAEA,IAAI;MAIF,AAHA,MAAM,EAAW,CAAK,GACtB,EAAW,EAAI,GAEf,iBAAiB,EAAW,UAAU,GAAQ,GAAG,IAAI;KACvD,SAAS,GAAK;MACZ,EAAS,aAAe,QAAQ,EAAI,UAAU,uBAAuB;KACvE;IACF;IAmBkC,WAAU;cAAxC;KAEG,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,KAAD;OAAG,WAAU;iBAAkC;MAAS,CAAA;KACrD,CAAA;KAEN,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAG,+BAA+B,2CAA2C;MAC7E,CAAA;KACA,CAAA;KAIP,kBAAC,OAAD;MAAK,WAAU;gBAAf,CAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,2BAA2B,mBAAmB;QAChD,CAAA;OACD,CAAA,GACL,kBAAC,OAAD;QAAK,WAAU;kBAAf;SAEE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,SAAQ;UAAO,WAAU;oBAAhC,CACG,EAAG,+BAA+B,WAAW,GAAE,IAC3C;aACP,kBAAC,SAAD;UACE,IAAG;UACH,MAAK;UACL,OAAO;UACP,WAAW,MAAM,EAAQ,EAAE,OAAO,KAAK;UACvC,WAAU;UACV,aAAa,EAAG,qCAAqC,gBAAgB;UACrE,UAAA;SACD,CAAA,CACE,EAAA,CAAA;SAGL,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;WACE,SAAQ;WACR,WAAU;qBAFZ,CAIG,EAAG,4BAA4B,OAAO,GAAE,IACpC;cACP,kBAAC,SAAD;WACE,IAAG;WACH,MAAK;WACL,MAAK;WACL,KAAI;WACJ,OAAO;WACP,WAAW,MAAM,EAAS,EAAE,OAAO,KAAK;WACxC,WAAU;WACV,aAAY;WACZ,UAAA;UACD,CAAA,CACE,EAAA,CAAA,GACL,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;WACE,SAAQ;WACR,WAAU;qBAFZ,CAIG,EAAG,+BAA+B,UAAU,GAAE,IAC1C;cACP,kBAAC,UAAD;WACE,IAAG;WACH,OAAO;WACP,WAAW,MAAM,EAAY,EAAE,OAAO,KAAK;WAC3C,WAAU;qBAJZ;YAME,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAe,CAAA;YACnC,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;YAC/B,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;YAC/B,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;YAC/B,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;YAC/B,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;YAC/B,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;YAC/B,kBAAC,UAAD;aAAQ,OAAM;uBAAM;YAAW,CAAA;WACzB;YACL,EAAA,CAAA,CACF;;SAGL,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UACE,SAAQ;UACR,WAAU;oBAFZ,CAIG,EAAG,oCAAoC,gBAAgB,GAAE,IACrD;aACP,kBAAC,UAAD;UACE,IAAG;UACH,OAAO;UACP,WAAW,MAAM,EAAY,EAAE,OAAO,KAAqB;UAC3D,WAAU;oBAJZ,CAME,kBAAC,UAAD;WAAQ,OAAO,EAAa;qBAAS;UAAe,CAAA,GACpD,kBAAC,UAAD;WAAQ,OAAO,EAAa;qBAAQ;UAAc,CAAA,CAC5C;WACL,EAAA,CAAA;SAGL,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,SAAD;WACE,IAAG;WACH,MAAK;WACL,SAAS;WACT,WAAW,MAAM,EAAY,EAAE,OAAO,OAAO;WAC7C,WAAU;UACX,CAAA,GACD,kBAAC,SAAD;WAAO,SAAQ;WAAW,WAAU;qBACjC,EAAG,8BAA8B,gBAAgB;UAC7C,CAAA,CACJ;;SAGL,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAG,oCAAoC,sBAAsB;UAC7D,CAAA,GACH,kBAAC,KAAD;WAAG,WAAU;qBACV,IACG,EACE,iCACA,yDACF,IACA,EACE,kCACA,yEACF;UACH,CAAA,CACA,EAAA,CAAA,GACL,kBAAC,UAAD;WACE,MAAK;WACL,MAAK;WACL,gBAAc;WACd,eAAe,GAAkB,MAAM,CAAC,CAAC;WACzC,WAAW,6MACT,IAAgB,yBAAyB;qBAG3C,kBAAC,QAAD,EACE,WAAW,yFACT,IAAgB,kBAAkB,kBAErC,CAAA;UACK,CAAA,CACL;;QACF;SACF;UAGL,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,kCAAkC,mBAAmB;QACvD,CAAA,GACJ,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,WAAU;mBACX;QAEO,CAAA,CACL;WACL,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAiB,WAAW,IAC3B,kBAAC,KAAD;SAAG,WAAU;mBACV,EACC,mCACA,sDACF;QACC,CAAA,IAEH,EAAiB,KAAK,GAAY,MAAU;SAC1C,IAAM,IAAgB,EAAO,MAAM,MAAM,EAAE,OAAO,EAAW,OAAO,GAC9D,IAAS,GAAe,QACxB,IAAa,GAAQ,SAAS,GAC9B,IAAY,GAAQ,QAAQ,WAC5B,IAAa,IAAa,EAAW;SAE3C,OACE,kBAAC,OAAD;UAEE,WAAU;oBAFZ,CAIE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,UAAD;YACE,OAAO,EAAW;YAClB,WAAW,MAAM,EAAkB,GAAO,WAAW,EAAE,OAAO,KAAK;YACnE,WAAW,iJACT,EAAW,YAAY,KAAK,oBAAoB;sBAJpD,CAOE,kBAAC,UAAD;aAAQ,OAAM;aAAG,UAAA;uBACd,EAAG,6BAA6B,mBAAmB;YAC9C,CAAA,GACP,EAAO,KAAK,MACX,kBAAC,UAAD;aAAuB,OAAO,EAAM;uBACjC,EAAM;YACD,GAFK,EAAM,EAEX,CACT,CACK;eACR,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,GAAkB,CAAK;YACtC,WAAU;YACV,OAAM;sBAEN,kBAAC,OAAD;aACE,WAAU;aACV,MAAK;aACL,SAAQ;aACR,QAAO;uBAEP,kBAAC,QAAD;cACE,eAAc;cACd,gBAAe;cACf,aAAa;cACb,GAAE;aACH,CAAA;YACE,CAAA;WACC,CAAA,CACL;cAGJ,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;WAAK,WAAU;qBACb,kBAAC,OAAD;YAAK,WAAU;sBAAf;aACE,kBAAC,QAAD;cAAM,WAAU;wBAAhB,CAA6B,UAAO,CAAgB;;aACpD,kBAAC,QAAD;cAAM,WAAU;wBAAO;aAAO,CAAA;aAC9B,kBAAC,QAAD,EAAA,UAAA;cAAM;cACY;cAChB,kBAAC,QAAD;eAAM,WAAU;yBACb,EAAW,eAAe;cACvB,CAAA;aACF,EAAA,CAAA;YACH;;UACF,CAAA,GAGL,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,SAAD;aAAO,WAAU;uBAAjB,CACG,EAAG,0BAA0B,UAAU,GAAE,GACrC;gBACP,kBAAC,SAAD;aACE,MAAK;aACL,KAAI;aACJ,OAAO,EAAW;aAClB,WAAW,MACT,EAAkB,GAAO,YAAY,EAAE,OAAO,KAAK;aAErD,WAAU;YACX,CAAA,CACE;eACL,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBAAkB;YAAO,CAAA,GACzC,kBAAC,QAAD;aAAM,WAAU;uBAAhB,CACG,EAAW,eAAe,GAAE,QACzB;cACH;aACF;YACL,EAAA,CAAA,CAED;YAnFE,CAmFF;QAET,CAAC;OAEA,CAAA,CACF;QACF;;KAEL,kBAAC,GAAD;MACE,WAAW;MACX,UAAU;KACX,CAAA;KAGD,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,MAAK;OACL,UAAU;OACV,WAAU;iBAET,IACG,EAAG,wBAAwB,WAAW,IACtC,EAAG,6BAA6B,cAAc;MAC5C,CAAA,GACR,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAW,UAAU,GAAQ;OAC5C,WAAU;iBACX;MAEO,CAAA,CACL;;IACD;;EACH;;AAET"}
+{"version":3,"file":"PlanEditPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanEditPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Edit Page\n * Form to edit an existing plan\n */\n\nimport { useState, useEffect, type FC, type FormEvent } from 'react';\nimport { useParams } from 'react-router';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan, usePlanMutations, useQuotas } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  AccessDenied,\n  CurrencyPriceOverridesEditor,\n  PageHeader,\n  ServerError,\n} from '../../../shared/components';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { getPlanFeatureQuantity, isServerError } from '../../../shared/utils';\nimport {\n  PlanDuration,\n  type CurrencyPriceOverrideInput,\n  type UpdatePlanInput,\n} from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface QuotaAllocation {\n  quotaId: string;\n  quantity: number;\n}\n\nexport const PlanEditPage: 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 permissions = useBillingPermissions();\n  const { plan, isLoading: isPlanLoading, error: planError, refetch } = usePlan(planId);\n  const { quotas, isLoading: isQuotasLoading } = useQuotas({ onlyActive: true });\n  const { updatePlan, isUpdating } = usePlanMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [price, setPrice] = useState('');\n  const [currency, setCurrency] = useState('USD');\n  const [duration, setDuration] = useState<PlanDuration>(PlanDuration.MONTHLY);\n  const [isActive, setIsActive] = useState(true);\n  const [isPurchasable, setIsPurchasable] = useState(true);\n  const [quotaAllocations, setQuotaAllocations] = useState<QuotaAllocation[]>([]);\n  const [currencyPriceOverrides, setCurrencyPriceOverrides] = useState<\n    CurrencyPriceOverrideInput[]\n  >([]);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Populate form when plan data loads\n  useEffect(() => {\n    if (plan) {\n      setName(plan.name ?? '');\n      setPrice(String(plan.price ?? ''));\n      setCurrency(plan.currency ?? 'USD');\n      setDuration(plan.duration ?? PlanDuration.MONTHLY);\n      setIsActive(plan.isActive ?? true);\n      setIsPurchasable(plan.isPurchasable ?? true);\n      // Pre-populate currency price overrides so existing prices are preserved on save\n      if (plan.currencyPrices && typeof plan.currencyPrices === 'object') {\n        const existing = plan.currencyPrices as Record<string, number>;\n        setCurrencyPriceOverrides(\n          Object.entries(existing)\n            .filter(([, v]) => typeof v === 'number')\n            .map(([currency, amount]) => ({ currency, amount }))\n        );\n      }\n      // Extract quota allocations from features\n      if (plan.features && plan.features.length > 0) {\n        const allocations: QuotaAllocation[] = [];\n        const quotaMap = new Map<string, number>();\n\n        for (const feature of plan.features) {\n          if (feature.quota?.id) {\n            const quotaId = feature.quota.id;\n            // SubscriptionFeature now stores per-plan override in context.quantity.\n            // Fall back to quota.limits.value for legacy autoseeded plans.\n            const value = getPlanFeatureQuantity(feature) || 1;\n            quotaMap.set(quotaId, value);\n          }\n        }\n\n        for (const [quotaId, quantity] of quotaMap) {\n          allocations.push({ quotaId, quantity });\n        }\n\n        setQuotaAllocations(allocations);\n      }\n    }\n  }, [plan]);\n\n  // Permission check\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr('billing.plans.noEditPermission', \"You don't have permission to edit plans.\")}\n      />\n    );\n  }\n\n  // Loading state\n  if (isPlanLoading || isQuotasLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"max-w-2xl space-y-4\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (planError && isServerError(planError)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title={tr('billing.plans.serverUnavailable', 'Server Unavailable')}\n          message={tr(\n            'billing.plans.serverUnavailableLoadPlan',\n            'Unable to load plan. The server might be down or experiencing issues.'\n          )}\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          <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\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleAddQuota = () => {\n    // Add new quota at the top with empty quotaId (placeholder)\n    setQuotaAllocations([{ quotaId: '', quantity: 1 }, ...quotaAllocations]);\n  };\n\n  const handleRemoveQuota = (index: number) => {\n    setQuotaAllocations(quotaAllocations.filter((_, i) => i !== index));\n  };\n\n  const handleQuotaChange = (\n    index: number,\n    field: 'quotaId' | 'quantity',\n    value: string | number\n  ) => {\n    const updated = [...quotaAllocations];\n    if (field === 'quotaId') {\n      updated[index].quotaId = value as string;\n    } else {\n      updated[index].quantity = Number(value);\n    }\n    setQuotaAllocations(updated);\n  };\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSuccess(false);\n\n    // Validation\n    if (!name.trim()) {\n      setError('Plan name is required');\n      return;\n    }\n    if (!price || isNaN(Number(price)) || Number(price) < 0) {\n      setError('Valid price is required');\n      return;\n    }\n    if (quotaAllocations.length === 0) {\n      setError('At least one quota is required');\n      return;\n    }\n    // Check for unselected quotas\n    const unselectedQuotas = quotaAllocations.filter((a) => a.quotaId === '');\n    if (unselectedQuotas.length > 0) {\n      setError('Please select a quota for all allocations');\n      return;\n    }\n\n    const input: UpdatePlanInput = {\n      id: planId!,\n      name: name.trim(),\n      price: Number(price),\n      currency,\n      duration,\n      isActive,\n      isPurchasable,\n      quotas: quotaAllocations.map((a) => ({\n        quotaId: a.quotaId,\n        quantity: a.quantity,\n      })),\n      ...(currencyPriceOverrides.length > 0 ? { currencyPriceOverrides } : {}),\n    };\n\n    try {\n      await updatePlan(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo(`/plans/${planId}`), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to update plan');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={`Edit Plan: ${plan.name}`}\n        description={tr(\n          'billing.plans.editPlanDesc',\n          'Update the plan details and quota allocations'\n        )}\n      />\n\n      <PagePurpose>\n        {tr(\n          'billing.plans.editPurpose',\n          \"Update this plan's price, currency/seat pricing and the quotas it grants. Changes apply to new subscriptions; existing subscribers keep the terms they signed up with until they renew or change plans.\"\n        )}\n      </PagePurpose>\n\n      <form onSubmit={handleSubmit} className=\"space-y-6\">\n        {/* Error/Success Messages */}\n        {error && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n        {success && (\n          <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-success-text\">\n              {tr('billing.plans.updateSuccess', 'Plan updated successfully! Redirecting...')}\n            </p>\n          </div>\n        )}\n\n        {/* Two-column layout on desktop */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Basic Info */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.plans.basicInfo', 'Basic Information')}\n              </h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              {/* Name */}\n              <div>\n                <label htmlFor=\"name\" className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('billing.plans.planNameLabel', 'Plan Name')} *\n                </label>\n                <input\n                  id=\"name\"\n                  type=\"text\"\n                  value={name}\n                  onChange={(e) => setName(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                  placeholder={tr('billing.plans.planNamePlaceholder', 'e.g., Pro Plan')}\n                  required\n                />\n              </div>\n\n              {/* Price & Currency */}\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <label\n                    htmlFor=\"price\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.plans.priceLabel', 'Price')} *\n                  </label>\n                  <input\n                    id=\"price\"\n                    type=\"number\"\n                    step=\"0.01\"\n                    min=\"0\"\n                    value={price}\n                    onChange={(e) => setPrice(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                    placeholder=\"49.99\"\n                    required\n                  />\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"currency\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.plans.currencyLabel', 'Currency')} *\n                  </label>\n                  <select\n                    id=\"currency\"\n                    value={currency}\n                    onChange={(e) => setCurrency(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                  >\n                    <option value=\"USD\">USD ($)</option>\n                    <option value=\"EUR\">EUR</option>\n                    <option value=\"GBP\">GBP</option>\n                    <option value=\"INR\">INR</option>\n                    <option value=\"AUD\">AUD</option>\n                    <option value=\"CAD\">CAD</option>\n                    <option value=\"JPY\">JPY</option>\n                    <option value=\"SGD\">SGD</option>\n                  </select>\n                </div>\n              </div>\n\n              {/* Duration */}\n              <div>\n                <label\n                  htmlFor=\"duration\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.plans.billingPeriodLabel', 'Billing Period')} *\n                </label>\n                <select\n                  id=\"duration\"\n                  value={duration}\n                  onChange={(e) => setDuration(e.target.value as PlanDuration)}\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                >\n                  <option value={PlanDuration.MONTHLY}>Monthly</option>\n                  <option value={PlanDuration.YEARLY}>Yearly</option>\n                </select>\n              </div>\n\n              {/* Status */}\n              <div className=\"flex items-center gap-3\">\n                <input\n                  id=\"isActive\"\n                  type=\"checkbox\"\n                  checked={isActive}\n                  onChange={(e) => setIsActive(e.target.checked)}\n                  className=\"size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]\"\n                />\n                <label htmlFor=\"isActive\" className=\"text-sm font-medium text-text-primary\">\n                  {tr('billing.plans.planIsActive', 'Plan is active')}\n                </label>\n              </div>\n\n              {/* Purchasable toggle */}\n              <div className=\"flex items-start justify-between gap-4 pt-1\">\n                <div>\n                  <p className=\"text-sm font-medium text-text-primary\">\n                    {tr('billing.plans.isPurchasableLabel', 'Publicly purchasable')}\n                  </p>\n                  <p className=\"text-xs text-text-muted mt-0.5\">\n                    {isPurchasable\n                      ? tr(\n                          'billing.plans.isPurchasableOn',\n                          'Visible on pricing page — users can subscribe directly.'\n                        )\n                      : tr(\n                          'billing.plans.isPurchasableOff',\n                          'Internal / custom plan — hidden from pricing page, assign via API only.'\n                        )}\n                  </p>\n                </div>\n                <button\n                  type=\"button\"\n                  role=\"switch\"\n                  aria-checked={isPurchasable}\n                  onClick={() => setIsPurchasable((v) => !v)}\n                  className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:ring-offset-2 ${\n                    isPurchasable ? 'bg-action-primary-bg' : 'bg-text-muted/30'\n                  }`}\n                >\n                  <span\n                    className={`inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${\n                      isPurchasable ? 'translate-x-5' : 'translate-x-0'\n                    }`}\n                  />\n                </button>\n              </div>\n            </div>\n          </div>\n\n          {/* Quota Allocations */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.plans.quotaAllocations', 'Quota Allocations')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={handleAddQuota}\n                className=\"px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors\"\n              >\n                + Add Quota\n              </button>\n            </div>\n            <div className=\"p-4 space-y-3\">\n              {quotaAllocations.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.plans.noQuotasAllocated',\n                    'No quotas allocated. Click \"Add Quota\" to add one.'\n                  )}\n                </p>\n              ) : (\n                quotaAllocations.map((allocation, index) => {\n                  const selectedQuota = quotas.find((q) => q.id === allocation.quotaId);\n                  const limits = selectedQuota?.limits as { type?: string; value?: number } | null;\n                  const limitType = limits?.type ?? 'unknown';\n\n                  return (\n                    <div\n                      key={index}\n                      className=\"p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3\"\n                    >\n                      <div className=\"flex items-center gap-3\">\n                        <select\n                          value={allocation.quotaId}\n                          onChange={(e) => handleQuotaChange(index, 'quotaId', e.target.value)}\n                          className={`flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${\n                            allocation.quotaId === '' ? 'text-text-muted' : 'text-text-primary'\n                          }`}\n                        >\n                          <option value=\"\" disabled>\n                            {tr('billing.plans.selectQuota', 'Select a quota...')}\n                          </option>\n                          {quotas.map((quota) => (\n                            <option key={quota.id} value={quota.id}>\n                              {quota.name}\n                            </option>\n                          ))}\n                        </select>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleRemoveQuota(index)}\n                          className=\"p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors\"\n                          title=\"Remove quota\"\n                        >\n                          <svg\n                            className=\"size-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=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                            />\n                          </svg>\n                        </button>\n                      </div>\n\n                      {/* Quota Info - only show when quota is selected */}\n                      {selectedQuota && (\n                        <>\n                          <div className=\"flex items-center justify-between text-sm\">\n                            <span className=\"capitalize text-text-muted\">Type: {limitType}</span>\n                          </div>\n\n                          {/* Limit value — allocation.quantity is the absolute limit */}\n                          <div className=\"flex items-center gap-2\">\n                            <label className=\"text-sm text-text-muted\">\n                              {tr('billing.plans.limit', 'Limit')}:\n                            </label>\n                            <input\n                              type=\"number\"\n                              min=\"1\"\n                              value={allocation.quantity}\n                              onChange={(e) => handleQuotaChange(index, 'quantity', e.target.value)}\n                              className=\"w-36 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center\"\n                            />\n                          </div>\n                        </>\n                      )}\n                    </div>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        </div>\n\n        <CurrencyPriceOverridesEditor\n          overrides={currencyPriceOverrides}\n          onChange={setCurrencyPriceOverrides}\n        />\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3 pt-4\">\n          <button\n            type=\"submit\"\n            disabled={isUpdating}\n            className=\"px-6 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\"\n          >\n            {isUpdating\n              ? tr('billing.plans.saving', 'Saving...')\n              : tr('billing.plans.saveChanges', 'Save Changes')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/plans/${planId}`)}\n            className=\"px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            Cancel\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-billing",
-  "version": "2026.828.4",
+  "version": "2026.830.1",
   "description": "Billing microfrontend for Burdenoff products",
   "type": "module",
   "files": [