439 lines
18 KiB
JavaScript
439 lines
18 KiB
JavaScript
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
|
import { useParams, useSearchParams } from 'react-router-dom';
|
|
import apiClient from '../api/client';
|
|
import TemplateDetailWorkspaceModal from '../components/TemplateDetailWorkspaceModal';
|
|
import WhitelistModal from '../components/WhitelistModal';
|
|
import TestSmsModal from '../components/TestSmsModal';
|
|
|
|
const MANAGEABLE_TEMPLATE_STATUSES = new Set(['pending_whitelisting', 'whitelisted']);
|
|
|
|
const CARD_APPEARANCE = {
|
|
live: {
|
|
pillLabel: 'Live',
|
|
pillClassName: 'border-[#9dd3c5] bg-[#e9f6f1] text-[#2f7f74]',
|
|
accentClassName: 'border-l-[#2f7f74]',
|
|
switchTrackClassName: 'border-[#2f7f74] bg-[#2f7f74]',
|
|
description: 'Published template is active for runtime sending.',
|
|
},
|
|
paused: {
|
|
pillLabel: 'Paused',
|
|
pillClassName: 'border-[#d6dde6] bg-[#f3f6fa] text-[#5f6f82]',
|
|
accentClassName: 'border-l-[#8fa0b3]',
|
|
switchTrackClassName: 'border-[#8fa0b3] bg-[#8fa0b3]',
|
|
description: 'Published template is available, but runtime sending is paused.',
|
|
},
|
|
pending: {
|
|
pillLabel: 'Pending Whitelisting',
|
|
pillClassName: 'border-[#bfd0ff] bg-[#f2f6ff] text-[#4563d5]',
|
|
accentClassName: 'border-l-[#4563d5]',
|
|
switchTrackClassName: 'border-[#d8dee8] bg-[#eef1f5]',
|
|
description: 'Selected template is awaiting whitelisting before it can go live.',
|
|
},
|
|
};
|
|
|
|
function matchesTemplateSearch(template, profile, rawSearchTerm) {
|
|
const searchTerm = rawSearchTerm.trim().toLowerCase();
|
|
if (!searchTerm) return true;
|
|
|
|
const candidates = [
|
|
template?.eventLabel,
|
|
template?.eventSlug,
|
|
template?.templateId,
|
|
profile?.name,
|
|
profile?.id,
|
|
]
|
|
.map((value) => String(value || '').toLowerCase())
|
|
.filter(Boolean);
|
|
|
|
return candidates.some((value) => value.includes(searchTerm));
|
|
}
|
|
|
|
function getTemplateDisplayName(template) {
|
|
return template?.eventLabel || String(template?.eventSlug || '').replace(/_/g, ' ') || 'Template';
|
|
}
|
|
|
|
function getCardAppearance(template) {
|
|
if (template?.status === 'whitelisted') {
|
|
return template?.isRuntimeEnabled === false ? CARD_APPEARANCE.paused : CARD_APPEARANCE.live;
|
|
}
|
|
|
|
return CARD_APPEARANCE.pending;
|
|
}
|
|
|
|
function formatDltTemplateId(templateId) {
|
|
const value = String(templateId || '').trim();
|
|
return value || 'Pending';
|
|
}
|
|
|
|
function getBoundProfileSummary(template, profile) {
|
|
if (profile?.name) return profile.name;
|
|
if (template?.curlProfileId) return 'Profile missing';
|
|
return 'Not bound yet';
|
|
}
|
|
|
|
function getTemplateSortRank(template) {
|
|
if (template?.status === 'whitelisted') {
|
|
return template?.isRuntimeEnabled === false ? 1 : 0;
|
|
}
|
|
|
|
return 2;
|
|
}
|
|
|
|
export default function Templates() {
|
|
const { businessId } = useParams();
|
|
const [searchParams] = useSearchParams();
|
|
const [templates, setTemplates] = useState([]);
|
|
const [profilesById, setProfilesById] = useState({});
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState('');
|
|
const [whitelistTarget, setWhitelistTarget] = useState(null);
|
|
const [testTarget, setTestTarget] = useState(null);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [runtimeUpdatingSlug, setRuntimeUpdatingSlug] = useState('');
|
|
const [highlightedEventSlug, setHighlightedEventSlug] = useState('');
|
|
const [workspaceSlug, setWorkspaceSlug] = useState('');
|
|
const templateCardRefs = useRef({});
|
|
const highlightTimeoutRef = useRef(null);
|
|
const handledFocusSlugRef = useRef('');
|
|
|
|
const loadTemplates = useCallback(async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
try {
|
|
const [templatesRes, profilesRes] = await Promise.all([
|
|
apiClient.get(`/api/businesses/${businessId}/templates`),
|
|
apiClient.get(`/api/businesses/${businessId}/global-sms/profiles`).catch(() => ({ data: { profiles: [] } })),
|
|
]);
|
|
|
|
const allTemplates = (templatesRes.data.templates || []).filter((template) => template.selectedTemplate);
|
|
const profileMap = Object.fromEntries((profilesRes.data.profiles || []).map((profile) => [profile.id, profile]));
|
|
|
|
setTemplates(allTemplates);
|
|
setProfilesById(profileMap);
|
|
} catch {
|
|
setError('Failed to load templates');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [businessId]);
|
|
|
|
useEffect(() => {
|
|
loadTemplates();
|
|
}, [loadTemplates]);
|
|
|
|
useEffect(() => () => {
|
|
if (highlightTimeoutRef.current) {
|
|
window.clearTimeout(highlightTimeoutRef.current);
|
|
}
|
|
}, []);
|
|
|
|
const manageableTemplates = useMemo(
|
|
() => templates.filter((template) => MANAGEABLE_TEMPLATE_STATUSES.has(template?.status)),
|
|
[templates],
|
|
);
|
|
|
|
const visibleTemplates = useMemo(() => {
|
|
return manageableTemplates
|
|
.filter((template) => (
|
|
matchesTemplateSearch(template, template.curlProfileId ? profilesById[template.curlProfileId] || null : null, searchTerm)
|
|
))
|
|
.sort((leftTemplate, rightTemplate) => {
|
|
const rankDifference = getTemplateSortRank(leftTemplate) - getTemplateSortRank(rightTemplate);
|
|
if (rankDifference !== 0) return rankDifference;
|
|
|
|
return getTemplateDisplayName(leftTemplate).localeCompare(getTemplateDisplayName(rightTemplate));
|
|
});
|
|
}, [manageableTemplates, profilesById, searchTerm]);
|
|
|
|
useEffect(() => {
|
|
const targetEventSlug = searchParams.get('event');
|
|
if (!targetEventSlug || manageableTemplates.length === 0) return;
|
|
if (handledFocusSlugRef.current === targetEventSlug) return;
|
|
|
|
const targetTemplate = manageableTemplates.find((template) => template.eventSlug === targetEventSlug);
|
|
if (!targetTemplate) return;
|
|
|
|
const targetCard = templateCardRefs.current[targetEventSlug];
|
|
if (!targetCard) return;
|
|
|
|
handledFocusSlugRef.current = targetEventSlug;
|
|
targetCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
setHighlightedEventSlug(targetEventSlug);
|
|
|
|
if (highlightTimeoutRef.current) {
|
|
window.clearTimeout(highlightTimeoutRef.current);
|
|
}
|
|
|
|
highlightTimeoutRef.current = window.setTimeout(() => {
|
|
setHighlightedEventSlug((currentSlug) => (currentSlug === targetEventSlug ? '' : currentSlug));
|
|
highlightTimeoutRef.current = null;
|
|
}, 2200);
|
|
}, [manageableTemplates, searchParams]);
|
|
|
|
useEffect(() => {
|
|
if (!workspaceSlug) return;
|
|
if (manageableTemplates.some((template) => template.eventSlug === workspaceSlug)) return;
|
|
setWorkspaceSlug('');
|
|
}, [manageableTemplates, workspaceSlug]);
|
|
|
|
async function handleWhitelistSuccess() {
|
|
setWhitelistTarget(null);
|
|
await loadTemplates();
|
|
}
|
|
|
|
async function handleRuntimeToggle(template) {
|
|
const nextRuntimeState = !(template?.isRuntimeEnabled !== false);
|
|
setRuntimeUpdatingSlug(template.eventSlug);
|
|
setError('');
|
|
|
|
try {
|
|
const res = await apiClient.patch(
|
|
`/api/businesses/${businessId}/templates/${template.eventSlug}/runtime`,
|
|
{ isRuntimeEnabled: nextRuntimeState },
|
|
);
|
|
|
|
setTemplates((currentTemplates) => currentTemplates.map((currentTemplate) => (
|
|
currentTemplate.eventSlug === template.eventSlug ? res.data : currentTemplate
|
|
)));
|
|
} catch (err) {
|
|
setError(err.response?.data?.error || 'Failed to update template runtime state');
|
|
} finally {
|
|
setRuntimeUpdatingSlug('');
|
|
}
|
|
}
|
|
|
|
const currentWorkspaceTemplate = workspaceSlug
|
|
? manageableTemplates.find((template) => template.eventSlug === workspaceSlug) || null
|
|
: null;
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex h-64 items-center justify-center">
|
|
<div className="h-8 w-8 rounded-full border-2 border-gray-200 border-t-indigo-600 animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="mb-6 border-b border-gray-200 pb-5">
|
|
<h1 className="text-2xl font-bold tracking-tight text-gray-800">Templates</h1>
|
|
<p className="mt-1 text-sm font-medium text-gray-500">
|
|
Manage template runtime, whitelisting, and testing from one place.
|
|
</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mb-6 flex items-center justify-between rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-error-text">
|
|
{error}
|
|
<button type="button" onClick={() => setError('')} className="font-bold text-error-text hover:text-red-900">
|
|
×
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mb-6">
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
value={searchTerm}
|
|
onChange={(event) => setSearchTerm(event.target.value)}
|
|
placeholder="Search by event, profile, or DLT template ID"
|
|
className="w-full rounded-xl border border-gray-200 bg-white py-3 pl-4 pr-12 text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-blue"
|
|
/>
|
|
{searchTerm && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setSearchTerm('')}
|
|
className="absolute inset-y-0 right-3 flex items-center text-sm font-semibold text-gray-500 hover:text-gray-800"
|
|
>
|
|
Clear
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{manageableTemplates.length === 0 ? (
|
|
<div className="rounded-lg border border-border-main bg-surface-white py-16 text-center">
|
|
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full border border-border-soft bg-page-bg">
|
|
<svg className="h-8 w-8 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-bold text-text-primary">No Templates Yet</h3>
|
|
<p className="mt-2 text-sm font-medium text-text-muted">
|
|
Generate and select templates in the Events section first.
|
|
</p>
|
|
</div>
|
|
) : visibleTemplates.length === 0 ? (
|
|
<div className="rounded-lg border border-border-dashed bg-surface-white py-12 text-center">
|
|
<p className="text-sm font-medium text-text-muted">
|
|
No templates match "{searchTerm.trim()}".
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-5 md:grid-cols-2">
|
|
{visibleTemplates.map((template) => {
|
|
const appearance = getCardAppearance(template);
|
|
const boundProfile = template.curlProfileId ? profilesById[template.curlProfileId] || null : null;
|
|
const isRuntimeEnabled = template.isRuntimeEnabled !== false;
|
|
const isRuntimeUpdating = runtimeUpdatingSlug === template.eventSlug;
|
|
const isBoundProfileMissing = !boundProfile;
|
|
const isPublished = template.status === 'whitelisted';
|
|
|
|
return (
|
|
<article
|
|
key={template.eventSlug}
|
|
ref={(node) => {
|
|
if (node) {
|
|
templateCardRefs.current[template.eventSlug] = node;
|
|
} else {
|
|
delete templateCardRefs.current[template.eventSlug];
|
|
}
|
|
}}
|
|
className={`overflow-hidden rounded-[28px] border border-gray-200 border-l-4 bg-white px-6 py-5 shadow-[0_12px_30px_rgba(15,23,42,0.06)] transition-all duration-300 ${appearance.accentClassName} ${
|
|
highlightedEventSlug === template.eventSlug
|
|
? 'ring-2 ring-primary-blue/30'
|
|
: 'hover:-translate-y-0.5 hover:shadow-[0_16px_34px_rgba(15,23,42,0.08)]'
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h3 className="text-[1.35rem] font-semibold tracking-tight text-gray-900">
|
|
{getTemplateDisplayName(template)}
|
|
</h3>
|
|
<span className={`inline-flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-semibold ${appearance.pillClassName}`}>
|
|
{isPublished && (
|
|
<span className={`h-2.5 w-2.5 rounded-full ${isRuntimeEnabled ? 'bg-current opacity-80' : 'bg-current opacity-55'}`} />
|
|
)}
|
|
{appearance.pillLabel}
|
|
</span>
|
|
</div>
|
|
<p className="mt-3 max-w-[34ch] text-sm leading-7 text-gray-400">
|
|
{appearance.description}
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={isPublished ? isRuntimeEnabled : false}
|
|
aria-label={`Set runtime ${isRuntimeEnabled ? 'paused' : 'active'} for ${getTemplateDisplayName(template)}`}
|
|
disabled={!isPublished || isRuntimeUpdating}
|
|
onClick={() => isPublished && handleRuntimeToggle(template)}
|
|
className={`relative inline-flex h-7 w-12 items-center rounded-full border transition ${
|
|
isPublished
|
|
? `${appearance.switchTrackClassName} ${isRuntimeUpdating ? 'cursor-wait opacity-70' : 'cursor-pointer'}`
|
|
: 'cursor-not-allowed border-[#d8dee8] bg-[#eef1f5] opacity-95'
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block h-5 w-5 rounded-full bg-white shadow-sm transition ${
|
|
isPublished && isRuntimeEnabled ? 'translate-x-6' : 'translate-x-1'
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-5 border-t border-gray-100 pt-5">
|
|
<div className="flex items-end justify-between gap-4">
|
|
<div className="flex flex-wrap items-start gap-8">
|
|
<div>
|
|
<p className="text-xs font-medium text-gray-400">Profile</p>
|
|
<p className="mt-1 text-base font-semibold text-gray-900">
|
|
{getBoundProfileSummary(template, boundProfile)}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-medium text-gray-400">DLT Template ID</p>
|
|
<p className="mt-1 font-mono text-sm font-semibold text-gray-900">
|
|
{formatDltTemplateId(template.templateId)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setWorkspaceSlug(template.eventSlug)}
|
|
className="text-sm font-semibold text-primary-blue transition hover:text-primary-dark"
|
|
>
|
|
View Template →
|
|
</button>
|
|
|
|
{!isBoundProfileMissing && template.status === 'pending_whitelisting' && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setWhitelistTarget(template)}
|
|
className="rounded-full border border-orange-200 bg-[#fff4ea] px-4 py-2 text-sm font-semibold text-orange-700 transition hover:border-orange-300 hover:bg-[#ffeddc]"
|
|
>
|
|
Publish
|
|
</button>
|
|
)}
|
|
|
|
{!isBoundProfileMissing && isPublished && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setTestTarget(template)}
|
|
className="rounded-full border border-[#c7d6ff] bg-[#f5f8ff] px-4 py-2 text-sm font-semibold text-[#4563d5] transition hover:border-[#afc3ff] hover:bg-[#ebf1ff]"
|
|
>
|
|
Test SMS
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{isBoundProfileMissing && (
|
|
<p className="mt-4 text-sm font-medium leading-6 text-gray-500">
|
|
{template.curlProfileId
|
|
? 'The cURL profile used for this template no longer exists. Re-select this template from Events to continue.'
|
|
: 'This template is not bound to a cURL profile. Re-select it from Events to continue.'}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{whitelistTarget && (
|
|
<WhitelistModal
|
|
businessId={businessId}
|
|
template={whitelistTarget}
|
|
boundProfile={profilesById[whitelistTarget.curlProfileId] || null}
|
|
onClose={() => setWhitelistTarget(null)}
|
|
onSuccess={handleWhitelistSuccess}
|
|
/>
|
|
)}
|
|
|
|
{testTarget && (
|
|
<TestSmsModal
|
|
businessId={businessId}
|
|
template={testTarget}
|
|
onClose={() => setTestTarget(null)}
|
|
/>
|
|
)}
|
|
|
|
{workspaceSlug && (
|
|
<TemplateDetailWorkspaceModal
|
|
businessId={businessId}
|
|
templateSlug={workspaceSlug}
|
|
initialTemplate={currentWorkspaceTemplate}
|
|
initialProfile={currentWorkspaceTemplate?.curlProfileId ? profilesById[currentWorkspaceTemplate.curlProfileId] || null : null}
|
|
onClose={() => setWorkspaceSlug('')}
|
|
onRequestPublish={(template) => setWhitelistTarget(template)}
|
|
onRequestTest={(template) => setTestTarget(template)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|