553 lines
17 KiB
TypeScript
553 lines
17 KiB
TypeScript
import { formatCEP } from '@brazilian-utils/brazilian-utils'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { useRequest, useToggle } from 'ahooks'
|
|
import valid from 'card-validator'
|
|
import { ExternalLinkIcon, PencilIcon, SearchIcon } from 'lucide-react'
|
|
import { Controller, useForm } from 'react-hook-form'
|
|
import { PatternFormat } from 'react-number-format'
|
|
import { useParams } from 'react-router'
|
|
import { z } from 'zod'
|
|
|
|
import { useWizard } from '@/components/wizard'
|
|
import { Abbr } from '@repo/ui/components/abbr'
|
|
import { Currency } from '@repo/ui/components/currency'
|
|
import { Button } from '@repo/ui/components/ui/button'
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger
|
|
} from '@repo/ui/components/ui/dialog'
|
|
import {
|
|
Empty,
|
|
EmptyContent,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyTitle
|
|
} from '@repo/ui/components/ui/empty'
|
|
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'
|
|
import {
|
|
Item,
|
|
ItemActions,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemGroup,
|
|
ItemTitle
|
|
} from '@repo/ui/components/ui/item'
|
|
import { Kbd } from '@repo/ui/components/ui/kbd'
|
|
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 { paymentMethods } from '@repo/ui/routes/orders/data'
|
|
|
|
import { useWizardStore } from './store'
|
|
|
|
type ReviewProps = {
|
|
onSubmit: () => void | Promise<void>
|
|
}
|
|
|
|
export function Review({ onSubmit }: ReviewProps) {
|
|
const wizard = useWizard()
|
|
const { items, summary, address, coupon } = useWizardStore()
|
|
const { subtotal, discount, interest_amount, total } = summary()
|
|
const [loading, { set }] = useToggle()
|
|
|
|
return (
|
|
<>
|
|
<Summary />
|
|
|
|
<form
|
|
onSubmit={async (e) => {
|
|
e.preventDefault()
|
|
set(true)
|
|
await onSubmit()
|
|
}}
|
|
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>
|
|
|
|
{/* Summary */}
|
|
<TableFooter>
|
|
<TableRow>
|
|
<TableCell className="text-right" colSpan={3}>
|
|
Subtotal
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{subtotal}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
{/* Discount */}
|
|
<TableRow>
|
|
<TableCell colSpan={3}>
|
|
<span className="flex gap-1 justify-end">
|
|
Descontos
|
|
{coupon && (
|
|
<Kbd>
|
|
<Abbr maxLen={8}>{coupon.code}</Abbr>
|
|
</Kbd>
|
|
)}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{discount}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
{/* Interest */}
|
|
{interest_amount ? (
|
|
<TableRow>
|
|
<TableCell className="text-right" colSpan={3}>
|
|
Juros
|
|
</TableCell>
|
|
<TableCell>
|
|
<Currency>{interest_amount}</Currency>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
<></>
|
|
)}
|
|
{/* Total */}
|
|
<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 || !formSchema.safeParse(address).success}
|
|
>
|
|
{loading && <Spinner />}
|
|
Pagar <Currency>{total}</Currency>
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function Summary() {
|
|
const { summary, credit_card, payment_method, installments, address } =
|
|
useWizardStore()
|
|
const { total } = summary()
|
|
const numberValidation = valid.number(credit_card?.number)
|
|
|
|
return (
|
|
<ItemGroup className="grid lg:grid-cols-2 gap-4">
|
|
{address ? (
|
|
<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">
|
|
{address?.address1}
|
|
{address?.address2 ? <>, {address?.address2}</> : null}
|
|
<br />
|
|
{address?.neighborhood}
|
|
<br />
|
|
{address?.city}, {address?.state}
|
|
<br />
|
|
{formatCEP(address?.postcode)}
|
|
</ul>
|
|
</ItemContent>
|
|
<ItemActions>
|
|
<AddressDialog>
|
|
<Button
|
|
variant="ghost"
|
|
type="button"
|
|
className="text-muted-foreground cursor-pointer"
|
|
size="icon-sm"
|
|
>
|
|
<PencilIcon />
|
|
<span className="sr-only">Editar endereço</span>
|
|
</Button>
|
|
</AddressDialog>
|
|
</ItemActions>
|
|
</Item>
|
|
) : (
|
|
<Empty className="border border-dashed md:p-6 gap-4">
|
|
<EmptyHeader>
|
|
<EmptyTitle>Nenhum endereço ainda</EmptyTitle>
|
|
<EmptyDescription>
|
|
Você ainda não cadastrou nenhum endereço.
|
|
</EmptyDescription>
|
|
</EmptyHeader>
|
|
<EmptyContent>
|
|
<AddressDialog>
|
|
<Button size="sm" variant="outline" className="cursor-pointer">
|
|
Cadastrar endereço
|
|
</Button>
|
|
</AddressDialog>
|
|
</EmptyContent>
|
|
</Empty>
|
|
)}
|
|
|
|
<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 />
|
|
{installments}x{' '}
|
|
<Currency>{total / Number(installments)}</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')
|
|
})
|
|
|
|
export type Address = z.infer<typeof formSchema>
|
|
|
|
export function AddressDialog({ children }) {
|
|
const { update, address } = useWizardStore()
|
|
const { orgid } = useParams()
|
|
const { runAsync } = useRequest(
|
|
async (address: Address) => {
|
|
await fetch(`/~/api/orgs/${orgid}/address`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ address }),
|
|
headers: new Headers({ 'Content-Type': 'application/json' })
|
|
})
|
|
},
|
|
{
|
|
manual: true
|
|
}
|
|
)
|
|
const { handleSubmit, control, reset, formState } = useForm({
|
|
defaultValues: address,
|
|
resolver: zodResolver(formSchema)
|
|
})
|
|
const [open, { toggle, set: setOpen }] = useToggle(address === undefined)
|
|
|
|
const onSubmit = async (address: Address) => {
|
|
await runAsync(address)
|
|
setOpen(false)
|
|
update({ address })
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={toggle}>
|
|
<DialogTrigger asChild>{children}</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>
|
|
)}
|
|
/>
|
|
|
|
<FieldGroup 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>
|
|
)}
|
|
/>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
|
|
<DialogFooter className="*:cursor-pointer">
|
|
<DialogClose asChild>
|
|
<Button
|
|
variant="link"
|
|
type="button"
|
|
tabIndex={-1}
|
|
className="text-black dark:text-white"
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
</DialogClose>
|
|
|
|
<Button type="submit" disabled={formState.isSubmitting}>
|
|
{formState.isSubmitting && <Spinner />} 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 { address } = useWizardStore()
|
|
const { control, handleSubmit, setError, formState } = useForm({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: address
|
|
})
|
|
|
|
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>
|
|
)
|
|
}
|