diff --git a/src/features/onboarding/steps/step-invite-members.tsx b/src/features/onboarding/steps/step-invite-members.tsx new file mode 100644 index 00000000..4c5c29c8 --- /dev/null +++ b/src/features/onboarding/steps/step-invite-members.tsx @@ -0,0 +1,63 @@ +"use client"; + +import { useState } from "react"; +import { useOnboarding } from "@onboardjs/react"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { X } from "lucide-react"; +import { OnboardingMember } from "@/features/onboarding/onboarding.types"; + +export const StepInviteMembers = () => { + const { next, updateContext, state } = useOnboarding(); + const [email, setEmail] = useState(""); + const [members, setMembers] = useState([]); + + const addMember = () => { + if (!email.trim()) return; + setMembers((prev) => [...prev, { email: email.trim(), role: "member" }]); + setEmail(""); + }; + + const removeMember = (target: string) => { + setMembers((prev) => prev.filter((m) => m.email !== target)); + }; + + const onContinue = async () => { + await updateContext({ flowData: { ...state?.context.flowData, members } }); + await next(); + }; + + return ( +
+
+

Invite your team

+

Optional — you can always invite people later.

+
+
+ setEmail(e.target.value)} + placeholder="teammate@portabase.io" + onKeyDown={(e) => e.key === "Enter" && addMember()} + /> + +
+
+ {members.map((member) => ( + + {member.email} + + + ))} +
+ +
+ ); +};