294 lines
12 KiB
JavaScript
294 lines
12 KiB
JavaScript
import { NavLink, useLocation, useNavigate } from 'react-router-dom';
|
|
import { useBusiness } from '../context/BusinessContext';
|
|
|
|
const SVG_ICONS = {
|
|
globalSms: (
|
|
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
),
|
|
events: (
|
|
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
),
|
|
templates: (
|
|
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" 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>
|
|
),
|
|
};
|
|
|
|
function TopLevelStatus({ done, active }) {
|
|
if (done) {
|
|
return (
|
|
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary-blue text-white ">
|
|
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (active) {
|
|
return <span className="inline-block h-2.5 w-2.5 rounded-full bg-primary-blue " />;
|
|
}
|
|
|
|
return <span className="inline-block h-2.5 w-2.5 rounded-full bg-gray-200" />;
|
|
}
|
|
|
|
function StageMarker({ done, active, enabled }) {
|
|
if (done) {
|
|
return (
|
|
<span className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-primary-blue text-white ">
|
|
<svg className="h-2.5 w-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (active) {
|
|
return <span className="inline-block h-3 w-3 rounded-full border-2 border-white bg-primary-blue shadow-[0_0_0_1px_var(--color-primary-blue)]" />;
|
|
}
|
|
|
|
if (!enabled) {
|
|
return <span className="inline-block h-3 w-3 rounded-full bg-gray-200" />;
|
|
}
|
|
|
|
return <span className="inline-block h-3 w-3 rounded-full bg-refresh-active" />;
|
|
}
|
|
|
|
function normalizeText(value) {
|
|
return typeof value === 'string' ? value.trim() : '';
|
|
}
|
|
|
|
function getSidebarBusinessImage(business) {
|
|
const brandingLogos = business?.scrapeArtifacts?.json?.branding?.logos;
|
|
const primaryLogo = Array.isArray(brandingLogos)
|
|
? brandingLogos.find((entry) => normalizeText(entry))
|
|
: '';
|
|
if (primaryLogo) return primaryLogo;
|
|
|
|
return (
|
|
normalizeText(business?.logoUrl)
|
|
|| normalizeText(business?.imageUrl)
|
|
|| (Array.isArray(business?.relevantImagePaths)
|
|
? business.relevantImagePaths.find((entry) => normalizeText(entry)) || ''
|
|
: '')
|
|
);
|
|
}
|
|
|
|
export default function Sidebar({ onOpenReview, reviewLoading = false, reviewError = '' }) {
|
|
const {
|
|
activeBusiness,
|
|
activeBusinessId,
|
|
clearBusiness,
|
|
hasGlobalSms,
|
|
isSetupComplete,
|
|
hasSelectedTemplates,
|
|
} = useBusiness();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const businessImage = getSidebarBusinessImage(activeBusiness);
|
|
|
|
const globalSmsPath = `/${activeBusinessId}/global-sms`;
|
|
const eventsPath = `/${activeBusinessId}/events`;
|
|
const templatesPath = `/${activeBusinessId}/templates`;
|
|
|
|
const isGlobalSmsRoute = location.pathname === globalSmsPath;
|
|
const isEventsRoute = location.pathname === eventsPath;
|
|
const isTemplatesRoute = location.pathname === templatesPath;
|
|
|
|
const omniSubsteps = [
|
|
{ id: 'profile', label: 'Add / Select Profile', done: hasGlobalSms, active: isGlobalSmsRoute && !hasGlobalSms },
|
|
{ id: 'validate', label: 'Validate cURL', done: hasGlobalSms, active: false },
|
|
{ id: 'fields', label: 'Complete Fields', done: isSetupComplete, active: isGlobalSmsRoute && hasGlobalSms && !isSetupComplete },
|
|
{ id: 'ready', label: 'Ready', done: isSetupComplete, active: isGlobalSmsRoute && isSetupComplete },
|
|
];
|
|
|
|
const stepItems = [
|
|
{
|
|
id: 'globalSms',
|
|
to: globalSmsPath,
|
|
label: 'Omni-channel SMS',
|
|
enabled: true,
|
|
done: isSetupComplete && !isGlobalSmsRoute,
|
|
active: isGlobalSmsRoute,
|
|
expanded: isGlobalSmsRoute,
|
|
substeps: omniSubsteps,
|
|
},
|
|
{
|
|
id: 'events',
|
|
to: eventsPath,
|
|
label: 'Events',
|
|
enabled: isSetupComplete,
|
|
done: hasSelectedTemplates && !isEventsRoute,
|
|
active: isEventsRoute,
|
|
},
|
|
{
|
|
id: 'templates',
|
|
to: templatesPath,
|
|
label: 'Templates',
|
|
enabled: hasSelectedTemplates,
|
|
done: false,
|
|
active: isTemplatesRoute,
|
|
},
|
|
];
|
|
|
|
function handleSwitch() {
|
|
clearBusiness();
|
|
navigate('/');
|
|
}
|
|
|
|
return (
|
|
<aside className="fixed top-0 left-0 h-screen w-60 bg-white border-r border-gray-200 flex flex-col z-10">
|
|
{/* Business info + switch */}
|
|
<div className="px-5 py-5 border-b border-gray-100">
|
|
<button
|
|
onClick={handleSwitch}
|
|
className="flex items-center gap-2 text-gray-500 hover:text-gray-800 transition text-sm group font-medium"
|
|
>
|
|
<span className="group-hover:-translate-x-0.5 transition-transform text-lg leading-none">←</span>
|
|
<span>Switch Business</span>
|
|
</button>
|
|
{activeBusiness && (
|
|
<div className="mt-5 flex flex-col items-center text-center">
|
|
<div className="flex h-16 w-16 rounded-2xl border border-gray-200 bg-white items-center justify-center text-lg font-bold text-white shrink-0 overflow-hidden shadow-sm">
|
|
{businessImage ? (
|
|
<img
|
|
src={businessImage}
|
|
alt={activeBusiness.brandName || 'Business'}
|
|
className="h-full w-full object-contain p-1.5"
|
|
/>
|
|
) : (
|
|
<span className="flex h-full w-full items-center justify-center rounded-2xl bg-primary-blue text-lg">
|
|
{activeBusiness.brandName?.[0]?.toUpperCase() || 'B'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="mt-3 min-w-0 w-full">
|
|
<p className="text-[15px] font-semibold leading-tight text-gray-800 truncate">{activeBusiness.brandName}</p>
|
|
{activeBusinessId && (
|
|
<>
|
|
<div className="mt-3 flex justify-center">
|
|
<div className="relative inline-flex items-center">
|
|
<button
|
|
onClick={onOpenReview}
|
|
disabled={reviewLoading}
|
|
className="group inline-flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 shadow-sm transition hover:border-gray-300 hover:bg-gray-50 hover:text-primary-blue disabled:cursor-wait disabled:opacity-60"
|
|
title="View brand details"
|
|
aria-label="View brand details"
|
|
>
|
|
{reviewLoading ? (
|
|
<span className="h-4 w-4 rounded-full border-2 border-gray-200 border-t-primary-blue animate-spin" />
|
|
) : (
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1.458 12C2.732 7.943 6.523 5 12 5c5.477 0 9.268 2.943 10.542 7-1.274 4.057-5.065 7-10.542 7-5.477 0-9.268-2.943-10.542-7z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
|
|
</svg>
|
|
)}
|
|
<span className="pointer-events-none absolute left-1/2 top-full mt-2 hidden -translate-x-1/2 whitespace-nowrap rounded-md border border-gray-200 bg-white px-2.5 py-1 text-xs font-medium text-gray-600 shadow-sm group-hover:block">
|
|
View brand details
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{reviewError && (
|
|
<p className="mt-2 text-xs text-red-600">{reviewError}</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Nav */}
|
|
<nav className="flex-1 px-3 pt-5">
|
|
<div className="space-y-1">
|
|
{stepItems.map((item, index) => (
|
|
<div key={item.id} className="relative grid grid-cols-[26px_minmax(0,1fr)] gap-2">
|
|
<div className="relative flex min-h-full justify-center">
|
|
{index > 0 && <div className="absolute left-1/2 -top-2 h-7 w-px -translate-x-1/2 bg-gray-200" />}
|
|
{index < stepItems.length - 1 && <div className="absolute left-1/2 top-5 -bottom-2 w-px -translate-x-1/2 bg-gray-200" />}
|
|
<div className="absolute left-1/2 top-5 -translate-x-1/2 -translate-y-1/2">
|
|
<StageMarker done={item.done} active={item.active} enabled={item.enabled} />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{item.enabled ? (
|
|
<NavLink
|
|
to={item.to}
|
|
className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-150 ${
|
|
item.active
|
|
? 'bg-gray-100/70 text-gray-800'
|
|
: 'text-gray-500 hover:text-gray-800 hover:bg-page-bg'
|
|
}`}
|
|
>
|
|
{SVG_ICONS[item.id]}
|
|
<span className="flex-1 truncate">{item.label}</span>
|
|
<div className="flex items-center gap-3">
|
|
{!item.substeps && <TopLevelStatus done={item.done} active={item.active} />}
|
|
{item.substeps && (
|
|
<svg
|
|
className={`h-4 w-4 text-gray-400 transition-transform ${item.expanded ? 'rotate-180' : ''}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
</NavLink>
|
|
) : (
|
|
<div
|
|
aria-disabled="true"
|
|
className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-300 cursor-not-allowed select-none"
|
|
>
|
|
{SVG_ICONS[item.id]}
|
|
<span className="flex-1 truncate">{item.label}</span>
|
|
<div className="flex items-center gap-3">
|
|
{!item.substeps && <TopLevelStatus done={item.done} active={item.active} />}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{item.expanded && item.substeps && (
|
|
<div className="relative mt-2 mb-2 pb-1">
|
|
<div className="absolute left-[21.5px] top-1 bottom-3 w-px bg-gray-200" />
|
|
<div className="space-y-0.5">
|
|
{item.substeps.map((substep) => (
|
|
<div key={substep.id} className="relative flex items-center pr-3 group cursor-default">
|
|
<div className="w-[44px] flex justify-center items-center shrink-0">
|
|
{substep.active && <div className="z-10 h-1.5 w-1.5 rounded-full bg-primary-blue shadow-[0_0_0_2px_white]" />}
|
|
</div>
|
|
<div
|
|
className={`flex-1 px-3 py-2 rounded-md text-[14px] transition-colors ${
|
|
substep.active
|
|
? 'bg-white text-primary-blue font-semibold'
|
|
: 'text-gray-500 font-medium hover:text-gray-800 hover:bg-page-bg'
|
|
}`}
|
|
>
|
|
{substep.label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
|
|
<div className="px-5 py-4 border-t border-gray-100">
|
|
<p className="text-xs text-gray-500 font-medium tracking-wide">TRAI-compliant SMS</p>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|