refactor: 💡 changes related to form submission page

apps/web/src/app/(formSubmissionPage)/view/[formId]/_components/header.tsx

@@ -0,0 +1,38 @@
+import Image from "next/image";
+import { Form } from "@convoform/db";
+
+export function FormSubmissionPageHeader({
+  form,
+}: {
+  form: Pick<
+    Form,
+    | "organizationName"
+    | "organizationLogoUrl"
+    | "showOrganizationLogo"
+    | "showOrganizationName"
+  >;
+}) {
+  const {
+    showOrganizationName,
+    organizationName,
+    showOrganizationLogo,
+    organizationLogoUrl,
+  } = form;
+  return (
+    <header className="border-b bg-white">
+      <div className=" flex items-center justify-start gap-3 p-3 lg:container">
+        {showOrganizationLogo && organizationLogoUrl && (
+          <Image
+            alt="Organization Logo"
+            src={organizationLogoUrl}
+            width={30}
+            height={30}
+          />
+        )}
+        {showOrganizationName && organizationName && (
+          <h1 className="text-xl lg:text-2xl">{organizationName}</h1>
+        )}
+      </div>
+    </header>
+  );
+}

apps/web/src/app/(formSubmissionPage)/view/[formId]/page.tsx

@@ -1,9 +1,9 @@
 import { Metadata } from "next";
-import Image from "next/image";
 import { notFound } from "next/navigation";
 
-import { FormViewer } from "@/components/formViewer";
+import { FormViewer } from "@/components/formViewer/formViewer";
 import { api } from "@/trpc/server";
+import { FormSubmissionPageHeader } from "./_components/header";
 
 interface FormViewerPageProps {
   params: { formId: string };
@@ -20,34 +20,12 @@ export default async function FormViewPage({ params }: FormViewerPageProps) {
     notFound();
   }
 
-  const {
-    showOrganizationName,
-    organizationName,
-    showOrganizationLogo,
-    organizationLogoUrl,
-  } = formData;
-
+  const { showOrganizationName, showOrganizationLogo } = formData;
   const showHeader = showOrganizationName || showOrganizationLogo;
 
   return (
     <div className="flex min-h-screen flex-col">
-      {showHeader && (
-        <header className="border-b bg-white">
-          <div className=" flex items-center justify-start gap-3 p-3 lg:container">
-            {showOrganizationLogo && organizationLogoUrl && (
-              <Image
-                alt="Organization Logo"
-                src={organizationLogoUrl}
-                width={30}
-                height={30}
-              />
-            )}
-            {showOrganizationName && organizationName && (
-              <h1 className="text-xl lg:text-2xl">{organizationName}</h1>
-            )}
-          </div>
-        </header>
-      )}
+      {showHeader && <FormSubmissionPageHeader form={formData} />}
 
       <div className="flex flex-grow items-center justify-center">
         <FormViewer form={formData} />

apps/web/src/app/(protectedPage)/forms/[formId]/_components/formEditor/formPreview.tsx

@@ -10,7 +10,7 @@ import {
 
 import BrowserWindow from "@/components/common/browserWindow";
 import Spinner from "@/components/common/spinner";
-import { FormViewer } from "@/components/formViewer";
+import { FormViewer } from "@/components/formViewer/formViewer";
 import { getFrontendBaseUrl } from "@/lib/url";
 import { api } from "@/trpc/react";
 

apps/web/src/app/(formSubmissionPage)/view/[formId]/_components/endScreen.tsx → apps/web/src/components/formViewer/endScreen.tsx

@@ -1,4 +1,4 @@
-import BrandName from "../../../../../components/common/brandName";
+import BrandName from "../common/brandName";
 
 type Props = {
   endScreenMessage: string;

apps/web/src/components/formViewer.tsx → apps/web/src/components/formViewer/formViewer.tsx

@@ -7,9 +7,9 @@ import { useChat } from "ai/react";
 
 import { CONVERSATION_START_MESSAGE } from "@/lib/constants";
 import { isRateLimitErrorResponse } from "@/lib/errorHandlers";
-import { EndScreen } from "../app/(formSubmissionPage)/view/[formId]/_components/endScreen";
-import { FormFieldsViewer } from "../app/(formSubmissionPage)/view/[formId]/_components/formFields";
-import { WelcomeScreen } from "../app/(formSubmissionPage)/view/[formId]/_components/welcomeScreen";
+import { EndScreen } from "./endScreen";
+import { FormFieldsViewer } from "./formFields";
+import { WelcomeScreen } from "./welcomeScreen";
 
 type Props = {
   form: Form;