Browse Source
feat(support): add support channels UI with 5 languages, country dial codes, and whatsapp testing
master
feat(support): add support channels UI with 5 languages, country dial codes, and whatsapp testing
master
7 changed files with 764 additions and 220 deletions
-
2.env.example
-
2src/components/layout/ServerStatusDialog.tsx
-
2src/config/navigation.ts
-
227src/features/services/ServicesPage.tsx
-
747src/features/services/components/SupportServiceView.tsx
-
2src/icons.tsx
-
2vite.config.ts
@ -0,0 +1,747 @@ |
|||||
|
import React, { useState, useMemo } from 'react' |
||||
|
import { Ic, type IconName } from '@/icons' |
||||
|
import { Card, CardContent } from '@/components/ui/card' |
||||
|
import { Button } from '@/components/ui/button' |
||||
|
import { Input } from '@/components/ui/input' |
||||
|
import { Badge } from '@/components/ui/badge' |
||||
|
import { Switch } from '@/components/ui/switch' |
||||
|
import { toFa, cn } from '@/lib/utils' |
||||
|
import { toast } from '@/stores/toast' |
||||
|
import { |
||||
|
Dialog, |
||||
|
DialogContent, |
||||
|
DialogHeader, |
||||
|
DialogTitle, |
||||
|
DialogFooter, |
||||
|
} from '@/components/ui/dialog' |
||||
|
import { |
||||
|
ServiceTranslation, |
||||
|
type ServiceLanguageCode, |
||||
|
SERVICE_LANGUAGES, |
||||
|
} from '@/components/shared/ServiceTranslation' |
||||
|
|
||||
|
export interface SupportChannel { |
||||
|
id: string |
||||
|
icon: string |
||||
|
phoneNumber: string |
||||
|
whatsappNumber: string |
||||
|
order: number |
||||
|
isActive: boolean |
||||
|
titles: Record<ServiceLanguageCode, string> |
||||
|
descriptions: Record<ServiceLanguageCode, string> |
||||
|
} |
||||
|
|
||||
|
const INITIAL_SUPPORT_CHANNELS: SupportChannel[] = [ |
||||
|
{ |
||||
|
id: 'ch-1', |
||||
|
icon: 'ticket', |
||||
|
phoneNumber: '+442071234577', |
||||
|
whatsappNumber: '+442071234577', |
||||
|
order: 1, |
||||
|
isActive: true, |
||||
|
titles: { |
||||
|
ar: 'الحجز والتذاكر', |
||||
|
fa: 'رزرو و خرید بلیت', |
||||
|
en: 'Booking & Reservation', |
||||
|
ru: 'Бронирование и билеты', |
||||
|
id: 'Pemesanan & Reservasi', |
||||
|
}, |
||||
|
descriptions: { |
||||
|
ar: 'حجز تذاكر الطيران، القطارات، تأكيد المواعيد وإلغاء أو تعديل الحجوزات', |
||||
|
fa: 'صدور و پیگیری بلیت پرواز، قطار، استرداد و تغییر زمان حرکت', |
||||
|
en: 'Flight & train ticket reservations, confirmation and scheduling support', |
||||
|
ru: 'Бронирование авиа и ж/д билетов, подтверждение и изменение рейсов', |
||||
|
id: 'Pemesanan tiket pesawat & kereta, konfirmasi dan perubahan jadwal', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
id: 'ch-2', |
||||
|
icon: 'calendar', |
||||
|
phoneNumber: '+442071234547', |
||||
|
whatsappNumber: '+442071234547', |
||||
|
order: 2, |
||||
|
isActive: true, |
||||
|
titles: { |
||||
|
ar: 'الرحلة وجدول السفر', |
||||
|
fa: 'برنامه و هماهنگی سفر', |
||||
|
en: 'Trip & Itinerary', |
||||
|
ru: 'Поездка и маршруت', |
||||
|
id: 'Jadwal Perjalanan', |
||||
|
}, |
||||
|
descriptions: { |
||||
|
ar: 'تنظيم مواعيد الرحلات، برامج الزيارات الميدانية ومرافقة القوافل', |
||||
|
fa: 'هماهنگی جدول زمانی کاروان‌ها، گشت‌های زیارتی و هماهنگی تورلیدر', |
||||
|
en: 'Travel schedules, group coordination, ziyarah guides and itineraries', |
||||
|
ru: 'Расписание поездок, координация групп и экскурсионных программ', |
||||
|
id: 'Jadwal perjalanan, koordinasi rombongan dan panduan ziarah', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
id: 'ch-3', |
||||
|
icon: 'building', |
||||
|
phoneNumber: '+442071234560', |
||||
|
whatsappNumber: '+442071234560', |
||||
|
order: 3, |
||||
|
isActive: false, |
||||
|
titles: { |
||||
|
ar: 'الإقامة والمواصلات', |
||||
|
fa: 'اقامت و ترانسفر', |
||||
|
en: 'Accommodation & Transportation', |
||||
|
ru: 'Проживание и транспорт', |
||||
|
id: 'Akomodasi & Transportasi', |
||||
|
}, |
||||
|
descriptions: { |
||||
|
ar: 'حجز الفنادق القريبة من الحرمين، الشقق المفروشة والتنقل بين المدن', |
||||
|
fa: 'هتل‌های نزدیک به حرم، ترانسفر فرودگاهی و تاکسی‌های بین‌شهری', |
||||
|
en: 'Hotel reservations near holy shrines, VIP transit and airport transfers', |
||||
|
ru: 'Отели рядом со святынями, трансфер из аэропорта и между городами', |
||||
|
id: 'Reservasi hotel dekat makam suci, transportasi bandara dan antar kota', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
id: 'ch-4', |
||||
|
icon: 'plane', |
||||
|
phoneNumber: '+442071234590', |
||||
|
whatsappNumber: '+442071234590', |
||||
|
order: 4, |
||||
|
isActive: true, |
||||
|
titles: { |
||||
|
ar: 'التأشيرة وجواز السفر', |
||||
|
fa: 'ویزا و گذرنامه', |
||||
|
en: 'Visa and Passport', |
||||
|
ru: 'Виза и загранпаспорт', |
||||
|
id: 'Visa dan Paspor', |
||||
|
}, |
||||
|
descriptions: { |
||||
|
ar: 'إجراءات استخراج وتجديد التأشيرات السياحية والدينية والاستشارات القنصلية', |
||||
|
fa: 'پیگیری روادید الکترونیک، تمدید اقامت، امور کنسولی و گذرنامه‌های مفقودی', |
||||
|
en: 'Visa processing, stay extensions, embassy affairs and lost passport aid', |
||||
|
ru: 'Оформление электронных виз, продление пребывания и консульская помощь', |
||||
|
id: 'Pengurusan visa ziarah, perpanjangan izin tinggal dan bantuan paspor', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
id: 'ch-5', |
||||
|
icon: 'shrine', |
||||
|
phoneNumber: '+442071234555', |
||||
|
whatsappNumber: '+442071234555', |
||||
|
order: 5, |
||||
|
isActive: true, |
||||
|
titles: { |
||||
|
ar: 'المسائل والأحكام الشرعية', |
||||
|
fa: 'احکام و مسائل شرعی', |
||||
|
en: 'Religious Issues', |
||||
|
ru: 'Религиозные вопросы', |
||||
|
id: 'Masalah Keagamaan', |
||||
|
}, |
||||
|
descriptions: { |
||||
|
ar: 'الاستفتاءات الشرعية، أحكام صلاة وقصر المسافر، ومناسك الحج والعمرة والزيارة', |
||||
|
fa: 'پاسخ به سوالات شرعی، احکام نماز و روزه مسافر، مناسک و آداب زیارت', |
||||
|
en: 'Religious decrees, prayer travel rulings, and pilgrim etiquette and rituals', |
||||
|
ru: 'Шариатские ответы, правила молитвы в пути и обряды паломничества', |
||||
|
id: 'Konsultasi hukum syariah, tata cara shalat musafir dan manasik ziarah', |
||||
|
}, |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
const AVAILABLE_ICONS: { id: string; label: string; icon: IconName }[] = [ |
||||
|
{ id: 'ticket', label: 'بلیت', icon: 'ticket' }, |
||||
|
{ id: 'calendar', label: 'تقویم', icon: 'calendar' }, |
||||
|
{ id: 'building', label: 'هتل', icon: 'building' }, |
||||
|
{ id: 'plane', label: 'ویزا', icon: 'plane' }, |
||||
|
{ id: 'shrine', label: 'احکام', icon: 'shrine' }, |
||||
|
{ id: 'headset', label: 'پشتیبانی', icon: 'headset' }, |
||||
|
{ id: 'phone', label: 'تماس', icon: 'phone' }, |
||||
|
] |
||||
|
|
||||
|
export const COUNTRY_DIAL_CODES = [ |
||||
|
{ code: 'GB', name: 'انگلستان', flag: '🇬🇧', dialCode: '+44' }, |
||||
|
{ code: 'IQ', name: 'عراق', flag: '🇮🇶', dialCode: '+964' }, |
||||
|
{ code: 'IR', name: 'ایران', flag: '🇮🇷', dialCode: '+98' }, |
||||
|
{ code: 'SA', name: 'عربستان', flag: '🇸🇦', dialCode: '+966' }, |
||||
|
{ code: 'AE', name: 'امارات', flag: '🇦🇪', dialCode: '+971' }, |
||||
|
{ code: 'KW', name: 'کویت', flag: '🇰🇼', dialCode: '+965' }, |
||||
|
{ code: 'BH', name: 'بحرین', flag: '🇧🇭', dialCode: '+973' }, |
||||
|
{ code: 'OM', name: 'عمان', flag: '🇴🇲', dialCode: '+968' }, |
||||
|
{ code: 'QA', name: 'قطر', flag: '🇶🇦', dialCode: '+974' }, |
||||
|
{ code: 'TR', name: 'ترکیه', flag: '🇹🇷', dialCode: '+90' }, |
||||
|
{ code: 'LB', name: 'لبنان', flag: '🇱🇧', dialCode: '+961' }, |
||||
|
{ code: 'SY', name: 'سوریه', flag: '🇸🇾', dialCode: '+963' }, |
||||
|
{ code: 'RU', name: 'روسیه', flag: '🇷🇺', dialCode: '+7' }, |
||||
|
{ code: 'ID', name: 'اندونزی', flag: '🇮🇩', dialCode: '+62' }, |
||||
|
{ code: 'PK', name: 'پاکستان', flag: '🇵🇰', dialCode: '+92' }, |
||||
|
{ code: 'IN', name: 'هند', flag: '🇮🇳', dialCode: '+91' }, |
||||
|
{ code: 'AF', name: 'افغانستان', flag: '🇦🇫', dialCode: '+93' }, |
||||
|
{ code: 'EG', name: 'مصر', flag: '🇪🇬', dialCode: '+20' }, |
||||
|
{ code: 'DE', name: 'آلمان', flag: '🇩🇪', dialCode: '+49' }, |
||||
|
{ code: 'FR', name: 'فرانسه', flag: '🇫🇷', dialCode: '+33' }, |
||||
|
{ code: 'US', name: 'آمریکا / کانادا', flag: '🇺🇸', dialCode: '+1' }, |
||||
|
] |
||||
|
|
||||
|
function splitPhoneNumber(fullPhone: string): { dialCode: string; body: string } { |
||||
|
const clean = (fullPhone || '').trim().replace(/^00/, '+') |
||||
|
if (!clean) return { dialCode: '+44', body: '' } |
||||
|
const sorted = [...COUNTRY_DIAL_CODES].sort((a, b) => b.dialCode.length - a.dialCode.length) |
||||
|
for (const c of sorted) { |
||||
|
if (clean.startsWith(c.dialCode)) { |
||||
|
return { dialCode: c.dialCode, body: clean.slice(c.dialCode.length).replace(/[^\d]/g, '') } |
||||
|
} |
||||
|
} |
||||
|
return { dialCode: '+44', body: clean.replace(/[^\d]/g, '') } |
||||
|
} |
||||
|
|
||||
|
export function SupportServiceView() { |
||||
|
const [channels, setChannels] = useState<SupportChannel[]>(() => { |
||||
|
try { |
||||
|
const saved = localStorage.getItem('aqila_support_channels') |
||||
|
if (saved) return JSON.parse(saved) |
||||
|
} catch { |
||||
|
// fallback
|
||||
|
} |
||||
|
return INITIAL_SUPPORT_CHANNELS |
||||
|
}) |
||||
|
|
||||
|
const persistChannels = (updated: SupportChannel[]) => { |
||||
|
setChannels(updated) |
||||
|
try { |
||||
|
localStorage.setItem('aqila_support_channels', JSON.stringify(updated)) |
||||
|
} catch { |
||||
|
// ignore
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// زبان پیش‌نمایش کارت‌ها (پیش‌فرض عربی مطابق اپلیکیشن)
|
||||
|
const [previewLang, setPreviewLang] = useState<ServiceLanguageCode>('ar') |
||||
|
|
||||
|
// فیلترها
|
||||
|
const [statusFilter, setStatusFilter] = useState<'ALL' | 'ACTIVE' | 'INACTIVE'>('ALL') |
||||
|
const [searchQuery, setSearchQuery] = useState('') |
||||
|
|
||||
|
// دیالوگ افزودن / ویرایش
|
||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false) |
||||
|
const [editingChannel, setEditingChannel] = useState<SupportChannel | null>(null) |
||||
|
const [dialogLangTab, setDialogLangTab] = useState<ServiceLanguageCode>('ar') |
||||
|
|
||||
|
const [formTitles, setFormTitles] = useState<Record<ServiceLanguageCode, string>>({ |
||||
|
ar: '', fa: '', en: '', ru: '', id: '', |
||||
|
}) |
||||
|
const [formDescriptions, setFormDescriptions] = useState<Record<ServiceLanguageCode, string>>({ |
||||
|
ar: '', fa: '', en: '', ru: '', id: '', |
||||
|
}) |
||||
|
const [formCountryDialCode, setFormCountryDialCode] = useState('+44') |
||||
|
const [formPhoneBody, setFormPhoneBody] = useState('') |
||||
|
const [formIcon, setFormIcon] = useState('headset') |
||||
|
const [formOrder, setFormOrder] = useState<number>(1) |
||||
|
const [formIsActive, setFormIsActive] = useState(true) |
||||
|
|
||||
|
const handleOpenCreate = () => { |
||||
|
setEditingChannel(null) |
||||
|
setDialogLangTab('ar') |
||||
|
setFormTitles({ ar: '', fa: '', en: '', ru: '', id: '' }) |
||||
|
setFormDescriptions({ ar: '', fa: '', en: '', ru: '', id: '' }) |
||||
|
setFormCountryDialCode('+44') |
||||
|
setFormPhoneBody('') |
||||
|
setFormIcon('headset') |
||||
|
setFormOrder(channels.length + 1) |
||||
|
setFormIsActive(true) |
||||
|
setIsDialogOpen(true) |
||||
|
} |
||||
|
|
||||
|
const handleOpenEdit = (channel: SupportChannel) => { |
||||
|
setEditingChannel(channel) |
||||
|
setDialogLangTab('ar') |
||||
|
setFormTitles({ ...channel.titles }) |
||||
|
setFormDescriptions({ ...channel.descriptions }) |
||||
|
const parsed = splitPhoneNumber(channel.phoneNumber) |
||||
|
setFormCountryDialCode(parsed.dialCode) |
||||
|
setFormPhoneBody(parsed.body) |
||||
|
setFormIcon(channel.icon) |
||||
|
setFormOrder(channel.order) |
||||
|
setFormIsActive(channel.isActive) |
||||
|
setIsDialogOpen(true) |
||||
|
} |
||||
|
|
||||
|
const handleTestWhatsAppInModal = () => { |
||||
|
const cleanBody = formPhoneBody.replace(/\D/g, '') |
||||
|
if (!cleanBody) { |
||||
|
toast.error('لطفاً شماره تماس را وارد نمایید.') |
||||
|
return |
||||
|
} |
||||
|
const full = `${formCountryDialCode.replace('+', '')}${cleanBody}` |
||||
|
window.open(`https://wa.me/${full}`, '_blank') |
||||
|
toast.success(`چت واتس‌اپ برای شماره ${formCountryDialCode} ${cleanBody} باز شد.`) |
||||
|
} |
||||
|
|
||||
|
const handleSaveChannel = (e: React.FormEvent) => { |
||||
|
e.preventDefault() |
||||
|
if (!formTitles.ar.trim() && !formTitles.fa.trim() && !formTitles.en.trim()) { |
||||
|
toast.error('لطفاً عنوان کانال را وارد کنید.') |
||||
|
return |
||||
|
} |
||||
|
const cleanBody = formPhoneBody.replace(/\D/g, '') |
||||
|
if (!cleanBody) { |
||||
|
toast.error('لطفاً شماره تماس را وارد کنید.') |
||||
|
return |
||||
|
} |
||||
|
const fullPhone = `${formCountryDialCode}${cleanBody}` |
||||
|
|
||||
|
if (editingChannel) { |
||||
|
const updated = channels.map((c) => |
||||
|
c.id === editingChannel.id |
||||
|
? { |
||||
|
...c, |
||||
|
icon: formIcon, |
||||
|
phoneNumber: fullPhone, |
||||
|
whatsappNumber: fullPhone, |
||||
|
order: formOrder, |
||||
|
isActive: formIsActive, |
||||
|
titles: { ...formTitles }, |
||||
|
descriptions: { ...formDescriptions }, |
||||
|
} |
||||
|
: c |
||||
|
) |
||||
|
persistChannels(updated) |
||||
|
toast.success('کانال پشتیبانی به‌روزرسانی شد.') |
||||
|
} else { |
||||
|
const newChannel: SupportChannel = { |
||||
|
id: `ch-${Date.now()}`, |
||||
|
icon: formIcon, |
||||
|
phoneNumber: fullPhone, |
||||
|
whatsappNumber: fullPhone, |
||||
|
order: formOrder, |
||||
|
isActive: formIsActive, |
||||
|
titles: { ...formTitles }, |
||||
|
descriptions: { ...formDescriptions }, |
||||
|
} |
||||
|
persistChannels([...channels, newChannel]) |
||||
|
toast.success('کانال پشتیبانی با موفقیت اضافه شد.') |
||||
|
} |
||||
|
setIsDialogOpen(false) |
||||
|
} |
||||
|
|
||||
|
const handleToggleActive = (id: string, e?: React.MouseEvent) => { |
||||
|
e?.stopPropagation() |
||||
|
const updated = channels.map((c) => { |
||||
|
if (c.id === id) { |
||||
|
const nextState = !c.isActive |
||||
|
toast.success(nextState ? 'کانال فعال شد.' : 'کانال غیرفعال شد.') |
||||
|
return { ...c, isActive: nextState } |
||||
|
} |
||||
|
return c |
||||
|
}) |
||||
|
persistChannels(updated) |
||||
|
} |
||||
|
|
||||
|
const handleDeleteChannel = (channel: SupportChannel) => { |
||||
|
if (confirm(`آیا از حذف این کانال اطمینان دارید؟`)) { |
||||
|
const updated = channels.filter((c) => c.id !== channel.id) |
||||
|
persistChannels(updated) |
||||
|
toast.success('کانال پشتیبانی حذف شد.') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handleTestWhatsApp = (phone: string) => { |
||||
|
const cleanNumber = phone.replace(/[^\d+]/g, '') |
||||
|
const url = `https://wa.me/${cleanNumber.replace('+', '')}` |
||||
|
window.open(url, '_blank') |
||||
|
} |
||||
|
|
||||
|
const filteredChannels = useMemo(() => { |
||||
|
return channels |
||||
|
.filter((c) => { |
||||
|
if (statusFilter === 'ACTIVE' && !c.isActive) return false |
||||
|
if (statusFilter === 'INACTIVE' && c.isActive) return false |
||||
|
|
||||
|
if (searchQuery.trim()) { |
||||
|
const q = searchQuery.toLowerCase().trim() |
||||
|
const matchPhone = c.phoneNumber.includes(q) |
||||
|
const matchTitle = Object.values(c.titles).some((t) => t.toLowerCase().includes(q)) |
||||
|
if (!matchPhone && !matchTitle) return false |
||||
|
} |
||||
|
return true |
||||
|
}) |
||||
|
.sort((a, b) => a.order - b.order) |
||||
|
}, [channels, statusFilter, searchQuery]) |
||||
|
|
||||
|
const activeCount = channels.filter((c) => c.isActive).length |
||||
|
const inactiveCount = channels.length - activeCount |
||||
|
|
||||
|
return ( |
||||
|
<div className="space-y-4"> |
||||
|
{/* نوار کنترل مینیمال و یکپارچه */} |
||||
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 rounded-2xl border border-border-soft bg-card/40 p-3 backdrop-blur-xs"> |
||||
|
{/* فیلتر وضعیت و پیش‌نمایش زبان */} |
||||
|
<div className="flex items-center gap-2 flex-wrap"> |
||||
|
{/* تب‌های وضعیت */} |
||||
|
<div className="flex items-center rounded-xl border border-border-soft bg-surface-base p-0.5"> |
||||
|
<button |
||||
|
onClick={() => setStatusFilter('ALL')} |
||||
|
className={cn( |
||||
|
'px-2.5 py-1 rounded-lg text-xs font-bold transition', |
||||
|
statusFilter === 'ALL' |
||||
|
? 'bg-card text-foreground shadow-xs' |
||||
|
: 'text-grey-3 hover:text-foreground' |
||||
|
)} |
||||
|
> |
||||
|
همه ({toFa(channels.length)}) |
||||
|
</button> |
||||
|
<button |
||||
|
onClick={() => setStatusFilter('ACTIVE')} |
||||
|
className={cn( |
||||
|
'px-2.5 py-1 rounded-lg text-xs font-bold transition flex items-center gap-1', |
||||
|
statusFilter === 'ACTIVE' |
||||
|
? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400' |
||||
|
: 'text-grey-3 hover:text-foreground' |
||||
|
)} |
||||
|
> |
||||
|
<span className="size-1.5 rounded-full bg-emerald-500" /> |
||||
|
<span>فعال ({toFa(activeCount)})</span> |
||||
|
</button> |
||||
|
<button |
||||
|
onClick={() => setStatusFilter('INACTIVE')} |
||||
|
className={cn( |
||||
|
'px-2.5 py-1 rounded-lg text-xs font-bold transition flex items-center gap-1', |
||||
|
statusFilter === 'INACTIVE' |
||||
|
? 'bg-zinc-500/15 text-zinc-400' |
||||
|
: 'text-grey-3 hover:text-foreground' |
||||
|
)} |
||||
|
> |
||||
|
<span>غیرفعال ({toFa(inactiveCount)})</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div className="h-5 w-px bg-border-soft hidden sm:block" /> |
||||
|
|
||||
|
{/* انتخابگر زبان پیش‌نمایش ۵ زبانه */} |
||||
|
<div className="flex items-center gap-1"> |
||||
|
{SERVICE_LANGUAGES.map((l) => ( |
||||
|
<button |
||||
|
key={l.code} |
||||
|
onClick={() => setPreviewLang(l.code)} |
||||
|
title={l.name} |
||||
|
className={cn( |
||||
|
'flex items-center gap-1 px-2 py-1 rounded-lg text-[11px] font-bold transition', |
||||
|
previewLang === l.code |
||||
|
? 'bg-primary text-primary-foreground shadow-xs' |
||||
|
: 'text-grey-3 hover:text-foreground hover:bg-surface-base' |
||||
|
)} |
||||
|
> |
||||
|
<span>{l.flag}</span> |
||||
|
<span>{l.badge}</span> |
||||
|
</button> |
||||
|
))} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* جستجو و دکمه افزودن */} |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<div className="relative min-w-[180px] flex-1 sm:flex-none"> |
||||
|
<Ic name="search" className="absolute start-2.5 top-1/2 -translate-y-1/2 size-3.5 text-grey-3" /> |
||||
|
<Input |
||||
|
value={searchQuery} |
||||
|
onChange={(e) => setSearchQuery(e.target.value)} |
||||
|
placeholder="جستجو..." |
||||
|
className="h-8 ps-8 text-xs bg-surface-base rounded-xl border-border-soft" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<Button |
||||
|
onClick={handleOpenCreate} |
||||
|
size="sm" |
||||
|
className="rounded-xl text-xs gap-1.5 h-8 font-bold bg-primary text-primary-foreground hover:bg-primary/90 shrink-0" |
||||
|
> |
||||
|
<Ic name="plus" className="size-3.5" /> |
||||
|
<span>افزودن</span> |
||||
|
</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* کارت‌های ساده، خلوت و مدرن کانال‌ها */} |
||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"> |
||||
|
{filteredChannels.map((channel) => { |
||||
|
const title = channel.titles[previewLang] || channel.titles.ar || channel.titles.fa |
||||
|
const desc = channel.descriptions[previewLang] || channel.descriptions.ar |
||||
|
|
||||
|
return ( |
||||
|
<Card |
||||
|
key={channel.id} |
||||
|
className={cn( |
||||
|
'rounded-2xl border transition p-4 flex flex-col justify-between shadow-xs', |
||||
|
channel.isActive |
||||
|
? 'border-border-soft bg-card/40 hover:border-primary/40' |
||||
|
: 'border-dashed border-border-soft/60 bg-card/15 opacity-65' |
||||
|
)} |
||||
|
> |
||||
|
<CardContent className="p-0 space-y-3"> |
||||
|
{/* ردیف اول: آیکون، عنوان و سوئیچ وضعیت */} |
||||
|
<div className="flex items-start justify-between gap-2.5"> |
||||
|
<div className="flex items-center gap-3"> |
||||
|
<div className="size-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0"> |
||||
|
<Ic name={channel.icon as IconName || 'headset'} className="size-5" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<h4 className="text-sm font-black text-foreground line-clamp-1"> |
||||
|
{title} |
||||
|
</h4> |
||||
|
<div className="flex items-center gap-2 mt-0.5"> |
||||
|
<span className="text-[10px] text-grey-3 font-mono"> |
||||
|
#{toFa(channel.order)} |
||||
|
</span> |
||||
|
<span |
||||
|
className={cn( |
||||
|
'text-[10px] font-bold', |
||||
|
channel.isActive ? 'text-emerald-500' : 'text-zinc-500' |
||||
|
)} |
||||
|
> |
||||
|
{channel.isActive ? 'فعال' : 'غیرفعال'} |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<Switch |
||||
|
checked={channel.isActive} |
||||
|
onCheckedChange={() => handleToggleActive(channel.id)} |
||||
|
className="data-[state=checked]:bg-emerald-500" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
{/* توضیحات مختصر در صورت وجود */} |
||||
|
{desc && ( |
||||
|
<p className="text-xs text-grey-3 line-clamp-1 leading-relaxed"> |
||||
|
{desc} |
||||
|
</p> |
||||
|
)} |
||||
|
|
||||
|
{/* ردیف شماره تماس و اکشن‌ها */} |
||||
|
<div className="flex items-center justify-between pt-2.5 border-t border-border-soft text-xs"> |
||||
|
<button |
||||
|
onClick={() => handleTestWhatsApp(channel.whatsappNumber || channel.phoneNumber)} |
||||
|
className="flex items-center gap-1.5 font-mono dir-ltr text-grey-3 hover:text-emerald-500 transition text-[11px]" |
||||
|
title="ارسال پیام واتس‌اپ" |
||||
|
> |
||||
|
<Ic name="whatsapp" className="size-3.5 text-emerald-500 shrink-0" /> |
||||
|
<span>{channel.phoneNumber}</span> |
||||
|
</button> |
||||
|
|
||||
|
<div className="flex items-center gap-1"> |
||||
|
<Button |
||||
|
variant="ghost" |
||||
|
size="sm" |
||||
|
onClick={() => handleOpenEdit(channel)} |
||||
|
className="size-7 p-0 rounded-lg text-primary hover:bg-primary/10" |
||||
|
title="ویرایش" |
||||
|
> |
||||
|
<Ic name="edit" className="size-3.5" /> |
||||
|
</Button> |
||||
|
<Button |
||||
|
variant="ghost" |
||||
|
size="sm" |
||||
|
onClick={() => handleDeleteChannel(channel)} |
||||
|
className="size-7 p-0 rounded-lg text-rose-500 hover:bg-rose-500/10" |
||||
|
title="حذف" |
||||
|
> |
||||
|
<Ic name="trash" className="size-3.5" /> |
||||
|
</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</CardContent> |
||||
|
</Card> |
||||
|
) |
||||
|
})} |
||||
|
</div> |
||||
|
|
||||
|
{/* دیالوگ تمیز افزودن و ویرایش */} |
||||
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}> |
||||
|
<DialogContent className="max-w-lg max-h-[85vh] overflow-y-auto rounded-3xl p-5 bg-card border-border-soft"> |
||||
|
<DialogHeader className="text-right pb-1"> |
||||
|
<DialogTitle className="text-sm font-black text-foreground"> |
||||
|
{editingChannel ? 'ویرایش کانال پشتیبانی' : 'افزودن کانال پشتیبانی'} |
||||
|
</DialogTitle> |
||||
|
</DialogHeader> |
||||
|
|
||||
|
<form onSubmit={handleSaveChannel} className="space-y-4 pt-2"> |
||||
|
{/* تب‌های ۵ زبان با کامپوننت مشترک ServiceTranslation */} |
||||
|
<ServiceTranslation |
||||
|
activeLang={dialogLangTab} |
||||
|
onLangChange={(lang) => setDialogLangTab(lang)} |
||||
|
completedLangs={Object.fromEntries( |
||||
|
Object.entries(formTitles).map(([k, v]) => [k, Boolean(v?.trim())]) |
||||
|
)} |
||||
|
primaryLang="ar" |
||||
|
title="زبان محتوا" |
||||
|
variant="grid" |
||||
|
/> |
||||
|
|
||||
|
{/* عنوان به زبان فعال */} |
||||
|
{(() => { |
||||
|
const currentMeta = SERVICE_LANGUAGES.find((l) => l.code === dialogLangTab) || SERVICE_LANGUAGES[0] |
||||
|
return ( |
||||
|
<div className="space-y-2.5"> |
||||
|
<div className="space-y-1"> |
||||
|
<label className="text-xs font-bold text-foreground block"> |
||||
|
عنوان کانال ({currentMeta.name}) |
||||
|
</label> |
||||
|
<Input |
||||
|
value={formTitles[dialogLangTab] || ''} |
||||
|
onChange={(e) => |
||||
|
setFormTitles({ ...formTitles, [dialogLangTab]: e.target.value }) |
||||
|
} |
||||
|
dir={currentMeta.dir} |
||||
|
placeholder={`عنوان به ${currentMeta.name}...`} |
||||
|
className="h-9 text-xs bg-surface-base rounded-xl border-border-soft" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-1"> |
||||
|
<label className="text-xs font-medium text-grey-3 block"> |
||||
|
توضیح کوتاه ({currentMeta.name}) |
||||
|
</label> |
||||
|
<Input |
||||
|
value={formDescriptions[dialogLangTab] || ''} |
||||
|
onChange={(e) => |
||||
|
setFormDescriptions({ ...formDescriptions, [dialogLangTab]: e.target.value }) |
||||
|
} |
||||
|
dir={currentMeta.dir} |
||||
|
placeholder="توضیح کوتاه اختیاری..." |
||||
|
className="h-9 text-xs bg-surface-base rounded-xl border-border-soft" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
})()} |
||||
|
|
||||
|
{/* شماره تماس همراه با انتخابگر کشور و پرچم + دکمه تست مستقیم واتس‌اپ */} |
||||
|
<div className="space-y-3"> |
||||
|
<div className="space-y-1.5"> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<label className="text-xs font-bold text-foreground flex items-center gap-1"> |
||||
|
<span>شماره تماس و واتس‌اپ</span> |
||||
|
<span className="text-rose-500">*</span> |
||||
|
</label> |
||||
|
|
||||
|
{/* دکمه اختصاصی باز کردن و تست مستقیم واتس‌اپ */} |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={handleTestWhatsAppInModal} |
||||
|
className="h-7 px-2.5 rounded-lg text-[11px] font-bold bg-emerald-600 hover:bg-emerald-500 text-white flex items-center gap-1.5 transition active:scale-95 shadow-xs" |
||||
|
title="باز کردن مستقیم چت در واتس‌اپ" |
||||
|
> |
||||
|
<Ic name="whatsapp" className="size-3.5 text-white" /> |
||||
|
<span>تست مستقیم واتس‌اپ</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
{/* کامپوننت ترکیبی انتخاب کشور با پرچم + اینپوت شماره */} |
||||
|
<div className="flex items-center rounded-xl border border-border-soft bg-surface-base overflow-hidden focus-within:border-primary transition"> |
||||
|
{/* سلکتور پیش‌شماره کشور همراه با پرچم */} |
||||
|
<div className="relative shrink-0 border-l border-border-soft bg-card/60"> |
||||
|
<select |
||||
|
value={formCountryDialCode} |
||||
|
onChange={(e) => setFormCountryDialCode(e.target.value)} |
||||
|
className="h-9 bg-transparent px-2.5 text-xs font-mono font-bold text-foreground border-none outline-none cursor-pointer appearance-none pr-7 pl-2" |
||||
|
dir="ltr" |
||||
|
> |
||||
|
{COUNTRY_DIAL_CODES.map((c) => ( |
||||
|
<option key={c.code} value={c.dialCode} className="bg-card text-foreground"> |
||||
|
{c.flag} {c.dialCode} ({c.name}) |
||||
|
</option> |
||||
|
))} |
||||
|
</select> |
||||
|
<Ic name="chevDown" className="size-3 text-grey-3 absolute end-2 top-1/2 -translate-y-1/2 pointer-events-none" /> |
||||
|
</div> |
||||
|
|
||||
|
{/* فیلد وارد کردن شماره تماس */} |
||||
|
<Input |
||||
|
value={formPhoneBody} |
||||
|
onChange={(e) => setFormPhoneBody(e.target.value)} |
||||
|
dir="ltr" |
||||
|
placeholder="2071234577" |
||||
|
className="h-9 border-0 bg-transparent text-xs font-mono focus-visible:ring-0 shadow-none px-3" |
||||
|
required |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
{/* پیش‌نمایش زنده شماره */} |
||||
|
<div className="flex items-center justify-between text-[11px] text-grey-3 px-1"> |
||||
|
<span>شماره نهایی:</span> |
||||
|
<span className="font-mono font-bold text-emerald-500 dir-ltr"> |
||||
|
{formCountryDialCode} {formPhoneBody || '---'} |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* ترتیب نمایش */} |
||||
|
<div className="space-y-1"> |
||||
|
<label className="text-xs font-bold text-foreground block"> |
||||
|
ترتیب نمایش در اپلیکیشن |
||||
|
</label> |
||||
|
<Input |
||||
|
type="number" |
||||
|
min="1" |
||||
|
value={formOrder} |
||||
|
onChange={(e) => setFormOrder(parseInt(e.target.value) || 1)} |
||||
|
className="h-9 text-xs bg-surface-base rounded-xl border-border-soft font-mono" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* آیکون و وضعیت فعال */} |
||||
|
<div className="space-y-2"> |
||||
|
<label className="text-xs font-bold text-foreground block"> |
||||
|
انتخاب آیکون |
||||
|
</label> |
||||
|
<div className="grid grid-cols-7 gap-1.5"> |
||||
|
{AVAILABLE_ICONS.map((item) => ( |
||||
|
<button |
||||
|
key={item.id} |
||||
|
type="button" |
||||
|
onClick={() => setFormIcon(item.id)} |
||||
|
className={cn( |
||||
|
'p-2 rounded-xl border transition flex items-center justify-center', |
||||
|
formIcon === item.id |
||||
|
? 'border-primary bg-primary/10 text-primary' |
||||
|
: 'border-border-soft bg-surface-base text-grey-3 hover:text-foreground' |
||||
|
)} |
||||
|
title={item.label} |
||||
|
> |
||||
|
<Ic name={item.icon} className="size-4" /> |
||||
|
</button> |
||||
|
))} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="rounded-xl border border-border-soft bg-surface-base p-2.5 flex items-center justify-between"> |
||||
|
<span className="text-xs font-bold text-foreground"> |
||||
|
وضعیت فعال در اپلیکیشن |
||||
|
</span> |
||||
|
<Switch |
||||
|
checked={formIsActive} |
||||
|
onCheckedChange={setFormIsActive} |
||||
|
className="data-[state=checked]:bg-emerald-500" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<DialogFooter className="flex items-center justify-between gap-2 pt-2 border-t border-border-soft"> |
||||
|
<Button |
||||
|
type="button" |
||||
|
variant="outline" |
||||
|
onClick={() => setIsDialogOpen(false)} |
||||
|
className="rounded-xl text-xs h-8" |
||||
|
> |
||||
|
انصراف |
||||
|
</Button> |
||||
|
<Button |
||||
|
type="submit" |
||||
|
className="rounded-xl text-xs h-8 bg-primary text-primary-foreground hover:bg-primary/90 font-bold" |
||||
|
> |
||||
|
ذخیره |
||||
|
</Button> |
||||
|
</DialogFooter> |
||||
|
</form> |
||||
|
</DialogContent> |
||||
|
</Dialog> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
export default SupportServiceView |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue