Extract shared VerifierStatementEditor; embed as sub-flow step 3
Pull the kind 14672 publish/update/withdraw editor out of OrganizationsPage into a reusable VerifierStatementEditor with an onPublishedChange callback. OrganizationsPage now consumes it (logged-out gate and verify tutorial unchanged), and the captive verifier sub-flow renders it as step 3 with a Continue button that unlocks once a statement is published.
This commit is contained in:
lemon
@@ -1,5 +1,6 @@
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
type ReactNode,
|
||||
@@ -29,7 +30,9 @@ import {
|
||||
type OrgProfileDraft,
|
||||
} from '@/components/onboarding/VerifierIdentityStep';
|
||||
import { VerifierBioStep } from '@/components/onboarding/VerifierBioStep';
|
||||
import { VerifierStatementEditor } from '@/components/organizations/VerifierStatementEditor';
|
||||
import { usePublishOrgProfile } from '@/hooks/usePublishOrgProfile';
|
||||
import { useVerifierStatement } from '@/hooks/useVerifierStatement';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
||||
@@ -184,6 +187,15 @@ function CaptiveOverlay() {
|
||||
const { mutateAsync: publishOrgProfile, isPending: isPublishingOrg } =
|
||||
usePublishOrgProfile();
|
||||
|
||||
// Tracks whether the verifier statement (kind 14672) has been published,
|
||||
// gating the statement step's Next button. Seeded from any existing
|
||||
// statement so a returning verifier isn't blocked.
|
||||
const { isVerifier } = useVerifierStatement(user?.pubkey);
|
||||
const [statementPublished, setStatementPublished] = useState(false);
|
||||
useEffect(() => {
|
||||
if (isVerifier) setStatementPublished(true);
|
||||
}, [isVerifier]);
|
||||
|
||||
// Linear progress bar position. Once the user has chosen the verifier
|
||||
// role, the bar tracks the extended verifier step list so the four
|
||||
// sub-flow screens are reflected; otherwise the base three-step list is
|
||||
@@ -364,8 +376,14 @@ function CaptiveOverlay() {
|
||||
);
|
||||
case 'orgStatement':
|
||||
// Verifier sub-flow step 3 — publish the verifier statement
|
||||
// (kind 14672). Filled in by a later commit.
|
||||
return <VerifierStepShell onContinue={goNextVerifierStep} />;
|
||||
// (kind 14672), reusing the shared editor.
|
||||
return (
|
||||
<VerifierStatementStep
|
||||
published={statementPublished}
|
||||
onPublishedChange={setStatementPublished}
|
||||
onContinue={goNextVerifierStep}
|
||||
/>
|
||||
);
|
||||
case 'orgVerifyHowto':
|
||||
// Verifier sub-flow step 4 — teach the verify gesture, then finish.
|
||||
// Filled in by a later commit.
|
||||
@@ -481,10 +499,8 @@ function RoleStep({ role, onPick }: RoleStepProps) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Placeholder shell for the four verifier sub-flow steps. Each real step
|
||||
* (organization identity, bio, statement, how-to-verify) replaces this in a
|
||||
* later commit; for now it just renders a Continue button so the state
|
||||
* machine and navigation can be exercised end-to-end.
|
||||
* Placeholder shell for verifier sub-flow steps not yet built out. Renders a
|
||||
* single Continue button so the state machine can be exercised end-to-end.
|
||||
*/
|
||||
function VerifierStepShell({ onContinue }: { onContinue: () => void }) {
|
||||
return (
|
||||
@@ -496,6 +512,48 @@ function VerifierStepShell({ onContinue }: { onContinue: () => void }) {
|
||||
);
|
||||
}
|
||||
|
||||
interface VerifierStatementStepProps {
|
||||
published: boolean;
|
||||
onPublishedChange: (published: boolean) => void;
|
||||
onContinue: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Verifier sub-flow step 3 — publish the verifier statement (kind 14672).
|
||||
* Wraps the shared {@link VerifierStatementEditor} with the captive-flow
|
||||
* heading and a Continue button that unlocks once a statement is live.
|
||||
*/
|
||||
function VerifierStatementStep({
|
||||
published,
|
||||
onPublishedChange,
|
||||
onContinue,
|
||||
}: VerifierStatementStepProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2 text-center">
|
||||
<h2 className="text-2xl font-bold tracking-tight">
|
||||
{t('onboarding.verifier.statement.title')}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('onboarding.verifier.statement.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VerifierStatementEditor onPublishedChange={onPublishedChange} />
|
||||
|
||||
<Button
|
||||
onClick={onContinue}
|
||||
disabled={!published}
|
||||
className="w-full h-12 text-base rounded-full"
|
||||
>
|
||||
{t('common.continue')}
|
||||
<ArrowRight className="ml-2 h-4 w-4 rtl:rotate-180" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface RoleCardProps {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
import { MilkdownEditor } from '@/components/markdown/MilkdownEditor';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import {
|
||||
useSetVerifierStatement,
|
||||
useVerifierStatement,
|
||||
} from '@/hooks/useVerifierStatement';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface VerifierStatementEditorProps {
|
||||
className?: string;
|
||||
/**
|
||||
* Called after a non-empty statement has been published or updated, and
|
||||
* with `false` after a withdrawal. Lets hosts (e.g. the captive onboarding
|
||||
* flow) react to publish state — for instance, enabling a "Next" button.
|
||||
*/
|
||||
onPublishedChange?: (isPublished: boolean) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* The functional verifier-statement editor (kind 14672): a WYSIWYG Markdown
|
||||
* surface with publish / update / withdraw controls and a live hydrate from
|
||||
* the user's existing statement.
|
||||
*
|
||||
* Extracted from OrganizationsPage so both the public /organizations tool
|
||||
* and the captive verifier onboarding flow render the exact same editor and
|
||||
* stay in sync. Assumes a logged-in user; callers gate on auth.
|
||||
*/
|
||||
export function VerifierStatementEditor({
|
||||
className,
|
||||
onPublishedChange,
|
||||
}: VerifierStatementEditorProps) {
|
||||
const { t } = useTranslation();
|
||||
const { user } = useCurrentUser();
|
||||
const { toast } = useToast();
|
||||
|
||||
const { statement, isLoading } = useVerifierStatement(user?.pubkey);
|
||||
const { mutateAsync: setStatement, isPending } = useSetVerifierStatement();
|
||||
|
||||
const [value, setValue] = useState('');
|
||||
const [hydrated, setHydrated] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hydrated && !isLoading) {
|
||||
setValue(statement ?? '');
|
||||
setHydrated(true);
|
||||
}
|
||||
}, [hydrated, isLoading, statement]);
|
||||
|
||||
const trimmed = value.trim();
|
||||
const isPublished = !!statement;
|
||||
const unchanged = trimmed === (statement ?? '');
|
||||
|
||||
const handlePublish = async () => {
|
||||
try {
|
||||
await setStatement(trimmed);
|
||||
toast({
|
||||
title: trimmed
|
||||
? t('verifier.publishedToast')
|
||||
: t('verifier.withdrawnToast'),
|
||||
});
|
||||
onPublishedChange?.(!!trimmed);
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: t('verifier.errorToast'),
|
||||
description: error instanceof Error ? error.message : String(error),
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleWithdraw = async () => {
|
||||
try {
|
||||
await setStatement('');
|
||||
setValue('');
|
||||
toast({ title: t('verifier.withdrawnToast') });
|
||||
onPublishedChange?.(false);
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: t('verifier.errorToast'),
|
||||
description: error instanceof Error ? error.message : String(error),
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={cn('border-border/60 shadow-sm', className)}>
|
||||
<CardContent className="p-6 sm:p-8 space-y-6">
|
||||
{/* Prompt */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-semibold">{t('verifier.promptLabel')}</p>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
{t('verifier.prompt')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{isLoading && !hydrated ? (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
{t('verifier.loading')}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* WYSIWYG markdown editor: formatting toolbar + rich-text
|
||||
editing surface, value flows back out as markdown. */}
|
||||
<div className="rounded-lg border border-input bg-background overflow-hidden focus-within:ring-1 focus-within:ring-ring">
|
||||
<MilkdownEditor
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
placeholder={t('verifier.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handlePublish}
|
||||
disabled={isPending || !trimmed || unchanged}
|
||||
>
|
||||
{isPending && <Loader2 className="size-4 animate-spin mr-2" />}
|
||||
{isPublished ? t('verifier.update') : t('verifier.publish')}
|
||||
</Button>
|
||||
|
||||
{isPublished && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={handleWithdraw}
|
||||
disabled={isPending}
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
{t('verifier.withdraw')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||||
{t('verifier.disclaimer')}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default VerifierStatementEditor;
|
||||
@@ -1,27 +1,21 @@
|
||||
import { useSeoMeta } from '@unhead/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ArrowRight,
|
||||
BadgeCheck,
|
||||
Building2,
|
||||
CircleCheck,
|
||||
Loader2,
|
||||
ShieldCheck,
|
||||
} from 'lucide-react';
|
||||
|
||||
import { MilkdownEditor } from '@/components/markdown/MilkdownEditor';
|
||||
import { LoginArea } from '@/components/auth/LoginArea';
|
||||
import { VerifyTutorial } from '@/components/organizations/VerifyTutorial';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { VerifierStatementEditor } from '@/components/organizations/VerifierStatementEditor';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { useAppContext } from '@/hooks/useAppContext';
|
||||
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import {
|
||||
useSetVerifierStatement,
|
||||
useVerifierStatement,
|
||||
} from '@/hooks/useVerifierStatement';
|
||||
import { useVerifierStatement } from '@/hooks/useVerifierStatement';
|
||||
|
||||
/**
|
||||
* The /organizations page. A landing-style document modeled on the
|
||||
@@ -189,20 +183,11 @@ export function OrganizationsPage() {
|
||||
function VerifierEditor() {
|
||||
const { t } = useTranslation();
|
||||
const { user } = useCurrentUser();
|
||||
const { toast } = useToast();
|
||||
|
||||
const { statement, isLoading } = useVerifierStatement(user?.pubkey);
|
||||
const { mutateAsync: setStatement, isPending } = useSetVerifierStatement();
|
||||
|
||||
const [value, setValue] = useState('');
|
||||
const [hydrated, setHydrated] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hydrated && !isLoading) {
|
||||
setValue(statement ?? '');
|
||||
setHydrated(true);
|
||||
}
|
||||
}, [hydrated, isLoading, statement]);
|
||||
const { isVerifier } = useVerifierStatement(user?.pubkey);
|
||||
// Track publish state locally so the tutorial appears/disappears
|
||||
// immediately on publish / withdraw, seeded from the queried state.
|
||||
const [isPublished, setIsPublished] = useState(isVerifier);
|
||||
|
||||
// Logged out: instruct the visitor to log in with — or create — their
|
||||
// organization's Nostr profile before they can publish a statement.
|
||||
@@ -227,106 +212,13 @@ function VerifierEditor() {
|
||||
);
|
||||
}
|
||||
|
||||
const trimmed = value.trim();
|
||||
const isPublished = !!statement;
|
||||
const unchanged = trimmed === (statement ?? '');
|
||||
|
||||
const handlePublish = async () => {
|
||||
try {
|
||||
await setStatement(trimmed);
|
||||
toast({
|
||||
title: trimmed
|
||||
? t('verifier.publishedToast')
|
||||
: t('verifier.withdrawnToast'),
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: t('verifier.errorToast'),
|
||||
description: error instanceof Error ? error.message : String(error),
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleWithdraw = async () => {
|
||||
try {
|
||||
await setStatement('');
|
||||
setValue('');
|
||||
toast({ title: t('verifier.withdrawnToast') });
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: t('verifier.errorToast'),
|
||||
description: error instanceof Error ? error.message : String(error),
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<Card className="border-border/60 shadow-sm">
|
||||
<CardContent className="p-6 sm:p-8 space-y-6">
|
||||
{/* Prompt */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-semibold">
|
||||
{t('verifier.promptLabel')}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
{t('verifier.prompt')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{isLoading && !hydrated ? (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
{t('verifier.loading')}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* WYSIWYG markdown editor: formatting toolbar + rich-text
|
||||
editing surface, value flows back out as markdown. */}
|
||||
<div className="rounded-lg border border-input bg-background overflow-hidden focus-within:ring-1 focus-within:ring-ring">
|
||||
<MilkdownEditor
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
placeholder={t('verifier.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handlePublish}
|
||||
disabled={isPending || !trimmed || unchanged}
|
||||
>
|
||||
{isPending && <Loader2 className="size-4 animate-spin mr-2" />}
|
||||
{isPublished ? t('verifier.update') : t('verifier.publish')}
|
||||
</Button>
|
||||
|
||||
{isPublished && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={handleWithdraw}
|
||||
disabled={isPending}
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
{t('verifier.withdraw')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||||
{t('verifier.disclaimer')}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<VerifierStatementEditor onPublishedChange={setIsPublished} />
|
||||
|
||||
{/* Once the org's statement is live, teach them the actual
|
||||
verify gesture: the three-dots menu on any campaign card. */}
|
||||
{isPublished && <VerifyTutorial />}
|
||||
{(isPublished || isVerifier) && <VerifyTutorial />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user