Jakub_Hostacny/Coop-NL
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: adjustable superscript index, loyalty badges, centered unit price, global badge apply, brevo url fix

Browse Source
This commit is contained in:
Jakub_Hostacny committed 2026-09-24 12:33:39 +02:00
1 parent 245e3f8471
commit 4e4e5e5af3
10 files changed
+539 -290
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/api/brevo/export/route.ts
+4 -4
View File
@@ -63,8 +63,8 @@ export async function POST(req: NextRequest) {
success: true,
updated: true,
campaignId: Number(existingCampaignId),
brevoUrl: `https://app.brevo.com/campaigns/email/edit/${existingCampaignId}`,
brevoListingUrl: 'https://app.brevo.com/campaigns/listing',
brevoUrl: 'https://app.brevo.com/campaigns',
brevoListingUrl: 'https://app.brevo.com/campaigns',
message: 'Kampaň bola úspešne aktualizovaná v Brevo!'
});
}
@@ -113,8 +113,8 @@ export async function POST(req: NextRequest) {
success: true,
updated: false,
campaignId: data.id,
brevoUrl: `https://app.brevo.com/campaigns/email/edit/${data.id}`,
brevoListingUrl: 'https://app.brevo.com/campaigns/listing',
brevoUrl: 'https://app.brevo.com/campaigns',
brevoListingUrl: 'https://app.brevo.com/campaigns',
message: 'Kampaň bola úspešne vytvorená v Brevo!'
});
} catch (error: any) {
src/app/api/brevo/verify/route.ts
+2 -2
View File
@@ -51,8 +51,8 @@ export async function GET(req: NextRequest) {
name: data.name,
status: data.status,
subject: data.subject,
brevoUrl: `https://app.brevo.com/campaigns/email/edit/${data.id}`,
brevoListingUrl: 'https://app.brevo.com/campaigns/listing'
brevoUrl: 'https://app.brevo.com/campaigns',
brevoListingUrl: 'https://app.brevo.com/campaigns'
});
} catch (err: any) {
console.error('Brevo verify error:', err);
src/app/page.tsx
+37 -8
View File
@@ -144,7 +144,7 @@ export default function Home() {
modules: enforceAnchors(dbItem.data.modules)
});
if (dbItem.brevo_campaign_id) {
setBrevoUrl(`https://app.brevo.com/campaigns/email/edit/${dbItem.brevo_campaign_id}`);
setBrevoUrl('https://app.brevo.com/campaigns');
}
}
}
@@ -522,14 +522,14 @@ export default function Home() {
};
// Vybraný produkt pre editor cenoviek
let targetProduct: ProductItem | null = null;
let targetProduct: any = null;
if (targetProductIdForBadge && selectedModule?.data?.products) {
targetProduct = selectedModule.data.products.find((p: any) => p.id === targetProductIdForBadge) || null;
}
const handleApplyBadgeToProduct = (badge: BadgeTemplate, renderedPngUrl?: string) => {
if (!targetProductIdForBadge || !selectedModule) return;
const updatedProducts = (selectedModule.data.products || []).map((p: ProductItem) => {
const updatedProducts = (selectedModule.data.products || []).map((p: any) => {
if (p.id === targetProductIdForBadge) {
return {
...p,
@@ -561,6 +561,34 @@ export default function Home() {
});
};
// Hromadná aplikácia cenovky na všetky produkty v celej kampani (všetky sekcie + vernostné zľavy)
const handleApplyBadgeToAll = (badge: BadgeTemplate) => {
setCampaign((prev) => ({
...prev,
modules: prev.modules.map((m) => {
if (m.type === 'products_grid' || m.type === 'loyalty_club') {
return {
...m,
data: {
...m.data,
products: (m.data.products || []).map((prod: any) => ({
...prod,
badgeId: badge.id,
badgeCustomTemplate: badge,
badgeWidth: badge.width ?? prod.badgeWidth ?? 110,
badgeAlign: badge.align ?? prod.badgeAlign ?? 'center',
badgePaddingTop: badge.paddingTop ?? prod.badgePaddingTop ?? 4,
badgePaddingBottom: badge.paddingBottom ?? prod.badgePaddingBottom ?? 4,
customBadgePngUrl: undefined
}))
}
};
}
return m;
})
}));
};
const topCount = campaign.modules.filter((m) => isTopModule(m)).length;
const firstBottomIdx = campaign.modules.findIndex((m) => isBottomModule(m));
@@ -722,6 +750,7 @@ export default function Home() {
<ConfigPanel
module={selectedModule}
onUpdateModule={handleUpdateModule}
onApplyBadgeToAll={handleApplyBadgeToAll}
availableBadges={availableBadges}
onOpenBadgeManager={(pId) => {
setTargetProductIdForBadge(pId);
@@ -744,10 +773,10 @@ export default function Home() {
isOpen={isBadgeEditorOpen}
onClose={() => setIsBadgeEditorOpen(false)}
onSelectBadge={handleApplyBadgeToProduct}
currentDiscount={targetProduct?.discountText || '25%'}
currentPriceMain={targetProduct?.priceMain || '1'}
currentPriceSub={targetProduct?.priceSub || '99'}
currentUnitPrice={targetProduct?.unitPrice || '1kg = 4,91 €'}
currentDiscount={targetProduct?.discountText || targetProduct?.cardDiscount || '25%'}
currentPriceMain={targetProduct?.priceMain || targetProduct?.cardPriceMain || '1'}
currentPriceSub={targetProduct?.priceSub || targetProduct?.cardPriceSub || '99'}
currentUnitPrice={targetProduct?.unitPrice || targetProduct?.cardUnitPrice || '1kg = 4,91 €'}
/>
{/* Modál Moje newslettre (Ukladanie, duplikácia, vytváranie a prepínanie) */}
@@ -759,7 +788,7 @@ export default function Home() {
setCampaign({ ...selected, modules: enforceAnchors(selected.modules) });
setSelectedModuleId(selected.modules[1]?.id || selected.modules[0]?.id || null);
if (selected.brevoCampaignId) {
setBrevoUrl(`https://app.brevo.com/campaigns/email/edit/${selected.brevoCampaignId}`);
setBrevoUrl('https://app.brevo.com/campaigns');
} else {
setBrevoUrl(null);
}
src/components/editor/BadgeEditorModal.tsx
+99 -17
View File
@@ -226,20 +226,11 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
}
} catch (e) {}
// Doplnenie predpripravených dizajnových šablón (DEFAULT_BADGE_TEMPLATES)
const allBadges = [...loaded];
const existingIds = new Set(allBadges.map((b) => b.id));
for (const preset of DEFAULT_BADGE_TEMPLATES) {
if (!existingIds.has(preset.id)) {
allBadges.push(preset);
}
}
setBadges(allBadges);
if (!activeBadge && allBadges.length > 0) {
setActiveBadge(allBadges[0]);
if (allBadges[0].layersConfig?.[0]) {
setSelectedLayerId(allBadges[0].layersConfig[0].id);
setBadges(loaded);
if (!activeBadge && loaded.length > 0) {
setActiveBadge(loaded[0]);
if (loaded[0].layersConfig?.[0]) {
setSelectedLayerId(loaded[0].layersConfig[0].id);
}
}
};
@@ -452,15 +443,28 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
// Vykreslenie vrstvy v React náhľade s centami ako horný index (sup) a BEZ znaku €
const renderLayerVisualContent = (layer: BadgeLayer) => {
const raw = layer.text || '';
const baseFontSize = layer.fontSize || 16;
const subFontSize = layer.indexFontSize ? `${layer.indexFontSize}px` : `${Math.max(10, Math.round(baseFontSize * 0.55))}px`;
const subY = layer.indexOffsetY !== undefined ? `${layer.indexOffsetY}px` : '-10px';
const subX = layer.indexOffsetX !== undefined ? `${layer.indexOffsetX}px` : '2px';
if (raw.includes('{cena}')) {
const parts = raw.split('{cena}');
return (
<span>
{parts[0]}
<span>{currentPriceMain}</span>
<sup style={{ fontSize: '0.55em', verticalAlign: 'top', lineHeight: 1.1, marginLeft: '1px' }}>
<span
style={{
display: 'inline-block',
fontSize: subFontSize,
transform: `translate(${subX}, ${subY})`,
fontWeight: layer.fontWeight || '700',
lineHeight: 1
}}
>
{currentPriceSub}
</sup>
</span>
{parts[1]}
</span>
);
@@ -471,7 +475,17 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
return (
<span>
{parts[0]}
<sup style={{ fontSize: '0.55em', verticalAlign: 'top', lineHeight: 1.1 }}>{currentPriceSub}</sup>
<span
style={{
display: 'inline-block',
fontSize: subFontSize,
transform: `translate(${subX}, ${subY})`,
fontWeight: layer.fontWeight || '700',
lineHeight: 1
}}
>
{currentPriceSub}
</span>
{parts[1]}
</span>
);
@@ -1101,6 +1115,74 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
</div>
</div>
{/* Nastavenie veľkosti a pozície horného indexu (centov) */}
{(activeLayer.text?.includes('{cena}') || activeLayer.text?.includes('{centy}')) && (
<div className="pt-2.5 pb-1 border-t border-blue-200/80 bg-blue-50/70 p-3 rounded-xl border border-blue-100 space-y-2.5">
<div className="flex items-center justify-between">
<span className="text-[11px] font-bold text-blue-900">
Nastavenie horného indexu (Centov)
</span>
<span className="text-[10px] text-blue-700 bg-blue-100 px-1.5 py-0.5 rounded font-mono font-bold">
{activeLayer.indexFontSize ?? Math.max(10, Math.round((activeLayer.fontSize || 16) * 0.55))}px
</span>
</div>
{/* Veľkosť indexu */}
<div>
<div className="flex justify-between items-center text-[10px] text-gray-600 mb-0.5">
<span>Veľkosť písma indexu</span>
<span className="font-bold text-gray-800">
{activeLayer.indexFontSize ?? Math.max(10, Math.round((activeLayer.fontSize || 16) * 0.55))} px
</span>
</div>
<input
type="range"
min="8"
max="40"
value={activeLayer.indexFontSize ?? Math.max(10, Math.round((activeLayer.fontSize || 16) * 0.55))}
onChange={(e) => updateActiveLayer({ indexFontSize: Number(e.target.value) })}
className="w-full accent-blue-600"
/>
</div>
{/* Vertikálny posun (Hore / Dole) */}
<div>
<div className="flex justify-between items-center text-[10px] text-gray-600 mb-0.5">
<span>Vertikálna pozícia (Posun Hore / Dole)</span>
<span className="font-bold text-gray-800">
{activeLayer.indexOffsetY ?? -10} px
</span>
</div>
<input
type="range"
min="-30"
max="20"
value={activeLayer.indexOffsetY ?? -10}
onChange={(e) => updateActiveLayer({ indexOffsetY: Number(e.target.value) })}
className="w-full accent-blue-600"
/>
</div>
{/* Horizontálna medzera (Vľavo / Vpravo) */}
<div>
<div className="flex justify-between items-center text-[10px] text-gray-600 mb-0.5">
<span>Horizontálna medzera (Vľavo / Vpravo)</span>
<span className="font-bold text-gray-800">
{activeLayer.indexOffsetX ?? 2} px
</span>
</div>
<input
type="range"
min="-10"
max="25"
value={activeLayer.indexOffsetX ?? 2}
onChange={(e) => updateActiveLayer({ indexOffsetX: Number(e.target.value) })}
className="w-full accent-blue-600"
/>
</div>
</div>
)}
<div className="pt-1 flex justify-between items-center">
<button
onClick={() => removeLayer(activeLayer.id)}
src/components/editor/ConfigPanel.tsx
+263 -23
View File
@@ -2,13 +2,14 @@
import React from 'react';
import { NewsletterModule, ProductItem, BadgeTemplate } from '@/types/newsletter';
import { Plus, Trash2, Image as ImageIcon, Tag, Store } from 'lucide-react';
import { Plus, Trash2, Image as ImageIcon, Tag, Store, Globe } from 'lucide-react';
import { SUPABASE_ASSETS_BASE } from '@/lib/defaultCampaign';
import { ImageUploadInput } from './ImageUploadInput';
interface ConfigPanelProps {
module: NewsletterModule | null;
onUpdateModule: (updated: NewsletterModule) => void;
onApplyBadgeToAll?: (badge: BadgeTemplate) => void;
onOpenBadgeManager?: (productId: string) => void;
onOpenImport?: () => void;
availableBadges?: BadgeTemplate[];
@@ -17,6 +18,7 @@ interface ConfigPanelProps {
export const ConfigPanel: React.FC<ConfigPanelProps> = ({
module,
onUpdateModule,
onApplyBadgeToAll,
onOpenBadgeManager,
onOpenImport,
availableBadges = []
@@ -567,29 +569,51 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
</select>
</div>
{/* Tlačidlo: Aplikovať túto cenovku na všetky produkty v sekcii */}
{/* Tlačidlá aplikácie cenovky */}
{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>
<div className="space-y-1.5">
<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ť pre všetky produkty v tejto sekcii
</button>
{onApplyBadgeToAll && (
<button
type="button"
onClick={() => {
if (confirm(`Naozaj chcete aplikovať šablónu "${p.badgeCustomTemplate?.name}" na VŠETKY produkty v celom newsletteri (vrátane vernostných zliav)?`)) {
onApplyBadgeToAll({
...p.badgeCustomTemplate!,
width: p.badgeWidth || p.badgeCustomTemplate?.width || 110,
align: p.badgeAlign || p.badgeCustomTemplate?.align || 'center',
paddingTop: p.badgePaddingTop ?? p.badgeCustomTemplate?.paddingTop ?? 4,
paddingBottom: p.badgePaddingBottom ?? p.badgeCustomTemplate?.paddingBottom ?? 4
});
}
}}
className="w-full py-1.5 text-[11px] font-bold text-red-700 bg-red-50 hover:bg-red-100 border border-red-200 rounded-lg transition-colors text-center flex items-center justify-center gap-1.5"
>
<Globe className="w-3 h-3 text-red-600" />
<span>Použiť v celom newsletteri</span>
</button>
)}
</div>
)}
{/* Rýchle ovládanie veľkosti (Width), zarovnania a paddingu */}
@@ -1005,6 +1029,222 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
Zobraziť slovenskú vlajku / srdce
</label>
</div>
{/* Grafická cenovka a šablóna pre vernostné produkty */}
<div className="pt-2 border-t border-gray-200 space-y-2.5">
<div className="flex items-center justify-between">
<div className="flex items-center gap-1.5">
<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 š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 || 'default_loyalty'}
onChange={(e) => {
const val = e.target.value;
const products = [...module.data.products];
if (val === 'default_loyalty') {
products[pIdx].badgeCustomTemplate = 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 ?? 120;
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;
}
}
updateData({ products });
}}
className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white font-medium"
>
<option value="default_loyalty">Predvolený Dual sticker (Bez karty / S kartou)</option>
{(availableBadges || []).map((b) => (
<option key={b.id} value={b.id}>
{b.name}
</option>
))}
</select>
</div>
{/* Tlačidlá aplikácie cenovky */}
{p.badgeCustomTemplate && (
<div className="space-y-1.5">
<button
type="button"
onClick={() => {
if (confirm(`Naozaj chcete aplikovať šablónu "${p.badgeCustomTemplate?.name}" na všetky vernostné produkty?`)) {
const products = (module.data.products || []).map((prod: any) => ({
...prod,
badgeCustomTemplate: p.badgeCustomTemplate,
badgeId: p.badgeCustomTemplate?.id,
badgeWidth: p.badgeWidth || p.badgeCustomTemplate?.width || 120,
badgeAlign: p.badgeAlign || p.badgeCustomTemplate?.align || 'center',
badgePaddingTop: p.badgePaddingTop ?? p.badgeCustomTemplate?.paddingTop ?? 4,
badgePaddingBottom: p.badgePaddingBottom ?? p.badgeCustomTemplate?.paddingBottom ?? 4
}));
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ť pre všetky produkty v tejto sekcii
</button>
{onApplyBadgeToAll && (
<button
type="button"
onClick={() => {
if (confirm(`Naozaj chcete aplikovať šablónu "${p.badgeCustomTemplate?.name}" na VŠETKY produkty v celom newsletteri?`)) {
onApplyBadgeToAll({
...p.badgeCustomTemplate!,
width: p.badgeWidth || p.badgeCustomTemplate?.width || 120,
align: p.badgeAlign || p.badgeCustomTemplate?.align || 'center',
paddingTop: p.badgePaddingTop ?? p.badgeCustomTemplate?.paddingTop ?? 4,
paddingBottom: p.badgePaddingBottom ?? p.badgeCustomTemplate?.paddingBottom ?? 4
});
}
}}
className="w-full py-1.5 text-[11px] font-bold text-red-700 bg-red-50 hover:bg-red-100 border border-red-200 rounded-lg transition-colors text-center flex items-center justify-center gap-1.5"
>
<Globe className="w-3 h-3 text-red-600" />
<span>Použiť v celom newsletteri</span>
</button>
)}
</div>
)}
{/* Rýchle ovládanie veľkosti (Width), zarovnania a paddingu pre vernostnú cenovku */}
{p.badgeCustomTemplate && (
<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 ? 120 : 140)} px
</span>
</div>
<input
type="range"
min="80"
max="180"
step="2"
value={p.badgeWidth || (p.badgeCustomTemplate ? 120 : 140)}
onChange={(e) => {
const products = [...module.data.products];
products[pIdx].badgeWidth = Number(e.target.value);
updateData({ products });
}}
className="w-full accent-red-600 cursor-pointer"
/>
</div>
{/* Zarovnanie */}
<div>
<span className="text-[10px] text-gray-600 font-semibold block mb-1">
Zarovnanie cenovky
</span>
<div className="grid grid-cols-3 gap-1 bg-gray-200/70 p-0.5 rounded-lg text-xs font-semibold 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>
)}
</div>
</div>
))}
</div>
src/components/editor/SavedCampaignsModal.tsx
+1 -1
View File
@@ -293,7 +293,7 @@ export const SavedCampaignsModal: React.FC<SavedCampaignsModalProps> = ({
</span>
{camp.brevo_campaign_id && (
<a
href={`https://app.brevo.com/campaigns/email/edit/${camp.brevo_campaign_id}`}
href="https://app.brevo.com/campaigns"
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline flex items-center gap-1 font-semibold"
src/components/editor/TopBar.tsx
+3 -14
View File
@@ -214,14 +214,14 @@ export const TopBar: React.FC<TopBarProps> = ({
<div className="flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 p-1 rounded-xl">
{/* Odkaz na úpravu v Brevo */}
<a
href={`https://app.brevo.com/campaigns/email/edit/${campaign.brevoCampaignId}`}
href="https://app.brevo.com/campaigns"
target="_blank"
rel="noreferrer"
className="flex items-center gap-1 text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 px-3 py-1.2 rounded-lg transition-all shadow-xs"
title={`Kampaň #${campaign.brevoCampaignId} existuje v Brevo (${brevoCampaignStatus || 'draft'}). Kliknutím ju otvoríte v editore Brevo.`}
title={`Kampaň #${campaign.brevoCampaignId} je v Brevo (${brevoCampaignStatus || 'draft'}). Kliknutím otvoríte zoznam kampaní v Brevo.`}
>
<ExternalLink className="w-3.5 h-3.5" />
<span>Upraviť v Brevo</span>
<span>Otvoriť v Brevo</span>
</a>
{/* Tlačidlo na aktualizáciu existujúcej kampane */}
@@ -244,17 +244,6 @@ export const TopBar: React.FC<TopBarProps> = ({
>
<RefreshCw className="w-3 h-3" />
</button>
{/* Odkaz na celkový zoznam kampaní */}
<a
href={brevoListingUrl || 'https://app.brevo.com/campaigns/listing'}
target="_blank"
rel="noreferrer"
className="text-[10px] font-bold text-emerald-700 hover:underline px-1.5 hidden md:inline"
title="Prehľad všetkých kampaní v Brevo"
>
Zoznam
</a>
</div>
) : (
/* Kampaň v Brevo nie je overená / neexistuje: Zobrazujeme tlačidlo na prvotné odoslanie */
src/lib/badgeUtils.ts
+13 -158
View File
@@ -1,159 +1,7 @@
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'
}
]
}
];
// Vymazané všetky preddefinované šablóny — v systéme sú výhradne vlastné cenovky vytvorené používateľom
export const DEFAULT_BADGE_TEMPLATES: BadgeTemplate[] = [];
export interface BadgeProductData {
priceMain: string;
@@ -224,7 +72,10 @@ export function renderCleanBadgeSvg(
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 subFontSize = layer.indexFontSize || Math.max(10, Math.round(fontSize * 0.55));
const subDy = layer.indexOffsetY !== undefined ? `${layer.indexOffsetY}px` : '-0.45em';
const subDx = layer.indexOffsetX !== undefined ? `${layer.indexOffsetX}px` : '1px';
const revertDy = layer.indexOffsetY !== undefined ? `${-layer.indexOffsetY}px` : '0.45em';
const fontWeight = layer.fontWeight || '700';
const fill = layer.fill || '#ffffff';
const fontFamily = layer.fontFamily
@@ -235,17 +86,21 @@ export function renderCleanBadgeSvg(
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
// Formátovanie textu: ak obsahuje {cena} alebo {centy}, 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>`;
contentSvg = `${before}${escapeXml(pMain)}<tspan font-size="${subFontSize}px" dx="${subDx}" dy="${subDy}" font-weight="${fontWeight}">${escapeXml(pSub)}</tspan>${after ? `<tspan dy="${revertDy}">${after}</tspan>` : ''}`;
} else if (rawText.includes('{centy}')) {
const parts = rawText.split('{centy}');
const before = escapeXml(parts[0] || '');
const after = escapeXml(parts[1] || '');
contentSvg = `${before}<tspan font-size="${subFontSize}px" dx="${subDx}" dy="${subDy}" font-weight="${fontWeight}">${escapeXml(pSub)}</tspan>${after ? `<tspan dy="${revertDy}">${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, '€');
src/lib/emailRenderer.ts
+113 -63
View File
@@ -620,7 +620,7 @@ function renderExactProductCard(
</td>
</tr>
<tr height="1">
<td style="padding: 0 8px 12px 8px; text-align: center;" valign="bottom">
<td style="padding: 0 8px 4px 8px; text-align: center;" valign="bottom">
${(() => {
const bWidth = p.badgeWidth || (p.badgeCustomTemplate ? (p.badgeCustomTemplate.width || 110) : 95);
const bAlign = p.badgeAlign || (p.badgeCustomTemplate ? (p.badgeCustomTemplate.align || 'center') : 'center');
@@ -701,7 +701,11 @@ function renderExactProductCard(
</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>
<tr>
<td align="center" style="padding: 2px 8px 12px 8px; text-align: center;">
${p.unitPrice ? `<div style="font-size: 9px; color: #666666; font-weight: 500; font-family: Arial, sans-serif; text-align: center;">${escapeHtml(p.unitPrice)}</div>` : '<div style="font-size: 9px; line-height: 9px; height: 9px;">&nbsp;</div>'}
</td>
</tr>
</table>`;
@@ -739,69 +743,115 @@ function renderExactLoyaltyCard(p: any, validity: string): string {
</td>
</tr>
<tr height="1">
<td style="padding: 0 8px 12px 8px; text-align: center;" valign="bottom">
<!-- Dual Sticker Block (Bez karty / S kartou) 1:1 -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto; width: 140px;">
<tr>
<td colspan="2">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="width: 140px; margin: 0 auto;">
<tr>
<!-- Bez karty -->
<td width="42%" valign="bottom" style="padding-right: 0;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #fefefe; border: 0; border-radius: 10px 0 0 10px; box-shadow: -2px 4px 8px rgba(0,0,0,0.12); overflow: hidden;">
<tr>
<td class="force-bg-red" bgcolor="#e2001a" style="background-color: #e2001a; padding: 4px 2px; text-align: center;">
<div style="font-size: 6px; color: #fefefe; font-weight: 700; text-transform: uppercase; line-height: 1; margin-bottom: 1px;">Bez karty</div>
<div style="font-family: 'Arial Narrow', Arial, sans-serif; font-size: 8px; color: #fefefe; font-weight: 900; line-height: 1;">zľava ${escapeHtml(p.noCardDiscount)}</div>
</td>
</tr>
<tr>
<td style="padding: 2px; text-align: center; color: #000000; font-family: 'Arial Narrow', Arial, sans-serif; font-weight: 900; line-height: 1;">
<span style="font-size: 20px;">${escapeHtml(p.noCardPriceMain)}</span><sup style="font-size: 10px; vertical-align: top; line-height: 1.2;">${escapeHtml(p.noCardPriceSub)}</sup>
</td>
</tr>
</table>
</td>
<!-- S kartou -->
<td width="58%" valign="top">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #fefefe; border: 0; border-radius: 0 10px 10px 0; box-shadow: 4px 4px 12px rgba(0,0,0,0.15); overflow: hidden;">
<tr>
<td style="background-color: #fefefe; padding: 5px 4px 2px 4px; text-align: right;">
<div style="font-size: 7px; color: #e2001a; font-weight: 800; text-transform: uppercase; line-height: 1; text-align: center; margin-bottom: 1px;">S kartou</div>
<div style="text-align: right; line-height: 1;">
<span style="font-family: 'Arial Narrow', Arial, sans-serif; font-size: 8px; color: #000000; font-weight: 700; text-transform: lowercase;">zľava</span>
<span style="font-family: 'Arial Narrow', Arial, sans-serif; font-size: 18px; color: #000000; font-weight: 900; margin-left: 1px;">${escapeHtml(p.cardDiscount)}</span>
</div>
</td>
</tr>
<tr>
<td class="force-bg-red force-text-white" bgcolor="#e2001a" style="background-color: #e2001a; padding: 3px 2px; text-align: center; color: #fefefe; font-family: 'Arial Narrow', Arial, sans-serif; font-weight: 900; line-height: 1; border-radius: 0 0 10px 0;">
<span style="font-size: 48px;">${escapeHtml(p.cardPriceMain)}</span><sup style="font-size: 24px; vertical-align: top; line-height: 1.2;">${escapeHtml(p.cardPriceSub)}</sup>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
${p.showSlovakFlag ? `
<tr>
<td colspan="2" 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>` : ''}
<tr>
<td width="42%" align="center" style="padding-top: 6px;">
<div style="font-size: 8px; color: #666666; opacity: 0.7; font-weight: 500; font-family: Arial, sans-serif;">${escapeHtml(p.noCardUnitPrice)}</div>
</td>
<td width="58%" align="center" style="padding-top: 6px;">
<div style="font-size: 9px; color: #e2001a; font-weight: 800; font-family: Arial, sans-serif;">${escapeHtml(p.cardUnitPrice)}</div>
</td>
</tr>
</table>
<td style="padding: 0 8px ${p.badgeCustomTemplate ? '4px' : '12px'} 8px; text-align: center;" valign="bottom">
${(() => {
// 1. Ak má vernostný produkt vlastnú dynamickú šablónu cenovky
if (p.badgeCustomTemplate) {
const bWidth = p.badgeWidth || p.badgeCustomTemplate.width || 120;
const bAlign = p.badgeAlign || p.badgeCustomTemplate.align || 'center';
const padTop = p.badgePaddingTop ?? (p.badgeCustomTemplate.paddingTop ?? 0);
const padBottom = p.badgePaddingBottom ?? (p.badgeCustomTemplate.paddingBottom ?? 0);
let marginStyle = 'margin: 0 auto;';
if (bAlign === 'left') {
marginStyle = 'margin: 0 auto 0 0; margin-right: auto; margin-left: 0;';
} else if (bAlign === 'right') {
marginStyle = 'margin: 0 0 0 auto; margin-left: auto; margin-right: 0;';
}
const loyaltyProductData = {
priceMain: p.cardPriceMain || p.priceMain || '0',
priceSub: p.cardPriceSub || p.priceSub || '00',
discountText: p.cardDiscount || p.discountText || '',
unitPrice: p.cardUnitPrice || p.unitPrice || ''
};
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}">
${renderCleanBadgeSvg(p.badgeCustomTemplate, loyaltyProductData, bWidth)}
</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>`;
}
// 2. Predvolený Dual Sticker Block (Bez karty / S kartou) 1:1
return `
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto; width: 140px;">
<tr>
<td colspan="2">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="width: 140px; margin: 0 auto;">
<tr>
<!-- Bez karty -->
<td width="42%" valign="bottom" style="padding-right: 0;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #fefefe; border: 0; border-radius: 10px 0 0 10px; box-shadow: -2px 4px 8px rgba(0,0,0,0.12); overflow: hidden;">
<tr>
<td class="force-bg-red" bgcolor="#e2001a" style="background-color: #e2001a; padding: 4px 2px; text-align: center;">
<div style="font-size: 6px; color: #fefefe; font-weight: 700; text-transform: uppercase; line-height: 1; margin-bottom: 1px;">Bez karty</div>
<div style="font-family: 'Arial Narrow', Arial, sans-serif; font-size: 8px; color: #fefefe; font-weight: 900; line-height: 1;">zľava ${escapeHtml(p.noCardDiscount)}</div>
</td>
</tr>
<tr>
<td style="padding: 2px; text-align: center; color: #000000; font-family: 'Arial Narrow', Arial, sans-serif; font-weight: 900; line-height: 1;">
<span style="font-size: 20px;">${escapeHtml(p.noCardPriceMain)}</span><sup style="font-size: 10px; vertical-align: top; line-height: 1.2;">${escapeHtml(p.noCardPriceSub)}</sup>
</td>
</tr>
</table>
</td>
<!-- S kartou -->
<td width="58%" valign="top">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #fefefe; border: 0; border-radius: 0 10px 10px 0; box-shadow: 4px 4px 12px rgba(0,0,0,0.15); overflow: hidden;">
<tr>
<td style="background-color: #fefefe; padding: 5px 4px 2px 4px; text-align: right;">
<div style="font-size: 7px; color: #e2001a; font-weight: 800; text-transform: uppercase; line-height: 1; text-align: center; margin-bottom: 1px;">S kartou</div>
<div style="text-align: right; line-height: 1;">
<span style="font-family: 'Arial Narrow', Arial, sans-serif; font-size: 8px; color: #000000; font-weight: 700; text-transform: lowercase;">zľava</span>
<span style="font-family: 'Arial Narrow', Arial, sans-serif; font-size: 18px; color: #000000; font-weight: 900; margin-left: 1px;">${escapeHtml(p.cardDiscount)}</span>
</div>
</td>
</tr>
<tr>
<td class="force-bg-red force-text-white" bgcolor="#e2001a" style="background-color: #e2001a; padding: 3px 2px; text-align: center; color: #fefefe; font-family: 'Arial Narrow', Arial, sans-serif; font-weight: 900; line-height: 1; border-radius: 0 0 10px 0;">
<span style="font-size: 48px;">${escapeHtml(p.cardPriceMain)}</span><sup style="font-size: 24px; vertical-align: top; line-height: 1.2;">${escapeHtml(p.cardPriceSub)}</sup>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
${p.showSlovakFlag ? `
<tr>
<td colspan="2" 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>` : ''}
<tr>
<td width="42%" align="center" style="padding-top: 6px;">
<div style="font-size: 8px; color: #666666; opacity: 0.7; font-weight: 500; font-family: Arial, sans-serif;">${escapeHtml(p.noCardUnitPrice)}</div>
</td>
<td width="58%" align="center" style="padding-top: 6px;">
<div style="font-size: 9px; color: #e2001a; font-weight: 800; font-family: Arial, sans-serif;">${escapeHtml(p.cardUnitPrice)}</div>
</td>
</tr>
</table>`;
})()}
</td>
</tr>
${p.badgeCustomTemplate ? `
<tr>
<td align="center" style="padding: 2px 8px 12px 8px; text-align: center;">
${p.cardUnitPrice || p.unitPrice ? `<div style="font-size: 9px; color: #666666; font-weight: 500; font-family: Arial, sans-serif; text-align: center;">${escapeHtml(p.cardUnitPrice || p.unitPrice)}</div>` : '<div style="font-size: 9px; line-height: 9px; height: 9px;">&nbsp;</div>'}
</td>
</tr>` : ''}
</table>`;
}
src/types/newsletter.ts
+4
View File
@@ -156,6 +156,10 @@ export interface BadgeLayer {
fontUrl?: string;
fill: string;
align?: 'left' | 'center' | 'right';
// Nastavenia horného indexu (centov)
indexFontSize?: number; // Veľkosť horného indexu v px
indexOffsetY?: number; // Vertikálny posun horného indexu v px (posun hore / dole)
indexOffsetX?: number; // Horizontálny posun horného indexu v px (medzera)
}
export interface BadgeTemplate {