import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import './payment-screen.css'; import useSteps, { Step } from '@/hooks/palmistry/use-steps'; import useTimer from '@/hooks/palmistry/use-timer'; import HeaderLogo from '@/components/palmistry/header-logo/header-logo'; import { selectors } from '@/store'; import { EPlacementKeys } from '@/api/resources/Paywall'; import { useSearchParams } from 'react-router-dom'; import PaymentModalNew from '@/components/PaymentModalNew'; import { getFormattedPrice } from '@/utils/price.utils'; export default function PaymentScreen() { const time = useTimer(); const activeProductFromStore = useSelector(selectors.selectActiveProduct); const [searchParams] = useSearchParams(); const subscriptionStatus = searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead"; const [height, setHeight] = useState(subscriptionStatus === "subscribed" ? 246 : 146); const steps = useSteps(); React.useEffect(() => { if (subscriptionStatus === "subscribed") { setTimeout(() => { steps.goNext(); }, 1500); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [subscriptionStatus]); React.useEffect(() => { if (!activeProductFromStore) { steps.setFirstUnpassedStep(Step.SubscriptionPlan); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [activeProductFromStore]); const trialPrice = activeProductFromStore?.trialPrice || 0; const fullPrice = activeProductFromStore?.price || 0; const [minutes, seconds] = time.split(":"); const returnUrl = window.location.origin + '/palmistry/payment'; return (