132 lines
4.4 KiB
TypeScript
132 lines
4.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
|
import { Share2, Check, Copy, MessageCircle, MessageSquare, Loader2 } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { broadcastToMattermost, getSettings } from '@/app/actions'
|
|
import { toast } from 'sonner'
|
|
|
|
interface ShareButtonProps {
|
|
orderId: string
|
|
orderTitle?: string
|
|
className?: string
|
|
variant?: 'link' | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost'
|
|
size?: 'default' | 'sm' | 'lg' | 'icon'
|
|
showText?: boolean
|
|
}
|
|
|
|
export function ShareButton({
|
|
orderId,
|
|
orderTitle = 'Pesanan',
|
|
className,
|
|
variant = 'outline',
|
|
size = 'sm',
|
|
showText = true,
|
|
}: ShareButtonProps) {
|
|
const [copied, setCopied] = useState(false)
|
|
const [open, setOpen] = useState(false)
|
|
const [broadcasting, setBroadcasting] = useState(false)
|
|
|
|
const handleCopyLink = () => {
|
|
const url = `${window.location.origin}/order/${orderId}`
|
|
navigator.clipboard.writeText(url)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
}
|
|
|
|
const handleShareWA = async () => {
|
|
const settings = await getSettings()
|
|
let template =
|
|
settings.WHATSAPP_TEMPLATE ||
|
|
'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}'
|
|
|
|
const url = `${window.location.origin}/order/${orderId}`
|
|
const text = template.replace('{title}', orderTitle).replace('{url}', url)
|
|
|
|
window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(text)}`, '_blank')
|
|
}
|
|
|
|
const handleBroadcastMattermost = async () => {
|
|
setBroadcasting(true)
|
|
const url = `${window.location.origin}/order/${orderId}`
|
|
const res = await broadcastToMattermost(orderId, url)
|
|
if (res.success) {
|
|
toast.success('Broadcast Terkirim!', {
|
|
description: 'Berhasil mengirim pesan ke Mattermost.',
|
|
duration: 3000,
|
|
})
|
|
setOpen(false)
|
|
} else {
|
|
toast.error('Gagal Broadcast', {
|
|
description: res.error || 'Terjadi kesalahan saat mengirim.',
|
|
duration: 3000,
|
|
})
|
|
}
|
|
setBroadcasting(false)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
variant={variant}
|
|
size={size}
|
|
className={cn('transition-all', className)}
|
|
title="Bagikan PO"
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<Share2 className="h-3.5 w-3.5 shrink-0" />
|
|
{showText && <span className="hidden truncate sm:inline">Bagikan</span>}
|
|
</Button>
|
|
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent className="rounded-3xl border-slate-200/90 p-6 sm:max-w-xs dark:border-slate-800">
|
|
<DialogTitle className="mb-2 text-center text-xl font-black text-slate-900 dark:text-white">
|
|
Bagikan Pesanan
|
|
</DialogTitle>
|
|
<p className="mb-4 text-center text-sm text-slate-500">
|
|
Pilih metode untuk membagikan PO ini ke teman atau tim Anda.
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleCopyLink}
|
|
className="h-11 w-full justify-start gap-3 rounded-xl font-bold text-slate-700 dark:text-slate-300"
|
|
>
|
|
{copied ? (
|
|
<Check className="h-4 w-4 text-emerald-500" />
|
|
) : (
|
|
<Copy className="h-4 w-4" />
|
|
)}
|
|
{copied ? 'Tautan Disalin!' : 'Salin Tautan'}
|
|
</Button>
|
|
|
|
<Button
|
|
onClick={handleShareWA}
|
|
className="h-11 w-full justify-start gap-3 rounded-xl bg-[#25D366] font-bold text-white hover:bg-[#20bd5a]"
|
|
>
|
|
<MessageCircle className="h-4 w-4" />
|
|
Kirim ke WhatsApp
|
|
</Button>
|
|
|
|
<Button
|
|
onClick={handleBroadcastMattermost}
|
|
disabled={broadcasting}
|
|
className="h-11 w-full justify-start gap-3 rounded-xl bg-[#0668E1] font-bold text-white hover:bg-[#0557bc]"
|
|
>
|
|
{broadcasting ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<MessageSquare className="h-4 w-4" />
|
|
)}
|
|
{broadcasting ? 'Mengirim...' : 'Broadcast ke Mattermost'}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|