React Custom UI Example

import type { JourneyView } from "@fanfare-io/fanfare-sdk-core/experiences";
import { useExperienceJourney } from "@fanfare-io/fanfare-sdk-react";

export function CustomLaunch({ experienceId }: { experienceId: string }) {
  const { view, start, error } = useExperienceJourney(experienceId, {
    autoStart: false,
  });

  if (error) {
    return <ErrorPanel message={error} />;
  }

  if (!view) {
    return <LoadingPanel />;
  }

  return (
    <section>
      <h1>Limited release</h1>
      <JourneyPanel view={view} start={start} />
    </section>
  );
}

function JourneyPanel({
  view,
  start,
}: {
  view: JourneyView;
  start: (options?: { accessCode?: string; autoEnterWaitlist?: boolean }) => Promise<JourneyView>;
}) {
  if (view.journeyStage === "ready") {
    return <button onClick={() => void start()}>Enter</button>;
  }

  if (view.journeyStage === "routing") {
    return <LoadingPanel />;
  }

  if (view.journeyStage === "gated") {
    return <GatePanel view={view} />;
  }

  if (view.sequence.phase === "granted") {
    return <CheckoutPanel onCheckout={() => view.sequence.claim().token} />;
  }

  return <SequencePanel sequence={view.sequence} />;
}

async function applyGateAccessCode(view: Extract<JourneyView, { journeyStage: "gated" }>, code: string) {
  await view.reroute({ accessCode: code });
}