Function App

apps/testbed/src/App.tsx:19–217

()

];

export default function App() {
  const navigate = useNavigate();
  const [cart, setCart] = useState<CartItem[]>([]);
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    const stored = localStorage.getItem('op_testbed_user');
    if (stored) {
      const u = JSON.parse(stored) as User;
      setUser(u);
      op.identify({
        profileId: u.id,
        firstName: u.firstName,
        lastName: u.lastName,
        email: u.email,
      });
      applyGroups(u);
    }
    op.ready();
  }, []);

  function applyGroups(u: User) {
    op.setGroups(u.groupIds);
    for (const id of u.groupIds) {
      const meta = PRESET_GROUPS.find((g) => g.id === id);
      if (meta) {
        op.upsertGroup({ id, ...meta });
      }
    }
  }

  function login(u: User) {
    localStorage.setItem('op_testbed_user', JSON.stringify(u));
    setUser(u);
    op.identify({
      profileId: u.id,
      firstName: u.firstName,
      lastName: u.lastName,
      email: u.email,
    });
    applyGroups(u);
    op.track('user_login', { method: 'form', group_count: u.groupIds.length });
    navigate('/');
  }

  function logout() {
    localStorage.removeItem('op_testbed_user');
    op.clear();
    setUser(null);
  }

  function addToCart(product: Product) {
    setCart((prev) => {
      const existing = prev.find((i) => i.id === product.id);
      if (existing) {
        return prev.map((i) =>
          i.id === product.id ? { ...i, qty: i.qty + 1 } : i
        );