feat(tutorial): Update tutorial tooltip condition

prismicio · Oct 27, 2023 · 5e97d59 · 5e97d59
1 parent 9486332
commit 5e97d59
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 55 deletions.
diff --git 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
@@ -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<HTMLLIElement, VideoItemProps>(
       >
         <SideNavListItem ref={ref}>
           <SideNavLink
-            title="Tutorial"
+            title={isNext ? "Academy" : "Tutorial"}
             href={videoUrl}
             target="_blank"
             Icon={(props) => <PlayCircleIcon {...props} />}
@@ -73,10 +77,17 @@ const MaybeVideoTooltipWrapper: FC<MaybeVideoTooltipWrapperProps> = ({
   onClose,
   hasSeenTutorialsToolTip,
 }) => {
+  const { userReview } = useSelector((store: SliceMachineStoreType) => ({
+    userReview: getUserReview(store),
+  }));
+  const open =
+    !hasSeenTutorialsToolTip &&
+    (userReview.onboarding || userReview.advancedRepository);
+
   if (isNext) {
     return (
       <HoverCard
-        open={!hasSeenTutorialsToolTip}
+        open={open}
         side="right"
         onClose={onClose}
         trigger={children}
@@ -89,7 +100,7 @@ const MaybeVideoTooltipWrapper: FC<MaybeVideoTooltipWrapperProps> = ({
           component="video"
           cloudName="dmtf1daqp"
           publicId="Tooltips/pa-course-overview_eaopsn"
-          poster="/phil.png"
+          poster="/prismic-academy-101.png"
           controls
         />
         <HoverCardDescription>
@@ -102,22 +113,18 @@ const MaybeVideoTooltipWrapper: FC<MaybeVideoTooltipWrapperProps> = ({
   }
 
   return (
-    <OldVideoItem
-      onClose={onClose}
-      hasSeenTutorialsToolTip={hasSeenTutorialsToolTip}
-    >
+    <OldVideoItem onClose={onClose} open={open}>
       {children}
     </OldVideoItem>
   );
 };
 
-type OldVideoItemProps = VideoItemProps & { children: ReactNode };
+type OldVideoItemProps = PropsWithChildren<{
+  open: boolean;
+  onClose: () => void;
+}>;
 
-const OldVideoItem: FC<OldVideoItemProps> = ({
-  hasSeenTutorialsToolTip,
-  onClose,
-  children,
-}) => {
+const OldVideoItem: FC<OldVideoItemProps> = ({ open, onClose, children }) => {
   const id = "video-tool-tip";
   const ref = useRef<HTMLDivElement | null>(null);
 
@@ -126,12 +133,12 @@ const OldVideoItem: FC<OldVideoItemProps> = ({
       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<OldVideoItemProps> = ({
     >
       {children}
 
-      {!hasSeenTutorialsToolTip && <ToolTip id={id} onClose={onClose} />}
+      {open && <ToolTip id={id} onClose={onClose} />}
     </div>
   );
 };

diff --git 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
@@ -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
diff --git a/packages/slice-machine/public/prismic-academy-101.png b/packages/slice-machine/public/prismic-academy-101.png
diff --git 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"
         />
         <HoverCardDescription>
           Lorem ipsum dolor sit amet consectetur. Aenean purus aliquam vel eget