test: stories for dialogs

apps/nextjs/src/components/AppComponents/DialogContext/index.tsx

@@ -9,7 +9,9 @@ interface DialogContextType {
   setDialogWindow: React.Dispatch<React.SetStateAction<DialogTypes>>;
 }
 
-const DialogContext = createContext<DialogContextType | undefined>(undefined);
+export const DialogContext = createContext<DialogContextType | undefined>(
+  undefined,
+);
 
 export const DialogProvider: React.FC<React.PropsWithChildren> = ({
   children,

apps/nextjs/src/components/DialogControl/DialogContents.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import type { AnalyticsContext } from "@/components/ContextProviders/AnalyticsProvider";
+import { analyticsContext } from "@/components/ContextProviders/AnalyticsProvider";
+
+import { DialogContext } from "../AppComponents/DialogContext";
+import { DemoProvider } from "../ContextProviders/Demo";
+import DialogContents from "./DialogContents";
+
+const meta: Meta<typeof DialogContents> = {
+  title: "Components/Dialogs/DialogContents",
+  component: DialogContents,
+  decorators: (Story, { parameters }) => {
+    return (
+      <DialogContext.Provider
+        value={{
+          dialogWindow: parameters.dialogWindow,
+          setDialogWindow: () => {},
+        }}
+      >
+        <Story />
+      </DialogContext.Provider>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DialogContents>;
+
+export const ShareChat: Story = {
+  args: {
+    lesson: {},
+    chatId: "example-chat-id",
+    isShared: false,
+  },
+  parameters: {
+    dialogWindow: "share-chat",
+  },
+};
+
+export const ReportContent: Story = {
+  args: {},
+  parameters: {
+    dialogWindow: "report-content",
+  },
+};
+
+export const DemoShareLocked: Story = {
+  args: {},
+  parameters: {
+    dialogWindow: "demo-share-locked",
+    auth: "signedInDemo",
+  },
+  decorators: [
+    (Story) => (
+      <DemoProvider>
+        <Story />
+      </DemoProvider>
+    ),
+  ],
+};
+
+export const DemoInterstitial: Story = {
+  args: {},
+  parameters: {
+    dialogWindow: "demo-interstitial",
+    auth: "signedInDemo",
+  },
+  decorators: [
+    (Story) => (
+      <DemoProvider>
+        <Story />
+      </DemoProvider>
+    ),
+  ],
+};
+
+export const Feedback: Story = {
+  args: {},
+  parameters: {
+    dialogWindow: "feedback",
+  },
+  decorators: (Story) => {
+    return (
+      <analyticsContext.Provider
+        value={
+          {
+            track: () => {},
+            trackEvent: () => {},
+            identify: () => {},
+            reset: () => {},
+            page: () => {},
+            posthogAiBetaClient: {
+              capture: () => {},
+              getSurveys: (fn) => {
+                fn([
+                  {
+                    id: "01917ac7-e417-0000-0c86-99ef890e6807",
+                    name: "End of Aila generation survey launch aug24",
+                    type: "api",
+                    questions: [
+                      {
+                        type: "rating",
+                        question:
+                          "How would you rate the structure and content of this lesson plan?",
+                      },
+                      {
+                        type: "rating",
+                        question:
+                          "How would you rate the ease of creating this lesson with Aila?",
+                      },
+                      {
+                        type: "open",
+                        question:
+                          "What suggestions do you have to improve the lesson planning experience with Aila?",
+                      },
+                    ],
+                  },
+                ]);
+              },
+            },
+          } as unknown as AnalyticsContext
+        }
+      >
+        <Story />
+      </analyticsContext.Provider>
+    );
+  },
+};

apps/nextjs/src/components/DialogControl/DialogContents.tsx

@@ -35,7 +35,7 @@ const dialogTitlesAndIcons: Record<
     iconName: "warning",
   },
   "demo-interstitial": {
-    title: "Lesson limit reached",
+    title: "Demo lesson limits",
     iconName: "warning",
   },
   "demo-share-locked": {
@@ -67,7 +67,13 @@ const DialogContents = ({
       <OakModalCenterBody
         title={dialogTitlesAndIcons[dialogWindow].title}
         iconName={dialogTitlesAndIcons[dialogWindow].iconName}
-        hideIcon={dialogWindow === "feedback" || dialogWindow === "share-chat"}
+        iconOverride={
+          dialogWindow === "feedback" || dialogWindow === "share-chat"
+            ? {
+                $display: "none",
+              }
+            : {}
+        }
       >
         {children}
         {dialogWindow === "share-chat" && chatId && (

apps/nextjs/src/mocks/clerk/nextjsComponents.tsx

@@ -41,7 +41,10 @@ const states: Record<ClerkProviderProps["state"], Context> = {
     isSignedIn: true,
     user: {
       ...mockUser,
-      publicMetadata: { ...mockUser.publicMetadata, isDemoUser: true },
+      publicMetadata: {
+        ...mockUser.publicMetadata,
+        labs: { ...mockUser.publicMetadata.labs, isDemoUser: true },
+      },
     },
   },
 };