Kirill
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import Button from '@mui/material/Button'
|
||
import type { ButtonProps } from '@mui/material/Button'
|
||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||
import { useUnit } from 'effector-react'
|
||
import { addToCart } from '@/entities/cart/api/cart-api'
|
||
import { $user } from '@/shared/model/auth'
|
||
import { addNotification } from '@/shared/model/notification'
|
||
|
||
type Props = {
|
||
productId: string
|
||
qty?: number
|
||
loggedOutLabel?: string
|
||
} & Omit<ButtonProps, 'onClick'>
|
||
|
||
export function AddToCartButton(props: Props) {
|
||
const { productId, qty = 1, loggedOutLabel = 'Войдите, чтобы купить', disabled, children, ...rest } = props
|
||
const qc = useQueryClient()
|
||
const user = useUnit($user)
|
||
|
||
const addMut = useMutation({
|
||
mutationFn: () => addToCart({ productId, qty }),
|
||
onSuccess: () => {
|
||
void qc.invalidateQueries({ queryKey: ['me', 'cart'] })
|
||
addNotification({
|
||
type: 'success',
|
||
message: 'Товар добавлен в корзину',
|
||
actionLabel: 'Перейти в корзину',
|
||
actionPath: '/cart',
|
||
})
|
||
},
|
||
})
|
||
|
||
return (
|
||
<Button
|
||
{...rest}
|
||
disabled={Boolean(disabled) || !user || addMut.isPending}
|
||
onClick={(e) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
addMut.mutate()
|
||
}}
|
||
>
|
||
{user ? (children ?? 'В корзину') : loggedOutLabel}
|
||
</Button>
|
||
)
|
||
}
|