feat(email-signature): wire SDT/US branding, address selector, color palettes, improved preview

- Per-company branding for Urban Switch and Studii de Teren (logos, websites, mottos) - Beletage address selector (Str. Unirii vs Str. G-ral Eremia Grigorescu) - Company-specific color palettes in configurator - Scrollable preview with multi-level zoom (0.75x to 2.5x) - Address override support in signature config Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-18 06:35:28 +02:00
parent 98eda56035
commit 93cf6feae2
7 changed files with 128 additions and 49 deletions
--- a/src/modules/email-signature/components/email-signature-module.tsx
+++ b/src/modules/email-signature/components/email-signature-module.tsx
@@ -12,7 +12,7 @@ import { RotateCcw } from 'lucide-react';
 export function EmailSignatureModule() {
  const {
    config, updateField, updateColor, updateLayout,
-    setVariant, setCompany, resetToDefaults, loadConfig,
+    setVariant, setCompany, setAddress, resetToDefaults, loadConfig,
  } = useSignatureConfig();

  const { saved, loading, save, remove } = useSavedSignatures();
@@ -28,6 +28,7 @@ export function EmailSignatureModule() {
          onUpdateLayout={updateLayout}
          onSetVariant={setVariant}
          onSetCompany={setCompany}
+          onSetAddress={setAddress}
        />

        <Separator />
@@ -49,7 +50,7 @@ export function EmailSignatureModule() {
        </Button>
      </div>

-      {/* Right panel — preview */}
+      {/* Right panel — preview (scrollable, resizable) */}
      <div>
        <SignaturePreview config={config} />
      </div>
--- a/src/modules/email-signature/components/signature-configurator.tsx
+++ b/src/modules/email-signature/components/signature-configurator.tsx
@@ -2,7 +2,7 @@

 import type { CompanyId } from '@/core/auth/types';
 import type { SignatureConfig, SignatureColors, SignatureLayout, SignatureVariant } from '../types';
-import { COMPANY_BRANDING } from '../services/company-branding';
+import { COMPANY_BRANDING, BELETAGE_ADDRESSES } from '../services/company-branding';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
 import { Switch } from '@/shared/components/ui/switch';
@@ -17,13 +17,39 @@ interface SignatureConfiguratorProps {
  onUpdateLayout: (key: keyof SignatureLayout, value: number) => void;
  onSetVariant: (variant: SignatureVariant) => void;
  onSetCompany: (company: CompanyId) => void;
+  onSetAddress?: (address: string[]) => void;
 }

-const COLOR_PALETTE: Record<string, string> = {
-  verde: '#22B5AB',
-  griInchis: '#54504F',
-  griDeschis: '#A7A9AA',
-  negru: '#323232',
+/** Color palette per company */
+const COMPANY_PALETTES: Record<CompanyId, Record<string, string>> = {
+  beletage: {
+    verde: '#22B5AB',
+    griInchis: '#54504F',
+    griDeschis: '#A7A9AA',
+    negru: '#323232',
+  },
+  'urban-switch': {
+    indigo: '#6366f1',
+    violet: '#4F46E5',
+    griInchis: '#2D2D2D',
+    griDeschis: '#6B7280',
+    albastru: '#3B82F6',
+    negru: '#1F2937',
+  },
+  'studii-de-teren': {
+    amber: '#f59e0b',
+    portocaliu: '#D97706',
+    griInchis: '#2D2D2D',
+    griDeschis: '#6B7280',
+    maro: '#92400E',
+    negru: '#1F2937',
+  },
+  group: {
+    gri: '#64748b',
+    griInchis: '#334155',
+    griDeschis: '#94a3b8',
+    negru: '#1e293b',
+  },
 };

 const COLOR_LABELS: Record<keyof SignatureColors, string> = {
@@ -48,8 +74,10 @@ const LAYOUT_CONTROLS: { key: keyof SignatureLayout; label: string; min: number;
 ];

 export function SignatureConfigurator({
-  config, onUpdateField, onUpdateColor, onUpdateLayout, onSetVariant, onSetCompany,
+  config, onUpdateField, onUpdateColor, onUpdateLayout, onSetVariant, onSetCompany, onSetAddress,
 }: SignatureConfiguratorProps) {
+  const palette = COMPANY_PALETTES[config.company];
+
  return (
    <div className="space-y-6">
      {/* Company selector */}
@@ -67,6 +95,26 @@ export function SignatureConfigurator({
        </Select>
      </div>

+      {/* Address selector (for Beletage) */}
+      {config.company === 'beletage' && onSetAddress && (
+        <div>
+          <Label>Adresă birou</Label>
+          <Select
+            value={!config.addressOverride || BELETAGE_ADDRESSES.unirii.join('|') === config.addressOverride.join('|') ? 'unirii' : 'christescu'}
+            onValueChange={(v) => {
+              const key = v as keyof typeof BELETAGE_ADDRESSES;
+              onSetAddress(BELETAGE_ADDRESSES[key]);
+            }}
+          >
+            <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="unirii">Str. Unirii, nr. 3</SelectItem>
+              <SelectItem value="christescu">Str. G-ral Eremia Grigorescu, nr. 21</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
      <Separator />

      {/* Personal data */}
@@ -113,14 +161,14 @@ export function SignatureConfigurator({

      <Separator />

-      {/* Colors */}
+      {/* Colors — company-specific palette */}
      <div className="space-y-3">
        <h3 className="text-sm font-semibold">Culori text</h3>
        {(Object.keys(COLOR_LABELS) as (keyof SignatureColors)[]).map((colorKey) => (
          <div key={colorKey} className="flex items-center justify-between">
            <span className="text-sm text-muted-foreground">{COLOR_LABELS[colorKey]}</span>
            <div className="flex gap-1.5">
-              {Object.values(COLOR_PALETTE).map((color) => (
+              {Object.values(palette).map((color) => (
                <button
                  key={color}
                  type="button"
--- a/src/modules/email-signature/components/signature-preview.tsx
+++ b/src/modules/email-signature/components/signature-preview.tsx
@@ -6,15 +6,19 @@ import { Button } from '@/shared/components/ui/button';
 import type { SignatureConfig } from '../types';
 import { generateSignatureHtml, downloadSignatureHtml } from '../services/signature-builder';

+const ZOOM_LEVELS = [0.75, 1, 1.5, 2, 2.5];
+
 interface SignaturePreviewProps {
  config: SignatureConfig;
 }

 export function SignaturePreview({ config }: SignaturePreviewProps) {
-  const [zoom, setZoom] = useState(1);
+  const [zoomIndex, setZoomIndex] = useState(1); // start at 100%
  const [copied, setCopied] = useState(false);
  const previewRef = useRef<HTMLDivElement>(null);

+  const zoom = ZOOM_LEVELS[zoomIndex] ?? 1;
+
  const html = useMemo(() => generateSignatureHtml(config), [config]);

  const handleDownload = () => {
@@ -32,17 +36,23 @@ export function SignaturePreview({ config }: SignaturePreviewProps) {
    }
  };

-  const toggleZoom = () => setZoom((z) => (z === 1 ? 2 : 1));
+  const zoomIn = () => setZoomIndex((i) => Math.min(i + 1, ZOOM_LEVELS.length - 1));
+  const zoomOut = () => setZoomIndex((i) => Math.max(i - 1, 0));

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">Previzualizare</h2>
        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" onClick={toggleZoom}>
-            {zoom === 1 ? <ZoomIn className="mr-1 h-4 w-4" /> : <ZoomOut className="mr-1 h-4 w-4" />}
-            {zoom === 1 ? '200%' : '100%'}
-          </Button>
+          <div className="flex items-center rounded-md border">
+            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-r-none" onClick={zoomOut} disabled={zoomIndex <= 0}>
+              <ZoomOut className="h-4 w-4" />
+            </Button>
+            <span className="w-14 text-center text-sm font-medium">{Math.round(zoom * 100)}%</span>
+            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-l-none" onClick={zoomIn} disabled={zoomIndex >= ZOOM_LEVELS.length - 1}>
+              <ZoomIn className="h-4 w-4" />
+            </Button>
+          </div>
          <Button variant="outline" size="sm" onClick={handleCopy}>
            <Copy className="mr-1 h-4 w-4" />
            {copied ? 'Copiat!' : 'Copiază HTML'}
@@ -54,7 +64,7 @@ export function SignaturePreview({ config }: SignaturePreviewProps) {
        </div>
      </div>

-      <div className="overflow-auto rounded-lg border bg-white p-6">
+      <div className="max-h-[calc(100vh-14rem)] overflow-auto rounded-lg border bg-white p-6">
        <div
          ref={previewRef}
          style={{ transform: `scale(${zoom})`, transformOrigin: 'top left' }}
--- a/src/modules/email-signature/hooks/use-signature-config.ts
+++ b/src/modules/email-signature/hooks/use-signature-config.ts
@@ -68,6 +68,10 @@ export function useSignatureConfig(initialCompany: CompanyId = 'beletage') {
    }));
  }, []);

+  const setAddress = useCallback((address: string[]) => {
+    setConfig((prev) => ({ ...prev, addressOverride: address }));
+  }, []);
+
  const resetToDefaults = useCallback(() => {
    setConfig(createDefaultConfig(config.company));
  }, [config.company]);
@@ -83,7 +87,8 @@ export function useSignatureConfig(initialCompany: CompanyId = 'beletage') {
    updateLayout,
    setVariant,
    setCompany,
+    setAddress,
    resetToDefaults,
    loadConfig,
-  }), [config, updateField, updateColor, updateLayout, setVariant, setCompany, resetToDefaults, loadConfig]);
+  }), [config, updateField, updateColor, updateLayout, setVariant, setCompany, setAddress, resetToDefaults, loadConfig]);
 }
--- a/src/modules/email-signature/services/company-branding.ts
+++ b/src/modules/email-signature/services/company-branding.ts
@@ -12,25 +12,34 @@ const BELETAGE_COLORS: SignatureColors = {
 };

 const URBAN_SWITCH_COLORS: SignatureColors = {
-  prefix: '#3B3B3B',
-  name: '#3B3B3B',
-  title: '#8B8B8B',
-  address: '#8B8B8B',
-  phone: '#3B3B3B',
-  website: '#3B3B3B',
+  prefix: '#2D2D2D',
+  name: '#2D2D2D',
+  title: '#6B7280',
+  address: '#6B7280',
+  phone: '#2D2D2D',
+  website: '#4F46E5',
  motto: '#6366f1',
 };

 const STUDII_COLORS: SignatureColors = {
-  prefix: '#3B3B3B',
-  name: '#3B3B3B',
-  title: '#8B8B8B',
-  address: '#8B8B8B',
-  phone: '#3B3B3B',
-  website: '#3B3B3B',
+  prefix: '#2D2D2D',
+  name: '#2D2D2D',
+  title: '#6B7280',
+  address: '#6B7280',
+  phone: '#2D2D2D',
+  website: '#D97706',
  motto: '#f59e0b',
 };

+const ADDR_UNIRII = ['str. Unirii, nr. 3, ap. 26', 'Cluj-Napoca, Cluj 400417', 'România'] as const;
+const ADDR_CHRISTESCU = ['str. G-ral Eremia Grigorescu, nr. 21', 'Cluj-Napoca, Cluj 400304', 'România'] as const;
+
+/** Available address options for Beletage (toggle between offices) */
+export const BELETAGE_ADDRESSES: { unirii: string[]; christescu: string[] } = {
+  unirii: [...ADDR_UNIRII],
+  christescu: [...ADDR_CHRISTESCU],
+};
+
 export const COMPANY_BRANDING: Record<CompanyId, CompanyBranding> = {
  beletage: {
    id: 'beletage',
@@ -48,7 +57,7 @@ export const COMPANY_BRANDING: Record<CompanyId, CompanyBranding> = {
      png: 'https://beletage.ro/img/Green-slash.png',
      svg: 'https://beletage.ro/img/Green-slash.svg',
    },
-    address: ['str. Unirii, nr. 3, ap. 26', 'Cluj-Napoca, Cluj 400417', 'România'],
+    address: [...ADDR_UNIRII],
    website: 'www.beletage.ro',
    motto: 'we make complex simple',
    defaultColors: BELETAGE_COLORS,
@@ -58,20 +67,20 @@ export const COMPANY_BRANDING: Record<CompanyId, CompanyBranding> = {
    name: 'Urban Switch SRL',
    accent: '#6366f1',
    logo: {
-      png: '',
-      svg: '',
+      png: '/logos/logo-us-dark.svg',
+      svg: '/logos/logo-us-dark.svg',
    },
    slashGrey: {
      png: 'https://beletage.ro/img/Grey-slash.png',
      svg: 'https://beletage.ro/img/Grey-slash.svg',
    },
    slashAccent: {
-      png: '',
-      svg: '',
+      png: '/logos/logo-us-light.svg',
+      svg: '/logos/logo-us-light.svg',
    },
-    address: ['Cluj-Napoca', 'România'],
-    website: '',
-    motto: '',
+    address: ['str. Unirii, nr. 3, ap. 26', 'Cluj-Napoca, Cluj 400417', 'România'],
+    website: 'www.urbanswitch.ro',
+    motto: 'shaping urban futures',
    defaultColors: URBAN_SWITCH_COLORS,
  },
  'studii-de-teren': {
@@ -79,20 +88,20 @@ export const COMPANY_BRANDING: Record<CompanyId, CompanyBranding> = {
    name: 'Studii de Teren SRL',
    accent: '#f59e0b',
    logo: {
-      png: '',
-      svg: '',
+      png: '/logos/logo-sdt-dark.svg',
+      svg: '/logos/logo-sdt-dark.svg',
    },
    slashGrey: {
      png: 'https://beletage.ro/img/Grey-slash.png',
      svg: 'https://beletage.ro/img/Grey-slash.svg',
    },
    slashAccent: {
-      png: '',
-      svg: '',
+      png: '/logos/logo-sdt-light.svg',
+      svg: '/logos/logo-sdt-light.svg',
    },
-    address: ['Cluj-Napoca', 'România'],
-    website: '',
-    motto: '',
+    address: ['str. Unirii, nr. 3, ap. 26', 'Cluj-Napoca, Cluj 400417', 'România'],
+    website: 'www.studiideteren.ro',
+    motto: 'ground truth, measured right',
    defaultColors: STUDII_COLORS,
  },
  group: {
@@ -100,9 +109,12 @@ export const COMPANY_BRANDING: Record<CompanyId, CompanyBranding> = {
    name: 'Grup Companii',
    accent: '#64748b',
    logo: { png: '', svg: '' },
-    slashGrey: { png: '', svg: '' },
+    slashGrey: {
+      png: 'https://beletage.ro/img/Grey-slash.png',
+      svg: 'https://beletage.ro/img/Grey-slash.svg',
+    },
    slashAccent: { png: '', svg: '' },
-    address: ['Cluj-Napoca', 'România'],
+    address: ['Cluj-Napoca, Cluj', 'România'],
    website: '',
    motto: '',
    defaultColors: BELETAGE_COLORS,
--- a/src/modules/email-signature/services/signature-builder.ts
+++ b/src/modules/email-signature/services/signature-builder.ts
@@ -14,6 +14,7 @@ export function formatPhone(raw: string): { display: string; link: string } {

 export function generateSignatureHtml(config: SignatureConfig): string {
  const branding = getBranding(config.company);
+  const address = config.addressOverride ?? branding.address;
  const { display: phone, link: phoneLink } = formatPhone(config.phone);
  const images = config.useSvg
    ? { logo: branding.logo.svg, greySlash: branding.slashGrey.svg, accentSlash: branding.slashAccent.svg }
@@ -71,7 +72,7 @@ export function generateSignatureHtml(config: SignatureConfig): string {
              </td>
              <td width="${spacerWidth}" style="width:${spacerWidth}px; font-size:0; line-height:0;"></td>
              <td style="vertical-align:top; padding:0 0 0 ${textPaddingLeft}px;">
-                <span style="color:${colors.address}; text-decoration:none;">${branding.address.join('<br>')}</span>
+                <span style="color:${colors.address}; text-decoration:none;">${address.join('<br>')}</span>
              </td>
            </tr>
            <tr>
--- a/src/modules/email-signature/types.ts
+++ b/src/modules/email-signature/types.ts
@@ -48,6 +48,8 @@ export interface SignatureConfig {
  layout: SignatureLayout;
  variant: SignatureVariant;
  useSvg: boolean;
+  /** Override the default company address */
+  addressOverride?: string[];
 }

 export interface SavedSignature {