489 lines
14 KiB
TypeScript
489 lines
14 KiB
TypeScript
import { useRequest, useToggle } from 'ahooks'
|
|
import { PatternFormat } from 'react-number-format'
|
|
import { ExternalLinkIcon, PencilIcon, SearchIcon } from 'lucide-react'
|
|
import { Controller, useForm } from 'react-hook-form'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { z } from 'zod'
|
|
import valid from 'card-validator'
|
|
|
|
import { Currency } from '@repo/ui/components/currency'
|
|
import { Button } from '@repo/ui/components/ui/button'
|
|
import { Separator } from '@repo/ui/components/ui/separator'
|
|
import { Spinner } from '@repo/ui/components/ui/spinner'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableFooter,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow
|
|
} from '@repo/ui/components/ui/table'
|
|
import {
|
|
Item,
|
|
ItemActions,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemGroup,
|
|
ItemTitle
|
|
} from '@repo/ui/components/ui/item'
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger
|
|
} from '@repo/ui/components/ui/dialog'
|
|
|
|
import { useWizard } from '@/components/wizard'
|
|
import { type WizardState } from './route'
|
|
import { applyDiscount } from './discount'
|
|
import { paymentMethods } from '@repo/ui/routes/orders/data'
|
|
import {
|
|
Field,
|
|
FieldDescription,
|
|
FieldError,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
FieldSet
|
|
} from '@repo/ui/components/ui/field'
|
|
import { Input } from '@repo/ui/components/ui/input'
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupButton,
|
|
InputGroupInput
|
|
} from '@repo/ui/components/ui/input-group'
|
|
|
|
type ReviewProps = {
|
|
state: WizardState
|
|
onSubmit: (value: WizardState) => void | Promise<void>
|
|
}
|
|
|
|
export function Review({ state, onSubmit }: ReviewProps) {
|
|
const wizard = useWizard()
|
|
const [loading, { set }] = useToggle()
|
|
const { coupon, items } = state || { items: [], coupon: {} }
|
|
const subtotal =
|
|
items?.reduce(
|
|
(acc, { course, quantity }) =>
|
|
acc +
|
|
(course?.unit_price || 0) *
|
|
(Number.isFinite(quantity) && quantity > 0 ? quantity : 1),
|
|
0
|
|
) || 0
|
|
const discount = coupon
|
|
? applyDiscount(subtotal, coupon.amount, coupon.type) * -1
|
|
: 0
|
|
const total = subtotal > 0 ? subtotal + discount : 0
|
|
|
|
return (
|
|
<>
|
|
<Address total={total} {...state} />
|
|
|
|
<form
|
|
onSubmit={async (e) => {
|
|
e.preventDefault()
|
|
set(true)
|
|
await onSubmit(state)
|
|
}}
|
|
className="space-y-4"
|
|
>
|
|
<Table className="pointer-events-none">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Curso</TableHead>
|
|
<TableHead>Quantidade</TableHead>
|
|
<TableHead>Valor unit.</TableHead>
|
|
<TableHead>Total</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{items?.map(({ course, quantity }, index) => {
|
|
return (
|
|
<TableRow key={index}>
|
|
<TableCell>{course.name}</TableCell>
|
|
<TableCell>{quantity}</TableCell>
|
|
<TableCell>
|
|
<Currency>{course.unit_price}</Currency>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{course.unit_price * quantity}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
<TableFooter>
|
|
<TableRow>
|
|
<TableCell className="text-right" colSpan={3}>
|
|
Subtotal
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{subtotal}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="text-right" colSpan={3}>
|
|
Descontos
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{discount}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="text-right" colSpan={3}>
|
|
Total
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{total}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableFooter>
|
|
</Table>
|
|
|
|
<Separator />
|
|
|
|
<div className="flex justify-between gap-4 *:cursor-pointer">
|
|
<Button
|
|
type="button"
|
|
variant="link"
|
|
className="text-black dark:text-white"
|
|
onClick={() => wizard('payment')}
|
|
tabIndex={-1}
|
|
>
|
|
Voltar
|
|
</Button>
|
|
|
|
<Button type="submit" disabled={loading}>
|
|
{loading && <Spinner />}
|
|
Pagar <Currency>{total}</Currency>
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function Address({
|
|
total,
|
|
payment_method,
|
|
credit_card
|
|
}: WizardState & { total: number }) {
|
|
const numberValidation = valid.number(credit_card?.number)
|
|
|
|
return (
|
|
<ItemGroup className="grid lg:grid-cols-2 gap-4">
|
|
<Item variant="outline" className="items-start">
|
|
<ItemContent>
|
|
<ItemTitle>Endereço de cobrança</ItemTitle>
|
|
<ul className="text-muted-foreground text-sm leading-normal font-normal text-balance">
|
|
Rua Monsenhor Ivo Zanlorenzi, nº 5190, ap 1802
|
|
<br />
|
|
Cidade Industrial
|
|
<br />
|
|
Curitiba, Paraná
|
|
<br />
|
|
81280-350
|
|
</ul>
|
|
</ItemContent>
|
|
<ItemActions>
|
|
<AddressDialog />
|
|
</ItemActions>
|
|
</Item>
|
|
|
|
<Item variant="outline" className="items-start">
|
|
<ItemContent>
|
|
<ItemTitle>Forma de pagamento</ItemTitle>
|
|
<ItemDescription>
|
|
{credit_card ? (
|
|
<>
|
|
{numberValidation.card?.niceType} (Crédito) ****{' '}
|
|
{credit_card.number.slice(-4)}
|
|
<br />
|
|
1x <Currency>{total}</Currency>
|
|
</>
|
|
) : (
|
|
<>
|
|
{payment_method
|
|
? paymentMethods[payment_method]
|
|
: payment_method}
|
|
</>
|
|
)}
|
|
</ItemDescription>
|
|
</ItemContent>
|
|
</Item>
|
|
</ItemGroup>
|
|
)
|
|
}
|
|
|
|
const formSchema = z.object({
|
|
postcode: z.string().min(1, 'Digite um CEP'),
|
|
address1: z.string().min(1, 'Digite um endereço'),
|
|
address2: z.string().optional(),
|
|
neighborhood: z.string().min(1, 'Digite o bairro'),
|
|
city: z.string().min(1, 'Digite a cidade'),
|
|
state: z.string().min(1, 'Digite o estado')
|
|
})
|
|
|
|
type Address = z.infer<typeof formSchema>
|
|
|
|
export function AddressDialog() {
|
|
const [open, { toggle, set }] = useToggle()
|
|
const { handleSubmit, control, reset } = useForm({
|
|
resolver: zodResolver(formSchema)
|
|
})
|
|
|
|
const onSubmit = async (data: Address) => {
|
|
set(false)
|
|
console.log(data)
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={toggle}>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
type="button"
|
|
className="text-muted-foreground cursor-pointer"
|
|
size="icon-sm"
|
|
>
|
|
<PencilIcon />
|
|
<span className="sr-only">Editar endereço</span>
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Editar endereço</DialogTitle>
|
|
<DialogDescription>
|
|
Este endereço será utilizado para a emissão da NFS-e.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<PostcodeForm onChange={reset} />
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<Controller
|
|
control={control}
|
|
name="address1"
|
|
defaultValue=""
|
|
render={({ field, fieldState }) => (
|
|
<Field data-invalid={fieldState.invalid}>
|
|
<FieldLabel htmlFor={field.name}>Endereço</FieldLabel>
|
|
<Input
|
|
id={field.name}
|
|
aria-invalid={fieldState.invalid}
|
|
{...field}
|
|
/>
|
|
|
|
{fieldState.invalid && (
|
|
<FieldError errors={[fieldState.error]} />
|
|
)}
|
|
</Field>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
control={control}
|
|
name="address2"
|
|
defaultValue=""
|
|
render={({ field, fieldState }) => (
|
|
<Field data-invalid={fieldState.invalid}>
|
|
<FieldLabel htmlFor={field.name}>
|
|
Complemento{' '}
|
|
<span className="text-muted-foreground">(opcional)</span>
|
|
</FieldLabel>
|
|
<Input
|
|
id={field.name}
|
|
aria-invalid={fieldState.invalid}
|
|
{...field}
|
|
/>
|
|
|
|
{fieldState.invalid && (
|
|
<FieldError errors={[fieldState.error]} />
|
|
)}
|
|
</Field>
|
|
)}
|
|
/>
|
|
</FieldSet>
|
|
|
|
<FieldSet className="grid grid-cols-3">
|
|
{/* Neighborhood */}
|
|
<Controller
|
|
control={control}
|
|
name="neighborhood"
|
|
defaultValue=""
|
|
render={({ field, fieldState }) => (
|
|
<Field data-invalid={fieldState.invalid}>
|
|
<FieldLabel htmlFor={field.name}>Bairro</FieldLabel>
|
|
<Input
|
|
id={field.name}
|
|
aria-invalid={fieldState.invalid}
|
|
{...field}
|
|
/>
|
|
|
|
{fieldState.invalid && (
|
|
<FieldError errors={[fieldState.error]} />
|
|
)}
|
|
</Field>
|
|
)}
|
|
/>
|
|
{/* City */}
|
|
<Controller
|
|
control={control}
|
|
name="city"
|
|
defaultValue=""
|
|
render={({ field, fieldState }) => (
|
|
<Field data-invalid={fieldState.invalid}>
|
|
<FieldLabel htmlFor={field.name}>Cidade</FieldLabel>
|
|
<Input
|
|
id={field.name}
|
|
aria-invalid={fieldState.invalid}
|
|
{...field}
|
|
/>
|
|
|
|
{fieldState.invalid && (
|
|
<FieldError errors={[fieldState.error]} />
|
|
)}
|
|
</Field>
|
|
)}
|
|
/>
|
|
{/* State */}
|
|
<Controller
|
|
control={control}
|
|
name="state"
|
|
defaultValue=""
|
|
render={({ field, fieldState }) => (
|
|
<Field data-invalid={fieldState.invalid}>
|
|
<FieldLabel htmlFor={field.name}>Estado</FieldLabel>
|
|
<Input
|
|
id={field.name}
|
|
aria-invalid={fieldState.invalid}
|
|
{...field}
|
|
/>
|
|
|
|
{fieldState.invalid && (
|
|
<FieldError errors={[fieldState.error]} />
|
|
)}
|
|
</Field>
|
|
)}
|
|
/>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
|
|
<DialogFooter className="*:cursor-pointer">
|
|
<DialogClose asChild>
|
|
<Button
|
|
variant="link"
|
|
type="button"
|
|
tabIndex={-1}
|
|
className="text-black dark:text-white"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</DialogClose>
|
|
|
|
<Button type="submit">Atualizar endereço</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
type PostcodeFormProps = {
|
|
onChange: (value: Address) => void
|
|
}
|
|
|
|
function PostcodeForm({ onChange }: PostcodeFormProps) {
|
|
const formSchema = z.object({
|
|
postcode: z.string().min(1, 'Digite um CEP')
|
|
})
|
|
|
|
type Schema = z.infer<typeof formSchema>
|
|
|
|
const { control, handleSubmit, setError, formState } = useForm({
|
|
resolver: zodResolver(formSchema)
|
|
})
|
|
|
|
const { runAsync, loading } = useRequest(
|
|
async (cep: string) => {
|
|
return await fetch(`/~/api/cep/${cep}.json`)
|
|
},
|
|
{ manual: true }
|
|
)
|
|
|
|
const onSubmit = async ({ postcode }: Schema) => {
|
|
const r = await runAsync(postcode)
|
|
|
|
if (r.ok) {
|
|
onChange?.((await r.json()) as Address)
|
|
return
|
|
}
|
|
|
|
setError('postcode', { message: 'CEP não encontrado' })
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<FieldGroup>
|
|
<Controller
|
|
control={control}
|
|
name="postcode"
|
|
defaultValue=""
|
|
render={({ field: { onChange, ref, ...field }, fieldState }) => (
|
|
<Field data-invalid={fieldState.invalid}>
|
|
{/* CEP */}
|
|
<FieldLabel htmlFor={field.name}>CEP</FieldLabel>
|
|
<InputGroup>
|
|
<PatternFormat
|
|
id={field.name}
|
|
format="#####-###"
|
|
mask="_"
|
|
placeholder="_____-___"
|
|
customInput={InputGroupInput}
|
|
getInputRef={ref}
|
|
aria-invalid={fieldState.invalid}
|
|
onValueChange={({ value }) => {
|
|
onChange(value)
|
|
}}
|
|
{...field}
|
|
/>
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupButton
|
|
type="submit"
|
|
variant="secondary"
|
|
tabIndex={formState.isSubmitted ? -1 : 0}
|
|
className="cursor-pointer"
|
|
>
|
|
{loading ? <Spinner /> : <SearchIcon />}
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
|
|
{fieldState.invalid && <FieldError errors={[fieldState.error]} />}
|
|
|
|
<FieldDescription>
|
|
<a
|
|
href="https://buscacepinter.correios.com.br/app/endereco/index.php"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex gap-1 items-center "
|
|
tabIndex={-1}
|
|
>
|
|
Não sei o CEP <ExternalLinkIcon className="size-4" />
|
|
</a>
|
|
</FieldDescription>
|
|
</Field>
|
|
)}
|
|
/>
|
|
</FieldGroup>
|
|
</form>
|
|
)
|
|
}
|