feat: Add source to metadata submission (#1323)

Co-authored-by: Olasunkanmi Balogun <olasunkanmiibalogun@gmail.com>
Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

apps/web/app/api/v1/client/responses/route.ts

@@ -44,7 +44,8 @@ export async function POST(request: Request): Promise<NextResponse> {
   let response: TResponse;
   try {
     const meta = {
-      url: responseInput?.meta?.url ?? "",
+      source: responseInput?.meta?.source,
+      url: responseInput?.meta?.url,
       userAgent: {
         browser: agent?.browser.name,
         device: agent?.device.type,

apps/web/app/s/[surveyId]/components/LinkSurvey.tsx

@@ -1,19 +1,19 @@
 "use client";
 
-import ContentWrapper from "@formbricks/ui/ContentWrapper";
-import { SurveyInline } from "@formbricks/ui/Survey";
+import SurveyLinkUsed from "@/app/s/[surveyId]/components/SurveyLinkUsed";
+import VerifyEmail from "@/app/s/[surveyId]/components/VerifyEmail";
+import { getPrefillResponseData } from "@/app/s/[surveyId]/lib/prefilling";
 import { createDisplay } from "@formbricks/lib/client/display";
 import { ResponseQueue } from "@formbricks/lib/responseQueue";
 import { SurveyState } from "@formbricks/lib/surveyState";
 import { TProduct } from "@formbricks/types/v1/product";
+import { TResponse, TResponseData, TResponseUpdate } from "@formbricks/types/v1/responses";
 import { TSurvey } from "@formbricks/types/v1/surveys";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";
+import { SurveyInline } from "@formbricks/ui/Survey";
 import { ArrowPathIcon } from "@heroicons/react/24/solid";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
-import VerifyEmail from "@/app/s/[surveyId]/components/VerifyEmail";
-import { getPrefillResponseData } from "@/app/s/[surveyId]/lib/prefilling";
-import { TResponse, TResponseData, TResponseUpdate } from "@formbricks/types/v1/responses";
-import SurveyLinkUsed from "@/app/s/[surveyId]/components/SurveyLinkUsed";
 
 interface LinkSurveyProps {
   survey: TSurvey;
@@ -39,6 +39,7 @@ export default function LinkSurvey({
   const responseId = singleUseResponse?.id;
   const searchParams = useSearchParams();
   const isPreview = searchParams?.get("preview") === "true";
+  const sourceParam = searchParams?.get("source");
   // pass in the responseId if the survey is a single use survey, ensures survey state is updated with the responseId
   const [surveyState, setSurveyState] = useState(new SurveyState(survey.id, singleUseId, responseId));
   const [activeQuestionId, setActiveQuestionId] = useState<string>(
@@ -151,6 +152,10 @@ export default function LinkSurvey({
                   ...hiddenFieldsRecord,
                 },
                 finished: responseUpdate.finished,
+                meta: {
+                  url: window.location.href,
+                  source: sourceParam || "",
+                },
               });
           }}
           onActiveQuestionChange={(questionId) => setActiveQuestionId(questionId)}

packages/types/v1/responses.ts

@@ -31,6 +31,7 @@ const ZResponseNote = z.object({
 export type TResponseNote = z.infer<typeof ZResponseNote>;
 
 export const ZResponseMeta = z.object({
+  source: z.string(),
   url: z.string(),
   userAgent: z.object({
     browser: z.string().optional(),
@@ -72,6 +73,7 @@ export const ZResponseInput = z.object({
   data: ZResponseData,
   meta: z
     .object({
+      source: z.string().optional(),
       url: z.string().optional(),
       userAgent: z
         .object({
@@ -102,6 +104,12 @@ export type TResponseWithSurvey = z.infer<typeof ZResponseWithSurvey>;
 export const ZResponseUpdate = z.object({
   finished: z.boolean(),
   data: ZResponseData,
+  meta: z
+    .object({
+      url: z.string().optional(),
+      source: z.string().optional(),
+    })
+    .optional(),
 });
 
 export type TResponseUpdate = z.infer<typeof ZResponseUpdate>;

packages/ui/SingleResponseCard/index.tsx

@@ -1,18 +1,12 @@
 "use client";
 
-import { RatingResponse } from "../RatingResponse";
-import ResponseNotes from "./components/ResponseNote";
-import ResponseTagsWrapper from "./components/ResponseTagsWrapper";
-import { deleteResponseAction } from "./actions";
-import { DeleteDialog } from "../DeleteDialog";
-import QuestionSkip from "./components/QuestionSkip";
-import { SurveyStatusIndicator } from "../SurveyStatusIndicator";
 import { timeSince } from "@formbricks/lib/time";
 import { QuestionType } from "@formbricks/types/questions";
+import { TEnvironment } from "@formbricks/types/v1/environment";
+import { TProfile } from "@formbricks/types/v1/profile";
 import { TResponse } from "@formbricks/types/v1/responses";
 import { TSurvey } from "@formbricks/types/v1/surveys";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../Tooltip";
-import { PersonAvatar } from "../Avatars";
+import { TTag } from "@formbricks/types/v1/tags";
 import { TrashIcon } from "@heroicons/react/24/outline";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
@@ -20,10 +14,16 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { ReactNode, useState } from "react";
 import toast from "react-hot-toast";
+import { PersonAvatar } from "../Avatars";
+import { DeleteDialog } from "../DeleteDialog";
+import { RatingResponse } from "../RatingResponse";
+import { SurveyStatusIndicator } from "../SurveyStatusIndicator";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../Tooltip";
+import { deleteResponseAction } from "./actions";
+import QuestionSkip from "./components/QuestionSkip";
+import ResponseNotes from "./components/ResponseNote";
+import ResponseTagsWrapper from "./components/ResponseTagsWrapper";
 import { getPersonIdentifier } from "@formbricks/lib/person/util";
-import { TTag } from "@formbricks/types/v1/tags";
-import { TEnvironment } from "@formbricks/types/v1/environment";
-import { TProfile } from "@formbricks/types/v1/profile";
 
 export interface SingleResponseCardProps {
   survey: TSurvey;
@@ -184,6 +184,7 @@ export default function SingleResponseCard({
               {response.meta.userAgent.device ? response.meta.userAgent.device : "PC / Generic device"}
             </p>
           )}
+          {response.meta?.source && <p>Source: {response.meta.source}</p>}
         </div>
       )}
     </>