121 lines
4.0 KiB
TypeScript
121 lines
4.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import Header from "../TrialPayment/components/Header";
|
|
import PersonalInformation from "../TrialPayment/components/PersonalInformation";
|
|
import WithPartnerInformation from "../TrialPayment/components/WithPartnerInformation";
|
|
import styles from "./styles.module.css";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import { getZodiacSignByDate } from "@/services/zodiac-sign";
|
|
import Title from "@/components/Title";
|
|
import Goal from "../TrialPayment/components/Goal";
|
|
import Reviews from "../TrialPayment/components/Reviews";
|
|
import { trialPaymentReviews } from "@/data/reviews";
|
|
import AccessCodeApp from "./components/AccessCodeApp";
|
|
import YourReading from "../TrialPayment/components/YourReading";
|
|
import PointsList from "../TrialPayment/components/PointsList";
|
|
import OftenAsk from "../TrialPayment/components/OftenAsk";
|
|
import { trialPaymentPointsList } from "@/data/pointsLists";
|
|
|
|
function TryAppPage() {
|
|
const birthdate = useSelector(selectors.selectBirthdate);
|
|
const zodiacSign = getZodiacSignByDate(birthdate);
|
|
const {
|
|
gender,
|
|
birthPlace,
|
|
partnerBirthPlace,
|
|
partnerBirthdate,
|
|
partnerGender,
|
|
goal,
|
|
flowChoice,
|
|
} = useSelector(selectors.selectQuestionnaire);
|
|
const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);
|
|
const [singleOrWithPartner, setSingleOrWithPartner] = useState<
|
|
"single" | "partner"
|
|
>("single");
|
|
const [marginTopTitle, setMarginTopTitle] = useState<number>(360);
|
|
|
|
useEffect(() => {
|
|
if (["relationship", "married"].includes(flowChoice)) {
|
|
setMarginTopTitle(460);
|
|
setSingleOrWithPartner("partner");
|
|
return;
|
|
}
|
|
setSingleOrWithPartner("single");
|
|
setMarginTopTitle(340);
|
|
}, [flowChoice]);
|
|
|
|
const downloadApp = () => {
|
|
// TODO
|
|
window.location.href =
|
|
"https://apps.apple.com/us/app/aura-astrology-horoscope/id1601978549";
|
|
};
|
|
|
|
return (
|
|
<section className={`${styles.page} page`}>
|
|
<Header buttonClick={downloadApp} />
|
|
{singleOrWithPartner === "partner" && (
|
|
<WithPartnerInformation
|
|
zodiacSign={zodiacSign}
|
|
gender={gender}
|
|
birthPlace={birthPlace}
|
|
birthdate={birthdate}
|
|
partnerBirthPlace={partnerBirthPlace}
|
|
partnerBirthDate={partnerBirthdate}
|
|
partnerGender={partnerGender}
|
|
partnerZodiacSign={partnerZodiacSign}
|
|
/>
|
|
)}
|
|
{singleOrWithPartner === "single" && (
|
|
<PersonalInformation
|
|
zodiacSign={zodiacSign}
|
|
gender={gender}
|
|
birthPlace={birthPlace}
|
|
birthdate={birthdate}
|
|
/>
|
|
)}
|
|
<Title
|
|
variant="h2"
|
|
className={styles.title}
|
|
style={{ marginTop: `${marginTopTitle + 20}px` }}
|
|
>
|
|
Your Personalized Clarity & Love Reading is ready and available in the
|
|
app for your iPhone!
|
|
</Title>
|
|
<Goal goal={goal} />
|
|
<AccessCodeApp />
|
|
<span className={styles["download-app-title"]}>1. Download App</span>
|
|
<img
|
|
className={styles["download-app-image"]}
|
|
src="/download-app.svg"
|
|
alt="Download on the app store"
|
|
onClick={downloadApp}
|
|
/>
|
|
<span className={styles["download-app-title"]}>1. Download App</span>
|
|
<div className={styles["code-container"]}>FV1HBP</div>
|
|
<p className={styles["code-description"]}>
|
|
Enter your access code in the app to access Your Personalized Reading.
|
|
Do not share your code with anyone
|
|
</p>
|
|
|
|
<YourReading
|
|
gender={gender}
|
|
zodiacSign={zodiacSign}
|
|
buttonClick={downloadApp}
|
|
singleOrWithPartner={singleOrWithPartner}
|
|
/>
|
|
<Title
|
|
variant="h2"
|
|
className={styles.title}
|
|
style={{ marginTop: "88px" }}
|
|
>
|
|
Users love us
|
|
</Title>
|
|
<Reviews reviews={trialPaymentReviews} />
|
|
<PointsList title="What you get" points={trialPaymentPointsList} />
|
|
<OftenAsk />
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default TryAppPage;
|