Estado do Support

Configure flags de funcionalidade tipadas e o estado de onboarding com support.ts.

Use support.ts quando o seu app precisar de flags de funcionalidade tipadas ou progresso de onboarding mantidos pelo Fluxo.

A configuração dá ao TypeScript as flags permitidas, os IDs de passo e os metadados deles. A API guarda o estado real do visitante ou do contato.

Use isto quando

você quer que useFeatureFlag("new-message") autocomplete as flags válidas
você quer os passos de onboarding tipados a partir de um único arquivo de configuração
você precisa de metadados de onboarding entre os passos
você quer gerenciar as flags no servidor com atualizações em tempo real no navegador

A menor mudança que funciona

Crie o support.ts e registre-o para a inferência.

support.ts

import {
  createSupport,
  type SupportOnboardingMetadata,
} from "@fluxolat/core";
 
export const support = createSupport({
  featureFlags: ["new-message", "billing-v2"],
  onboarding: {
    steps: [
      { id: "workspace", isFirst: true },
      { id: "invite-team" },
      { id: "done", isLast: true },
    ],
  },
});
 
declare module "@fluxolat/core/support-config" {
  interface SupportRegister {
    config: typeof support;
    onboardingMetadata: SupportOnboardingMetadata<
      typeof support,
      {
        workspace: { workspaceName?: string };
        "invite-team": { invitedEmails?: string[] };
      }
    >;
  }
}

Passe a configuração ao provedor.

app/providers.tsx

"use client";
 
import { SupportProvider } from "@fluxolat/react";
import { support } from "@/support";
 
export function Providers({ children }: { children: React.ReactNode }) {
  return <SupportProvider support={support}>{children}</SupportProvider>;
}

Flags de funcionalidade

Use useFeatureFlag() no React. O nome da flag é inferido do support.ts.

components/new-message-button.tsx

"use client";
 
import { useFeatureFlag } from "@fluxolat/react";
 
export function NewMessageButton() {
  const isNewMessageActivated = useFeatureFlag("new-message");
 
  if (!isNewMessageActivated) {
    return null;
  }
 
  return <button>New message</button>;
}

Alterar uma flag exige uma chave de API privada. Faça isso do seu servidor, não do navegador.

server/feature-flags.ts

import { FluxoClient } from "@fluxolat/core";
 
const client = new FluxoClient({
  apiUrl: "https://api.fluxo.lat/v1",
  wsUrl: "wss://api.fluxo.lat/ws",
  apiKey: process.env.FLUXO_PRIVATE_API_KEY,
});
 
await client.mutateSupportFeatureFlags({
  target: { type: "contact", id: contactId },
  operation: "add",
  flags: ["new-message"],
});

A mesma mutação funciona por HTTP.

curl -X PATCH "https://api.fluxo.lat/v1/support/feature-flags" \
  -H "Authorization: Bearer $FLUXO_PRIVATE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "target": { "type": "contact", "id": "01K0000000000000000000000" },
    "operation": "add",
    "flags": ["new-message"]
  }'

Os destinos disponíveis são visitor, contact e contactOrganization. Uma flag fica ativa quando qualquer um desses níveis a possui.

Onboarding

Use useOnboarding() para ler o passo atual, concluir passos e guardar metadados de um passo.

components/invite-step.tsx

"use client";
 
import { useOnboarding } from "@fluxolat/react";
 
export function InviteStep() {
  const { currentStepId, setMetadata, completeStep } = useOnboarding();
 
  if (currentStepId !== "invite-team") {
    return null;
  }
 
  async function submit(invitedEmails: string[]) {
    await setMetadata("invite-team", { invitedEmails });
    await completeStep("invite-team");
  }
 
  return <InviteForm onSubmit={submit} />;
}

Cada passo tem completed e metadata. setMetadata() substitui o objeto de metadados daquele passo. Passe null para limpá-lo.

Uso do Core no navegador

O estado de suporte também funciona sem React. Este exemplo com chave pública precisa rodar em um navegador cujo Origin seja permitido para o site; não o copie para dentro de um módulo de servidor do Next.js. As escritas a partir do servidor usam apiKey com uma chave privada, como mostrado acima.

support-runtime.ts

import { FluxoClient } from "@fluxolat/core";
import { support } from "./support";
 
const client = new FluxoClient({
  apiUrl: "https://api.fluxo.lat/v1",
  wsUrl: "wss://api.fluxo.lat/ws",
  publicKey: "pk_test_xxxx",
  support,
});
 
await client.fetchWebsite();
await client.fetchSupportState();
 
const isNewMessageEnabled = client.isFeatureFlagEnabled("new-message");
 
await client.setOnboardingMetadata("workspace", {
  workspaceName: "Acme",
});
 
if (isNewMessageEnabled) {
  await client.completeOnboardingStep("workspace");
}

Modelo de estado observável

As flags podem ser atribuídas no nível de visitante, de contato ou de organização do contato; uma flag fica ativa quando qualquer nível aplicável a contém.
O estado de onboarding anônimo pertence ao visitante. Depois da identificação, o estado de onboarding do contato prevalece.
Se um visitante anônimo tiver progresso, o Fluxo o copia para o contato apenas quando esse contato não tem estado de onboarding.
As atualizações de onboarding são otimistas. Tanto as flags quanto o onboarding se atualizam em tempo real quando o Fluxo emite mudanças de estado de suporte.

Próximo passo

Visão geral para a configuração padrão do widget.
Referência de hooks para interfaces de React próprias.
Referência de tipos para os tipos compartilhados do SDK.

Esta página foi útil?

Abra uma issue de documentação já preenchida para que a equipe possa agir.

Sim, ajudou Pode melhorar

Páginas e layouts Textos e idioma

Nesta página

Use isto quando A menor mudança que funciona Flags de funcionalidade Onboarding Uso do Core no navegador Modelo de estado observável Próximo passo