Function TrialStep

packages/web/src/app/onboard/components/trialStep.tsx:74–271

({ stepIndex }: TrialStepProps)

}

export function TrialStep({ stepIndex }: TrialStepProps) {
    const { data: offers, isPending, isError } = useOffers({
        // we have a escape hatch on error, so don't retry.
        retry: 0
    });
    const { toast } = useToast();
    const router = useRouter();
    const searchParams = useSearchParams();
    const captureEvent = useCaptureEvent();
    const [billingInterval, setBillingInterval] = useState<BillingInterval>("year");
    const [isPrimaryLoading, setIsPrimaryLoading] = useState(false);
    const [isSkipLoading, setIsSkipLoading] = useState(false);
    const { data: session } = useSession();
    const sessionEmail = session?.user?.email ?? "";
    const [currentEmail, setCurrentEmail] = useState<string>("");

    // Only treat the email as an override when the user has actually changed it
    // away from the canonical session email.
    const overrideEmail =
        sessionEmail && currentEmail && currentEmail !== sessionEmail
            ? currentEmail
            : undefined;

    const [isReturningFromCheckoutSuccess, setIsReturningFromCheckoutSuccess] = useState(searchParams.get('checkout') === 'success');

    // Fire-once when offers resolve, so isTrialEligible is reliable and react-query
    // refetches don't cause duplicate views.
    const hasCapturedViewRef = useRef(false);
    useEffect(() => {
        if (isReturningFromCheckoutSuccess) {
            return;
        }
        if (offers && !hasCapturedViewRef.current) {
            hasCapturedViewRef.current = true;
            captureEvent('wa_onboard_trial_step_viewed', {
                isTrialEligible: offers.trial.eligible,
            });
        }
    }, [offers, captureEvent, isReturningFromCheckoutSuccess]);

    // Post-checkout: complete onboarding, then forward `session_id` to `/` so
    // CheckoutReturnHandler (mounted in the (app) layout) can fire the activation
    // dialog. We defer completeOnboarding until after Stripe actually returns
    // success — abandoning checkout leaves the user on /onboard to retry.
    const hasHandledReturnRef = useRef(false);
    useEffect(() => {
        if (!isReturningFromCheckoutSuccess || hasHandledReturnRef.current) {
            return;
        }
        hasHandledReturnRef.current = true;

        const sessionId = searchParams.get('session_id');
        void (async () => {
            const result = await completeOnboarding();
            if (isServiceError(result)) {
                toast({
                    description: `Failed to complete onboarding: ${result.message}`,
                    variant: "destructive",