77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import { CloseIcon, VideoPopoverIcon } from '@/components/icons'
|
|
import {
|
|
PopoverContent,
|
|
PopoverArrow,
|
|
PopoverBody,
|
|
IconButton,
|
|
Popover,
|
|
PopoverTrigger,
|
|
IconButtonProps,
|
|
} from '@chakra-ui/react'
|
|
import { useOnboardingDisclosure } from '../hooks/useOnboardingDisclosure'
|
|
import { onboardingVideos } from '../data'
|
|
import { useUser } from '@/features/account/hooks/useUser'
|
|
import { ForgedBlockDefinition } from '@typebot.io/forge-repository/types'
|
|
import { YoutubeIframe } from './YoutubeIframe'
|
|
|
|
type Props = {
|
|
type: keyof typeof onboardingVideos
|
|
defaultIsOpen?: boolean
|
|
blockDef?: ForgedBlockDefinition
|
|
children: ({ onToggle }: { onToggle: () => void }) => JSX.Element
|
|
}
|
|
|
|
const Root = ({ type, blockDef, children }: Props) => {
|
|
const { user, updateUser } = useUser()
|
|
const youtubeId =
|
|
onboardingVideos[type]?.youtubeId ?? blockDef?.onboarding?.youtubeId
|
|
const { isOpen, onClose, onToggle } = useOnboardingDisclosure({
|
|
key: type,
|
|
updateUser,
|
|
user,
|
|
blockDef,
|
|
})
|
|
|
|
if (!youtubeId) return children({ onToggle })
|
|
|
|
return (
|
|
<Popover isOpen={isOpen} placement="right" isLazy>
|
|
<PopoverTrigger>{children({ onToggle })}</PopoverTrigger>
|
|
|
|
<PopoverContent aspectRatio="1.5" width="640px">
|
|
<PopoverArrow />
|
|
<PopoverBody h="full" p="5">
|
|
<YoutubeIframe id={youtubeId} />
|
|
<IconButton
|
|
icon={<CloseIcon />}
|
|
aria-label={'Close'}
|
|
pos="absolute"
|
|
top="-3"
|
|
right="-3"
|
|
colorScheme="blackAlpha"
|
|
size="sm"
|
|
rounded="full"
|
|
onClick={onClose}
|
|
/>
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|
|
|
|
const TriggerIconButton = (props: Omit<IconButtonProps, 'aria-label'>) => (
|
|
<IconButton
|
|
size="sm"
|
|
icon={<VideoPopoverIcon />}
|
|
aria-label={'Open Bubbles help video'}
|
|
variant="ghost"
|
|
colorScheme="blue"
|
|
{...props}
|
|
/>
|
|
)
|
|
|
|
export const VideoOnboardingPopover = {
|
|
Root,
|
|
TriggerIconButton,
|
|
}
|