SMPT, SMS, Rejestracja + GUS
This commit is contained in:
+569
-149
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,211 @@
|
||||
// Strony i komponenty procesu konta: aktywacja przez link, ustawienie nowego hasla, okno OTP telefonu.
|
||||
import { useEffect, useRef, useState, type FormEvent, type ReactNode } from 'react';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { ROUTES } from './routes';
|
||||
import { useAuth } from './auth';
|
||||
|
||||
const errMsg = (e: unknown) => (e instanceof Error ? e.message : 'Wystąpił błąd. Spróbuj ponownie.');
|
||||
|
||||
function AuthStatusCard({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<section className="auth-status-page">
|
||||
<div className="auth-status-card">
|
||||
<Link to={ROUTES.home} className="auth-status-logo">Polska <span>Lokalnie</span></Link>
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// /aktywacja/:token - potwierdzenie adresu e-mail z linku.
|
||||
export function ActivationPage() {
|
||||
const { token } = useParams<{ token: string }>();
|
||||
const { activateAccount } = useAuth();
|
||||
const [state, setState] = useState<'loading' | 'ok' | 'error'>('loading');
|
||||
const [message, setMessage] = useState('');
|
||||
const ran = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (ran.current) {
|
||||
return;
|
||||
}
|
||||
ran.current = true;
|
||||
(async () => {
|
||||
try {
|
||||
await activateAccount(token ?? '');
|
||||
setState('ok');
|
||||
} catch (e) {
|
||||
setState('error');
|
||||
setMessage(errMsg(e));
|
||||
}
|
||||
})();
|
||||
}, [token, activateAccount]);
|
||||
|
||||
return (
|
||||
<AuthStatusCard>
|
||||
{state === 'loading' && <p className="auth-status-lead">Aktywujemy Twoje konto...</p>}
|
||||
{state === 'ok' && (
|
||||
<>
|
||||
<div className="auth-status-icon ok">✓</div>
|
||||
<h1>Konto zostało aktywowane!</h1>
|
||||
<p className="auth-status-lead">Możesz się teraz zalogować i korzystać ze wszystkich funkcji serwisu.</p>
|
||||
<Link className="auth-status-btn" to={ROUTES.login}>Przejdź do logowania</Link>
|
||||
</>
|
||||
)}
|
||||
{state === 'error' && (
|
||||
<>
|
||||
<div className="auth-status-icon err">!</div>
|
||||
<h1>Nie udało się aktywować konta</h1>
|
||||
<p className="auth-status-lead">{message || 'Link aktywacyjny jest nieprawidłowy lub wygasł.'}</p>
|
||||
<p className="auth-status-hint">Zaloguj się i poproś o ponowne wysłanie linku aktywacyjnego.</p>
|
||||
<Link className="auth-status-btn" to={ROUTES.login}>Przejdź do logowania</Link>
|
||||
</>
|
||||
)}
|
||||
</AuthStatusCard>
|
||||
);
|
||||
}
|
||||
|
||||
// /reset-hasla/:token - ustawienie nowego hasla.
|
||||
export function PasswordResetPage() {
|
||||
const { token } = useParams<{ token: string }>();
|
||||
const { resetPassword } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirm, setConfirm] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [done, setDone] = useState(false);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const submit = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
if (password.length < 8) {
|
||||
setError('Hasło musi mieć co najmniej 8 znaków.');
|
||||
return;
|
||||
}
|
||||
if (password !== confirm) {
|
||||
setError('Hasła nie są identyczne.');
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
try {
|
||||
await resetPassword(token ?? '', password);
|
||||
setDone(true);
|
||||
setTimeout(() => navigate(ROUTES.login), 2500);
|
||||
} catch (e) {
|
||||
setError(errMsg(e));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthStatusCard>
|
||||
{done ? (
|
||||
<>
|
||||
<div className="auth-status-icon ok">✓</div>
|
||||
<h1>Hasło zostało zmienione</h1>
|
||||
<p className="auth-status-lead">Za chwilę przekierujemy Cię do logowania.</p>
|
||||
<Link className="auth-status-btn" to={ROUTES.login}>Przejdź do logowania</Link>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h1>Ustaw nowe hasło</h1>
|
||||
<p className="auth-status-lead">Wpisz nowe hasło do swojego konta. Dotychczasowe hasło działa do momentu jego zmiany.</p>
|
||||
<form className="auth-status-form" onSubmit={submit}>
|
||||
<label>Nowe hasło
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Min. 8 znaków" autoComplete="new-password" required />
|
||||
</label>
|
||||
<label>Powtórz hasło
|
||||
<input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder="Powtórz nowe hasło" autoComplete="new-password" required />
|
||||
</label>
|
||||
{error && <p className="auth-status-error" role="alert">{error}</p>}
|
||||
<button className="auth-status-btn" type="submit" disabled={busy}>{busy ? 'Zapisywanie...' : 'Ustaw nowe hasło'}</button>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</AuthStatusCard>
|
||||
);
|
||||
}
|
||||
|
||||
// Okno potwierdzenia numeru telefonu kodem SMS (OTP), pokazywane po rejestracji z podanym telefonem.
|
||||
export function PhoneOtpModal({ email, phone, onClose, onVerified }: {
|
||||
email: string;
|
||||
phone: string;
|
||||
onClose: () => void;
|
||||
onVerified: () => void;
|
||||
}) {
|
||||
const { verifyPhone, resendPhoneOtp } = useAuth();
|
||||
const [code, setCode] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [info, setInfo] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [cooldown, setCooldown] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (cooldown <= 0) {
|
||||
return;
|
||||
}
|
||||
const t = window.setTimeout(() => setCooldown((c) => c - 1), 1000);
|
||||
return () => window.clearTimeout(t);
|
||||
}, [cooldown]);
|
||||
|
||||
const submit = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setInfo(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
await verifyPhone(email, code.trim());
|
||||
onVerified();
|
||||
} catch (e) {
|
||||
setError(errMsg(e));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resend = async () => {
|
||||
setError(null);
|
||||
try {
|
||||
await resendPhoneOtp(email);
|
||||
setInfo('Wysłaliśmy nowy kod SMS.');
|
||||
setCooldown(30);
|
||||
} catch (e) {
|
||||
setError(errMsg(e));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="listing-delete-overlay" role="dialog" aria-modal="true" aria-label="Potwierdź numer telefonu">
|
||||
<div className="otp-modal">
|
||||
<button type="button" className="listing-delete-close" aria-label="Zamknij" onClick={onClose}>×</button>
|
||||
<div className="otp-modal-icon">📱</div>
|
||||
<h2>Potwierdź numer telefonu</h2>
|
||||
<p className="otp-modal-lead">Wysłaliśmy kod SMS na numer <strong>{phone}</strong>. Wpisz go poniżej, aby potwierdzić poprawność numeru.</p>
|
||||
<form className="otp-modal-form" onSubmit={submit}>
|
||||
<input
|
||||
className="otp-input"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
maxLength={6}
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
||||
placeholder="______"
|
||||
aria-label="Kod z SMS"
|
||||
autoFocus
|
||||
/>
|
||||
{error && <p className="auth-status-error" role="alert">{error}</p>}
|
||||
{info && <p className="otp-modal-ok">{info}</p>}
|
||||
<button className="auth-status-btn" type="submit" disabled={busy || code.length < 6}>{busy ? 'Sprawdzanie...' : 'Potwierdź numer'}</button>
|
||||
</form>
|
||||
<div className="otp-modal-actions">
|
||||
<button type="button" className="otp-link" disabled={cooldown > 0} onClick={resend}>
|
||||
{cooldown > 0 ? `Wyślij ponownie (${cooldown}s)` : 'Wyślij kod ponownie'}
|
||||
</button>
|
||||
<button type="button" className="otp-link" onClick={onClose}>Zrobię to później</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
// Publiczny komponent slotu reklamowego. Pobiera aktywne banery dla danego miejsca i renderuje
|
||||
// pierwszy (najwyzszy priorytetem). Zlicza klikniecia. Gdy brak banera - nie renderuje nic.
|
||||
import { useEffect, useState, type MouseEvent } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { apiFetch } from './auth';
|
||||
|
||||
export type BannerSlotName = 'HERO' | 'HOME_TOP' | 'HOME_MIDDLE' | 'SIDEBAR';
|
||||
|
||||
export type PublicBanner = {
|
||||
id: number;
|
||||
slot: BannerSlotName;
|
||||
title: string;
|
||||
subtitle: string | null;
|
||||
imageUrl: string | null;
|
||||
linkUrl: string | null;
|
||||
ctaLabel: string | null;
|
||||
};
|
||||
|
||||
function ArrowIcon() {
|
||||
return (
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||
<path d="M5 12h14" />
|
||||
<path d="M13 6l6 6-6 6" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function BannerSlot({ slot, className }: { slot: BannerSlotName; className?: string }) {
|
||||
const [banners, setBanners] = useState<PublicBanner[]>([]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
apiFetch<PublicBanner[]>(`/banners?slot=${slot}`)
|
||||
.then((data) => {
|
||||
if (!cancelled) {
|
||||
setBanners(Array.isArray(data) ? data : []);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) {
|
||||
setBanners([]);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [slot]);
|
||||
|
||||
const banner = banners[0];
|
||||
if (!banner) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isInternal = !!banner.linkUrl && banner.linkUrl.startsWith('/');
|
||||
|
||||
const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
|
||||
// Zliczenie klikniecia - bez blokowania nawigacji.
|
||||
apiFetch(`/banners/${banner.id}/click`, { method: 'POST' }).catch(() => {});
|
||||
if (!banner.linkUrl) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (isInternal) {
|
||||
event.preventDefault();
|
||||
navigate(banner.linkUrl);
|
||||
}
|
||||
};
|
||||
|
||||
const slotClass = `banner-slot-${slot.toLowerCase()}`;
|
||||
const withImage = banner.imageUrl ? 'has-image' : 'no-image';
|
||||
const style = banner.imageUrl
|
||||
? { backgroundImage: `linear-gradient(90deg, rgba(9,20,38,0.78) 0%, rgba(9,20,38,0.45) 45%, rgba(9,20,38,0.15) 100%), url(${banner.imageUrl})` }
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div className={`banner-slot ${slotClass} ${className ?? ''}`.trim()} aria-label="Reklama">
|
||||
<a
|
||||
className={`promo-banner ${withImage}`}
|
||||
href={banner.linkUrl ?? undefined}
|
||||
target={isInternal ? undefined : '_blank'}
|
||||
rel={isInternal ? undefined : 'noopener noreferrer sponsored'}
|
||||
onClick={handleClick}
|
||||
style={style}
|
||||
>
|
||||
<span className="promo-banner-tag">Reklama</span>
|
||||
<div className="promo-banner-body">
|
||||
<strong className="promo-banner-title">{banner.title}</strong>
|
||||
{banner.subtitle && <span className="promo-banner-sub">{banner.subtitle}</span>}
|
||||
{banner.ctaLabel && (
|
||||
<span className="promo-banner-cta">{banner.ctaLabel} <ArrowIcon /></span>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
// Globalna stopka serwisu - widoczna na wszystkich stronach i podstronach.
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ROUTES } from './routes';
|
||||
import { openCookieSettings } from './legal';
|
||||
|
||||
export function SiteFooter() {
|
||||
const year = new Date().getFullYear();
|
||||
return (
|
||||
<footer className="site-footer" aria-label="Stopka serwisu">
|
||||
<div className="site-footer-inner">
|
||||
<div className="footer-brand">
|
||||
<Link to={ROUTES.home} className="footer-logo">Polska <span>Lokalnie</span></Link>
|
||||
<p className="footer-tagline">Ogłoszenia nieruchomości bez prowizji. Kupuj, wynajmuj i sprzedawaj bezpośrednio, bez pośredników.</p>
|
||||
<p className="footer-badge">0 zł za ogłoszenie - bez ukrytych opłat</p>
|
||||
</div>
|
||||
|
||||
<nav className="footer-cols" aria-label="Nawigacja w stopce">
|
||||
<div className="footer-col">
|
||||
<h3>Serwis</h3>
|
||||
<Link to={ROUTES.buy}>Kupuję</Link>
|
||||
<Link to={ROUTES.rent}>Wynajmuję</Link>
|
||||
<Link to={ROUTES.sell}>Sprzedaję</Link>
|
||||
<Link to={ROUTES.add}>Dodaj ogłoszenie</Link>
|
||||
<Link to={ROUTES.map}>Mapa ofert</Link>
|
||||
</div>
|
||||
<div className="footer-col">
|
||||
<h3>Narzędzia</h3>
|
||||
<Link to={ROUTES.valuation}>Wycena mieszkania</Link>
|
||||
<Link to={ROUTES.priceHistory}>Historia cen</Link>
|
||||
<Link to={ROUTES.districtRanking}>Ranking dzielnic</Link>
|
||||
<Link to={ROUTES.creditCalculator}>Zdolność kredytowa</Link>
|
||||
<Link to={ROUTES.guides}>Poradniki</Link>
|
||||
</div>
|
||||
<div className="footer-col">
|
||||
<h3>Informacje</h3>
|
||||
<Link to={ROUTES.services}>Firmy i usługi</Link>
|
||||
<Link to={ROUTES.terms}>Regulamin</Link>
|
||||
<Link to={ROUTES.privacy}>Polityka prywatności</Link>
|
||||
<button type="button" className="footer-link-btn" onClick={openCookieSettings}>Ustawienia plików cookie</button>
|
||||
</div>
|
||||
<div className="footer-col">
|
||||
<h3>Kontakt</h3>
|
||||
<a href="mailto:info@polskalokalnie.pl">info@polskalokalnie.pl</a>
|
||||
<span className="footer-muted">Dostawca: SoftSPM</span>
|
||||
<span className="footer-muted">NIP: 7691956407</span>
|
||||
<span className="footer-muted">Ławy 42A, 97-400 Bełchatów</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="site-footer-bottom">
|
||||
<span>© {year} Polska Lokalnie | SoftSPM. Wszelkie prawa zastrzeżone.</span>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,329 @@
|
||||
// Panel admina: zarzadzanie banerami i promocjami (/admin/promocje).
|
||||
// CRUD banerow przypisanych do slotow serwisu, z uploadem grafiki (kompresja) i harmonogramem.
|
||||
import { useCallback, useEffect, useState, type ChangeEvent } from 'react';
|
||||
import { apiFetch } from '../auth';
|
||||
import { compressImageFile } from '../media';
|
||||
|
||||
type IconComponent = (props: { name: string }) => JSX.Element | null;
|
||||
|
||||
type BannerSlotName = 'HERO' | 'HOME_TOP' | 'HOME_MIDDLE' | 'SIDEBAR';
|
||||
|
||||
type AdminBanner = {
|
||||
id: number;
|
||||
slot: BannerSlotName;
|
||||
title: string;
|
||||
subtitle: string | null;
|
||||
imageUrl: string | null;
|
||||
linkUrl: string | null;
|
||||
ctaLabel: string | null;
|
||||
active: boolean;
|
||||
position: number;
|
||||
startsAt: string | null;
|
||||
endsAt: string | null;
|
||||
impressions: number;
|
||||
clicks: number;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
const SLOT_OPTIONS: { value: BannerSlotName; label: string; hint: string }[] = [
|
||||
{ value: 'HERO', label: 'Strona główna - hero (góra)', hint: 'Szeroki baner nad wyszukiwarką.' },
|
||||
{ value: 'HOME_TOP', label: 'Strona główna - pod wyszukiwarką', hint: 'Pasek tuż pod wyszukiwarką.' },
|
||||
{ value: 'HOME_MIDDLE', label: 'Strona główna - między ofertami', hint: 'Między sekcjami ofert.' },
|
||||
{ value: 'SIDEBAR', label: 'Karta oferty - panel boczny', hint: 'Kolumna boczna na stronie oferty.' },
|
||||
];
|
||||
|
||||
const slotLabel = (slot: BannerSlotName) => SLOT_OPTIONS.find((o) => o.value === slot)?.label ?? slot;
|
||||
|
||||
type FormState = {
|
||||
id: number | null;
|
||||
slot: BannerSlotName;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
imageUrl: string;
|
||||
linkUrl: string;
|
||||
ctaLabel: string;
|
||||
active: boolean;
|
||||
position: number;
|
||||
startsAt: string;
|
||||
endsAt: string;
|
||||
};
|
||||
|
||||
const emptyForm = (): FormState => ({
|
||||
id: null,
|
||||
slot: 'HERO',
|
||||
title: '',
|
||||
subtitle: '',
|
||||
imageUrl: '',
|
||||
linkUrl: '',
|
||||
ctaLabel: '',
|
||||
active: true,
|
||||
position: 0,
|
||||
startsAt: '',
|
||||
endsAt: '',
|
||||
});
|
||||
|
||||
function errorMessage(err: unknown): string {
|
||||
return err instanceof Error ? err.message : 'Wystąpił błąd.';
|
||||
}
|
||||
|
||||
// ISO (UTC) -> wartosc dla <input type="datetime-local"> w czasie lokalnym.
|
||||
function isoToLocalInput(iso: string | null): string {
|
||||
if (!iso) {
|
||||
return '';
|
||||
}
|
||||
const d = new Date(iso);
|
||||
if (Number.isNaN(d.getTime())) {
|
||||
return '';
|
||||
}
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
}
|
||||
|
||||
// datetime-local (czas lokalny) -> ISO (UTC) albo null.
|
||||
function localInputToIso(value: string): string | null {
|
||||
if (!value.trim()) {
|
||||
return null;
|
||||
}
|
||||
const d = new Date(value);
|
||||
return Number.isNaN(d.getTime()) ? null : d.toISOString();
|
||||
}
|
||||
|
||||
export function AdminBannersView({ Icon }: { Icon: IconComponent }) {
|
||||
const [banners, setBanners] = useState<AdminBanner[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [form, setForm] = useState<FormState>(emptyForm());
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [note, setNote] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setBanners(await apiFetch<AdminBanner[]>('/admin/banners'));
|
||||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const set = (patch: Partial<FormState>) => setForm((current) => ({ ...current, ...patch }));
|
||||
|
||||
const resetForm = () => {
|
||||
setForm(emptyForm());
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const startEdit = (banner: AdminBanner) => {
|
||||
setForm({
|
||||
id: banner.id,
|
||||
slot: banner.slot,
|
||||
title: banner.title,
|
||||
subtitle: banner.subtitle ?? '',
|
||||
imageUrl: banner.imageUrl ?? '',
|
||||
linkUrl: banner.linkUrl ?? '',
|
||||
ctaLabel: banner.ctaLabel ?? '',
|
||||
active: banner.active,
|
||||
position: banner.position,
|
||||
startsAt: isoToLocalInput(banner.startsAt),
|
||||
endsAt: isoToLocalInput(banner.endsAt),
|
||||
});
|
||||
setNote(null);
|
||||
setError(null);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const onPickImage = async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
event.target.value = '';
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (!['image/jpeg', 'image/png'].includes(file.type) || file.size > 10 * 1024 * 1024) {
|
||||
setError('Dozwolone JPG/PNG do 10 MB.');
|
||||
return;
|
||||
}
|
||||
setUploading(true);
|
||||
setError(null);
|
||||
try {
|
||||
// Banery sa szerokie - kompresujemy do 1600 px.
|
||||
set({ imageUrl: await compressImageFile(file, 1600) });
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
if (!form.title.trim()) {
|
||||
setError('Podaj tytuł banera.');
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
setNote(null);
|
||||
try {
|
||||
const payload = {
|
||||
slot: form.slot,
|
||||
title: form.title.trim(),
|
||||
subtitle: form.subtitle.trim() || null,
|
||||
imageUrl: form.imageUrl || null,
|
||||
linkUrl: form.linkUrl.trim() || null,
|
||||
ctaLabel: form.ctaLabel.trim() || null,
|
||||
active: form.active,
|
||||
position: Number.isFinite(form.position) ? form.position : 0,
|
||||
startsAt: localInputToIso(form.startsAt),
|
||||
endsAt: localInputToIso(form.endsAt),
|
||||
};
|
||||
if (form.id) {
|
||||
await apiFetch(`/admin/banners/${form.id}`, { method: 'PUT', body: JSON.stringify(payload) });
|
||||
setNote('Zapisano zmiany banera.');
|
||||
} else {
|
||||
await apiFetch('/admin/banners', { method: 'POST', body: JSON.stringify(payload) });
|
||||
setNote('Dodano nowy baner.');
|
||||
}
|
||||
resetForm();
|
||||
await load();
|
||||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggle = async (banner: AdminBanner) => {
|
||||
try {
|
||||
await apiFetch(`/admin/banners/${banner.id}/toggle`, { method: 'PATCH' });
|
||||
await load();
|
||||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
}
|
||||
};
|
||||
|
||||
const remove = async (banner: AdminBanner) => {
|
||||
if (!window.confirm(`Usunąć baner "${banner.title}"?`)) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await apiFetch(`/admin/banners/${banner.id}`, { method: 'DELETE' });
|
||||
if (form.id === banner.id) {
|
||||
resetForm();
|
||||
}
|
||||
await load();
|
||||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
}
|
||||
};
|
||||
|
||||
const activeSlot = SLOT_OPTIONS.find((o) => o.value === form.slot);
|
||||
|
||||
return (
|
||||
<div className="mkt-wrap">
|
||||
<div className="admin-card mkt-card">
|
||||
<div className="admin-card-head">
|
||||
<h2>{form.id ? 'Edytuj baner' : 'Nowy baner'}</h2>
|
||||
{form.id && <button type="button" className="admin-btn" onClick={resetForm}>Anuluj edycję</button>}
|
||||
</div>
|
||||
|
||||
<div className="mkt-config-grid">
|
||||
<label>Miejsce (slot)
|
||||
<select value={form.slot} onChange={(e) => set({ slot: e.target.value as BannerSlotName })}>
|
||||
{SLOT_OPTIONS.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label>Kolejność (mniejsza = wyżej)
|
||||
<input type="number" value={form.position} onChange={(e) => set({ position: Number(e.target.value) })} />
|
||||
</label>
|
||||
<label>Tytuł
|
||||
<input value={form.title} maxLength={160} onChange={(e) => set({ title: e.target.value })} placeholder="np. Wyróżnij swoje ogłoszenie" />
|
||||
</label>
|
||||
<label>Etykieta przycisku (CTA)
|
||||
<input value={form.ctaLabel} maxLength={60} onChange={(e) => set({ ctaLabel: e.target.value })} placeholder="np. Dodaj ogłoszenie" />
|
||||
</label>
|
||||
<label className="mkt-col-span">Podtytuł / opis
|
||||
<input value={form.subtitle} maxLength={400} onChange={(e) => set({ subtitle: e.target.value })} placeholder="Krótki tekst zachęcający do kliknięcia." />
|
||||
</label>
|
||||
<label className="mkt-col-span">Link po kliknięciu
|
||||
<input value={form.linkUrl} onChange={(e) => set({ linkUrl: e.target.value })} placeholder="np. /dodaj-ogloszenie lub https://twojafirma.pl" />
|
||||
</label>
|
||||
<label>Emisja od (opcjonalnie)
|
||||
<input type="datetime-local" value={form.startsAt} onChange={(e) => set({ startsAt: e.target.value })} />
|
||||
</label>
|
||||
<label>Emisja do (opcjonalnie)
|
||||
<input type="datetime-local" value={form.endsAt} onChange={(e) => set({ endsAt: e.target.value })} />
|
||||
</label>
|
||||
<label>Status
|
||||
<select value={form.active ? 'on' : 'off'} onChange={(e) => set({ active: e.target.value === 'on' })}>
|
||||
<option value="on">Aktywny</option>
|
||||
<option value="off">Wstrzymany</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="banner-image-row">
|
||||
<div className="banner-image-preview">
|
||||
{form.imageUrl ? <img src={form.imageUrl} alt="Podgląd banera" /> : <span className="banner-image-empty"><Icon name="camera" /> Bez grafiki</span>}
|
||||
</div>
|
||||
<div className="banner-image-actions">
|
||||
<label className="admin-btn banner-upload-btn">
|
||||
<Icon name="upload" /> {uploading ? 'Przetwarzanie...' : (form.imageUrl ? 'Zmień grafikę' : 'Dodaj grafikę')}
|
||||
<input type="file" accept="image/png,image/jpeg" onChange={onPickImage} hidden />
|
||||
</label>
|
||||
{form.imageUrl && <button type="button" className="admin-btn ghost" onClick={() => set({ imageUrl: '' })}>Usuń grafikę</button>}
|
||||
<small className="banner-image-hint">JPG/PNG. Szersze niż 1600 px zmniejszymy automatycznie. Bez grafiki baner pokaże się jako kafelek z tekstem.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activeSlot && <p className="banner-slot-hint"><Icon name="pin" /> {activeSlot.hint}</p>}
|
||||
{error && <p className="mkt-error">{error}</p>}
|
||||
{note && <p className="mkt-ok">{note}</p>}
|
||||
<div className="mkt-config-save">
|
||||
<button type="button" className="admin-btn approve" onClick={save} disabled={saving}>
|
||||
{saving ? 'Zapisywanie...' : (form.id ? 'Zapisz zmiany' : 'Dodaj baner')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="admin-card mkt-card">
|
||||
<div className="admin-card-head">
|
||||
<h2>Banery w serwisie</h2>
|
||||
<span className="mkt-count">{banners.length}</span>
|
||||
</div>
|
||||
{loading ? (
|
||||
<p className="admin-empty">Ładowanie...</p>
|
||||
) : banners.length === 0 ? (
|
||||
<p className="admin-empty">Brak banerów. Dodaj pierwszy w formularzu powyżej.</p>
|
||||
) : (
|
||||
<div className="banner-admin-list">
|
||||
{SLOT_OPTIONS.filter((o) => banners.some((b) => b.slot === o.value)).map((o) => (
|
||||
<div key={o.value} className="banner-admin-group">
|
||||
<h3 className="banner-admin-group-title">{o.label}</h3>
|
||||
{banners.filter((b) => b.slot === o.value).map((b) => (
|
||||
<div key={b.id} className={`banner-admin-row ${b.active ? '' : 'is-off'}`}>
|
||||
<div className="banner-admin-thumb">
|
||||
{b.imageUrl ? <img src={b.imageUrl} alt="" /> : <span className="banner-admin-thumb-text"><Icon name="spark" /></span>}
|
||||
</div>
|
||||
<div className="banner-admin-info">
|
||||
<strong>{b.title}</strong>
|
||||
{b.subtitle && <span>{b.subtitle}</span>}
|
||||
<div className="banner-admin-meta">
|
||||
<span className={`banner-status ${b.active ? 'on' : 'off'}`}>{b.active ? 'Aktywny' : 'Wstrzymany'}</span>
|
||||
{b.linkUrl && <span className="banner-admin-link">{b.linkUrl}</span>}
|
||||
<span className="banner-admin-stats">{b.impressions} wyświetleń · {b.clicks} kliknięć</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="banner-admin-actions">
|
||||
<button type="button" className="admin-btn" onClick={() => startEdit(b)}>Edytuj</button>
|
||||
<button type="button" className="admin-btn ghost" onClick={() => toggle(b)}>{b.active ? 'Wstrzymaj' : 'Aktywuj'}</button>
|
||||
<button type="button" className="admin-btn ghost danger" onClick={() => remove(b)}>Usuń</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -609,50 +609,48 @@ export function AdminCampaignsView({ Icon }: { Icon: IconComponent }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mkt-grid-2">
|
||||
<div className="mkt-wrap">
|
||||
<div className="admin-card mkt-card">
|
||||
<div className="admin-card-head"><h2>Nowa kampania</h2></div>
|
||||
<div className="mkt-form">
|
||||
<label>Nazwa
|
||||
<div className="mkt-config-grid">
|
||||
<label className="mkt-col-span">Nazwa
|
||||
<input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="np. Newsletter lipiec" />
|
||||
</label>
|
||||
<div className="mkt-form-row">
|
||||
<label>Kanał
|
||||
<select value={form.channel} onChange={(e) => setForm({ ...form, channel: e.target.value as Channel })}>
|
||||
<option value="EMAIL">E-mail</option>
|
||||
<option value="SMS">SMS</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Grupa docelowa
|
||||
<select value={form.targetGroupId} onChange={(e) => setForm({ ...form, targetGroupId: e.target.value })}>
|
||||
<option value="">- wybierz -</option>
|
||||
{groups.map((g) => (
|
||||
<option key={g.id} value={g.id}>{g.name} ({g.memberCount})</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<label>Kanał
|
||||
<select value={form.channel} onChange={(e) => setForm({ ...form, channel: e.target.value as Channel })}>
|
||||
<option value="EMAIL">E-mail</option>
|
||||
<option value="SMS">SMS</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Grupa docelowa
|
||||
<select value={form.targetGroupId} onChange={(e) => setForm({ ...form, targetGroupId: e.target.value })}>
|
||||
<option value="">- wybierz -</option>
|
||||
{groups.map((g) => (
|
||||
<option key={g.id} value={g.id}>{g.name} ({g.memberCount})</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
{form.channel === 'EMAIL' && (
|
||||
<label>Temat
|
||||
<label className="mkt-col-span">Temat
|
||||
<input value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })} placeholder="Temat wiadomości" />
|
||||
</label>
|
||||
)}
|
||||
<label>Treść <span className="mkt-muted">(użyj {'{{name}}'} dla personalizacji; stopka z rezygnacją dodawana automatycznie)</span>
|
||||
<label className="mkt-col-span">Treść <span className="mkt-muted">(użyj {'{{name}}'} dla personalizacji; stopka z rezygnacją dodawana automatycznie)</span>
|
||||
{form.channel === 'EMAIL' ? (
|
||||
<RichTextEditor value={form.body} onChange={(html) => setForm({ ...form, body: html })} ariaLabel="Treść kampanii e-mail" placeholder="Cześć {{name}}, ..." />
|
||||
) : (
|
||||
<textarea rows={5} value={form.body} onChange={(e) => setForm({ ...form, body: e.target.value })} placeholder="Cześć {{name}}, ..." />
|
||||
<textarea rows={6} value={form.body} onChange={(e) => setForm({ ...form, body: e.target.value })} placeholder="Cześć {{name}}, ..." />
|
||||
)}
|
||||
</label>
|
||||
<div className="mkt-form-row">
|
||||
<label>Dzienny limit
|
||||
<input type="number" min={1} value={form.dailyLimit} onChange={(e) => setForm({ ...form, dailyLimit: Number(e.target.value) })} />
|
||||
</label>
|
||||
<label>Zaplanuj na (opcjonalnie)
|
||||
<input type="datetime-local" value={form.scheduledAt} onChange={(e) => setForm({ ...form, scheduledAt: e.target.value })} />
|
||||
</label>
|
||||
</div>
|
||||
{error && <p className="mkt-error">{error}</p>}
|
||||
<label>Dzienny limit
|
||||
<input type="number" min={1} value={form.dailyLimit} onChange={(e) => setForm({ ...form, dailyLimit: Number(e.target.value) })} />
|
||||
</label>
|
||||
<label>Zaplanuj na (opcjonalnie)
|
||||
<input type="datetime-local" value={form.scheduledAt} onChange={(e) => setForm({ ...form, scheduledAt: e.target.value })} />
|
||||
</label>
|
||||
</div>
|
||||
{error && <p className="mkt-error">{error}</p>}
|
||||
<div className="mkt-config-save">
|
||||
<button type="button" className="admin-btn approve" onClick={create} disabled={saving}>
|
||||
{saving ? 'Zapisywanie...' : 'Utwórz kampanię (robocza)'}
|
||||
</button>
|
||||
@@ -730,10 +728,18 @@ type SmsConfig = {
|
||||
apiKeySet: boolean;
|
||||
};
|
||||
|
||||
export function AdminMailConfigView({ Icon }: { Icon: IconComponent }) {
|
||||
// Rozdzielone obszary w panelu admina: osobno konfiguracja SMTP, osobno bramka SMS.
|
||||
export function AdminSmtpConfigView({ Icon }: { Icon: IconComponent }) {
|
||||
return (
|
||||
<div className="mkt-wrap">
|
||||
<SmtpCard Icon={Icon} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AdminSmsConfigView({ Icon }: { Icon: IconComponent }) {
|
||||
return (
|
||||
<div className="mkt-wrap">
|
||||
<SmsCard Icon={Icon} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,283 @@
|
||||
// Panel admina: promowanie ofert - plany, pakiety, konfiguracja AutoPay i historia platnosci.
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { apiFetch } from '../auth';
|
||||
|
||||
type IconComponent = (props: { name: string }) => JSX.Element | null;
|
||||
|
||||
type Plan = { id: number; name: string; durationDays: number; price: number; active: boolean; position: number };
|
||||
type Pack = { id: number; name: string; quantity: number; price: number; active: boolean; position: number };
|
||||
type Order = {
|
||||
id: number; userEmail: string; kind: string; itemName: string; amount: number;
|
||||
method: string; listingId: number | null; status: string; createdAt: string; paidAt: string | null;
|
||||
};
|
||||
type PayCfg = { serviceId: string | null; secretKeySet: boolean; hashSeparator: string; sandbox: boolean; enabled: boolean };
|
||||
|
||||
const zl = (n: number) => `${new Intl.NumberFormat('pl-PL', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(n)} zł`;
|
||||
const em = (e: unknown) => (e instanceof Error ? e.message : 'Wystąpił błąd.');
|
||||
const dt = (iso: string | null) => (iso ? new Date(iso).toLocaleString('pl-PL') : '-');
|
||||
|
||||
const emptyPlan = () => ({ id: null as number | null, name: '', durationDays: 14, price: '', active: true, position: 0 });
|
||||
const emptyPack = () => ({ id: null as number | null, name: '', quantity: 5, price: '', active: true, position: 0 });
|
||||
|
||||
export function AdminPromotionView({ Icon }: { Icon: IconComponent }) {
|
||||
const [plans, setPlans] = useState<Plan[]>([]);
|
||||
const [packs, setPacks] = useState<Pack[]>([]);
|
||||
const [orders, setOrders] = useState<Order[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [note, setNote] = useState<string | null>(null);
|
||||
|
||||
const [planForm, setPlanForm] = useState(emptyPlan());
|
||||
const [packForm, setPackForm] = useState(emptyPack());
|
||||
const [pay, setPay] = useState({ serviceId: '', secretKey: '', hashSeparator: '|', sandbox: true, enabled: false });
|
||||
const [secretSet, setSecretSet] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const [pl, pk, ord, cfg] = await Promise.all([
|
||||
apiFetch<Plan[]>('/admin/promotion/plans'),
|
||||
apiFetch<Pack[]>('/admin/promotion/packages'),
|
||||
apiFetch<Order[]>('/admin/promotion/orders'),
|
||||
apiFetch<PayCfg>('/admin/payment-config'),
|
||||
]);
|
||||
setPlans(pl);
|
||||
setPacks(pk);
|
||||
setOrders(ord);
|
||||
setSecretSet(cfg.secretKeySet);
|
||||
setPay((f) => ({ ...f, serviceId: cfg.serviceId ?? '', hashSeparator: cfg.hashSeparator || '|', sandbox: cfg.sandbox, enabled: cfg.enabled }));
|
||||
} catch (e) {
|
||||
setError(em(e));
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const flash = (msg: string) => { setNote(msg); setError(null); };
|
||||
|
||||
const savePlan = async () => {
|
||||
try {
|
||||
const body = JSON.stringify({
|
||||
name: planForm.name, durationDays: Number(planForm.durationDays), price: Number(planForm.price),
|
||||
active: planForm.active, position: Number(planForm.position),
|
||||
});
|
||||
if (planForm.id) {
|
||||
await apiFetch(`/admin/promotion/plans/${planForm.id}`, { method: 'PUT', body });
|
||||
} else {
|
||||
await apiFetch('/admin/promotion/plans', { method: 'POST', body });
|
||||
}
|
||||
setPlanForm(emptyPlan());
|
||||
flash('Zapisano plan.');
|
||||
await load();
|
||||
} catch (e) { setError(em(e)); }
|
||||
};
|
||||
|
||||
const savePack = async () => {
|
||||
try {
|
||||
const body = JSON.stringify({
|
||||
name: packForm.name, quantity: Number(packForm.quantity), price: Number(packForm.price),
|
||||
active: packForm.active, position: Number(packForm.position),
|
||||
});
|
||||
if (packForm.id) {
|
||||
await apiFetch(`/admin/promotion/packages/${packForm.id}`, { method: 'PUT', body });
|
||||
} else {
|
||||
await apiFetch('/admin/promotion/packages', { method: 'POST', body });
|
||||
}
|
||||
setPackForm(emptyPack());
|
||||
flash('Zapisano pakiet.');
|
||||
await load();
|
||||
} catch (e) { setError(em(e)); }
|
||||
};
|
||||
|
||||
const savePay = async () => {
|
||||
try {
|
||||
const body = JSON.stringify({
|
||||
serviceId: pay.serviceId || null, secretKey: pay.secretKey || null,
|
||||
hashSeparator: pay.hashSeparator, sandbox: pay.sandbox, enabled: pay.enabled,
|
||||
});
|
||||
const cfg = await apiFetch<PayCfg>('/admin/payment-config', { method: 'PUT', body });
|
||||
setSecretSet(cfg.secretKeySet);
|
||||
setPay((f) => ({ ...f, secretKey: '' }));
|
||||
flash('Zapisano konfigurację AutoPay.');
|
||||
} catch (e) { setError(em(e)); }
|
||||
};
|
||||
|
||||
const toggle = async (kind: 'plans' | 'packages', id: number) => {
|
||||
try { await apiFetch(`/admin/promotion/${kind}/${id}/toggle`, { method: 'PATCH' }); await load(); } catch (e) { setError(em(e)); }
|
||||
};
|
||||
const remove = async (kind: 'plans' | 'packages', id: number, label: string) => {
|
||||
if (!window.confirm(`Usunąć „${label}"?`)) { return; }
|
||||
try { await apiFetch(`/admin/promotion/${kind}/${id}`, { method: 'DELETE' }); await load(); } catch (e) { setError(em(e)); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mkt-wrap">
|
||||
{(error || note) && (error ? <p className="mkt-error">{error}</p> : <p className="mkt-ok">{note}</p>)}
|
||||
|
||||
{/* Plany promowania */}
|
||||
<div className="admin-card mkt-card">
|
||||
<div className="admin-card-head">
|
||||
<h2>{planForm.id ? 'Edytuj plan promowania' : 'Plany promowania'}</h2>
|
||||
{planForm.id && <button type="button" className="admin-btn" onClick={() => setPlanForm(emptyPlan())}>Anuluj</button>}
|
||||
</div>
|
||||
<div className="mkt-config-grid">
|
||||
<label className="mkt-col-span">Nazwa
|
||||
<input value={planForm.name} onChange={(e) => setPlanForm({ ...planForm, name: e.target.value })} placeholder="np. Wyróżnienie 14 dni" />
|
||||
</label>
|
||||
<label>Czas trwania (dni)
|
||||
<input type="number" min={1} value={planForm.durationDays} onChange={(e) => setPlanForm({ ...planForm, durationDays: Number(e.target.value) })} />
|
||||
</label>
|
||||
<label>Cena (zł)
|
||||
<input type="number" min={0} step="0.01" value={planForm.price} onChange={(e) => setPlanForm({ ...planForm, price: e.target.value })} placeholder="49.99" />
|
||||
</label>
|
||||
<label>Kolejność
|
||||
<input type="number" value={planForm.position} onChange={(e) => setPlanForm({ ...planForm, position: Number(e.target.value) })} />
|
||||
</label>
|
||||
<label>Status
|
||||
<select value={planForm.active ? 'on' : 'off'} onChange={(e) => setPlanForm({ ...planForm, active: e.target.value === 'on' })}>
|
||||
<option value="on">Aktywny</option>
|
||||
<option value="off">Nieaktywny</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mkt-config-save">
|
||||
<button type="button" className="admin-btn approve" onClick={savePlan} disabled={!planForm.name.trim()}>
|
||||
{planForm.id ? 'Zapisz plan' : 'Dodaj plan'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="promo-admin-list">
|
||||
{plans.map((p) => (
|
||||
<div key={p.id} className={`promo-admin-row ${p.active ? '' : 'is-off'}`}>
|
||||
<div className="promo-admin-info">
|
||||
<strong>{p.name}</strong>
|
||||
<span>{p.durationDays} dni · {zl(p.price)}</span>
|
||||
</div>
|
||||
<span className={`banner-status ${p.active ? 'on' : 'off'}`}>{p.active ? 'Aktywny' : 'Nieaktywny'}</span>
|
||||
<div className="promo-admin-actions">
|
||||
<button type="button" className="admin-btn" onClick={() => setPlanForm({ id: p.id, name: p.name, durationDays: p.durationDays, price: String(p.price), active: p.active, position: p.position })}>Edytuj</button>
|
||||
<button type="button" className="admin-btn ghost" onClick={() => toggle('plans', p.id)}>{p.active ? 'Wyłącz' : 'Włącz'}</button>
|
||||
<button type="button" className="admin-btn ghost danger" onClick={() => remove('plans', p.id, p.name)}>Usuń</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{plans.length === 0 && <p className="admin-empty">Brak planów.</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pakiety promowania */}
|
||||
<div className="admin-card mkt-card">
|
||||
<div className="admin-card-head">
|
||||
<h2>{packForm.id ? 'Edytuj pakiet' : 'Pakiety promowań'}</h2>
|
||||
{packForm.id && <button type="button" className="admin-btn" onClick={() => setPackForm(emptyPack())}>Anuluj</button>}
|
||||
</div>
|
||||
<div className="mkt-config-grid">
|
||||
<label className="mkt-col-span">Nazwa
|
||||
<input value={packForm.name} onChange={(e) => setPackForm({ ...packForm, name: e.target.value })} placeholder="np. Pakiet 10 promowań" />
|
||||
</label>
|
||||
<label>Liczba promowań (kredytów)
|
||||
<input type="number" min={1} value={packForm.quantity} onChange={(e) => setPackForm({ ...packForm, quantity: Number(e.target.value) })} />
|
||||
</label>
|
||||
<label>Cena pakietu (zł)
|
||||
<input type="number" min={0} step="0.01" value={packForm.price} onChange={(e) => setPackForm({ ...packForm, price: e.target.value })} placeholder="349.99" />
|
||||
</label>
|
||||
<label>Kolejność
|
||||
<input type="number" value={packForm.position} onChange={(e) => setPackForm({ ...packForm, position: Number(e.target.value) })} />
|
||||
</label>
|
||||
<label>Status
|
||||
<select value={packForm.active ? 'on' : 'off'} onChange={(e) => setPackForm({ ...packForm, active: e.target.value === 'on' })}>
|
||||
<option value="on">Aktywny</option>
|
||||
<option value="off">Nieaktywny</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mkt-config-save">
|
||||
<button type="button" className="admin-btn approve" onClick={savePack} disabled={!packForm.name.trim()}>
|
||||
{packForm.id ? 'Zapisz pakiet' : 'Dodaj pakiet'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="promo-admin-list">
|
||||
{packs.map((p) => (
|
||||
<div key={p.id} className={`promo-admin-row ${p.active ? '' : 'is-off'}`}>
|
||||
<div className="promo-admin-info">
|
||||
<strong>{p.name}</strong>
|
||||
<span>{p.quantity} szt. · {zl(p.price)} ({zl(p.price / p.quantity)} / szt.)</span>
|
||||
</div>
|
||||
<span className={`banner-status ${p.active ? 'on' : 'off'}`}>{p.active ? 'Aktywny' : 'Nieaktywny'}</span>
|
||||
<div className="promo-admin-actions">
|
||||
<button type="button" className="admin-btn" onClick={() => setPackForm({ id: p.id, name: p.name, quantity: p.quantity, price: String(p.price), active: p.active, position: p.position })}>Edytuj</button>
|
||||
<button type="button" className="admin-btn ghost" onClick={() => toggle('packages', p.id)}>{p.active ? 'Wyłącz' : 'Włącz'}</button>
|
||||
<button type="button" className="admin-btn ghost danger" onClick={() => remove('packages', p.id, p.name)}>Usuń</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{packs.length === 0 && <p className="admin-empty">Brak pakietów.</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Konfiguracja AutoPay */}
|
||||
<div className="admin-card mkt-card mkt-config">
|
||||
<div className="admin-card-head mkt-config-head">
|
||||
<span className="mkt-config-icon"><Icon name="credit-card" /></span>
|
||||
<h2>Bramka szybkich płatności - AutoPay</h2>
|
||||
</div>
|
||||
<p className="banner-slot-hint"><Icon name="lock" /> Bez danych dostępowych działa tryb sandbox (płatność potwierdzana automatycznie).</p>
|
||||
<div className="mkt-config-grid">
|
||||
<label>ServiceID
|
||||
<input value={pay.serviceId} onChange={(e) => setPay({ ...pay, serviceId: e.target.value })} placeholder="np. 123456" />
|
||||
</label>
|
||||
<label>Klucz współpracy (sekret) {secretSet && <span className="mkt-badge-set"><Icon name="lock" /> ustawiony</span>}
|
||||
<input type="password" value={pay.secretKey} onChange={(e) => setPay({ ...pay, secretKey: e.target.value })} placeholder="wpisz, aby zmienić" />
|
||||
</label>
|
||||
<label>Separator hasha
|
||||
<input value={pay.hashSeparator} maxLength={5} onChange={(e) => setPay({ ...pay, hashSeparator: e.target.value })} placeholder="|" />
|
||||
</label>
|
||||
<label>Środowisko
|
||||
<select value={pay.sandbox ? 'sandbox' : 'prod'} onChange={(e) => setPay({ ...pay, sandbox: e.target.value === 'sandbox' })}>
|
||||
<option value="sandbox">Testowe (sandbox)</option>
|
||||
<option value="prod">Produkcyjne</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Bramka aktywna
|
||||
<select value={pay.enabled ? 'on' : 'off'} onChange={(e) => setPay({ ...pay, enabled: e.target.value === 'on' })}>
|
||||
<option value="off">Wyłączona (symulacja)</option>
|
||||
<option value="on">Włączona</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mkt-config-save">
|
||||
<button type="button" className="admin-btn approve" onClick={savePay}>Zapisz konfigurację</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Historia platnosci */}
|
||||
<div className="admin-card mkt-card">
|
||||
<div className="admin-card-head">
|
||||
<h2>Historia płatności</h2>
|
||||
<span className="mkt-count">{orders.length}</span>
|
||||
</div>
|
||||
{orders.length === 0 ? (
|
||||
<p className="admin-empty">Brak płatności.</p>
|
||||
) : (
|
||||
<div className="mkt-table-scroll">
|
||||
<table className="mkt-table promo-orders-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Data</th><th>Użytkownik</th><th>Pozycja</th><th>Kwota</th><th>Metoda</th><th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{orders.map((o) => (
|
||||
<tr key={o.id}>
|
||||
<td>{dt(o.createdAt)}</td>
|
||||
<td>{o.userEmail}</td>
|
||||
<td>{o.itemName}</td>
|
||||
<td>{zl(o.amount)}</td>
|
||||
<td>{o.method}</td>
|
||||
<td><span className={`banner-status ${o.status === 'PAID' ? 'on' : 'off'}`}>{o.status === 'PAID' ? 'Opłacone' : o.status === 'PENDING' ? 'Oczekuje' : 'Błąd'}</span></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
// Panel admina: ustawienia serwisu - integracja z rejestrem REGON (GUS BIR1.1).
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { apiFetch } from '../auth';
|
||||
|
||||
type IconComponent = (props: { name: string }) => JSX.Element | null;
|
||||
|
||||
type GusCfg = { userKeySet: boolean; sandbox: boolean };
|
||||
|
||||
const em = (e: unknown) => (e instanceof Error ? e.message : 'Wystąpił błąd.');
|
||||
|
||||
export function AdminSettingsView({ Icon }: { Icon: IconComponent }) {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [note, setNote] = useState<string | null>(null);
|
||||
const [gus, setGus] = useState({ userKey: '', sandbox: true });
|
||||
const [keySet, setKeySet] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const cfg = await apiFetch<GusCfg>('/admin/gus-config');
|
||||
setKeySet(cfg.userKeySet);
|
||||
setGus({ userKey: '', sandbox: cfg.sandbox });
|
||||
} catch (e) {
|
||||
setError(em(e));
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const save = async () => {
|
||||
try {
|
||||
const body = JSON.stringify({ userKey: gus.userKey || null, sandbox: gus.sandbox });
|
||||
const cfg = await apiFetch<GusCfg>('/admin/gus-config', { method: 'PUT', body });
|
||||
setKeySet(cfg.userKeySet);
|
||||
setGus({ userKey: '', sandbox: cfg.sandbox });
|
||||
setError(null);
|
||||
setNote('Zapisano konfigurację GUS.');
|
||||
} catch (e) {
|
||||
setError(em(e));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mkt-wrap">
|
||||
{(error || note) && (error ? <p className="mkt-error">{error}</p> : <p className="mkt-ok">{note}</p>)}
|
||||
|
||||
<div className="admin-card mkt-card mkt-config">
|
||||
<div className="admin-card-head mkt-config-head">
|
||||
<span className="mkt-config-icon"><Icon name="document" /></span>
|
||||
<h2>Rejestr REGON (GUS) - pobieranie danych firmy po NIP</h2>
|
||||
</div>
|
||||
<p className="banner-slot-hint">
|
||||
<Icon name="lock" /> Klucz użytkownika otrzymasz od GUS (usługa BIR1.1). W trybie testowym używamy środowiska
|
||||
testowego GUS i klucza testowego - zwraca ono wyłącznie dane przykładowe.
|
||||
</p>
|
||||
<div className="mkt-config-grid">
|
||||
<label>Klucz użytkownika {keySet && <span className="mkt-badge-set"><Icon name="lock" /> ustawiony</span>}
|
||||
<input
|
||||
type="password"
|
||||
value={gus.userKey}
|
||||
onChange={(e) => setGus({ ...gus, userKey: e.target.value })}
|
||||
placeholder={keySet ? 'wpisz, aby zmienić' : 'klucz produkcyjny z GUS'}
|
||||
/>
|
||||
</label>
|
||||
<label>Środowisko
|
||||
<select value={gus.sandbox ? 'sandbox' : 'prod'} onChange={(e) => setGus({ ...gus, sandbox: e.target.value === 'sandbox' })}>
|
||||
<option value="sandbox">Testowe (dane przykładowe)</option>
|
||||
<option value="prod">Produkcyjne</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mkt-config-save">
|
||||
<button type="button" className="admin-btn approve" onClick={save}>Zapisz konfigurację</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+64
-6
@@ -21,16 +21,22 @@ export type AuthUser = {
|
||||
nip: string | null;
|
||||
birthDate: string | null;
|
||||
verified: boolean;
|
||||
phoneVerified: boolean;
|
||||
blocked: boolean;
|
||||
promotionCredits: number;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
type AuthResponse = { token: string; user: AuthUser };
|
||||
|
||||
// Po rejestracji konto wymaga aktywacji linkiem e-mail - nie logujemy od razu.
|
||||
export type RegisterPending = { email: string; phoneVerificationRequired: boolean };
|
||||
|
||||
export type RegisterDetails = {
|
||||
accountType: AccountType;
|
||||
phone?: string;
|
||||
nip?: string;
|
||||
address?: string;
|
||||
};
|
||||
|
||||
type AuthContextValue = {
|
||||
@@ -38,9 +44,16 @@ type AuthContextValue = {
|
||||
token: string | null;
|
||||
loading: boolean;
|
||||
login: (email: string, password: string) => Promise<AuthUser>;
|
||||
register: (email: string, password: string, fullName: string, details?: RegisterDetails) => Promise<AuthUser>;
|
||||
register: (email: string, password: string, fullName: string, details?: RegisterDetails) => Promise<RegisterPending>;
|
||||
socialLogin: (provider: Exclude<AuthProviderName, 'LOCAL'>) => Promise<AuthUser>;
|
||||
activateAccount: (token: string) => Promise<void>;
|
||||
resendActivation: (email: string) => Promise<void>;
|
||||
forgotPassword: (email: string) => Promise<void>;
|
||||
resetPassword: (token: string, password: string) => Promise<void>;
|
||||
verifyPhone: (email: string, code: string) => Promise<void>;
|
||||
resendPhoneOtp: (email: string) => Promise<void>;
|
||||
updateProfile: (fullName: string, phone?: string, birthDate?: string, address?: string, contactPreference?: ContactPreference, preferredLanguage?: PreferredLanguage) => Promise<AuthUser>;
|
||||
refreshUser: () => Promise<AuthUser | null>;
|
||||
logout: () => void;
|
||||
};
|
||||
|
||||
@@ -161,13 +174,14 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
[applyAuth],
|
||||
);
|
||||
|
||||
// Rejestracja NIE loguje od razu - konto wymaga aktywacji linkiem z e-maila.
|
||||
const register = useCallback(
|
||||
async (email: string, password: string, fullName: string, details?: RegisterDetails) =>
|
||||
applyAuth(await apiFetch<AuthResponse>('/auth/register', {
|
||||
apiFetch<RegisterPending>('/auth/register', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ email, password, fullName, ...details }),
|
||||
})),
|
||||
[applyAuth],
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
const socialLogin = useCallback(
|
||||
@@ -179,6 +193,30 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
[applyAuth],
|
||||
);
|
||||
|
||||
const activateAccount = useCallback(async (token: string) => {
|
||||
await apiFetch<void>('/auth/activate', { method: 'POST', body: JSON.stringify({ token }) });
|
||||
}, []);
|
||||
|
||||
const resendActivation = useCallback(async (email: string) => {
|
||||
await apiFetch<void>('/auth/resend-activation', { method: 'POST', body: JSON.stringify({ email }) });
|
||||
}, []);
|
||||
|
||||
const forgotPassword = useCallback(async (email: string) => {
|
||||
await apiFetch<void>('/auth/forgot-password', { method: 'POST', body: JSON.stringify({ email }) });
|
||||
}, []);
|
||||
|
||||
const resetPassword = useCallback(async (token: string, password: string) => {
|
||||
await apiFetch<void>('/auth/reset-password', { method: 'POST', body: JSON.stringify({ token, password }) });
|
||||
}, []);
|
||||
|
||||
const verifyPhone = useCallback(async (email: string, code: string) => {
|
||||
await apiFetch<void>('/auth/verify-phone', { method: 'POST', body: JSON.stringify({ email, code }) });
|
||||
}, []);
|
||||
|
||||
const resendPhoneOtp = useCallback(async (email: string) => {
|
||||
await apiFetch<void>('/auth/resend-phone-otp', { method: 'POST', body: JSON.stringify({ email }) });
|
||||
}, []);
|
||||
|
||||
const updateProfile = useCallback(
|
||||
async (fullName: string, phone?: string, birthDate?: string, address?: string, contactPreference?: ContactPreference, preferredLanguage?: PreferredLanguage) => {
|
||||
const updated = await apiFetch<AuthUser>('/auth/me', {
|
||||
@@ -191,6 +229,20 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
[],
|
||||
);
|
||||
|
||||
// Ponowne pobranie danych uzytkownika (np. po zakupie promowania - odswieza saldo kredytow).
|
||||
const refreshUser = useCallback(async () => {
|
||||
if (!getToken()) {
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
const fresh = await apiFetch<AuthUser>('/auth/me');
|
||||
setUser(fresh);
|
||||
return fresh;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const logout = useCallback(() => {
|
||||
window.localStorage.removeItem(TOKEN_KEY);
|
||||
setToken(null);
|
||||
@@ -198,8 +250,14 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
}, []);
|
||||
|
||||
const value = useMemo<AuthContextValue>(
|
||||
() => ({ user, token, loading, login, register, socialLogin, updateProfile, logout }),
|
||||
[user, token, loading, login, register, socialLogin, updateProfile, logout],
|
||||
() => ({
|
||||
user, token, loading, login, register, socialLogin,
|
||||
activateAccount, resendActivation, forgotPassword, resetPassword, verifyPhone, resendPhoneOtp,
|
||||
updateProfile, refreshUser, logout,
|
||||
}),
|
||||
[user, token, loading, login, register, socialLogin,
|
||||
activateAccount, resendActivation, forgotPassword, resetPassword, verifyPhone, resendPhoneOtp,
|
||||
updateProfile, refreshUser, logout],
|
||||
);
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||
|
||||
@@ -0,0 +1,272 @@
|
||||
// Strony prawne serwisu: Regulamin, Polityka prywatności oraz baner zgody na pliki cookie.
|
||||
// Treść dostosowana do usług portalu Polska Lokalnie (ogłoszenia nieruchomości bez prowizji,
|
||||
// płatne promowanie ofert przez AutoPay). Dostawca: SoftSPM, hosting: OVHcloud.
|
||||
import { useEffect, useState, type ReactNode } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ROUTES } from './routes';
|
||||
|
||||
const PROVIDER = {
|
||||
name: 'SoftSPM',
|
||||
legal: 'SoftSPM - działalność gospodarcza wpisana do Centralnej Ewidencji i Informacji o Działalności Gospodarczej (CEIDG)',
|
||||
address: 'Ławy 42A, 97-400 Bełchatów, woj. łódzkie',
|
||||
nip: '7691956407',
|
||||
regon: '100629083',
|
||||
email: 'info@polskalokalnie.pl',
|
||||
hosting: 'OVHcloud (OVH Sp. z o.o., ul. Swobodna 1, 50-088 Wrocław)',
|
||||
};
|
||||
|
||||
const SERVICE_NAME = 'Polska Lokalnie';
|
||||
const LAST_UPDATED = '9 sierpnia 2026 r.';
|
||||
|
||||
function LegalPage({ title, subtitle, children }: { title: string; subtitle: string; children: ReactNode }) {
|
||||
return (
|
||||
<section className="legal-page" aria-label={title}>
|
||||
<div className="legal-shell">
|
||||
<header className="legal-head">
|
||||
<p className="legal-brand">Polska Lokalnie <span>|</span> SoftSPM</p>
|
||||
<h1>{title}</h1>
|
||||
<p>{subtitle}</p>
|
||||
<p className="legal-updated">Data ostatniej aktualizacji: {LAST_UPDATED}</p>
|
||||
</header>
|
||||
<div className="legal-body">{children}</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function TermsPage() {
|
||||
return (
|
||||
<LegalPage
|
||||
title="Regulamin platformy Polska Lokalnie"
|
||||
subtitle="Zasady korzystania z platformy ogłoszeniowej oraz świadczenia usług drogą elektroniczną."
|
||||
>
|
||||
<h2>§ 1. Postanowienia ogólne</h2>
|
||||
<ol>
|
||||
<li>Niniejszy Regulamin określa zasady korzystania z platformy internetowej <strong>{SERVICE_NAME}</strong>, dostępnej pod adresem polskalokalnie.pl (dalej „Platforma").</li>
|
||||
<li>Właścicielem i dostawcą Platformy (Usługodawcą) jest <strong>{PROVIDER.legal}</strong>, {PROVIDER.address}, NIP: {PROVIDER.nip}, REGON: {PROVIDER.regon}, adres e-mail: {PROVIDER.email}.</li>
|
||||
<li>Platforma jest utrzymywana na serwerach dostawcy hostingu {PROVIDER.hosting}, które są fizycznie zlokalizowane na terytorium Rzeczypospolitej Polskiej (w Unii Europejskiej).</li>
|
||||
<li>Regulamin jest udostępniany nieodpłatnie w sposób umożliwiający jego pozyskanie, odtworzenie i utrwalenie.</li>
|
||||
<li>Korzystanie z Platformy oznacza akceptację postanowień Regulaminu oraz Polityki prywatności.</li>
|
||||
</ol>
|
||||
|
||||
<h2>§ 2. Definicje</h2>
|
||||
<ul>
|
||||
<li><strong>Usługodawca</strong> - {PROVIDER.name}, podmiot prowadzący Platformę.</li>
|
||||
<li><strong>Użytkownik</strong> - osoba fizyczna, osoba prawna lub jednostka organizacyjna korzystająca z Platformy.</li>
|
||||
<li><strong>Konsument</strong> - Użytkownik będący osobą fizyczną dokonujący czynności niezwiązanej bezpośrednio z jego działalnością gospodarczą lub zawodową.</li>
|
||||
<li><strong>Konto</strong> - zbiór zasobów i uprawnień przypisanych Użytkownikowi po rejestracji.</li>
|
||||
<li><strong>Ogłoszenie</strong> - zamieszczana przez Użytkownika oferta sprzedaży lub najmu nieruchomości.</li>
|
||||
<li><strong>Usługa promowania (Wyróżnienie)</strong> - odpłatna usługa zwiększająca widoczność Ogłoszenia.</li>
|
||||
<li><strong>Operator płatności</strong> - dostawca usług szybkich płatności obsługujący płatności w Platformie (AutoPay - Autopay S.A.).</li>
|
||||
</ul>
|
||||
|
||||
<h2>§ 3. Rodzaje i zakres usług</h2>
|
||||
<ol>
|
||||
<li>Platforma umożliwia w szczególności: przeglądanie i wyszukiwanie ogłoszeń nieruchomości, <strong>bezpłatne dodawanie ogłoszeń</strong> sprzedaży i najmu, prowadzenie Konta, zapisywanie ofert do ulubionych, ustawianie alertów cenowych, korzystanie z narzędzi (m.in. orientacyjna wycena, kalkulator zdolności), kontakt między Użytkownikami oraz odpłatne <strong>promowanie ogłoszeń</strong>.</li>
|
||||
<li>Dodawanie ogłoszeń jest bezpłatne i nie wiąże się z prowizją od transakcji.</li>
|
||||
<li>Usługi płatne (promowanie, pakiety promowań) są świadczone zgodnie z § 8 i cennikiem prezentowanym w Platformie.</li>
|
||||
<li>Narzędzia analityczne i wyceny mają charakter wyłącznie poglądowy i nie stanowią oferty, porady ani operatu szacunkowego w rozumieniu przepisów prawa.</li>
|
||||
</ol>
|
||||
|
||||
<h2>§ 4. Wymagania techniczne</h2>
|
||||
<ol>
|
||||
<li>Do korzystania z Platformy niezbędne są: urządzenie z dostępem do Internetu, aktualna przeglądarka internetowa z obsługą JavaScript i plików cookie oraz aktywne konto poczty elektronicznej.</li>
|
||||
<li>Usługodawca nie ponosi odpowiedzialności za problemy techniczne leżące po stronie Użytkownika lub dostawców usług telekomunikacyjnych.</li>
|
||||
</ol>
|
||||
|
||||
<h2>§ 5. Rejestracja i Konto</h2>
|
||||
<ol>
|
||||
<li>Założenie Konta wymaga wypełnienia formularza rejestracji oraz akceptacji Regulaminu i Polityki prywatności. Możliwa jest również rejestracja i logowanie za pośrednictwem kont zewnętrznych (Google, Facebook).</li>
|
||||
<li>Użytkownik zobowiązuje się podać dane prawdziwe i aktualne oraz zabezpieczyć dane logowania przed dostępem osób trzecich.</li>
|
||||
<li>Konto jest przypisane do jednego Użytkownika; udostępnianie go osobom trzecim jest niedozwolone.</li>
|
||||
<li>Użytkownik może w każdej chwili usunąć Konto, kontaktując się z Usługodawcą lub korzystając z odpowiedniej opcji w Platformie.</li>
|
||||
</ol>
|
||||
|
||||
<h2>§ 6. Zasady publikacji ogłoszeń</h2>
|
||||
<ol>
|
||||
<li>Ogłoszenie może dotyczyć wyłącznie rzeczywistej oferty sprzedaży lub najmu nieruchomości, do której Użytkownik posiada tytuł prawny lub odpowiednie umocowanie.</li>
|
||||
<li>Treść Ogłoszenia powinna być zgodna ze stanem faktycznym, kompletna i nie może wprowadzać w błąd.</li>
|
||||
<li>Zabronione jest zamieszczanie treści bezprawnych, w szczególności: naruszających prawa osób trzecich, obraźliwych, wulgarnych, dyskryminujących, wprowadzających w błąd, o charakterze spamu lub niezwiązanych z przedmiotem Platformy.</li>
|
||||
<li>Ogłoszenia podlegają moderacji. Usługodawca może wstrzymać publikację, edytować w niezbędnym zakresie lub usunąć Ogłoszenie naruszające Regulamin lub przepisy prawa, informując o tym Użytkownika.</li>
|
||||
<li>Użytkownik udziela Usługodawcy niewyłącznej, nieodpłatnej licencji na korzystanie z treści i zdjęć zamieszczonych w Ogłoszeniu w zakresie niezbędnym do świadczenia usług (prezentacja i promocja Ogłoszenia w Platformie i kanałach powiązanych).</li>
|
||||
</ol>
|
||||
|
||||
<h2>§ 7. Odpowiedzialność</h2>
|
||||
<ol>
|
||||
<li>Usługodawca udostępnia narzędzia teleinformatyczne i nie jest stroną transakcji zawieranych między Użytkownikami.</li>
|
||||
<li>Za treść Ogłoszeń, ich zgodność z prawem oraz przebieg i skutki transakcji odpowiada Użytkownik zamieszczający Ogłoszenie.</li>
|
||||
<li>Usługodawca dokłada starań, aby Platforma działała prawidłowo, jednak nie gwarantuje nieprzerwanej dostępności i zastrzega prawo do przerw technicznych.</li>
|
||||
<li>Usługodawca działa zgodnie z ustawą o świadczeniu usług drogą elektroniczną i nie ma obowiązku uprzedniej kontroli treści; po uzyskaniu wiarygodnej wiadomości o bezprawnym charakterze treści niezwłocznie uniemożliwia do niej dostęp.</li>
|
||||
</ol>
|
||||
|
||||
<h2>§ 8. Promowanie ogłoszeń (usługi płatne)</h2>
|
||||
<ol>
|
||||
<li>Użytkownik może odpłatnie wyróżnić Ogłoszenie na czas określony (np. 4, 14 lub 30 dni) zgodnie z planami dostępnymi w Platformie. Wyróżnione Ogłoszenia prezentowane są wyżej na listach wyników.</li>
|
||||
<li>Dostępny jest również zakup pakietu promowań (np. 5 lub 10 sztuk) w cenie promocyjnej; zakupione kredyty pozwalają wyróżnić dowolne własne Ogłoszenie zgodnie z wybranym planem czasowym.</li>
|
||||
<li>Ceny prezentowane w Platformie są cenami brutto wyrażonymi w złotych polskich (PLN).</li>
|
||||
<li>Usługa promowania rozpoczyna się niezwłocznie po zaksięgowaniu płatności i trwa przez wybrany okres.</li>
|
||||
</ol>
|
||||
|
||||
<h2>§ 9. Płatności</h2>
|
||||
<ol>
|
||||
<li>Płatności za usługi płatne obsługiwane są przez zewnętrznego Operatora płatności (AutoPay - Autopay S.A.), umożliwiającego m.in. płatność BLIK, kartą płatniczą oraz szybkim przelewem.</li>
|
||||
<li>Rozliczenie następuje w momencie zakupu. Na żądanie Użytkownika Usługodawca wystawia dokument potwierdzający zakup zgodnie z obowiązującymi przepisami.</li>
|
||||
<li>Usługodawca nie przechowuje pełnych danych kart płatniczych - są one przetwarzane wyłącznie przez Operatora płatności w bezpiecznym środowisku.</li>
|
||||
</ol>
|
||||
|
||||
<h2>§ 10. Odstąpienie od umowy (Konsument)</h2>
|
||||
<ol>
|
||||
<li>Konsument, który zawarł umowę na odległość, może od niej odstąpić bez podania przyczyny w terminie 14 dni.</li>
|
||||
<li>Rozpoczęcie świadczenia usługi promowania przed upływem terminu na odstąpienie następuje na wyraźne żądanie Konsumenta; Konsument przyjmuje do wiadomości, że po pełnym wykonaniu usługi traci prawo odstąpienia, a przy częściowym wykonaniu zwrot pomniejsza się proporcjonalnie do spełnionego świadczenia (art. 35 ustawy o prawach konsumenta).</li>
|
||||
<li>Oświadczenie o odstąpieniu można złożyć na adres e-mail: {PROVIDER.email}.</li>
|
||||
</ol>
|
||||
|
||||
<h2>§ 11. Reklamacje</h2>
|
||||
<ol>
|
||||
<li>Reklamacje dotyczące usług można składać na adres e-mail {PROVIDER.email}, wskazując dane Użytkownika i opis zastrzeżeń.</li>
|
||||
<li>Usługodawca rozpatruje reklamację w terminie do 14 dni i informuje Użytkownika o wyniku.</li>
|
||||
</ol>
|
||||
|
||||
<h2>§ 12. Dane osobowe</h2>
|
||||
<p>Zasady przetwarzania danych osobowych określa <Link to={ROUTES.privacy}>Polityka prywatności</Link>. Administratorem danych jest Usługodawca.</p>
|
||||
|
||||
<h2>§ 13. Pliki cookie</h2>
|
||||
<p>Platforma wykorzystuje pliki cookie zgodnie z Polityką prywatności. Podczas pierwszej wizyty Użytkownik wyraża zgodę na wykorzystanie plików cookie lub ogranicza ją do plików niezbędnych.</p>
|
||||
|
||||
<h2>§ 14. Prawa autorskie</h2>
|
||||
<p>Platforma, jej układ, logotyp oraz oprogramowanie podlegają ochronie prawnej i stanowią własność Usługodawcy lub podmiotów, z którymi Usługodawca współpracuje. Kopiowanie lub wykorzystywanie bez zgody jest zabronione.</p>
|
||||
|
||||
<h2>§ 15. Pozasądowe rozwiązywanie sporów</h2>
|
||||
<p>Konsument może skorzystać z pozasądowych sposobów rozpatrywania reklamacji i dochodzenia roszczeń, w tym z platformy ODR Komisji Europejskiej dostępnej pod adresem ec.europa.eu/consumers/odr oraz z pomocy powiatowego (miejskiego) rzecznika konsumentów.</p>
|
||||
|
||||
<h2>§ 16. Zmiany Regulaminu i postanowienia końcowe</h2>
|
||||
<ol>
|
||||
<li>Usługodawca może zmienić Regulamin z ważnych przyczyn (m.in. zmiana przepisów, zakresu usług), informując Użytkowników z odpowiednim wyprzedzeniem.</li>
|
||||
<li>W sprawach nieuregulowanych stosuje się przepisy prawa polskiego, w szczególności Kodeksu cywilnego, ustawy o świadczeniu usług drogą elektroniczną oraz ustawy o prawach konsumenta.</li>
|
||||
<li>Regulamin obowiązuje od dnia publikacji.</li>
|
||||
</ol>
|
||||
</LegalPage>
|
||||
);
|
||||
}
|
||||
|
||||
export function PrivacyPolicyPage() {
|
||||
return (
|
||||
<LegalPage
|
||||
title="Polityka prywatności"
|
||||
subtitle="Informacje o przetwarzaniu danych osobowych oraz wykorzystaniu plików cookie na platformie Polska Lokalnie."
|
||||
>
|
||||
<h2>1. Administrator danych</h2>
|
||||
<p>Administratorem danych osobowych jest <strong>{PROVIDER.legal}</strong>, {PROVIDER.address}, NIP: {PROVIDER.nip}. Kontakt w sprawach danych osobowych: {PROVIDER.email}.</p>
|
||||
|
||||
<h2>2. Jakie dane przetwarzamy</h2>
|
||||
<ul>
|
||||
<li>dane podane przy rejestracji i w profilu (imię i nazwisko lub nazwa, adres e-mail, numer telefonu, dane firmowe),</li>
|
||||
<li>dane zawarte w ogłoszeniach i wiadomościach,</li>
|
||||
<li>dane dotyczące płatności za usługi płatne (bez pełnych danych kart płatniczych),</li>
|
||||
<li>dane techniczne i o aktywności (adres IP, identyfikatory urządzenia, pliki cookie, logi).</li>
|
||||
</ul>
|
||||
|
||||
<h2>3. Cele i podstawy prawne</h2>
|
||||
<ul>
|
||||
<li>świadczenie usług i prowadzenie Konta - art. 6 ust. 1 lit. b RODO (wykonanie umowy),</li>
|
||||
<li>obsługa płatności i rozliczeń - art. 6 ust. 1 lit. b i c RODO,</li>
|
||||
<li>obowiązki prawne (m.in. rachunkowe, reklamacje) - art. 6 ust. 1 lit. c RODO,</li>
|
||||
<li>marketing własny, statystyki i bezpieczeństwo - art. 6 ust. 1 lit. f RODO (prawnie uzasadniony interes),</li>
|
||||
<li>działania marketingowe realizowane na podstawie zgody (np. newsletter) - art. 6 ust. 1 lit. a RODO.</li>
|
||||
</ul>
|
||||
|
||||
<h2>4. Odbiorcy danych</h2>
|
||||
<p>Dane mogą być przekazywane podmiotom przetwarzającym je na zlecenie Administratora, w szczególności: dostawcy hostingu {PROVIDER.hosting}, Operatorowi płatności AutoPay (Autopay S.A.) w zakresie realizacji płatności, dostawcom usług e-mail i SMS oraz podmiotom świadczącym wsparcie techniczne - wyłącznie w zakresie niezbędnym i na podstawie odpowiednich umów powierzenia.</p>
|
||||
|
||||
<h2>5. Okres przechowywania</h2>
|
||||
<p>Dane przechowujemy przez czas trwania umowy (posiadania Konta), a po jej zakończeniu przez okres wymagany przepisami (m.in. rozliczeniowymi) lub do przedawnienia roszczeń. Dane przetwarzane na podstawie zgody - do jej wycofania.</p>
|
||||
|
||||
<h2>6. Prawa osób, których dane dotyczą</h2>
|
||||
<p>Przysługuje Państwu prawo dostępu do danych, ich sprostowania, usunięcia, ograniczenia przetwarzania, przenoszenia, wniesienia sprzeciwu oraz cofnięcia zgody w dowolnym momencie (bez wpływu na zgodność z prawem wcześniejszego przetwarzania). Mają Państwo także prawo wniesienia skargi do Prezesa Urzędu Ochrony Danych Osobowych (ul. Stawki 2, 00-193 Warszawa).</p>
|
||||
|
||||
<h2>7. Przekazywanie poza EOG</h2>
|
||||
<p>Dane są przetwarzane na terenie Europejskiego Obszaru Gospodarczego, a serwery Platformy znajdują się fizycznie na terytorium Rzeczypospolitej Polskiej. W razie przekazania danych poza EOG stosujemy odpowiednie zabezpieczenia (m.in. standardowe klauzule umowne).</p>
|
||||
|
||||
<h2>8. Pliki cookie</h2>
|
||||
<ul>
|
||||
<li><strong>Niezbędne</strong> - konieczne do działania Platformy (logowanie, sesja, bezpieczeństwo). Nie wymagają zgody.</li>
|
||||
<li><strong>Analityczne</strong> - pomagają zrozumieć sposób korzystania z Platformy i go ulepszać.</li>
|
||||
<li><strong>Marketingowe/funkcjonalne</strong> - umożliwiają dopasowanie treści i zapamiętanie preferencji.</li>
|
||||
</ul>
|
||||
<p>Zgodę na pliki inne niż niezbędne wyrażają Państwo w banerze cookie podczas pierwszej wizyty; można ją w każdej chwili zmienić w ustawieniach przeglądarki. Ograniczenie plików cookie może wpłynąć na dostępność części funkcji.</p>
|
||||
|
||||
<h2>9. Bezpieczeństwo</h2>
|
||||
<p>Stosujemy środki techniczne i organizacyjne odpowiadające ryzyku, w tym szyfrowanie transmisji (SSL/TLS) oraz kontrolę dostępu do danych.</p>
|
||||
|
||||
<h2>10. Zmiany polityki</h2>
|
||||
<p>Polityka może być aktualizowana. Aktualna wersja jest zawsze dostępna w Platformie wraz z datą ostatniej aktualizacji.</p>
|
||||
</LegalPage>
|
||||
);
|
||||
}
|
||||
|
||||
const COOKIE_CONSENT_KEY = 'polskalokalnie-cookie-consent';
|
||||
const COOKIE_OPEN_EVENT = 'pl-cookie-open';
|
||||
|
||||
// Ponowne otwarcie ustawień plików cookie (np. z linku w stopce).
|
||||
export function openCookieSettings() {
|
||||
try {
|
||||
window.localStorage.removeItem(COOKIE_CONSENT_KEY);
|
||||
} catch {
|
||||
/* ignorujemy brak dostępu do localStorage */
|
||||
}
|
||||
window.dispatchEvent(new Event(COOKIE_OPEN_EVENT));
|
||||
}
|
||||
|
||||
// Baner zgody na pliki cookie - pojawia się przy pierwszej wizycie, dopóki Użytkownik nie dokona wyboru.
|
||||
export function CookieBanner() {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
if (!window.localStorage.getItem(COOKIE_CONSENT_KEY)) {
|
||||
setVisible(true);
|
||||
}
|
||||
} catch {
|
||||
setVisible(true);
|
||||
}
|
||||
const open = () => setVisible(true);
|
||||
window.addEventListener(COOKIE_OPEN_EVENT, open);
|
||||
return () => window.removeEventListener(COOKIE_OPEN_EVENT, open);
|
||||
}, []);
|
||||
|
||||
const decide = (choice: 'all' | 'essential') => {
|
||||
try {
|
||||
window.localStorage.setItem(COOKIE_CONSENT_KEY, choice);
|
||||
} catch {
|
||||
/* brak dostępu do localStorage - baner po prostu zniknie na tej sesji */
|
||||
}
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
if (!visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="cookie-banner" role="dialog" aria-live="polite" aria-label="Zgoda na pliki cookie">
|
||||
<div className="cookie-banner-inner">
|
||||
<div className="cookie-banner-text">
|
||||
<strong>Dbamy o Twoją prywatność</strong>
|
||||
<p>
|
||||
Używamy plików cookie, aby platforma działała poprawnie, oraz - za Twoją zgodą - do celów analitycznych
|
||||
i marketingowych. Szczegóły znajdziesz w <Link to={ROUTES.privacy}>Polityce prywatności</Link> i{' '}
|
||||
<Link to={ROUTES.terms}>Regulaminie</Link>.
|
||||
</p>
|
||||
</div>
|
||||
<div className="cookie-banner-actions">
|
||||
<button type="button" className="cookie-btn cookie-btn-ghost" onClick={() => decide('essential')}>
|
||||
Tylko niezbędne
|
||||
</button>
|
||||
<button type="button" className="cookie-btn cookie-btn-primary" onClick={() => decide('all')}>
|
||||
Akceptuję wszystkie
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
// Wspoldzielone narzedzia do obrazow (kompresja przy wgrywaniu).
|
||||
|
||||
/**
|
||||
* Kompresja obrazu przy wgrywaniu: jesli szerokosc przekracza maxWidth, skalujemy do maxWidth
|
||||
* (proporcjonalnie), inaczej zostawiamy oryginalny rozmiar. Zwraca dataURL JPEG. Gdy cos zawiedzie,
|
||||
* wraca obiektowy URL oryginalu, zeby dodawanie zdjec zawsze dzialalo.
|
||||
*/
|
||||
export async function compressImageFile(file: File, maxWidth = 1024, quality = 0.82): Promise<string> {
|
||||
try {
|
||||
const bitmap = await createImageBitmap(file);
|
||||
const scale = Math.min(1, maxWidth / bitmap.width);
|
||||
const width = Math.max(1, Math.round(bitmap.width * scale));
|
||||
const height = Math.max(1, Math.round(bitmap.height * scale));
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) {
|
||||
return URL.createObjectURL(file);
|
||||
}
|
||||
ctx.drawImage(bitmap, 0, 0, width, height);
|
||||
bitmap.close();
|
||||
return canvas.toDataURL('image/jpeg', quality);
|
||||
} catch {
|
||||
return URL.createObjectURL(file);
|
||||
}
|
||||
}
|
||||
@@ -29,6 +29,10 @@ export const ROUTES = {
|
||||
accountProfileEdit: '/konto/profil/edycja',
|
||||
accountPublicProfile: '/konto/profil',
|
||||
accountHelpContact: '/konto/pomoc',
|
||||
terms: '/regulamin',
|
||||
privacy: '/polityka-prywatnosci',
|
||||
activation: '/aktywacja/:token',
|
||||
passwordReset: '/reset-hasla/:token',
|
||||
notifications: '/powiadomienia',
|
||||
favorites: '/ulubione',
|
||||
messages: '/wiadomosci',
|
||||
@@ -89,7 +93,8 @@ export const ADMIN_TAB_PATHS = {
|
||||
forbiddenWords: 'zakazane-slowa',
|
||||
leads: 'leady',
|
||||
campaigns: 'kampanie',
|
||||
mailConfig: 'konfiguracja-wysylki',
|
||||
smtpConfig: 'konfiguracja-smtp',
|
||||
smsConfig: 'konfiguracja-sms',
|
||||
} as const;
|
||||
|
||||
export type AdminTabKey = keyof typeof ADMIN_TAB_PATHS;
|
||||
|
||||
+787
-36
@@ -3312,12 +3312,11 @@ svg {
|
||||
}
|
||||
|
||||
.satellite-tiles {
|
||||
height: 640px;
|
||||
left: 50%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 640px;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.satellite-tiles img {
|
||||
@@ -12610,45 +12609,48 @@ svg {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.social-login-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.social-login {
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dfe5ed;
|
||||
border-radius: 6px;
|
||||
color: #142238;
|
||||
border: 1px solid #dce4ec;
|
||||
border-radius: 10px;
|
||||
color: #24344b;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
gap: 10px;
|
||||
height: 42px;
|
||||
font-weight: 800;
|
||||
gap: 9px;
|
||||
height: 46px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.google-mark,
|
||||
.facebook-mark {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
flex: 0 0 18px;
|
||||
font-size: 14px;
|
||||
font-weight: 950;
|
||||
.social-login:hover:not(:disabled) {
|
||||
background: #f7f9fc;
|
||||
border-color: #c4d2e2;
|
||||
box-shadow: 0 2px 10px rgba(20, 34, 58, 0.07);
|
||||
}
|
||||
|
||||
.social-login:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.social-login-icon {
|
||||
flex: 0 0 auto;
|
||||
height: 18px;
|
||||
place-items: center;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.google-mark {
|
||||
color: #1a73e8;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.facebook-mark {
|
||||
background: #1877f2;
|
||||
border-radius: 999px;
|
||||
color: #ffffff;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
@media (max-width: 400px) {
|
||||
.social-login-row { flex-direction: column; }
|
||||
}
|
||||
|
||||
.login-security-note {
|
||||
@@ -27542,13 +27544,18 @@ a.listing-detail-back {
|
||||
.ld-headline-price strong { color: #129357; font-size: 28px; font-weight: 900; }
|
||||
.ld-headline-price span { color: #6b7a8d; font-size: 14px; font-weight: 700; }
|
||||
|
||||
/* Zdjecie glowne bylo za duze po poszerzeniu strony - ograniczamy wysokosc.
|
||||
object-fit: contain, aby cale zdjecie bylo widoczne (bez przycinania); tlo wypelnia letterbox. */
|
||||
.listing-detail-gallery-main-image { background: #eef2f6; height: clamp(300px, 40vw, 470px); }
|
||||
/* Ramka galerii dopasowuje sie do proporcji aktualnego zdjecia (aspect-ratio nadawane inline z JS),
|
||||
dzieki czemu kadr przylega do zdjecia - brak pustych paskow po bokach. Wysokosc ograniczona. */
|
||||
.listing-detail-gallery-main-image {
|
||||
aspect-ratio: 1.6;
|
||||
background: #0f1b2d;
|
||||
max-height: 620px;
|
||||
width: 100%;
|
||||
}
|
||||
.listing-detail-gallery-main-image img {
|
||||
aspect-ratio: auto;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -27765,3 +27772,747 @@ a.listing-detail-back {
|
||||
/* Karta "ostatnio przegladane" jest linkiem do oferty. */
|
||||
.listing-card-link { color: inherit; text-decoration: none; }
|
||||
.listing-card-link:hover { box-shadow: 0 10px 26px rgba(20, 34, 58, 0.12); }
|
||||
|
||||
/* ===== BANERY / PROMOCJE (sloty reklamowe) =====
|
||||
Publiczne miejsca reklamowe na stronie glownej i karcie oferty + panel admina. */
|
||||
|
||||
/* Wrapper slotow pelnoszerokosciowych (hero/top) - trzyma szerokosc obszaru roboczego. */
|
||||
.home-banner-wrap {
|
||||
margin: 0 auto;
|
||||
max-width: var(--workspace-max);
|
||||
padding: 0 var(--workspace-pad);
|
||||
width: 100%;
|
||||
}
|
||||
.home-banner-wrap:not(:empty) { margin-top: 22px; }
|
||||
.banner-slot-home_middle { display: block; margin: 22px 0; }
|
||||
.banner-slot-sidebar { display: block; margin-top: 16px; }
|
||||
|
||||
.promo-banner {
|
||||
align-items: flex-end;
|
||||
background: linear-gradient(120deg, #0f2f5b 0%, #12a764 135%);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(15, 31, 58, 0.12);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
min-height: 140px;
|
||||
overflow: hidden;
|
||||
padding: 22px 26px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.promo-banner:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(15, 31, 58, 0.18); }
|
||||
.promo-banner.has-image { background-color: #0f1b2d; }
|
||||
|
||||
.promo-banner-tag {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 999px;
|
||||
color: #33475f;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.03em;
|
||||
padding: 3px 9px;
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
text-transform: uppercase;
|
||||
top: 12px;
|
||||
}
|
||||
.promo-banner-body { display: flex; flex-direction: column; gap: 6px; max-width: 640px; position: relative; z-index: 1; }
|
||||
.promo-banner-title { font-size: 22px; font-weight: 950; line-height: 1.2; }
|
||||
.promo-banner-sub { font-size: 14px; font-weight: 600; opacity: 0.94; }
|
||||
.promo-banner-cta {
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
background: #ffffff;
|
||||
border-radius: 999px;
|
||||
color: #0f2f5b;
|
||||
display: inline-flex;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
padding: 9px 16px;
|
||||
}
|
||||
.promo-banner:hover .promo-banner-cta { background: #eafaf1; }
|
||||
|
||||
.banner-slot-sidebar .promo-banner { min-height: 210px; padding: 18px 20px; }
|
||||
.banner-slot-sidebar .promo-banner-title { font-size: 18px; }
|
||||
.banner-slot-sidebar .promo-banner-sub { font-size: 13px; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.promo-banner { min-height: 120px; padding: 18px; }
|
||||
.promo-banner-title { font-size: 18px; }
|
||||
}
|
||||
|
||||
/* --- Panel admina: banery --- */
|
||||
.mkt-col-span { grid-column: 1 / -1; }
|
||||
.admin-btn.ghost { background: #ffffff; }
|
||||
|
||||
.banner-image-row {
|
||||
border-top: 1px solid #eef2f6;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 12px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
.banner-image-preview {
|
||||
align-items: center;
|
||||
background: #f4f7fa;
|
||||
border: 1px solid #dce4ec;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex: 0 0 260px;
|
||||
height: 130px;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.banner-image-preview img { height: 100%; object-fit: cover; width: 100%; }
|
||||
.banner-image-empty { align-items: center; color: #8aa0b6; display: inline-flex; font-size: 13px; font-weight: 700; gap: 8px; }
|
||||
.banner-image-empty svg { width: 16px; height: 16px; }
|
||||
.banner-image-actions { align-items: flex-start; display: flex; flex-direction: column; gap: 8px; }
|
||||
.banner-upload-btn { align-items: center; cursor: pointer; display: inline-flex; gap: 7px; }
|
||||
.banner-upload-btn svg { height: 15px; width: 15px; }
|
||||
.banner-image-hint { color: #6b7f96; font-size: 12px; max-width: 420px; }
|
||||
.banner-slot-hint { align-items: center; color: #46617d; display: flex; font-size: 12px; gap: 7px; margin: 4px 0 0; }
|
||||
.banner-slot-hint svg { height: 14px; width: 14px; }
|
||||
|
||||
.banner-admin-list { display: grid; gap: 18px; }
|
||||
.banner-admin-group-title { color: #6b7f96; font-size: 12px; font-weight: 800; letter-spacing: 0.03em; margin: 0 0 8px; text-transform: uppercase; }
|
||||
.banner-admin-row {
|
||||
align-items: center;
|
||||
border: 1px solid #e6edf4;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
margin-bottom: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
.banner-admin-row.is-off { opacity: 0.62; }
|
||||
.banner-admin-thumb {
|
||||
align-items: center;
|
||||
background: linear-gradient(120deg, #0f2f5b, #12a764);
|
||||
border-radius: 8px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex: 0 0 92px;
|
||||
height: 60px;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.banner-admin-thumb img { height: 100%; object-fit: cover; width: 100%; }
|
||||
.banner-admin-thumb-text svg { height: 20px; width: 20px; }
|
||||
.banner-admin-info { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
|
||||
.banner-admin-info strong { color: #14223a; font-size: 14px; }
|
||||
.banner-admin-info > span { color: #5a6b80; font-size: 12px; }
|
||||
.banner-admin-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 3px; }
|
||||
.banner-admin-link { color: #12a764; font-size: 11px; overflow: hidden; text-overflow: ellipsis; max-width: 260px; white-space: nowrap; }
|
||||
.banner-admin-stats { color: #7a8aa0; font-size: 11px; font-weight: 700; }
|
||||
.banner-status { border-radius: 999px; font-size: 11px; font-weight: 800; padding: 2px 8px; }
|
||||
.banner-status.on { background: #e3f4ec; color: #12a764; }
|
||||
.banner-status.off { background: #f1f4f8; color: #8090a4; }
|
||||
.banner-admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.banner-image-row { flex-direction: column; }
|
||||
.banner-image-preview { flex-basis: auto; width: 100%; }
|
||||
.banner-admin-row { flex-wrap: wrap; }
|
||||
}
|
||||
|
||||
/* ===== PROMOWANIE OFERT (modal, odznaki, panel admina) ===== */
|
||||
.listing-promote-modal {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e4e9f1;
|
||||
border-radius: 16px;
|
||||
max-width: 560px;
|
||||
padding: 22px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.listing-promote-icon {
|
||||
align-items: center;
|
||||
background: linear-gradient(120deg, #0f2f5b, #12a764);
|
||||
border-radius: 14px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
height: 46px;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
width: 46px;
|
||||
}
|
||||
.listing-promote-icon svg { height: 22px; width: 22px; }
|
||||
.listing-promote-modal h2 { color: #13243d; font-size: 20px; margin: 0 0 6px; }
|
||||
|
||||
.promote-plans { display: grid; gap: 8px; margin: 14px 0 6px; }
|
||||
.promote-plans > strong { color: #24374d; font-size: 13px; }
|
||||
.promote-plan {
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1.5px solid #dce4ec;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
text-align: left;
|
||||
transition: border-color 0.12s ease, background 0.12s ease;
|
||||
}
|
||||
.promote-plan:hover { border-color: #b7c6d8; }
|
||||
.promote-plan.active { background: #eafaf1; border-color: #12a764; }
|
||||
.promote-plan-name { color: #14223a; font-weight: 850; }
|
||||
.promote-plan-days { color: #6b7f96; font-size: 12px; font-weight: 700; }
|
||||
.promote-plan-price { color: #0f7a48; font-weight: 950; margin-left: auto; }
|
||||
|
||||
.promote-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
|
||||
.promote-pay-btn {
|
||||
align-items: center;
|
||||
background: #12a764;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
flex: 1 1 220px;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.promote-pay-btn:hover { background: #0f8f55; }
|
||||
.promote-pay-btn:disabled { cursor: default; opacity: 0.6; }
|
||||
.promote-credit-btn {
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1.5px solid #12a764;
|
||||
border-radius: 10px;
|
||||
color: #0f7a48;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
flex: 1 1 180px;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.promote-credit-btn:hover { background: #eafaf1; }
|
||||
.promote-credit-btn svg, .promote-pay-btn svg { height: 15px; width: 15px; }
|
||||
|
||||
.promote-packages { border-top: 1px solid #eef2f6; margin-top: 6px; padding-top: 14px; }
|
||||
.promote-packages > strong { color: #24374d; font-size: 13px; }
|
||||
.promote-packages-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
|
||||
.promote-package {
|
||||
background: #f6f9fc;
|
||||
border: 1.5px solid #dce4ec;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex: 1 1 160px;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
.promote-package:hover { border-color: #12a764; }
|
||||
.promote-package:disabled { cursor: default; opacity: 0.6; }
|
||||
.promote-package-qty { color: #12a764; font-size: 16px; font-weight: 950; }
|
||||
.promote-package-name { color: #14223a; font-size: 12px; font-weight: 700; }
|
||||
.promote-package-price { color: #14223a; font-weight: 900; margin-top: 4px; }
|
||||
.promote-package-unit { color: #7a8aa0; font-size: 11px; }
|
||||
|
||||
.promote-note { align-items: center; color: #7a8798; display: flex; font-size: 12px; font-weight: 700; gap: 7px; margin: 12px 0 0; }
|
||||
.promote-note svg { height: 13px; width: 13px; }
|
||||
.promote-done { align-items: center; color: #0f7a48; display: flex; font-size: 15px; font-weight: 800; gap: 9px; margin: 16px 0; }
|
||||
.promote-done svg { color: #12a764; height: 20px; width: 20px; }
|
||||
|
||||
/* Przycisk "Promuj" na liscie moich ofert */
|
||||
.promote-action-btn {
|
||||
align-items: center;
|
||||
background: linear-gradient(120deg, #0f2f5b, #12a764);
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
color: #ffffff !important;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-weight: 850;
|
||||
gap: 6px;
|
||||
}
|
||||
.promote-action-btn svg { height: 14px; width: 14px; }
|
||||
|
||||
/* Odznaki "Wyroznione" */
|
||||
.listing-promoted-tag {
|
||||
align-items: center;
|
||||
background: #eafaf1;
|
||||
border-radius: 999px;
|
||||
color: #0f7a48;
|
||||
display: inline-flex;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 850;
|
||||
gap: 4px;
|
||||
padding: 2px 9px;
|
||||
}
|
||||
.listing-promoted-tag svg { height: 12px; width: 12px; }
|
||||
.ld-badge-promoted { align-items: center; background: #12a764; color: #ffffff; display: inline-flex; gap: 5px; }
|
||||
.ld-badge-promoted svg { height: 13px; width: 13px; }
|
||||
.result-promoted-badge {
|
||||
align-items: center;
|
||||
background: #12a764;
|
||||
border-radius: 999px;
|
||||
bottom: 12px;
|
||||
color: #ffffff;
|
||||
display: inline-flex;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
gap: 5px;
|
||||
left: 12px;
|
||||
padding: 4px 10px;
|
||||
position: absolute;
|
||||
box-shadow: 0 3px 10px rgba(15, 31, 58, 0.22);
|
||||
}
|
||||
.result-promoted-badge svg { height: 12px; width: 12px; }
|
||||
|
||||
.publish-promote-cta {
|
||||
align-items: center;
|
||||
background: linear-gradient(120deg, #0f2f5b 0%, #12a764 130%);
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
gap: 9px;
|
||||
justify-content: center;
|
||||
margin: 4px auto 14px;
|
||||
max-width: 520px;
|
||||
padding: 13px 18px;
|
||||
width: 100%;
|
||||
}
|
||||
.publish-promote-cta:hover { filter: brightness(1.05); }
|
||||
.publish-promote-cta svg { height: 16px; width: 16px; }
|
||||
|
||||
/* Panel admina - listy planow/pakietow */
|
||||
.promo-admin-list { display: grid; gap: 8px; margin-top: 14px; }
|
||||
.promo-admin-row {
|
||||
align-items: center;
|
||||
border: 1px solid #e6edf4;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 14px;
|
||||
padding: 11px 13px;
|
||||
}
|
||||
.promo-admin-row.is-off { opacity: 0.62; }
|
||||
.promo-admin-info { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 160px; }
|
||||
.promo-admin-info strong { color: #14223a; font-size: 14px; }
|
||||
.promo-admin-info span { color: #5a6b80; font-size: 12px; }
|
||||
.promo-admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.promo-orders-table td, .promo-orders-table th { white-space: nowrap; }
|
||||
|
||||
/* ===== STRONY PRAWNE (Regulamin, Polityka prywatnosci) ===== */
|
||||
.legal-page { background: #f5f7fa; padding: 30px 0 50px; }
|
||||
.legal-shell {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e3e9f0;
|
||||
border-radius: 16px;
|
||||
margin: 0 auto;
|
||||
max-width: 900px;
|
||||
padding: 34px clamp(20px, 4vw, 44px);
|
||||
width: calc(100% - 2 * var(--workspace-pad));
|
||||
}
|
||||
.legal-head { border-bottom: 1px solid #eef2f6; margin-bottom: 18px; padding-bottom: 16px; }
|
||||
.legal-brand { color: #13243d; font-size: 14px; font-weight: 950; letter-spacing: -0.01em; margin: 0 0 10px; }
|
||||
.legal-brand span { color: #cdd6e2; font-weight: 400; margin: 0 4px; }
|
||||
.legal-head h1 { color: #13243d; font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 8px; }
|
||||
.legal-head > p { color: #4f6277; font-size: 15px; margin: 0; }
|
||||
.legal-updated { color: #8a99ad !important; font-size: 13px !important; font-weight: 700; margin-top: 8px !important; }
|
||||
.legal-body { color: #2b3b52; font-size: 15px; line-height: 1.7; }
|
||||
.legal-body h2 { color: #13243d; font-size: 18px; font-weight: 850; margin: 26px 0 10px; }
|
||||
.legal-body p { margin: 0 0 12px; }
|
||||
.legal-body ul, .legal-body ol { margin: 0 0 14px; padding-left: 22px; }
|
||||
.legal-body li { margin: 6px 0; }
|
||||
.legal-body a { color: #12a764; font-weight: 700; text-decoration: underline; }
|
||||
.legal-note {
|
||||
background: #f6f9fc;
|
||||
border: 1px dashed #cdd9e6;
|
||||
border-radius: 10px;
|
||||
color: #6b7f96;
|
||||
font-size: 13px;
|
||||
margin-top: 24px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
/* ===== STOPKA SERWISU ===== */
|
||||
.site-footer { background: #0f2340; color: #c6d3e4; margin-top: 40px; }
|
||||
.site-footer-inner {
|
||||
display: grid;
|
||||
gap: 32px 40px;
|
||||
grid-template-columns: 1.4fr 3fr;
|
||||
margin: 0 auto;
|
||||
max-width: var(--workspace-max);
|
||||
padding: 42px var(--workspace-pad) 30px;
|
||||
width: 100%;
|
||||
}
|
||||
.footer-brand { max-width: 340px; }
|
||||
.footer-logo { color: #ffffff; font-size: 22px; font-weight: 950; letter-spacing: -0.02em; text-decoration: none; }
|
||||
.footer-logo span { color: #35d38a; }
|
||||
.footer-tagline { color: #a9bace; font-size: 14px; line-height: 1.6; margin: 12px 0 14px; }
|
||||
.footer-badge {
|
||||
background: rgba(53, 211, 138, 0.14);
|
||||
border-radius: 999px;
|
||||
color: #6ee7ad;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
.footer-cols { display: grid; gap: 24px 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.footer-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
|
||||
.footer-col h3 { color: #ffffff; font-size: 13px; font-weight: 850; letter-spacing: 0.04em; margin: 0 0 3px; text-transform: uppercase; }
|
||||
.footer-col a, .footer-link-btn {
|
||||
color: #b7c6d8;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
transition: color 0.12s ease;
|
||||
}
|
||||
.footer-col a:hover, .footer-link-btn:hover { color: #35d38a; }
|
||||
.footer-link-btn {
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.footer-muted { color: #7c90a8; font-size: 13px; }
|
||||
.site-footer-bottom {
|
||||
align-items: center;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.09);
|
||||
color: #8296ae;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 12.5px;
|
||||
gap: 6px 20px;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
max-width: var(--workspace-max);
|
||||
padding: 16px var(--workspace-pad);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.site-footer-inner { grid-template-columns: 1fr; gap: 26px; }
|
||||
.footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.footer-cols { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ===== BANER ZGODY NA COOKIE ===== */
|
||||
.cookie-banner {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 14px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: 4000;
|
||||
}
|
||||
.cookie-banner-inner {
|
||||
align-items: center;
|
||||
background: #0f2340;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 12px 40px rgba(9, 20, 38, 0.35);
|
||||
color: #e5edf7;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px 22px;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
max-width: 1120px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.cookie-banner-text { flex: 1 1 340px; min-width: 0; }
|
||||
.cookie-banner-text strong { color: #ffffff; display: block; font-size: 15px; margin-bottom: 4px; }
|
||||
.cookie-banner-text p { color: #b7c6d8; font-size: 13px; line-height: 1.55; margin: 0; }
|
||||
.cookie-banner-text a { color: #35d38a; font-weight: 700; text-decoration: underline; }
|
||||
.cookie-banner-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
|
||||
.cookie-btn {
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
padding: 11px 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cookie-btn-ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.28); color: #dbe6f3; }
|
||||
.cookie-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.5); }
|
||||
.cookie-btn-primary { background: #12a764; border: 0; color: #ffffff; }
|
||||
.cookie-btn-primary:hover { background: #0f8f55; }
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.cookie-banner-actions { width: 100%; }
|
||||
.cookie-btn { flex: 1 1 auto; text-align: center; }
|
||||
}
|
||||
|
||||
/* --- Proces konta: strony statusu (aktywacja, reset hasla) + okno OTP telefonu --- */
|
||||
.auth-status-page {
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 20px;
|
||||
}
|
||||
.auth-status-card {
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
background: #fff;
|
||||
border: 1px solid #e3e8f0;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 18px 50px rgba(15, 35, 64, 0.10);
|
||||
padding: 40px 36px;
|
||||
text-align: center;
|
||||
}
|
||||
.auth-status-logo {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #0f2340;
|
||||
letter-spacing: -0.01em;
|
||||
text-decoration: none;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.auth-status-logo span { color: #12a764; }
|
||||
.auth-status-card h1 {
|
||||
font-size: 24px;
|
||||
color: #0f2340;
|
||||
margin: 6px 0 12px;
|
||||
}
|
||||
.auth-status-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto 8px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.auth-status-icon.ok { background: #e3f7ee; color: #12a764; }
|
||||
.auth-status-icon.err { background: #fdecec; color: #d64545; }
|
||||
.auth-status-lead {
|
||||
color: #4a5568;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.auth-status-hint {
|
||||
color: #7a8699;
|
||||
font-size: 13.5px;
|
||||
margin: 4px 0 12px;
|
||||
}
|
||||
.auth-status-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.auth-status-form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0f2340;
|
||||
}
|
||||
.auth-status-form input {
|
||||
height: 44px;
|
||||
border: 1px solid #d5dce6;
|
||||
border-radius: 10px;
|
||||
padding: 0 14px;
|
||||
font-size: 15px;
|
||||
background: #fff;
|
||||
color: #0f2340;
|
||||
}
|
||||
.auth-status-form input:focus {
|
||||
outline: none;
|
||||
border-color: #12a764;
|
||||
box-shadow: 0 0 0 3px rgba(18, 167, 100, 0.15);
|
||||
}
|
||||
.auth-status-error {
|
||||
color: #d64545;
|
||||
font-size: 13.5px;
|
||||
margin: 0;
|
||||
}
|
||||
.auth-status-btn {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: #12a764;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.auth-status-btn:hover { background: #0f8f56; }
|
||||
.auth-status-btn:disabled { opacity: 0.6; cursor: default; }
|
||||
.auth-status-form .auth-status-btn { margin-top: 6px; }
|
||||
|
||||
/* Okno OTP telefonu (na wspolnym backdropie .listing-delete-overlay) */
|
||||
.otp-modal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 24px 60px rgba(15, 35, 64, 0.28);
|
||||
padding: 34px 30px 26px;
|
||||
text-align: center;
|
||||
}
|
||||
.otp-modal h2 {
|
||||
font-size: 21px;
|
||||
color: #0f2340;
|
||||
margin: 6px 0 10px;
|
||||
}
|
||||
.otp-modal-icon { font-size: 38px; line-height: 1; }
|
||||
.otp-modal-lead {
|
||||
color: #4a5568;
|
||||
font-size: 14.5px;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 18px;
|
||||
}
|
||||
.otp-modal-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.otp-input {
|
||||
height: 58px;
|
||||
border: 1px solid #d5dce6;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5em;
|
||||
padding-left: 0.5em;
|
||||
color: #0f2340;
|
||||
background: #f8fafc;
|
||||
}
|
||||
.otp-input:focus {
|
||||
outline: none;
|
||||
border-color: #12a764;
|
||||
box-shadow: 0 0 0 3px rgba(18, 167, 100, 0.15);
|
||||
background: #fff;
|
||||
}
|
||||
.otp-modal-ok { color: #12a764; font-size: 13.5px; margin: 0; }
|
||||
.otp-modal-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.otp-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #12a764;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 4px 2px;
|
||||
}
|
||||
.otp-link:disabled { color: #9aa6b6; cursor: default; }
|
||||
.otp-link:hover:not(:disabled) { text-decoration: underline; }
|
||||
|
||||
/* Login: komunikat informacyjny, ponowne wyslanie linku, akcje dodatkowe */
|
||||
.login-info {
|
||||
background: #e3f7ee;
|
||||
color: #0f7a4d;
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
font-size: 13.5px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.login-resend-activation,
|
||||
.login-secondary-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
font-size: 14.5px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.login-resend-activation {
|
||||
background: #fff;
|
||||
border: 1px solid #12a764;
|
||||
color: #12a764;
|
||||
}
|
||||
.login-resend-activation:hover { background: #f0fbf5; }
|
||||
.login-secondary-btn {
|
||||
background: #eef2f8;
|
||||
border: 1px solid #d5dce6;
|
||||
color: #0f2340;
|
||||
}
|
||||
.login-secondary-btn:hover { background: #e3e9f2; }
|
||||
.login-back-link {
|
||||
display: inline-block;
|
||||
margin-top: 16px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #12a764;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login-back-link:hover { text-decoration: underline; }
|
||||
|
||||
/* Rejestracja firmy: pobranie danych z rejestru REGON (GUS) przyciskiem obok pola NIP */
|
||||
/* stretch: przycisk zawsze rowny wysokosci pola, takze w widoku mobilnym */
|
||||
.login-field-gus > div {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.login-field-gus input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
padding-right: 14px;
|
||||
}
|
||||
.gus-fetch-btn {
|
||||
flex: 0 0 auto;
|
||||
padding: 0 16px;
|
||||
border: 1px solid #12a764;
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
color: #12a764;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.login-field-hint {
|
||||
color: #647487;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin: -6px 0 0;
|
||||
}
|
||||
.gus-fetch-btn:hover:not(:disabled) { background: #f0fbf5; }
|
||||
.gus-fetch-btn:disabled {
|
||||
border-color: #d8e0ea;
|
||||
color: #9aa6b6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user