mirror of
https://github.com/formbricks/formbricks.git
synced 2026-04-26 11:48:27 -05:00
Matti Nannt
27d63c01e1
### New Formbricks Release: Complete Rewrite, New Features & Enhanced UI 🚀 We're thrilled to announce the release of the new Formbricks, a complete overhaul of our codebase, packed with powerful features and an improved user experience. #### What's New: 1. **Survey Builder**: Design and customize your in-product micro-surveys with our intuitive survey builder. 2. **Trigger Micro-Surveys**: Set up micro-surveys to appear at specific points within your app, allowing you to gather feedback when it matters most. 3. **JavaScript SDK**: Our new JavaScript SDK makes integration a breeze - just embed it once and you're ready to go. 4. **No-Code Events**: Set up events and triggers without writing a single line of code, making it accessible for everyone on your team. 5. **Revamped UI**: Enjoy an entirely new user interface that enhances usability and provides a smooth, delightful experience. This release marks a major step forward for Formbricks, enabling you to better understand your users and build an outstanding product experience. Please update your Formbricks integration to take advantage of these exciting new features, and let us know in the Discord if you have any questions or feedback! Happy surveying! 🎉
113 lines
4.3 KiB
TypeScript
113 lines
4.3 KiB
TypeScript
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui";
|
|
import { useEnvironment } from "@/lib/environments/environments";
|
|
import { ArchiveBoxIcon, CheckIcon, PauseIcon } from "@heroicons/react/24/solid";
|
|
|
|
interface SurveyStatusIndicatorProps {
|
|
status: string;
|
|
tooltip?: boolean;
|
|
environmentId: string;
|
|
}
|
|
|
|
export default function SurveyStatusIndicator({
|
|
status,
|
|
tooltip,
|
|
environmentId,
|
|
}: SurveyStatusIndicatorProps) {
|
|
const { environment, isErrorEnvironment, isLoadingEnvironment } = useEnvironment(environmentId);
|
|
|
|
if (isLoadingEnvironment) return <></>;
|
|
if (isErrorEnvironment) return <></>;
|
|
|
|
if (!environment.widgetSetupCompleted) return null;
|
|
if (tooltip) {
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
{status === "inProgress" && (
|
|
<span className="relative flex h-3 w-3">
|
|
<span className="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
|
<span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
|
|
</span>
|
|
)}
|
|
{status === "paused" && (
|
|
<div className=" rounded-full bg-slate-300 p-1">
|
|
<PauseIcon className="h-3 w-3 text-slate-600" />
|
|
</div>
|
|
)}
|
|
{status === "completed" && (
|
|
<div className=" rounded-full bg-slate-200 p-1">
|
|
<CheckIcon className="h-3 w-3 text-slate-600" />
|
|
</div>
|
|
)}
|
|
{status === "archived" && (
|
|
<div className=" rounded-full bg-slate-300 p-1">
|
|
<ArchiveBoxIcon className="h-3 w-3 text-slate-600" />
|
|
</div>
|
|
)}
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<div className="flex items-center space-x-2">
|
|
{status === "inProgress" ? (
|
|
<>
|
|
<span>Gathering responses</span>
|
|
<span className="relative flex h-3 w-3">
|
|
<span className="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
|
<span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
|
|
</span>
|
|
</>
|
|
) : status === "paused" ? (
|
|
<>
|
|
<span>Survey paused.</span>
|
|
<div className=" rounded-full bg-slate-300 p-1">
|
|
<PauseIcon className="h-3 w-3 text-slate-600" />
|
|
</div>
|
|
</>
|
|
) : status === "completed" ? (
|
|
<div className="flex items-center space-x-2">
|
|
<span>Survey completed.</span>
|
|
<div className=" rounded-full bg-slate-200 p-1">
|
|
<CheckIcon className="h-3 w-3 text-slate-600" />
|
|
</div>
|
|
</div>
|
|
) : status === "archived" ? (
|
|
<div className="flex items-center space-x-2">
|
|
<span>Survey archived.</span>
|
|
<div className=" rounded-full bg-slate-300 p-1">
|
|
<ArchiveBoxIcon className="h-3 w-3 text-slate-600" />
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
} else
|
|
return (
|
|
<span>
|
|
{status === "inProgress" && (
|
|
<span className="relative flex h-3 w-3">
|
|
<span className="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
|
<span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
|
|
</span>
|
|
)}
|
|
{status === "paused" && (
|
|
<div className=" rounded-full bg-slate-300 p-1">
|
|
<PauseIcon className="h-3 w-3 text-slate-600" />
|
|
</div>
|
|
)}
|
|
{status === "completed" && (
|
|
<div className=" rounded-full bg-slate-200 p-1">
|
|
<CheckIcon className="h-3 w-3 text-slate-600" />
|
|
</div>
|
|
)}
|
|
{status === "archived" && (
|
|
<div className=" rounded-full bg-slate-300 p-1">
|
|
<ArchiveBoxIcon className="h-3 w-3 text-slate-600" />
|
|
</div>
|
|
)}
|
|
</span>
|
|
);
|
|
}
|