From 501ce56de66afb7b1ee1969cdf87461ba19eba04 Mon Sep 17 00:00:00 2001
From: Matthias Nannt <mail@matthiasnannt.com>
Date: Thu, 20 Apr 2023 15:43:52 +0200
Subject: [PATCH] show different placeholder in link summary empty page filler

---
 .../[surveyId]/summary/SummaryList.tsx        |  6 ++-
 .../components/shared/EmptySpaceFiller.tsx    | 41 ++++++++++++++++---
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/SummaryList.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/SummaryList.tsx
index d184e492fc..52c7b6bf66 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/SummaryList.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/SummaryList.tsx
@@ -49,7 +49,11 @@ export default function SummaryList({ environmentId, surveyId }) {
     <>
       <div className="mt-10 space-y-8">
         {responses.length === 0 ? (
-          <EmptySpaceFiller type="response" environmentId={environmentId} />
+          <EmptySpaceFiller
+            type="response"
+            environmentId={environmentId}
+            noWidgetRequired={survey.type === "link"}
+          />
         ) : (
           <>
             {summaryData.map((questionSummary) => {
diff --git a/apps/web/components/shared/EmptySpaceFiller.tsx b/apps/web/components/shared/EmptySpaceFiller.tsx
index eac88a2839..3eb96cd779 100644
--- a/apps/web/components/shared/EmptySpaceFiller.tsx
+++ b/apps/web/components/shared/EmptySpaceFiller.tsx
@@ -6,11 +6,12 @@ import { useEnvironment } from "@/lib/environments/environments";
 import LoadingSpinner from "./LoadingSpinner";
 
 type EmptySpaceFillerProps = {
-  type: "table" | "response" | "event";
+  type: "table" | "response" | "event" | "linkResponse";
   environmentId: string;
+  noWidgetRequired?: boolean;
 };
 
-const EmptySpaceFiller: React.FC<EmptySpaceFillerProps> = ({ type, environmentId }) => {
+const EmptySpaceFiller: React.FC<EmptySpaceFillerProps> = ({ type, environmentId, noWidgetRequired }) => {
   const { environment, isErrorEnvironment, isLoadingEnvironment } = useEnvironment(environmentId);
 
   if (isLoadingEnvironment) return <LoadingSpinner />;
@@ -24,7 +25,7 @@ const EmptySpaceFiller: React.FC<EmptySpaceFillerProps> = ({ type, environmentId
           <div className="h-16 w-full rounded-lg bg-slate-100"></div>
 
           <div className=" flex h-16 w-full items-center justify-center rounded-lg bg-slate-50 text-slate-700 transition-all duration-300  ease-in-out ">
-            {!environment.widgetSetupCompleted && (
+            {!environment.widgetSetupCompleted && !noWidgetRequired && (
               <Link
                 className="flex h-full w-full items-center justify-center"
                 href={`/environments/${environmentId}/settings/setup`}>
@@ -33,7 +34,7 @@ const EmptySpaceFiller: React.FC<EmptySpaceFillerProps> = ({ type, environmentId
                 </span>
               </Link>
             )}
-            {environment.widgetSetupCompleted &&
+            {(environment.widgetSetupCompleted || noWidgetRequired) &&
               "Your data will appear here as soon as you receive your first response ⏲️"}
           </div>
 
@@ -52,7 +53,7 @@ const EmptySpaceFiller: React.FC<EmptySpaceFillerProps> = ({ type, environmentId
         <div className="space-y-4">
           <div className="h-12 w-full rounded-full bg-slate-100"></div>
           <div className=" flex h-12 w-full items-center justify-center rounded-full bg-slate-50 text-sm text-slate-500">
-            {!environment.widgetSetupCompleted && (
+            {!environment.widgetSetupCompleted && !noWidgetRequired && (
               <Link
                 className="flex h-full w-full items-center justify-center"
                 href={`/environments/${environmentId}/settings/setup`}>
@@ -61,7 +62,7 @@ const EmptySpaceFiller: React.FC<EmptySpaceFillerProps> = ({ type, environmentId
                 </span>
               </Link>
             )}
-            {environment.widgetSetupCompleted && (
+            {(environment.widgetSetupCompleted || noWidgetRequired) && (
               <span className="text-center">
                 Your data will appear here as soon as you receive your first response ⏲️
               </span>
@@ -72,6 +73,34 @@ const EmptySpaceFiller: React.FC<EmptySpaceFillerProps> = ({ type, environmentId
       </div>
     );
   }
+  return (
+    <div className="group space-y-4 rounded-lg bg-white p-6 ">
+      <div className="flex items-center space-x-4">
+        <div className="h-12 w-12 flex-shrink-0 rounded-full bg-slate-100"></div>
+        <div className=" h-6 w-full rounded-full bg-slate-100"></div>
+      </div>
+      <div className="space-y-4">
+        <div className="h-12 w-full rounded-full bg-slate-100"></div>
+        <div className=" flex h-12 w-full items-center justify-center rounded-full bg-slate-50 text-sm text-slate-500">
+          {!environment.widgetSetupCompleted && !noWidgetRequired && (
+            <Link
+              className="flex h-full w-full items-center justify-center"
+              href={`/environments/${environmentId}/settings/setup`}>
+              <span className="decoration-brand-dark transition-all  duration-300 ease-in-out group-hover:underline">
+                Setup Formbricks Widget to start collecting insights 🚀
+              </span>
+            </Link>
+          )}
+          {(environment.widgetSetupCompleted || noWidgetRequired) && (
+            <span className="text-center">
+              Your data will appear here as soon as you receive your first response ⏲️
+            </span>
+          )}
+        </div>
+        <div className="h-12 w-full rounded-full bg-slate-50/50"></div>
+      </div>
+    </div>
+  );
 
   return null;
 };