Files
PnvPanel/frontend/src/features/admin/pricing/PricingSettingsEditor.tsx
T
Leonid Pershin 0dcaf1203f
CI / Backend (build + test) (push) Successful in 1m20s
CI / Frontend (lint + typecheck + build) (push) Successful in 32s
Implement discount tiers for pricing settings and enhance related functionalities
- Introduced a new `DiscountTierDto` to represent volume discount tiers, allowing roles with a config quota at or above specified thresholds to receive discounts on pricing.
- Updated the `PricingSettingsDto` to include a list of discount tiers, enhancing the pricing model to support more flexible pricing strategies.
- Modified the `GetPricingSettingsQueryHandler` and `UpdatePricingSettingsCommandHandler` to handle discount tiers, ensuring they are correctly retrieved and updated in the database.
- Enhanced validation in `UpdatePricingSettingsCommandValidator` to enforce uniqueness and progressive discount tiers, preventing invalid configurations.
- Updated frontend components to support the new discount tier functionality, including forms for adding and managing discount tiers in the admin interface.
- Revised API documentation to reflect the new discount tier features and their usage in pricing settings.
2026-07-19 15:51:01 +03:00

177 lines
8.3 KiB
TypeScript

import { useState } from 'react'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { toast } from '@/shared/ui/toast-store'
import { Button } from '@/shared/ui/button'
import { Input } from '@/shared/ui/input'
import { Label } from '@/shared/ui/label'
import { HttpError } from '@/shared/api/client'
import type { PricingSettingsDto } from '@/shared/api/types'
import { updatePricingSettings } from './api'
type TierRow = { minConfigs: string; discountPercent: string }
export function PricingSettingsEditor({ settings }: { settings: PricingSettingsDto }) {
const { t } = useTranslation()
const queryClient = useQueryClient()
const [pricePerConfigPerQuarter, setPricePerConfigPerQuarter] = useState(
settings.pricePerConfigPerQuarter != null ? String(settings.pricePerConfigPerQuarter) : '',
)
const [pricePerConfigPerHalfYear, setPricePerConfigPerHalfYear] = useState(
settings.pricePerConfigPerHalfYear != null ? String(settings.pricePerConfigPerHalfYear) : '',
)
const [pricePerConfigPerYear, setPricePerConfigPerYear] = useState(
settings.pricePerConfigPerYear != null ? String(settings.pricePerConfigPerYear) : '',
)
const [tiers, setTiers] = useState<TierRow[]>(
settings.discountTiers.map((t) => ({ minConfigs: String(t.minConfigs), discountPercent: String(t.discountPercent) })),
)
const updateTier = (index: number, patch: Partial<TierRow>) =>
setTiers((rows) => rows.map((row, i) => (i === index ? { ...row, ...patch } : row)))
const removeTier = (index: number) => setTiers((rows) => rows.filter((_, i) => i !== index))
const addTier = () => setTiers((rows) => [...rows, { minConfigs: '', discountPercent: '' }])
// Зеркалит бэкенд-инварианты UpdatePricingSettingsCommandValidator: пороги не повторяются, скидка
// на большем пороге не меньше скидки на меньшем (иначе лесенка не прогрессивная).
const tierErrors = (() => {
if (tiers.some((t) => t.minConfigs === '' || t.discountPercent === '')) return null
const parsed = tiers.map((t) => ({ minConfigs: Number(t.minConfigs), discountPercent: Number(t.discountPercent) }))
if (parsed.some((t) => !Number.isInteger(t.minConfigs) || t.minConfigs < 1)) return t('admin.pricing.discountTierInvalidMinConfigs')
if (parsed.some((t) => !Number.isInteger(t.discountPercent) || t.discountPercent < 1 || t.discountPercent > 99))
return t('admin.pricing.discountTierInvalidPercent')
if (new Set(parsed.map((t) => t.minConfigs)).size !== parsed.length) return t('admin.pricing.discountTiersDuplicate')
const sorted = [...parsed].sort((a, b) => a.minConfigs - b.minConfigs)
for (let i = 1; i < sorted.length; i++) {
if (sorted[i].discountPercent < sorted[i - 1].discountPercent) return t('admin.pricing.discountTiersNotProgressive')
}
return null
})()
const hasIncompleteTier = tiers.some((t) => t.minConfigs === '' || t.discountPercent === '')
// Все ставки — цена за конфиг в месяц; итог за более длинный период (ставка × месяцев) не должен
// быть дешевле итога за более короткий, иначе выгоднее купить длинный тариф и не продлевать.
const isHalfYearCheaperThanQuarter =
pricePerConfigPerQuarter !== '' &&
pricePerConfigPerHalfYear !== '' &&
Number(pricePerConfigPerHalfYear) * 6 < Number(pricePerConfigPerQuarter) * 3
const isYearCheaperThanHalfYear =
pricePerConfigPerHalfYear !== '' &&
pricePerConfigPerYear !== '' &&
Number(pricePerConfigPerYear) * 12 < Number(pricePerConfigPerHalfYear) * 6
const isYearCheaperThanQuarter =
pricePerConfigPerHalfYear === '' &&
pricePerConfigPerQuarter !== '' &&
pricePerConfigPerYear !== '' &&
Number(pricePerConfigPerYear) * 12 < Number(pricePerConfigPerQuarter) * 3
const hasInvalidCombo = isHalfYearCheaperThanQuarter || isYearCheaperThanHalfYear || isYearCheaperThanQuarter
const mutation = useMutation({
mutationFn: () =>
updatePricingSettings(
pricePerConfigPerQuarter === '' ? null : Number(pricePerConfigPerQuarter),
pricePerConfigPerHalfYear === '' ? null : Number(pricePerConfigPerHalfYear),
pricePerConfigPerYear === '' ? null : Number(pricePerConfigPerYear),
tiers.map((t) => ({ minConfigs: Number(t.minConfigs), discountPercent: Number(t.discountPercent) })),
),
onSuccess: async () => {
toast.success(t('admin.pricing.updated'))
await queryClient.invalidateQueries({ queryKey: ['admin-pricing'] })
},
onError: (error) => toast.error(error instanceof HttpError ? error.detail : t('auth.genericError')),
})
return (
<form
className="flex flex-col gap-4"
onSubmit={(e) => {
e.preventDefault()
mutation.mutate()
}}
>
<div className="flex flex-col gap-1.5">
<Label htmlFor="pricePerConfigPerQuarter">{t('admin.pricing.pricePerConfigPerQuarter')}</Label>
<Input
id="pricePerConfigPerQuarter"
type="number"
min={0}
value={pricePerConfigPerQuarter}
onChange={(e) => setPricePerConfigPerQuarter(e.target.value)}
/>
<p className="text-xs text-muted-foreground">{t('admin.pricing.pricePerConfigPerQuarterHint')}</p>
</div>
<div className="flex flex-col gap-1.5">
<Label htmlFor="pricePerConfigPerHalfYear">{t('admin.pricing.pricePerConfigPerHalfYear')}</Label>
<Input
id="pricePerConfigPerHalfYear"
type="number"
min={0}
value={pricePerConfigPerHalfYear}
onChange={(e) => setPricePerConfigPerHalfYear(e.target.value)}
/>
<p className="text-xs text-muted-foreground">{t('admin.pricing.pricePerConfigPerHalfYearHint')}</p>
{isHalfYearCheaperThanQuarter && (
<p className="text-xs text-red-600">{t('admin.pricing.halfYearCheaperThanQuarter')}</p>
)}
</div>
<div className="flex flex-col gap-1.5">
<Label htmlFor="pricePerConfigPerYear">{t('admin.pricing.pricePerConfigPerYear')}</Label>
<Input
id="pricePerConfigPerYear"
type="number"
min={0}
value={pricePerConfigPerYear}
onChange={(e) => setPricePerConfigPerYear(e.target.value)}
/>
<p className="text-xs text-muted-foreground">{t('admin.pricing.pricePerConfigPerYearHint')}</p>
{isYearCheaperThanHalfYear && (
<p className="text-xs text-red-600">{t('admin.pricing.yearCheaperThanHalfYear')}</p>
)}
{isYearCheaperThanQuarter && (
<p className="text-xs text-red-600">{t('admin.pricing.yearCheaperThanQuarter')}</p>
)}
</div>
<div className="flex flex-col gap-2">
<Label>{t('admin.pricing.discountTiersTitle')}</Label>
<p className="text-xs text-muted-foreground">{t('admin.pricing.discountTiersHint')}</p>
{tiers.map((tier, index) => (
<div key={index} className="flex items-center gap-2">
<Input
type="number"
min={1}
placeholder={t('admin.pricing.discountTierMinConfigs')}
value={tier.minConfigs}
onChange={(e) => updateTier(index, { minConfigs: e.target.value })}
/>
<Input
type="number"
min={1}
max={99}
placeholder={t('admin.pricing.discountTierPercent')}
value={tier.discountPercent}
onChange={(e) => updateTier(index, { discountPercent: e.target.value })}
/>
<Button type="button" variant="ghost" size="sm" onClick={() => removeTier(index)}>
{t('admin.pricing.removeDiscountTier')}
</Button>
</div>
))}
{tierErrors && <p className="text-xs text-red-600">{tierErrors}</p>}
<div>
<Button type="button" variant="outline" size="sm" onClick={addTier}>
{t('admin.pricing.addDiscountTier')}
</Button>
</div>
</div>
<div>
<Button type="submit" disabled={mutation.isPending || hasInvalidCombo || !!tierErrors || hasIncompleteTier}>
{t('admin.roles.save')}
</Button>
</div>
</form>
)
}