show different placeholder in link summary empty page filler

This commit is contained in:
Matthias Nannt
2023-04-20 15:43:52 +02:00
parent 9eb3f2e605
commit 501ce56de6
2 changed files with 40 additions and 7 deletions

View File

@@ -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) => {

View File

@@ -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;
};