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

package/pages/_app.tsx

@@ -34,7 +34,7 @@ import { PersistGate } from "redux-persist/integration/react";
 import { ThemeProvider as ThemeUIThemeProvider, useThemeUI } from "theme-ui";
 
 import { AppLayout, AppLayoutContent } from "@components/AppLayout";
-import { InAppGuideDialog } from "@src/features/inAppGuide/InAppGuideDialog";
+import { InAppGuideProvider } from "@src/features/inAppGuide/InAppGuideContext";
 
 import SliceMachineApp from "../components/App";
 import LoadingPage from "../components/LoadingPage";
@@ -123,48 +123,52 @@ function MyApp({
       <ThemeUIThemeProvider theme={theme}>
         <RemoveDarkMode>
           <ThemeProvider mode="light">
-            <ErrorBoundary
-              renderError={(error) => {
-                console.error(error);
-
-                return (
-                  <AppLayout>
-                    <AppLayoutContent>
-                      <Box alignItems="center" justifyContent="center">
-                        <DefaultErrorMessage
-                          title="Error"
-                          description="An error occurred while rendering the app."
-                        />
-                      </Box>
-                    </AppLayoutContent>
-                  </AppLayout>
-                );
-              }}
-            >
-              <TooltipProvider>
-                {!smStore || !serverState ? (
-                  <LoadingPage />
-                ) : (
-                  <Provider store={smStore.store}>
-                    <ConnectedRouter Router={Router}>
-                      <PersistGate loading={null} persistor={smStore.persistor}>
-                        <RouteChangeProvider>
-                          <Suspense fallback={<LoadingPage />}>
-                            <ComponentLayout>
-                              <Component {...pageProps} />
-                            </ComponentLayout>
-                          </Suspense>
-                        </RouteChangeProvider>
+            <TooltipProvider>
+              {!smStore || !serverState ? (
+                <LoadingPage />
+              ) : (
+                <Provider store={smStore.store}>
+                  <ConnectedRouter Router={Router}>
+                    <PersistGate loading={null} persistor={smStore.persistor}>
+                      <ErrorBoundary
+                        renderError={(error) => {
+                          console.error(error);
+
+                          return (
+                            <AppLayout>
+                              <AppLayoutContent>
+                                <Box
+                                  alignItems="center"
+                                  justifyContent="center"
+                                >
+                                  <DefaultErrorMessage
+                                    title="Error"
+                                    description="An error occurred while rendering the app."
+                                  />
+                                </Box>
+                              </AppLayoutContent>
+                            </AppLayout>
+                          );
+                        }}
+                      >
                         <Suspense>
-                          <InAppGuideDialog />
+                          <InAppGuideProvider>
+                            <RouteChangeProvider>
+                              <Suspense fallback={<LoadingPage />}>
+                                <ComponentLayout>
+                                  <Component {...pageProps} />
+                                </ComponentLayout>
+                              </Suspense>
+                            </RouteChangeProvider>
+                          </InAppGuideProvider>
                         </Suspense>
-                      </PersistGate>
-                    </ConnectedRouter>
-                    <ToastContainer />
-                  </Provider>
-                )}
-              </TooltipProvider>
-            </ErrorBoundary>
+                      </ErrorBoundary>
+                    </PersistGate>
+                  </ConnectedRouter>
+                  <ToastContainer />
+                </Provider>
+              )}
+            </TooltipProvider>
           </ThemeProvider>
         </RemoveDarkMode>
       </ThemeUIThemeProvider>

package/src/features/inAppGuide/InAppGuideContext.tsx

@@ -0,0 +1,49 @@
+import {
+  Dispatch,
+  FC,
+  PropsWithChildren,
+  SetStateAction,
+  createContext,
+  useContext,
+} from "react";
+
+import { usePersistedState } from "@src/hooks/usePersistedState";
+
+import { InAppGuideDialog } from "./InAppGuideDialog";
+
+type InAppGuideContextValue = {
+  isInAppGuideOpen: boolean;
+  setIsInAppGuideOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export const InAppGuideContext = createContext<
+  InAppGuideContextValue | undefined
+>(undefined);
+
+export const InAppGuideProvider: FC<PropsWithChildren> = (props) => {
+  const { children } = props;
+  const [isInAppGuideOpen, setIsInAppGuideOpen] = usePersistedState(
+    true,
+    "isInAppGuideOpen",
+  );
+
+  return (
+    <InAppGuideContext.Provider
+      value={{
+        isInAppGuideOpen,
+        setIsInAppGuideOpen,
+      }}
+    >
+      {children}
+      <InAppGuideDialog />
+    </InAppGuideContext.Provider>
+  );
+};
+
+export const useInAppGuide = () => {
+  const context = useContext(InAppGuideContext);
+  if (context === undefined) {
+    throw new Error("useInAppGuide must be used within a InAppGuideProvider");
+  }
+  return context;
+};

package/src/features/inAppGuide/InAppGuideDialog.tsx

@@ -14,21 +14,20 @@ import {
 import { Counter } from "@src/components/Counter";
 import { FlowerBackgroundIcon } from "@src/icons/FlowerBackgroundIcon";
 import { HelpIcon } from "@src/icons/HelpIcon";
-import { usePersistedState } from "@src/hooks/usePersistedState";
 import { useIsEmptyProject } from "@src/hooks/useIsEmptyProject";
+import { useRepositoryInformation } from "@src/hooks/useRepositoryInformation";
 
 import { IN_APP_GUIDE_CONTENT } from "./inAppGuideContent";
+import { useInAppGuide } from "./InAppGuideContext";
 
 export const InAppGuideDialog: FC = () => {
   const isEmptyProject = useIsEmptyProject();
-  const [isInAppGuideOpen, setIsInAppGuideOpen] = usePersistedState(
-    true,
-    "isInAppGuideOpen",
-  );
+  const { isInAppGuideOpen, setIsInAppGuideOpen } = useInAppGuide();
+  const { repositoryUrl } = useRepositoryInformation();
 
-  // TODO: Use IconButton from @prismicio/editor-ui
+  // TODO: Use new IconButton component from editor-ui
   const trigger =
-    isInAppGuideOpen === false && isEmptyProject === false ? (
+    isEmptyProject === false ? (
       <Box position="fixed" right={16} bottom={16}>
         <button
           style={{
@@ -87,7 +86,11 @@ export const InAppGuideDialog: FC = () => {
                   controls
                   loop
                 />
-                <Text>{content.description}</Text>
+                <Text>
+                  {typeof content.description === "function"
+                    ? content.description(repositoryUrl)
+                    : content.description}
+                </Text>
               </Box>
 
               <Separator />

package/src/features/inAppGuide/inAppGuideContent.tsx

@@ -6,32 +6,32 @@ export const IN_APP_GUIDE_CONTENT = {
     {
       title: "Add slice to your page",
       videoUrl:
-        "https://images.prismic.io/page-builder-assets/8f5df837-d8c2-4aed-832c-dec21d3915d0_New+Recording+Jul+18+2023+0350+PM.mp4",
+        "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://images.prismic.io/page-builder-assets/8f5df837-d8c2-4aed-832c-dec21d3915d0_New+Recording+Jul+18+2023+0350+PM.mp4",
+        "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://images.prismic.io/page-builder-assets/8f5df837-d8c2-4aed-832c-dec21d3915d0_New+Recording+Jul+18+2023+0350+PM.mp4",
+        "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.",
+        "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://images.prismic.io/page-builder-assets/8f5df837-d8c2-4aed-832c-dec21d3915d0_New+Recording+Jul+18+2023+0350+PM.mp4",
-      description: (
+        "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/WRITE.mp4",
+      description: (repositoryUrl: string) => (
         <>
           In your{" "}
-          <TextLink href="TODO" underline>
+          <TextLink href={repositoryUrl} underline>
             Page Builder
           </TextLink>
           , create your first page. Add slices to the page to create content.
@@ -42,16 +42,8 @@ export const IN_APP_GUIDE_CONTENT = {
     {
       title: "Render your page",
       videoUrl:
-        "https://images.prismic.io/page-builder-assets/8f5df837-d8c2-4aed-832c-dec21d3915d0_New+Recording+Jul+18+2023+0350+PM.mp4",
-      description: (
-        <>
-          Run your project on{" "}
-          <TextLink href="TODO" underline>
-            localhost
-          </TextLink>{" "}
-          to see your first page.
-        </>
-      ),
+        "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!",

package/src/hooks/useRepositoryInformation.ts

@@ -0,0 +1,24 @@
+import { useSelector } from "react-redux";
+
+import { SliceMachineStoreType } from "@src/redux/type";
+import { getApiEndpoint, getRepoName } from "@src/modules/environment";
+
+// TODO: This hook should be extracted to a new manager endpoint
+export function useRepositoryInformation() {
+  const { repositoryName, apiEndpoint } = useSelector(
+    (store: SliceMachineStoreType) => ({
+      repositoryName: getRepoName(store),
+      apiEndpoint: getApiEndpoint(store),
+    }),
+  );
+  const repositoryDomain = new URL(apiEndpoint).hostname.replace(".cdn", "");
+  const repositoryUrl = apiEndpoint
+    .replace(".cdn.", ".")
+    .replace("/api/v2", "");
+
+  return {
+    repositoryName,
+    repositoryDomain,
+    repositoryUrl,
+  };
+}