87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
import { useMemo } from "react";
|
||
import { TextInput } from "@/components/ui/TextInput/TextInput";
|
||
import { useBuilderDispatch, useBuilderState } from "@/lib/admin/builder/context";
|
||
import { Section } from "./Section";
|
||
import type { BuilderScreen } from "@/lib/admin/builder/types";
|
||
|
||
export function FunnelSettingsPanel() {
|
||
const state = useBuilderState();
|
||
const dispatch = useBuilderDispatch();
|
||
|
||
const screenOptions = useMemo(
|
||
() => state.screens.map((screen: BuilderScreen) => ({ id: screen.id, title: screen.title.text })),
|
||
[state.screens]
|
||
);
|
||
|
||
const handleMetaChange = (field: keyof typeof state.meta, value: string) => {
|
||
dispatch({ type: "set-meta", payload: { [field]: value } });
|
||
};
|
||
|
||
const handleFirstScreenChange = (value: string) => {
|
||
dispatch({ type: "set-meta", payload: { firstScreenId: value } });
|
||
};
|
||
|
||
const handleDefaultTextsChange = (
|
||
field: keyof NonNullable<typeof state.defaultTexts>,
|
||
value: string
|
||
) => {
|
||
dispatch({ type: "set-default-texts", payload: { [field]: value } });
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Section title="Настройки воронки">
|
||
<div className="space-y-3">
|
||
<TextInput
|
||
label="ID воронки"
|
||
value={state.meta.id}
|
||
onChange={(e) => handleMetaChange("id", e.target.value)}
|
||
/>
|
||
<TextInput
|
||
label="Название"
|
||
value={state.meta.title || ""}
|
||
onChange={(e) => handleMetaChange("title", e.target.value)}
|
||
/>
|
||
<TextInput
|
||
label="Описание"
|
||
value={state.meta.description || ""}
|
||
onChange={(e) => handleMetaChange("description", e.target.value)}
|
||
/>
|
||
<label className="flex flex-col gap-2 text-sm">
|
||
<span className="text-muted-foreground">Первый экран</span>
|
||
<select
|
||
className="rounded-lg border border-border bg-background px-3 py-2"
|
||
value={state.meta.firstScreenId || ""}
|
||
onChange={(e) => handleFirstScreenChange(e.target.value)}
|
||
>
|
||
<option value="">—</option>
|
||
{screenOptions.map((screen) => (
|
||
<option key={screen.id} value={screen.id}>
|
||
{screen.title}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
</div>
|
||
</Section>
|
||
|
||
<Section title="Дефолтные тексты">
|
||
<div className="space-y-3">
|
||
<TextInput
|
||
label='Кнопка "Next"'
|
||
placeholder="Next"
|
||
value={state.defaultTexts?.nextButton || ""}
|
||
onChange={(e) => handleDefaultTextsChange("nextButton", e.target.value)}
|
||
/>
|
||
<TextInput
|
||
label='Кнопка "Continue"'
|
||
placeholder="Continue"
|
||
value={state.defaultTexts?.continueButton || ""}
|
||
onChange={(e) => handleDefaultTextsChange("continueButton", e.target.value)}
|
||
/>
|
||
</div>
|
||
</Section>
|
||
</>
|
||
);
|
||
}
|