From 283c55c1a406320d2cbefb50c70ab92440f3d401 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Tue, 25 Jul 2023 09:12:53 +0200 Subject: [PATCH] :children_crossing: Update onboarding bot Closes #400 --- .../dashboard/components/OnboardingModal.tsx | 38 +++++-------------- .../folders/components/FolderContent.tsx | 5 ++- packages/embeds/js/package.json | 2 +- .../src/features/popup/components/Popup.tsx | 2 +- .../embeds/js/src/features/popup/types.ts | 1 + packages/embeds/nextjs/package.json | 2 +- packages/embeds/react/package.json | 2 +- packages/embeds/react/src/Bubble.tsx | 21 ++++++---- packages/embeds/react/src/Popup.tsx | 32 +++++++++++----- 9 files changed, 55 insertions(+), 50 deletions(-) diff --git a/apps/builder/src/features/dashboard/components/OnboardingModal.tsx b/apps/builder/src/features/dashboard/components/OnboardingModal.tsx index 8d9ccee12..144d56174 100644 --- a/apps/builder/src/features/dashboard/components/OnboardingModal.tsx +++ b/apps/builder/src/features/dashboard/components/OnboardingModal.tsx @@ -1,47 +1,26 @@ import { chakra, useColorModeValue } from '@chakra-ui/react' import { Popup } from '@typebot.io/nextjs' import { useUser } from '@/features/account/hooks/useUser' -import { Typebot } from '@typebot.io/schemas' import React, { useEffect, useRef, useState } from 'react' -import { sendRequest } from '@typebot.io/lib' import confetti from 'canvas-confetti' -import { useToast } from '@/hooks/useToast' import { useRouter } from 'next/router' type Props = { totalTypebots: number } export const OnboardingModal = ({ totalTypebots }: Props) => { const { push } = useRouter() - const botPath = useColorModeValue( - '/bots/onboarding.json', - '/bots/onboarding-dark.json' - ) const backgroundColor = useColorModeValue('white', '#171923') const { user, updateUser } = useUser() - const [typebot, setTypebot] = useState() const confettiCanvaContainer = useRef(null) const confettiCanon = useRef() const [chosenCategories, setChosenCategories] = useState([]) - const { showToast } = useToast() - const isNewUser = user && new Date(user?.createdAt as unknown as string).toDateString() === new Date().toDateString() && totalTypebots === 0 - useEffect(() => { - const fetchTemplate = async () => { - const { data, error } = await sendRequest(botPath) - if (error) - return showToast({ title: error.name, description: error.message }) - setTypebot(data as Typebot) - } - - fetchTemplate() - }, [botPath, showToast]) - useEffect(() => { initConfettis() }, []) @@ -68,12 +47,11 @@ export const OnboardingModal = ({ totalTypebots }: Props) => { const isCompany = answer.blockId === 'cl126jioz000v2e6dwrk1f2cb' const isCategories = answer.blockId === 'cl126lb8v00142e6duv5qe08l' const isOtherCategories = answer.blockId === 'cl126pv7n001o2e6dajltc4qz' - const answeredAllQuestions = - isOtherCategories || (isCategories && !answer.message.includes('Other')) - if (answeredAllQuestions && confettiCanon.current) - shootConfettis(confettiCanon.current) if (isName) updateUser({ name: answer.message }) - if (isCompany) updateUser({ company: answer.message }) + if (isCompany) { + updateUser({ company: answer.message }) + if (confettiCanon.current) shootConfettis(confettiCanon.current) + } if (isCategories) { const onboardingCategories = answer.message.split(', ') updateUser({ onboardingCategories }) @@ -97,14 +75,16 @@ export const OnboardingModal = ({ totalTypebots }: Props) => { zIndex={9999} pointerEvents="none" /> - {typebot && ( + {user?.email && ( { return ( - {typebots && } + {typebots && isCloudProdInstance && ( + + )} {folder?.name} diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json index f3520f9a8..06308c095 100644 --- a/packages/embeds/js/package.json +++ b/packages/embeds/js/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/js", - "version": "0.1.7", + "version": "0.1.8", "description": "Javascript library to display typebots on your website", "type": "module", "main": "dist/index.js", diff --git a/packages/embeds/js/src/features/popup/components/Popup.tsx b/packages/embeds/js/src/features/popup/components/Popup.tsx index 2467e2c55..0a5f70359 100644 --- a/packages/embeds/js/src/features/popup/components/Popup.tsx +++ b/packages/embeds/js/src/features/popup/components/Popup.tsx @@ -112,7 +112,7 @@ export const Popup = (props: PopupProps) => { role="dialog" aria-modal="true" style={{ - 'z-index': 42424242, + 'z-index': props.theme?.zIndex ?? 42424242, }} > diff --git a/packages/embeds/js/src/features/popup/types.ts b/packages/embeds/js/src/features/popup/types.ts index 17971956d..7f419d70f 100644 --- a/packages/embeds/js/src/features/popup/types.ts +++ b/packages/embeds/js/src/features/popup/types.ts @@ -3,5 +3,6 @@ export type PopupParams = { theme?: { width?: string backgroundColor?: string + zIndex?: number } } diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json index 51b0267e0..a91a28367 100644 --- a/packages/embeds/nextjs/package.json +++ b/packages/embeds/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/nextjs", - "version": "0.1.7", + "version": "0.1.8", "description": "Convenient library to display typebots on your Next.js website", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json index d4a8fb5c5..1a2790729 100644 --- a/packages/embeds/react/package.json +++ b/packages/embeds/react/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/react", - "version": "0.1.7", + "version": "0.1.8", "description": "Convenient library to display typebots on your Next.js website", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/embeds/react/src/Bubble.tsx b/packages/embeds/react/src/Bubble.tsx index ac4e27ccc..d0ab35aa0 100644 --- a/packages/embeds/react/src/Bubble.tsx +++ b/packages/embeds/react/src/Bubble.tsx @@ -18,22 +18,29 @@ declare global { type BubbleElement = HTMLElement & Props export const Bubble = (props: Props) => { - const ref = useRef(null) + const bubbleElement = useRef(null) const attachBubbleToDom = useCallback((props: Props) => { - const bubbleElement = document.createElement( + const newBubbleElement = document.createElement( 'typebot-bubble' ) as BubbleElement - ref.current = bubbleElement - injectPropsToElement(ref.current, props) - document.body.append(ref.current) + bubbleElement.current = newBubbleElement + injectPropsToElement(bubbleElement.current, props) + document.body.append(bubbleElement.current) }, []) useEffect(() => { - if (!ref.current) attachBubbleToDom(props) - injectPropsToElement(ref.current as BubbleElement, props) + if (!bubbleElement.current) attachBubbleToDom(props) + injectPropsToElement(bubbleElement.current as BubbleElement, props) }, [attachBubbleToDom, props]) + useEffect(() => { + return () => { + bubbleElement.current?.remove() + bubbleElement.current = null + } + }, []) + const injectPropsToElement = (element: BubbleElement, props: Props) => { Object.assign(element, props) } diff --git a/packages/embeds/react/src/Popup.tsx b/packages/embeds/react/src/Popup.tsx index 1f4d7a21b..65126f226 100644 --- a/packages/embeds/react/src/Popup.tsx +++ b/packages/embeds/react/src/Popup.tsx @@ -18,25 +18,39 @@ declare global { type PopupElement = HTMLElement & Props export const Popup = (props: Props) => { - const ref = useRef(null) + const containerRef = useRef(null) + const popupRef = useRef(null) - const attachPopupToDom = useCallback((props: Props) => { + const attachPopupToContainer = useCallback((props: Props) => { const popupElement = document.createElement('typebot-popup') as PopupElement - ref.current = popupElement - injectPropsToElement(ref.current, props) - document.body.append(ref.current) + popupRef.current = popupElement + injectPropsToElement(popupRef.current, props) + if (!containerRef.current) { + console.warn( + 'Could not attach popup to container because containerRef.current is null' + ) + return + } + containerRef.current?.append(popupRef.current) }, []) useEffect(() => { - if (!ref.current) attachPopupToDom(props) - injectPropsToElement(ref.current as PopupElement, props) - }, [attachPopupToDom, props]) + if (!popupRef.current) attachPopupToContainer(props) + injectPropsToElement(popupRef.current as PopupElement, props) + }, [attachPopupToContainer, props]) + + useEffect(() => { + return () => { + popupRef.current?.remove() + popupRef.current = null + } + }, []) const injectPropsToElement = (element: PopupElement, props: Props) => { Object.assign(element, props) } - return null + return
} export default Popup