145 lines
3.6 KiB
TypeScript
145 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
import { Coupon } from "@/components/widgets/Coupon/Coupon";
|
|
import Typography from "@/components/ui/Typography/Typography";
|
|
|
|
import { buildTypographyProps } from "@/lib/funnel/mappers";
|
|
import type { CouponScreenDefinition, DefaultTexts } from "@/lib/funnel/types";
|
|
import { TemplateLayout } from "../layouts/TemplateLayout";
|
|
import { createTemplateLayoutProps } from "@/lib/funnel/templateHelpers";
|
|
|
|
interface CouponTemplateProps {
|
|
screen: CouponScreenDefinition;
|
|
onContinue: () => void;
|
|
canGoBack: boolean;
|
|
onBack: () => void;
|
|
screenProgress?: { current: number; total: number };
|
|
defaultTexts?: DefaultTexts;
|
|
}
|
|
|
|
export function CouponTemplate({
|
|
screen,
|
|
onContinue,
|
|
canGoBack,
|
|
onBack,
|
|
screenProgress,
|
|
defaultTexts,
|
|
}: CouponTemplateProps) {
|
|
const [copiedCode, setCopiedCode] = useState<string | null>(null);
|
|
|
|
|
|
const handleCopyPromoCode = (code: string) => {
|
|
navigator.clipboard.writeText(code);
|
|
setCopiedCode(code);
|
|
|
|
setTimeout(() => {
|
|
setCopiedCode(null);
|
|
}, 2000);
|
|
};
|
|
|
|
const couponProps = {
|
|
title: buildTypographyProps(screen.coupon.title, {
|
|
as: "h3" as const,
|
|
defaults: {
|
|
font: "manrope",
|
|
weight: "bold",
|
|
color: "primary",
|
|
},
|
|
}) ?? {
|
|
as: "h3" as const,
|
|
children: screen.coupon.title.text,
|
|
},
|
|
offer: {
|
|
title: buildTypographyProps(screen.coupon.offer.title, {
|
|
as: "h3" as const,
|
|
defaults: {
|
|
font: "manrope",
|
|
weight: "black",
|
|
color: "card",
|
|
size: "4xl",
|
|
},
|
|
}) ?? {
|
|
as: "h3" as const,
|
|
children: screen.coupon.offer.title.text,
|
|
},
|
|
description: buildTypographyProps(screen.coupon.offer.description, {
|
|
as: "p" as const,
|
|
defaults: {
|
|
font: "inter",
|
|
weight: "semiBold",
|
|
color: "card",
|
|
},
|
|
}) ?? {
|
|
as: "p" as const,
|
|
children: screen.coupon.offer.description.text,
|
|
},
|
|
},
|
|
promoCode: buildTypographyProps(screen.coupon.promoCode, {
|
|
as: "span" as const,
|
|
defaults: {
|
|
font: "inter",
|
|
weight: "semiBold",
|
|
},
|
|
}) ?? {
|
|
as: "span" as const,
|
|
children: screen.coupon.promoCode.text,
|
|
},
|
|
footer: buildTypographyProps(screen.coupon.footer, {
|
|
as: "p" as const,
|
|
defaults: {
|
|
font: "inter",
|
|
weight: "medium",
|
|
color: "muted",
|
|
size: "sm",
|
|
},
|
|
}) ?? {
|
|
as: "p" as const,
|
|
children: screen.coupon.footer.text,
|
|
},
|
|
onCopyPromoCode: handleCopyPromoCode,
|
|
};
|
|
|
|
const layoutProps = createTemplateLayoutProps(
|
|
screen,
|
|
{ canGoBack, onBack },
|
|
screenProgress,
|
|
{
|
|
preset: "left",
|
|
actionButton: {
|
|
defaultText: defaultTexts?.nextButton || "Continue",
|
|
disabled: false,
|
|
onClick: onContinue,
|
|
},
|
|
}
|
|
);
|
|
|
|
return (
|
|
<TemplateLayout {...layoutProps}>
|
|
<div className="w-full flex flex-col items-center justify-center mt-[22px]">
|
|
<div className="mb-8">
|
|
<Coupon {...couponProps} />
|
|
</div>
|
|
|
|
{copiedCode && (
|
|
<div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
|
|
<Typography
|
|
as="p"
|
|
size="sm"
|
|
color="success"
|
|
weight="medium"
|
|
align="center"
|
|
>
|
|
{screen.copiedMessage
|
|
? screen.copiedMessage.replace("{code}", copiedCode || "")
|
|
: `Промокод "${copiedCode}" скопирован!`
|
|
}
|
|
</Typography>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TemplateLayout>
|
|
);
|
|
}
|