import React from "react";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import useSteps, { Step } from "@/hooks/palmistry/use-steps";
import Button from "@/components/palmistry/button/button";
import EmailHeader from "@/components/palmistry/email-header/email-header";
import { actions } from "@/store";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
const bestPlanId = "stripe.15";
const getFormattedPrice = (product: IPaywallProduct) => {
return (product?.trialPrice / 100).toFixed(2);
};
export default function StepSubscriptionPlan() {
const steps = useSteps();
const dispatch = useDispatch();
const activeProductFromStore = useSelector(selectors.selectActiveProduct);
const { products } = usePaywall({
placementKey: EPlacementKeys["aura.placement.palmistry.main"],
});
const storedEmail = steps.getStoredValue(Step.Email);
const [product, setProduct] = React.useState("");
const [email, setEmail] = React.useState(steps.getStoredValue(Step.Email));
React.useEffect(() => {
if (activeProductFromStore) {
setProduct(activeProductFromStore._id);
}
}, [activeProductFromStore]);
React.useEffect(() => {
setEmail(storedEmail || "");
}, [storedEmail]);
const onNext = () => {
const targetProduct = products.find((_product) => _product._id === product);
if (targetProduct) {
dispatch(actions.payment.update({ activeProduct: targetProduct }));
}
steps.saveCurrent(product);
steps.goNext();
};
return (
<>
We've helped millions of people to reveal the destiny of their love life
and what the future holds for them and their families.
{products.map((_product) => (
setProduct(_product._id)}
>
${getFormattedPrice(_product)}
))}