feat(tutorial): create a useMarketingContent hook and use it for tuto…

…rial link
prismicio · Oct 31, 2023 · b01da95 · b01da95
1 parent 5e97d59
commit b01da95
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 68 deletions.
diff --git a/packages/slice-machine/components/Navigation/VideoItem.tsx b/packages/slice-machine/components/Navigation/VideoItem.tsx
@@ -11,7 +11,6 @@ import { useSelector } from "react-redux";
 import ReactTooltip from "react-tooltip";
 import { Close, Flex, Paragraph } from "theme-ui";
 import { ReactTooltipPortal } from "@components/ReactTooltipPortal";
-import { VIDEO_YOUTUBE_PLAYLIST_LINK, PRISMIC_ACADEMY_URL } from "@lib/consts";
 import { telemetry } from "@src/apiClient";
 import { SideNavLink, SideNavListItem } from "@src/components/SideNav";
 import { PlayCircleIcon } from "@src/icons/PlayCircleIcon";
@@ -22,9 +21,9 @@ import {
   HoverCardMedia,
   HoverCardTitle,
 } from "@src/components/HoverCard";
-import { useAdapterName } from "@src/hooks/useAdapterName";
 import { getUserReview } from "@src/modules/userContext";
 import { SliceMachineStoreType } from "@src/redux/type";
+import { useMarketingContent } from "@src/hooks/useMarketingContent";
 
 import style from "./VideoItem.module.css";
 
