gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AW-79-AW-80-AW-81-newPaymentMethod-Placement

Browse Source
This commit is contained in:
Денис Катаев 2024-05-20 14:24:53 +00:00 committed by Daniil Chemerkin
parent a8e26611d3
commit ff9fce9483
41 changed files with 987 additions and 914 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
environments/.env.develop
View File

@ -1,5 +1,6 @@
AURA_API_HOST=https://api-web.aura.wit.life AURA_API_HOST=https://api-web.aura.wit.life
AURA_DAPI_HOST=https://dev.api.aura.witapps.us AURA_DAPI_HOST=https://dev.api.aura.witapps.us
AURA_DAPI_PREFIX=v2
AURA_SITE_HOST=https://aura.wit.life AURA_SITE_HOST=https://aura.wit.life
AURA_PREFIX=api/v1 AURA_PREFIX=api/v1
AURA_OPEN_AI_HOST=https://api.openai.com AURA_OPEN_AI_HOST=https://api.openai.com

1
environments/.env.production
View File

@ -1,5 +1,6 @@
AURA_API_HOST=https://api-web.aura.wit.life AURA_API_HOST=https://api-web.aura.wit.life
AURA_DAPI_HOST=https://api.aura.witapps.us AURA_DAPI_HOST=https://api.aura.witapps.us
AURA_DAPI_PREFIX=v2
AURA_SITE_HOST=https://aura.wit.life AURA_SITE_HOST=https://aura.wit.life
AURA_PREFIX=api/v1 AURA_PREFIX=api/v1
AURA_OPEN_AI_HOST=https://api.openai.com AURA_OPEN_AI_HOST=https://api.openai.com

9
src/api/api.ts
View File

