import { Gift, Share2 } from 'lucide-react';
import { toast } from 'sonner';
import { useState } from 'react';
import { Head } from '@inertiajs/react';
import EditorialPageHeader from '@/Components/layout/EditorialPageHeader';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import DashboardLayout from '@/Layouts/DashboardLayout';
import { copyToClipboard } from '@/lib/clipboard';
import { couldnt } from '@/lib/messages';
interface ReferralProps {
referral_url: string;
referral_count: number;
/**
* CAMPAIGN-008 / Pack 3.1 shared prop contract:
* Human-readable reward copy rendered on the referral card.
* Example: "1 free month for you + 30% off for your friend"
* Pack 3.1 reads this prop to render the ReferralCtaCard on the Dashboard.
* Defaults to a sensible fallback if billing is disabled.
*/
reward_copy: string;
}
export default function Referral({ referral_url, referral_count, reward_copy }: ReferralProps) {
const [copied, setCopied] = useState(false);
// R3UXA-013: use hardened clipboard wrapper — silently swallowing failures
// meant the button never flipped to "Copied!" and the user got no feedback.
const copyLink = async () => {
const ok = await copyToClipboard(referral_url);
if (ok) {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} else {
toast.error(couldnt('copy', 'link'));
}
};
const shareNative = async () => {
if (typeof navigator !== 'undefined' && navigator.share) {
try {
await navigator.share({
title: 'Try RankWizAI free',
text: 'I use RankWizAI to find traffic opportunities with my Google Search Console data. You can try it free:',
url: referral_url,
});
} catch {
// User cancelled or API unavailable — fall back to copy
await copyLink();
}
} else {
await copyLink();
}
};
return (
{/* Reward explanation */}
How referral rewards work
{reward_copy}
Reward is applied automatically when your friend subscribes to a paid plan.
No action needed on your end.
{/* Referral link */}
Your Referral Link
Share this link with colleagues, readers, or clients. When someone signs up using
your link, they get the referral discount automatically.
{/* Stats */}
Your Referrals
Track how many people have signed up using your referral link.