feat: Reorganize settings sidebar and add plan-based feature locking

- Add locked state to Plugins sidebar item with plan feature check - Create Branding section in settings with Appearance, Email Templates, Custom Domains - Split Domains page into Booking (URLs, redirects) and Custom Domains (BYOD, purchase) - Add booking_return_url field to Tenant model for customer redirects - Update SidebarItem component to support locked prop with lock icon - Move Email Templates from main sidebar to Settings > Branding - Add communication credits hooks and payment form updates - Add timezone fields migration and various UI improvements 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-03 01:35:59 -05:00
parent ef58e9fc94
commit 5cef01ad0d
25 changed files with 2220 additions and 330 deletions
--- a/frontend/src/components/CreditPaymentForm.tsx
+++ b/frontend/src/components/CreditPaymentForm.tsx
@@ -37,6 +37,7 @@ const PaymentFormInner: React.FC<PaymentFormProps> = ({
  const [isProcessing, setIsProcessing] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [isComplete, setIsComplete] = useState(false);
+  const [isElementReady, setIsElementReady] = useState(false);
  const confirmPayment = useConfirmPayment();

  const formatCurrency = (cents: number) => `$${(cents / 100).toFixed(2)}`;
@@ -110,11 +111,20 @@ const PaymentFormInner: React.FC<PaymentFormProps> = ({
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
-        <PaymentElement
-          options={{
-            layout: 'tabs',
-          }}
-        />
+        {!isElementReady && (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+            <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">Loading payment form...</span>
+          </div>
+        )}
+        <div className={isElementReady ? '' : 'hidden'}>
+          <PaymentElement
+            onReady={() => setIsElementReady(true)}
+            options={{
+              layout: 'tabs',
+            }}
+          />
+        </div>
      </div>

      {errorMessage && (
@@ -164,8 +174,9 @@ interface CreditPaymentModalProps {
  onClose: () => void;
  onSuccess: () => void;
  amountCents: number;
-  onAmountChange: (cents: number) => void;
+  onAmountChange?: (cents: number) => void;
  savePaymentMethod?: boolean;
+  skipAmountSelection?: boolean;
 }

 export const CreditPaymentModal: React.FC<CreditPaymentModalProps> = ({
@@ -175,11 +186,13 @@ export const CreditPaymentModal: React.FC<CreditPaymentModalProps> = ({
  amountCents,
  onAmountChange,
  savePaymentMethod = false,
+  skipAmountSelection = false,
 }) => {
  const [clientSecret, setClientSecret] = useState<string | null>(null);
  const [isLoadingIntent, setIsLoadingIntent] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [showPaymentForm, setShowPaymentForm] = useState(false);
+  const [autoInitialized, setAutoInitialized] = useState(false);
  const createPaymentIntent = useCreatePaymentIntent();

  const formatCurrency = (cents: number) => `$${(cents / 100).toFixed(2)}`;
@@ -189,9 +202,18 @@ export const CreditPaymentModal: React.FC<CreditPaymentModalProps> = ({
      setClientSecret(null);
      setShowPaymentForm(false);
      setError(null);
+      setAutoInitialized(false);
    }
  }, [isOpen]);

+  // Auto-initialize payment when skipping amount selection
+  useEffect(() => {
+    if (isOpen && skipAmountSelection && !autoInitialized && !isLoadingIntent && !clientSecret) {
+      setAutoInitialized(true);
+      handleContinueToPayment();
+    }
+  }, [isOpen, skipAmountSelection, autoInitialized, isLoadingIntent, clientSecret]);
+
  const handleContinueToPayment = async () => {
    setIsLoadingIntent(true);
    setError(null);
@@ -211,11 +233,19 @@ export const CreditPaymentModal: React.FC<CreditPaymentModalProps> = ({

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md p-6">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-lg p-6">
        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-            Add Credits
-          </h3>
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {skipAmountSelection ? 'Complete Payment' : 'Add Credits'}
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {skipAmountSelection
+                ? `Loading ${formatCurrency(amountCents)} to your balance`
+                : 'Choose an amount to add to your balance'
+              }
+            </p>
+          </div>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
@@ -224,13 +254,46 @@ export const CreditPaymentModal: React.FC<CreditPaymentModalProps> = ({
          </button>
        </div>

-        {!showPaymentForm ? (
+        {/* Loading state when auto-initializing */}
+        {skipAmountSelection && isLoadingIntent && !clientSecret ? (
+          <div className="flex flex-col items-center justify-center py-12">
+            <Loader2 className="w-8 h-8 animate-spin text-brand-600 mb-4" />
+            <p className="text-gray-600 dark:text-gray-400">Setting up payment...</p>
+          </div>
+        ) : skipAmountSelection && error && !clientSecret ? (
          <div className="space-y-4">
+            <div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg">
+              <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5" />
+              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+            </div>
+            <div className="flex gap-3">
+              <button
+                onClick={onClose}
+                className="flex-1 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => {
+                  setAutoInitialized(false);
+                  setError(null);
+                }}
+                className="flex-1 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700"
+              >
+                Try Again
+              </button>
+            </div>
+          </div>
+        ) : !showPaymentForm && !skipAmountSelection ? (
+          <div className="space-y-4">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Quick select
+            </label>
            <div className="grid grid-cols-3 gap-3">
              {[1000, 2500, 5000].map((amount) => (
                <button
                  key={amount}
-                  onClick={() => onAmountChange(amount)}
+                  onClick={() => onAmountChange?.(amount)}
                  className={`py-3 px-4 rounded-lg border-2 transition-colors ${
                    amountCents === amount
                      ? 'border-brand-600 bg-brand-50 dark:bg-brand-900/30 text-brand-600'
@@ -255,7 +318,7 @@ export const CreditPaymentModal: React.FC<CreditPaymentModalProps> = ({
                  value={amountCents / 100}
                  onChange={(e) => {
                    const val = e.target.value.replace(/[^0-9]/g, '');
-                    onAmountChange(Math.max(5, parseInt(val) || 5) * 100);
+                    onAmountChange?.(Math.max(5, parseInt(val) || 5) * 100);
                  }}
                  onKeyDown={(e) => {
                    if (!/[0-9]/.test(e.key) && !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(e.key)) {
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -14,12 +14,11 @@ import {
  Ticket,
  HelpCircle,
  Clock,
-  Mail,
  Plug,
-  BookOpen,
 } from 'lucide-react';
 import { Business, User } from '../types';
 import { useLogout } from '../hooks/useAuth';
+import { usePlanFeatures } from '../hooks/usePlanFeatures';
 import SmoothScheduleLogo from './SmoothScheduleLogo';
 import {
  SidebarSection,
@@ -38,6 +37,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
  const { t } = useTranslation();
  const { role } = user;
  const logoutMutation = useLogout();
+  const { canUse } = usePlanFeatures();

  const canViewAdminPages = role === 'owner' || role === 'manager';
  const canViewManagementPages = role === 'owner' || role === 'manager' || role === 'staff';
@@ -52,7 +52,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
    <div
      className={`flex flex-col h-full text-white shrink-0 transition-all duration-300 ${isCollapsed ? 'w-20' : 'w-64'}`}
      style={{
-        background: `linear-gradient(to bottom right, ${business.primaryColor}, ${business.secondaryColor || business.primaryColor})`
+        background: `linear-gradient(to bottom right, var(--color-brand-600, ${business.primaryColor}), var(--color-brand-secondary, ${business.secondaryColor || business.primaryColor}))`
      }}
    >
      {/* Header / Logo */}
@@ -82,7 +82,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
            ) : business.logoDisplayMode !== 'logo-only' && (
              <div
                className="flex items-center justify-center w-10 h-10 bg-white rounded-lg font-bold text-xl shrink-0"
-                style={{ color: business.primaryColor }}
+                style={{ color: 'var(--color-brand-600)' }}
              >
                {business.name.substring(0, 2).toUpperCase()}
              </div>
@@ -189,20 +189,15 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
          </SidebarSection>
        )}

-        {/* Extend Section - Plugins & Templates */}
+        {/* Extend Section - Plugins */}
        {canViewAdminPages && (
          <SidebarSection title={t('nav.sections.extend', 'Extend')} isCollapsed={isCollapsed}>
            <SidebarItem
-              to="/plugins"
+              to="/plugins/marketplace"
              icon={Plug}
              label={t('nav.plugins', 'Plugins')}
              isCollapsed={isCollapsed}
-            />
-            <SidebarItem
-              to="/email-templates"
-              icon={Mail}
-              label={t('nav.emailTemplates', 'Email Templates')}
-              isCollapsed={isCollapsed}
+              locked={!canUse('plugins')}
            />
          </SidebarSection>
        )}
--- a/frontend/src/components/navigation/SidebarComponents.tsx
+++ b/frontend/src/components/navigation/SidebarComponents.tsx
@@ -6,7 +6,7 @@

 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { ChevronDown, LucideIcon } from 'lucide-react';
+import { ChevronDown, Lock, LucideIcon } from 'lucide-react';

 interface SidebarSectionProps {
  title?: string;
@@ -48,6 +48,7 @@ interface SidebarItemProps {
  disabled?: boolean;
  badge?: string | number;
  variant?: 'default' | 'settings';
+  locked?: boolean;
 }

 /**
@@ -62,6 +63,7 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
  disabled = false,
  badge,
  variant = 'default',
+  locked = false,
 }) => {
  const location = useLocation();
  const isActive = exact
@@ -75,10 +77,14 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
  const colorClasses = variant === 'settings'
    ? isActive
      ? 'bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-400'
-      : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800'
+      : locked
+        ? 'text-gray-400 hover:text-gray-500 hover:bg-gray-50 dark:text-gray-500 dark:hover:text-gray-400 dark:hover:bg-gray-800'
+        : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800'
    : isActive
      ? 'bg-white/10 text-white'
-      : 'text-white/70 hover:text-white hover:bg-white/5';
+      : locked
+        ? 'text-white/40 hover:text-white/60 hover:bg-white/5'
+        : 'text-white/70 hover:text-white hover:bg-white/5';

  const disabledClasses = variant === 'settings'
    ? 'text-gray-300 dark:text-gray-600 cursor-not-allowed'
@@ -101,7 +107,12 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
  return (
    <Link to={to} className={className} title={label}>
      <Icon size={20} className="shrink-0" />
-      {!isCollapsed && <span className="flex-1">{label}</span>}
+      {!isCollapsed && (
+        <span className="flex-1 flex items-center gap-1.5">
+          {label}
+          {locked && <Lock size={12} className="opacity-60" />}
+        </span>
+      )}
      {badge && !isCollapsed && (
        <span className="px-2 py-0.5 text-xs rounded-full bg-brand-100 text-brand-700 dark:bg-brand-900/50 dark:text-brand-400">
          {badge}
@@ -244,16 +255,18 @@ interface SettingsSidebarItemProps {
  icon: LucideIcon;
  label: string;
  description?: string;
+  locked?: boolean;
 }

 /**
- * Settings navigation item with optional description
+ * Settings navigation item with optional description and lock indicator
 */
 export const SettingsSidebarItem: React.FC<SettingsSidebarItemProps> = ({
  to,
  icon: Icon,
  label,
  description,
+  locked = false,
 }) => {
  const location = useLocation();
  const isActive = location.pathname === to || location.pathname.startsWith(to + '/');
@@ -264,12 +277,19 @@ export const SettingsSidebarItem: React.FC<SettingsSidebarItemProps> = ({
      className={`flex items-start gap-2.5 px-4 py-1.5 text-sm rounded-lg transition-colors ${
        isActive
          ? 'bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-400'
-          : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800'
+          : locked
+            ? 'text-gray-400 hover:text-gray-500 hover:bg-gray-50 dark:text-gray-500 dark:hover:text-gray-400 dark:hover:bg-gray-800'
+            : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800'
      }`}
    >
      <Icon size={16} className="shrink-0 mt-0.5" />
      <div className="flex-1 min-w-0">
-        <span className="font-medium">{label}</span>
+        <div className="flex items-center gap-1.5">
+          <span className="font-medium">{label}</span>
+          {locked && (
+            <Lock size={12} className="text-gray-400 dark:text-gray-500" />
+          )}
+        </div>
        {description && (
          <p className="text-xs text-gray-500 dark:text-gray-500 truncate">
            {description}