npm - @burdenoff/microfe-billing - Versions diffs - 2026.623.3 → 2026.624.1 - Mend

@burdenoff/microfe-billing 2026.623.3 → 2026.624.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/dist/billing/modules/promotions/pages/CreatePromotionPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreatePromotionPage.js","names":[],"sources":["../../../../../src/billing/modules/promotions/pages/CreatePromotionPage.tsx"],"sourcesContent":["import { type FC, useState } from 'react';\nimport { ArrowLeft, Save, Gift, Info } from 'lucide-react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport { useCreatePromotionMutation } from '../../../../generated/global-operations';\n\nconst KNOWN_PRODUCTS = ['vibecontrols', 'workspaces', 'botlit', 'fluidgrids', 'healthybowl'];\n\ninterface FormData {\n name: string;\n description: string;\n startsAt: string;\n expiresAt: string;\n bonusMonths: number;\n maxRedemptions: string;\n applicableProductIds: string[];\n applicablePlanIds: string;\n}\n\nexport const CreatePromotionPage: FC = () => {\n const navigateTo = useBillingNavigate();\n const permissions = useBillingPermissions();\n const [createPromotion] = useCreatePromotionMutation({ refetchQueries: ['ListPromotions'] });\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [errors, setErrors] = useState<Partial<Record<keyof FormData, string>>>({});\n\n const today = new Date().toISOString().split('T')[0];\n const [form, setForm] = useState<FormData>({\n name: '',\n description: '',\n startsAt: today,\n expiresAt: '',\n bonusMonths: 1,\n maxRedemptions: '',\n applicableProductIds: [],\n applicablePlanIds: '',\n });\n\n if (!permissions.canManagePlans) {\n return <AccessDenied message=\"You don't have permission to create promotions.\" />;\n }\n\n const set = <K extends keyof FormData>(k: K, v: FormData[K]) =>\n setForm((prev) => ({ ...prev, [k]: v }));\n\n const toggleProduct = (pid: string) => {\n set(\n 'applicableProductIds',\n form.applicableProductIds.includes(pid)\n ? form.applicableProductIds.filter((p) => p !== pid)\n : [...form.applicableProductIds, pid]\n );\n };\n\n const validate = () => {\n const e: typeof errors = {};\n if (!form.name.trim()) e.name = 'Name is required';\n if (!form.startsAt) e.startsAt = 'Start date is required';\n if (!form.expiresAt) e.expiresAt = 'End date is required';\n if (form.expiresAt && form.expiresAt <= form.startsAt)\n e.expiresAt = 'End date must be after start date';\n if (form.bonusMonths < 1) e.bonusMonths = 'Must be at least 1';\n setErrors(e);\n return Object.keys(e).length === 0;\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!validate()) return;\n setIsSubmitting(true);\n try {\n const planIds = form.applicablePlanIds.split(',').flatMap((s) => {\n const trimmed = s.trim();\n return trimmed ? [trimmed] : [];\n });\n\n await createPromotion({\n variables: {\n input: {\n name: form.name.trim(),\n description: form.description.trim() \|\| undefined,\n startsAt: new Date(form.startsAt).toISOString(),\n expiresAt: new Date(form.expiresAt).toISOString(),\n bonusMonths: form.bonusMonths,\n maxRedemptions: form.maxRedemptions ? parseInt(form.maxRedemptions) : undefined,\n applicableProductIds: form.applicableProductIds,\n applicablePlanIds: planIds,\n },\n },\n });\n navigateTo('/promotions');\n } catch (err) {\n setErrors({ name: err instanceof Error ? err.message : 'Failed to create promotion' });\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n <div className=\"max-w-2xl mx-auto p-4 sm:p-6 space-y-6\">\n <div className=\"flex items-center gap-4\">\n <button\n type=\"button\"\n onClick={() => navigateTo('/promotions')}\n aria-label=\"Back to promotions\"\n className=\"p-2 rounded-button hover:bg-bg-sunken text-text-muted hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"size-5\" />\n </button>\n <PageHeader\n title=\"Create Promotion\"\n description=\"Offer bonus free renewal months to subscribers who sign up within the promotion window\"\n icon={<Gift className=\"size-6\" />}\n />\n </div>\n\n <form onSubmit={handleSubmit} className=\"space-y-5\">\n {/* Basic info /}\n <div className=\"bg-bg-surface border border-border-subtle rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]\">\n <h3 className=\"font-semibold text-text-primary\">Promotion Details</h3>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Name </label>\n <input\n type=\"text\"\n value={form.name}\n onChange={(e) => set('name', e.target.value)}\n placeholder=\"e.g. June Launch Offer\"\n className={`w-full px-3 py-2 rounded-input border ${errors.name ? 'border-destructive' : 'border-border-subtle'} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`}\n />\n {errors.name && <p className=\"text-xs text-status-error-text mt-1\">{errors.name}</p>}\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Description</label>\n <textarea\n value={form.description}\n onChange={(e) => set('description', e.target.value)}\n placeholder=\"Subscribe in June and get 2 extra months free!\"\n rows={2}\n className=\"w-full px-3 py-2 rounded-input border border-border-subtle bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n\n {/* Bonus config /}\n <div className=\"bg-bg-surface border border-border-subtle rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]\">\n <h3 className=\"font-semibold text-text-primary\">Bonus Configuration</h3>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Bonus Months \n </label>\n <input\n type=\"number\"\n value={form.bonusMonths}\n min={1}\n max={12}\n onChange={(e) => set('bonusMonths', parseInt(e.target.value) \|\| 1)}\n className={`w-32 px-3 py-2 rounded-input border ${errors.bonusMonths ? 'border-destructive' : 'border-border-subtle'} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`}\n />\n {errors.bonusMonths && (\n <p className=\"text-xs text-status-error-text mt-1\">{errors.bonusMonths}</p>\n )}\n <div className=\"mt-2 flex items-start gap-2 p-3 bg-[var(--color-accent-soft)] rounded-lg text-sm text-text-muted\">\n <Info className=\"size-4 shrink-0 mt-0.5 text-text-link\" />\n <span>\n Users who subscribe during this window get{' '}\n <strong className=\"text-text-primary\">\n {form.bonusMonths} free renewal{form.bonusMonths !== 1 ? 's' : ''}\n </strong>{' '}\n after their first paid period — their quota resets each month as normal.\n </span>\n </div>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Max Redemptions\n </label>\n <input\n type=\"number\"\n value={form.maxRedemptions}\n min={1}\n onChange={(e) => set('maxRedemptions', e.target.value)}\n placeholder=\"Unlimited\"\n className=\"w-48 px-3 py-2 rounded-input border border-border-subtle bg-bg-surface text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n <p className=\"text-xs text-text-muted mt-1\">Leave empty for no cap</p>\n </div>\n </div>\n\n {/* Date window /}\n <div className=\"bg-bg-surface border border-border-subtle rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]\">\n <h3 className=\"font-semibold text-text-primary\">Active Window</h3>\n\n <div className=\"grid grid-cols-2 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Start Date \n </label>\n <input\n type=\"date\"\n value={form.startsAt}\n onChange={(e) => set('startsAt', e.target.value)}\n className={`w-full px-3 py-2 rounded-input border ${errors.startsAt ? 'border-destructive' : 'border-border-subtle'} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`}\n />\n {errors.startsAt && (\n <p className=\"text-xs text-status-error-text mt-1\">{errors.startsAt}</p>\n )}\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">End Date </label>\n <input\n type=\"date\"\n value={form.expiresAt}\n onChange={(e) => set('expiresAt', e.target.value)}\n min={form.startsAt}\n className={`w-full px-3 py-2 rounded-input border ${errors.expiresAt ? 'border-destructive' : 'border-border-subtle'} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`}\n />\n {errors.expiresAt && (\n <p className=\"text-xs text-status-error-text mt-1\">{errors.expiresAt}</p>\n )}\n </div>\n </div>\n <p className=\"text-xs text-text-muted\">\n Only purchases made between these dates will receive the bonus months\n </p>\n </div>\n\n {/ Scope /}\n <div className=\"bg-bg-surface border border-border-subtle rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]\">\n <h3 className=\"font-semibold text-text-primary\">Scope</h3>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-2\">\n Applicable Products\n </label>\n <div className=\"flex flex-wrap gap-2\">\n {KNOWN_PRODUCTS.map((pid) => (\n <button\n key={pid}\n type=\"button\"\n onClick={() => toggleProduct(pid)}\n className={`px-3 py-1.5 rounded-lg border text-sm transition-colors ${\n form.applicableProductIds.includes(pid)\n ? 'border-action-primary-bg bg-[var(--color-accent-soft)] text-text-link font-medium'\n : 'border-border-subtle hover:border-action-primary-bg/50'\n }`}\n >\n {pid}\n </button>\n ))}\n </div>\n <p className=\"text-xs text-text-muted mt-1\">\n {form.applicableProductIds.length === 0\n ? 'No selection = applies to all products'\n : `Applies to: ${form.applicableProductIds.join(', ')}`}\n </p>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Plan IDs (optional)\n </label>\n <input\n type=\"text\"\n value={form.applicablePlanIds}\n onChange={(e) => set('applicablePlanIds', e.target.value)}\n placeholder=\"plan-vibecontrols-pro-monthly, plan-vibecontrols-pro-yearly\"\n className=\"w-full px-3 py-2 rounded-input border border-border-subtle bg-bg-surface text-text-primary placeholder:text-text-muted text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n <p className=\"text-xs text-text-muted mt-1\">\n Comma-separated. Leave empty to apply to all plans\n </p>\n </div>\n </div>\n\n {/ Actions */}\n <div className=\"flex gap-3 justify-end\">\n <button\n type=\"button\"\n onClick={() => navigateTo('/promotions')}\n className=\"px-5 py-2 rounded-button border border-border-subtle text-text-primary hover:bg-bg-sunken text-sm font-medium transition-colors\"\n >\n Cancel\n </button>\n <button\n type=\"submit\"\n disabled={isSubmitting}\n className=\"px-5 py-2 rounded-button bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover flex items-center gap-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] disabled:opacity-50\"\n >\n {isSubmitting ? (\n <div className=\"size-4 border-2 border-action-primary-text border-t-transparent rounded-full animate-spin\" />\n ) : (\n <Save className=\"size-4\" />\n )}\n Create Promotion\n </button>\n </div>\n </form>\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"CreatePromotionPage.js","names":[],"sources":["../../../../../src/billing/modules/promotions/pages/CreatePromotionPage.tsx"],"sourcesContent":["import { type FC, useState } from 'react';\nimport { ArrowLeft, Save, Gift, Info } from 'lucide-react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport { useCreatePromotionMutation } from '../../../../generated/global-operations';\n\nconst KNOWN_PRODUCTS = ['vibecontrols', 'workspaces', 'botlit', 'fluidgrids', 'healthybowl'];\n\ninterface FormData {\n name: string;\n description: string;\n startsAt: string;\n expiresAt: string;\n bonusMonths: number;\n maxRedemptions: string;\n applicableProductIds: string[];\n applicablePlanIds: string;\n}\n\nexport const CreatePromotionPage: FC = () => {\n const navigateTo = useBillingNavigate();\n const permissions = useBillingPermissions();\n const [createPromotion] = useCreatePromotionMutation({ refetchQueries: ['ListPromotions'] });\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [errors, setErrors] = useState<Partial<Record<keyof FormData, string>>>({});\n\n const today = new Date().toISOString().split('T')[0];\n const [form, setForm] = useState<FormData>({\n name: '',\n description: '',\n startsAt: today,\n expiresAt: '',\n bonusMonths: 1,\n maxRedemptions: '',\n applicableProductIds: [],\n applicablePlanIds: '',\n });\n\n if (!permissions.canManagePlans) {\n return <AccessDenied message=\"You don't have permission to create promotions.\" />;\n }\n\n const set = <K extends keyof FormData>(k: K, v: FormData[K]) =>\n setForm((prev) => ({ ...prev, [k]: v }));\n\n const toggleProduct = (pid: string) => {\n set(\n 'applicableProductIds',\n form.applicableProductIds.includes(pid)\n ? form.applicableProductIds.filter((p) => p !== pid)\n : [...form.applicableProductIds, pid]\n );\n };\n\n const validate = () => {\n const e: typeof errors = {};\n if (!form.name.trim()) e.name = 'Name is required';\n if (!form.startsAt) e.startsAt = 'Start date is required';\n if (!form.expiresAt) e.expiresAt = 'End date is required';\n if (form.expiresAt && form.expiresAt <= form.startsAt)\n e.expiresAt = 'End date must be after start date';\n if (form.bonusMonths < 1) e.bonusMonths = 'Must be at least 1';\n setErrors(e);\n return Object.keys(e).length === 0;\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!validate()) return;\n setIsSubmitting(true);\n try {\n const planIds = form.applicablePlanIds.split(',').flatMap((s) => {\n const trimmed = s.trim();\n return trimmed ? [trimmed] : [];\n });\n\n await createPromotion({\n variables: {\n input: {\n name: form.name.trim(),\n description: form.description.trim() \|\| undefined,\n startsAt: new Date(form.startsAt).toISOString(),\n expiresAt: new Date(form.expiresAt).toISOString(),\n bonusMonths: form.bonusMonths,\n maxRedemptions: form.maxRedemptions ? parseInt(form.maxRedemptions) : undefined,\n applicableProductIds: form.applicableProductIds,\n applicablePlanIds: planIds,\n },\n },\n });\n navigateTo('/promotions');\n } catch (err) {\n setErrors({ name: err instanceof Error ? err.message : 'Failed to create promotion' });\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n <div className=\"max-w-2xl mx-auto p-4 sm:p-6 space-y-6\">\n <div className=\"flex items-center gap-4\">\n <button\n type=\"button\"\n onClick={() => navigateTo('/promotions')}\n aria-label=\"Back to promotions\"\n className=\"p-2 rounded-button hover:bg-bg-sunken text-text-muted hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"size-5\" />\n </button>\n <PageHeader\n title=\"Create Promotion\"\n description=\"Offer bonus free renewal months to subscribers who sign up within the promotion window\"\n icon={<Gift className=\"size-6\" />}\n />\n </div>\n\n <form onSubmit={handleSubmit} className=\"space-y-5\">\n {/* Basic info /}\n <div className=\"bg-bg-surface border border-border-subtle rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]\">\n <h3 className=\"font-semibold text-text-primary\">Promotion Details</h3>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Name </label>\n <input\n type=\"text\"\n value={form.name}\n onChange={(e) => set('name', e.target.value)}\n placeholder=\"e.g. June Launch Offer\"\n className={`w-full px-3 py-2 rounded-input border ${errors.name ? 'border-status-error-border' : 'border-border-subtle'} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`}\n />\n {errors.name && <p className=\"text-xs text-status-error-text mt-1\">{errors.name}</p>}\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Description</label>\n <textarea\n value={form.description}\n onChange={(e) => set('description', e.target.value)}\n placeholder=\"Subscribe in June and get 2 extra months free!\"\n rows={2}\n className=\"w-full px-3 py-2 rounded-input border border-border-subtle bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n\n {/* Bonus config /}\n <div className=\"bg-bg-surface border border-border-subtle rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]\">\n <h3 className=\"font-semibold text-text-primary\">Bonus Configuration</h3>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Bonus Months \n </label>\n <input\n type=\"number\"\n value={form.bonusMonths}\n min={1}\n max={12}\n onChange={(e) => set('bonusMonths', parseInt(e.target.value) \|\| 1)}\n className={`w-32 px-3 py-2 rounded-input border ${errors.bonusMonths ? 'border-status-error-border' : 'border-border-subtle'} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`}\n />\n {errors.bonusMonths && (\n <p className=\"text-xs text-status-error-text mt-1\">{errors.bonusMonths}</p>\n )}\n <div className=\"mt-2 flex items-start gap-2 p-3 bg-[var(--color-accent-soft)] rounded-lg text-sm text-text-muted\">\n <Info className=\"size-4 shrink-0 mt-0.5 text-text-link\" />\n <span>\n Users who subscribe during this window get{' '}\n <strong className=\"text-text-primary\">\n {form.bonusMonths} free renewal{form.bonusMonths !== 1 ? 's' : ''}\n </strong>{' '}\n after their first paid period — their quota resets each month as normal.\n </span>\n </div>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Max Redemptions\n </label>\n <input\n type=\"number\"\n value={form.maxRedemptions}\n min={1}\n onChange={(e) => set('maxRedemptions', e.target.value)}\n placeholder=\"Unlimited\"\n className=\"w-48 px-3 py-2 rounded-input border border-border-subtle bg-bg-surface text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n <p className=\"text-xs text-text-muted mt-1\">Leave empty for no cap</p>\n </div>\n </div>\n\n {/* Date window /}\n <div className=\"bg-bg-surface border border-border-subtle rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]\">\n <h3 className=\"font-semibold text-text-primary\">Active Window</h3>\n\n <div className=\"grid grid-cols-2 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Start Date \n </label>\n <input\n type=\"date\"\n value={form.startsAt}\n onChange={(e) => set('startsAt', e.target.value)}\n className={`w-full px-3 py-2 rounded-input border ${errors.startsAt ? 'border-status-error-border' : 'border-border-subtle'} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`}\n />\n {errors.startsAt && (\n <p className=\"text-xs text-status-error-text mt-1\">{errors.startsAt}</p>\n )}\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">End Date </label>\n <input\n type=\"date\"\n value={form.expiresAt}\n onChange={(e) => set('expiresAt', e.target.value)}\n min={form.startsAt}\n className={`w-full px-3 py-2 rounded-input border ${errors.expiresAt ? 'border-status-error-border' : 'border-border-subtle'} bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]`}\n />\n {errors.expiresAt && (\n <p className=\"text-xs text-status-error-text mt-1\">{errors.expiresAt}</p>\n )}\n </div>\n </div>\n <p className=\"text-xs text-text-muted\">\n Only purchases made between these dates will receive the bonus months\n </p>\n </div>\n\n {/ Scope /}\n <div className=\"bg-bg-surface border border-border-subtle rounded-card p-5 space-y-4 shadow-[var(--shadow-elevation-1)]\">\n <h3 className=\"font-semibold text-text-primary\">Scope</h3>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-2\">\n Applicable Products\n </label>\n <div className=\"flex flex-wrap gap-2\">\n {KNOWN_PRODUCTS.map((pid) => (\n <button\n key={pid}\n type=\"button\"\n onClick={() => toggleProduct(pid)}\n className={`px-3 py-1.5 rounded-lg border text-sm transition-colors ${\n form.applicableProductIds.includes(pid)\n ? 'border-action-primary-bg bg-[var(--color-accent-soft)] text-text-link font-medium'\n : 'border-border-subtle hover:border-action-primary-bg/50'\n }`}\n >\n {pid}\n </button>\n ))}\n </div>\n <p className=\"text-xs text-text-muted mt-1\">\n {form.applicableProductIds.length === 0\n ? 'No selection = applies to all products'\n : `Applies to: ${form.applicableProductIds.join(', ')}`}\n </p>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Plan IDs (optional)\n </label>\n <input\n type=\"text\"\n value={form.applicablePlanIds}\n onChange={(e) => set('applicablePlanIds', e.target.value)}\n placeholder=\"plan-vibecontrols-pro-monthly, plan-vibecontrols-pro-yearly\"\n className=\"w-full px-3 py-2 rounded-input border border-border-subtle bg-bg-surface text-text-primary placeholder:text-text-muted text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n <p className=\"text-xs text-text-muted mt-1\">\n Comma-separated. Leave empty to apply to all plans\n </p>\n </div>\n </div>\n\n {/ Actions */}\n <div className=\"flex gap-3 justify-end\">\n <button\n type=\"button\"\n onClick={() => navigateTo('/promotions')}\n className=\"px-5 py-2 rounded-button border border-border-subtle text-text-primary hover:bg-bg-sunken text-sm font-medium transition-colors\"\n >\n Cancel\n </button>\n <button\n type=\"submit\"\n disabled={isSubmitting}\n className=\"px-5 py-2 rounded-button bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover flex items-center gap-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] disabled:opacity-50\"\n >\n {isSubmitting ? (\n <div className=\"size-4 border-2 border-action-primary-text border-t-transparent rounded-full animate-spin\" />\n ) : (\n <Save className=\"size-4\" />\n )}\n Create Promotion\n </button>\n </div>\n </form>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/billing/modules/settings/pages/SettingsPage.js CHANGED Viewed

