update items

This commit is contained in:
2025-12-26 11:19:14 -03:00
parent e7aa6a6694
commit 3cdded360f
11 changed files with 392 additions and 26 deletions

View File

@@ -43,6 +43,8 @@ export const formSchema = z.object({
export type Schema = z.infer<typeof formSchema>
export type Enrollment = z.infer<typeof enrollment>
export type User = {
id: string
name: string

View File

@@ -213,7 +213,7 @@ export default function Route({
</CardHeader>
<CardContent className="space-y-4">
<div className="grid lg:grid-cols-[repeat(3,1fr)_auto] w-full gap-1.5">
<div className="grid lg:grid-cols-[repeat(3,1fr)_auto] w-full gap-3">
{/* Header */}
<>
<Cell>Colaborador</Cell>

View File

@@ -5,11 +5,11 @@ import { useToggle } from 'ahooks'
import { format } from 'date-fns'
import { ptBR } from 'react-day-picker/locale'
import { Button } from '@repo/ui/components/ui/button'
import { Calendar } from '@repo/ui/components/ui/calendar'
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput
} from '@repo/ui/components/ui/input-group'
import {
@@ -46,11 +46,12 @@ export function ScheduledForInput({ value, onChange }: ScheduledForInputProps) {
</InputGroupAddon>
{selected && (
<InputGroupAddon align="inline-end" className="mr-0">
<Button
variant="link"
size="icon-sm"
className="cursor-pointer text-muted-foreground"
<InputGroupAddon align="inline-end">
<InputGroupButton
variant="ghost"
tabIndex={-1}
size="icon-xs"
className="cursor-pointer"
onClick={(e) => {
e.preventDefault()
setDate(undefined)
@@ -59,7 +60,7 @@ export function ScheduledForInput({ value, onChange }: ScheduledForInputProps) {
}}
>
<XIcon />
</Button>
</InputGroupButton>
</InputGroupAddon>
)}
</InputGroup>

View File

@@ -3,13 +3,13 @@ import { XIcon, CheckIcon, AlertTriangleIcon, UserIcon } from 'lucide-react'
import { formatCPF } from '@brazilian-utils/brazilian-utils'
import { cn, initials } from '@repo/ui/lib/utils'
import { Button } from '@repo/ui/components/ui/button'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { Abbr } from '@repo/ui/components/abbr'
import { Spinner } from '@repo/ui/components/ui/spinner'
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput
} from '@repo/ui/components/ui/input-group'
import { CommandItem } from '@repo/ui/components/ui/command'
@@ -100,17 +100,18 @@ export function UserPicker({
{value && (
<InputGroupAddon align="inline-end" className="mr-0">
<Button
variant="link"
size="icon-sm"
className="cursor-pointer text-muted-foreground"
<InputGroupButton
variant="ghost"
tabIndex={-1}
size="icon-xs"
className="cursor-pointer"
onClick={(e) => {
e.preventDefault()
onChange?.(null)
}}
>
<XIcon />
</Button>
</InputGroupButton>
</InputGroupAddon>
)}

View File

@@ -30,6 +30,7 @@ import {
import {
MAX_ITEMS,
formSchema,
type Enrollment,
type Course,
type User
} from '../_.$orgid.enrollments.add/data'
@@ -38,7 +39,6 @@ import { Cell } from '../_.$orgid.enrollments.add/route'
import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
import { UserPicker } from '../_.$orgid.enrollments.add/user-picker'
import { Summary } from './bulk'
import { applyDiscount } from './discount'
import { currency } from './utils'
import { useWizard } from '@/components/wizard'
@@ -48,6 +48,11 @@ const emptyRow = {
scheduled_for: undefined
}
type Item = {
course: Enrollment['course']
quantity: number
}
const formSchemaAssigned = formSchema.extend({
coupon: z
.object({
@@ -101,8 +106,6 @@ export function Assigned({
0
)
console.log(coupon)
const onSearch = async (search: string) => {
const params = new URLSearchParams({ q: search })
const r = await fetch(`/${orgid}/users.json?${params.toString()}`)
@@ -110,15 +113,25 @@ export function Assigned({
return hits
}
const onSubmit_ = async (data: Schema) => {
await onSubmit(data)
const onSubmit_ = async ({ enrollments }: Schema) => {
const items = Object.values(
enrollments.reduce<Record<string, Item>>((acc, e) => {
const id = e.course.id
acc[id] ??= { course: e.course, quantity: 0 }
acc[id].quantity++
return acc
}, {})
)
await onSubmit({ enrollments, items })
wizard('payment')
}
return (
<Form {...form}>
<form onSubmit={handleSubmit(onSubmit_)} className="space-y-4">
<div className="grid w-full gap-1.5 lg:grid-cols-[3fr_3fr_2fr_2fr_auto]">
<div className="grid w-full gap-3 lg:grid-cols-[3fr_3fr_2fr_2fr_auto]">
{/* Header */}
<>
<Cell>Colaborador</Cell>

View File

@@ -125,7 +125,7 @@ export function Bulk({
return (
<Form {...form}>
<form onSubmit={handleSubmit(onSubmit_)} className="space-y-4">
<div className="grid w-full gap-1.5 lg:grid-cols-[4fr_2fr_2fr_2fr_auto]">
<div className="grid w-full gap-3 lg:grid-cols-[4fr_2fr_2fr_2fr_auto]">
{/* Header */}
<>
<Cell>Curso</Cell>

View File

@@ -1,4 +1,4 @@
import { useForm, Controller } from 'react-hook-form'
import { useForm, Controller, useWatch } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { ErrorMessage } from '@hookform/error-message'
import z from 'zod'
@@ -9,7 +9,28 @@ import { Label } from '@repo/ui/components/ui/label'
import { RadioGroup, RadioGroupItem } from '@repo/ui/components/ui/radio-group'
import { Separator } from '@repo/ui/components/ui/separator'
import { Checkbox } from '@repo/ui/components/ui/checkbox'
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSeparator,
FieldSet
} from '@repo/ui/components/ui/field'
import { Input } from '@repo/ui/components/ui/input'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@repo/ui/components/ui/select'
import { Textarea } from '@repo/ui/components/ui/textarea'
import { useWizard } from '@/components/wizard'
import { Card, CardContent } from '@repo/ui/components/ui/card'
const formSchema = z.object({
payment_method: z.enum(['PIX', 'BANK_SLIP', 'CREDIT_CARD'], {
@@ -33,6 +54,7 @@ export function Payment({ onSubmit, defaultValues }: PaymentProps) {
},
resolver: zodResolver(formSchema)
})
const paymentMethod = useWatch({ control, name: 'payment_method' })
const onSubmit_ = async (data: Schema) => {
await onSubmit(data)
@@ -82,6 +104,8 @@ export function Payment({ onSubmit, defaultValues }: PaymentProps) {
)}
/>
{paymentMethod === 'CREDIT_CARD' ? <CreditCard /> : null}
<Separator />
<div className="flex justify-between gap-4 *:cursor-pointer">
@@ -100,3 +124,78 @@ export function Payment({ onSubmit, defaultValues }: PaymentProps) {
</form>
)
}
export function CreditCard() {
return (
<Card className="lg:max-w-md">
<CardContent>
<FieldGroup>
<FieldSet>
<FieldGroup>
<Field>
<FieldLabel htmlFor="checkout-7j9-card-number-uw1">
Número do cartão
</FieldLabel>
<Input id="checkout-7j9-card-number-uw1" required />
</Field>
<Field>
<FieldLabel htmlFor="checkout-7j9-card-name-43j">
Nome do titular
</FieldLabel>
<Input required />
</Field>
<div className="grid grid-cols-3 gap-4">
<Field>
<FieldLabel htmlFor="checkout-exp-month-ts6">Mês</FieldLabel>
<Select defaultValue="">
<SelectTrigger id="checkout-exp-month-ts6">
<SelectValue placeholder="MM" />
</SelectTrigger>
<SelectContent>
<SelectItem value="01">01</SelectItem>
<SelectItem value="02">02</SelectItem>
<SelectItem value="03">03</SelectItem>
<SelectItem value="04">04</SelectItem>
<SelectItem value="05">05</SelectItem>
<SelectItem value="06">06</SelectItem>
<SelectItem value="07">07</SelectItem>
<SelectItem value="08">08</SelectItem>
<SelectItem value="09">09</SelectItem>
<SelectItem value="10">10</SelectItem>
<SelectItem value="11">11</SelectItem>
<SelectItem value="12">12</SelectItem>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel htmlFor="checkout-7j9-exp-year-f59">
Ano
</FieldLabel>
<Select defaultValue="">
<SelectTrigger id="checkout-7j9-exp-year-f59">
<SelectValue placeholder="AAAA" />
</SelectTrigger>
<SelectContent>
<SelectItem value="2024">2024</SelectItem>
<SelectItem value="2025">2025</SelectItem>
<SelectItem value="2026">2026</SelectItem>
<SelectItem value="2027">2027</SelectItem>
<SelectItem value="2028">2028</SelectItem>
<SelectItem value="2029">2029</SelectItem>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel htmlFor="checkout-7j9-cvv">CVC</FieldLabel>
<Input id="checkout-7j9-cvv" placeholder="123" required />
</Field>
</div>
</FieldGroup>
</FieldSet>
</FieldGroup>
</CardContent>
</Card>
)
}