slice-machine-ui 1.19.2-dev-in-app-guide.3 → 1.19.2-dev-in-app-guide.4

package/src/features/inAppGuide/InAppGuideDialog.tsx

@@ -15,17 +15,27 @@ import { Counter } from "@src/components/Counter";
 import { FlowerBackgroundIcon } from "@src/icons/FlowerBackgroundIcon";
 import { HelpIcon } from "@src/icons/HelpIcon";
 import { useIsEmptyProject } from "@src/hooks/useIsEmptyProject";
-import { useRepositoryInformation } from "@src/hooks/useRepositoryInformation";
 
-import { IN_APP_GUIDE_CONTENT } from "./inAppGuideContent";
+import { useInAppGuideContent } from "./inAppGuideContent";
 import { useInAppGuide } from "./InAppGuideContext";
 
 export const InAppGuideDialog: FC = () => {
   const isEmptyProject = useIsEmptyProject();
   const { isInAppGuideOpen, setIsInAppGuideOpen } = useInAppGuide();
-  const { repositoryUrl } = useRepositoryInformation();
+  const inAppGuideContent = useInAppGuideContent();
 
   // TODO: Use new IconButton component from editor-ui
+  //
+  // It should be used like that:
+  // <IconButton
+  //    color="purple"
+  //    radius="full"
+  //    renderIcon={() => <HelpIcon />}
+  //    onClick={() => {
+  //      setIsInAppGuideOpen(!isInAppGuideOpen);
+  //    }}
+  // />
+
   const trigger =
     isEmptyProject === false ? (
       <Box position="fixed" right={16} bottom={16}>
@@ -62,13 +72,25 @@ export const InAppGuideDialog: FC = () => {
       position="bottomRight"
       size={{
         width: 360,
-        height: 440,
+        height: 456,
       }}
     >
-      <DialogHeader title={IN_APP_GUIDE_CONTENT.title} />
+      <DialogHeader title={inAppGuideContent.title} />
       <DialogContent>
         <ScrollArea>
-          {IN_APP_GUIDE_CONTENT.steps.map((content, index) => (
+          <Box
+            flexDirection="column"
+            padding={{ inline: 16, block: 8 }}
+            gap={8}
+          >
+            <Text>{inAppGuideContent.description}</Text>
+          </Box>
+
+          <Box>
+            <Separator />
+          </Box>
+
+          {inAppGuideContent.steps.map((content, index) => (
             <Box key={index} flexDirection="column">
               <Box flexDirection="column" padding={16} gap={8}>
                 <Box alignItems="center" gap={8}>
@@ -86,11 +108,7 @@ export const InAppGuideDialog: FC = () => {
                   controls
                   loop
                 />
-                <Text>
-                  {typeof content.description === "function"
-                    ? content.description(repositoryUrl)
-                    : content.description}
-                </Text>
+                <Text>{content.description}</Text>
               </Box>
 
               <Separator />
@@ -98,12 +116,8 @@ export const InAppGuideDialog: FC = () => {
           ))}
 
           <Box flexDirection="column" padding={16} gap={4}>
-            <Text variant="bold">{IN_APP_GUIDE_CONTENT.successTitle}</Text>
-            <Box flexDirection="column">
-              {IN_APP_GUIDE_CONTENT.successSteps.map((content, index) => (
-                <Text key={index}>• {content}</Text>
-              ))}
-            </Box>
+            <Text variant="bold">{inAppGuideContent.successTitle}</Text>
+            <Text>{inAppGuideContent.successDescription}</Text>
           </Box>
         </ScrollArea>
       </DialogContent>

package/src/features/inAppGuide/inAppGuideContent.tsx

@@ -1,60 +1,67 @@
-import { TextLink } from "@prismicio/editor-ui";
+import { TextLink, Text } from "@prismicio/editor-ui";
 
-export const IN_APP_GUIDE_CONTENT = {
-  title: "Build your first page in 5 minutes",
-  steps: [
-    {
-      title: "Add slice to your page",
-      videoUrl:
-        "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/ADD_SLICE.mp4",
-      description:
-        "Try one of our templates to get started after the creation of your first page",
-    },
-    {
-      title: "Code your page",
-      videoUrl:
-        "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/CODE_SNIP.mp4",
-      description:
-        "Slice Machine provides code snippets. Copy-paste them into your page component to render your page.",
-    },
-    {
-      title: "Push models to the Page Builder",
-      videoUrl:
-        "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PUSH.mp4",
-      description:
-        "You have just created some models, but you can't use them yet. First, you must push them to the Page Builder. The Page Builder is where you create content. Go head — push your models.",
-    },
-    {
-      title: "Create your first page",
-      videoUrl:
-        "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/WRITE.mp4",
-      description: (repositoryUrl: string) => (
-        <>
-          In your{" "}
-          <TextLink href={repositoryUrl} underline>
-            Page Builder
-          </TextLink>
-          , create your first page. Add slices to the page to create content.
-          Then save and publish and come back here.
-        </>
-      ),
-    },
-    {
-      title: "Render your page",
-      videoUrl:
-        "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PREVIEW.mp4",
-      description: "Run your project on localhost to see your first page.",
-    },
-  ],
-  successTitle: "You have made your first page!",
-  successSteps: [
-    "Edit, and style your slices",
-    "Create more pages in the Page Builder",
-    <>
-      Learn how to{" "}
-      <TextLink href="TODO" underline>
-        manage your routes
-      </TextLink>
-    </>,
-  ],
-};
+import { useRepositoryInformation } from "@src/hooks/useRepositoryInformation";
+
+export function useInAppGuideContent() {
+  const { repositoryUrl } = useRepositoryInformation();
+
+  return {
+    title: "Build a page in 5 minutes",
+    description:
+      "Great, now that you have a page type, let's make it a live page!",
+    steps: [
+      {
+        title: "Add slices to your page type",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/ADD_SLICE.mp4",
+        description: "Use slice templates and add them to your page type.",
+      },
+      {
+        title: "Code your page",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/CODE_SNIP.mp4",
+        description:
+          "If you don't already have a page component, copy-paste the page snippets provided in your page type to create one.",
+      },
+      {
+        title: "Push to your Page Builder",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PUSH.mp4",
+        description:
+          "You have just created some models, but you can't use them yet. First, you must push them to the Page Builder. The Page Builder is where you create content. Go head — push your models.",
+      },
+      {
+        title: "Create content",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/WRITE.mp4",
+        description: (
+          <>
+            Open your{" "}
+            <TextLink href={repositoryUrl} underline>
+              Page Builder
+            </TextLink>
+            , create a page, add slices, save and publish. Then, come back here.
+          </>
+        ),
+      },
+      {
+        title: "Render your page",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PREVIEW.mp4",
+        description: (
+          <>
+            To render the page, run your project in your terminal and open
+            localhost to the page UID.{" "}
+            <Text variant="italic" component="span" sx={{}}>
+              Example:
+            </Text>{" "}
+            localhost:3000/my_page_uid
+          </>
+        ),
+      },
+    ],
+    successTitle: "Next",
+    successDescription:
+      "Create more slices and then go back to the Page Builder to build out your website.",
+  };
+}