fix: migrate select to Base UI items API (#4655)
This commit is contained in:
+15
-6
@@ -13,6 +13,7 @@ import {
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
@@ -270,6 +271,12 @@ export function SubscriptionPurchaseDialog(props: Props) {
|
||||
{hasEpay && (
|
||||
<div className='grid grid-cols-[minmax(0,1fr)_auto] gap-2'>
|
||||
<Select
|
||||
items={[
|
||||
...(props.epayMethods || []).map((m) => ({
|
||||
value: m.type,
|
||||
label: m.name || m.type,
|
||||
})),
|
||||
]}
|
||||
value={selectedEpayMethod}
|
||||
onValueChange={(v) =>
|
||||
v !== null && setSelectedEpayMethod(v)
|
||||
@@ -279,12 +286,14 @@ export function SubscriptionPurchaseDialog(props: Props) {
|
||||
<SelectTrigger className='flex-1'>
|
||||
<SelectValue>{selectedEpayMethodLabel}</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(props.epayMethods || []).map((m) => (
|
||||
<SelectItem key={m.type} value={m.type}>
|
||||
{m.name || m.type}
|
||||
</SelectItem>
|
||||
))}
|
||||
<SelectContent alignItemWithTrigger={false}>
|
||||
<SelectGroup>
|
||||
{(props.epayMethods || []).map((m) => (
|
||||
<SelectItem key={m.type} value={m.type}>
|
||||
{m.name || m.type}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
|
||||
+21
-7
@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
@@ -183,19 +184,32 @@ export function UserSubscriptionsDialog(props: Props) {
|
||||
<div className='mt-4 space-y-4'>
|
||||
<div className='flex gap-2'>
|
||||
<Select
|
||||
items={[
|
||||
...plans.map((p) => ({
|
||||
value: String(p.plan.id),
|
||||
label: (
|
||||
<>
|
||||
{p.plan.title}($
|
||||
{Number(p.plan.price_amount || 0).toFixed(2)})
|
||||
</>
|
||||
),
|
||||
})),
|
||||
]}
|
||||
value={selectedPlanId}
|
||||
onValueChange={(v) => v !== null && setSelectedPlanId(v)}
|
||||
>
|
||||
<SelectTrigger className='flex-1'>
|
||||
<SelectValue placeholder={t('Select subscription plan')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{plans.map((p) => (
|
||||
<SelectItem key={p.plan.id} value={String(p.plan.id)}>
|
||||
{p.plan.title} ($
|
||||
{Number(p.plan.price_amount || 0).toFixed(2)})
|
||||
</SelectItem>
|
||||
))}
|
||||
<SelectContent alignItemWithTrigger={false}>
|
||||
<SelectGroup>
|
||||
{plans.map((p) => (
|
||||
<SelectItem key={p.plan.id} value={String(p.plan.id)}>
|
||||
{p.plan.title} ($
|
||||
{Number(p.plan.price_amount || 0).toFixed(2)})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
|
||||
+43
-20
@@ -18,6 +18,7 @@ import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
@@ -237,6 +238,10 @@ export function SubscriptionsMutateDrawer({
|
||||
<FormItem>
|
||||
<FormLabel>{t('Upgrade Group')}</FormLabel>
|
||||
<Select
|
||||
items={[
|
||||
{ value: '__none__', label: t('No Upgrade') },
|
||||
...groupOptions.map((g) => ({ value: g, label: g })),
|
||||
]}
|
||||
onValueChange={(v) =>
|
||||
field.onChange(v === '__none__' ? '' : v)
|
||||
}
|
||||
@@ -247,15 +252,17 @@ export function SubscriptionsMutateDrawer({
|
||||
<SelectValue placeholder={t('No Upgrade')} />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value='__none__'>
|
||||
{t('No Upgrade')}
|
||||
</SelectItem>
|
||||
{groupOptions.map((g) => (
|
||||
<SelectItem key={g} value={g}>
|
||||
{g}
|
||||
<SelectContent alignItemWithTrigger={false}>
|
||||
<SelectGroup>
|
||||
<SelectItem value='__none__'>
|
||||
{t('No Upgrade')}
|
||||
</SelectItem>
|
||||
))}
|
||||
{groupOptions.map((g) => (
|
||||
<SelectItem key={g} value={g}>
|
||||
{g}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
@@ -344,6 +351,12 @@ export function SubscriptionsMutateDrawer({
|
||||
<FormItem>
|
||||
<FormLabel>{t('Duration Unit')}</FormLabel>
|
||||
<Select
|
||||
items={[
|
||||
...durationUnitOpts.map((o) => ({
|
||||
value: o.value,
|
||||
label: o.label,
|
||||
})),
|
||||
]}
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
>
|
||||
@@ -352,12 +365,14 @@ export function SubscriptionsMutateDrawer({
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{durationUnitOpts.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
<SelectContent alignItemWithTrigger={false}>
|
||||
<SelectGroup>
|
||||
{durationUnitOpts.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
@@ -426,6 +441,12 @@ export function SubscriptionsMutateDrawer({
|
||||
<FormItem>
|
||||
<FormLabel>{t('Reset Cycle')}</FormLabel>
|
||||
<Select
|
||||
items={[
|
||||
...resetPeriodOpts.map((o) => ({
|
||||
value: o.value,
|
||||
label: o.label,
|
||||
})),
|
||||
]}
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
>
|
||||
@@ -434,12 +455,14 @@ export function SubscriptionsMutateDrawer({
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{resetPeriodOpts.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
<SelectContent alignItemWithTrigger={false}>
|
||||
<SelectGroup>
|
||||
{resetPeriodOpts.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
|
||||
Reference in New Issue
Block a user