diff --git a/src/components/funnel/templates/TrialChoiceTemplate/TrialChoiceTemplate.tsx b/src/components/funnel/templates/TrialChoiceTemplate/TrialChoiceTemplate.tsx index c5e2cdd..eb90a73 100644 --- a/src/components/funnel/templates/TrialChoiceTemplate/TrialChoiceTemplate.tsx +++ b/src/components/funnel/templates/TrialChoiceTemplate/TrialChoiceTemplate.tsx @@ -9,7 +9,8 @@ import type { import { TemplateLayout } from "@/components/funnel/templates/layouts/TemplateLayout"; import { createTemplateLayoutProps } from "@/lib/funnel/templateHelpers"; import { TrialOptionsGrid } from "@/components/widgets/TrialOptionsGrid"; -import { useState, useMemo } from "react"; +import { ProfileCreated } from "@/components/widgets/ProfileCreated"; +import { useState, useMemo, useRef } from "react"; import { usePaymentPlacement } from "@/hooks/payment/usePaymentPlacement"; import { useTrialVariantSelection } from "@/entities/session/payment/TrialVariantSelectionContext"; import { Currency } from "@/shared/types"; @@ -36,6 +37,7 @@ export function TrialChoiceTemplate(props: TrialChoiceTemplateProps) { onBack, screenProgress, defaultTexts, + answers, } = props; // Load trial variants from placement API (same source as TrialPayment) const paymentId = "main"; // can be made configurable later @@ -48,6 +50,12 @@ export function TrialChoiceTemplate(props: TrialChoiceTemplateProps) { const [selectedId, setSelectedId] = useState(selectedVariantId); const [showError, setShowError] = useState(false); + // Ref для прокрутки к вариантам триала + const trialOptionsRef = useRef(null); + + // Получаем email из answers воронки + const email = typeof answers.email === 'string' ? answers.email : 'user@example.com'; + // Map variant -> TrialOption items with server-provided English titles and accent (last as fallback) const items = useMemo(() => { const currency = placement?.currency || Currency.USD; @@ -97,7 +105,16 @@ export function TrialChoiceTemplate(props: TrialChoiceTemplateProps) { disabled: isActionDisabled, onClick: onContinue, onDisabledClick: () => { - if (isActionDisabled) setShowError(true); + if (isActionDisabled) { + setShowError(true); + // Прокручиваем к вариантам триала + if (trialOptionsRef.current) { + trialOptionsRef.current.scrollIntoView({ + behavior: 'smooth', + block: 'center', + }); + } + } }, }, } @@ -113,16 +130,92 @@ export function TrialChoiceTemplate(props: TrialChoiceTemplateProps) { } return ( - - { - setSelectedId(id); - setSelectedVariantId(id); // Save to context for Payment screen - if (showError) setShowError(false); - }} - /> + +
+ {/* Виджет созданного профиля - без верхнего отступа */} + + + {/* Первый текстовый блок */} +

+ You're just one step away from discovering the face of your true soulmate — the person whose energy aligns perfectly with yours. This personalized experience, created by professionals through a precise analysis of your energy, compatibility, and subconscious love patterns, also includes the "Finding the One Guide" — a profound journey that reveals why your past relationships were the way they were and how to finally open yourself to real, lasting love. It has already helped millions find their true partner and harmony in love. +
+
+ Your portrait and guide — which could completely transform how you see love — are almost ready! Before we send them, we invite you to choose the amount you feel is fair to unlock access. +

+ + {/* Второй текстовый блок (список) */} +
+
    +
  • See the face of the person energetically connected to you — the one truly meant for you;
    • +
  • Understand which emotional and energetic patterns have kept you from meeting "the one";
    • +
  • Recognize why the same relationship cycles keep repeating — and learn how to break them;
    • +
  • Save hundreds of dollars on shallow compatibility tests and guesswork — this is a deep, personal exploration of your love energy;
    • +
  • You will receive not only your personalized portrait but also powerful insights into your emotional energy — who truly nourishes it, who drains it, and how these invisible exchanges shape your relationships.
    • +
+
+ + {/* Третий текстовый блок */} +

+ Creating your portrait and guide costs us $13.76, but you can choose the amount that feels right to you. +

+ + {/* TrialOptionsGrid с ref для прокрутки */} +
+ { + setSelectedId(id); + setSelectedVariantId(id); // Save to context for Payment screen + if (showError) setShowError(false); + }} + /> +
+ + {/* Блок со стрелочкой и текстом под вариантами */} +
+ {/* Контейнер стрелочки */} +
+ {/* Стрелочка указывает на центр правой колонки (последний вариант) */} +
+ + + + + + + + + + +
+
+ + {/* Текст под стрелочкой */} +

+ It costs us $13.76 to compensate our team for the work involved in creating your personalized portrait and guide, but please choose the amount you are comfortable with. +

+
+
); } diff --git a/src/components/widgets/ProfileCreated/ProfileCreated.stories.tsx b/src/components/widgets/ProfileCreated/ProfileCreated.stories.tsx index 853fc91..f46894f 100644 --- a/src/components/widgets/ProfileCreated/ProfileCreated.stories.tsx +++ b/src/components/widgets/ProfileCreated/ProfileCreated.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/no-renderer-packages */ import type { Meta, StoryObj } from '@storybook/react'; import { ProfileCreated } from './ProfileCreated';