Gate campaigns button until tutorial completes

src/components/OnboardingGate.tsx

@@ -507,6 +507,9 @@ function VerifierHowtoStep({
   onFinish: () => void;
 }) {
   const { t } = useTranslation();
+  const [hasSeenLoop, setHasSeenLoop] = useState(false);
+  const handleLoopComplete = useCallback(() => setHasSeenLoop(true), []);
+
   return (
     <div className="space-y-6">
       <div className="space-y-2 text-center">
@@ -524,9 +527,14 @@ function VerifierHowtoStep({
         stacked
         verifierName={draft.name}
         verifierPicture={draft.picture}
+        onLoopComplete={handleLoopComplete}
       />
 
-      <Button onClick={onFinish} className="w-full h-12 text-base rounded-full">
+      <Button
+        onClick={onFinish}
+        disabled={!hasSeenLoop}
+        className="w-full h-12 text-base rounded-full"
+      >
         {t('onboarding.verifier.howto.finish')}
         <ArrowRight className="ml-2 h-4 w-4 rtl:rotate-180" />
       </Button>

src/components/organizations/VerifyTutorial.tsx

@@ -64,6 +64,8 @@ interface VerifyTutorialProps {
    */
   verifierName?: string;
   verifierPicture?: string;
+  /** Fired after the first full replay cycle completes and resets. */
+  onLoopComplete?: () => void;
 }
 
 export function VerifyTutorial({
@@ -73,6 +75,7 @@ export function VerifyTutorial({
   stacked = false,
   verifierName,
   verifierPicture,
+  onLoopComplete,
 }: VerifyTutorialProps) {
   const { t } = useTranslation();
   const reducedMotion = usePrefersReducedMotion();
@@ -83,10 +86,13 @@ export function VerifyTutorial({
   // reveal the badge after another 2s, then pause briefly and reset.
   useEffect(() => {
     const id = window.setTimeout(() => {
+      if (phase === 'verified') {
+        onLoopComplete?.();
+      }
       setPhase((prev) => NEXT_PHASE[prev]);
     }, PHASE_DELAY[phase]);
     return () => window.clearTimeout(id);
-  }, [phase]);
+  }, [phase, onLoopComplete]);
 
   const menuVisible = phase === 'menuOpen';
   const verified = phase === 'verified';