Files
vfxreview/components/versions/ShareWithClientButton.tsx
T
twotalesanimation 45459e4b12
Deploy / deploy (push) Successful in 4m14s
fix(review): Share with Client in the player shares the shot
The review player's button only made the viewed version client-visible. It
never set shot.sharedWithClient, and the client portal lists only shared
shots (and only each task's latest version), so the button reported
"Shared with Client" while the client saw nothing. It also skipped the
internal approval the shot page requires.

For a version that belongs to a shot (directly or through its task), the
button now runs the shot page's shareWithClient: shot marked shared, latest
version of each task visible, status to Client Review. It is disabled with
an explanation until the shot is internally approved, and the player's
Approve Internally button now appears for task versions too, only while the
shot awaits approval. Asset versions keep the per-version share.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-18 09:24:42 +02:00

101 lines
3.0 KiB
TypeScript

"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";
import { shareVersionWithClient } from "@/actions/versions";
import { shareWithClient } from "@/actions/shots";
import { Send, CheckCircle2 } from "lucide-react";
interface ShareWithClientButtonProps {
versionId: string;
isAlreadyShared?: boolean;
/**
* The shot the version belongs to, if any. Sharing is then shot-level —
* the same action as the shot page's button — because the client portal
* only lists shots marked sharedWithClient; making just this version
* visible left the client seeing nothing.
*/
shot?: { id: string; shotApprovalStatus: string; sharedWithClient: boolean } | null;
onShared?: () => void;
size?: "sm" | "default";
}
const SHAREABLE = ["INTERNALLY_APPROVED", "CLIENT_APPROVED"];
export function ShareWithClientButton({
versionId,
isAlreadyShared = false,
shot,
onShared,
size = "sm",
}: ShareWithClientButtonProps) {
const [sharedHere, setSharedHere] = useState(false);
const [loading, setLoading] = useState(false);
const { toast } = useToast();
// Read from props so a refresh after approving or unsharing elsewhere shows.
const shared = sharedHere || (shot ? shot.sharedWithClient : isAlreadyShared);
const needsApproval = !!shot && !SHAREABLE.includes(shot.shotApprovalStatus);
const handleShare = async () => {
if (shared || needsApproval) return;
setLoading(true);
try {
if (shot) {
await shareWithClient(shot.id);
toast({ title: "Shot shared with client", description: "The latest version of each task is now in client review" });
} else {
await shareVersionWithClient(versionId);
toast({ title: "Version shared with client" });
}
setSharedHere(true);
onShared?.();
} catch (err) {
toast({
title: "Failed to share",
description: (err as Error).message,
variant: "destructive",
});
} finally {
setLoading(false);
}
};
if (shared) {
return (
<Button
size={size}
variant="outline"
disabled
className="h-7 text-xs gap-1 text-amber-400 border-amber-500/30"
>
<CheckCircle2 className="h-3 w-3" />
<span className="hidden sm:inline">Shared with Client</span>
</Button>
);
}
const button = (
<Button
size={size}
variant="outline"
disabled={loading || needsApproval}
onClick={handleShare}
className="h-7 text-xs gap-1 text-amber-400 border-amber-500/30 hover:bg-amber-500/10"
>
<Send className="h-3 w-3" />
<span className="hidden sm:inline">{loading ? "Sharing…" : "Share with Client"}</span>
</Button>
);
// A disabled button takes no pointer events, so the explanation sits on a wrapper.
return needsApproval ? (
<span title="Approve the shot internally before sharing it with the client" className="inline-flex">
{button}
</span>
) : (
button
);
}