203 lines
8.4 KiB
TypeScript
203 lines
8.4 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { getSettings, updateSettings } from '@/app/actions'
|
|
import { toast } from 'sonner'
|
|
import { Loader2, Save, MessageSquare, MessageCircle, AlertCircle } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
|
|
export default function IntegrationsPage() {
|
|
const [loading, setLoading] = useState(true)
|
|
const [saving, setSaving] = useState(false)
|
|
const [settings, setSettings] = useState({
|
|
MATTERMOST_NOTIF_ENABLED: 'false',
|
|
MATTERMOST_BOT_TOKEN: '',
|
|
MATTERMOST_API_URL: '',
|
|
MATTERMOST_WEBHOOK_URL: '',
|
|
MATTERMOST_TEMPLATE: '',
|
|
WHATSAPP_TEMPLATE: '',
|
|
})
|
|
|
|
useEffect(() => {
|
|
const fetchSettings = async () => {
|
|
const data = await getSettings()
|
|
if (data) {
|
|
setSettings({
|
|
MATTERMOST_NOTIF_ENABLED: data.MATTERMOST_NOTIF_ENABLED || 'false',
|
|
MATTERMOST_BOT_TOKEN: data.MATTERMOST_BOT_TOKEN || '',
|
|
MATTERMOST_API_URL: data.MATTERMOST_API_URL || '',
|
|
MATTERMOST_WEBHOOK_URL: data.MATTERMOST_WEBHOOK_URL || '',
|
|
MATTERMOST_TEMPLATE:
|
|
data.MATTERMOST_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}',
|
|
WHATSAPP_TEMPLATE:
|
|
data.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}',
|
|
})
|
|
}
|
|
setLoading(false)
|
|
}
|
|
fetchSettings()
|
|
}, [])
|
|
|
|
const handleChange = (key: string, value: string) => {
|
|
setSettings((prev) => ({ ...prev, [key]: value }))
|
|
}
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true)
|
|
const res = await updateSettings(settings)
|
|
if (res.success) {
|
|
toast.success('Berhasil Disimpan', {
|
|
description: 'Pengaturan integrasi berhasil disimpan!',
|
|
duration: 3000,
|
|
})
|
|
} else {
|
|
toast.error('Gagal', {
|
|
description: 'Gagal menyimpan pengaturan',
|
|
duration: 3000,
|
|
})
|
|
}
|
|
setSaving(false)
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex h-64 items-center justify-center">
|
|
<Loader2 className="h-8 w-8 animate-spin text-[#1B2CC1]" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8 p-6">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-slate-900 dark:text-white">Integrasi & Sharing</h2>
|
|
<p className="mt-1 text-xs text-slate-500">
|
|
Konfigurasi endpoint API dan template pesan otomatis.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="max-w-3xl space-y-6">
|
|
{/* Mattermost Section */}
|
|
<div className="space-y-4 rounded-2xl border border-slate-200 bg-slate-50/50 p-5 dark:border-slate-800 dark:bg-slate-900/50">
|
|
<div className="flex items-center gap-2 font-black text-indigo-600 dark:text-indigo-400">
|
|
<MessageSquare className="h-5 w-5" />
|
|
<h3>Konfigurasi Mattermost</h3>
|
|
</div>
|
|
<p className="text-xs text-slate-500">
|
|
Atur integrasi Mattermost. Bagian atas untuk Notifikasi Personal (DM) ke Kreator, sedangkan bagian bawah untuk fitur Share (Broadcast) PO menggunakan Webhook.
|
|
</p>
|
|
|
|
<div className="flex flex-row items-start space-x-3 space-y-0 rounded-md border border-slate-200 p-4 dark:border-slate-800 bg-white dark:bg-slate-950">
|
|
<Checkbox
|
|
id="mattermostNotifEnabled"
|
|
checked={settings.MATTERMOST_NOTIF_ENABLED === 'true'}
|
|
onCheckedChange={(checked) => handleChange('MATTERMOST_NOTIF_ENABLED', checked ? 'true' : 'false')}
|
|
/>
|
|
<div className="space-y-1 leading-none w-full">
|
|
<Label htmlFor="mattermostNotifEnabled" className="text-sm font-bold">
|
|
Aktifkan DM Kreator saat Update Pesanan (Menggunakan Bot API)
|
|
</Label>
|
|
<p className="text-xs text-slate-500 mb-3">
|
|
Kirim notifikasi otomatis ke channel/DM kreator PO tiap ada update pesanan. (Membutuhkan Bot Token).
|
|
</p>
|
|
|
|
{settings.MATTERMOST_NOTIF_ENABLED === 'true' && (
|
|
<div className="space-y-4 mt-4 pt-4 border-t border-slate-100 dark:border-slate-800">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-[11px] font-bold text-slate-700 uppercase">API URL POST</Label>
|
|
<Input
|
|
value={settings.MATTERMOST_API_URL}
|
|
onChange={(e) => handleChange('MATTERMOST_API_URL', e.target.value)}
|
|
className="h-10 rounded-xl"
|
|
placeholder="https://mattermost.domain.com/api/v4/posts"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-[11px] font-bold text-slate-700 uppercase">Bot Bearer Token</Label>
|
|
<Input
|
|
type="password"
|
|
value={settings.MATTERMOST_BOT_TOKEN}
|
|
onChange={(e) => handleChange('MATTERMOST_BOT_TOKEN', e.target.value)}
|
|
className="h-10 rounded-xl"
|
|
placeholder="Masukan Bearer Token"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5 mt-6 pt-6 border-t border-slate-200 dark:border-slate-800">
|
|
<h4 className="text-sm font-bold text-slate-800 dark:text-slate-200 mb-3">Broadcast via Incoming Webhook</h4>
|
|
<Label className="text-xs font-bold text-slate-700 uppercase">Webhook URL</Label>
|
|
<Input
|
|
value={settings.MATTERMOST_WEBHOOK_URL}
|
|
onChange={(e) => handleChange('MATTERMOST_WEBHOOK_URL', e.target.value)}
|
|
className="h-11 rounded-xl bg-white dark:bg-slate-950"
|
|
placeholder="https://mattermost.yourdomain.com/hooks/xxx"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs font-bold text-slate-700 uppercase">Pesan Template</Label>
|
|
<Textarea
|
|
value={settings.MATTERMOST_TEMPLATE}
|
|
onChange={(e) => handleChange('MATTERMOST_TEMPLATE', e.target.value)}
|
|
className="min-h-[100px] rounded-xl bg-white dark:bg-slate-950"
|
|
placeholder="Template pesan..."
|
|
/>
|
|
<p className="flex items-center gap-1 text-[10px] text-slate-500">
|
|
<AlertCircle className="h-3 w-3" /> Gunakan variabel: {'{title}'}, {'{url}'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* WhatsApp Section */}
|
|
<div className="space-y-4 rounded-2xl border border-slate-200 bg-slate-50/50 p-5 dark:border-slate-800 dark:bg-slate-900/50">
|
|
<div className="flex items-center gap-2 font-black text-emerald-600 dark:text-emerald-400">
|
|
<MessageCircle className="h-5 w-5" />
|
|
<h3>WhatsApp Share Template</h3>
|
|
</div>
|
|
<p className="text-xs text-slate-500">
|
|
Atur template teks default saat user menekan tombol share ke WhatsApp.
|
|
</p>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs font-bold text-slate-700 uppercase">Pesan Template</Label>
|
|
<Textarea
|
|
value={settings.WHATSAPP_TEMPLATE}
|
|
onChange={(e) => handleChange('WHATSAPP_TEMPLATE', e.target.value)}
|
|
className="min-h-[100px] rounded-xl bg-white dark:bg-slate-950"
|
|
placeholder="Template pesan..."
|
|
/>
|
|
<p className="flex items-center gap-1 text-[10px] text-slate-500">
|
|
<AlertCircle className="h-3 w-3" /> Gunakan variabel: {'{title}'}, {'{url}'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-2">
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="h-11 w-full rounded-xl bg-[#1B2CC1] px-8 font-bold text-white shadow-md hover:bg-[#15229E] sm:w-auto"
|
|
>
|
|
{saving ? (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Save className="mr-2 h-4 w-4" />
|
|
)}
|
|
Simpan Konfigurasi
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|