feat: Add comprehensive sandbox mode, public API system, and platform support
This commit adds major features for sandbox isolation, public API access, and platform support ticketing. ## Sandbox Mode - Add sandbox mode toggle for businesses to test features without affecting live data - Implement schema-based isolation for tenant data (appointments, resources, services) - Add is_sandbox field filtering for shared models (customers, staff, tickets) - Create sandbox middleware to detect and set sandbox mode from cookies - Add sandbox context and hooks for React frontend - Display sandbox banner when in test mode - Auto-reload page when switching between live/test modes - Prevent platform support tickets from being created in sandbox mode ## Public API System - Full REST API for external integrations with businesses - API token management with sandbox/live token separation - Test tokens (ss_test_*) show full plaintext for easy testing - Live tokens (ss_live_*) are hashed and secure - Security validation prevents live token plaintext storage - Comprehensive test suite for token security - Rate limiting and throttling per token - Webhook support for real-time event notifications - Scoped permissions system (read/write per resource type) - API documentation page with interactive examples - Token revocation with confirmation modal ## Platform Support - Dedicated support page for businesses to contact SmoothSchedule - View all platform support tickets in one place - Create new support tickets with simplified interface - Reply to existing tickets with conversation history - Platform tickets have no admin controls (no priority/category/assignee/status) - Internal notes hidden for platform tickets (business can't see them) - Quick help section with links to guides and API docs - Sandbox warning prevents ticket creation in test mode - Business ticketing retains full admin controls (priority, assignment, internal notes) ## UI/UX Improvements - Add notification dropdown with real-time updates - Staff permissions UI for ticket access control - Help dropdown in sidebar with Platform Guide, Ticketing Help, API Docs, and Support - Update sidebar "Contact Support" to "Support" with message icon - Fix navigation links to use React Router instead of anchor tags - Remove unused language translations (Japanese, Portuguese, Chinese) ## Technical Details - Sandbox middleware sets request.sandbox_mode from cookies - ViewSets filter data by is_sandbox field - API authentication via custom token auth class - WebSocket support for real-time ticket updates - Migration for sandbox fields on User, Tenant, and Ticket models - Comprehensive documentation in SANDBOX_MODE_IMPLEMENTATION.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
@@ -3,13 +3,17 @@ import { Outlet, useLocation, useSearchParams, useNavigate } from 'react-router-
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import TopBar from '../components/TopBar';
|
||||
import TrialBanner from '../components/TrialBanner';
|
||||
import SandboxBanner from '../components/SandboxBanner';
|
||||
import { Business, User } from '../types';
|
||||
import MasqueradeBanner from '../components/MasqueradeBanner';
|
||||
import OnboardingWizard from '../components/OnboardingWizard';
|
||||
import TicketModal from '../components/TicketModal';
|
||||
import { useStopMasquerade } from '../hooks/useAuth';
|
||||
import { useNotificationWebSocket } from '../hooks/useNotificationWebSocket'; // Import the new hook
|
||||
import { useNotificationWebSocket } from '../hooks/useNotificationWebSocket';
|
||||
import { useTicket } from '../hooks/useTickets';
|
||||
import { MasqueradeStackEntry } from '../api/auth';
|
||||
import { useScrollToTop } from '../hooks/useScrollToTop';
|
||||
import { SandboxProvider, useSandbox } from '../contexts/SandboxContext';
|
||||
|
||||
/**
|
||||
* Convert a hex color to HSL values
|
||||
@@ -102,10 +106,26 @@ interface BusinessLayoutProps {
|
||||
updateBusiness: (updates: Partial<Business>) => void;
|
||||
}
|
||||
|
||||
const BusinessLayout: React.FC<BusinessLayoutProps> = ({ business, user, darkMode, toggleTheme, onSignOut, updateBusiness }) => {
|
||||
/**
|
||||
* Wrapper component for SandboxBanner that uses the sandbox context
|
||||
*/
|
||||
const SandboxBannerWrapper: React.FC = () => {
|
||||
const { isSandbox, toggleSandbox, isToggling } = useSandbox();
|
||||
|
||||
return (
|
||||
<SandboxBanner
|
||||
isSandbox={isSandbox}
|
||||
onSwitchToLive={() => toggleSandbox(false)}
|
||||
isSwitching={isToggling}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const BusinessLayoutContent: React.FC<BusinessLayoutProps> = ({ business, user, darkMode, toggleTheme, onSignOut, updateBusiness }) => {
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [showOnboarding, setShowOnboarding] = useState(false);
|
||||
const [ticketModalId, setTicketModalId] = useState<string | null>(null);
|
||||
const mainContentRef = useRef<HTMLElement>(null);
|
||||
const location = useLocation();
|
||||
const [searchParams] = useSearchParams();
|
||||
@@ -113,6 +133,17 @@ const BusinessLayout: React.FC<BusinessLayoutProps> = ({ business, user, darkMod
|
||||
|
||||
useScrollToTop();
|
||||
|
||||
// Fetch ticket data when modal is opened from notification
|
||||
const { data: ticketFromNotification } = useTicket(ticketModalId || undefined);
|
||||
|
||||
const handleTicketClick = (ticketId: string) => {
|
||||
setTicketModalId(ticketId);
|
||||
};
|
||||
|
||||
const closeTicketModal = () => {
|
||||
setTicketModalId(null);
|
||||
};
|
||||
|
||||
// Generate brand color palette from business primary color
|
||||
const brandPalette = useMemo(() => {
|
||||
return generateColorPalette(business.primaryColor || '#2563eb');
|
||||
@@ -252,6 +283,8 @@ const BusinessLayout: React.FC<BusinessLayoutProps> = ({ business, user, darkMod
|
||||
onStop={handleStopMasquerade}
|
||||
/>
|
||||
)}
|
||||
{/* Sandbox mode banner */}
|
||||
<SandboxBannerWrapper />
|
||||
{/* Show trial banner if trial is active and payments not yet enabled */}
|
||||
{business.isTrialActive && !business.paymentsEnabled && business.plan !== 'Free' && (
|
||||
<TrialBanner business={business} />
|
||||
@@ -261,6 +294,7 @@ const BusinessLayout: React.FC<BusinessLayoutProps> = ({ business, user, darkMod
|
||||
isDarkMode={darkMode}
|
||||
toggleTheme={toggleTheme}
|
||||
onMenuClick={() => setIsMobileMenuOpen(true)}
|
||||
onTicketClick={handleTicketClick}
|
||||
/>
|
||||
|
||||
<main ref={mainContentRef} tabIndex={-1} className="flex-1 overflow-auto focus:outline-none">
|
||||
@@ -277,8 +311,27 @@ const BusinessLayout: React.FC<BusinessLayoutProps> = ({ business, user, darkMod
|
||||
onSkip={handleOnboardingSkip}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Ticket modal opened from notification */}
|
||||
{ticketModalId && ticketFromNotification && (
|
||||
<TicketModal
|
||||
ticket={ticketFromNotification}
|
||||
onClose={closeTicketModal}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Business Layout with Sandbox Provider
|
||||
*/
|
||||
const BusinessLayout: React.FC<BusinessLayoutProps> = (props) => {
|
||||
return (
|
||||
<SandboxProvider>
|
||||
<BusinessLayoutContent {...props} />
|
||||
</SandboxProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default BusinessLayout;
|
||||
Reference in New Issue
Block a user