import React 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 PaymentModal from "@/components/pages/TrialPayment/components/PaymentModal"; import { selectors } from "@/store"; const getFormattedPrice = (price: number) => { return (price / 100).toFixed(2); } export default function PaymentScreen() { const time = useTimer(); const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan); const subscriptionStatus = useSelector(selectors.selectStatus); const steps = useSteps(); React.useEffect(() => { if (subscriptionStatus === "subscribed") { setTimeout(() => { steps.goNext(); }, 1500); } }, [subscriptionStatus]); React.useEffect(() => { if (!activeSubPlanFromStore) { steps.setFirstUnpassedStep(Step.SubscriptionPlan); } }, [activeSubPlanFromStore]); const trialPrice = activeSubPlanFromStore?.trial?.price_cents || 0; const fullPrice = activeSubPlanFromStore?.price_cents || 0; const [minutes, seconds] = time.split(':'); return (
The #1 Astrology app trusted by over{" "} 25 million{" "} people.
Personalized offer reserved
{minutes[0]} {minutes[1]}:{seconds[0]} {seconds[1]}

Start your 7-day trial

Total today ${getFormattedPrice(trialPrice)}
Code AURA24 applied!
You will be charged only{" "} ${getFormattedPrice(trialPrice)} for your 7-day trial. Then ${getFormattedPrice(fullPrice)} $ {getFormattedPrice(trialPrice)} per week. Save $ {getFormattedPrice(fullPrice - trialPrice)} every week. We’ll email you a reminder before your trial ends.
No commitment. Cancel anytime.
30-Day Money-Back Guarantee
{activeSubPlanFromStore && (
{subscriptionStatus !== "subscribed" && } {subscriptionStatus === "subscribed" && (
Payment success
)}
)}
); }