diff --git a/packages/slice-machine/components/Navigation/ChangesListItem.tsx b/packages/slice-machine/components/Navigation/ChangesListItem.tsx index ef24e683d7..166f238b13 100644 --- a/packages/slice-machine/components/Navigation/ChangesListItem.tsx +++ b/packages/slice-machine/components/Navigation/ChangesListItem.tsx @@ -18,7 +18,6 @@ import { import { userHasSeenChangesToolTip, userHasSeenSimulatorToolTip, - userHasSeenTutorialsToolTip, } from "@src/modules/userContext"; import useSliceMachineActions from "@src/modules/useSliceMachineActions"; import { ChangesRightElement } from "./ChangesRightElement"; @@ -68,13 +67,11 @@ const useOpenChangesHoverCard = () => { const { hasSeenChangesToolTip, hasSeenSimulatorToolTip, - hasSeenTutorialsToolTip, isSavingCustomType, isSavingSlice, } = useSelector((store: SliceMachineStoreType) => ({ hasSeenChangesToolTip: userHasSeenChangesToolTip(store), hasSeenSimulatorToolTip: userHasSeenSimulatorToolTip(store), - hasSeenTutorialsToolTip: userHasSeenTutorialsToolTip(store), isSavingCustomType: isLoading(store, LoadingKeysEnum.SAVE_CUSTOM_TYPE), isSavingSlice: isLoading(store, LoadingKeysEnum.SAVE_SLICE), })); @@ -88,7 +85,6 @@ const useOpenChangesHoverCard = () => { return ( !hasSeenChangesToolTip && - hasSeenTutorialsToolTip && hasSeenSimulatorToolTip && !isSaving && prevIsSaving diff --git a/packages/slice-machine/components/Navigation/VideoItem.tsx b/packages/slice-machine/components/Navigation/VideoItem.tsx index 2453610bf9..9e0d821cdf 100644 --- a/packages/slice-machine/components/Navigation/VideoItem.tsx +++ b/packages/slice-machine/components/Navigation/VideoItem.tsx @@ -5,7 +5,9 @@ import { RefCallback, ReactNode, forwardRef, + PropsWithChildren, } from "react"; +import { useSelector } from "react-redux"; import ReactTooltip from "react-tooltip"; import { Close, Flex, Paragraph } from "theme-ui"; import { ReactTooltipPortal } from "@components/ReactTooltipPortal"; @@ -21,6 +23,8 @@ import { HoverCardTitle, } from "@src/components/HoverCard"; import { useAdapterName } from "@src/hooks/useAdapterName"; +import { getUserReview } from "@src/modules/userContext"; +import { SliceMachineStoreType } from "@src/redux/type"; import style from "./VideoItem.module.css"; @@ -44,7 +48,7 @@ export const VideoItem = forwardRef( > } @@ -73,10 +77,17 @@ const MaybeVideoTooltipWrapper: FC = ({ onClose, hasSeenTutorialsToolTip, }) => { + const { userReview } = useSelector((store: SliceMachineStoreType) => ({ + userReview: getUserReview(store), + })); + const open = + !hasSeenTutorialsToolTip && + (userReview.onboarding || userReview.advancedRepository); + if (isNext) { return ( = ({ component="video" cloudName="dmtf1daqp" publicId="Tooltips/pa-course-overview_eaopsn" - poster="/phil.png" + poster="/prismic-academy-101.png" controls /> @@ -102,22 +113,18 @@ const MaybeVideoTooltipWrapper: FC = ({ } return ( - + {children} ); }; -type OldVideoItemProps = VideoItemProps & { children: ReactNode }; +type OldVideoItemProps = PropsWithChildren<{ + open: boolean; + onClose: () => void; +}>; -const OldVideoItem: FC = ({ - hasSeenTutorialsToolTip, - onClose, - children, -}) => { +const OldVideoItem: FC = ({ open, onClose, children }) => { const id = "video-tool-tip"; const ref = useRef(null); @@ -126,12 +133,12 @@ const OldVideoItem: FC = ({ if (ref.current) { return; } - if (node && !hasSeenTutorialsToolTip) { + if (node && open) { setTimeout(() => ReactTooltip.show(node), 5000); + ref.current = node; } - ref.current = node; }, - [hasSeenTutorialsToolTip], + [open], ); return ( @@ -144,7 +151,7 @@ const OldVideoItem: FC = ({ > {children} - {!hasSeenTutorialsToolTip && } + {open && } ); }; diff --git a/packages/slice-machine/components/Navigation/index.test.tsx b/packages/slice-machine/components/Navigation/index.test.tsx index 92b93ddfa4..b4ac31021e 100644 --- a/packages/slice-machine/components/Navigation/index.test.tsx +++ b/packages/slice-machine/components/Navigation/index.test.tsx @@ -270,7 +270,7 @@ describe("Side Navigation", () => { renderSideNavigation({ canUpdate: true }); - const link = (await screen.findByText("Tutorial")).parentElement + const link = (await screen.findByText("Academy")).parentElement ?.parentElement as HTMLElement; await waitFor(() => @@ -284,7 +284,7 @@ describe("Side Navigation", () => { }); test("Video Item not next", async () => { - const { user } = renderSideNavigation({ canUpdate: true }); + renderSideNavigation({ canUpdate: true }); const link = (await screen.findByText("Tutorial")).parentElement ?.parentElement as HTMLElement; @@ -293,16 +293,5 @@ describe("Side Navigation", () => { "https://youtube.com/playlist?list=PLUVZjQltoA3wnaQudcqQ3qdZNZ6hyfyhH", ); expect(link).toHaveAttribute("target", "_blank"); - - await user.hover(link); - - const tooltip = await screen.findByRole("tooltip"); - expect(tooltip).toBeVisible(); - const closeButton = await within(tooltip).findByTestId( - "video-tooltip-close-button", - ); - await user.click(closeButton); - - expect(screen.queryByRole("tooltip")).not.toBeInTheDocument(); }); }); diff --git a/packages/slice-machine/lib/builders/SliceBuilder/SimulatorButton/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/SimulatorButton/index.tsx index 19729cbef1..bc965829d1 100644 --- a/packages/slice-machine/lib/builders/SliceBuilder/SimulatorButton/index.tsx +++ b/packages/slice-machine/lib/builders/SliceBuilder/SimulatorButton/index.tsx @@ -7,10 +7,7 @@ import { useRouter } from "next/router"; import ReactTooltip from "react-tooltip"; import { PlayCircleIcon } from "@src/icons/PlayCircleIcon"; -import { - userHasSeenSimulatorToolTip, - userHasSeenTutorialsToolTip, -} from "@src/modules/userContext"; +import { userHasSeenSimulatorToolTip } from "@src/modules/userContext"; import { useSelector } from "react-redux"; import { SliceMachineStoreType } from "@src/redux/type"; import useSliceMachineActions from "@src/modules/useSliceMachineActions"; @@ -97,28 +94,18 @@ const SimulatorButton: React.FC<{ const { setSeenSimulatorToolTip } = useSliceMachineActions(); - const { hasSeenSimulatorTooltip, hasSeenTutorialsToolTip } = useSelector( + const { hasSeenSimulatorTooltip } = useSelector( (store: SliceMachineStoreType) => ({ hasSeenSimulatorTooltip: userHasSeenSimulatorToolTip(store), - hasSeenTutorialsToolTip: userHasSeenTutorialsToolTip(store), }), ); useEffect(() => { const node = ref.current; - if ( - node && - isSimulatorAvailableForFramework && - !hasSeenSimulatorTooltip && - hasSeenTutorialsToolTip - ) { + if (node && isSimulatorAvailableForFramework && !hasSeenSimulatorTooltip) { setTimeout(() => ReactTooltip.show(node), 5000); } - }, [ - isSimulatorAvailableForFramework, - hasSeenSimulatorTooltip, - hasSeenTutorialsToolTip, - ]); + }, [isSimulatorAvailableForFramework, hasSeenSimulatorTooltip]); const onCloseToolTip = () => { setSeenSimulatorToolTip(); @@ -131,9 +118,7 @@ const SimulatorButton: React.FC<{ const disabled = !isSimulatorAvailableForFramework || isTouched; const shouldShowSimulatorTooltip = - isSimulatorAvailableForFramework && - !hasSeenSimulatorTooltip && - hasSeenTutorialsToolTip; + isSimulatorAvailableForFramework && !hasSeenSimulatorTooltip; const shouldShowNeedToSaveTooltip = isSimulatorAvailableForFramework && diff --git a/packages/slice-machine/public/phil.png b/packages/slice-machine/public/phil.png deleted file mode 100644 index 2d9af1c0bc..0000000000 Binary files a/packages/slice-machine/public/phil.png and /dev/null differ diff --git a/packages/slice-machine/public/prismic-academy-101.png b/packages/slice-machine/public/prismic-academy-101.png new file mode 100644 index 0000000000..4710c39b1a Binary files /dev/null and b/packages/slice-machine/public/prismic-academy-101.png differ diff --git a/packages/slice-machine/src/components/HoverCard/HoverCard.stories.tsx b/packages/slice-machine/src/components/HoverCard/HoverCard.stories.tsx index ab7030cee4..a2e5faa044 100644 --- a/packages/slice-machine/src/components/HoverCard/HoverCard.stories.tsx +++ b/packages/slice-machine/src/components/HoverCard/HoverCard.stories.tsx @@ -56,7 +56,7 @@ export const Video = { component="video" cloudName="dmtf1daqp" publicId="Tooltips/pa-course-overview_eaopsn" - poster="phil.png" + poster="prismic-academy-101.png" /> Lorem ipsum dolor sit amet consectetur. Aenean purus aliquam vel eget