feat: reusable badge templates, dynamic price and superscript cents, size/align/padding controls, fix saving

src/app/page.tsx

@@ -5,6 +5,7 @@ import { NewsletterCampaign, NewsletterModule, ProductItem, BadgeTemplate } from
 import { DEFAULT_CAMPAIGN, SUPABASE_ASSETS_BASE } from '@/lib/defaultCampaign';
 import { renderEmailHtml, renderSingleModuleHtml } from '@/lib/emailRenderer';
 import { supabase } from '@/lib/supabase';
+import { DEFAULT_BADGE_TEMPLATES } from '@/lib/badgeUtils';
 import { TopBar } from '@/components/editor/TopBar';
 import { ConfigPanel } from '@/components/editor/ConfigPanel';
 import { ProductImportModal } from '@/components/editor/ProductImportModal';
@@ -26,6 +27,64 @@ export default function Home() {
   const [isBadgeEditorOpen, setIsBadgeEditorOpen] = useState(false);
   const [isSavedCampaignsOpen, setIsSavedCampaignsOpen] = useState(false);
   const [targetProductIdForBadge, setTargetProductIdForBadge] = useState<string | null>(null);
+  const [availableBadges, setAvailableBadges] = useState<BadgeTemplate[]>(DEFAULT_BADGE_TEMPLATES);
+
+  // Načítanie dostupných šablón cenoviek pre opakované použitie
+  useEffect(() => {
+    const fetchBadges = async () => {
+      let loaded: BadgeTemplate[] = [];
+      try {
+        const { data, error } = await supabase
+          .from('badges')
+          .select('*')
+          .order('created_at', { ascending: false });
+
+        if (data && !error && data.length > 0) {
+          loaded = data.map((d: any) => {
+            const isObj = d.layers_config && !Array.isArray(d.layers_config);
+            return {
+              id: d.id,
+              name: d.name,
+              svgRaw: d.svg_raw || '',
+              layersConfig: isObj ? (d.layers_config.layers || []) : (d.layers_config || []),
+              width: isObj ? (d.layers_config.width || 110) : 110,
+              align: isObj ? (d.layers_config.align || 'center') : 'center',
+              paddingTop: isObj ? (d.layers_config.paddingTop ?? 4) : 4,
+              paddingBottom: isObj ? (d.layers_config.paddingBottom ?? 4) : 4
+            };
+          });
+        }
+      } catch (e) {
+        console.warn('Error fetching badges in page:', e);
+      }
+
+      try {
+        const local = localStorage.getItem('coop_custom_badges');
+        if (local) {
+          const parsed = JSON.parse(local);
+          if (Array.isArray(parsed)) {
+            const existingIds = new Set(loaded.map((b) => b.id));
+            for (const b of parsed) {
+              if (!existingIds.has(b.id)) {
+                loaded.push(b);
+                existingIds.add(b.id);
+              }
+            }
+          }
+        }
+      } catch (e) {}
+
+      const all = [...loaded];
+      const existingIds = new Set(all.map((b) => b.id));
+      for (const preset of DEFAULT_BADGE_TEMPLATES) {
+        if (!existingIds.has(preset.id)) {
+          all.push(preset);
+        }
+      }
+      setAvailableBadges(all);
+    };
+    fetchBadges();
+  }, [isBadgeEditorOpen]);
 
   // Pomocné funkcie pre fixné ukotvenie hlavičky, spodných letákov, receptov a pätičky
   const isTopModule = (m: NewsletterModule) => m.type === 'header' || m.type === 'announcement';
@@ -475,7 +534,12 @@ export default function Home() {
         return {
           ...p,
           badgeId: badge.id,
-          customBadgePngUrl: renderedPngUrl || p.customBadgePngUrl
+          badgeCustomTemplate: badge,
+          badgeWidth: badge.width ?? p.badgeWidth ?? 110,
+          badgeAlign: badge.align ?? p.badgeAlign ?? 'center',
+          badgePaddingTop: badge.paddingTop ?? p.badgePaddingTop ?? 4,
+          badgePaddingBottom: badge.paddingBottom ?? p.badgePaddingBottom ?? 4,
+          customBadgePngUrl: undefined // Používame živý dynamický SVG vektor, žiadna statická fotka
         };
       }
       return p;
@@ -488,6 +552,13 @@ export default function Home() {
         products: updatedProducts
       }
     });
+
+    setAvailableBadges((prev) => {
+      if (prev.some((b) => b.id === badge.id)) {
+        return prev.map((b) => (b.id === badge.id ? badge : b));
+      }
+      return [badge, ...prev];
+    });
   };
 
   const topCount = campaign.modules.filter((m) => isTopModule(m)).length;
