mirror of
https://github.com/formbricks/formbricks.git
synced 2025-12-30 10:19:51 -06:00
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! 🎉
76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import { Button } from "@formbricks/ui";
|
|
import { PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
|
|
import { useState } from "react";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui";
|
|
|
|
const DummyUI: React.FC = () => {
|
|
const eventClasses = [
|
|
{ id: "1", name: "View Dashboard" },
|
|
{ id: "2", name: "Upgrade to Pro" },
|
|
{ id: "3", name: "Cancel Plan" },
|
|
];
|
|
|
|
const [triggers, setTriggers] = useState<string[]>([eventClasses[0].id]);
|
|
|
|
const setTriggerEvent = (index: number, eventClassId: string) => {
|
|
setTriggers((prevTriggers) =>
|
|
prevTriggers.map((trigger, idx) => (idx === index ? eventClassId : trigger))
|
|
);
|
|
};
|
|
|
|
const addTriggerEvent = () => {
|
|
setTriggers((prevTriggers) => [...prevTriggers, eventClasses[0].id]);
|
|
};
|
|
|
|
const removeTriggerEvent = (index: number) => {
|
|
setTriggers((prevTriggers) => prevTriggers.filter((_, idx) => idx !== index));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{triggers.map((triggerEventClassId, idx) => (
|
|
<div className="mt-2" key={idx}>
|
|
<div className="inline-flex items-center">
|
|
<p className="mr-2 w-14 text-right text-sm text-slate-800 dark:text-slate-300">
|
|
{idx === 0 ? "When" : "or"}
|
|
</p>
|
|
<Select
|
|
value={triggerEventClassId}
|
|
onValueChange={(eventClassId) => setTriggerEvent(idx, eventClassId)}>
|
|
<SelectTrigger className="w-[180px] text-slate-800 dark:border-slate-400 dark:bg-slate-700 dark:text-slate-300">
|
|
<SelectValue className="" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{eventClasses.map((eventClass) => (
|
|
<SelectItem
|
|
key={eventClass.id}
|
|
className="py-1 px-0.5 text-slate-800 dark:bg-slate-700 dark:text-slate-300 dark:ring-slate-700"
|
|
value={eventClass.id}>
|
|
{eventClass.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<button onClick={() => removeTriggerEvent(idx)}>
|
|
<TrashIcon className="ml-3 h-4 w-4 text-slate-400" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div className="p-3">
|
|
<Button
|
|
variant="secondary"
|
|
className="dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600"
|
|
onClick={() => {
|
|
addTriggerEvent();
|
|
}}>
|
|
<PlusIcon className="mr-2 h-4 w-4" />
|
|
Add event
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DummyUI;
|