a9719a5fd2
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>
80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
/**
|
|
* Sandbox Banner Component
|
|
* Displays a prominent warning banner when in test/sandbox mode
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { FlaskConical, X } from 'lucide-react';
|
|
|
|
interface SandboxBannerProps {
|
|
/** Whether sandbox mode is currently active */
|
|
isSandbox: boolean;
|
|
/** Callback to switch to live mode */
|
|
onSwitchToLive: () => void;
|
|
/** Optional: Allow dismissing the banner (it will reappear on page reload) */
|
|
onDismiss?: () => void;
|
|
/** Whether switching is in progress */
|
|
isSwitching?: boolean;
|
|
}
|
|
|
|
const SandboxBanner: React.FC<SandboxBannerProps> = ({
|
|
isSandbox,
|
|
onSwitchToLive,
|
|
onDismiss,
|
|
isSwitching = false,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
|
|
// Don't render if not in sandbox mode
|
|
if (!isSandbox) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 flex items-center justify-between shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<FlaskConical className="w-5 h-5 animate-pulse" />
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:gap-2">
|
|
<span className="font-semibold text-sm">
|
|
{t('sandbox.bannerTitle', 'TEST MODE')}
|
|
</span>
|
|
<span className="text-xs sm:text-sm opacity-90">
|
|
{t('sandbox.bannerDescription', 'You are viewing test data. Changes here won\'t affect your live business.')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={onSwitchToLive}
|
|
disabled={isSwitching}
|
|
className={`
|
|
px-3 py-1 text-xs font-medium rounded-md
|
|
bg-white text-orange-600 hover:bg-orange-50
|
|
transition-colors duration-150
|
|
${isSwitching ? 'opacity-50 cursor-not-allowed' : ''}
|
|
`}
|
|
>
|
|
{isSwitching
|
|
? t('sandbox.switching', 'Switching...')
|
|
: t('sandbox.switchToLive', 'Switch to Live')
|
|
}
|
|
</button>
|
|
|
|
{onDismiss && (
|
|
<button
|
|
onClick={onDismiss}
|
|
className="p-1 hover:bg-orange-600 rounded transition-colors duration-150"
|
|
title={t('sandbox.dismiss', 'Dismiss')}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SandboxBanner;
|