-
Coupon Details
-
-
-
+
+ Настройки оффера
+
+
-
-
-
- onUpdate({
- coupon: {
- ...couponScreen.coupon,
- offer: {
- ...couponScreen.coupon?.offer,
- description: {
- ...couponScreen.coupon?.offer?.description,
- text: e.target.value,
- font: couponScreen.coupon?.offer?.description?.font || "inter",
- weight: couponScreen.coupon?.offer?.description?.weight || "medium",
- }
- }
- }
- })}
- />
-
-
-
-
- onUpdate({
- coupon: {
- ...couponScreen.coupon,
- promoCode: {
- ...couponScreen.coupon?.promoCode,
- text: e.target.value,
- font: couponScreen.coupon?.promoCode?.font || "manrope",
- weight: couponScreen.coupon?.promoCode?.weight || "bold",
- }
- }
- })}
- />
-
-
-
-
- onUpdate({
- coupon: {
- ...couponScreen.coupon,
- footer: {
- ...couponScreen.coupon?.footer,
- text: e.target.value,
- font: couponScreen.coupon?.footer?.font || "inter",
- weight: couponScreen.coupon?.footer?.weight || "medium",
- }
- }
- })}
- />
-
-
-
- {/* Bottom Action Button */}
-
-
- onUpdate({
- bottomActionButton: {
- text: e.target.value || "Continue",
+ placeholder="-50% на первый заказ"
+ value={couponScreen.coupon?.offer?.title?.text ?? ""}
+ onChange={(event) =>
+ handleCouponUpdate("offer", {
+ ...couponScreen.coupon.offer,
+ title: {
+ ...(couponScreen.coupon.offer?.title ?? {}),
+ text: event.target.value,
+ },
+ })
}
- })}
- />
+ />
+
+
- {/* Header Configuration */}
-
-
Header Settings
-
-
);
diff --git a/src/components/admin/builder/templates/DateScreenConfig.tsx b/src/components/admin/builder/templates/DateScreenConfig.tsx
index 0e39557..b02a772 100644
--- a/src/components/admin/builder/templates/DateScreenConfig.tsx
+++ b/src/components/admin/builder/templates/DateScreenConfig.tsx
@@ -11,176 +11,140 @@ interface DateScreenConfigProps {
export function DateScreenConfig({ screen, onUpdate }: DateScreenConfigProps) {
const dateScreen = screen as DateScreenDefinition & { position: { x: number; y: number } };
-
+
+ const handleDateInputChange =
(field: T, value: string | boolean) => {
+ onUpdate({
+ dateInput: {
+ ...dateScreen.dateInput,
+ [field]: value,
+ },
+ });
+ };
+
+ const handleInfoMessageChange = (field: "text" | "icon", value: string) => {
+ const baseInfo = dateScreen.infoMessage ?? { text: "", icon: "ℹ️" };
+ const nextInfo = { ...baseInfo, [field]: value };
+
+ if (!nextInfo.text) {
+ onUpdate({ infoMessage: undefined });
+ return;
+ }
+
+ onUpdate({ infoMessage: nextInfo });
+ };
+
return (
-
- {/* Title Configuration */}
-
-
- onUpdate({
- title: {
- ...dateScreen.title,
- text: e.target.value,
- font: dateScreen.title?.font || "manrope",
- weight: dateScreen.title?.weight || "bold",
- }
- })}
- />
-
-
- {/* Subtitle Configuration */}
-
-
- onUpdate({
- subtitle: e.target.value ? {
- text: e.target.value,
- font: dateScreen.subtitle?.font || "inter",
- weight: dateScreen.subtitle?.weight || "medium",
- color: dateScreen.subtitle?.color || "muted",
- } : undefined
- })}
- />
-
-
- {/* Date Input Labels */}
+
-
Date Input Labels
-
-
-
-
+
+ Поля ввода даты
+
+
+
-
-
-
+
+
-
-
-
+
+
+
-
-
-
+
+
-
-
-
+
+
-
-
-
+
+
+
- {/* Info Message */}
-
-
-
onUpdate({
- infoMessage: e.target.value ? {
- text: e.target.value,
- icon: dateScreen.infoMessage?.icon || "🔒",
- } : undefined
- })}
- />
-
- {dateScreen.infoMessage && (
- onUpdate({
- infoMessage: {
- text: dateScreen.infoMessage?.text || "",
- icon: e.target.value,
- }
- })}
+
+
Поведение поля
+
+
+
+
+
+
+
+
-
-
onUpdate({
- bottomActionButton: e.target.value ? {
- text: e.target.value,
- } : undefined
- })}
- />
+
+
Информационный блок
+
+ {dateScreen.infoMessage && (
+
+ )}
- {/* Title Configuration */}
-
-
- onUpdate({
- title: {
- ...formScreen.title,
- text: e.target.value,
- font: formScreen.title?.font || "manrope",
- weight: formScreen.title?.weight || "bold",
- }
- })}
- />
-
-
- {/* Subtitle Configuration */}
-
-
- onUpdate({
- subtitle: e.target.value ? {
- text: e.target.value,
- font: formScreen.subtitle?.font || "inter",
- weight: formScreen.subtitle?.weight || "medium",
- color: formScreen.subtitle?.color || "muted",
- } : undefined
- })}
- />
-
-
- {/* Form Fields Configuration */}
+
-
Form Fields
-
-
+
{formScreen.fields?.map((field, index) => (
-
-
-
Field {index + 1}
+
+
+
+ Поле {index + 1}
+
-
-
-
-
- updateField(index, { id: e.target.value })}
- />
-
-
-
-
+
+
+
+
+
-
-
-
+
+
-
-
-
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
-
- {field.maxLength && (
-
-
- updateField(index, { maxLength: parseInt(e.target.value) || undefined })}
- />
-
- )}
))}
-
+
{(!formScreen.fields || formScreen.fields.length === 0) && (
-
- No fields added yet. Click "Add Field" to get started.
+
+ Пока нет полей. Добавьте хотя бы одно, чтобы форма работала.
)}
- {/* Bottom Action Button */}
-
-
-
onUpdate({
- bottomActionButton: {
- text: e.target.value || "Continue",
- }
- })}
- />
+
+
Сообщения валидации
+
+
+
+
+
);
diff --git a/src/components/admin/builder/templates/InfoScreenConfig.tsx b/src/components/admin/builder/templates/InfoScreenConfig.tsx
index ebb91ff..f6c55e1 100644
--- a/src/components/admin/builder/templates/InfoScreenConfig.tsx
+++ b/src/components/admin/builder/templates/InfoScreenConfig.tsx
@@ -1,7 +1,7 @@
"use client";
import { TextInput } from "@/components/ui/TextInput/TextInput";
-import type { InfoScreenDefinition, TypographyVariant } from "@/lib/funnel/types";
+import type { InfoScreenDefinition } from "@/lib/funnel/types";
import type { BuilderScreen } from "@/lib/admin/builder/types";
interface InfoScreenConfigProps {
@@ -11,145 +11,91 @@ interface InfoScreenConfigProps {
export function InfoScreenConfig({ screen, onUpdate }: InfoScreenConfigProps) {
const infoScreen = screen as InfoScreenDefinition & { position: { x: number; y: number } };
-
+
+ const handleDescriptionChange = (text: string) => {
+ onUpdate({
+ description: text
+ ? {
+ ...(infoScreen.description ?? {}),
+ text,
+ }
+ : undefined,
+ });
+ };
+
+ const handleIconChange =
>(
+ field: T,
+ value: NonNullable[T] | undefined
+ ) => {
+ const baseIcon = infoScreen.icon ?? { type: "emoji", value: "✨", size: "lg" };
+
+ if (field === "value") {
+ if (!value) {
+ onUpdate({ icon: undefined });
+ } else {
+ onUpdate({ icon: { ...baseIcon, value } });
+ }
+ return;
+ }
+
+ onUpdate({ icon: { ...baseIcon, [field]: value } });
+ };
+
return (
-
- {/* Title Configuration */}
-
-
-
onUpdate({
- title: {
- ...infoScreen.title,
- text: e.target.value,
- font: infoScreen.title?.font || "manrope",
- weight: infoScreen.title?.weight || "bold",
- align: infoScreen.title?.align || "center",
- }
- })}
- />
-
-
-
-
-
+
+
+
+ Информационный контент
+
+
+
+
+
+
Иконка
+
+
+
-
- {/* Description Configuration */}
-
-
- onUpdate({
- description: e.target.value ? {
- text: e.target.value,
- font: infoScreen.description?.font || "inter",
- weight: infoScreen.description?.weight || "medium",
- align: infoScreen.description?.align || "center",
- } : undefined
- })}
- />
-
-
- {/* Icon Configuration */}
-
-
-
-
-
-
-
-
-
onUpdate({
- icon: e.target.value ? {
- type: infoScreen.icon?.type || "emoji",
- value: e.target.value,
- size: infoScreen.icon?.size || "lg",
- } : undefined
- })}
- />
-
-
- {/* Bottom Action Button */}
-
-
- onUpdate({
- bottomActionButton: e.target.value ? {
- text: e.target.value,
- } : undefined
- })}
- />
+
);
diff --git a/src/components/admin/builder/templates/ListScreenConfig.tsx b/src/components/admin/builder/templates/ListScreenConfig.tsx
index df33df6..df239d7 100644
--- a/src/components/admin/builder/templates/ListScreenConfig.tsx
+++ b/src/components/admin/builder/templates/ListScreenConfig.tsx
@@ -2,8 +2,8 @@
import { TextInput } from "@/components/ui/TextInput/TextInput";
import { Button } from "@/components/ui/button";
-import { Trash2, Plus } from "lucide-react";
-import type { ListScreenDefinition, ListOptionDefinition, SelectionType } from "@/lib/funnel/types";
+import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react";
+import type { ListScreenDefinition, ListOptionDefinition, SelectionType, BottomActionButtonDefinition } from "@/lib/funnel/types";
import type { BuilderScreen } from "@/lib/admin/builder/types";
interface ListScreenConfigProps {
@@ -11,194 +11,334 @@ interface ListScreenConfigProps {
onUpdate: (updates: Partial
) => void;
}
+function mutateOptions(
+ options: ListOptionDefinition[],
+ index: number,
+ mutation: (option: ListOptionDefinition) => ListOptionDefinition
+): ListOptionDefinition[] {
+ return options.map((option, currentIndex) => (currentIndex === index ? mutation(option) : option));
+}
+
export function ListScreenConfig({ screen, onUpdate }: ListScreenConfigProps) {
const listScreen = screen as ListScreenDefinition & { position: { x: number; y: number } };
-
- const handleTitleChange = (text: string) => {
- onUpdate({
- title: {
- ...listScreen.title,
- text,
- font: listScreen.title?.font || "manrope",
- weight: listScreen.title?.weight || "bold",
- align: listScreen.title?.align || "left",
- }
- });
- };
-
- const handleSubtitleChange = (text: string) => {
- onUpdate({
- subtitle: text ? {
- ...listScreen.subtitle,
- text,
- font: listScreen.subtitle?.font || "inter",
- weight: listScreen.subtitle?.weight || "medium",
- color: listScreen.subtitle?.color || "muted",
- align: listScreen.subtitle?.align || "left",
- } : undefined
- });
- };
const handleSelectionTypeChange = (selectionType: SelectionType) => {
onUpdate({
list: {
...listScreen.list,
selectionType,
- }
+ },
});
};
- const handleOptionChange = (index: number, field: keyof ListOptionDefinition, value: string | boolean) => {
- const newOptions = [...listScreen.list.options];
- newOptions[index] = {
- ...newOptions[index],
- [field]: value,
- };
-
+ const handleAutoAdvanceChange = (checked: boolean) => {
onUpdate({
list: {
...listScreen.list,
- options: newOptions,
- }
+ autoAdvance: checked || undefined,
+ },
+ });
+ };
+
+ const handleOptionChange = (
+ index: number,
+ field: keyof ListOptionDefinition,
+ value: string | boolean | undefined
+ ) => {
+ const nextOptions = mutateOptions(listScreen.list.options, index, (option) => ({
+ ...option,
+ [field]: value,
+ }));
+
+ onUpdate({
+ list: {
+ ...listScreen.list,
+ options: nextOptions,
+ },
+ });
+ };
+
+ const handleMoveOption = (index: number, direction: -1 | 1) => {
+ const nextOptions = [...listScreen.list.options];
+ const targetIndex = index + direction;
+ if (targetIndex < 0 || targetIndex >= nextOptions.length) {
+ return;
+ }
+ const [current] = nextOptions.splice(index, 1);
+ nextOptions.splice(targetIndex, 0, current);
+
+ onUpdate({
+ list: {
+ ...listScreen.list,
+ options: nextOptions,
+ },
});
};
const handleAddOption = () => {
- const newOptions = [...listScreen.list.options];
- newOptions.push({
- id: `option-${Date.now()}`,
- label: "New Option",
- });
-
+ const nextOptions = [
+ ...listScreen.list.options,
+ {
+ id: `option-${Date.now()}`,
+ label: "Новый вариант",
+ },
+ ];
+
onUpdate({
list: {
...listScreen.list,
- options: newOptions,
- }
+ options: nextOptions,
+ },
});
};
const handleRemoveOption = (index: number) => {
- const newOptions = listScreen.list.options.filter((_, i) => i !== index);
-
+ const nextOptions = listScreen.list.options.filter((_, currentIndex) => currentIndex !== index);
+
onUpdate({
list: {
...listScreen.list,
- options: newOptions,
- }
+ options: nextOptions,
+ },
});
};
- const handleBottomActionButtonChange = (text: string) => {
+ const handleListButtonChange = (value: BottomActionButtonDefinition | undefined) => {
onUpdate({
list: {
...listScreen.list,
- bottomActionButton: text ? {
- text,
- show: true,
- } : undefined,
- }
+ bottomActionButton: value,
+ },
});
};
return (
-
- {/* Title Configuration */}
-
-
- handleTitleChange(e.target.value)}
- />
-
-
- {/* Subtitle Configuration */}
-
-
- handleSubtitleChange(e.target.value)}
- />
-
-
- {/* Selection Type */}
-
-
-
-
-
-
-
-
- {/* Options */}
+
-
-
+
+
+
+
+
+
+
Настройка вариантов
+
-
-
+
+
{listScreen.list.options.map((option, index) => (
-
-
-
handleOptionChange(index, "id", e.target.value)}
- />
+
+
+
+ Вариант {index + 1}
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
-
+
+
))}
+ Добавьте хотя бы один вариант, чтобы экран работал корректно.
+
+ )}
- {/* Bottom Action Button */}
-
-
-
handleBottomActionButtonChange(e.target.value)}
- />
-
- {listScreen.list.selectionType === "multi"
- ? "Multi selection always shows a button"
- : "Single selection: empty = auto-advance, filled = manual button"}
+
+
Кнопка внутри списка
+
+
+
+ {listScreen.list.bottomActionButton && (
+
+ )}
+
+
+ Для одиночного выбора пустая кнопка включает авто-переход. Для множественного выбора кнопка отображается всегда.
+
+
+
+ handleTextChange(event.target.value)} />
+
+
+
+
+
+
+
+
+ {allowRemove && (
+
+ )}
+
+
+
+
+ {activeHeader.show !== false && (
+
+ )}
+
+
+
+ {isEnabled && (
+
+ )}
+
-
- Unknown template type: {template}
-
-
+
+
+
+ {template === "info" && (
+ ) => void}
+ />
+ )}
+ {template === "date" && (
+ ) => void}
+ />
+ )}
+ {template === "coupon" && (
+ ) => void}
+ />
+ )}
+ {template === "form" && (
+ ) => void}
+ />
+ )}
+ {template === "list" && (
+ ) => void}
+ />
+ )}
+
+