115 lines
3.7 KiB
TypeScript
Executable File
115 lines
3.7 KiB
TypeScript
Executable File
import PriceList from "@/components/PriceList";
|
||
import styles from "./styles.module.css";
|
||
import { useEffect, useState } from "react";
|
||
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
|
||
import { useTranslation } from "react-i18next";
|
||
import { useApi } from "@/api";
|
||
import { useDispatch, useSelector } from "react-redux";
|
||
import { actions, selectors } from "@/store";
|
||
import { useNavigate } from "react-router-dom";
|
||
import routes from "@/routes";
|
||
import EmailsList from "@/components/EmailsList";
|
||
import MainButton from "@/components/MainButton";
|
||
|
||
function TrialChoicePage() {
|
||
const { i18n } = useTranslation();
|
||
const locale = i18n.language;
|
||
const api = useApi();
|
||
const dispatch = useDispatch();
|
||
const navigate = useNavigate();
|
||
const selectedPrice = useSelector(selectors.selectSelectedPrice);
|
||
const homeConfig = useSelector(selectors.selectHome);
|
||
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
|
||
const [isDisabled, setIsDisabled] = useState(true);
|
||
|
||
useEffect(() => {
|
||
(async () => {
|
||
const { sub_plans } = await api.getSubscriptionPlans({ locale });
|
||
const plans = sub_plans
|
||
.filter((plan: ISubscriptionPlan) => plan.provider === "stripe")
|
||
.sort((a, b) => {
|
||
if (!a.trial || !b.trial) {
|
||
return 0;
|
||
}
|
||
if (a.trial?.price_cents < b.trial?.price_cents) {
|
||
return -1;
|
||
}
|
||
if (a.trial?.price_cents > b.trial?.price_cents) {
|
||
return 1;
|
||
}
|
||
return 0;
|
||
});
|
||
setSubPlans(plans);
|
||
})();
|
||
}, [api, locale]);
|
||
|
||
const handlePriceItem = () => {
|
||
setIsDisabled(false);
|
||
};
|
||
|
||
const handleNext = () => {
|
||
dispatch(
|
||
actions.siteConfig.update({
|
||
home: { pathFromHome: homeConfig.pathFromHome, isShowNavbar: false },
|
||
})
|
||
);
|
||
navigate(routes.client.trialPayment());
|
||
};
|
||
|
||
return (
|
||
<section className={`${styles.page} page`}>
|
||
<p className={styles.text}>
|
||
We've helped millions of people to have happier lives and better
|
||
relationships, and we want to help you too.
|
||
</p>
|
||
<p className={`${styles.text} ${styles.bold}`}>
|
||
Money shouldn’t stand in the way of finding astrology guidance that
|
||
finally works. So, choose an amount that you think is reasonable to try
|
||
us out for one week.
|
||
</p>
|
||
<p className={`${styles.text} ${styles.bold} ${styles.purple}`}>
|
||
It costs us $13.67 to offer a 7-day trial, but please choose the amount
|
||
you are comfortable with.
|
||
</p>
|
||
<div className={styles["price-container"]}>
|
||
<PriceList
|
||
subPlans={subPlans}
|
||
activeItem={selectedPrice}
|
||
classNameItem={styles["price-item"]}
|
||
classNameItemActive={styles["price-item-active"]}
|
||
click={handlePriceItem}
|
||
/>
|
||
<p className={styles["auxiliary-text"]} style={{ maxWidth: "75%" }}>
|
||
This option will help us support those who need to select the lowest
|
||
trial prices!
|
||
</p>
|
||
<img
|
||
className={styles["arrow-image"]}
|
||
src="/arrow.svg"
|
||
alt={`Arrow to $${subPlans.at(-1)}`}
|
||
/>
|
||
</div>
|
||
<div className={styles["emails-list-container"]}>
|
||
<EmailsList
|
||
classNameContainer={styles["emails-container"]}
|
||
classNameTitle={styles["emails-title"]}
|
||
classNameEmailItem={styles["email-item"]}
|
||
direction="right-left"
|
||
/>
|
||
</div>
|
||
<MainButton
|
||
className={styles.button}
|
||
disabled={isDisabled}
|
||
onClick={handleNext}
|
||
>
|
||
See my plan
|
||
</MainButton>
|
||
<p className={styles["auxiliary-text"]}>
|
||
*Cost of trial as of February 2024
|
||
</p>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export default TrialChoicePage;
|