mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 17:43:47 +00:00
0a89838926
- Drop the Duotone variants (their translucent secondary fill looked murky on the dark theme) in favour of the clean regular weight across all icons - WheelIcon: PiSteeringWheel → PiDiceFive (a steering wheel made no sense for the fortune-wheel feature)
1199 lines
48 KiB
TypeScript
1199 lines
48 KiB
TypeScript
import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
|
|
import { PiCaretDown } from 'react-icons/pi';
|
|
import { useNavigate, useParams } from 'react-router';
|
|
import { useQuery, useQueries, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
adminLandingsApi,
|
|
type LandingCreateRequest,
|
|
type AdminLandingFeature,
|
|
type EditableMethodField,
|
|
type LocaleDict,
|
|
type SupportedLocale,
|
|
toLocaleDict,
|
|
} from '../api/landings';
|
|
import { tariffsApi, TariffListItem, PeriodPrice } from '../api/tariffs';
|
|
import { formatPrice } from '../utils/format';
|
|
import { useCurrency } from '../hooks/useCurrency';
|
|
import { adminPaymentMethodsApi } from '../api/adminPaymentMethods';
|
|
import { Toggle, LocaleTabs, LocalizedInput } from '../components/admin';
|
|
import { BackgroundConfigEditor } from '../components/admin/BackgroundConfigEditor';
|
|
import type { AnimationConfig } from '@/components/ui/backgrounds/types';
|
|
import { DEFAULT_ANIMATION_CONFIG } from '@/components/ui/backgrounds/types';
|
|
import { SortableFeatureItem, type FeatureWithId } from '../components/admin/SortableFeatureItem';
|
|
import {
|
|
SortableSelectedMethodCard,
|
|
type MethodWithId,
|
|
} from '../components/admin/SortableSelectedMethodCard';
|
|
import { useNotify } from '@/platform';
|
|
import { usePlatform } from '../platform/hooks/usePlatform';
|
|
import { getApiErrorMessage } from '../utils/api-error';
|
|
import { BackIcon, PlusIcon } from '../components/icons/LandingIcons';
|
|
import {
|
|
DndContext,
|
|
KeyboardSensor,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
type DragEndEvent,
|
|
} from '@dnd-kit/core';
|
|
import {
|
|
arrayMove,
|
|
SortableContext,
|
|
sortableKeyboardCoordinates,
|
|
verticalListSortingStrategy,
|
|
} from '@dnd-kit/sortable';
|
|
import { cn } from '../lib/utils';
|
|
import type { PaymentMethodSubOptionInfo } from '../types';
|
|
|
|
function isoToDatetimeLocal(iso: string): string {
|
|
const d = new Date(iso);
|
|
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())}:${pad(d.getSeconds())}`;
|
|
}
|
|
|
|
const ChevronDownIcon = ({ open }: { open: boolean }) => (
|
|
<PiCaretDown className={cn('h-5 w-5 transition-transform', open && 'rotate-180')} />
|
|
);
|
|
|
|
// ============ Collapsible Section ============
|
|
|
|
interface SectionProps {
|
|
title: string;
|
|
open: boolean;
|
|
onToggle: () => void;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
function Section({ title, open, onToggle, children }: SectionProps) {
|
|
return (
|
|
<div className="overflow-hidden rounded-xl border border-dark-700 bg-dark-900/50">
|
|
<button
|
|
onClick={onToggle}
|
|
className="flex w-full items-center justify-between px-4 py-3 text-start text-sm font-medium text-dark-100 hover:bg-dark-800/50"
|
|
>
|
|
{title}
|
|
<ChevronDownIcon open={open} />
|
|
</button>
|
|
{open && <div className="border-t border-dark-700 px-4 py-4">{children}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ============ Main Editor ============
|
|
|
|
export default function AdminLandingEditor() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const { id } = useParams<{ id: string }>();
|
|
const queryClient = useQueryClient();
|
|
const notify = useNotify();
|
|
const { capabilities } = usePlatform();
|
|
const isEdit = !!id;
|
|
|
|
// Прогреваем кэш курсов валют для formatPrice (preview лендинга в не-RU локали).
|
|
useCurrency();
|
|
|
|
// Section visibility
|
|
const [openSections, setOpenSections] = useState<Record<string, boolean>>({
|
|
general: true,
|
|
features: false,
|
|
tariffs: false,
|
|
discount: false,
|
|
methods: false,
|
|
gifts: false,
|
|
background: false,
|
|
analytics: false,
|
|
footer: false,
|
|
});
|
|
|
|
const toggleSection = useCallback((key: string) => {
|
|
setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
|
|
}, []);
|
|
|
|
// Locale editing state
|
|
const [editingLocale, setEditingLocale] = useState<SupportedLocale>('ru');
|
|
|
|
// Form state — text fields are now LocaleDict
|
|
const [slug, setSlug] = useState('');
|
|
const [title, setTitle] = useState<LocaleDict>({ ru: '' });
|
|
const [subtitle, setSubtitle] = useState<LocaleDict>({});
|
|
const [isActive, setIsActive] = useState(true);
|
|
const [metaTitle, setMetaTitle] = useState<LocaleDict>({});
|
|
const [metaDescription, setMetaDescription] = useState<LocaleDict>({});
|
|
const [features, setFeatures] = useState<FeatureWithId[]>([]);
|
|
const [selectedTariffIds, setSelectedTariffIds] = useState<number[]>([]);
|
|
const [allowedPeriods, setAllowedPeriods] = useState<Record<string, number[]>>({});
|
|
const [paymentMethods, setPaymentMethods] = useState<MethodWithId[]>([]);
|
|
const [giftEnabled, setGiftEnabled] = useState(false);
|
|
const [footerText, setFooterText] = useState<LocaleDict>({});
|
|
const [customCss, setCustomCss] = useState('');
|
|
|
|
// Background config state
|
|
const [backgroundConfig, setBackgroundConfig] = useState<AnimationConfig>({
|
|
...DEFAULT_ANIMATION_CONFIG,
|
|
enabled: false,
|
|
});
|
|
|
|
// Analytics goals state
|
|
const [analyticsViewEnabled, setAnalyticsViewEnabled] = useState(false);
|
|
const [analyticsViewGoal, setAnalyticsViewGoal] = useState('landing_view');
|
|
const [analyticsClickEnabled, setAnalyticsClickEnabled] = useState(false);
|
|
const [analyticsClickGoal, setAnalyticsClickGoal] = useState('landing_pay');
|
|
const [stickyPayButton, setStickyPayButton] = useState(false);
|
|
|
|
// Discount state
|
|
const [discountPercent, setDiscountPercent] = useState<number | null>(null);
|
|
const [discountOverrides, setDiscountOverrides] = useState<Record<string, number>>({});
|
|
const [discountStartsAt, setDiscountStartsAt] = useState('');
|
|
const [discountEndsAt, setDiscountEndsAt] = useState('');
|
|
const [discountBadgeText, setDiscountBadgeText] = useState<LocaleDict>({});
|
|
|
|
// DnD sensors
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
|
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
|
|
);
|
|
|
|
// Fetch tariffs for selection
|
|
const { data: tariffsData } = useQuery({
|
|
queryKey: ['admin-tariffs'],
|
|
queryFn: () => tariffsApi.getTariffs(true),
|
|
staleTime: 30_000,
|
|
});
|
|
|
|
const allTariffs = tariffsData?.tariffs ?? [];
|
|
|
|
// Fetch system payment methods
|
|
const { data: systemMethods } = useQuery({
|
|
queryKey: ['admin-payment-methods'],
|
|
queryFn: () => adminPaymentMethodsApi.getAll(),
|
|
staleTime: 30_000,
|
|
});
|
|
|
|
const availablePaymentMethods = useMemo(
|
|
() => (systemMethods ?? []).filter((m) => m.is_enabled && m.is_provider_configured),
|
|
[systemMethods],
|
|
);
|
|
|
|
const subOptionsMap = useMemo(() => {
|
|
const map: Record<string, PaymentMethodSubOptionInfo[]> = {};
|
|
for (const m of availablePaymentMethods) {
|
|
if (m.available_sub_options && m.available_sub_options.length > 0) {
|
|
map[m.method_id] = m.available_sub_options;
|
|
}
|
|
}
|
|
return map;
|
|
}, [availablePaymentMethods]);
|
|
|
|
// Fetch tariff details for period info
|
|
const tariffDetailQueries = useQueries({
|
|
queries: selectedTariffIds.map((tariffId) => ({
|
|
queryKey: ['admin-tariff-detail', tariffId],
|
|
queryFn: () => tariffsApi.getTariff(tariffId),
|
|
staleTime: 60_000,
|
|
enabled: selectedTariffIds.includes(tariffId),
|
|
})),
|
|
});
|
|
|
|
const tariffPeriodsData = tariffDetailQueries.map((q) => q.data);
|
|
const tariffPeriodsMap = useMemo(() => {
|
|
const map: Record<number, PeriodPrice[]> = {};
|
|
tariffPeriodsData.forEach((data) => {
|
|
if (data) {
|
|
map[data.id] = data.period_prices;
|
|
}
|
|
});
|
|
return map;
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [JSON.stringify(tariffPeriodsData.map((d) => d?.id)), selectedTariffIds]);
|
|
|
|
// Fetch landing for editing
|
|
const { data: landingData } = useQuery({
|
|
queryKey: ['admin-landing', id],
|
|
queryFn: () => adminLandingsApi.get(Number(id)),
|
|
enabled: isEdit,
|
|
staleTime: 0,
|
|
gcTime: 0,
|
|
refetchOnMount: true,
|
|
refetchOnWindowFocus: false,
|
|
});
|
|
|
|
// Populate form from fetched data (only once)
|
|
const formPopulated = useRef(false);
|
|
|
|
// Reset formPopulated when navigating to a different landing
|
|
useEffect(() => {
|
|
formPopulated.current = false;
|
|
}, [id]);
|
|
|
|
useEffect(() => {
|
|
if (!landingData || formPopulated.current) return;
|
|
formPopulated.current = true;
|
|
setSlug(landingData.slug);
|
|
setTitle(toLocaleDict(landingData.title, { ru: '' }));
|
|
setSubtitle(toLocaleDict(landingData.subtitle));
|
|
setIsActive(landingData.is_active);
|
|
setMetaTitle(toLocaleDict(landingData.meta_title));
|
|
setMetaDescription(toLocaleDict(landingData.meta_description));
|
|
setFeatures(
|
|
(landingData.features ?? []).map((f) => ({
|
|
...f,
|
|
_id: crypto.randomUUID(),
|
|
title: toLocaleDict(f.title),
|
|
description: toLocaleDict(f.description),
|
|
})),
|
|
);
|
|
setSelectedTariffIds(landingData.allowed_tariff_ids ?? []);
|
|
setAllowedPeriods(landingData.allowed_periods ?? {});
|
|
setPaymentMethods(
|
|
(landingData.payment_methods ?? []).map((m) => ({
|
|
...m,
|
|
_id: crypto.randomUUID(),
|
|
min_amount_kopeks: m.min_amount_kopeks ?? null,
|
|
max_amount_kopeks: m.max_amount_kopeks ?? null,
|
|
currency: m.currency ?? null,
|
|
return_url: m.return_url ?? null,
|
|
sub_options: m.sub_options ?? null,
|
|
})),
|
|
);
|
|
setGiftEnabled(landingData.gift_enabled);
|
|
setFooterText(toLocaleDict(landingData.footer_text));
|
|
setCustomCss(landingData.custom_css ?? '');
|
|
if (landingData.background_config) {
|
|
setBackgroundConfig(landingData.background_config);
|
|
}
|
|
setDiscountPercent(landingData.discount_percent ?? null);
|
|
setDiscountOverrides(landingData.discount_overrides ?? {});
|
|
setDiscountStartsAt(
|
|
landingData.discount_starts_at ? isoToDatetimeLocal(landingData.discount_starts_at) : '',
|
|
);
|
|
setDiscountEndsAt(
|
|
landingData.discount_ends_at ? isoToDatetimeLocal(landingData.discount_ends_at) : '',
|
|
);
|
|
setDiscountBadgeText(toLocaleDict(landingData.discount_badge_text));
|
|
setAnalyticsViewEnabled(landingData.analytics_view_enabled ?? false);
|
|
setAnalyticsViewGoal(landingData.analytics_view_goal || 'landing_view');
|
|
setAnalyticsClickEnabled(landingData.analytics_click_enabled ?? false);
|
|
setAnalyticsClickGoal(landingData.analytics_click_goal || 'landing_pay');
|
|
setStickyPayButton(landingData.sticky_pay_button ?? false);
|
|
}, [landingData]);
|
|
|
|
// Create mutation
|
|
const createMutation = useMutation({
|
|
mutationFn: adminLandingsApi.create,
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-landings'] });
|
|
notify.success(t('admin.landings.created'));
|
|
navigate('/admin/landings');
|
|
},
|
|
onError: (err: unknown) => {
|
|
notify.error(getApiErrorMessage(err, t('common.error')));
|
|
},
|
|
});
|
|
|
|
// Update mutation
|
|
const updateMutation = useMutation({
|
|
mutationFn: ({ landingId, data }: { landingId: number; data: LandingCreateRequest }) =>
|
|
adminLandingsApi.update(landingId, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-landings'] });
|
|
queryClient.invalidateQueries({ queryKey: ['admin-landing', id] });
|
|
notify.success(t('admin.landings.updated'));
|
|
navigate('/admin/landings');
|
|
},
|
|
onError: (err: unknown) => {
|
|
notify.error(getApiErrorMessage(err, t('common.error')));
|
|
},
|
|
});
|
|
|
|
/** Return a LocaleDict only if it has at least one non-empty value, else undefined */
|
|
const nonEmptyDict = (dict: LocaleDict): LocaleDict | undefined => {
|
|
const filtered = Object.fromEntries(
|
|
Object.entries(dict).filter(([, v]) => typeof v === 'string' && v.trim().length > 0),
|
|
);
|
|
return Object.keys(filtered).length > 0 ? filtered : undefined;
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
// Client-side validation
|
|
if (!isEdit && !/^[a-z0-9-]+$/.test(slug)) {
|
|
notify.error(
|
|
t(
|
|
'admin.landings.invalidSlug',
|
|
'Slug can only contain lowercase letters, numbers, and hyphens',
|
|
),
|
|
);
|
|
return;
|
|
}
|
|
const titleHasContent = Object.values(title).some((v) => v.trim().length > 0);
|
|
if (!titleHasContent) {
|
|
notify.error(t('admin.landings.titleRequired', 'Title is required'));
|
|
return;
|
|
}
|
|
if (selectedTariffIds.length === 0) {
|
|
notify.error(t('admin.landings.noTariffs', 'Select at least one tariff'));
|
|
return;
|
|
}
|
|
if (paymentMethods.length === 0) {
|
|
notify.error(t('admin.landings.noPaymentMethods', 'Add at least one payment method'));
|
|
return;
|
|
}
|
|
|
|
// Strip _id before sending to API
|
|
const cleanFeatures: AdminLandingFeature[] = features.map(({ _id: _, ...rest }) => rest);
|
|
const cleanMethods = paymentMethods.map(({ _id: _, ...rest }) => ({
|
|
...rest,
|
|
description: rest.description || null,
|
|
icon_url: rest.icon_url || null,
|
|
min_amount_kopeks: rest.min_amount_kopeks ?? null,
|
|
max_amount_kopeks: rest.max_amount_kopeks ?? null,
|
|
currency: rest.currency || null,
|
|
return_url: rest.return_url || null,
|
|
sub_options: rest.sub_options ?? null,
|
|
}));
|
|
|
|
// Filter out empty period arrays and periods for non-selected tariffs
|
|
const cleanPeriods = Object.fromEntries(
|
|
Object.entries(allowedPeriods).filter(
|
|
([key, days]) => days.length > 0 && selectedTariffIds.includes(Number(key)),
|
|
),
|
|
);
|
|
|
|
const data: LandingCreateRequest = {
|
|
slug,
|
|
title,
|
|
subtitle: nonEmptyDict(subtitle),
|
|
is_active: isActive,
|
|
features: cleanFeatures,
|
|
footer_text: nonEmptyDict(footerText),
|
|
allowed_tariff_ids: selectedTariffIds,
|
|
allowed_periods: cleanPeriods,
|
|
payment_methods: cleanMethods,
|
|
gift_enabled: giftEnabled,
|
|
custom_css: customCss || undefined,
|
|
meta_title: nonEmptyDict(metaTitle),
|
|
meta_description: nonEmptyDict(metaDescription),
|
|
discount_percent: discountPercent ?? null,
|
|
discount_overrides:
|
|
discountPercent !== null && Object.keys(discountOverrides).length > 0
|
|
? discountOverrides
|
|
: null,
|
|
discount_starts_at:
|
|
discountPercent !== null && discountStartsAt
|
|
? new Date(discountStartsAt).toISOString()
|
|
: null,
|
|
discount_ends_at:
|
|
discountPercent !== null && discountEndsAt ? new Date(discountEndsAt).toISOString() : null,
|
|
discount_badge_text:
|
|
discountPercent !== null ? (nonEmptyDict(discountBadgeText) ?? null) : null,
|
|
background_config: backgroundConfig.enabled ? backgroundConfig : null,
|
|
analytics_view_enabled: analyticsViewEnabled,
|
|
analytics_view_goal: analyticsViewGoal,
|
|
analytics_click_enabled: analyticsClickEnabled,
|
|
analytics_click_goal: analyticsClickGoal,
|
|
sticky_pay_button: stickyPayButton,
|
|
};
|
|
|
|
if (isEdit) {
|
|
updateMutation.mutate({ landingId: Number(id), data });
|
|
} else {
|
|
createMutation.mutate(data);
|
|
}
|
|
};
|
|
|
|
const isPending = createMutation.isPending || updateMutation.isPending;
|
|
|
|
// ---- Features helpers ----
|
|
const addFeature = () => {
|
|
setFeatures((prev) => [
|
|
...prev,
|
|
{ _id: crypto.randomUUID(), icon: '', title: {}, description: {} },
|
|
]);
|
|
};
|
|
|
|
const updateFeatureIcon = useCallback((index: number, value: string) => {
|
|
setFeatures((prev) => prev.map((f, i) => (i === index ? { ...f, icon: value } : f)));
|
|
}, []);
|
|
|
|
const updateFeatureLocalized = useCallback(
|
|
(index: number, field: 'title' | 'description', value: LocaleDict) => {
|
|
setFeatures((prev) => prev.map((f, i) => (i === index ? { ...f, [field]: value } : f)));
|
|
},
|
|
[],
|
|
);
|
|
|
|
const removeFeature = useCallback((index: number) => {
|
|
setFeatures((prev) => prev.filter((_, i) => i !== index));
|
|
}, []);
|
|
|
|
const handleFeatureDragEnd = useCallback((event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
if (over && active.id !== over.id) {
|
|
setFeatures((prev) => {
|
|
const oldIndex = prev.findIndex((f) => f._id === active.id);
|
|
const newIndex = prev.findIndex((f) => f._id === over.id);
|
|
if (oldIndex === -1 || newIndex === -1) return prev;
|
|
return arrayMove(prev, oldIndex, newIndex);
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
// ---- Payment methods helpers ----
|
|
const togglePaymentMethod = useCallback(
|
|
(methodId: string) => {
|
|
setPaymentMethods((prev) => {
|
|
const exists = prev.find((m) => m.method_id === methodId);
|
|
if (exists) {
|
|
return prev.filter((m) => m.method_id !== methodId);
|
|
}
|
|
const systemMethod = availablePaymentMethods.find((m) => m.method_id === methodId);
|
|
if (!systemMethod) return prev;
|
|
// Seed sub_options from global config defaults; if no global overrides exist,
|
|
// explicitly set all available sub-options to enabled
|
|
const subOptions =
|
|
systemMethod.available_sub_options && systemMethod.available_sub_options.length > 0
|
|
? systemMethod.sub_options
|
|
? { ...systemMethod.sub_options }
|
|
: Object.fromEntries(systemMethod.available_sub_options.map((o) => [o.id, true]))
|
|
: null;
|
|
return [
|
|
...prev,
|
|
{
|
|
_id: crypto.randomUUID(),
|
|
method_id: systemMethod.method_id,
|
|
display_name: systemMethod.display_name ?? systemMethod.default_display_name,
|
|
description: null,
|
|
icon_url: null,
|
|
sort_order: prev.length,
|
|
min_amount_kopeks: systemMethod.min_amount_kopeks ?? null,
|
|
max_amount_kopeks: systemMethod.max_amount_kopeks ?? null,
|
|
currency: null,
|
|
return_url: null,
|
|
sub_options: subOptions,
|
|
},
|
|
];
|
|
});
|
|
},
|
|
[availablePaymentMethods],
|
|
);
|
|
|
|
const updatePaymentMethod = useCallback(
|
|
(methodId: string, field: EditableMethodField, value: string | number | null) => {
|
|
setPaymentMethods((prev) =>
|
|
prev.map((m) => (m.method_id === methodId ? { ...m, [field]: value } : m)),
|
|
);
|
|
},
|
|
[],
|
|
);
|
|
|
|
const updateSubOptions = useCallback((methodId: string, subOptions: Record<string, boolean>) => {
|
|
setPaymentMethods((prev) =>
|
|
prev.map((m) => (m.method_id === methodId ? { ...m, sub_options: subOptions } : m)),
|
|
);
|
|
}, []);
|
|
|
|
const removePaymentMethod = useCallback((methodId: string) => {
|
|
setPaymentMethods((prev) => prev.filter((m) => m.method_id !== methodId));
|
|
}, []);
|
|
|
|
const handleMethodDragEnd = useCallback((event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
if (over && active.id !== over.id) {
|
|
setPaymentMethods((prev) => {
|
|
const oldIndex = prev.findIndex((m) => m._id === active.id);
|
|
const newIndex = prev.findIndex((m) => m._id === over.id);
|
|
if (oldIndex === -1 || newIndex === -1) return prev;
|
|
return arrayMove(prev, oldIndex, newIndex);
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
// ---- Tariff/period helpers ----
|
|
const toggleTariff = (tariffId: number) => {
|
|
setSelectedTariffIds((prev) => {
|
|
if (prev.includes(tariffId)) {
|
|
const key = String(tariffId);
|
|
// Clean up allowedPeriods for unchecked tariff
|
|
setAllowedPeriods((ap) => {
|
|
if (!(key in ap)) return ap;
|
|
const { [key]: _, ...rest } = ap;
|
|
return rest;
|
|
});
|
|
// Clean up discount override for unchecked tariff
|
|
setDiscountOverrides((overrides) => {
|
|
if (!(key in overrides)) return overrides;
|
|
const { [key]: _, ...rest } = overrides;
|
|
return rest;
|
|
});
|
|
return prev.filter((id) => id !== tariffId);
|
|
}
|
|
return [...prev, tariffId];
|
|
});
|
|
};
|
|
|
|
const togglePeriodFromTariff = (tariffId: number, days: number, allPeriods: PeriodPrice[]) => {
|
|
const key = String(tariffId);
|
|
const allDays = allPeriods.map((p) => p.days);
|
|
|
|
setAllowedPeriods((prev) => {
|
|
const current = prev[key];
|
|
if (!current) {
|
|
// No override yet -- all periods allowed. Remove this one.
|
|
const updated = allDays.filter((d) => d !== days);
|
|
return { ...prev, [key]: updated };
|
|
}
|
|
|
|
const hasDay = current.includes(days);
|
|
const updated = hasDay ? current.filter((d) => d !== days) : [...current, days];
|
|
|
|
// If all periods are selected again, remove the override
|
|
if (updated.length === allDays.length) {
|
|
const { [key]: _, ...rest } = prev;
|
|
return rest;
|
|
}
|
|
|
|
return { ...prev, [key]: updated };
|
|
});
|
|
};
|
|
|
|
// Feature IDs for DnD
|
|
const featureIds = useMemo(() => features.map((f) => f._id), [features]);
|
|
const methodIds = useMemo(() => paymentMethods.map((m) => m._id), [paymentMethods]);
|
|
|
|
return (
|
|
<div className="animate-fade-in">
|
|
{/* Header */}
|
|
<div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="flex items-center gap-3">
|
|
{!capabilities.hasBackButton && (
|
|
<button
|
|
onClick={() => navigate('/admin/landings')}
|
|
className="flex h-10 w-10 items-center justify-center rounded-xl border border-dark-700 bg-dark-800 transition-colors hover:border-dark-600"
|
|
>
|
|
<BackIcon />
|
|
</button>
|
|
)}
|
|
<h1 className="text-xl font-semibold text-dark-100">
|
|
{isEdit ? t('admin.landings.edit') : t('admin.landings.create')}
|
|
</h1>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => navigate('/admin/landings')}
|
|
className="rounded-lg border border-dark-700 bg-dark-800 px-4 py-2 text-sm text-dark-300 transition-colors hover:border-dark-600"
|
|
>
|
|
{t('admin.landings.back')}
|
|
</button>
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={isPending || !slug || !Object.values(title).some((v) => v.trim())}
|
|
className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-sm text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
|
|
>
|
|
{isPending && (
|
|
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
|
)}
|
|
{t('admin.landings.save')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Locale tabs — always visible above sections */}
|
|
<LocaleTabs
|
|
activeLocale={editingLocale}
|
|
onChange={setEditingLocale}
|
|
contentIndicators={[
|
|
title,
|
|
subtitle,
|
|
metaTitle,
|
|
metaDescription,
|
|
footerText,
|
|
discountBadgeText,
|
|
...features.flatMap((f) => [f.title, f.description]),
|
|
]}
|
|
className="mb-4"
|
|
/>
|
|
|
|
<div className="space-y-4">
|
|
{/* General Section */}
|
|
<Section
|
|
title={t('admin.landings.general')}
|
|
open={openSections.general}
|
|
onToggle={() => toggleSection('general')}
|
|
>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label htmlFor="landing-slug" className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.slug')}
|
|
</label>
|
|
<input
|
|
id="landing-slug"
|
|
type="text"
|
|
value={slug}
|
|
onChange={(e) => setSlug(e.target.value)}
|
|
disabled={isEdit}
|
|
placeholder="my-landing"
|
|
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500 disabled:opacity-50"
|
|
/>
|
|
<p className="mt-1 text-xs text-dark-500">{t('admin.landings.slugHint')}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="landing-title" className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.pageTitle')}
|
|
</label>
|
|
<LocalizedInput
|
|
id="landing-title"
|
|
value={title}
|
|
onChange={setTitle}
|
|
locale={editingLocale}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="landing-subtitle" className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.subtitle')}
|
|
</label>
|
|
<LocalizedInput
|
|
id="landing-subtitle"
|
|
value={subtitle}
|
|
onChange={setSubtitle}
|
|
locale={editingLocale}
|
|
multiline
|
|
rows={2}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-sm text-dark-400">{t('admin.landings.active')}</label>
|
|
<Toggle checked={isActive} onChange={() => setIsActive(!isActive)} />
|
|
</div>
|
|
|
|
{/* SEO */}
|
|
<div className="border-t border-dark-700 pt-4">
|
|
<h4 className="mb-3 text-sm font-medium text-dark-300">{t('admin.landings.seo')}</h4>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.metaTitle')}
|
|
</label>
|
|
<LocalizedInput
|
|
value={metaTitle}
|
|
onChange={setMetaTitle}
|
|
locale={editingLocale}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.metaDesc')}
|
|
</label>
|
|
<LocalizedInput
|
|
value={metaDescription}
|
|
onChange={setMetaDescription}
|
|
locale={editingLocale}
|
|
multiline
|
|
rows={2}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Features Section */}
|
|
<Section
|
|
title={t('admin.landings.features')}
|
|
open={openSections.features}
|
|
onToggle={() => toggleSection('features')}
|
|
>
|
|
<div className="space-y-3">
|
|
<DndContext sensors={sensors} onDragEnd={handleFeatureDragEnd}>
|
|
<SortableContext items={featureIds} strategy={verticalListSortingStrategy}>
|
|
{features.map((feature, index) => (
|
|
<SortableFeatureItem
|
|
key={feature._id}
|
|
feature={feature}
|
|
index={index}
|
|
locale={editingLocale}
|
|
onUpdateIcon={updateFeatureIcon}
|
|
onUpdateLocalized={updateFeatureLocalized}
|
|
onRemove={removeFeature}
|
|
/>
|
|
))}
|
|
</SortableContext>
|
|
</DndContext>
|
|
<button
|
|
onClick={addFeature}
|
|
className="flex items-center gap-2 rounded-lg border border-dashed border-dark-600 px-4 py-2 text-sm text-dark-400 transition-colors hover:border-dark-500 hover:text-dark-300"
|
|
>
|
|
<PlusIcon />
|
|
{t('admin.landings.addFeature')}
|
|
</button>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Tariffs Section */}
|
|
<Section
|
|
title={t('admin.landings.tariffs')}
|
|
open={openSections.tariffs}
|
|
onToggle={() => toggleSection('tariffs')}
|
|
>
|
|
<div className="space-y-3">
|
|
<p className="text-sm text-dark-500">{t('admin.landings.selectTariffs')}</p>
|
|
{allTariffs.map((tariff: TariffListItem) => (
|
|
<div key={tariff.id} className="rounded-lg border border-dark-700 bg-dark-800/50 p-3">
|
|
<label className="flex items-center gap-3">
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedTariffIds.includes(tariff.id)}
|
|
onChange={() => toggleTariff(tariff.id)}
|
|
className="h-4 w-4 rounded border-dark-600 bg-dark-700 text-accent-500"
|
|
/>
|
|
<span className="text-sm font-medium text-dark-100">{tariff.name}</span>
|
|
{!tariff.is_active && (
|
|
<span className="rounded bg-dark-600 px-2 py-0.5 text-xs text-dark-400">
|
|
{t('admin.landings.inactive')}
|
|
</span>
|
|
)}
|
|
</label>
|
|
{/* Period checkboxes from tariff detail */}
|
|
{selectedTariffIds.includes(tariff.id) && !tariff.is_daily && (
|
|
<div className="ml-7 mt-2">
|
|
<span className="text-xs text-dark-500">{t('admin.landings.periods')}:</span>
|
|
{tariffPeriodsMap[tariff.id] ? (
|
|
<div className="mt-1 flex flex-wrap gap-2">
|
|
{tariffPeriodsMap[tariff.id].map((period) => {
|
|
const override = allowedPeriods[String(tariff.id)];
|
|
const isAllowed = !override || override.includes(period.days);
|
|
return (
|
|
<button
|
|
key={period.days}
|
|
onClick={() =>
|
|
togglePeriodFromTariff(
|
|
tariff.id,
|
|
period.days,
|
|
tariffPeriodsMap[tariff.id],
|
|
)
|
|
}
|
|
className={cn(
|
|
'rounded-full px-3 py-1 text-xs font-medium transition-colors',
|
|
isAllowed
|
|
? 'bg-accent-500/20 text-accent-400'
|
|
: 'bg-dark-700/50 text-dark-500 line-through',
|
|
)}
|
|
>
|
|
{period.days}
|
|
{t('admin.landings.periodDaySuffix')} —{' '}
|
|
{formatPrice(period.price_kopeks)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<span className="ml-2 text-xs text-dark-600">
|
|
{t('admin.landings.loadingPeriods')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Discount Section */}
|
|
<Section
|
|
title={t('admin.landings.discount', 'Discount')}
|
|
open={openSections.discount}
|
|
onToggle={() => toggleSection('discount')}
|
|
>
|
|
<div className="space-y-4">
|
|
{/* Enable/disable discount */}
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-sm text-dark-400">
|
|
{t('admin.landings.discountEnabled', 'Enable discount')}
|
|
</label>
|
|
<Toggle
|
|
checked={discountPercent !== null}
|
|
onChange={() => {
|
|
if (discountPercent !== null) {
|
|
setDiscountPercent(null);
|
|
setDiscountOverrides({});
|
|
setDiscountStartsAt('');
|
|
setDiscountEndsAt('');
|
|
setDiscountBadgeText({});
|
|
} else {
|
|
setDiscountPercent(10);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{discountPercent !== null && (
|
|
<div className="space-y-4">
|
|
{/* Global percent */}
|
|
<div>
|
|
<label className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.discountPercent', 'Discount %')}
|
|
</label>
|
|
<div className="flex items-center gap-3">
|
|
<input
|
|
type="range"
|
|
min={1}
|
|
max={99}
|
|
value={discountPercent}
|
|
onChange={(e) => setDiscountPercent(Number(e.target.value))}
|
|
className="h-2 flex-1 cursor-pointer appearance-none rounded-lg bg-dark-700 accent-accent-500"
|
|
/>
|
|
<div className="flex w-20 items-center rounded-lg border border-dark-700 bg-dark-800">
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
max={99}
|
|
value={discountPercent}
|
|
onChange={(e) => {
|
|
const v = Math.min(99, Math.max(1, Number(e.target.value) || 1));
|
|
setDiscountPercent(v);
|
|
}}
|
|
className="w-full bg-transparent px-2 py-1.5 text-center text-sm text-dark-100 outline-none"
|
|
/>
|
|
<span className="pr-2 text-sm text-dark-400">%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Date range */}
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<div>
|
|
<label className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.discountStartsAt', 'Start date')}
|
|
</label>
|
|
<input
|
|
type="datetime-local"
|
|
value={discountStartsAt}
|
|
onChange={(e) => setDiscountStartsAt(e.target.value)}
|
|
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500 [&::-webkit-calendar-picker-indicator]:invert"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.discountEndsAt', 'End date')}
|
|
</label>
|
|
<input
|
|
type="datetime-local"
|
|
value={discountEndsAt}
|
|
onChange={(e) => setDiscountEndsAt(e.target.value)}
|
|
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500 [&::-webkit-calendar-picker-indicator]:invert"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Badge text */}
|
|
<div>
|
|
<label className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.discountBadge', 'Banner text (optional)')}
|
|
</label>
|
|
<LocalizedInput
|
|
value={discountBadgeText}
|
|
onChange={setDiscountBadgeText}
|
|
locale={editingLocale}
|
|
placeholder={t('admin.landings.discountBadgePlaceholder', 'e.g. Spring sale!')}
|
|
/>
|
|
</div>
|
|
|
|
{/* Per-tariff overrides */}
|
|
{selectedTariffIds.length > 0 && (
|
|
<div>
|
|
<label className="mb-2 block text-sm text-dark-400">
|
|
{t('admin.landings.discountOverrides', 'Per-tariff overrides')}
|
|
</label>
|
|
<p className="mb-2 text-xs text-dark-500">
|
|
{t(
|
|
'admin.landings.discountOverridesHint',
|
|
'Leave empty to use global discount',
|
|
)}
|
|
</p>
|
|
<div className="space-y-2">
|
|
{selectedTariffIds.map((tariffId) => {
|
|
const tariff = allTariffs.find((tr) => tr.id === tariffId);
|
|
if (!tariff) return null;
|
|
const override = discountOverrides[String(tariffId)];
|
|
const hasOverride = override !== undefined;
|
|
return (
|
|
<div
|
|
key={tariffId}
|
|
className="flex items-center gap-3 rounded-lg border border-dark-700 bg-dark-800/50 px-3 py-2"
|
|
>
|
|
<span className="min-w-0 flex-1 truncate text-sm text-dark-200">
|
|
{tariff.name}
|
|
</span>
|
|
<span className="text-xs text-dark-500">
|
|
{hasOverride ? `${override}%` : `${discountPercent}%`}
|
|
</span>
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
max={99}
|
|
value={hasOverride ? override : ''}
|
|
placeholder={String(discountPercent)}
|
|
onChange={(e) => {
|
|
const val = e.target.value;
|
|
setDiscountOverrides((prev) => {
|
|
if (!val) {
|
|
const { [String(tariffId)]: _, ...rest } = prev;
|
|
return rest;
|
|
}
|
|
return {
|
|
...prev,
|
|
[String(tariffId)]: Math.min(99, Math.max(1, Number(val))),
|
|
};
|
|
});
|
|
}}
|
|
className="w-16 rounded border border-dark-600 bg-dark-700 px-2 py-1 text-center text-sm text-dark-100 outline-none focus:border-accent-500"
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Preview */}
|
|
{selectedTariffIds.length > 0 && (
|
|
<div className="rounded-lg border border-dark-600 bg-dark-800/30 p-3">
|
|
<p className="mb-2 text-xs font-medium uppercase tracking-wider text-dark-500">
|
|
{t('admin.landings.discountPreview', 'Preview')}
|
|
</p>
|
|
{selectedTariffIds.slice(0, 3).map((tariffId) => {
|
|
const tariff = allTariffs.find((tr) => tr.id === tariffId);
|
|
if (!tariff) return null;
|
|
const override = discountOverrides[String(tariffId)];
|
|
const pct = override ?? discountPercent ?? 0;
|
|
const periods = tariffPeriodsMap[tariffId];
|
|
if (!periods || periods.length === 0) return null;
|
|
const firstPeriod = periods[0];
|
|
const discounted = Math.max(
|
|
1,
|
|
firstPeriod.price_kopeks -
|
|
Math.floor((firstPeriod.price_kopeks * pct) / 100),
|
|
);
|
|
return (
|
|
<div key={tariffId} className="flex items-center gap-2 py-1">
|
|
<span className="text-sm text-dark-300">{tariff.name}:</span>
|
|
<span className="text-xs text-dark-500 line-through">
|
|
{formatPrice(firstPeriod.price_kopeks)}
|
|
</span>
|
|
<span className="text-sm font-semibold text-accent-400">
|
|
{formatPrice(discounted)}
|
|
</span>
|
|
<span className="rounded-full bg-accent-500/20 px-1.5 py-0.5 text-[10px] font-medium text-accent-400">
|
|
-{pct}%
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Payment Methods Section */}
|
|
<Section
|
|
title={t('admin.landings.paymentMethods')}
|
|
open={openSections.methods}
|
|
onToggle={() => toggleSection('methods')}
|
|
>
|
|
<div className="space-y-4">
|
|
{/* Available system methods as toggleable list */}
|
|
<div>
|
|
<p className="mb-2 text-sm text-dark-500">{t('admin.landings.selectMethods')}</p>
|
|
<div className="space-y-2">
|
|
{availablePaymentMethods.map((sysMethod) => {
|
|
const isSelected = paymentMethods.some(
|
|
(m) => m.method_id === sysMethod.method_id,
|
|
);
|
|
return (
|
|
<label
|
|
key={sysMethod.method_id}
|
|
className={cn(
|
|
'flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors',
|
|
isSelected
|
|
? 'border-accent-500/50 bg-accent-500/5'
|
|
: 'border-dark-700 bg-dark-800/50 hover:border-dark-600',
|
|
)}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={isSelected}
|
|
onChange={() => togglePaymentMethod(sysMethod.method_id)}
|
|
className="h-4 w-4 rounded border-dark-600 bg-dark-700 text-accent-500"
|
|
/>
|
|
<span className="flex items-center gap-2 text-sm font-medium text-dark-100">
|
|
{sysMethod.display_name ?? sysMethod.default_display_name}
|
|
{sysMethod.available_sub_options &&
|
|
sysMethod.available_sub_options.length > 0 && (
|
|
<span className="rounded-full bg-dark-700 px-1.5 py-0.5 text-[10px] text-dark-400">
|
|
{sysMethod.available_sub_options.map((o) => o.name).join(' / ')}
|
|
</span>
|
|
)}
|
|
</span>
|
|
</label>
|
|
);
|
|
})}
|
|
{availablePaymentMethods.length === 0 && (
|
|
<p className="text-sm text-dark-600">{t('admin.landings.noSystemMethods')}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Selected methods with drag-to-reorder */}
|
|
{paymentMethods.length > 0 && (
|
|
<div>
|
|
<p className="mb-2 text-sm text-dark-500">{t('admin.landings.methodOrder')}</p>
|
|
<DndContext sensors={sensors} onDragEnd={handleMethodDragEnd}>
|
|
<SortableContext items={methodIds} strategy={verticalListSortingStrategy}>
|
|
<div className="space-y-2">
|
|
{paymentMethods.map((method) => (
|
|
<SortableSelectedMethodCard
|
|
key={method._id}
|
|
method={method}
|
|
availableSubOptions={subOptionsMap[method.method_id] ?? null}
|
|
onUpdate={updatePaymentMethod}
|
|
onSubOptionsChange={updateSubOptions}
|
|
onRemove={removePaymentMethod}
|
|
/>
|
|
))}
|
|
</div>
|
|
</SortableContext>
|
|
</DndContext>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Gift Settings Section */}
|
|
<Section
|
|
title={t('admin.landings.gifts')}
|
|
open={openSections.gifts}
|
|
onToggle={() => toggleSection('gifts')}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-sm text-dark-400">{t('admin.landings.giftEnabled')}</label>
|
|
<Toggle checked={giftEnabled} onChange={() => setGiftEnabled(!giftEnabled)} />
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Background Section */}
|
|
<Section
|
|
title={t('admin.landings.background', 'Background')}
|
|
open={openSections.background}
|
|
onToggle={() => toggleSection('background')}
|
|
>
|
|
<BackgroundConfigEditor value={backgroundConfig} onChange={setBackgroundConfig} />
|
|
</Section>
|
|
|
|
{/* Analytics Goals Section */}
|
|
<Section
|
|
title={t('admin.landings.analytics', 'Analytics')}
|
|
open={openSections.analytics}
|
|
onToggle={() => toggleSection('analytics')}
|
|
>
|
|
<div className="space-y-4">
|
|
{/* View Goal */}
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex-1">
|
|
<label className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.viewGoal', 'View goal')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={analyticsViewGoal}
|
|
onChange={(e) => setAnalyticsViewGoal(e.target.value)}
|
|
disabled={!analyticsViewEnabled}
|
|
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500 disabled:opacity-50"
|
|
placeholder="landing_view"
|
|
/>
|
|
</div>
|
|
<Toggle
|
|
checked={analyticsViewEnabled}
|
|
onChange={() => setAnalyticsViewEnabled((v) => !v)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Click Goal */}
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex-1">
|
|
<label className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.clickGoal', 'Payment click goal')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={analyticsClickGoal}
|
|
onChange={(e) => setAnalyticsClickGoal(e.target.value)}
|
|
disabled={!analyticsClickEnabled}
|
|
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500 disabled:opacity-50"
|
|
placeholder="landing_pay"
|
|
/>
|
|
</div>
|
|
<Toggle
|
|
checked={analyticsClickEnabled}
|
|
onChange={() => setAnalyticsClickEnabled((v) => !v)}
|
|
/>
|
|
</div>
|
|
{/* Sticky pay button on mobile */}
|
|
<div className="flex items-center justify-between gap-4 border-t border-dark-800 pt-4">
|
|
<div>
|
|
<p className="text-sm text-dark-300">
|
|
{t('admin.landings.stickyPayButton', 'Sticky pay button (mobile)')}
|
|
</p>
|
|
<p className="text-xs text-dark-500">
|
|
{t(
|
|
'admin.landings.stickyPayButtonHint',
|
|
'Button pinned to bottom of screen on mobile',
|
|
)}
|
|
</p>
|
|
</div>
|
|
<Toggle checked={stickyPayButton} onChange={() => setStickyPayButton((v) => !v)} />
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Footer & Custom CSS Section */}
|
|
<Section
|
|
title={t('admin.landings.content')}
|
|
open={openSections.footer}
|
|
onToggle={() => toggleSection('footer')}
|
|
>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.footerText')}
|
|
</label>
|
|
<LocalizedInput
|
|
value={footerText}
|
|
onChange={setFooterText}
|
|
locale={editingLocale}
|
|
multiline
|
|
rows={4}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="mb-1 block text-sm text-dark-400">
|
|
{t('admin.landings.customCss')}
|
|
</label>
|
|
<textarea
|
|
value={customCss}
|
|
onChange={(e) => setCustomCss(e.target.value)}
|
|
rows={6}
|
|
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 font-mono text-sm text-dark-100 outline-none focus:border-accent-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|