108 lines
3.9 KiB
TypeScript
108 lines
3.9 KiB
TypeScript
"use client";
|
||
|
||
import { TextInput } from "@/components/ui/TextInput/TextInput";
|
||
import type { CouponScreenDefinition } from "@/lib/funnel/types";
|
||
import type { BuilderScreen } from "@/lib/admin/builder/types";
|
||
|
||
interface CouponScreenConfigProps {
|
||
screen: BuilderScreen & { template: "coupon" };
|
||
onUpdate: (updates: Partial<CouponScreenDefinition>) => void;
|
||
}
|
||
|
||
export function CouponScreenConfig({ screen, onUpdate }: CouponScreenConfigProps) {
|
||
const couponScreen = screen as CouponScreenDefinition & { position: { x: number; y: number } };
|
||
|
||
const handleCouponUpdate = <T extends keyof CouponScreenDefinition["coupon"]>(
|
||
field: T,
|
||
value: CouponScreenDefinition["coupon"][T]
|
||
) => {
|
||
onUpdate({
|
||
coupon: {
|
||
...couponScreen.coupon,
|
||
[field]: value,
|
||
},
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6 rounded-2xl border border-border/70 bg-background/80 p-5 shadow-sm">
|
||
<div className="space-y-3">
|
||
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
|
||
Настройки оффера
|
||
</h3>
|
||
<label className="flex flex-col gap-2 text-xs font-medium text-muted-foreground">
|
||
Заголовок оффера
|
||
<TextInput
|
||
placeholder="-50% на первый заказ"
|
||
value={couponScreen.coupon?.offer?.title?.text ?? ""}
|
||
onChange={(event) =>
|
||
handleCouponUpdate("offer", {
|
||
...couponScreen.coupon.offer,
|
||
title: {
|
||
...(couponScreen.coupon.offer?.title ?? {}),
|
||
text: event.target.value,
|
||
},
|
||
})
|
||
}
|
||
/>
|
||
</label>
|
||
<label className="flex flex-col gap-2 text-xs font-medium text-muted-foreground">
|
||
Подзаголовок/описание
|
||
<TextInput
|
||
placeholder="Персональная акция только сегодня"
|
||
value={couponScreen.coupon?.offer?.description?.text ?? ""}
|
||
onChange={(event) =>
|
||
handleCouponUpdate("offer", {
|
||
...couponScreen.coupon.offer,
|
||
description: {
|
||
...(couponScreen.coupon.offer?.description ?? {}),
|
||
text: event.target.value,
|
||
},
|
||
})
|
||
}
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<h4 className="text-sm font-semibold text-foreground">Промокод</h4>
|
||
<label className="flex flex-col gap-2 text-xs font-medium text-muted-foreground">
|
||
Текст промокода
|
||
<TextInput
|
||
placeholder="SALE50"
|
||
value={couponScreen.coupon?.promoCode?.text ?? ""}
|
||
onChange={(event) =>
|
||
handleCouponUpdate("promoCode", {
|
||
...(couponScreen.coupon.promoCode ?? {}),
|
||
text: event.target.value,
|
||
})
|
||
}
|
||
/>
|
||
</label>
|
||
<label className="flex flex-col gap-2 text-xs font-medium text-muted-foreground">
|
||
Подпись под промокодом
|
||
<TextInput
|
||
placeholder="Нажмите, чтобы скопировать"
|
||
value={couponScreen.coupon?.footer?.text ?? ""}
|
||
onChange={(event) =>
|
||
handleCouponUpdate("footer", {
|
||
...(couponScreen.coupon.footer ?? {}),
|
||
text: event.target.value,
|
||
})
|
||
}
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<h4 className="text-sm font-semibold text-foreground">Сообщение об успехе</h4>
|
||
<TextInput
|
||
placeholder="Промокод скопирован!"
|
||
value={couponScreen.copiedMessage ?? ""}
|
||
onChange={(event) => onUpdate({ copiedMessage: event.target.value || undefined })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|