feat(subscription): add support for wallet overflow and downgrade group functionality in subscription plans
This commit is contained in:
CaIon
+1
-1
@@ -297,7 +297,7 @@ export function SubscriptionPurchaseDialog(props: Props) {
|
||||
)}
|
||||
<div className='flex items-center justify-between'>
|
||||
<span className='text-muted-foreground text-sm'>
|
||||
{t('Received amount')}
|
||||
{t('Plan Quota')}
|
||||
</span>
|
||||
<span className='flex items-center gap-1 text-sm'>
|
||||
<Package className='h-3.5 w-3.5' />
|
||||
|
||||
+4
-1
@@ -52,6 +52,7 @@ import {
|
||||
invalidateUserSubscription,
|
||||
deleteUserSubscription,
|
||||
} from '../../api'
|
||||
import { formatQuota } from '@/lib/format'
|
||||
import { formatTimestamp } from '../../lib'
|
||||
import type { PlanRecord, UserSubscriptionRecord } from '../../types'
|
||||
|
||||
@@ -301,7 +302,9 @@ export function UserSubscriptionsDialog(props: Props) {
|
||||
const sub = record.subscription
|
||||
const total = Number(sub.amount_total || 0)
|
||||
const used = Number(sub.amount_used || 0)
|
||||
return total > 0 ? `${used}/${total}` : t('Unlimited')
|
||||
return total > 0
|
||||
? `${formatQuota(used)}/${formatQuota(total)}`
|
||||
: t('Unlimited')
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
+1
-1
@@ -160,7 +160,7 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
|
||||
},
|
||||
{
|
||||
id: 'total_amount',
|
||||
header: t('Received amount'),
|
||||
header: t('Plan Quota'),
|
||||
meta: { mobileHidden: true },
|
||||
cell: ({ row }) => {
|
||||
const total = Number(row.original.plan.total_amount || 0)
|
||||
|
||||
+102
-23
@@ -66,6 +66,7 @@ import {
|
||||
createWaffoPancakeSubscriptionProduct,
|
||||
listWaffoPancakeSubscriptionProductOptions,
|
||||
} from '../api'
|
||||
import { getCurrencyDisplay, getCurrencyLabel } from '@/lib/currency'
|
||||
import { getDurationUnitOptions, getResetPeriodOptions } from '../constants'
|
||||
import {
|
||||
getPlanFormSchema,
|
||||
@@ -91,6 +92,9 @@ export function SubscriptionsMutateDrawer({
|
||||
const { t } = useTranslation()
|
||||
const isEdit = !!currentRow?.plan?.id
|
||||
const { triggerRefresh } = useSubscriptions()
|
||||
const { meta: currencyMeta } = getCurrencyDisplay()
|
||||
const tokensOnly = currencyMeta.kind === 'tokens'
|
||||
const currencyLabel = getCurrencyLabel()
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [groupOptions, setGroupOptions] = useState<string[]>([])
|
||||
const [creatingPancakeProduct, setCreatingPancakeProduct] = useState(false)
|
||||
@@ -314,7 +318,7 @@ export function SubscriptionsMutateDrawer({
|
||||
name='price_amount'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('Actual Amount')}</FormLabel>
|
||||
<FormLabel>{t('Plan Price')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
@@ -336,12 +340,22 @@ export function SubscriptionsMutateDrawer({
|
||||
name='total_amount'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('Received amount')}</FormLabel>
|
||||
<FormLabel>
|
||||
{t('Quota ({{currency}})', { currency: currencyLabel })}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
type='number'
|
||||
min={0}
|
||||
step={tokensOnly ? 1 : 0.01}
|
||||
placeholder={
|
||||
tokensOnly
|
||||
? t('Enter quota in tokens')
|
||||
: t('Enter quota in {{currency}}', {
|
||||
currency: currencyLabel,
|
||||
})
|
||||
}
|
||||
onChange={(e) =>
|
||||
field.onChange(parseFloat(e.target.value) || 0)
|
||||
}
|
||||
@@ -349,7 +363,7 @@ export function SubscriptionsMutateDrawer({
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{t(
|
||||
'0 means unlimited. The value is converted to quota units when saved.'
|
||||
'Total quota included in the plan, usable per billing period. 0 means unlimited.'
|
||||
)}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
@@ -398,6 +412,53 @@ export function SubscriptionsMutateDrawer({
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='downgrade_group'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('Downgrade Group')}</FormLabel>
|
||||
<Select
|
||||
items={[
|
||||
{
|
||||
value: '__none__',
|
||||
label: t('Downgrade to pre-purchase group'),
|
||||
},
|
||||
...groupOptions.map((g) => ({ value: g, label: g })),
|
||||
]}
|
||||
onValueChange={(v) =>
|
||||
field.onChange(v === '__none__' ? '' : v)
|
||||
}
|
||||
value={field.value || ''}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue
|
||||
placeholder={t('Downgrade to pre-purchase group')}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent alignItemWithTrigger={false}>
|
||||
<SelectGroup>
|
||||
<SelectItem value='__none__'>
|
||||
{t('Downgrade to pre-purchase group')}
|
||||
</SelectItem>
|
||||
{groupOptions.map((g) => (
|
||||
<SelectItem key={g} value={g}>
|
||||
{g}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>
|
||||
{t('Downgrade to this group after the subscription expires')}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='max_purchase_per_user'
|
||||
@@ -423,27 +484,27 @@ export function SubscriptionsMutateDrawer({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 gap-3 sm:grid-cols-2'>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='sort_order'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('Sort Order')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
type='number'
|
||||
onChange={(e) =>
|
||||
field.onChange(parseInt(e.target.value, 10) || 0)
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='sort_order'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('Sort Order')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
type='number'
|
||||
onChange={(e) =>
|
||||
field.onChange(parseInt(e.target.value, 10) || 0)
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className='flex flex-col gap-3'>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='enabled'
|
||||
@@ -479,6 +540,24 @@ export function SubscriptionsMutateDrawer({
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='allow_wallet_overflow'
|
||||
render={({ field }) => (
|
||||
<FormItem className={sideDrawerSwitchItemClassName()}>
|
||||
<FormLabel className='!mt-0'>
|
||||
{t('Allow wallet balance after quota used up')}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</SideDrawerSection>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user