@ -11,7 +11,6 @@ import {
DailyForecasts, DailyForecasts,
SubscriptionItems, SubscriptionItems,
SubscriptionCheckout, SubscriptionCheckout,
SubscriptionReceipts,
SubscriptionStatus, SubscriptionStatus,
AICompatCategories, AICompatCategories,
AICompats, AICompats,
@ -28,6 +27,8 @@ import {
SinglePayment, SinglePayment,
Products, Products,
Palmistry, Palmistry,
Paywall,
Payment,
} from './resources' } from './resources'
const api = { const api = {
@ -48,8 +49,6 @@ const api = {
getSubscriptionPlans: createMethod<SubscriptionPlans.Payload, SubscriptionPlans.Response>(SubscriptionPlans.createRequest), getSubscriptionPlans: createMethod<SubscriptionPlans.Payload, SubscriptionPlans.Response>(SubscriptionPlans.createRequest),
getSubscriptionCheckout: createMethod<SubscriptionCheckout.Payload, SubscriptionCheckout.Response>(SubscriptionCheckout.createRequest), getSubscriptionCheckout: createMethod<SubscriptionCheckout.Payload, SubscriptionCheckout.Response>(SubscriptionCheckout.createRequest),
getSubscriptionStatus: createMethod<SubscriptionStatus.Payload, SubscriptionStatus.Response>(SubscriptionStatus.createRequest), getSubscriptionStatus: createMethod<SubscriptionStatus.Payload, SubscriptionStatus.Response>(SubscriptionStatus.createRequest),
getSubscriptionReceipt: createMethod<SubscriptionReceipts.GetPayload, SubscriptionReceipts.Response>(SubscriptionReceipts.createGetRequest),
createSubscriptionReceipt: createMethod<SubscriptionReceipts.Payload, SubscriptionReceipts.Response>(SubscriptionReceipts.createRequest),
getAiCompatCategories: createMethod<AICompatCategories.Payload, AICompatCategories.Response>(AICompatCategories.createRequest), getAiCompatCategories: createMethod<AICompatCategories.Payload, AICompatCategories.Response>(AICompatCategories.createRequest),
getAiCompat: createMethod<AICompats.Payload, AICompats.Response>(AICompats.createRequest), getAiCompat: createMethod<AICompats.Payload, AICompats.Response>(AICompats.createRequest),
getAiRequest: createMethod<AIRequests.Payload, AIRequests.Response>(AIRequests.createRequest), getAiRequest: createMethod<AIRequests.Payload, AIRequests.Response>(AIRequests.createRequest),
@ -75,6 +74,10 @@ const api = {
getPalmistryLines: createMethod<Palmistry.Payload, Palmistry.Response>(Palmistry.createRequest), getPalmistryLines: createMethod<Palmistry.Payload, Palmistry.Response>(Palmistry.createRequest),
// New Authorization // New Authorization
authorization: createMethod<User.ICreateAuthorizePayload, User.ICreateAuthorizeResponse>(User.createAuthorizeRequest), authorization: createMethod<User.ICreateAuthorizePayload, User.ICreateAuthorizeResponse>(User.createAuthorizeRequest),
// Paywall
getPaywallByPlacementKey: createMethod<Paywall.PayloadGet, Paywall.ResponseGet>(Paywall.createRequestGet),
// Payment
makePayment: createMethod<Payment.PayloadPost, Payment.ResponsePost>(Payment.createRequestPost),
} }
export type ApiContextValue = typeof api export type ApiContextValue = typeof api

46
src/api/resources/Payment.ts Normal file
View File

@ -0,0 +1,46 @@
import routes from "@/routes";
import { getAuthHeaders } from "../utils";
interface Payload {
token: string;
}
export interface PayloadPost extends Payload {
productId: string;
}
interface ResponsePostSuccess {
status: "payment_intent_created" | "paid" | unknown,
type: "setup" | "payment",
data: {
client_secret: string,
paymentIntentId: string,
return_url?: string,
public_key: string,
product: {
id: string,
name: string,
description?: string,
price: {
id: string,
unit_amount: number,
currency: "USD" | string
}
}
}
}
interface ResponsePostError {
status: string;
message: string;
}
export type ResponsePost = ResponsePostSuccess | ResponsePostError;
export const createRequestPost = ({ token, productId }: PayloadPost): Request => {
const url = new URL(routes.server.makePayment());
const body = JSON.stringify({
productId
});
return new Request(url, { method: "POST", headers: getAuthHeaders(token), body });
};

64
src/api/resources/Paywall.ts Normal file
View File

@ -0,0 +1,64 @@
import routes from "@/routes";
import { getAuthHeaders } from "../utils";
interface Payload {
token: string;
}
export interface PayloadGet extends Payload {
placementKey: EPlacementKeys;
}
export enum EPlacementKeys {
"aura.placement.main" = "aura.placement.main",
"aura.placement.redesign.main" = "aura.placement.redesign.main",
}
interface ResponseGetSuccess {
paywall: IPaywall;
}
interface ResponseGetError {
status: string;
message: string;
}
export interface IPaywall {
_id: string;
key: string;
name: string;
products: IPaywallProduct[];
properties: IPaywallProperties[];
}
export interface IPaywallProduct {
_id: string;
key: string;
productId: string;
name: string;
priceId: string;
type: string;
description: string;
discountPrice: null;
discountPriceId: null;
isDiscount: boolean;
isFreeTrial: boolean;
isTrial: boolean;
price: number;
trialDuration: number;
trialPrice: number;
trialPriceId: string;
}
interface IPaywallProperties {
_id: string;
key: string;
value: string;
}
export type ResponseGet = ResponseGetSuccess | ResponseGetError;
export const createRequestGet = ({ token, placementKey }: PayloadGet): Request => {
const url = new URL(routes.server.getPaywallByPlacementKey(placementKey));
return new Request(url, { method: "GET", headers: getAuthHeaders(token) });
};

3
src/api/resources/index.ts
View File

@ -10,7 +10,6 @@ export * as AuthTokens from "./AuthTokens";
export * as SubscriptionItems from "./UserSubscriptionItemPrices"; export * as SubscriptionItems from "./UserSubscriptionItemPrices";
export * as SubscriptionCheckout from "./UserSubscriptionCheckout"; export * as SubscriptionCheckout from "./UserSubscriptionCheckout";
export * as SubscriptionStatus from "./UserSubscriptionStatus"; export * as SubscriptionStatus from "./UserSubscriptionStatus";
export * as SubscriptionReceipts from "./UserSubscriptionReceipts";
export * as AICompatCategories from "./AICompatCategories"; export * as AICompatCategories from "./AICompatCategories";
export * as AICompats from "./AICompats"; export * as AICompats from "./AICompats";
export * as AIRequests from "./AIRequests"; export * as AIRequests from "./AIRequests";
@ -26,3 +25,5 @@ export * as OpenAI from "./OpenAI";
export * as SinglePayment from "./SinglePayment"; export * as SinglePayment from "./SinglePayment";
export * as Products from "./Products"; export * as Products from "./Products";
export * as Palmistry from "./Palmistry"; export * as Palmistry from "./Palmistry";
export * as Paywall from "./Paywall";
export * as Payment from "./Payment";

59
src/components/EmailEnterPage/index.tsx
View File

@ -4,7 +4,6 @@ import { useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store"; import { actions, selectors } from "@/store";
import { useApi } from "@/api";
import Title from "../Title"; import Title from "../Title";
import Policy from "../Policy"; import Policy from "../Policy";
import EmailInput from "./EmailInput"; import EmailInput from "./EmailInput";
@ -12,9 +11,10 @@ import MainButton from "../MainButton";
import Loader, { LoaderColor } from "../Loader"; import Loader, { LoaderColor } from "../Loader";
import routes from "@/routes"; import routes from "@/routes";
import NameInput from "./NameInput"; import NameInput from "./NameInput";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import { useAuthentication } from "@/hooks/authentication/use-authentication"; import { useAuthentication } from "@/hooks/authentication/use-authentication";
import { ESourceAuthorization } from "@/api/resources/User"; import { ESourceAuthorization } from "@/api/resources/User";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
interface IEmailEnterPage { interface IEmailEnterPage {
redirectUrl?: string; redirectUrl?: string;
@ -25,8 +25,7 @@ function EmailEnterPage({
redirectUrl = routes.client.emailConfirm(), redirectUrl = routes.client.emailConfirm(),
isRequiredName = false, isRequiredName = false,
}: IEmailEnterPage): JSX.Element { }: IEmailEnterPage): JSX.Element {
const api = useApi(); const { t } = useTranslation();
const { t, i18n } = useTranslation();
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate(); const navigate = useNavigate();
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
@ -35,51 +34,31 @@ function EmailEnterPage({
const [isValidEmail, setIsValidEmail] = useState(false); const [isValidEmail, setIsValidEmail] = useState(false);
const [isValidName, setIsValidName] = useState(!isRequiredName); const [isValidName, setIsValidName] = useState(!isRequiredName);
const [isAuth, setIsAuth] = useState(false); const [isAuth, setIsAuth] = useState(false);
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]); const activeProductFromStore = useSelector(selectors.selectActiveProduct);
const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
const [activeSubPlan, setActiveSubPlan] = useState<ISubscriptionPlan | null>(
activeSubPlanFromStore
);
const locale = i18n.language;
const { subPlan } = useParams(); const { subPlan } = useParams();
const { error, isLoading, authorization } = useAuthentication(); const { error, isLoading, authorization } = useAuthentication();
const { products } = usePaywall({
placementKey: EPlacementKeys["aura.placement.main"],
});
const [activeProduct, setActiveProduct] = useState<IPaywallProduct | null>(
activeProductFromStore
);
useEffect(() => { useEffect(() => {
if (subPlan) { if (subPlan) {
const targetSubPlan = subPlans.find( const targetProduct = products.find(
(sub_plan) => (product) =>
String( String(
sub_plan?.trial?.price_cents product?.trialPrice
? Math.floor((sub_plan?.trial?.price_cents + 1) / 100) ? Math.floor((product?.trialPrice + 1) / 100)
: sub_plan.id.replace(".", "") : product.key.replace(".", "")
) === subPlan ) === subPlan
); );
if (targetSubPlan) { if (targetProduct) {
setActiveSubPlan(targetSubPlan); setActiveProduct(targetProduct);
} }
} }
}, [subPlan, subPlans]); }, [subPlan, products]);
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 handleValidEmail = (email: string) => { const handleValidEmail = (email: string) => {
dispatch(actions.form.addEmail(email)); dispatch(actions.form.addEmail(email));
@ -122,7 +101,7 @@ function EmailEnterPage({
await authorization(email, source); await authorization(email, source);
dispatch( dispatch(
actions.payment.update({ actions.payment.update({
activeSubPlan, activeProduct,
}) })
); );
setIsAuth(true); setIsAuth(true);

19
src/components/EmailsList/index.tsx
View File

@ -1,7 +1,6 @@
import { getRandomArbitrary, getRandomName } from "@/services/random-value"; import { getRandomArbitrary, getRandomName } from "@/services/random-value";
import EmailItem, { IEmailItemProps } from "../EmailItem"; import EmailItem, { IEmailItemProps } from "../EmailItem";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { useTranslation } from "react-i18next";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
const getEmails = (): IEmailItemProps[] => { const getEmails = (): IEmailItemProps[] => {
@ -18,6 +17,7 @@ const getEmails = (): IEmailItemProps[] => {
}; };
interface IEmailsListProps { interface IEmailsListProps {
title: string | JSX.Element | JSX.Element[];
classNameContainer?: string; classNameContainer?: string;
classNameTitle?: string; classNameTitle?: string;
classNameEmailItem?: string; classNameEmailItem?: string;
@ -25,25 +25,16 @@ interface IEmailsListProps {
} }
function EmailsList({ function EmailsList({
title,
classNameContainer = "", classNameContainer = "",
classNameTitle = "", classNameTitle = "",
classNameEmailItem = "", classNameEmailItem = "",
direction = "up-down", direction = "up-down",
}: IEmailsListProps): JSX.Element { }: IEmailsListProps): JSX.Element {
const { t } = useTranslation();
const [countUsers, setCountUsers] = useState(752);
const [emails, setEmails] = useState(getEmails()); const [emails, setEmails] = useState(getEmails());
const [elementIdx, setElementIdx] = useState(0); const [elementIdx, setElementIdx] = useState(0);
const itemsRef = useRef<HTMLDivElement[]>([]); const itemsRef = useRef<HTMLDivElement[]>([]);
useEffect(() => {
const randomDelay = getRandomArbitrary(3000, 5000);
const countUsersTimeOut = setTimeout(() => {
setCountUsers((prevState) => prevState + 1);
}, randomDelay);
return () => clearTimeout(countUsersTimeOut);
}, [countUsers]);
useEffect(() => { useEffect(() => {
let randomDelay = getRandomArbitrary(500, 5000); let randomDelay = getRandomArbitrary(500, 5000);
if (!elementIdx) { if (!elementIdx) {
@ -69,11 +60,7 @@ function EmailsList({
return ( return (
<div className={`${styles.container} ${classNameContainer}`}> <div className={`${styles.container} ${classNameContainer}`}>
<span className={`${styles["title"]} ${classNameTitle}`}> <span className={`${styles["title"]} ${classNameTitle}`}>{title}</span>
{t("people_joined_today", {
countPeoples: <strong>{countUsers}</strong>,
})}
</span>
<div className={`${styles["emails-container"]} ${styles[direction]}`}> <div className={`${styles["emails-container"]} ${styles[direction]}`}>
{emails.map(({ email, price }, idx) => ( {emails.map(({ email, price }, idx) => (
<div <div

6
src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx
View File

@ -16,12 +16,14 @@ interface ICheckoutFormProps {
children?: JSX.Element | null; children?: JSX.Element | null;
subscriptionReceiptId?: string; subscriptionReceiptId?: string;
returnUrl?: string; returnUrl?: string;
confirmType?: "payment" | "setup";
} }
export default function CheckoutForm({ export default function CheckoutForm({
children, children,
subscriptionReceiptId, subscriptionReceiptId,
returnUrl, returnUrl,
confirmType = "payment",
}: ICheckoutFormProps) { }: ICheckoutFormProps) {
const stripe = useStripe(); const stripe = useStripe();
const elements = useElements(); const elements = useElements();
@ -42,7 +44,9 @@ export default function CheckoutForm({
setIsProcessing(true); setIsProcessing(true);
try { try {
const { error } = await stripe.confirmPayment({ const { error } = await stripe[
confirmType === "payment" ? "confirmPayment" : "confirmSetup"
]({
elements, elements,
confirmParams: { confirmParams: {
return_url: returnUrl return_url: returnUrl

95
src/components/PaymentPage/methods/Stripe/Modal.tsx
View File

@ -1,20 +1,20 @@
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { useApi } from "@/api";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import Loader from "@/components/Loader"; import Loader from "@/components/Loader";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Stripe, loadStripe } from "@stripe/stripe-js"; import { Stripe, loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js"; import { Elements } from "@stripe/react-stripe-js";
import CheckoutForm from "./CheckoutForm"; import CheckoutForm from "./CheckoutForm";
import { useAuth } from "@/auth";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { selectors } from "@/store"; import { selectors } from "@/store";
import Title from "@/components/Title"; import Title from "@/components/Title";
import ApplePayButton from "@/components/StripePage/ApplePayButton"; import ApplePayButton from "@/components/StripePage/ApplePayButton";
import SubPlanInformation from "@/components/SubPlanInformation"; import SubPlanInformation from "@/components/SubPlanInformation";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import routes from "@/routes"; import routes from "@/routes";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { useMakePayment } from "@/hooks/payment/useMakePayment";
interface StripeModalProps { interface StripeModalProps {
open: boolean; open: boolean;
@ -29,59 +29,63 @@ export function StripeModal({
}: // onSuccess, }: // onSuccess,
// onError, // onError,
StripeModalProps): JSX.Element { StripeModalProps): JSX.Element {
const { i18n } = useTranslation();
const api = useApi();
const { token } = useAuth();
const locale = i18n.language;
const navigate = useNavigate(); const navigate = useNavigate();
const activeSubPlan = useSelector(selectors.selectActiveSubPlan);
const email = useSelector(selectors.selectUser).email; const email = useSelector(selectors.selectUser).email;
const [stripePromise, setStripePromise] = const [stripePromise, setStripePromise] =
useState<Promise<Stripe | null> | null>(null); useState<Promise<Stripe | null> | null>(null);
const [clientSecret, setClientSecret] = useState<string>("");
const [subscriptionReceiptId, setSubscriptionReceiptId] = const { products } = usePaywall({
useState<string>(""); placementKey: EPlacementKeys["aura.placement.main"],
const [isLoading, setIsLoading] = useState(true); });
if (!activeSubPlan) {
const activeProduct = useSelector(selectors.selectActiveProduct);
if (!activeProduct) {
navigate(routes.client.trialChoice()); navigate(routes.client.trialChoice());
} }
const {
paymentIntentId,
clientSecret,
returnUrl: checkoutUrl,
paymentType,
publicKey,
isLoading,
error,
} = useMakePayment({
productId: activeProduct?._id || "",
});
if (checkoutUrl?.length) {
window.location.href = checkoutUrl;
}
useEffect(() => { useEffect(() => {
(async () => { (async () => {
const siteConfig = await api.getAppConfig({ bundleId: "auraweb" }); if (!products?.length || !publicKey) return;
setStripePromise(loadStripe(siteConfig.data.stripe_public_key)); setStripePromise(loadStripe(publicKey));
const { sub_plans } = await api.getSubscriptionPlans({ locale }); const isActiveSubPlan = products.find(
const isActiveSubPlan = sub_plans.find( (product) => product._id === activeProduct?._id
(subPlan) => subPlan.id === activeSubPlan?.id
); );
if (!activeSubPlan || !isActiveSubPlan) { if (!activeProduct || !isActiveSubPlan) {
navigate(routes.client.priceList()); navigate(routes.client.priceList());
} }
})(); })();
}, [activeSubPlan, api, locale, navigate]); }, [activeProduct, navigate, products, publicKey]);
useEffect(() => {
(async () => {
const { subscription_receipt } = await api.createSubscriptionReceipt({
token,
way: "stripe",
subscription_receipt: {
sub_plan_id: activeSubPlan?.id || "stripe.7",
},
});
const { id } = subscription_receipt;
const { client_secret } = subscription_receipt.data;
setSubscriptionReceiptId(id);
setClientSecret(client_secret);
setIsLoading(false);
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [api, token]);
const handleClose = () => { const handleClose = () => {
onClose(); onClose();
}; };
if (error?.length) {
return (
<div className={styles["payment-modal"]}>
<Title variant="h3" className={styles.title}>
Something went wrong
</Title>
</div>
);
}
return ( return (
<Modal open={open} onClose={handleClose}> <Modal open={open} onClose={handleClose}>
{isLoading ? ( {isLoading ? (
@ -97,17 +101,18 @@ StripeModalProps): JSX.Element {
<p className={styles.email}>{email}</p> <p className={styles.email}>{email}</p>
</> </>
)} )}
{stripePromise && clientSecret && subscriptionReceiptId && ( {stripePromise && clientSecret && paymentIntentId && (
<Elements stripe={stripePromise} options={{ clientSecret }}> <Elements stripe={stripePromise} options={{ clientSecret }}>
<ApplePayButton <ApplePayButton
activeSubPlan={activeSubPlan} activeProduct={activeProduct}
client_secret={clientSecret} client_secret={clientSecret}
subscriptionReceiptId={subscriptionReceiptId} subscriptionReceiptId={paymentIntentId}
/>
{activeProduct && <SubPlanInformation product={activeProduct} />}
<CheckoutForm
confirmType={paymentType}
subscriptionReceiptId={paymentIntentId}
/> />
{activeSubPlan && (
<SubPlanInformation subPlan={activeSubPlan} />
)}
<CheckoutForm subscriptionReceiptId={subscriptionReceiptId} />
</Elements> </Elements>
)} )}
</Modal> </Modal>

72
src/components/PaymentPage/results/index.tsx
View File

@ -3,89 +3,17 @@ import { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom"; import { useSearchParams } from "react-router-dom";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { actions } from "@/store"; import { actions } from "@/store";
// import { SubscriptionReceipts, useApi, useApiCall } from "@/api";
// import { useAuth } from "@/auth";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import Loader from "@/components/Loader"; import Loader from "@/components/Loader";
import { paymentResultPathsOfProducts } from "@/data/products"; import { paymentResultPathsOfProducts } from "@/data/products";
function PaymentResultPage(): JSX.Element { function PaymentResultPage(): JSX.Element {
// const api = useApi();
// const { token } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch(); const dispatch = useDispatch();
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const status = searchParams.get("redirect_status"); const status = searchParams.get("redirect_status");
const redirect_type = searchParams.get("redirect_type"); const redirect_type = searchParams.get("redirect_type");
// const { id } = useParams();
// const requestTimeOutRef = useRef<NodeJS.Timeout>();
const [isLoading] = useState(true); const [isLoading] = useState(true);
// const [subscriptionReceipt, setSubscriptionReceipt] =
// useState<SubscriptionReceipts.SubscriptionReceipt>();
// const loadData = useCallback(async () => {
// if (!id) {
// return null;
// }
// const getSubscriptionReceiptStatus = async () => {
// const { subscription_receipt } = await api.getSubscriptionReceipt({
// token,
// id,
// });
// const { stripe_status } = subscription_receipt.data;
// if (stripe_status === "incomplete") {
// requestTimeOutRef.current = setTimeout(
// getSubscriptionReceiptStatus,
// 3000
// );
// }
// setSubscriptionReceipt(subscription_receipt);
// return { subscription_receipt };
// };
// return getSubscriptionReceiptStatus();
// }, [api, id, token]);
// useApiCall<SubscriptionReceipts.Response | null>(loadData);
// useEffect(() => {
// if (!subscriptionReceipt) {
// if (id?.length) return;
// return () => {
// if (requestTimeOutRef.current) {
// clearTimeout(requestTimeOutRef.current);
// }
// navigate(routes.client.paymentFail());
// };
// }
// const { stripe_status } = subscriptionReceipt.data;
// if (stripe_status === "succeeded") {
// dispatch(actions.status.update("subscribed"));
// setIsLoading(false);
// return () => {
// if (requestTimeOutRef.current) {
// clearTimeout(requestTimeOutRef.current);
// }
// navigate(routes.client.paymentSuccess());
// };
// } else if (stripe_status === "payment_failed") {
// setIsLoading(false);
// return () => {
// if (requestTimeOutRef.current) {
// clearTimeout(requestTimeOutRef.current);
// }
// navigate(routes.client.paymentFail());
// };
// }
// }, [dispatch, id, navigate, subscriptionReceipt]);
// useEffect(() => {
// return () => {
// if (requestTimeOutRef.current) {
// clearTimeout(requestTimeOutRef.current);
// }
// };
// }, []);
useEffect(() => { useEffect(() => {
if (status === "succeeded") { if (status === "succeeded") {

32
src/components/PriceList/index.tsx
View File

@ -3,37 +3,39 @@ import PriceItem from "../PriceItem";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { actions } from "@/store"; import { actions } from "@/store";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans"; import { IPaywallProduct } from "@/api/resources/Paywall";
interface PriceListProps { interface PriceListProps {
subPlans: ISubscriptionPlan[]; products: IPaywallProduct[];
activeItem: number | null; activeItem: number | null;
classNameItem?: string; classNameItem?: string;
classNameItemActive?: string; classNameItemActive?: string;
click: () => void; click: () => void;
} }
const getPrice = (plan: ISubscriptionPlan) => { const getPrice = (product: IPaywallProduct) => {
return (plan.trial?.price_cents || 0) / 100; return (product.trialPrice || 0) / 100;
}; };
function PriceList({ function PriceList({
click, click,
subPlans, products,
classNameItem = "", classNameItem = "",
classNameItemActive = "", classNameItemActive = "",
}: PriceListProps): JSX.Element { }: PriceListProps): JSX.Element {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [activePlanItem, setActivePlanItem] = const [activeProduct, setActiveProduct] = useState<IPaywallProduct | null>(
useState<ISubscriptionPlan | null>(null); null
);
const priceItemClick = (id: string) => { const priceItemClick = (id: string) => {
const activePlan = subPlans.find((item) => item.id === String(id)) || null; const activeProduct =
setActivePlanItem(activePlan); products.find((item) => item._id === String(id)) || null;
if (activePlan) { setActiveProduct(activeProduct);
if (activeProduct) {
dispatch( dispatch(
actions.payment.update({ actions.payment.update({
activeSubPlan: activePlan, activeProduct,
}) })
); );
} }
@ -42,12 +44,12 @@ function PriceList({
return ( return (
<div className={`${styles.container}`}> <div className={`${styles.container}`}>
{subPlans.map((plan, idx) => ( {products.map((product, idx) => (
<PriceItem <PriceItem
active={plan.id === activePlanItem?.id} active={product._id === activeProduct?._id}
key={idx} key={idx}
value={getPrice(plan)} value={getPrice(product)}
id={plan.id} id={product._id}
className={classNameItem} className={classNameItem}
classNameActive={classNameItemActive} classNameActive={classNameItemActive}
click={priceItemClick} click={priceItemClick}

55
src/components/PriceListPage/index.tsx
View File

@ -8,42 +8,31 @@ import Title from "../Title";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import EmailsList from "../EmailsList"; import EmailsList from "../EmailsList";
import PriceList from "../PriceList"; import PriceList from "../PriceList";
import { useApi } from "@/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import Loader from "../Loader"; import Loader from "../Loader";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { getRandomArbitrary } from "@/services/random-value";
function PriceListPage(): JSX.Element { function PriceListPage(): JSX.Element {
const { t, i18n } = useTranslation(); const { t } = useTranslation();
const locale = i18n.language;
const api = useApi();
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch(); const dispatch = useDispatch();
const homeConfig = useSelector(selectors.selectHome); const homeConfig = useSelector(selectors.selectHome);
const selectedPrice = useSelector(selectors.selectSelectedPrice); const selectedPrice = useSelector(selectors.selectSelectedPrice);
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
const email = useSelector(selectors.selectEmail); const email = useSelector(selectors.selectEmail);
const { products, getText } = usePaywall({
placementKey: EPlacementKeys["aura.placement.main"],
});
const [countUsers, setCountUsers] = useState(752);
useEffect(() => { useEffect(() => {
(async () => { const randomDelay = getRandomArbitrary(3000, 5000);
const { sub_plans } = await api.getSubscriptionPlans({ locale }); const countUsersTimeOut = setTimeout(() => {
const plans = sub_plans setCountUsers((prevState) => prevState + 1);
.filter((plan: ISubscriptionPlan) => plan.provider === "stripe") }, randomDelay);
.sort((a, b) => { return () => clearTimeout(countUsersTimeOut);
if (!a.trial || !b.trial) { }, [countUsers]);
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 handleNext = () => { const handleNext = () => {
dispatch( dispatch(
@ -60,25 +49,33 @@ function PriceListPage(): JSX.Element {
<> <>
<UserHeader email={email} /> <UserHeader email={email} />
<section className={`${styles.page} page`}> <section className={`${styles.page} page`}>
{!!subPlans.length && ( {!!products.length && (
<> <>
<Title className={styles.title} variant="h2"> <Title className={styles.title} variant="h2">
{t("choose_your_own_fee")} {t("choose_your_own_fee")}
</Title> </Title>
<p className={styles.slogan}>{t("aura.web.price_selection")}</p> <p className={styles.slogan}>{t("aura.web.price_selection")}</p>
<div className={styles["emails-list-container"]}> <div className={styles["emails-list-container"]}>
<EmailsList /> <EmailsList
title={getText("text.5", {
replacementSelector: "strong",
replacement: {
target: "${quantity}",
replacement: countUsers.toString(),
},
})}
/>
</div> </div>
<div className={styles["price-list-container"]}> <div className={styles["price-list-container"]}>
<PriceList <PriceList
activeItem={selectedPrice} activeItem={selectedPrice}
subPlans={subPlans} products={products}
click={handleNext} click={handleNext}
/> />
</div> </div>
</> </>
)} )}
{!subPlans.length && <Loader />} {!products.length && <Loader />}
</section> </section>
</> </>
); );

21
src/components/StripePage/ApplePayButton/index.tsx
View File

@ -5,14 +5,14 @@ import {
useElements, useElements,
} from "@stripe/react-stripe-js"; } from "@stripe/react-stripe-js";
import { PaymentRequest } from "@stripe/stripe-js"; import { PaymentRequest } from "@stripe/stripe-js";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import routes from "@/routes"; import routes from "@/routes";
import { IPaywallProduct } from "@/api/resources/Paywall";
interface ApplePayButtonProps { interface ApplePayButtonProps {
activeSubPlan: ISubscriptionPlan | null; activeProduct: IPaywallProduct | null;
client_secret: string; client_secret: string;
subscriptionReceiptId?: string; subscriptionReceiptId?: string;
returnUrl?: string; returnUrl?: string;
@ -20,7 +20,7 @@ interface ApplePayButtonProps {
} }
function ApplePayButton({ function ApplePayButton({
activeSubPlan, activeProduct,
client_secret, client_secret,
subscriptionReceiptId, subscriptionReceiptId,
returnUrl, returnUrl,
@ -34,15 +34,15 @@ function ApplePayButton({
null null
); );
const getAmountFromSubPlan = (subPlan: ISubscriptionPlan) => { const getAmountFromProduct = (subPlan: IPaywallProduct) => {
if (subPlan.trial) { if (subPlan.isTrial) {
return subPlan.trial.price_cents; return subPlan.trialPrice;
} }
return subPlan.price_cents; return subPlan.price;
}; };
useEffect(() => { useEffect(() => {
if (!stripe || !elements || !activeSubPlan) { if (!stripe || !elements || !activeProduct) {
return; return;
} }
@ -50,8 +50,8 @@ function ApplePayButton({
country: "US", country: "US",
currency: "usd", currency: "usd",
total: { total: {
label: activeSubPlan.name || "Subscription", label: activeProduct.name || "Subscription",
amount: getAmountFromSubPlan(activeSubPlan), amount: getAmountFromProduct(activeProduct),
}, },
requestPayerName: true, requestPayerName: true,
requestPayerEmail: true, requestPayerEmail: true,
@ -95,7 +95,6 @@ function ApplePayButton({
}); });
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [ }, [
activeSubPlan,
client_secret, client_secret,
dispatch, dispatch,
elements, elements,

98
src/components/StripePage/index.tsx
View File

@ -1,10 +1,8 @@
import { useApi } from "@/api";
import Loader from "@/components/Loader"; import Loader from "@/components/Loader";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Stripe, loadStripe } from "@stripe/stripe-js"; import { Stripe, loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js"; import { Elements } from "@stripe/react-stripe-js";
import CheckoutForm from "../PaymentPage/methods/Stripe/CheckoutForm"; import CheckoutForm from "../PaymentPage/methods/Stripe/CheckoutForm";
import { useAuth } from "@/auth";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { selectors } from "@/store"; import { selectors } from "@/store";
@ -12,58 +10,63 @@ import { useNavigate } from "react-router-dom";
import routes from "@/routes"; import routes from "@/routes";
import SubPlanInformation from "../SubPlanInformation"; import SubPlanInformation from "../SubPlanInformation";
import Title from "../Title"; import Title from "../Title";
import { useTranslation } from "react-i18next";
import ApplePayButton from "./ApplePayButton"; import ApplePayButton from "./ApplePayButton";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { useMakePayment } from "@/hooks/payment/useMakePayment";
export function StripePage(): JSX.Element { export function StripePage(): JSX.Element {
const { i18n } = useTranslation();
const api = useApi();
const { token } = useAuth();
const locale = i18n.language;
const navigate = useNavigate(); const navigate = useNavigate();
const activeSubPlan = useSelector(selectors.selectActiveSubPlan); const activeProduct = useSelector(selectors.selectActiveProduct);
const email = useSelector(selectors.selectUser).email; const email = useSelector(selectors.selectUser).email;
const [stripePromise, setStripePromise] = const [stripePromise, setStripePromise] =
useState<Promise<Stripe | null> | null>(null); useState<Promise<Stripe | null> | null>(null);
const [clientSecret, setClientSecret] = useState<string>(""); if (!activeProduct) {
const [subscriptionReceiptId, setSubscriptionReceiptId] =
useState<string>("");
const [isLoading, setIsLoading] = useState(true);
if (!activeSubPlan) {
navigate(routes.client.priceList()); navigate(routes.client.priceList());
} }
useEffect(() => { const {
(async () => { paymentIntentId,
const siteConfig = await api.getAppConfig({ bundleId: "auraweb" }); clientSecret,
setStripePromise(loadStripe(siteConfig.data.stripe_public_key)); returnUrl: checkoutUrl,
const { sub_plans } = await api.getSubscriptionPlans({ locale }); paymentType,
const isActiveSubPlan = sub_plans.find( publicKey,
(subPlan) => subPlan.id === activeSubPlan?.id isLoading,
); error,
if (!activeSubPlan || !isActiveSubPlan) { } = useMakePayment({
navigate(routes.client.priceList()); productId: activeProduct?._id || "",
} });
})();
}, [activeSubPlan, api, locale, navigate]); if (checkoutUrl?.length) {
window.location.href = checkoutUrl;
}
const { products } = usePaywall({
placementKey: EPlacementKeys["aura.placement.main"],
});
useEffect(() => { useEffect(() => {
(async () => { (async () => {
const { subscription_receipt } = await api.createSubscriptionReceipt({ if (!products?.length || !publicKey) return;
token, setStripePromise(loadStripe(publicKey));
way: "stripe", const isActiveProduct = products.find(
subscription_receipt: { (product) => product._id === activeProduct?._id
sub_plan_id: activeSubPlan?.id || "stripe.7", );
}, if (!activeProduct || !isActiveProduct) {
}); navigate(routes.client.priceList());
const { id } = subscription_receipt; }
const { client_secret } = subscription_receipt.data;
setSubscriptionReceiptId(id);
setClientSecret(client_secret);
setIsLoading(false);
})(); })();
// eslint-disable-next-line react-hooks/exhaustive-deps }, [activeProduct, navigate, products, publicKey]);
}, [api, token]);
if (error?.length) {
return (
<div className={styles["payment-modal"]}>
<Title variant="h3" className={styles.title}>
Something went wrong
</Title>
</div>
);
}
return ( return (
<div className={`${styles.page} page`}> <div className={`${styles.page} page`}>
@ -80,17 +83,18 @@ export function StripePage(): JSX.Element {
<p className={styles.email}>{email}</p> <p className={styles.email}>{email}</p>
</> </>
)} )}
{stripePromise && clientSecret && subscriptionReceiptId && ( {stripePromise && clientSecret && paymentIntentId && (
<Elements stripe={stripePromise} options={{ clientSecret }}> <Elements stripe={stripePromise} options={{ clientSecret }}>
<ApplePayButton <ApplePayButton
activeSubPlan={activeSubPlan} activeProduct={activeProduct}
client_secret={clientSecret} client_secret={clientSecret}
subscriptionReceiptId={subscriptionReceiptId} subscriptionReceiptId={paymentIntentId}
/>
{activeProduct && <SubPlanInformation product={activeProduct} />}
<CheckoutForm
confirmType={paymentType}
subscriptionReceiptId={paymentIntentId}
/> />
{activeSubPlan && (
<SubPlanInformation subPlan={activeSubPlan} />
)}
<CheckoutForm subscriptionReceiptId={subscriptionReceiptId} />
</Elements> </Elements>
)} )}
</div> </div>

16
src/components/SubPlanInformation/index.tsx
View File

@ -1,34 +1,34 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import TotalToday from "./TotalToday"; import TotalToday from "./TotalToday";
import ApplePayButton from "../StripePage/ApplePayButton"; import ApplePayButton from "../StripePage/ApplePayButton";
import { IPaywallProduct } from "@/api/resources/Paywall";
interface ISubPlanInformationProps { interface ISubPlanInformationProps {
subPlan: ISubscriptionPlan; product: IPaywallProduct;
client_secret?: string; client_secret?: string;
} }
const getPrice = (plan: ISubscriptionPlan): string => { const getPrice = (product: IPaywallProduct): string => {
return `$${ return `$${
(plan.trial?.price_cents === 100 ? 99 : plan.trial?.price_cents || 0) / 100 (product.trialPrice === 100 ? 99 : product.trialPrice || 0) / 100
}`; }`;
}; };
function SubPlanInformation({ function SubPlanInformation({
subPlan, product,
client_secret, client_secret,
}: ISubPlanInformationProps): JSX.Element { }: ISubPlanInformationProps): JSX.Element {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className={styles.container}> <div className={styles.container}>
<TotalToday total={getPrice(subPlan)} /> <TotalToday total={getPrice(product)} />
{client_secret && ( {client_secret && (
<ApplePayButton activeSubPlan={subPlan} client_secret={client_secret} /> <ApplePayButton activeProduct={product} client_secret={client_secret} />
)} )}
<p className={styles.description}> <p className={styles.description}>
{t("auweb.pay.information").replaceAll("%@", getPrice(subPlan))}. {t("auweb.pay.information").replaceAll("%@", getPrice(product))}.
</p> </p>
</div> </div>
); );

75
src/components/SubscriptionPage/index.tsx
View File

@ -11,22 +11,23 @@ import styles from "./styles.module.css";
// import Header from "../Header"; // import Header from "../Header";
// import SpecialWelcomeOffer from "../SpecialWelcomeOffer"; // import SpecialWelcomeOffer from "../SpecialWelcomeOffer";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { ISubscriptionPlan, ITrial } from "@/api/resources/SubscriptionPlans";
import { ApiError, extractErrorMessage, useApi } from "@/api"; import { ApiError, extractErrorMessage, useApi } from "@/api";
import { useAuth } from "@/auth"; import { useAuth } from "@/auth";
import { getClientLocale, getClientTimezone } from "@/locales"; import { getClientLocale, getClientTimezone } from "@/locales";
import Loader from "../Loader"; import Loader from "../Loader";
import Title from "../Title"; import Title from "../Title";
import ErrorText from "../ErrorText"; import ErrorText from "../ErrorText";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
const currency = Currency.USD; const currency = Currency.USD;
const locale = getClientLocale() as Locale; const locale = getClientLocale() as Locale;
const getPriceFromTrial = (trial: ITrial | null) => { const getPrice = (product: IPaywallProduct | null) => {
if (!trial) { if (!product?.trialPrice) {
return 0; return 0;
} }
return (trial.price_cents === 100 ? 99 : trial.price_cents || 0) / 100; return (product.trialPrice === 100 ? 99 : product.trialPrice || 0) / 100;
}; };
function SubscriptionPage(): JSX.Element { function SubscriptionPage(): JSX.Element {
@ -48,37 +49,40 @@ function SubscriptionPage(): JSX.Element {
const [isLoading, setIsLoading] = useState<boolean>(false); const [isLoading, setIsLoading] = useState<boolean>(false);
const [apiError, setApiError] = useState<ApiError | null>(null); const [apiError, setApiError] = useState<ApiError | null>(null);
const [error, setError] = useState<boolean>(false); const [error, setError] = useState<boolean>(false);
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
const [activeSubPlan, setActiveSubPlan] = useState<ISubscriptionPlan | null>(
activeSubPlanFromStore
);
const { subPlan } = useParams(); const { subPlan } = useParams();
const birthday = useSelector(selectors.selectBirthday); const birthday = useSelector(selectors.selectBirthday);
console.log(nameError) console.log(nameError);
const { products } = usePaywall({
placementKey: EPlacementKeys["aura.placement.main"],
});
const activeProductFromStore = useSelector(selectors.selectActiveProduct);
const [activeProduct, setActiveProduct] = useState<IPaywallProduct | null>(
activeProductFromStore
);
useEffect(() => { useEffect(() => {
if (subPlan) { if (subPlan) {
const targetSubPlan = subPlans.find( const targetProduct = products.find(
(sub_plan) => (product) =>
String( String(
sub_plan?.trial?.price_cents product?.trialPrice
? Math.floor((sub_plan?.trial?.price_cents + 1) / 100) ? Math.floor((product?.trialPrice + 1) / 100)
: sub_plan.id.replace(".", "") : product.key.replace(".", "")
) === subPlan ) === subPlan
); );
if (targetSubPlan) { if (targetProduct) {
setActiveSubPlan(targetSubPlan); setActiveProduct(targetProduct);
} }
} }
}, [subPlan, subPlans]); }, [products, subPlan]);
const paymentItems = [ const paymentItems = [
{ {
title: activeSubPlan?.name || "Per 7-Day Trial For", title: activeProduct?.name || "Per 7-Day Trial For",
price: getPriceFromTrial(activeSubPlan?.trial || null), price: getPrice(activeProduct),
description: activeSubPlan?.desc.length description: activeProduct?.description?.length
? activeSubPlan?.desc ? activeProduct.description
: t("au.2week_plan.web"), : t("au.2week_plan.web"),
}, },
]; ];
@ -111,7 +115,7 @@ function SubscriptionPage(): JSX.Element {
dispatch(actions.status.update("registred")); dispatch(actions.status.update("registred"));
dispatch( dispatch(
actions.payment.update({ actions.payment.update({
activeSubPlan, activeProduct,
}) })
); );
setIsLoading(false); setIsLoading(false);
@ -176,29 +180,6 @@ function SubscriptionPage(): JSX.Element {
setName(name); setName(name);
}; };
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]);
return ( return (
<> <>
{/* <SpecialWelcomeOffer open={isOpenModal} onClose={handleClick} /> */} {/* <SpecialWelcomeOffer open={isOpenModal} onClose={handleClick} /> */}
@ -274,7 +255,7 @@ function SubscriptionPage(): JSX.Element {
</div> </div>
<div className={styles["subscription-action"]}> <div className={styles["subscription-action"]}>
<MainButton onClick={handleClick}> <MainButton onClick={handleClick}>
Start ${getPriceFromTrial(activeSubPlan?.trial || null)} Start ${getPrice(activeProduct || null)}
</MainButton> </MainButton>
</div> </div>
<Policy> <Policy>

29
src/components/pages/ABDesign/v1/components/PriceList/index.tsx
View File

@ -2,38 +2,37 @@ import { useState } from "react";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { actions } from "@/store"; import { actions } from "@/store";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import PriceItem from "../PriceItem"; import PriceItem from "../PriceItem";
import { IPaywallProduct } from "@/api/resources/Paywall";
interface PriceListProps { interface PriceListProps {
subPlans: ISubscriptionPlan[]; products: IPaywallProduct[];
activeItem: number | null; activeItem: number | null;
classNameItem?: string; classNameItem?: string;
classNameItemActive?: string; classNameItemActive?: string;
click: () => void; click: () => void;
} }
const getPrice = (plan: ISubscriptionPlan) => { const getPrice = (product: IPaywallProduct) => {
return (plan.trial?.price_cents || 0) / 100; return (product.trialPrice || 0) / 100;
}; };
function PriceList({ function PriceList({
click, click,
subPlans, products,
classNameItem = "", classNameItem = "",
classNameItemActive = "", classNameItemActive = "",
}: PriceListProps): JSX.Element { }: PriceListProps): JSX.Element {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [activePlanItem, setActivePlanItem] = const [activeProductItem, setActiveProductItem] = useState<IPaywallProduct>();
useState<ISubscriptionPlan | null>(null);
const priceItemClick = (id: string) => { const priceItemClick = (id: string) => {
const activePlan = subPlans.find((item) => item.id === String(id)) || null; const activeProduct = products.find((item) => item._id === String(id));
setActivePlanItem(activePlan); setActiveProductItem(activeProduct);
if (activePlan) { if (activeProduct) {
dispatch( dispatch(
actions.payment.update({ actions.payment.update({
activeSubPlan: activePlan, activeProduct,
}) })
); );
} }
@ -42,12 +41,12 @@ function PriceList({
return ( return (
<div className={`${styles.container}`}> <div className={`${styles.container}`}>
{subPlans.map((plan, idx) => ( {products.map((product, idx) => (
<PriceItem <PriceItem
active={plan.id === activePlanItem?.id} active={product._id === activeProductItem?._id}
key={idx} key={idx}
value={getPrice(plan)} value={getPrice(product)}
id={plan.id} id={product._id}
className={classNameItem} className={classNameItem}
classNameActive={classNameItemActive} classNameActive={classNameItemActive}
click={priceItemClick} click={priceItemClick}

59
src/components/pages/ABDesign/v1/pages/EmailEnterPage/index.tsx
View File

@ -4,10 +4,8 @@ import { useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store"; import { actions, selectors } from "@/store";
import { useApi } from "@/api";
import routes from "@/routes"; import routes from "@/routes";
import NameInput from "./NameInput"; import NameInput from "./NameInput";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import Title from "@/components/Title"; import Title from "@/components/Title";
import EmailInput from "./EmailInput"; import EmailInput from "./EmailInput";
import Policy from "@/components/Policy"; import Policy from "@/components/Policy";
@ -18,6 +16,8 @@ import { useDynamicSize } from "@/hooks/useDynamicSize";
import QuestionnaireGreenButton from "../../ui/GreenButton"; import QuestionnaireGreenButton from "../../ui/GreenButton";
import { ESourceAuthorization } from "@/api/resources/User"; import { ESourceAuthorization } from "@/api/resources/User";
import { useAuthentication } from "@/hooks/authentication/use-authentication"; import { useAuthentication } from "@/hooks/authentication/use-authentication";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
interface IEmailEnterPage { interface IEmailEnterPage {
redirectUrl?: string; redirectUrl?: string;
@ -28,8 +28,7 @@ function EmailEnterPage({
redirectUrl = routes.client.emailConfirmV1(), redirectUrl = routes.client.emailConfirmV1(),
isRequiredName = false, isRequiredName = false,
}: IEmailEnterPage): JSX.Element { }: IEmailEnterPage): JSX.Element {
const api = useApi(); const { t } = useTranslation();
const { t, i18n } = useTranslation();
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate(); const navigate = useNavigate();
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
@ -38,53 +37,33 @@ function EmailEnterPage({
const [isValidEmail, setIsValidEmail] = useState(false); const [isValidEmail, setIsValidEmail] = useState(false);
const [isValidName, setIsValidName] = useState(!isRequiredName); const [isValidName, setIsValidName] = useState(!isRequiredName);
const [isAuth, setIsAuth] = useState(false); const [isAuth, setIsAuth] = useState(false);
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
const [activeSubPlan, setActiveSubPlan] = useState<ISubscriptionPlan | null>(
activeSubPlanFromStore
);
const locale = i18n.language;
const { subPlan } = useParams(); const { subPlan } = useParams();
const { width: pageWidth, elementRef: pageRef } = useDynamicSize({}); const { width: pageWidth, elementRef: pageRef } = useDynamicSize({});
const { error, isLoading, authorization } = useAuthentication(); const { error, isLoading, authorization } = useAuthentication();
const { gender } = useSelector(selectors.selectQuestionnaire); const { gender } = useSelector(selectors.selectQuestionnaire);
const activeProductFromStore = useSelector(selectors.selectActiveProduct);
const { products } = usePaywall({
placementKey: EPlacementKeys["aura.placement.redesign.main"],
});
const [activeProduct, setActiveProduct] = useState<IPaywallProduct | null>(
activeProductFromStore
);
useEffect(() => { useEffect(() => {
if (subPlan) { if (subPlan) {
const targetSubPlan = subPlans.find( const targetProduct = products.find(
(sub_plan) => (product) =>
String( String(
sub_plan?.trial?.price_cents product?.trialPrice
? Math.floor((sub_plan?.trial?.price_cents + 1) / 100) ? Math.floor((product?.trialPrice + 1) / 100)
: sub_plan.id.replace(".", "") : product.key.replace(".", "")
) === subPlan ) === subPlan
); );
if (targetSubPlan) { if (targetProduct) {
setActiveSubPlan(targetSubPlan); setActiveProduct(targetProduct);
} }
} }
}, [subPlan, subPlans]); }, [subPlan, products]);
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 handleValidEmail = (email: string) => { const handleValidEmail = (email: string) => {
dispatch(actions.form.addEmail(email)); dispatch(actions.form.addEmail(email));
@ -127,7 +106,7 @@ function EmailEnterPage({
await authorization(email, source); await authorization(email, source);
dispatch( dispatch(
actions.payment.update({ actions.payment.update({
activeSubPlan, activeProduct,
}) })
); );
setIsAuth(true); setIsAuth(true);

191
src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx
View File

@ -1,8 +1,5 @@
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { useEffect, useMemo, useState } from "react"; 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 { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store"; import { actions, selectors } from "@/store";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
@ -13,66 +10,32 @@ import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
import { useDynamicSize } from "@/hooks/useDynamicSize"; import { useDynamicSize } from "@/hooks/useDynamicSize";
import PriceList from "../../components/PriceList"; import PriceList from "../../components/PriceList";
import QuestionnaireGreenButton from "../../ui/GreenButton"; import QuestionnaireGreenButton from "../../ui/GreenButton";
import { usePaywall } from "@/hooks/paywall/usePaywall";
interface IPlanKey { import { EPlacementKeys } from "@/api/resources/Paywall";
[key: string]: number; import { getRandomArbitrary } from "@/services/random-value";
} import Loader from "@/components/Loader";
function TrialChoicePage() { function TrialChoicePage() {
const { i18n } = useTranslation();
const locale = i18n.language;
const api = useApi();
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate(); const navigate = useNavigate();
const selectedPrice = useSelector(selectors.selectSelectedPrice); const selectedPrice = useSelector(selectors.selectSelectedPrice);
const homeConfig = useSelector(selectors.selectHome); const homeConfig = useSelector(selectors.selectHome);
const email = useSelector(selectors.selectEmail); const email = useSelector(selectors.selectEmail);
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
const [isDisabled, setIsDisabled] = useState(true); const [isDisabled, setIsDisabled] = useState(true);
const allowedPlans = useMemo(() => [""], []); const [countUsers, setCountUsers] = useState(752);
const { width: pageWidth, elementRef: pageRef } = useDynamicSize({}); const { width: pageWidth, elementRef: pageRef } = useDynamicSize({});
const { gender } = useSelector(selectors.selectQuestionnaire); const { gender } = useSelector(selectors.selectQuestionnaire);
const { products, isLoading, getText } = usePaywall({
placementKey: EPlacementKeys["aura.placement.redesign.main"],
});
useEffect(() => { useEffect(() => {
(async () => { const randomDelay = getRandomArbitrary(3000, 5000);
const { sub_plans } = await api.getSubscriptionPlans({ locale }); const countUsersTimeOut = setTimeout(() => {
const plansWithoutTest = sub_plans.filter( setCountUsers((prevState) => prevState + 1);
(plan: ISubscriptionPlan) => !plan.name.includes("(test)") }, randomDelay);
); return () => clearTimeout(countUsersTimeOut);
const plansKeys: IPlanKey = {}; }, [countUsers]);
const plans: ISubscriptionPlan[] = [];
for (const plan of plansWithoutTest) {
plansKeys[plan.name] = plansKeys[plan.name]
? plansKeys[plan.name] + 1
: 1;
if (
(plansKeys[plan.name] > 1 && !plan.trial?.is_free && !!plan.trial) ||
allowedPlans.includes(plan.id)
) {
const targetPlan = plansWithoutTest.find(
(item) => item.name === plan.name && item.id.includes("stripe")
);
plans.push(targetPlan as ISubscriptionPlan);
}
}
plans.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);
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [api, locale]);
const handlePriceItem = () => { const handlePriceItem = () => {
setIsDisabled(false); setIsDisabled(false);
@ -101,60 +64,76 @@ function TrialChoicePage() {
height={180} height={180}
/> />
<Header className={styles.header} /> <Header className={styles.header} />
<p className={styles.text} style={{ marginTop: "60px" }}> {!isLoading && (
We've helped{" "} <>
<span className={styles.blue}> <p className={styles.text} style={{ marginTop: "60px" }}>
<b>millions</b> {getText("text.0", {
</span>{" "} replacementSelector: "b",
of people to have happier lives and better relationships, and we want to color: "#1C38EA",
help you too. })}
</p> </p>
<p className={`${styles.text} ${styles.bold}`}> <p className={`${styles.text} ${styles.bold}`}>
Money shouldn’t stand in the way of finding astrology guidance that {getText("text.1", {
finally works. So, choose an amount that you think is reasonable to try color: "#1C38EA",
us out for one week. })}
</p> </p>
<p className={`${styles.text} ${styles.bold} ${styles.blue}`}> <p className={`${styles.text} ${styles.bold} ${styles.blue}`}>
It costs us $13.67 to offer a 3-day trial, but please choose the amount {getText("text.2", {
you are comfortable with. color: "#1C38EA",
</p> })}
<div className={styles["price-container"]}> </p>
<PriceList <div className={styles["price-container"]}>
subPlans={subPlans} <PriceList
activeItem={selectedPrice} products={products}
classNameItem={styles["price-item"]} activeItem={selectedPrice}
classNameItemActive={`${styles["price-item-active"]} ${styles[gender]}`} classNameItem={styles["price-item"]}
click={handlePriceItem} classNameItemActive={`${styles["price-item-active"]} ${styles[gender]}`}
/> click={handlePriceItem}
<p className={styles["auxiliary-text"]} style={{ maxWidth: "75%" }}> />
This option will help us support those who need to select the lowest <p className={styles["auxiliary-text"]} style={{ maxWidth: "75%" }}>
trial prices! {getText("text.3", {
</p> color: "#1C38EA",
<img })}
className={styles["arrow-image"]} </p>
src="/arrow.svg" <img
alt={`Arrow to $${subPlans.at(-1)}`} className={styles["arrow-image"]}
/> src="/arrow.svg"
</div> alt={`Arrow to $${products.at(-1)?.trialPrice}`}
<div className={styles["emails-list-container"]}> />
<EmailsList </div>
classNameContainer={`${styles["emails-container"]} ${styles[gender]}`} <div className={styles["emails-list-container"]}>
classNameTitle={styles["emails-title"]} <EmailsList
classNameEmailItem={styles["email-item"]} title={getText("text.5", {
direction="right-left" replacementSelector: "strong",
/> replacement: {
</div> target: "${quantity}",
<p className={styles.email}>{email}</p> replacement: countUsers.toString(),
<QuestionnaireGreenButton },
className={styles.button} })}
disabled={isDisabled} classNameContainer={`${styles["emails-container"]} ${styles[gender]}`}
onClick={handleNext} classNameTitle={styles["emails-title"]}
> classNameEmailItem={styles["email-item"]}
See my plan direction="right-left"
</QuestionnaireGreenButton> />
<p className={styles["auxiliary-text"]}> </div>
*Cost of trial as of February 2024 <p className={styles.email}>{email}</p>
</p> <QuestionnaireGreenButton
className={styles.button}
disabled={isDisabled}
onClick={handleNext}
>
{getText("text.button.1", {
color: "#1C38EA",
})}
</QuestionnaireGreenButton>
<p className={styles["auxiliary-text"]}>
{getText("text.4", {
color: "#1C38EA",
})}
</p>
</>
)}
{isLoading && <Loader className={styles.loader} />}
</section> </section>
); );
} }

7
src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.css
View File

@ -138,3 +138,10 @@
.email { .email {
font-weight: 500; font-weight: 500;
} }
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

113
src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx
View File

@ -9,48 +9,56 @@ import CheckoutForm from "@/components/PaymentPage/methods/Stripe/CheckoutForm";
import { Stripe, loadStripe } from "@stripe/stripe-js"; import { Stripe, loadStripe } from "@stripe/stripe-js";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { selectors } from "@/store"; import { selectors } from "@/store";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import { useApi } from "@/api";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import routes from "@/routes"; import routes from "@/routes";
import { useTranslation } from "react-i18next";
import { useAuth } from "@/auth";
import Loader from "@/components/Loader"; import Loader from "@/components/Loader";
import { getPriceFromTrial } from "@/services/price";
import SecurityPayments from "../SecurityPayments"; import SecurityPayments from "../SecurityPayments";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { useMakePayment } from "@/hooks/payment/useMakePayment";
interface IPaymentModalProps { interface IPaymentModalProps {
activeSubscriptionPlan?: ISubscriptionPlan; activeProduct?: IPaywallProduct;
noTrial?: boolean; noTrial?: boolean;
returnUrl?: string; returnUrl?: string;
placementKey?: EPlacementKeys;
} }
const getPrice = (product: IPaywallProduct) => {
return (product.trialPrice || 0) / 100;
};
function PaymentModal({ function PaymentModal({
activeSubscriptionPlan, activeProduct,
noTrial, noTrial,
returnUrl, returnUrl,
placementKey = EPlacementKeys["aura.placement.redesign.main"],
}: IPaymentModalProps) { }: IPaymentModalProps) {
const { i18n } = useTranslation();
const locale = i18n.language;
const api = useApi();
const { token } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
const activeSubPlan = activeSubscriptionPlan
? activeSubscriptionPlan
: activeSubPlanFromStore;
const [stripePromise, setStripePromise] = const [stripePromise, setStripePromise] =
useState<Promise<Stripe | null> | null>(null); useState<Promise<Stripe | null> | null>(null);
const [clientSecret, setClientSecret] = useState<string>("");
const [subscriptionReceiptId, setSubscriptionReceiptId] = const activeProductFromStore = useSelector(selectors.selectActiveProduct);
useState<string>(""); const _activeProduct = activeProduct ? activeProduct : activeProductFromStore;
const [isLoading, setIsLoading] = useState(true); const {
const [isError, setIsError] = useState<boolean>(false); paymentIntentId,
clientSecret,
returnUrl: checkoutUrl,
paymentType,
publicKey,
isLoading,
error,
} = useMakePayment({
productId: _activeProduct?._id || "",
returnPaidUrl:
returnUrl
});
if (checkoutUrl?.length) {
window.location.href = checkoutUrl;
}
const paymentMethodsButtons = useMemo(() => { const paymentMethodsButtons = useMemo(() => {
// return paymentMethods.filter(
// (method) => method.id !== EPaymentMethod.PAYMENT_BUTTONS
// );
return paymentMethods; return paymentMethods;
}, []); }, []);
@ -58,49 +66,24 @@ function PaymentModal({
EPaymentMethod.PAYMENT_BUTTONS EPaymentMethod.PAYMENT_BUTTONS
); );
const { products } = usePaywall({ placementKey });
const onSelectPaymentMethod = (method: EPaymentMethod) => { const onSelectPaymentMethod = (method: EPaymentMethod) => {
setSelectedPaymentMethod(method); setSelectedPaymentMethod(method);
}; };
useEffect(() => { useEffect(() => {
(async () => { (async () => {
const siteConfig = await api.getAppConfig({ bundleId: "auraweb" }); if (!products?.length || !publicKey) return;
setStripePromise(loadStripe(siteConfig.data.stripe_public_key)); setStripePromise(loadStripe(publicKey));
const { sub_plans } = await api.getSubscriptionPlans({ locale }); const isActiveProduct = products.find(
const isActiveSubPlan = sub_plans.find( (product) => product._id === _activeProduct?._id
(subPlan) => subPlan.id === activeSubPlan?.id
); );
if (!activeSubPlan || !isActiveSubPlan) { if (!_activeProduct || !isActiveProduct) {
navigate(routes.client.priceList()); navigate(routes.client.trialChoiceV1());
} }
})(); })();
}, [activeSubPlan, api, locale, navigate]); }, [_activeProduct, navigate, products, publicKey]);
useEffect(() => {
(async () => {
try {
const { subscription_receipt } = await api.createSubscriptionReceipt({
token,
way: "stripe",
subscription_receipt: {
sub_plan_id: activeSubPlan?.id || "stripe.7",
},
});
const { id } = subscription_receipt;
const { client_secret } = subscription_receipt.data;
const { checkout_url } = subscription_receipt.data;
if (checkout_url?.length) {
window.location.href = checkout_url;
}
setSubscriptionReceiptId(id);
setClientSecret(client_secret);
setIsLoading(false);
} catch (error) {
console.error(error);
setIsError(true);
}
})();
}, [activeSubPlan?.id, api, token]);
if (isLoading) { if (isLoading) {
return ( return (
@ -112,7 +95,7 @@ function PaymentModal({
); );
} }
if (isError) { if (error?.length) {
return ( return (
<div className={styles["payment-modal"]}> <div className={styles["payment-modal"]}>
<Title variant="h3" className={styles.title}> <Title variant="h3" className={styles.title}>
@ -132,16 +115,13 @@ function PaymentModal({
selectedPaymentMethod={selectedPaymentMethod} selectedPaymentMethod={selectedPaymentMethod}
onSelectPaymentMethod={onSelectPaymentMethod} onSelectPaymentMethod={onSelectPaymentMethod}
/> />
{activeSubPlan && ( {_activeProduct && (
<div> <div>
{!noTrial && ( {!noTrial && (
<> <>
<p className={styles["sub-plan-description"]}> <p className={styles["sub-plan-description"]}>
You will be charged only{" "} You will be charged only{" "}
<b> <b>${getPrice(_activeProduct)} for your 3-day trial.</b>
${getPriceFromTrial(activeSubPlan?.trial)} for your 3-day
trial.
</b>
</p> </p>
<p className={styles["sub-plan-description"]}> <p className={styles["sub-plan-description"]}>
We`ll <b>email you a reminder</b> before your trial period ends. We`ll <b>email you a reminder</b> before your trial period ends.
@ -160,9 +140,9 @@ function PaymentModal({
{selectedPaymentMethod === EPaymentMethod.PAYMENT_BUTTONS && ( {selectedPaymentMethod === EPaymentMethod.PAYMENT_BUTTONS && (
<div className={styles["payment-method"]}> <div className={styles["payment-method"]}>
<ApplePayButton <ApplePayButton
activeSubPlan={activeSubPlan} activeProduct={_activeProduct}
client_secret={clientSecret} client_secret={clientSecret}
subscriptionReceiptId={subscriptionReceiptId} subscriptionReceiptId={paymentIntentId}
returnUrl={window.location.href} returnUrl={window.location.href}
/> />
</div> </div>
@ -170,7 +150,8 @@ function PaymentModal({
{selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && ( {selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && (
<CheckoutForm <CheckoutForm
subscriptionReceiptId={subscriptionReceiptId} confirmType={paymentType}
subscriptionReceiptId={paymentIntentId}
returnUrl={returnUrl} returnUrl={returnUrl}
/> />
)} )}

25
src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentTable/index.tsx
View File

@ -1,19 +1,22 @@
import Title from "@/components/Title"; import Title from "@/components/Title";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { getPriceFromTrial } from "@/services/price";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import CustomButton from "../CustomButton"; import CustomButton from "../CustomButton";
import GuardPayments from "../GuardPayments"; import GuardPayments from "../GuardPayments";
import { useState } from "react"; import { useState } from "react";
import FullScreenModal from "@/components/FullScreenModal"; import FullScreenModal from "@/components/FullScreenModal";
import { IPaywallProduct } from "@/api/resources/Paywall";
interface IPaymentTableProps { interface IPaymentTableProps {
subPlan: ISubscriptionPlan; product: IPaywallProduct;
gender: string; gender: string;
buttonClick: () => void; buttonClick: () => void;
} }
function PaymentTable({ gender, subPlan, buttonClick }: IPaymentTableProps) { const getPrice = (product: IPaywallProduct) => {
return (product.trialPrice || 0) / 100;
};
function PaymentTable({ gender, product, buttonClick }: IPaymentTableProps) {
const [isOpenPrivacyModal, setIsOpenPrivacyModal] = useState<boolean>(false); const [isOpenPrivacyModal, setIsOpenPrivacyModal] = useState<boolean>(false);
const handleSubscriptionPolicyClick = (event: React.MouseEvent) => { const handleSubscriptionPolicyClick = (event: React.MouseEvent) => {
event.preventDefault(); event.preventDefault();
@ -50,20 +53,18 @@ function PaymentTable({ gender, subPlan, buttonClick }: IPaymentTableProps) {
<div className={styles["table-container"]}> <div className={styles["table-container"]}>
<Title variant="h3" className={styles.title}> <Title variant="h3" className={styles.title}>
Personalized reading for{" "} Personalized reading for{" "}
<span className={styles.purple}> <span className={styles.purple}>${getPrice(product)}</span>
${getPriceFromTrial(subPlan?.trial)}
</span>
</Title> </Title>
<div className={styles["table-element"]}> <div className={styles["table-element"]}>
<p className={styles["total-today"]}>Total today:</p> <p className={styles["total-today"]}>Total today:</p>
<span>${getPriceFromTrial(subPlan?.trial)}</span> <span>${getPrice(product)}</span>
</div> </div>
<hr /> <hr />
<div className={styles["table-element"]}> <div className={styles["table-element"]}>
<p>Your cost per 2 weeks after trial</p> <p>Your cost per 2 weeks after trial</p>
<div> <div>
<span className={styles.discount}>$65</span> <span className={styles.discount}>$65</span>
<span>${subPlan.price_cents / 100}</span> <span>${product.trialPrice / 100}</span>
</div> </div>
</div> </div>
</div> </div>
@ -75,9 +76,9 @@ function PaymentTable({ gender, subPlan, buttonClick }: IPaymentTableProps) {
<p className={styles.policy}> <p className={styles.policy}>
You are enrolling in 2 weeks subscription. By continuing you agree that You are enrolling in 2 weeks subscription. By continuing you agree that
if you don't cancel prior to the end of the 3-day trial for the $ if you don't cancel prior to the end of the 3-day trial for the $
{getPriceFromTrial(subPlan?.trial)} you will automatically be charged {getPrice(product)} you will automatically be charged $19 every 2 weeks
$19 every 2 weeks until you cancel in settings. Learn more about until you cancel in settings. Learn more about cancellation and refund
cancellation and refund policy in{" "} policy in{" "}
<a onClick={handleSubscriptionPolicyClick}>Subscription policy</a> <a onClick={handleSubscriptionPolicyClick}>Subscription policy</a>
</p> </p>
</> </>

64
src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx
View File

@ -12,11 +12,7 @@ import YourReading from "./components/YourReading";
import Reviews from "./components/Reviews"; import Reviews from "./components/Reviews";
import PointsList from "./components/PointsList"; import PointsList from "./components/PointsList";
import OftenAsk from "./components/OftenAsk"; import OftenAsk from "./components/OftenAsk";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useApi } from "@/api";
import { getClientLocale } from "@/locales";
import { Locale } from "@/components/PaymentTable";
import WithPartnerInformation from "./components/WithPartnerInformation"; import WithPartnerInformation from "./components/WithPartnerInformation";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import PaymentModal from "./components/PaymentModal"; import PaymentModal from "./components/PaymentModal";
@ -26,12 +22,11 @@ import TrialPaymentHeader from "./components/Header";
import Header from "../../components/Header"; import Header from "../../components/Header";
import BackgroundTopBlob from "../../ui/BackgroundTopBlob"; import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
import { useDynamicSize } from "@/hooks/useDynamicSize"; import { useDynamicSize } from "@/hooks/useDynamicSize";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
const locale = getClientLocale() as Locale; import { usePaywall } from "@/hooks/paywall/usePaywall";
function TrialPaymentPage() { function TrialPaymentPage() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const api = useApi();
const navigate = useNavigate(); const navigate = useNavigate();
const birthdate = useSelector(selectors.selectBirthdate); const birthdate = useSelector(selectors.selectBirthdate);
const zodiacSign = getZodiacSignByDate(birthdate); const zodiacSign = getZodiacSignByDate(birthdate);
@ -46,10 +41,12 @@ function TrialPaymentPage() {
flowChoice, flowChoice,
} = useSelector(selectors.selectQuestionnaire); } = useSelector(selectors.selectQuestionnaire);
const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate); const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]); const { products } = usePaywall({
const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan); placementKey: EPlacementKeys["aura.placement.redesign.main"],
const [activeSubPlan, setActiveSubPlan] = useState<ISubscriptionPlan | null>( });
activeSubPlanFromStore const activeProductFromStore = useSelector(selectors.selectActiveProduct);
const [activeProduct, setActiveProduct] = useState<IPaywallProduct | null>(
activeProductFromStore
); );
const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false); const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
const [singleOrWithPartner, setSingleOrWithPartner] = useState< const [singleOrWithPartner, setSingleOrWithPartner] = useState<
@ -57,43 +54,22 @@ function TrialPaymentPage() {
>("single"); >("single");
const { subPlan } = useParams(); const { subPlan } = useParams();
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]);
useEffect(() => { useEffect(() => {
if (subPlan) { if (subPlan) {
const targetSubPlan = subPlans.find( const targetProduct = products.find(
(sub_plan) => (product) =>
String( String(
sub_plan?.trial?.price_cents product?.trialPrice
? Math.floor((sub_plan?.trial?.price_cents + 1) / 100) ? Math.floor((product?.trialPrice + 1) / 100)
: sub_plan.id.replace(".", "") : product.key.replace(".", "")
) === subPlan ) === subPlan
); );
if (targetSubPlan) { if (targetProduct) {
setActiveSubPlan(targetSubPlan); setActiveProduct(targetProduct);
dispatch(actions.payment.update({ activeSubPlan: targetSubPlan })); dispatch(actions.payment.update({ activeProduct }));
} }
} }
}, [dispatch, subPlan, subPlans]); }, [dispatch, subPlan, products, activeProduct]);
useEffect(() => { useEffect(() => {
if (["relationship", "married"].includes(flowChoice)) { if (["relationship", "married"].includes(flowChoice)) {
@ -103,7 +79,7 @@ function TrialPaymentPage() {
setSingleOrWithPartner("single"); setSingleOrWithPartner("single");
}, [flowChoice]); }, [flowChoice]);
if (!activeSubPlan) { if (!activeProduct) {
return <Navigate to={routes.client.trialChoice()} />; return <Navigate to={routes.client.trialChoice()} />;
} }
@ -168,7 +144,7 @@ function TrialPaymentPage() {
<Goal goal={goal} /> <Goal goal={goal} />
<PaymentTable <PaymentTable
gender={gender} gender={gender}
subPlan={activeSubPlan} product={activeProduct}
buttonClick={openStripeModal} buttonClick={openStripeModal}
/> />
<YourReading <YourReading
@ -185,7 +161,7 @@ function TrialPaymentPage() {
<OftenAsk /> <OftenAsk />
<PaymentTable <PaymentTable
gender={gender} gender={gender}
subPlan={activeSubPlan} product={activeProduct}
buttonClick={openStripeModal} buttonClick={openStripeModal}
/> />
</section> </section>

19
src/components/pages/ABDesign/v1/pages/TrialPaymentWithDiscount/PaymentDiscountTable/index.tsx
View File

@ -2,10 +2,17 @@ import Title from "@/components/Title";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { selectors } from "@/store"; import { selectors } from "@/store";
import { getPriceFromTrial } from "@/services/price"; import { IPaywallProduct } from "@/api/resources/Paywall";
const getPrice = (product: IPaywallProduct | null) => {
if (!product) {
return 0;
}
return (product.trialPrice === 100 ? 99 : product.trialPrice || 0) / 100;
};
function PaymentDiscountTable() { function PaymentDiscountTable() {
const activeSub = useSelector(selectors.selectActiveSubPlan); const activeProduct = useSelector(selectors.selectActiveProduct);
return ( return (
<div className={styles.container}> <div className={styles.container}>
@ -15,7 +22,11 @@ function PaymentDiscountTable() {
<p className={styles["no-pressure"]}>No pressure. Cancel anytime.</p> <p className={styles["no-pressure"]}>No pressure. Cancel anytime.</p>
<div className={styles.applied}> <div className={styles.applied}>
<div className={styles.side}> <div className={styles.side}>
<img className={styles["present-image"]} src="/present.png" alt="Present" /> <img
className={styles["present-image"]}
src="/present.png"
alt="Present"
/>
<p className={styles.description}>Secret discount applied!</p> <p className={styles.description}>Secret discount applied!</p>
</div> </div>
<div className={styles.side}> <div className={styles.side}>
@ -34,7 +45,7 @@ function PaymentDiscountTable() {
<hr className={styles.line} /> <hr className={styles.line} />
<div className={styles["total-container"]}> <div className={styles["total-container"]}>
<p>Total today:</p> <p>Total today:</p>
{activeSub && <strong>${getPriceFromTrial(activeSub.trial)}</strong>} {activeProduct && <strong>${getPrice(activeProduct)}</strong>}
</div> </div>
</div> </div>
); );

22
src/components/pages/EmailLetters/MarketingTrialPayment/index.tsx
View File

@ -5,29 +5,31 @@ import MainButton from "@/components/MainButton";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import PaymentModal from "../../TrialPayment/components/PaymentModal"; import PaymentModal from "../../TrialPayment/components/PaymentModal";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import { useApi } from "@/api"; import { useApi } from "@/api";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
function MarketingTrialPayment() { function MarketingTrialPayment() {
const { i18n } = useTranslation(); const { i18n } = useTranslation();
const locale = i18n.language; const locale = i18n.language;
const api = useApi(); const api = useApi();
const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false); const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
const [freeTrialPlan, setFreeTrialPlan] = useState< const [freeTrialProduct, setFreeTrialProduct] = useState<
ISubscriptionPlan | undefined IPaywallProduct | undefined
>(); >();
const { products } = usePaywall({
placementKey: EPlacementKeys["aura.placement.main"],
});
// get free trial plan // get free trial plan
useEffect(() => { useEffect(() => {
(async () => { (async () => {
const { sub_plans } = await api.getSubscriptionPlans({ locale }); const _freeProduct = products.find((product) => product.isFreeTrial);
const _freeTrialPlan = sub_plans.find( setFreeTrialProduct(_freeProduct);
(subPlan) => subPlan.trial?.is_free
);
setFreeTrialPlan(_freeTrialPlan);
})(); })();
}, [api, locale]); }, [api, locale, products]);
const openStripeModal = () => { const openStripeModal = () => {
setIsOpenPaymentModal(true); setIsOpenPaymentModal(true);
@ -44,7 +46,7 @@ function MarketingTrialPayment() {
open={isOpenPaymentModal} open={isOpenPaymentModal}
onClose={handleCloseModal} onClose={handleCloseModal}
> >
<PaymentModal activeSubscriptionPlan={freeTrialPlan} /> <PaymentModal activeProduct={freeTrialProduct} />
</Modal> </Modal>
<section className={`${styles.page} page`}> <section className={`${styles.page} page`}>
<div className={styles.wrapper}> <div className={styles.wrapper}>

10
src/components/pages/PaymentWithEmailPage/PaymentForm/index.tsx
View File

@ -9,9 +9,15 @@ interface IPaymentFormProps {
stripePublicKey: string; stripePublicKey: string;
clientSecret: string; clientSecret: string;
returnUrl: string; returnUrl: string;
confirmType?: "payment" | "setup";
} }
function PaymentForm({ stripePublicKey, clientSecret, returnUrl }: IPaymentFormProps) { function PaymentForm({
stripePublicKey,
clientSecret,
returnUrl,
confirmType = "payment",
}: IPaymentFormProps) {
const [stripePromise, setStripePromise] = const [stripePromise, setStripePromise] =
useState<Promise<Stripe | null> | null>(null); useState<Promise<Stripe | null> | null>(null);
@ -23,7 +29,7 @@ function PaymentForm({ stripePublicKey, clientSecret, returnUrl }: IPaymentFormP
<div className={styles["payment-method-container"]}> <div className={styles["payment-method-container"]}>
{stripePromise && clientSecret && ( {stripePromise && clientSecret && (
<Elements stripe={stripePromise} options={{ clientSecret }}> <Elements stripe={stripePromise} options={{ clientSecret }}>
<CheckoutForm returnUrl={returnUrl} /> <CheckoutForm confirmType={confirmType} returnUrl={returnUrl} />
</Elements> </Elements>
)} )}
</div> </div>

106
src/components/pages/TrialChoice/index.tsx
View File

@ -1,73 +1,36 @@
import PriceList from "@/components/PriceList"; import PriceList from "@/components/PriceList";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { useEffect, useMemo, useState } from "react"; 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 { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store"; import { actions, selectors } from "@/store";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import routes from "@/routes"; import routes from "@/routes";
import EmailsList from "@/components/EmailsList"; import EmailsList from "@/components/EmailsList";
import MainButton from "@/components/MainButton"; import MainButton from "@/components/MainButton";
import { usePaywall } from "@/hooks/paywall/usePaywall";
interface IPlanKey { import { EPlacementKeys } from "@/api/resources/Paywall";
[key: string]: number; import { getRandomArbitrary } from "@/services/random-value";
}
function TrialChoicePage() { function TrialChoicePage() {
const { i18n } = useTranslation();
const locale = i18n.language;
const api = useApi();
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate(); const navigate = useNavigate();
const selectedPrice = useSelector(selectors.selectSelectedPrice); const selectedPrice = useSelector(selectors.selectSelectedPrice);
const homeConfig = useSelector(selectors.selectHome); const homeConfig = useSelector(selectors.selectHome);
const email = useSelector(selectors.selectEmail); const email = useSelector(selectors.selectEmail);
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
const [isDisabled, setIsDisabled] = useState(true); const [isDisabled, setIsDisabled] = useState(true);
const allowedPlans = useMemo(() => [""], []); const [countUsers, setCountUsers] = useState(752);
useEffect(() => { useEffect(() => {
(async () => { const randomDelay = getRandomArbitrary(3000, 5000);
const { sub_plans } = await api.getSubscriptionPlans({ locale }); const countUsersTimeOut = setTimeout(() => {
const plansWithoutTest = sub_plans.filter( setCountUsers((prevState) => prevState + 1);
(plan: ISubscriptionPlan) => !plan.name.includes("(test)") }, randomDelay);
); return () => clearTimeout(countUsersTimeOut);
const plansKeys: IPlanKey = {}; }, [countUsers]);
const plans: ISubscriptionPlan[] = [];
for (const plan of plansWithoutTest) {
plansKeys[plan.name] = plansKeys[plan.name]
? plansKeys[plan.name] + 1
: 1;
if (
(plansKeys[plan.name] > 1 && !plan.trial?.is_free && !!plan.trial) ||
allowedPlans.includes(plan.id)
) {
const targetPlan = plansWithoutTest.find(
(item) => item.name === plan.name && item.id.includes("stripe")
);
plans.push(targetPlan as ISubscriptionPlan);
}
}
plans.sort((a, b) => { const { products, getText } = usePaywall({
if (!a.trial || !b.trial) { placementKey: EPlacementKeys["aura.placement.main"],
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);
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [api, locale]);
const handlePriceItem = () => { const handlePriceItem = () => {
setIsDisabled(false); setIsDisabled(false);
@ -85,38 +48,49 @@ function TrialChoicePage() {
return ( return (
<section className={`${styles.page} page`}> <section className={`${styles.page} page`}>
<p className={styles.text}> <p className={styles.text}>
We've helped millions of people to have happier lives and better {getText("text.0", {
relationships, and we want to help you too. replacementSelector: "b",
color: "#1C38EA",
})}
</p> </p>
<p className={`${styles.text} ${styles.bold}`}> <p className={`${styles.text} ${styles.bold}`}>
Money shouldn’t stand in the way of finding astrology guidance that {getText("text.1", {
finally works. So, choose an amount that you think is reasonable to try color: "#1C38EA",
us out for one week. })}
</p> </p>
<p className={`${styles.text} ${styles.bold} ${styles.purple}`}> <p className={`${styles.text} ${styles.bold} ${styles.purple}`}>
It costs us $13.67 to offer a 3-day trial, but please choose the amount {getText("text.2", {
you are comfortable with. color: "#1C38EA",
})}
</p> </p>
<div className={styles["price-container"]}> <div className={styles["price-container"]}>
<PriceList <PriceList
subPlans={subPlans} products={products}
activeItem={selectedPrice} activeItem={selectedPrice}
classNameItem={styles["price-item"]} classNameItem={styles["price-item"]}
classNameItemActive={styles["price-item-active"]} classNameItemActive={styles["price-item-active"]}
click={handlePriceItem} click={handlePriceItem}
/> />
<p className={styles["auxiliary-text"]} style={{ maxWidth: "75%" }}> <p className={styles["auxiliary-text"]} style={{ maxWidth: "75%" }}>
This option will help us support those who need to select the lowest {getText("text.3", {
trial prices! color: "#1C38EA",
})}
</p> </p>
<img <img
className={styles["arrow-image"]} className={styles["arrow-image"]}
src="/arrow.svg" src="/arrow.svg"
alt={`Arrow to $${subPlans.at(-1)}`} alt={`Arrow to $${products.at(-1)?.name}`}
/> />
</div> </div>
<div className={styles["emails-list-container"]}> <div className={styles["emails-list-container"]}>
<EmailsList <EmailsList
title={getText("text.5", {
replacementSelector: "strong",
replacement: {
target: "${quantity}",
replacement: countUsers.toString(),
},
})}
classNameContainer={styles["emails-container"]} classNameContainer={styles["emails-container"]}
classNameTitle={styles["emails-title"]} classNameTitle={styles["emails-title"]}
classNameEmailItem={styles["email-item"]} classNameEmailItem={styles["email-item"]}
@ -129,10 +103,14 @@ function TrialChoicePage() {
disabled={isDisabled} disabled={isDisabled}
onClick={handleNext} onClick={handleNext}
> >
See my plan {getText("text.button.1", {
color: "#1C38EA",
})}
</MainButton> </MainButton>
<p className={styles["auxiliary-text"]}> <p className={styles["auxiliary-text"]}>
*Cost of trial as of February 2024 {getText("text.4", {
color: "#1C38EA",
})}
</p> </p>
</section> </section>
); );

112
src/components/pages/TrialPayment/components/PaymentModal/index.tsx
View File

@ -9,43 +9,58 @@ import CheckoutForm from "@/components/PaymentPage/methods/Stripe/CheckoutForm";
import { Stripe, loadStripe } from "@stripe/stripe-js"; import { Stripe, loadStripe } from "@stripe/stripe-js";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { selectors } from "@/store"; import { selectors } from "@/store";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import { useApi } from "@/api";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import routes from "@/routes"; import routes from "@/routes";
import { useTranslation } from "react-i18next";
import { useAuth } from "@/auth";
import Loader from "@/components/Loader"; import Loader from "@/components/Loader";
import { getPriceFromTrial } from "@/services/price";
import SecurityPayments from "../SecurityPayments"; import SecurityPayments from "../SecurityPayments";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { useMakePayment } from "@/hooks/payment/useMakePayment";
interface IPaymentModalProps { interface IPaymentModalProps {
activeSubscriptionPlan?: ISubscriptionPlan; activeProduct?: IPaywallProduct;
noTrial?: boolean; noTrial?: boolean;
returnUrl?: string; returnUrl?: string;
} }
const getPrice = (product: IPaywallProduct | null) => {
if (!product) {
return 0;
}
return (product.trialPrice === 100 ? 99 : product.trialPrice || 0) / 100;
};
function PaymentModal({ function PaymentModal({
activeSubscriptionPlan, activeProduct,
noTrial, noTrial,
returnUrl, returnUrl,
}: IPaymentModalProps) { }: IPaymentModalProps) {
const { i18n } = useTranslation();
const locale = i18n.language;
const api = useApi();
const { token } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
const activeSubPlan = activeSubscriptionPlan
? activeSubscriptionPlan
: activeSubPlanFromStore;
const [stripePromise, setStripePromise] = const [stripePromise, setStripePromise] =
useState<Promise<Stripe | null> | null>(null); useState<Promise<Stripe | null> | null>(null);
const [clientSecret, setClientSecret] = useState<string>("");
const [subscriptionReceiptId, setSubscriptionReceiptId] = const { products } = usePaywall({
useState<string>(""); placementKey: EPlacementKeys["aura.placement.main"],
const [isLoading, setIsLoading] = useState(true); });
const [isError, setIsError] = useState<boolean>(false); const activeProductFromStore = useSelector(selectors.selectActiveProduct);
const _activeProduct = activeProduct ? activeProduct : activeProductFromStore;
const {
paymentIntentId,
clientSecret,
returnUrl: checkoutUrl,
paymentType,
publicKey,
isLoading,
error,
} = useMakePayment({
productId: _activeProduct?._id || "",
returnPaidUrl: returnUrl,
});
if (checkoutUrl?.length) {
window.location.href = checkoutUrl;
}
const paymentMethodsButtons = useMemo(() => { const paymentMethodsButtons = useMemo(() => {
// return paymentMethods.filter( // return paymentMethods.filter(
@ -64,43 +79,16 @@ function PaymentModal({
useEffect(() => { useEffect(() => {
(async () => { (async () => {
const siteConfig = await api.getAppConfig({ bundleId: "auraweb" }); if (!products?.length || !publicKey) return;
setStripePromise(loadStripe(siteConfig.data.stripe_public_key)); setStripePromise(loadStripe(publicKey));
const { sub_plans } = await api.getSubscriptionPlans({ locale }); const isActiveProduct = products.find(
const isActiveSubPlan = sub_plans.find( (product) => product._id === _activeProduct?._id
(subPlan) => subPlan.id === activeSubPlan?.id
); );
if (!activeSubPlan || !isActiveSubPlan) { if (!_activeProduct || !isActiveProduct) {
navigate(routes.client.priceList()); navigate(routes.client.trialChoice());
} }
})(); })();
}, [activeSubPlan, api, locale, navigate]); }, [_activeProduct, navigate, products, publicKey]);
useEffect(() => {
(async () => {
try {
const { subscription_receipt } = await api.createSubscriptionReceipt({
token,
way: "stripe",
subscription_receipt: {
sub_plan_id: activeSubPlan?.id || "stripe.7",
},
});
const { id } = subscription_receipt;
const { client_secret } = subscription_receipt.data;
const { checkout_url } = subscription_receipt.data;
if (checkout_url?.length) {
window.location.href = checkout_url;
}
setSubscriptionReceiptId(id);
setClientSecret(client_secret);
setIsLoading(false);
} catch (error) {
console.error(error);
setIsError(true);
}
})();
}, [activeSubPlan?.id, api, token]);
if (isLoading) { if (isLoading) {
return ( return (
@ -112,7 +100,7 @@ function PaymentModal({
); );
} }
if (isError) { if (error?.length) {
return ( return (
<div className={styles["payment-modal"]}> <div className={styles["payment-modal"]}>
<Title variant="h3" className={styles.title}> <Title variant="h3" className={styles.title}>
@ -132,16 +120,13 @@ function PaymentModal({
selectedPaymentMethod={selectedPaymentMethod} selectedPaymentMethod={selectedPaymentMethod}
onSelectPaymentMethod={onSelectPaymentMethod} onSelectPaymentMethod={onSelectPaymentMethod}
/> />
{activeSubPlan && ( {_activeProduct && (
<div> <div>
{!noTrial && ( {!noTrial && (
<> <>
<p className={styles["sub-plan-description"]}> <p className={styles["sub-plan-description"]}>
You will be charged only{" "} You will be charged only{" "}
<b> <b>${getPrice(_activeProduct)} for your 3-day trial.</b>
${getPriceFromTrial(activeSubPlan?.trial)} for your 3-day
trial.
</b>
</p> </p>
<p className={styles["sub-plan-description"]}> <p className={styles["sub-plan-description"]}>
We`ll <b>email you a reminder</b> before your trial period ends. We`ll <b>email you a reminder</b> before your trial period ends.
@ -160,9 +145,9 @@ function PaymentModal({
{selectedPaymentMethod === EPaymentMethod.PAYMENT_BUTTONS && ( {selectedPaymentMethod === EPaymentMethod.PAYMENT_BUTTONS && (
<div className={styles["payment-method"]}> <div className={styles["payment-method"]}>
<ApplePayButton <ApplePayButton
activeSubPlan={activeSubPlan} activeProduct={_activeProduct}
client_secret={clientSecret} client_secret={clientSecret}
subscriptionReceiptId={subscriptionReceiptId} subscriptionReceiptId={paymentIntentId}
returnUrl={window.location.href} returnUrl={window.location.href}
/> />
</div> </div>
@ -170,7 +155,8 @@ function PaymentModal({
{selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && ( {selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && (
<CheckoutForm <CheckoutForm
subscriptionReceiptId={subscriptionReceiptId} confirmType={paymentType}
subscriptionReceiptId={paymentIntentId}
returnUrl={returnUrl} returnUrl={returnUrl}
/> />
)} )}

25
src/components/pages/TrialPayment/components/PaymentTable/index.tsx
View File

@ -1,18 +1,21 @@
import Title from "@/components/Title"; import Title from "@/components/Title";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { getPriceFromTrial } from "@/services/price";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import CustomButton from "../CustomButton"; import CustomButton from "../CustomButton";
import GuardPayments from "../GuardPayments"; import GuardPayments from "../GuardPayments";
import { useState } from "react"; import { useState } from "react";
import FullScreenModal from "@/components/FullScreenModal"; import FullScreenModal from "@/components/FullScreenModal";
import { IPaywallProduct } from "@/api/resources/Paywall";
interface IPaymentTableProps { interface IPaymentTableProps {
subPlan: ISubscriptionPlan; product: IPaywallProduct;
buttonClick: () => void; buttonClick: () => void;
} }
function PaymentTable({ subPlan, buttonClick }: IPaymentTableProps) { const getPrice = (product: IPaywallProduct) => {
return (product.trialPrice || 0) / 100;
};
function PaymentTable({ product, buttonClick }: IPaymentTableProps) {
const [isOpenPrivacyModal, setIsOpenPrivacyModal] = useState<boolean>(false); const [isOpenPrivacyModal, setIsOpenPrivacyModal] = useState<boolean>(false);
const handleSubscriptionPolicyClick = (event: React.MouseEvent) => { const handleSubscriptionPolicyClick = (event: React.MouseEvent) => {
event.preventDefault(); event.preventDefault();
@ -44,20 +47,18 @@ function PaymentTable({ subPlan, buttonClick }: IPaymentTableProps) {
<div className={styles["table-container"]}> <div className={styles["table-container"]}>
<Title variant="h3" className={styles.title}> <Title variant="h3" className={styles.title}>
Personalized reading for{" "} Personalized reading for{" "}
<span className={styles.purple}> <span className={styles.purple}>${getPrice(product)}</span>
${getPriceFromTrial(subPlan?.trial)}
</span>
</Title> </Title>
<div className={styles["table-element"]}> <div className={styles["table-element"]}>
<p>Total today:</p> <p>Total today:</p>
<span>${getPriceFromTrial(subPlan?.trial)}</span> <span>${getPrice(product)}</span>
</div> </div>
<hr /> <hr />
<div className={styles["table-element"]}> <div className={styles["table-element"]}>
<p>Your cost per 2 weeks after trial</p> <p>Your cost per 2 weeks after trial</p>
<div> <div>
<span className={styles.discount}>$65</span> <span className={styles.discount}>$65</span>
<span>${subPlan.price_cents / 100}</span> <span>${product.trialPrice / 100}</span>
</div> </div>
</div> </div>
</div> </div>
@ -69,9 +70,9 @@ function PaymentTable({ subPlan, buttonClick }: IPaymentTableProps) {
<p className={styles.policy}> <p className={styles.policy}>
You are enrolling in 2 weeks subscription. By continuing you agree that You are enrolling in 2 weeks subscription. By continuing you agree that
if you don't cancel prior to the end of the 3-day trial for the $ if you don't cancel prior to the end of the 3-day trial for the $
{getPriceFromTrial(subPlan?.trial)} you will automatically be charged {getPrice(product)} you will automatically be charged $19 every 2 weeks
$19 every 2 weeks until you cancel in settings. Learn more about until you cancel in settings. Learn more about cancellation and refund
cancellation and refund policy in{" "} policy in{" "}
<a onClick={handleSubscriptionPolicyClick}>Subscription policy</a> <a onClick={handleSubscriptionPolicyClick}>Subscription policy</a>
</p> </p>
</> </>

66
src/components/pages/TrialPayment/index.tsx
View File

@ -13,22 +13,17 @@ import YourReading from "./components/YourReading";
import Reviews from "./components/Reviews"; import Reviews from "./components/Reviews";
import PointsList from "./components/PointsList"; import PointsList from "./components/PointsList";
import OftenAsk from "./components/OftenAsk"; import OftenAsk from "./components/OftenAsk";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useApi } from "@/api";
import { getClientLocale } from "@/locales";
import { Locale } from "@/components/PaymentTable";
import WithPartnerInformation from "./components/WithPartnerInformation"; import WithPartnerInformation from "./components/WithPartnerInformation";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import PaymentModal from "./components/PaymentModal"; import PaymentModal from "./components/PaymentModal";
import { trialPaymentPointsList } from "@/data/pointsLists"; import { trialPaymentPointsList } from "@/data/pointsLists";
import { trialPaymentReviews } from "@/data/reviews"; import { trialPaymentReviews } from "@/data/reviews";
import { usePaywall } from "@/hooks/paywall/usePaywall";
const locale = getClientLocale() as Locale; import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
function TrialPaymentPage() { function TrialPaymentPage() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const api = useApi();
const navigate = useNavigate(); const navigate = useNavigate();
const birthdate = useSelector(selectors.selectBirthdate); const birthdate = useSelector(selectors.selectBirthdate);
const zodiacSign = getZodiacSignByDate(birthdate); const zodiacSign = getZodiacSignByDate(birthdate);
@ -42,55 +37,36 @@ function TrialPaymentPage() {
flowChoice, flowChoice,
} = useSelector(selectors.selectQuestionnaire); } = useSelector(selectors.selectQuestionnaire);
const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate); const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
const [activeSubPlan, setActiveSubPlan] = useState<ISubscriptionPlan | null>(
activeSubPlanFromStore
);
const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false); const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
const [marginTopTitle, setMarginTopTitle] = useState<number>(360); const [marginTopTitle, setMarginTopTitle] = useState<number>(360);
const [singleOrWithPartner, setSingleOrWithPartner] = useState< const [singleOrWithPartner, setSingleOrWithPartner] = useState<
"single" | "partner" "single" | "partner"
>("single"); >("single");
const { subPlan } = useParams(); const { subPlan } = useParams();
const { products } = usePaywall({
useEffect(() => { placementKey: EPlacementKeys["aura.placement.main"],
(async () => { });
const { sub_plans } = await api.getSubscriptionPlans({ locale }); const activeProductFromStore = useSelector(selectors.selectActiveProduct);
const plans = sub_plans const [activeProduct, setActiveProduct] = useState<IPaywallProduct | null>(
.filter((plan: ISubscriptionPlan) => plan.provider === "stripe") activeProductFromStore
.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]);
useEffect(() => { useEffect(() => {
if (subPlan) { if (subPlan) {
const targetSubPlan = subPlans.find( const targetProduct = products.find(
(sub_plan) => (product) =>
String( String(
sub_plan?.trial?.price_cents product?.trialPrice
? Math.floor((sub_plan?.trial?.price_cents + 1) / 100) ? Math.floor((product?.trialPrice + 1) / 100)
: sub_plan.id.replace(".", "") : product.key.replace(".", "")
) === subPlan ) === subPlan
); );
if (targetSubPlan) { if (targetProduct) {
setActiveSubPlan(targetSubPlan); setActiveProduct(targetProduct);
dispatch(actions.payment.update({ activeSubPlan: targetSubPlan })); dispatch(actions.payment.update({ activeProduct }));
} }
} }
}, [dispatch, subPlan, subPlans]); }, [dispatch, subPlan, products, activeProduct]);
useEffect(() => { useEffect(() => {
if (["relationship", "married"].includes(flowChoice)) { if (["relationship", "married"].includes(flowChoice)) {
@ -102,7 +78,7 @@ function TrialPaymentPage() {
setMarginTopTitle(340); setMarginTopTitle(340);
}, [flowChoice]); }, [flowChoice]);
if (!activeSubPlan) { if (!activeProduct) {
return <Navigate to={routes.client.trialChoice()} />; return <Navigate to={routes.client.trialChoice()} />;
} }
@ -157,7 +133,7 @@ function TrialPaymentPage() {
Your Personalized Clarity & Love Reading is ready! Your Personalized Clarity & Love Reading is ready!
</Title> </Title>
<Goal goal={goal} /> <Goal goal={goal} />
<PaymentTable subPlan={activeSubPlan} buttonClick={openStripeModal} /> <PaymentTable product={activeProduct} buttonClick={openStripeModal} />
<YourReading <YourReading
gender={gender} gender={gender}
zodiacSign={zodiacSign} zodiacSign={zodiacSign}
@ -174,7 +150,7 @@ function TrialPaymentPage() {
<Reviews reviews={trialPaymentReviews} /> <Reviews reviews={trialPaymentReviews} />
<PointsList title="What you get" points={trialPaymentPointsList} /> <PointsList title="What you get" points={trialPaymentPointsList} />
<OftenAsk /> <OftenAsk />
<PaymentTable subPlan={activeSubPlan} buttonClick={openStripeModal} /> <PaymentTable product={activeProduct} buttonClick={openStripeModal} />
</section> </section>
); );
} }

19
src/components/pages/TrialPaymentWithDiscount/PaymentDiscountTable/index.tsx
View File

@ -2,10 +2,17 @@ import Title from "@/components/Title";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { selectors } from "@/store"; import { selectors } from "@/store";
import { getPriceFromTrial } from "@/services/price"; import { IPaywallProduct } from "@/api/resources/Paywall";
const getPrice = (product: IPaywallProduct | null) => {
if (!product) {
return 0;
}
return (product.trialPrice === 100 ? 99 : product.trialPrice || 0) / 100;
};
function PaymentDiscountTable() { function PaymentDiscountTable() {
const activeSub = useSelector(selectors.selectActiveSubPlan); const activeProduct = useSelector(selectors.selectActiveProduct);
return ( return (
<div className={styles.container}> <div className={styles.container}>
@ -15,7 +22,11 @@ function PaymentDiscountTable() {
<p className={styles["no-pressure"]}>No pressure. Cancel anytime.</p> <p className={styles["no-pressure"]}>No pressure. Cancel anytime.</p>
<div className={styles.applied}> <div className={styles.applied}>
<div className={styles.side}> <div className={styles.side}>
<img className={styles["present-image"]} src="/present.png" alt="Present" /> <img
className={styles["present-image"]}
src="/present.png"
alt="Present"
/>
<p className={styles.description}>Secret discount applied!</p> <p className={styles.description}>Secret discount applied!</p>
</div> </div>
<div className={styles.side}> <div className={styles.side}>
@ -34,7 +45,7 @@ function PaymentDiscountTable() {
<hr className={styles.line} /> <hr className={styles.line} />
<div className={styles["total-container"]}> <div className={styles["total-container"]}>
<p>Total today:</p> <p>Total today:</p>
{activeSub && <strong>${getPriceFromTrial(activeSub.trial)}</strong>} {activeProduct && <strong>${getPrice(activeProduct)}</strong>}
</div> </div>
</div> </div>
); );

42
src/components/palmistry/payment-screen/payment-screen.tsx
View File

@ -2,21 +2,21 @@ import React from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import './payment-screen.css'; import "./payment-screen.css";
import useSteps, { Step } from '@/hooks/palmistry/use-steps'; import useSteps, { Step } from "@/hooks/palmistry/use-steps";
import useTimer from '@/hooks/palmistry/use-timer'; import useTimer from "@/hooks/palmistry/use-timer";
import HeaderLogo from '@/components/palmistry/header-logo/header-logo'; import HeaderLogo from "@/components/palmistry/header-logo/header-logo";
import PaymentModal from "@/components/pages/TrialPayment/components/PaymentModal"; import PaymentModal from "@/components/pages/TrialPayment/components/PaymentModal";
import { selectors } from "@/store"; import { selectors } from "@/store";
const getFormattedPrice = (price: number) => { const getFormattedPrice = (price: number) => {
return (price / 100).toFixed(2); return (price / 100).toFixed(2);
} };
export default function PaymentScreen() { export default function PaymentScreen() {
const time = useTimer(); const time = useTimer();
const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan); const activeProductFromStore = useSelector(selectors.selectActiveProduct);
const subscriptionStatus = useSelector(selectors.selectStatus); const subscriptionStatus = useSelector(selectors.selectStatus);
const steps = useSteps(); const steps = useSteps();
@ -27,18 +27,20 @@ export default function PaymentScreen() {
steps.goNext(); steps.goNext();
}, 1500); }, 1500);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [subscriptionStatus]); }, [subscriptionStatus]);
React.useEffect(() => { React.useEffect(() => {
if (!activeSubPlanFromStore) { if (!activeProductFromStore) {
steps.setFirstUnpassedStep(Step.SubscriptionPlan); steps.setFirstUnpassedStep(Step.SubscriptionPlan);
} }
}, [activeSubPlanFromStore]); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeProductFromStore]);
const trialPrice = activeSubPlanFromStore?.trial?.price_cents || 0; const trialPrice = activeProductFromStore?.trialPrice || 0;
const fullPrice = activeSubPlanFromStore?.price_cents || 0; const fullPrice = activeProductFromStore?.price || 0;
const [minutes, seconds] = time.split(':'); const [minutes, seconds] = time.split(":");
return ( return (
<div className="payment-screen"> <div className="payment-screen">
@ -236,9 +238,17 @@ export default function PaymentScreen() {
<style>{`.palmistry-payment-modal { max-height: calc(100dvh - 40px) }`}</style> <style>{`.palmistry-payment-modal { max-height: calc(100dvh - 40px) }`}</style>
{activeSubPlanFromStore && ( {activeProductFromStore && (
<div className={`payment-screen__widget${subscriptionStatus === "subscribed" ? " payment-screen__widget_success" : ""}`}> <div
{subscriptionStatus !== "subscribed" && <PaymentModal returnUrl={window.location.href}/>} className={`payment-screen__widget${
subscriptionStatus === "subscribed"
? " payment-screen__widget_success"
: ""
}`}
>
{subscriptionStatus !== "subscribed" && (
<PaymentModal returnUrl={window.location.href} />
)}
{subscriptionStatus === "subscribed" && ( {subscriptionStatus === "subscribed" && (
<div className="payment-screen__success"> <div className="payment-screen__success">
@ -255,7 +265,9 @@ export default function PaymentScreen() {
/> />
</svg> </svg>
<div className="payment-screen__success-text">Payment success</div> <div className="payment-screen__success-text">
Payment success
</div>
</div> </div>
)} )}
</div> </div>

88
src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx
View File

@ -1,92 +1,58 @@
import React, { useMemo } from "react"; import React from "react";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { selectors } from "@/store"; import { selectors } from "@/store";
import useSteps, { Step } from "@/hooks/palmistry/use-steps"; import useSteps, { Step } from "@/hooks/palmistry/use-steps";
import Button from "@/components/palmistry/button/button"; import Button from "@/components/palmistry/button/button";
import EmailHeader from "@/components/palmistry/email-header/email-header"; import EmailHeader from "@/components/palmistry/email-header/email-header";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import { actions } from "@/store"; import { actions } from "@/store";
import { useApi } from "@/api"; import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
const bestPlanId = "stripe.15"; const bestPlanId = "stripe.15";
const getFormattedPrice = (plan: ISubscriptionPlan) => { const getFormattedPrice = (product: IPaywallProduct) => {
return (plan.trial!.price_cents / 100).toFixed(2); return (product?.trialPrice / 100).toFixed(2);
}; };
export default function StepSubscriptionPlan() { export default function StepSubscriptionPlan() {
const steps = useSteps(); const steps = useSteps();
const dispatch = useDispatch(); const dispatch = useDispatch();
const api = useApi(); const activeProductFromStore = useSelector(selectors.selectActiveProduct);
const { i18n } = useTranslation(); const { products } = usePaywall({
const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan); placementKey: EPlacementKeys["aura.placement.main"],
const allowedPlans = useMemo(() => [""], []); });
const storedEmail = steps.getStoredValue(Step.Email); const storedEmail = steps.getStoredValue(Step.Email);
const [subscriptionPlan, setSubscriptionPlan] = React.useState(""); const [product, setProduct] = React.useState("");
const [subscriptionPlans, setSubscriptionPlans] = React.useState<
ISubscriptionPlan[]
>([]);
const [email, setEmail] = React.useState(steps.getStoredValue(Step.Email)); const [email, setEmail] = React.useState(steps.getStoredValue(Step.Email));
const locale = i18n.language;
React.useEffect(() => { React.useEffect(() => {
if (activeSubPlanFromStore) { if (activeProductFromStore) {
setSubscriptionPlan(activeSubPlanFromStore.id); setProduct(activeProductFromStore._id);
} }
}, [activeSubPlanFromStore]); }, [activeProductFromStore]);
React.useEffect(() => { React.useEffect(() => {
(async () => { if (product) {
const { sub_plans } = await api.getSubscriptionPlans({ locale }); const targetProduct = products.find(
const plans = sub_plans (_product) => _product._id === product
.filter(
(plan: ISubscriptionPlan) =>
plan.provider === "stripe" && !plan.name.includes("(test)")
)
.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;
});
setSubscriptionPlans(
plans.filter(
(plan) => plan.trial?.price_cents || allowedPlans.includes(plan.id)
)
);
})();
}, [allowedPlans, api, locale]);
React.useEffect(() => {
if (subscriptionPlan) {
const targetSubPlan = subscriptionPlans.find(
(sub_plan) => sub_plan.id === subscriptionPlan
); );
if (targetSubPlan) { if (targetProduct) {
dispatch(actions.payment.update({ activeSubPlan: targetSubPlan })); dispatch(actions.payment.update({ activeProduct: targetProduct }));
} }
} }
}, [subscriptionPlan]); }, [dispatch, product, products]);
React.useEffect(() => { React.useEffect(() => {
setEmail(storedEmail || ""); setEmail(storedEmail || "");
}, [storedEmail]); }, [storedEmail]);
const onNext = () => { const onNext = () => {
steps.saveCurrent(subscriptionPlan); steps.saveCurrent(product);
steps.goNext(); steps.goNext();
}; };
@ -146,24 +112,22 @@ export default function StepSubscriptionPlan() {
</div> </div>
<div className="palmistry-container__plans"> <div className="palmistry-container__plans">
{subscriptionPlans.map((plan) => ( {products.map((_product) => (
<div <div
key={plan.id} key={_product._id}
className={`palmistry-container__plan ${ className={`palmistry-container__plan ${
subscriptionPlan === plan.id product === _product._id ? "palmistry-container__plan_active" : ""
? "palmistry-container__plan_active"
: ""
}`} }`}
onClick={() => setSubscriptionPlan(plan.id)} onClick={() => setProduct(_product._id)}
> >
<h3>${getFormattedPrice(plan)}</h3> <h3>${getFormattedPrice(_product)}</h3>
</div> </div>
))} ))}
</div> </div>
<span <span
className={`palmistry-container__subscription-text ${ className={`palmistry-container__subscription-text ${
subscriptionPlan === bestPlanId product === bestPlanId
? "palmistry-container__subscription-text_active" ? "palmistry-container__subscription-text_active"
: "" : ""
}`} }`}

24
src/components/palmistry/stripe-form/stripe-form.tsx
View File

@ -1,19 +1,20 @@
import React from 'react'; import React from "react";
import { StripeError } from '@stripe/stripe-js'; import { StripeError } from "@stripe/stripe-js";
import { import {
PaymentElement, PaymentElement,
useElements, useElements,
useStripe, useStripe,
} from '@stripe/react-stripe-js'; } from "@stripe/react-stripe-js";
import './stripe-form.css'; import "./stripe-form.css";
import Button from '../button/button'; import Button from "../button/button";
type Props = { type Props = {
subscriptionReceiptId: string; subscriptionReceiptId: string;
isProcessing: boolean; isProcessing: boolean;
paymentResultUrl: string; paymentResultUrl: string;
confirmType: "payment" | "setup";
onSubmit: () => void; onSubmit: () => void;
onSuccess: () => void; onSuccess: () => void;
onError: (error: StripeError) => void; onError: (error: StripeError) => void;
@ -22,6 +23,7 @@ type Props = {
export default function StripeForm(props: Props) { export default function StripeForm(props: Props) {
const stripe = useStripe(); const stripe = useStripe();
const elements = useElements(); const elements = useElements();
const confirmType = props.confirmType || "payment";
const [formReady, setFormReady] = React.useState(false); const [formReady, setFormReady] = React.useState(false);
@ -33,7 +35,9 @@ export default function StripeForm(props: Props) {
props.onSubmit(); props.onSubmit();
try { try {
const { error } = await stripe.confirmPayment({ const { error } = await stripe[
confirmType === "payment" ? "confirmPayment" : "confirmSetup"
]({
elements, elements,
confirmParams: { confirmParams: {
return_url: props.paymentResultUrl, return_url: props.paymentResultUrl,
@ -52,10 +56,14 @@ export default function StripeForm(props: Props) {
return ( return (
<form className="stripe-form" onSubmit={onSubmit}> <form className="stripe-form" onSubmit={onSubmit}>
<PaymentElement onReady={() => setFormReady(true)}/> <PaymentElement onReady={() => setFormReady(true)} />
<div className="stripe-form__button"> <div className="stripe-form__button">
<Button type="submit" disabled={props.isProcessing || !formReady} active> <Button
type="submit"
disabled={props.isProcessing || !formReady}
active
>
Pay Pay
</Button> </Button>
</div> </div>

1
src/env.d.ts vendored
View File

@ -1,6 +1,7 @@
interface ImportMetaEnv { interface ImportMetaEnv {
AURA_API_HOST: string, AURA_API_HOST: string,
AURA_DAPI_HOST: string, AURA_DAPI_HOST: string,
AURA_DAPI_PREFIX: string,
AURA_SITE_HOST: string, AURA_SITE_HOST: string,
AURA_PREFIX: string, AURA_PREFIX: string,
AURA_OPEN_AI_HOST: number, AURA_OPEN_AI_HOST: number,

79
src/hooks/payment/useMakePayment.ts Normal file
View File

@ -0,0 +1,79 @@
import { useApi } from "@/api";
import { selectors } from "@/store";
import { useCallback, useEffect, useMemo, useState } from "react"
import { useSelector } from "react-redux";
interface IUseMakePaymentProps {
productId: string;
returnPaidUrl?: string;
}
export const useMakePayment = ({ productId, returnPaidUrl = `https://${window.location.host}/payment/result/` }: IUseMakePaymentProps) => {
const api = useApi();
const token = useSelector(selectors.selectToken);
const [paymentIntentId, setPaymentIntentId] = useState<string>();
const [paymentType, setPaymentType] = useState<"payment" | "setup">("payment");
const [clientSecret, setClientSecret] = useState<string>();
const [publicKey, setPublicKey] = useState<string>();
const [returnUrl, setReturnUrl] = useState<string>();
const [error, setError] = useState<string>();
const [isLoading, setIsLoading] = useState(false);
const makePayment = useCallback(async () => {
if (!productId?.length) {
return;
}
try {
setIsLoading(true);
const res = await api.makePayment({
token,
productId
});
if (res.status === "paid") {
return window.location.href = `${returnPaidUrl}?redirect_status=succeeded`;
}
if ("message" in res && res.message) {
return setError(res.message);
}
if (!("data" in res) || !res.data) {
return;
}
const { data, type } = res;
setPaymentIntentId(data.paymentIntentId);
setPaymentType(type);
setClientSecret(data.client_secret);
setReturnUrl(data.return_url);
setPublicKey(data.public_key);
} catch (error) {
setError(error as string);
} finally {
setIsLoading(false);
}
}, [api, productId, returnPaidUrl, token])
useEffect(() => {
makePayment()
}, [makePayment])
return useMemo(() => ({
paymentIntentId,
paymentType,
clientSecret,
returnUrl,
publicKey,
error,
isLoading
}), [
clientSecret,
error,
isLoading,
paymentIntentId,
paymentType,
publicKey,
returnUrl
])
}

103
src/hooks/paywall/usePaywall.tsx Normal file
View File

@ -0,0 +1,103 @@
import { useApi } from "@/api";
import { EPlacementKeys, IPaywall } from "@/api/resources/Paywall";
import { selectors } from "@/store";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useSelector } from "react-redux";
import parse from "html-react-parser";
interface IUsePaywallProps {
placementKey: EPlacementKeys;
}
interface IGetTextProps {
replacementSelector?: string;
color?: string;
replacement?: {
target: string;
replacement: string;
};
}
export function usePaywall({ placementKey }: IUsePaywallProps) {
const api = useApi();
const token = useSelector(selectors.selectToken);
const [paywall, setPaywall] = useState<IPaywall>();
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(false);
const products = useMemo(() => paywall?.products || [], [paywall?.products]);
const properties = useMemo(
() => paywall?.properties || [],
[paywall?.properties]
);
const getPaywallByPlacementKey = useCallback(
async (placementKey: EPlacementKeys) => {
try {
setIsLoading(true);
setError(false);
const paywall = await api.getPaywallByPlacementKey({
placementKey,
token,
});
if ("paywall" in paywall && paywall.paywall) {
setPaywall(paywall.paywall);
}
} catch (error) {
console.error(error);
setError(true);
} finally {
setIsLoading(false);
}
},
[api, token]
);
useEffect(() => {
getPaywallByPlacementKey(placementKey);
}, [getPaywallByPlacementKey, placementKey]);
const getText = useCallback(
(
key: string,
{
replacementSelector = "span",
color = "inherit",
replacement,
}: IGetTextProps
) => {
const property = properties.find((property) => property.key === key);
if (!property) return "";
const text = property.value;
const colorElements = properties.filter((property) =>
property.key.includes(`${key}.color`)
);
if (text && colorElements.length) {
let element = text;
for (const colorElement of colorElements) {
element = element.replace(
colorElement.value,
`<${replacementSelector} class="${property.key}" style="color: ${color}">${colorElement.value}</${replacementSelector}>`
);
}
return parse(element);
}
if (text && replacement) {
return text.replace(replacement.target, replacement.replacement);
}
return text;
},
[properties]
);
return useMemo(
() => ({
paywall,
isLoading,
error,
products,
properties,
getText,
}),
[error, isLoading, paywall, products, properties, getText]
);
}

11
src/routes.ts
View File

@ -1,3 +1,4 @@
import { EPlacementKeys } from "./api/resources/Paywall";
import type { UserStatus } from "./types"; import type { UserStatus } from "./types";
const environments = import.meta.env const environments = import.meta.env
@ -5,6 +6,7 @@ const environments = import.meta.env
const host = ""; const host = "";
export const apiHost = environments.AURA_API_HOST; export const apiHost = environments.AURA_API_HOST;
const dApiHost = environments.AURA_DAPI_HOST const dApiHost = environments.AURA_DAPI_HOST
const dApiPrefix = environments.AURA_DAPI_PREFIX
const siteHost = environments.AURA_SITE_HOST const siteHost = environments.AURA_SITE_HOST
const prefix = environments.AURA_PREFIX; const prefix = environments.AURA_PREFIX;
const openAIHost = environments.AURA_OPEN_AI_HOST; const openAIHost = environments.AURA_OPEN_AI_HOST;
@ -262,6 +264,15 @@ const routes = {
// Palmistry // Palmistry
getPalmistryLines: () => getPalmistryLines: () =>
["https://api.aura.witapps.us", "palmistry", "lines"].join("/"), ["https://api.aura.witapps.us", "palmistry", "lines"].join("/"),
// Paywall
getPaywallByPlacementKey: (placementKey: EPlacementKeys) =>
[dApiHost, dApiPrefix, "placement", placementKey, "paywall"].join("/"),
// Payment
makePayment: () =>
[dApiHost, dApiPrefix, "payment", "checkout"].join("/"),
}, },
openAi: { openAi: {
createThread: () => [openAIHost, openAiPrefix, "threads"].join("/"), createThread: () => [openAIHost, openAiPrefix, "threads"].join("/"),

4
src/store/index.ts
View File

@ -29,7 +29,7 @@ import onboardingConfig, {
} from "./onboarding"; } from "./onboarding";
import payment, { import payment, {
actions as paymentActions, actions as paymentActions,
selectActiveSubPlan, selectActiveProduct,
selectIsDiscount, selectIsDiscount,
selectSubscriptionReceipt, selectSubscriptionReceipt,
} from "./payment"; } from "./payment";
@ -97,7 +97,7 @@ export const selectors = {
selectSelfName, selectSelfName,
selectCategoryId, selectCategoryId,
selectSelectedPrice, selectSelectedPrice,
selectActiveSubPlan, selectActiveProduct,
selectUserCallbacksDescription, selectUserCallbacksDescription,
selectUserCallbacksPrevStat, selectUserCallbacksPrevStat,
selectHome, selectHome,

10
src/store/payment.ts
View File

@ -1,4 +1,4 @@
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans"; import { IPaywallProduct } from "@/api/resources/Paywall";
import { SubscriptionReceipt } from "@/api/resources/UserSubscriptionReceipts"; import { SubscriptionReceipt } from "@/api/resources/UserSubscriptionReceipts";
import { createSlice, createSelector } from "@reduxjs/toolkit"; import { createSlice, createSelector } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit"; import type { PayloadAction } from "@reduxjs/toolkit";
@ -6,15 +6,15 @@ import type { PayloadAction } from "@reduxjs/toolkit";
interface IPayment { interface IPayment {
selectedPrice: number | null; selectedPrice: number | null;
isDiscount: boolean; isDiscount: boolean;
activeSubPlan: ISubscriptionPlan | null;
subscriptionReceipt: SubscriptionReceipt | null; subscriptionReceipt: SubscriptionReceipt | null;
activeProduct: IPaywallProduct | null;
} }
const initialState: IPayment = { const initialState: IPayment = {
selectedPrice: null, selectedPrice: null,
isDiscount: false, isDiscount: false,
activeSubPlan: null,
subscriptionReceipt: null, subscriptionReceipt: null,
activeProduct: null,
}; };
const paymentSlice = createSlice({ const paymentSlice = createSlice({
@ -33,8 +33,8 @@ export const selectSelectedPrice = createSelector(
(state: { payment: IPayment }) => state.payment.selectedPrice, (state: { payment: IPayment }) => state.payment.selectedPrice,
(payment) => payment (payment) => payment
); );
export const selectActiveSubPlan = createSelector( export const selectActiveProduct = createSelector(
(state: { payment: IPayment }) => state.payment.activeSubPlan, (state: { payment: IPayment }) => state.payment.activeProduct,
(payment) => payment (payment) => payment
); );
export const selectIsDiscount = createSelector( export const selectIsDiscount = createSelector(