@@ -651,6 +722,7 @@ export default function Home() {
           <ConfigPanel
             module={selectedModule}
             onUpdateModule={handleUpdateModule}
+            availableBadges={availableBadges}
             onOpenBadgeManager={(pId) => {
               setTargetProductIdForBadge(pId);
               setIsBadgeEditorOpen(true);

src/components/editor/ConfigPanel.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { NewsletterModule, ProductItem } from '@/types/newsletter';
+import { NewsletterModule, ProductItem, BadgeTemplate } from '@/types/newsletter';
 import { Plus, Trash2, Image as ImageIcon, Tag, Store } from 'lucide-react';
 import { SUPABASE_ASSETS_BASE } from '@/lib/defaultCampaign';
 import { ImageUploadInput } from './ImageUploadInput';
@@ -11,13 +11,15 @@ interface ConfigPanelProps {
   onUpdateModule: (updated: NewsletterModule) => void;
   onOpenBadgeManager?: (productId: string) => void;
   onOpenImport?: () => void;
+  availableBadges?: BadgeTemplate[];
 }
 
 export const ConfigPanel: React.FC<ConfigPanelProps> = ({
   module,
   onUpdateModule,
   onOpenBadgeManager,
-  onOpenImport
+  onOpenImport,
+  availableBadges = []
 }) => {
   if (!module) {
     return (
@@ -510,18 +512,197 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
                   </label>
                 </div>
 
-                {/* Grafická cenovka - Editor cenoviek */}
+                {/* Grafická cenovka a šablóna */}
-                <div className="pt-2 border-t border-gray-200 flex items-center justify-between">
+                <div className="pt-2 border-t border-gray-200 space-y-2.5">
-                  <div className="flex items-center gap-1.5">
+                  <div className="flex items-center justify-between">
-                    <Tag className="w-3.5 h-3.5 text-red-600" />
+                    <div className="flex items-center gap-1.5">
-                    <span className="text-xs font-semibold text-gray-700">Grafická cenovka</span>
+                      <Tag className="w-3.5 h-3.5 text-red-600" />
+                      <span className="text-xs font-bold text-gray-800">Cenovka</span>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => onOpenBadgeManager && onOpenBadgeManager(p.id)}
+                      className="text-[11px] font-bold text-red-600 hover:text-red-700 bg-red-50 hover:bg-red-100 border border-red-200 px-2.5 py-1 rounded-lg transition-colors"
+                    >
+                      Otvoriť Editor cenoviek
+                    </button>
+                  </div>
+
+                  {/* Výber opakovane použiteľnej šablóny */}
+                  <div>
+                    <label className="text-[10px] text-gray-500 font-semibold block mb-0.5">
+                      Šablóna cenovky
+                    </label>
+                    <select
+                      value={p.badgeCustomTemplate?.id || (p.customBadgePngUrl ? 'custom_png' : 'default_coop')}
+                      onChange={(e) => {
+                        const val = e.target.value;
+                        const products = [...module.data.products];
+                        if (val === 'default_coop') {
+                          products[pIdx].badgeCustomTemplate = undefined;
+                          products[pIdx].customBadgePngUrl = undefined;
+                          products[pIdx].badgeId = undefined;
+                        } else {
+                          const found = (availableBadges || []).find((b) => b.id === val);
+                          if (found) {
+                            products[pIdx].badgeCustomTemplate = found;
+                            products[pIdx].badgeId = found.id;
+                            products[pIdx].badgeWidth = found.width ?? products[pIdx].badgeWidth ?? 110;
+                            products[pIdx].badgeAlign = found.align ?? products[pIdx].badgeAlign ?? 'center';
+                            products[pIdx].badgePaddingTop = found.paddingTop ?? products[pIdx].badgePaddingTop ?? 4;
+                            products[pIdx].badgePaddingBottom = found.paddingBottom ?? products[pIdx].badgePaddingBottom ?? 4;
+                            products[pIdx].customBadgePngUrl = undefined;
+                          }
+                        }
+                        updateData({ products });
+                      }}
+                      className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white font-medium"
+                    >
+                      <option value="default_coop">Predvolená COOP cenovka (červeno-biela)</option>
+                      {(availableBadges || []).map((b) => (
+                        <option key={b.id} value={b.id}>
+                          {b.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  {/* Tlačidlo: Aplikovať túto cenovku na všetky produkty v sekcii */}
+                  {p.badgeCustomTemplate && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (confirm(`Naozaj chcete aplikovať šablónu "${p.badgeCustomTemplate?.name}" na všetky produkty v tejto sekcii?`)) {
+                          const products = (module.data.products || []).map((prod: ProductItem) => ({
+                            ...prod,
+                            badgeCustomTemplate: p.badgeCustomTemplate,
+                            badgeId: p.badgeCustomTemplate?.id,
+                            badgeWidth: p.badgeWidth || p.badgeCustomTemplate?.width || 110,
+                            badgeAlign: p.badgeAlign || p.badgeCustomTemplate?.align || 'center',
+                            badgePaddingTop: p.badgePaddingTop ?? p.badgeCustomTemplate?.paddingTop ?? 4,
+                            badgePaddingBottom: p.badgePaddingBottom ?? p.badgeCustomTemplate?.paddingBottom ?? 4,
+                            customBadgePngUrl: undefined
+                          }));
+                          updateData({ products });
+                        }
+                      }}
+                      className="w-full py-1.5 text-[11px] font-bold text-slate-700 bg-slate-100 hover:bg-slate-200 border border-slate-300 rounded-lg transition-colors text-center"
+                    >
+                      Použiť túto cenovku pre všetky produkty v sekcii
+                    </button>
+                  )}
+
+                  {/* Rýchle ovládanie veľkosti (Width), zarovnania a paddingu */}
+                  <div className="bg-gray-50 p-2.5 rounded-xl border border-gray-200 space-y-2">
+                    {/* Šírka */}
+                    <div>
+                      <div className="flex justify-between items-center text-[10px] text-gray-600 mb-0.5">
+                        <span className="font-semibold">Veľkosť cenovky (Šírka)</span>
+                        <span className="font-bold text-gray-800 bg-white px-1.5 py-0.2 rounded border border-gray-200">
+                          {p.badgeWidth || (p.badgeCustomTemplate ? 110 : 95)} px
+                        </span>
+                      </div>
+                      <input
+                        type="range"
+                        min="70"
+                        max="180"
+                        step="2"
+                        value={p.badgeWidth || (p.badgeCustomTemplate ? 110 : 95)}
+                        onChange={(e) => {
+                          const products = [...module.data.products];
+                          products[pIdx].badgeWidth = Number(e.target.value);
+                          updateData({ products });
+                        }}
+                        className="w-full accent-red-600"
+                      />
+                    </div>
+
+                    {/* Zarovnanie */}
+                    <div>
+                      <span className="text-[10px] text-gray-600 font-semibold block mb-1">Zarovnanie</span>
+                      <div className="grid grid-cols-3 gap-1 bg-gray-200 p-0.5 rounded-lg text-[10px] font-bold text-center">
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const products = [...module.data.products];
+                            products[pIdx].badgeAlign = 'left';
+                            updateData({ products });
+                          }}
+                          className={`py-1 rounded transition-all ${
+                            (p.badgeAlign || 'center') === 'left'
+                              ? 'bg-white text-gray-900 shadow-xs'
+                              : 'text-gray-600 hover:text-gray-900'
+                          }`}
+                        >
+                          Vľavo
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const products = [...module.data.products];
+                            products[pIdx].badgeAlign = 'center';
+                            updateData({ products });
+                          }}
+                          className={`py-1 rounded transition-all ${
+                            (p.badgeAlign || 'center') === 'center'
+                              ? 'bg-white text-gray-900 shadow-xs'
+                              : 'text-gray-600 hover:text-gray-900'
+                          }`}
+                        >
+                          Na stred
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const products = [...module.data.products];
+                            products[pIdx].badgeAlign = 'right';
+                            updateData({ products });
+                          }}
+                          className={`py-1 rounded transition-all ${
+                            (p.badgeAlign || 'center') === 'right'
+                              ? 'bg-white text-gray-900 shadow-xs'
+                              : 'text-gray-600 hover:text-gray-900'
+                          }`}
+                        >
+                          Vpravo
+                        </button>
+                      </div>
+                    </div>
+
+                    {/* Padding zhora a zdola */}
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label className="text-[9px] text-gray-600 font-semibold block">Odsadenie zhora (px)</label>
+                        <input
+                          type="number"
+                          min="0"
+                          max="40"
+                          value={p.badgePaddingTop ?? (p.badgeCustomTemplate?.paddingTop ?? 4)}
+                          onChange={(e) => {
+                            const products = [...module.data.products];
+                            products[pIdx].badgePaddingTop = Number(e.target.value);
+                            updateData({ products });
+                          }}
+                          className="w-full text-xs border border-gray-300 rounded-lg p-1 bg-white font-medium"
+                        />
+                      </div>
+                      <div>
+                        <label className="text-[9px] text-gray-600 font-semibold block">Odsadenie zdola (px)</label>
+                        <input
+                          type="number"
+                          min="0"
+                          max="40"
+                          value={p.badgePaddingBottom ?? (p.badgeCustomTemplate?.paddingBottom ?? 4)}
+                          onChange={(e) => {
+                            const products = [...module.data.products];
+                            products[pIdx].badgePaddingBottom = Number(e.target.value);
+                            updateData({ products });
+                          }}
+                          className="w-full text-xs border border-gray-300 rounded-lg p-1 bg-white font-medium"
+                        />
+                      </div>
+                    </div>
                   </div>