@@ -144,13 +144,13 @@ var d = () => {
 	]);
 	return m.canManageBillingAccount ? me && !q ? /* @__PURE__ */ c("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ s("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ s("div", {
-			className: "border border-border rounded-lg p-6 space-y-4",
+		children: [/* @__PURE__ */ s("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ s("div", {
+			className: "border border-border-subtle rounded-lg p-6 space-y-4",
 			children: [
 				1,
 				2,
 				3
-			].map((e) => /* @__PURE__ */ s("div", { className: "h-10 bg-muted animate-pulse rounded" }, e))
+			].map((e) => /* @__PURE__ */ s("div", { className: "h-10 bg-bg-sunken animate-pulse rounded" }, e))
 		})]
 	}) : /* @__PURE__ */ c("div", {
 		className: "space-y-6 p-6",
@@ -164,11 +164,11 @@ var d = () => {
 				children: [/* @__PURE__ */ c("button", {
 					type: "button",
 					onClick: () => S(!x),
-					className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors",
+					className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border-subtle rounded-lg bg-bg-surface hover:bg-bg-sunken/50 transition-colors",
 					children: [/* @__PURE__ */ c("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ s("div", {
-							className: "size-8 rounded-lg bg-primary/10 flex items-center justify-center",
+							className: "size-8 rounded-lg bg-action-primary-bg/10 flex items-center justify-center",
 							children: /* @__PURE__ */ s("svg", {
 								className: "size-4 text-primary",
 								fill: "none",
@@ -184,15 +184,15 @@ var d = () => {
 						}), /* @__PURE__ */ c("div", {
 							className: "text-left",
 							children: [/* @__PURE__ */ s("p", {
-								className: "text-sm font-medium text-foreground",
+								className: "text-sm font-medium text-text-primary",
 								children: q?.name || p("billing.settings.selectAccount", "Select Account")
 							}), /* @__PURE__ */ s("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: q?.email
 							})]
 						})]
 					}), /* @__PURE__ */ s("svg", {
-						className: `size-4 text-muted-foreground transition-transform ${x ? "rotate-180" : ""}`,
+						className: `size-4 text-text-secondary transition-transform ${x ? "rotate-180" : ""}`,
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -207,17 +207,17 @@ var d = () => {
 					className: "fixed inset-0 z-10",
 					onClick: () => S(!1)
 				}), /* @__PURE__ */ s("div", {
-					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto",
+					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border-subtle rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto",
 					children: L.map((e) => /* @__PURE__ */ c("button", {
 						type: "button",
 						onClick: () => he(e),
-						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors",
+						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-bg-sunken transition-colors",
 						children: [/* @__PURE__ */ c("div", {
 							className: "flex items-center gap-3 min-w-0",
 							children: [/* @__PURE__ */ s("div", {
-								className: "size-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0",
+								className: "size-8 rounded-lg bg-bg-sunken flex items-center justify-center flex-shrink-0",
 								children: /* @__PURE__ */ s("svg", {
-									className: "size-4 text-muted-foreground",
+									className: "size-4 text-text-secondary",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
@@ -231,10 +231,10 @@ var d = () => {
 							}), /* @__PURE__ */ c("div", {
 								className: "text-left min-w-0",
 								children: [/* @__PURE__ */ s("p", {
-									className: "text-sm font-medium text-foreground truncate",
+									className: "text-sm font-medium text-text-primary truncate",
 									children: e.name
 								}), /* @__PURE__ */ s("p", {
-									className: "text-xs text-muted-foreground truncate",
+									className: "text-xs text-text-secondary truncate",
 									children: e.email
 								})]
 							})]
@@ -254,19 +254,19 @@ var d = () => {
 				})] })]
 			}),
 			/* @__PURE__ */ c("div", {
-				className: "border border-border rounded-lg bg-card",
+				className: "border border-border-subtle rounded-lg bg-bg-surface",
 				children: [/* @__PURE__ */ s("div", {
-					className: "p-6 border-b border-border",
+					className: "p-6 border-b border-border-subtle",
 					children: /* @__PURE__ */ c("div", {
 						className: "flex items-center justify-between",
 						children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("h2", {
-							className: "text-lg font-semibold text-foreground",
+							className: "text-lg font-semibold text-text-primary",
 							children: p("billing.settings.accountInfo", "Account Information")
 						}), /* @__PURE__ */ s("p", {
-							className: "text-sm text-muted-foreground mt-1",
+							className: "text-sm text-text-secondary mt-1",
 							children: p("billing.settings.accountInfoDescription", "Update your billing contact details and tax information")
 						})] }), q?.isDefault && /* @__PURE__ */ c("span", {
-							className: "inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full",
+							className: "inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium bg-action-primary-bg/10 text-primary rounded-full",
 							children: [/* @__PURE__ */ s("svg", {
 								className: "size-3",
 								fill: "currentColor",
@@ -283,52 +283,52 @@ var d = () => {
 					className: "p-6 space-y-6",
 					children: [
 						q && /* @__PURE__ */ c("div", {
-							className: "grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm pb-4 border-b border-border",
+							className: "grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm pb-4 border-b border-border-subtle",
 							children: [
 								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
-									className: "text-muted-foreground",
+									className: "text-text-secondary",
 									children: p("billing.settings.status", "Status")
 								}), /* @__PURE__ */ s("p", {
-									className: `font-medium ${q.isActive ? "text-status-success-text" : "text-destructive"}`,
+									className: `font-medium ${q.isActive ? "text-status-success-text" : "text-status-error-text"}`,
 									children: q.isActive ? p("billing.settings.active", "Active") : p("billing.settings.inactive", "Inactive")
 								})] }),
 								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
-									className: "text-muted-foreground",
+									className: "text-text-secondary",
 									children: p("billing.settings.creditBalance", "Credit Balance")
 								}), /* @__PURE__ */ c("p", {
-									className: "font-medium text-foreground",
+									className: "font-medium text-text-primary",
 									children: [(q.creditAmount || 0).toLocaleString(), " Credits"]
 								})] }),
 								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
-									className: "text-muted-foreground",
+									className: "text-text-secondary",
 									children: p("billing.settings.accountId", "Account ID")
 								}), /* @__PURE__ */ s("p", {
-									className: "font-mono text-xs text-foreground truncate",
+									className: "font-mono text-xs text-text-primary truncate",
 									title: q.id,
 									children: q.id
 								})] }),
 								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
-									className: "text-muted-foreground",
+									className: "text-text-secondary",
 									children: p("billing.settings.created", "Created")
 								}), /* @__PURE__ */ s("p", {
-									className: "font-medium text-foreground",
+									className: "font-medium text-text-primary",
 									children: q.createdAt ? new Date(q.createdAt).toLocaleDateString() : p("billing.settings.notAvailable", "N/A")
 								})] })
 							]
 						}),
 						/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("h3", {
-							className: "text-sm font-medium text-foreground mb-4",
+							className: "text-sm font-medium text-text-primary mb-4",
 							children: p("billing.settings.contactDetails", "Contact Details")
 						}), /* @__PURE__ */ c("div", {
 							className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
 							children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("label", {
 								htmlFor: "billing-account-name",
-								className: "block text-sm font-medium text-foreground mb-1",
+								className: "block text-sm font-medium text-text-primary mb-1",
 								children: [
 									p("billing.settings.accountName", "Account Name"),
 									" ",
 									/* @__PURE__ */ s("span", {
-										className: "text-destructive",
+										className: "text-status-error-text",
 										children: "*"
 									})
 								]
@@ -337,15 +337,15 @@ var d = () => {
 								type: "text",
 								value: M.name,
 								onChange: (e) => J("name", e.target.value),
-								className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 							})] }), /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("label", {
 								htmlFor: "billing-account-email",
-								className: "block text-sm font-medium text-foreground mb-1",
+								className: "block text-sm font-medium text-text-primary mb-1",
 								children: [
 									p("billing.settings.email", "Email"),
 									" ",
 									/* @__PURE__ */ s("span", {
-										className: "text-destructive",
+										className: "text-status-error-text",
 										children: "*"
 									})
 								]
@@ -354,7 +354,7 @@ var d = () => {
 								type: "email",
 								value: M.email,
 								onChange: (e) => J("email", e.target.value),
-								className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 							})] })]
 						})] }),
 						/* @__PURE__ */ s(u, {
@@ -366,7 +366,7 @@ var d = () => {
 									/* @__PURE__ */ c("div", { children: [
 										/* @__PURE__ */ s("label", {
 											htmlFor: "billing-account-billing-email",
-											className: "block text-sm font-medium text-foreground mb-1",
+											className: "block text-sm font-medium text-text-primary mb-1",
 											children: p("billing.settings.billingEmail", "Billing Email")
 										}),
 										/* @__PURE__ */ s("input", {
@@ -375,22 +375,22 @@ var d = () => {
 											value: M.billingEmail,
 											onChange: (e) => J("billingEmail", e.target.value),
 											placeholder: p("billing.settings.billingEmailPlaceholder", "Optional - defaults to account email"),
-											className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+											className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 										}),
 										/* @__PURE__ */ s("p", {
-											className: "text-xs text-muted-foreground mt-1",
+											className: "text-xs text-text-secondary mt-1",
 											children: p("billing.settings.billingEmailHelp", "Invoices will be sent to this email if provided")
 										})
 									] }),
 									/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
 										htmlFor: "billing-account-currency",
-										className: "block text-sm font-medium text-foreground mb-1",
+										className: "block text-sm font-medium text-text-primary mb-1",
 										children: p("billing.settings.currency", "Currency")
 									}), /* @__PURE__ */ c("select", {
 										id: "billing-account-currency",
 										value: M.currency,
 										onChange: (e) => J("currency", e.target.value),
-										className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
+										className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
 										children: [
 											/* @__PURE__ */ s("option", {
 												value: "USD",
@@ -415,7 +415,7 @@ var d = () => {
 										children: [
 											/* @__PURE__ */ s("label", {
 												htmlFor: "billing-account-tax-id",
-												className: "block text-sm font-medium text-foreground mb-1",
+												className: "block text-sm font-medium text-text-primary mb-1",
 												children: p("billing.settings.taxId", "Tax ID / VAT Number")
 											}),
 											/* @__PURE__ */ s("input", {
@@ -424,10 +424,10 @@ var d = () => {
 												value: M.taxId,
 												onChange: (e) => J("taxId", e.target.value),
 												placeholder: p("billing.settings.taxIdPlaceholder", "Enter your tax identification number"),
-												className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+												className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 											}),
 											/* @__PURE__ */ s("p", {
-												className: "text-xs text-muted-foreground mt-1",
+												className: "text-xs text-text-secondary mt-1",
 												children: p("billing.settings.taxIdHelp", "Used for invoices and tax compliance (e.g., GST, VAT number)")
 											})
 										]
@@ -436,7 +436,7 @@ var d = () => {
 							})
 						}),
 						q?.isActive && L.length > 1 && /* @__PURE__ */ s("div", {
-							className: "pt-4 border-t border-border",
+							className: "pt-4 border-t border-border-subtle",
 							children: /* @__PURE__ */ c("div", {
 								className: "flex items-start gap-3",
 								children: [/* @__PURE__ */ s("div", {
@@ -450,23 +450,23 @@ var d = () => {
 											isDefault: e.target.checked
 										})),
 										disabled: q?.isDefault,
-										className: "size-4 rounded border-border text-primary focus:ring-primary focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed"
+										className: "size-4 rounded border-border-subtle text-primary focus:ring-primary focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed"
 									})
 								}), /* @__PURE__ */ c("div", {
 									className: "flex-1",
 									children: [/* @__PURE__ */ s("label", {
 										htmlFor: "isDefault",
-										className: "text-sm font-medium text-foreground cursor-pointer",
+										className: "text-sm font-medium text-text-primary cursor-pointer",
 										children: p("billing.settings.setDefault", "Set as default billing account")
 									}), /* @__PURE__ */ s("p", {
-										className: "text-xs text-muted-foreground mt-0.5",
+										className: "text-xs text-text-secondary mt-0.5",
 										children: q?.isDefault ? p("billing.settings.currentDefaultDescription", "This is currently your default billing account") : p("billing.settings.makePrimaryDescription", "Make this your primary billing account for new subscriptions")
 									})]
 								})]
 							})
 						}),
 						/* @__PURE__ */ c("div", {
-							className: "pt-4 border-t border-border flex items-center justify-between",
+							className: "pt-4 border-t border-border-subtle flex items-center justify-between",
 							children: [/* @__PURE__ */ c("div", {
 								className: "flex items-center gap-2",
 								children: [ue && /* @__PURE__ */ c("div", {
@@ -484,7 +484,7 @@ var d = () => {
 										})
 									}), p("billing.settings.saveSuccess", "Changes saved successfully")]
 								}), D && /* @__PURE__ */ c("div", {
-									className: "flex items-center gap-2 text-sm text-destructive",
+									className: "flex items-center gap-2 text-sm text-status-error-text",
 									children: [/* @__PURE__ */ s("svg", {
 										className: "size-4",
 										fill: "none",
@@ -504,13 +504,13 @@ var d = () => {
 									type: "button",
 									onClick: _e,
 									disabled: C || T,
-									className: "px-4 py-2 text-sm font-medium border border-border text-status-error-text rounded-md hover:bg-status-error-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+									className: "px-4 py-2 text-sm font-medium border border-border-subtle text-status-error-text rounded-md hover:bg-status-error-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
 									children: T ? "Archiving..." : "Archive Account"
 								}) : null, /* @__PURE__ */ c("button", {
 									type: "button",
 									onClick: $,
 									disabled: !ge || C || T || !M.name || !M.email,
-									className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2",
+									className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2",
 									children: [C && /* @__PURE__ */ c("svg", {
 										className: "size-4 animate-spin",
 										fill: "none",
@@ -545,19 +545,19 @@ var d = () => {
 			}), /* @__PURE__ */ s("div", {
 				className: "fixed inset-0 flex items-center justify-center z-50 p-4",
 				children: /* @__PURE__ */ c("div", {
-					className: "bg-card border border-border rounded-lg shadow-xl max-w-md w-full p-6",
+					className: "bg-bg-surface border border-border-subtle rounded-lg shadow-xl max-w-md w-full p-6",
 					children: [
 						/* @__PURE__ */ s("h3", {
-							className: "text-lg font-semibold text-foreground mb-2",
+							className: "text-lg font-semibold text-text-primary mb-2",
 							children: "Confirm Default Account Change"
 						}),
 						/* @__PURE__ */ c("p", {
-							className: "text-sm text-muted-foreground mb-4",
+							className: "text-sm text-text-secondary mb-4",
 							children: [
 								"You are about to set",
 								" ",
 								/* @__PURE__ */ s("strong", {
-									className: "text-foreground",
+									className: "text-text-primary",
 									children: q?.name
 								}),
 								" as your default billing account and save your changes."
@@ -601,13 +601,13 @@ var d = () => {
 									}));
 								},
 								disabled: C,
-								className: "px-4 py-2 text-sm font-medium text-foreground border border-border rounded-md hover:bg-muted transition-colors disabled:opacity-50",
+								className: "px-4 py-2 text-sm font-medium text-text-primary border border-border-subtle rounded-md hover:bg-bg-sunken transition-colors disabled:opacity-50",
 								children: "Cancel"
 							}), /* @__PURE__ */ c("button", {
 								type: "button",
 								onClick: Q,
 								disabled: C,
-								className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors flex items-center gap-2",
+								className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 disabled:opacity-50 transition-colors flex items-center gap-2",
 								children: [C && /* @__PURE__ */ c("svg", {
 									className: "size-4 animate-spin",
 									fill: "none",