feat(onboarding): video tutorials link (#1450)

Author: BohdanOne

packages/slice-machine/src/features/onboarding/OnboardingGuide/OnboardingGuide.tsx

@@ -13,6 +13,7 @@ import {
   OnboardingProvider,
   useOnboardingContext,
 } from "@/features/onboarding/OnboardingProvider";
+import { OnboardingTutorial } from "@/features/onboarding/OnboardingTutorial/OnboardingTutorial";
 import { useOnboardingCardVisibilityExperiment } from "@/features/onboarding/useOnboardingCardVisibilityExperiment";
 import { useOnboardingExperiment } from "@/features/onboarding/useOnboardingExperiment";
 import { useUpdateAvailable } from "@/hooks/useUpdateAvailable";
@@ -101,6 +102,7 @@ function OnboardingGuideCard() {
             getValueLabel={(value, max) => `${value}/${max}`}
           />
           <OnboardingProgressStepper buttonSize={buttonSize} />
+          {isOnboardingCardVisibilityExperiment && <OnboardingTutorial />}
         </CardContent>
       </Card>
     </div>

packages/slice-machine/src/features/onboarding/OnboardingTutorial/OnboardingTutorial.tsx

@@ -0,0 +1,28 @@
+import { Box, Icon, Text } from "@prismicio/editor-ui";
+
+import { useOnboardingCardVisibilityExperiment } from "@/features/onboarding/useOnboardingCardVisibilityExperiment";
+import { useMarketingContent } from "@/hooks/useMarketingContent";
+
+export function OnboardingTutorial() {
+  const { variant } = useOnboardingCardVisibilityExperiment();
+  const { tutorial } = useMarketingContent();
+
+  const color = variant === "dark" ? "white" : "grey11";
+  const url = tutorial?.url;
+
+  if (url === undefined) return null;
+
+  return (
+    <Box justifyContent="center" padding={{ block: 6 }}>
+      <Text href={url} variant="smallBold" color={color}>
+        Or watch our full course
+        <Icon
+          name="playCircle"
+          color={color}
+          size="small"
+          sx={{ marginLeft: 4 }}
+        />
+      </Text>
+    </Box>
+  );
+}

packages/slice-machine/src/hooks/useMarketingContent.ts

@@ -1,21 +1,8 @@
 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;
-      };
-    };
+  tutorial?: {
+    url: string;
   };
   masterSliceLibrary?: {
     exampleLinkUrl: string;
@@ -27,21 +14,7 @@ type MarketingContent = {
 const CONTENT_BY_ADAPTER: Record<string, MarketingContent> = {
   "@slicemachine/adapter-next": {
     tutorial: {
-      link: {
-        title: "Learn Prismic",
-        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",
-        },
-      },
+      url: "https://prismic.dev/course/next",
     },
     masterSliceLibrary: {
       exampleLinkUrl: "https://slicify-app.vercel.app/slice-library",
@@ -51,24 +24,20 @@ const CONTENT_BY_ADAPTER: Record<string, MarketingContent> = {
         "https://res.cloudinary.com/dmtf1daqp/video/upload/v1715957263/Slice_library_video_oemhy0.mp4",
     },
   },
-};
-
-const DEFAULT_CONTENT: MarketingContent = {
-  tutorial: {
-    link: {
-      title: "Learn Prismic",
-      url: "https://youtube.com/playlist?list=PLUVZjQltoA3wnaQudcqQ3qdZNZ6hyfyhH",
+  "@slicemachine/adapter-nuxt": {
+    tutorial: {
+      url: "https://prismic.dev/course/nuxt",
     },
-    tooltip: {
-      title: "Need Help?",
-      description:
-        "Follow our Quick Start guide to learn the basics of Slice Machine",
+  },
+  "@slicemachine/adapter-sveltekit": {
+    tutorial: {
+      url: "https://prismic.dev/course/sveltekit",
     },
   },
 };
 
 export function useMarketingContent(): MarketingContent {
   const adapterName = useAdapterName();
 
-  return CONTENT_BY_ADAPTER[adapterName] ?? DEFAULT_CONTENT;
+  return CONTENT_BY_ADAPTER[adapterName] ?? {};
 }