-                  <button
-                    onClick={() => onOpenBadgeManager && onOpenBadgeManager(p.id)}
-                    className="text-xs font-bold text-red-600 hover:text-white hover:bg-red-600 border border-red-200 px-2.5 py-1 rounded-lg transition-all"
-                  >
-                    {p.customBadgePngUrl ? 'Upraviť v editore' : 'Otvoriť Editor cenoviek'}
-                  </button>
                 </div>
               </div>
             ))}

src/lib/badgeUtils.ts

@@ -0,0 +1,324 @@
+import { BadgeTemplate, BadgeLayer } from '@/types/newsletter';
+
+export const DEFAULT_BADGE_TEMPLATES: BadgeTemplate[] = [
+  {
+    id: 'badge-preset-yellow-akcia',
+    name: 'COOP Akcia (Žltá)',
+    svgRaw: `<svg width="140" height="95" viewBox="0 0 140 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="140" height="95" rx="14" fill="#ffd100"/>
+      <rect x="15" y="8" width="110" height="24" rx="6" fill="#e2001a"/>
+    </svg>`,
+    width: 110,
+    align: 'center',
+    paddingTop: 4,
+    paddingBottom: 4,
+    layersConfig: [
+      {
+        id: 'l-akcia-1',
+        type: 'text',
+        text: 'AKCIA',
+        x: 70,
+        y: 20,
+        fontSize: 14,
+        fontWeight: '900',
+        fontFamily: 'Poppins',
+        fill: '#ffffff',
+        align: 'center'
+      },
+      {
+        id: 'l-akcia-2',
+        type: 'text',
+        text: '{cena}',
+        x: 70,
+        y: 62,
+        fontSize: 42,
+        fontWeight: '900',
+        fontFamily: 'Arial Narrow',
+        fill: '#001a33',
+        align: 'center'
+      }
+    ]
+  },
+  {
+    id: 'badge-preset-red-zlava',
+    name: 'COOP Zľava (Červená)',
+    svgRaw: `<svg width="140" height="95" viewBox="0 0 140 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="140" height="95" rx="14" fill="#e2001a"/>
+      <rect x="12" y="8" width="116" height="22" rx="5" fill="#ffffff" fill-opacity="0.2"/>
+    </svg>`,
+    width: 110,
+    align: 'center',
+    paddingTop: 4,
+    paddingBottom: 4,
+    layersConfig: [
+      {
+        id: 'l-zlava-1',
+        type: 'text',
+        text: 'ZĽAVA -{zlava}',
+        x: 70,
+        y: 19,
+        fontSize: 13,
+        fontWeight: '900',
+        fontFamily: 'Poppins',
+        fill: '#ffffff',
+        align: 'center'
+      },
+      {
+        id: 'l-zlava-2',
+        type: 'text',
+        text: '{cena}',
+        x: 70,
+        y: 62,
+        fontSize: 42,
+        fontWeight: '900',
+        fontFamily: 'Arial Narrow',
+        fill: '#ffd100',
+        align: 'center'
+      }
+    ]
+  },
+  {
+    id: 'badge-preset-blue-supercena',
+    name: 'Super Cena (Tmavomodrá)',
+    svgRaw: `<svg width="140" height="95" viewBox="0 0 140 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="140" height="95" rx="14" fill="#001a33"/>
+      <rect x="0" y="0" width="140" height="30" rx="14" fill="#003399"/>
+    </svg>`,
+    width: 110,
+    align: 'center',
+    paddingTop: 4,
+    paddingBottom: 4,
+    layersConfig: [
+      {
+        id: 'l-super-1',
+        type: 'text',
+        text: 'SUPER CENA',
+        x: 70,
+        y: 16,
+        fontSize: 13,
+        fontWeight: '900',
+        fontFamily: 'Poppins',
+        fill: '#ffffff',
+        align: 'center'
+      },
+      {
+        id: 'l-super-2',
+        type: 'text',
+        text: '{cena}',
+        x: 70,
+        y: 62,
+        fontSize: 42,
+        fontWeight: '900',
+        fontFamily: 'Arial Narrow',
+        fill: '#ffd100',
+        align: 'center'
+      }
+    ]
+  },
+  {
+    id: 'badge-preset-green-cerstve',
+    name: 'Bio & Čerstvé (Zelená)',
+    svgRaw: `<svg width="140" height="95" viewBox="0 0 140 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="140" height="95" rx="14" fill="#005239"/>
+      <rect x="15" y="8" width="110" height="22" rx="6" fill="#003d2b"/>
+    </svg>`,
+    width: 110,
+    align: 'center',
+    paddingTop: 4,
+    paddingBottom: 4,
+    layersConfig: [
+      {
+        id: 'l-green-1',
+        type: 'text',
+        text: 'ČERSTVÉ',
+        x: 70,
+        y: 19,
+        fontSize: 13,
+        fontWeight: '900',
+        fontFamily: 'Poppins',
+        fill: '#a3e635',
+        align: 'center'
+      },
+      {
+        id: 'l-green-2',
+        type: 'text',
+        text: '{cena}',
+        x: 70,
+        y: 62,
+        fontSize: 42,
+        fontWeight: '900',
+        fontFamily: 'Arial Narrow',
+        fill: '#ffffff',
+        align: 'center'
+      }
+    ]
+  }
+];
+
+export interface BadgeProductData {
+  priceMain: string;
+  priceSub: string;
+  discountText?: string;
+  unitPrice?: string;
+}
+
+/**
+ * Vygeneruje 100% čistý vektorový SVG reťazec cenovky bez akýchkoľvek
+ * editovacích rámčekov, tooltippov či ovládacích prvkov.
+ * Centy sú naformátované ako horný index (tspan dy="-0.45em").
+ * Cena je predvolene bez znaku €.
+ */
+export function renderCleanBadgeSvg(
+  template: BadgeTemplate,
+  product: BadgeProductData,
+  overrideWidth?: number
+): string {
+  const pMain = product.priceMain || '0';
+  const pSub = product.priceSub || '00';
+  const discount = (product.discountText || '').replace('-', '');
+  const unitPrice = product.unitPrice || '';
+
+  // Získanie viewBox alebo predvolených rozmerov
+  let vb = '0 0 140 95';
+  let vbWidth = 140;
+  let vbHeight = 95;
+
+  if (template.svgRaw) {
+    const vbMatch = template.svgRaw.match(/viewBox=["']([^"']+)["']/i);
+    if (vbMatch) {
+      vb = vbMatch[1];
+      const parts = vb.trim().split(/\s+/).map(Number);
+      if (parts.length === 4 && parts[2] > 0 && parts[3] > 0) {
+        vbWidth = parts[2];
+        vbHeight = parts[3];
+      }
+    } else {
+      const wMatch = template.svgRaw.match(/width=["']([^"']+)["']/i);
+      const hMatch = template.svgRaw.match(/height=["']([^"']+)["']/i);
+      if (wMatch && hMatch) {
+        const w = parseFloat(wMatch[1]);
+        const h = parseFloat(hMatch[1]);
+        if (w > 0 && h > 0) {
+          vbWidth = w;
+          vbHeight = h;
+          vb = `0 0 ${w} ${h}`;
+        }
+      }
+    }
+  }
+
+  // Extrahovanie vnútorného obsahu SVG (medzi <svg...> a </svg>)
+  let innerBg = '';
+  if (template.svgRaw) {
+    const inside = template.svgRaw.replace(/<\/?svg[^>]*>/gi, '').trim();
+    innerBg = inside;
+  } else {
+    innerBg = `<rect width="${vbWidth}" height="${vbHeight}" rx="14" fill="#ffd100"/>`;
+  }
+
+  // Šírka výsledného SVG
+  const displayWidth = overrideWidth || template.width || 110;
+  const displayHeight = Math.round((displayWidth / vbWidth) * vbHeight);
+
+  // Zostavenie textových vrstiev
+  const textLayersSvg = (template.layersConfig || []).map((layer) => {
+    const rawText = layer.text || '';
+    const fontSize = layer.fontSize || 16;
+    const subFontSize = Math.max(10, Math.round(fontSize * 0.55));
+    const fontWeight = layer.fontWeight || '700';
+    const fill = layer.fill || '#ffffff';
+    const fontFamily = layer.fontFamily
+      ? `'${layer.fontFamily}', -apple-system, BlinkMacSystemFont, Arial, sans-serif`
+      : `'Arial Narrow', Arial, sans-serif`;
+
+    let anchor = 'middle';
+    if (layer.align === 'left') anchor = 'start';
+    if (layer.align === 'right') anchor = 'end';
+
+    // Formátovanie textu: ak obsahuje {cena}, centy vložíme do <tspan> ako horný index
+    let contentSvg = '';
+    if (rawText.includes('{cena}')) {
+      const parts = rawText.split('{cena}');
+      const before = escapeXml(parts[0] || '');
+      const after = escapeXml(parts[1] || '');
+      contentSvg = `${before}${escapeXml(pMain)}<tspan font-size="${subFontSize}px" dy="-0.45em" font-weight="${fontWeight}">${escapeXml(pSub)}</tspan><tspan dy="0.45em">${after}</tspan>`;
+    } else {
+      let replaced = rawText
+        .replace(/{cela_suma}/g, pMain)
+        .replace(/{centy}/g, pSub)
+        .replace(/{zlava}/g, discount)
+        .replace(/{jednotkova_cena}/g, unitPrice)
+        .replace(/{mena}/g, '€');
+      contentSvg = escapeXml(replaced);
+    }
+
+    return `<text x="${layer.x}" y="${layer.y}" text-anchor="${anchor}" dominant-baseline="central" font-family="${fontFamily}" font-size="${fontSize}px" font-weight="${fontWeight}" fill="${fill}">${contentSvg}</text>`;
+  }).join('\n    ');
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${vb}" width="${displayWidth}" height="${displayHeight}" style="display:block;max-width:100%;height:auto;">
+    ${innerBg}
+    ${textLayersSvg}
+  </svg>`;
+}
+
+/**
+ * Skonvertuje SVG reťazec do čistého PNG Data URL v prehliadači
+ * (bez akýchkoľvek DOM prvkov alebo modrých drag & drop rámčekov).
+ */
+export async function svgToCleanPng(
+  svgString: string,
+  width: number,
+  height: number
+): Promise<string> {
+  if (typeof window === 'undefined') {
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
+  }
+
+  return new Promise((resolve) => {
+    try {
+      const img = new Image();
+      const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+      const url = URL.createObjectURL(svgBlob);
+
+      img.onload = () => {
+        try {
+          const canvas = document.createElement('canvas');
+          const scale = 2; // Vysoké rozlíšenie Retina
+          canvas.width = width * scale;
+          canvas.height = height * scale;
+          const ctx = canvas.getContext('2d');
+          if (ctx) {
+            ctx.scale(scale, scale);
+            ctx.drawImage(img, 0, 0, width, height);
+            URL.revokeObjectURL(url);
+            resolve(canvas.toDataURL('image/png'));
+            return;
+          }
+        } catch (e) {
+          console.warn('Canvas export fallback to SVG data URL', e);
+        }
+        URL.revokeObjectURL(url);
+        resolve(`data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`);
+      };
+
+      img.onerror = () => {
+        URL.revokeObjectURL(url);
+        resolve(`data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`);
+      };
+
+      img.src = url;
+    } catch (err) {
+      resolve(`data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`);
+    }
+  });
+}
+
+function escapeXml(unsafe: string): string {
+  if (!unsafe) return '';
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}

src/lib/emailRenderer.ts

@@ -1,5 +1,6 @@
 import { NewsletterCampaign, ProductItem } from '@/types/newsletter';
 import { SUPABASE_ASSETS_BASE } from './defaultCampaign';
+import { renderCleanBadgeSvg } from './badgeUtils';
 
 export function renderEmailHtml(campaign: NewsletterCampaign): string {
   const renderedModules = campaign.modules.map((m) => renderModule(m, campaign)).join('\n');
@@ -620,46 +621,86 @@ function renderExactProductCard(
       </tr>
       <tr height="1">
           <td style="padding: 0 8px 12px 8px; text-align: center;" valign="bottom">
-              <!-- Vyladená Cenovka Premium v8/v11 1:1 alebo vyrenderovaná PNG cenovka z editora -->
+              ${(() => {
-              ${p.customBadgePngUrl ? `
+                const bWidth = p.badgeWidth || (p.badgeCustomTemplate ? (p.badgeCustomTemplate.width || 110) : 95);
-              <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto;">
+                const bAlign = p.badgeAlign || (p.badgeCustomTemplate ? (p.badgeCustomTemplate.align || 'center') : 'center');
-                  <tr>
+                const padTop = p.badgePaddingTop ?? (p.badgeCustomTemplate?.paddingTop ?? 0);
-                      <td align="center">
+                const padBottom = p.badgePaddingBottom ?? (p.badgeCustomTemplate?.paddingBottom ?? 0);
-                          <img src="${escapeHtml(p.customBadgePngUrl)}" width="110" alt="Cenovka" style="display: block; margin: 0 auto; max-width: 120px;">
+
-                      </td>
+                let marginStyle = 'margin: 0 auto;';
-                  </tr>
+                if (bAlign === 'left') {
-              </table>` : `
+                  marginStyle = 'margin: 0 auto 0 0; margin-right: auto; margin-left: 0;';
-              <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 95px; margin: 0 auto;">
+                } else if (bAlign === 'right') {
-                  <tr>
+                  marginStyle = 'margin: 0 0 0 auto; margin-left: auto; margin-right: 0;';
-                      <td align="center">
+                }
-                          <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="background-color: ${badgeHdrBg}; border: 0; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.18); width: 85px; overflow: hidden;">
+
-                              ${badgeCustomTxt ? `
+                // 1. Ak produkt má vlastnú dynamickú šablónu cenovky (čistý SVG vektor bez editovacích prvkov a so živou cenou)
-                              <tr>
+                if (p.badgeCustomTemplate) {
-                                  <td bgcolor="${badgeHdrBg}" style="padding: 4px 4px; text-align: center; background-color: ${badgeHdrBg};">
+                  return `
-                                      <span style="font-family: 'Arial Narrow', Arial, sans-serif; font-size: 10px; color: ${badgeHdrColor}; font-weight: 800; text-transform: uppercase;">${escapeHtml(badgeCustomTxt)}</span>
+                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="${bAlign}" style="${marginStyle} width: ${bWidth}px; padding-top: ${padTop}px; padding-bottom: ${padBottom}px;">
-                                  </td>
+                      <tr>
-                              </tr>` : (p.discountText ? `
+                          <td align="${bAlign}">
-                              <tr>
+                              ${renderCleanBadgeSvg(p.badgeCustomTemplate, p, bWidth)}
-                                  <td style="padding: 2px 4px; text-align: right; background-color: ${badgeHdrBg};">
+                          </td>
-                                      <span style="font-family: 'Arial Narrow', Arial, sans-serif; font-size: 9px; color: ${badgeHdrColor}; font-weight: 700; text-transform: lowercase;">${escapeHtml(p.badgeText || 'zľava')}</span>
+                      </tr>
-                                      <span style="font-family: 'Arial Narrow', Arial, sans-serif; font-size: 20px; color: ${badgeHdrColor}; font-weight: 900; line-height: 1; margin-left: 2px;">${escapeHtml(p.discountText)}</span>
+                      ${p.showSlovakFlag ? `
-                                  </td>
+                      <tr>
-                              </tr>` : '')}
+                          <td align="right" style="line-height: 0; padding: 0;">
-                              <tr>
+                              <img src="${SUPABASE_ASSETS_BASE}vlajka_srdce.png" width="40" alt="SK" style="display: block; margin-top: -26px; margin-right: -10px; padding: 4px; filter: drop-shadow(1px 0 0 #fefefe) drop-shadow(-1px 0 0 #fefefe) drop-shadow(0 1px 0 #fefefe) drop-shadow(0 -1px 0 #fefefe);">
-                                  <td class="force-text-white" bgcolor="${badgePrcBg}" style="background-color: ${badgePrcBg}; padding: 4px 2px 2px 2px; font-family: 'Arial Narrow', Arial, sans-serif; color: ${badgePrcColor}; font-weight: 900; line-height: 1; text-align: center; border-radius: 0 0 12px 12px;">
+                          </td>
-                                      <span style="font-size: 52px;">${escapeHtml(p.priceMain)}</span><sup style="font-size: 26px; vertical-align: top; line-height: 1.2;">${escapeHtml(p.priceSub)}</sup>
+                      </tr>` : ''}
-                                  </td>
+                  </table>`;
-                              </tr>
+                }
-                          </table>
+
-                      </td>
+                // 2. Ak je nahraná statická PNG cenovka
-                  </tr>
+                if (p.customBadgePngUrl) {
-                  ${p.showSlovakFlag ? `
+                  return `
-                  <tr>
+                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="${bAlign}" style="${marginStyle} width: ${bWidth}px; padding-top: ${padTop}px; padding-bottom: ${padBottom}px;">
-                      <td align="right" style="line-height: 0; padding: 0;">
+                      <tr>
-                          <img src="${SUPABASE_ASSETS_BASE}vlajka_srdce.png" width="40" alt="SK" style="display: block; margin-top: -26px; margin-right: -10px; padding: 4px; filter: drop-shadow(1px 0 0 #fefefe) drop-shadow(-1px 0 0 #fefefe) drop-shadow(0 1px 0 #fefefe) drop-shadow(0 -1px 0 #fefefe);">
+                          <td align="${bAlign}">
-                      </td>
+                              <img src="${escapeHtml(p.customBadgePngUrl)}" width="${bWidth}" alt="Cenovka" style="display: block; width: 100%; max-width: ${bWidth}px; margin: 0 auto;">
-                  </tr>` : ''}
+                          </td>
-              </table>`}
+                      </tr>
+                  </table>`;
+                }
+
+                // 3. Predvolená COOP cenovka s plnou podporou šírky, zarovnania a odsadenia
+                const mainFontSize = Math.max(28, Math.round(bWidth * 0.54));
+                const subFontSize = Math.max(14, Math.round(bWidth * 0.27));
+
+                return `
+                <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="${bAlign}" style="${marginStyle} width: ${bWidth}px; padding-top: ${padTop}px; padding-bottom: ${padBottom}px;">
+                    <tr>
+                        <td align="${bAlign}">
+                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="background-color: ${badgeHdrBg}; border: 0; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.18); width: ${bWidth}px; overflow: hidden;">
+                                ${badgeCustomTxt ? `
+                                <tr>
+                                    <td bgcolor="${badgeHdrBg}" style="padding: 4px 4px; text-align: center; background-color: ${badgeHdrBg};">
+                                        <span style="font-family: 'Arial Narrow', Arial, sans-serif; font-size: 10px; color: ${badgeHdrColor}; font-weight: 800; text-transform: uppercase;">${escapeHtml(badgeCustomTxt)}</span>
+                                    </td>
+                                </tr>` : (p.discountText ? `
+                                <tr>
+                                    <td style="padding: 2px 4px; text-align: right; background-color: ${badgeHdrBg};">
+                                        <span style="font-family: 'Arial Narrow', Arial, sans-serif; font-size: 9px; color: ${badgeHdrColor}; font-weight: 700; text-transform: lowercase;">${escapeHtml(p.badgeText || 'zľava')}</span>
+                                        <span style="font-family: 'Arial Narrow', Arial, sans-serif; font-size: 20px; color: ${badgeHdrColor}; font-weight: 900; line-height: 1; margin-left: 2px;">${escapeHtml(p.discountText)}</span>
+                                    </td>
+                                </tr>` : '')}
+                                <tr>
+                                    <td class="force-text-white" bgcolor="${badgePrcBg}" style="background-color: ${badgePrcBg}; padding: 4px 2px 2px 2px; font-family: 'Arial Narrow', Arial, sans-serif; color: ${badgePrcColor}; font-weight: 900; line-height: 1; text-align: center; border-radius: 0 0 12px 12px;">
+                                        <span style="font-size: ${mainFontSize}px;">${escapeHtml(p.priceMain)}</span><sup style="font-size: ${subFontSize}px; vertical-align: top; line-height: 1.2;">${escapeHtml(p.priceSub)}</sup>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    ${p.showSlovakFlag ? `
+                    <tr>
+                        <td align="right" style="line-height: 0; padding: 0;">
+                            <img src="${SUPABASE_ASSETS_BASE}vlajka_srdce.png" width="40" alt="SK" style="display: block; margin-top: -26px; margin-right: -10px; padding: 4px; filter: drop-shadow(1px 0 0 #fefefe) drop-shadow(-1px 0 0 #fefefe) drop-shadow(0 1px 0 #fefefe) drop-shadow(0 -1px 0 #fefefe);">
+                        </td>
+                    </tr>` : ''}
+                </table>`;
+              })()}
               ${p.unitPrice ? `<div style="font-size: 9px; color: #666666; margin-top: 4px; font-weight: 500; font-family: Arial, sans-serif;">${escapeHtml(p.unitPrice)}</div>` : ''}
           </td>
       </tr>

src/types/newsletter.ts

@@ -26,6 +26,11 @@ export interface ProductItem {
   discountText: string;  // napr. "-23%" alebo "23%"
   badgeText: string;     // napr. "AKCIA" alebo "SUPER CENA"
   badgeId?: string;      // priradená cenovka z databázy
+  badgeCustomTemplate?: BadgeTemplate; // Uložená dynamická šablóna cenovky (bez fixnej ceny)
+  badgeWidth?: number;   // Nastaviteľná šírka/veľkosť cenovky v px (napr. 70 až 180)
+  badgeAlign?: 'left' | 'center' | 'right'; // Zarovnanie cenovky (vľavo, stred, vpravo)
+  badgePaddingTop?: number;    // Odsadenie zhora v px
+  badgePaddingBottom?: number; // Odsadenie zdola v px
   validityOverride?: string; // lokálny override napr. "2. 5. – 15. 5."
   stores: {
     potraviny: boolean;
@@ -34,7 +39,7 @@ export interface ProductItem {
   };
   cardBgColor?: string;  // HEX napr. "#feeaea" (fantasticky), "#fef0c7" (domace), "#dcb085" (grill)
   showSlovakFlag?: boolean;
-  customBadgePngUrl?: string; // Vyrenderovaná vlastná PNG cenovka z editora
+  customBadgePngUrl?: string; // Voliteľná statická PNG cenovka
 }
 
 export interface AnnouncementModuleData {
@@ -160,4 +165,8 @@ export interface BadgeTemplate {
   svgRaw?: string;
   layersConfig: BadgeLayer[];
   previewImageUrl?: string;
+  width?: number; // Šírka cenovky v px (napr. 70 až 180)
+  align?: 'left' | 'center' | 'right'; // Zarovnanie (vľavo, stred, vpravo)
+  paddingTop?: number;
+  paddingBottom?: number;
 }