@@ -35,27 +34,23 @@ type VideoItemProps = {
 
 export const VideoItem = forwardRef<HTMLLIElement, VideoItemProps>(
   ({ onClose, hasSeenTutorialsToolTip }, ref) => {
-    const adapterName = useAdapterName();
-
-    const isNext = adapterName === "@slicemachine/adapter-next";
-    const videoUrl = isNext ? PRISMIC_ACADEMY_URL : VIDEO_YOUTUBE_PLAYLIST_LINK;
+    const { tutorial } = useMarketingContent();
 
     return (
       <MaybeVideoTooltipWrapper
         onClose={onClose}
-        isNext={isNext}
         hasSeenTutorialsToolTip={hasSeenTutorialsToolTip}
       >
         <SideNavListItem ref={ref}>
           <SideNavLink
-            title={isNext ? "Academy" : "Tutorial"}
-            href={videoUrl}
+            title={tutorial.link.title}
+            href={tutorial.link.url}
             target="_blank"
             Icon={(props) => <PlayCircleIcon {...props} />}
             onClick={() => {
               void telemetry.track({
                 event: "open-video-tutorials",
-                video: videoUrl,
+                video: tutorial.link.url,
               });
               onClose();
             }}
@@ -67,24 +62,23 @@ export const VideoItem = forwardRef<HTMLLIElement, VideoItemProps>(
 );
 
 type MaybeVideoTooltipWrapperProps = VideoItemProps & {
-  isNext: boolean;
   children: ReactNode;
 };
 
 const MaybeVideoTooltipWrapper: FC<MaybeVideoTooltipWrapperProps> = ({
-  isNext,
   children,
   onClose,
   hasSeenTutorialsToolTip,
 }) => {
+  const { tutorial } = useMarketingContent();
   const { userReview } = useSelector((store: SliceMachineStoreType) => ({
     userReview: getUserReview(store),
   }));
   const open =
     !hasSeenTutorialsToolTip &&
     (userReview.onboarding || userReview.advancedRepository);
 
-  if (isNext) {
+  if (tutorial.tooltip.video !== undefined) {
     return (
       <HoverCard
         open={open}
@@ -95,19 +89,20 @@ const MaybeVideoTooltipWrapper: FC<MaybeVideoTooltipWrapperProps> = ({
         align="end"
         alignOffset={8}
       >
-        <HoverCardTitle>Need help?</HoverCardTitle>
+        <HoverCardTitle>{tutorial.tooltip.title}</HoverCardTitle>
         <HoverCardMedia
           component="video"
-          cloudName="dmtf1daqp"
-          publicId="Tooltips/pa-course-overview_eaopsn"
-          poster="/prismic-academy-101.png"
+          cloudName={tutorial.tooltip.video.cloudName}
+          publicId={tutorial.tooltip.video.publicId}
+          poster={tutorial.tooltip.video.poster}
           controls
         />
         <HoverCardDescription>
-          Learn how to turn a Next.js website into a page builder powered by
-          Prismic.
+          {tutorial.tooltip.description}
         </HoverCardDescription>
-        <HoverCardCloseButton>Got It</HoverCardCloseButton>
+        <HoverCardCloseButton>
+          {tutorial.tooltip.closeButton}
+        </HoverCardCloseButton>
       </HoverCard>
     );
   }
@@ -161,53 +156,57 @@ type ToolTipProps = {
   onClose: VideoItemProps["onClose"];
 };
 
-const ToolTip: FC<ToolTipProps> = ({ id, onClose }) => (
-  <ReactTooltipPortal>
-    <ReactTooltip
-      id={id}
-      effect="solid"
-      place="right"
-      backgroundColor="#5741c3"
-      clickable
-      className={style.videoTutorialsContainer}
-      afterHide={onClose}
-      offset={{
-        left: 80,
-      }}
-      role="tooltip"
-      getContent={() => (
-        <Flex
-          sx={{
-            maxWidth: "268px",
-            flexDirection: "column",
-          }}
-        >
+const ToolTip: FC<ToolTipProps> = ({ id, onClose }) => {
+  const { tutorial } = useMarketingContent();
+
+  return (
+    <ReactTooltipPortal>
+      <ReactTooltip
+        id={id}
+        effect="solid"
+        place="right"
+        backgroundColor="#5741c3"
+        clickable
+        className={style.videoTutorialsContainer}
+        afterHide={onClose}
+        offset={{
+          left: 80,
+        }}
+        role="tooltip"
+        getContent={() => (
           <Flex
             sx={{
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-              mb: 1,
+              maxWidth: "268px",
+              flexDirection: "column",
             }}
           >
-            <Paragraph sx={{ color: "#FFF", fontWeight: 700 }}>
-              Need Help?
-            </Paragraph>
-            <Close
-              data-testid="video-tooltip-close-button"
-              onClick={onClose}
+            <Flex
               sx={{
-                width: "26px",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                mb: 1,
               }}
-            />
+            >
+              <Paragraph sx={{ color: "#FFF", fontWeight: 700 }}>
+                {tutorial.tooltip.title}
+              </Paragraph>
+              <Close
+                data-testid="video-tooltip-close-button"
+                onClick={onClose}
+                sx={{
+                  width: "26px",
+                }}
+              />
+            </Flex>
+            <Paragraph sx={{ color: "#FFF", fontWeight: 400 }}>
+              {tutorial.tooltip.description}
+            </Paragraph>
           </Flex>
-          <Paragraph sx={{ color: "#FFF", fontWeight: 400 }}>
-            Follow our Quick Start guide to learn the basics of Slice Machine
-          </Paragraph>
-        </Flex>
-      )}
-    />
-  </ReactTooltipPortal>
-);
+        )}
+      />
+    </ReactTooltipPortal>
+  );
+};
 
 export default VideoItem;
diff --git a/packages/slice-machine/lib/consts.ts b/packages/slice-machine/lib/consts.ts
@@ -10,13 +10,6 @@ export const API_ID_REGEX = /^[A-Za-z0-9]+(?:_[A-Za-z0-9]+)*$/;
 export const API_ID_RETRO_COMPATIBLE_REGEX =
   /^[A-Za-z0-9]+(?:[_-][A-Za-z0-9]+)*$/;
 
-export const PRISMIC_ACADEMY_URL =
-  "https://prismic.io/academy/prismic-and-nextjs";
-
-// VIDEOS
-export const VIDEO_YOUTUBE_PLAYLIST_LINK =
-  "https://youtube.com/playlist?list=PLUVZjQltoA3wnaQudcqQ3qdZNZ6hyfyhH";
-
 export const VIDEO_WHAT_ARE_SLICES = "placeholders/What_are_Slices_mrvome";
 export const VIDEO_WHAT_ARE_CUSTOM_TYPES = "placeholders/CUSTOM_TYPE__0.5.0";
 

diff --git a/packages/slice-machine/src/hooks/useMarketingContent.ts b/packages/slice-machine/src/hooks/useMarketingContent.ts
@@ -0,0 +1,65 @@
+import { useAdapterName } from "./useAdapterName";
+
+type MarketingContent = {
+  tutorial: {
+    link: {
+      title: string;
+      url: string;
+    };
+    tooltip: {
+      title: string;
+      description: string;
+      closeButton?: string;
+      video?: {
+        cloudName: string;
+        publicId: string;
+        poster: string;
+      };
+    };
+  };
+};
+
+const CONTENT_BY_ADAPTER: Record<string, MarketingContent> = {
+  "@slicemachine/adapter-next": {
+    tutorial: {
+      link: {
+        title: "Academy",
+        url: "https://prismic.io/academy/prismic-and-nextjs",
+      },
+      tooltip: {
+        title: "Need Help?",
+        description:
+          "Learn how to turn a Next.js website into a page builder powered by Prismic.",
+        closeButton: "Got it",
+        video: {
+          cloudName: "dmtf1daqp",
+          publicId: "Tooltips/pa-course-overview_eaopsn",
+          poster: "/prismic-academy-101.png",
+        },
+      },
+    },
+  },
+};
+
+const DEFAULT_CONTENT: MarketingContent = {
+  tutorial: {
+    link: {
+      title: "Tutorial",
+      url: "https://youtube.com/playlist?list=PLUVZjQltoA3wnaQudcqQ3qdZNZ6hyfyhH",
+    },
+    tooltip: {
+      title: "Need Help?",
+      description:
+        "Follow our Quick Start guide to learn the basics of Slice Machine",
+    },
+  },
+};
+
+export function useMarketingContent(): MarketingContent {
+  const adapterName = useAdapterName();
+  if (adapterName === undefined) {
+    return DEFAULT_CONTENT;
+  }
+
+  return CONTENT_BY_ADAPTER[adapterName] ?? DEFAULT_CONTENT;
+}