mirror of
https://github.com/Luchexx/wacrm.git
synced 2026-11-02 09:19:51 +00:00
feat(ui): user-facing fixes from multi-user review (M3, M4, S3)
PR B of the post-review fix series. Closes the three user-blocking UI gaps the design / UX review flagged. M3 — Charlie's 409 redeem dead-end (join page) - Pre-fix: a user with existing data clicking an invite saw a 3-second toast then the Accept button re-enabled. The same retry would 409 forever. - Post-fix: 409 status is detected explicitly and surfaces a blocking dialog with an explanation + "Sign out & use a different email" action. The action calls supabase.signOut() then reloads the page; the page rebuilds on the signed-out branch with the "Create account & join" CTA. The invite token stays in the URL through the reload so the recovery is one click. Non-409 errors still take the regular toast path. - Files: `src/app/join/[token]/page.tsx` — new state `conflictMessage`, new handler `handleSignOutAndRetry`, new Dialog component in the auth-in render branch. M4 — WhatsApp share message includes the account name - Pre-fix: "Join our wacrm account using this link…" — generic, no team context. In multi-team contexts the recipient couldn't tell which team they were being invited to. - Post-fix: "Join <Account Name> on wacrm using this link…". The account name is snapshotted into the `CreatedInvite` result at creation time so a later rename can't retroactively rewrite the wa.me message. - Files: `src/components/settings/invite-member-dialog.tsx` — read `account` from `useAuth()`, thread `accountName` through `CreatedInvite`, update `whatsappShareUrl` copy. S3 — Members tab roster mobile reflow - Pre-fix: the member row used a single flex-row with a fixed- width 128px role Select and a 36px Remove button. On a 375px viewport the name + email got crushed to ~50px. - Post-fix: at base width the row stacks vertically — identity (avatar + name + email) on top, actions (role + Remove) below. At sm+ it returns to the original inline layout. The joined- date column stays desktop-only. - Files: `src/components/settings/members-tab.tsx` — `flex-col` base, `sm:flex-row sm:items-center` for desktop. Actions wrapped in their own flex container so the role Select and Remove button cluster together on both breakpoints. Verification - `npm run lint` → 0 errors (same 19 pre-existing warnings) - `npm run typecheck` → clean - `npm test` → 366/366 pass - `npm run build` → succeeds Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arnas Donauskas
parent
bf2addc7c9
commit
bff8ec6765
@ -26,7 +26,14 @@ import { useCallback, useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
import { CheckCircle, Loader2, MailX, ShieldCheck, UsersRound } from 'lucide-react';
|
||||
import {
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
Loader2,
|
||||
MailX,
|
||||
ShieldCheck,
|
||||
UsersRound,
|
||||
} from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
@ -36,6 +43,14 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { createClient } from '@/lib/supabase/client';
|
||||
|
||||
interface PeekOk {
|
||||
@ -87,6 +102,12 @@ export default function JoinPage() {
|
||||
undefined, // undefined = unknown / still loading; null = signed out
|
||||
);
|
||||
const [accepting, setAccepting] = useState(false);
|
||||
// `redeem_invitation` returns 409 when the caller's current account
|
||||
// has domain data, or they're already a member of a shared account.
|
||||
// A transient toast wasn't enough — the user has no actionable next
|
||||
// step. Surface a blocking modal that walks them through it.
|
||||
const [conflictMessage, setConflictMessage] = useState<string | null>(null);
|
||||
const [signingOut, setSigningOut] = useState(false);
|
||||
|
||||
// Fetch peek + auth state on mount. The peek endpoint is
|
||||
// rate-limited per-IP (30/min) so double-mounting in React 19
|
||||
@ -130,7 +151,19 @@ export default function JoinPage() {
|
||||
const payload = (await res.json().catch(() => ({}))) as {
|
||||
error?: string;
|
||||
};
|
||||
// 409 = caller already has data / is in another shared
|
||||
// account. The redeem RPC's error message is descriptive
|
||||
// enough to show directly; we open a modal so the user has
|
||||
// a clear next-action (sign out → use different email)
|
||||
// rather than a 3-second toast.
|
||||
if (res.status === 409) {
|
||||
setConflictMessage(
|
||||
payload.error ||
|
||||
'You are already in another account. Sign in with a different email to join this one.',
|
||||
);
|
||||
} else {
|
||||
toast.error(payload.error || 'Failed to accept invitation');
|
||||
}
|
||||
setAccepting(false);
|
||||
return;
|
||||
}
|
||||
@ -145,6 +178,21 @@ export default function JoinPage() {
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
const handleSignOutAndRetry = useCallback(async () => {
|
||||
setSigningOut(true);
|
||||
try {
|
||||
await createClient().auth.signOut();
|
||||
// Hard reload so the new auth state propagates everywhere
|
||||
// (middleware, AuthProvider). Preserves the invite token in
|
||||
// the URL so the rebuilt page renders the signed-out CTA path.
|
||||
window.location.reload();
|
||||
} catch (err) {
|
||||
console.error('[join] sign-out error:', err);
|
||||
toast.error('Could not sign out. Try refreshing the page.');
|
||||
setSigningOut(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// ----- Loading state (peek pending OR auth not yet resolved) -----
|
||||
if (peek === null || authedUserId === undefined) {
|
||||
return (
|
||||
@ -220,6 +268,7 @@ export default function JoinPage() {
|
||||
// ----- Authed: show Accept button -----
|
||||
if (authedUserId) {
|
||||
return (
|
||||
<>
|
||||
<Card className="w-full max-w-md border-slate-800 bg-slate-900">
|
||||
{inviteHeader}
|
||||
<CardContent className="flex flex-col gap-3">
|
||||
@ -247,6 +296,62 @@ export default function JoinPage() {
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Conflict modal — opens when the redeem endpoint returns 409
|
||||
(caller already in a shared account or has domain data).
|
||||
Blocks the flow until the user picks a recovery action so
|
||||
they aren't stuck retrying an inevitable failure. */}
|
||||
<Dialog
|
||||
open={conflictMessage !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setConflictMessage(null);
|
||||
}}
|
||||
>
|
||||
<DialogContent className="bg-slate-900 border-slate-700 sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2 text-white">
|
||||
<AlertTriangle className="size-4 text-amber-400" />
|
||||
Can't join {peek.account_name} with this account
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-slate-400">
|
||||
{conflictMessage}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-2 py-2 text-xs text-slate-500">
|
||||
<p>
|
||||
To join{' '}
|
||||
<span className="text-slate-300">{peek.account_name}</span>,
|
||||
sign out and sign up again with a different email address.
|
||||
The invite link stays valid as long as it hasn't
|
||||
expired.
|
||||
</p>
|
||||
</div>
|
||||
<DialogFooter className="bg-slate-900 border-slate-700">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setConflictMessage(null)}
|
||||
className="border-slate-700 text-slate-300 hover:bg-slate-800"
|
||||
>
|
||||
Stay signed in
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSignOutAndRetry}
|
||||
disabled={signingOut}
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
{signingOut ? (
|
||||
<>
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Signing out…
|
||||
</>
|
||||
) : (
|
||||
'Sign out & use a different email'
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -36,6 +36,7 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useAuth } from '@/hooks/use-auth';
|
||||
|
||||
type InviteRole = 'admin' | 'agent' | 'viewer';
|
||||
|
||||
@ -65,6 +66,9 @@ interface CreatedInvite {
|
||||
url: string;
|
||||
role: InviteRole;
|
||||
expiresInDays: number;
|
||||
/** Snapshotted at creation time so a later account rename can't
|
||||
* retroactively change the wa.me message text on the result step. */
|
||||
accountName: string;
|
||||
}
|
||||
|
||||
export function InviteMemberDialog({
|
||||
@ -72,6 +76,7 @@ export function InviteMemberDialog({
|
||||
onOpenChange,
|
||||
onCreated,
|
||||
}: InviteMemberDialogProps) {
|
||||
const { account } = useAuth();
|
||||
const [role, setRole] = useState<InviteRole>('agent');
|
||||
const [expiry, setExpiry] = useState<string>('7');
|
||||
const [label, setLabel] = useState('');
|
||||
@ -110,7 +115,17 @@ export function InviteMemberDialog({
|
||||
expiresInDays: number;
|
||||
};
|
||||
|
||||
setResult({ url: data.url, role, expiresInDays: data.expiresInDays });
|
||||
setResult({
|
||||
url: data.url,
|
||||
role,
|
||||
expiresInDays: data.expiresInDays,
|
||||
// Snapshot the account name into the result so the wa.me
|
||||
// share message has team context. Falls back to a generic
|
||||
// string if `account` hasn't loaded yet (shouldn't happen
|
||||
// — the dialog requires admin+ which requires a loaded
|
||||
// profile — but stay safe).
|
||||
accountName: account?.name ?? 'our wacrm account',
|
||||
});
|
||||
onCreated();
|
||||
} catch (err) {
|
||||
console.error('[InviteMemberDialog] create error:', err);
|
||||
@ -134,7 +149,12 @@ export function InviteMemberDialog({
|
||||
}
|
||||
|
||||
function whatsappShareUrl(url: string): string {
|
||||
const message = `Join our wacrm account using this link (valid for ${result?.expiresInDays} days): ${url}`;
|
||||
// Include the account name so the recipient knows which team
|
||||
// they're being invited to before clicking through. This matters
|
||||
// for users in multi-team contexts where "our wacrm account"
|
||||
// wouldn't be enough to disambiguate.
|
||||
const accountName = result?.accountName ?? 'our wacrm account';
|
||||
const message = `Join ${accountName} on wacrm using this link (valid for ${result?.expiresInDays} days): ${url}`;
|
||||
return `https://wa.me/?text=${encodeURIComponent(message)}`;
|
||||
}
|
||||
|
||||
|
||||
@ -287,8 +287,14 @@ export function MembersTab() {
|
||||
return (
|
||||
<li
|
||||
key={member.user_id}
|
||||
className="flex items-center gap-4 px-4 py-3"
|
||||
// Mobile: stack identity (avatar+name+email) above the
|
||||
// role/remove actions so the role dropdown's fixed
|
||||
// 128px width doesn't force the name into a 50-pixel
|
||||
// truncation. Desktop (sm+): everything inline as
|
||||
// before.
|
||||
className="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:gap-4"
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-4">
|
||||
<Avatar className="size-9 shrink-0">
|
||||
{member.avatar_url ? (
|
||||
<AvatarImage
|
||||
@ -320,11 +326,19 @@ export function MembersTab() {
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Joined date stays desktop-only. The mobile row's
|
||||
vertical density makes the joined date noise. */}
|
||||
<div className="hidden sm:block text-right text-xs text-slate-500">
|
||||
Joined {fmtDate(member.joined_at)}
|
||||
</div>
|
||||
|
||||
{/* Actions cluster. On mobile this is its own row
|
||||
below the identity block; on desktop it sits
|
||||
inline. Items align to the start on mobile so the
|
||||
role dropdown lines up under the avatar. */}
|
||||
<div className="flex items-center gap-2 sm:gap-3">
|
||||
{/* Role display / editor. Inline Select is admin+
|
||||
only AND not allowed on the owner row (owner
|
||||
changes go through transfer, which lands later). */}
|
||||
@ -373,6 +387,7 @@ export function MembersTab() {
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user