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

Merge branch 'develop' into 'main'

Browse Source 
Develop

See merge request witapp/aura-webapp!364
This commit is contained in:
Daniil Chemerkin 2024-09-07 13:49:27 +00:00
commit e6e0a42741
5 changed files with 49 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/PaymentModalNew/index.tsx
View File

@ -9,7 +9,6 @@ import { Dispatch, LegacyRef, SetStateAction, useEffect, useMemo, useRef, useSta
import { loadStripe, Stripe } from '@stripe/stripe-js'; import { loadStripe, Stripe } from '@stripe/stripe-js';
import { usePaywall } from '@/hooks/paywall/usePaywall'; import { usePaywall } from '@/hooks/paywall/usePaywall';
import { useMakePayment } from '@/hooks/payment/useMakePayment'; import { useMakePayment } from '@/hooks/payment/useMakePayment';
import { getFormattedPrice } from '@/utils/price.utils';
import routes from '@/routes'; import routes from '@/routes';
import Title from '@/components/Title'; import Title from '@/components/Title';
import { Elements } from '@stripe/react-stripe-js'; import { Elements } from '@stripe/react-stripe-js';
@ -17,6 +16,10 @@ import ExpressCheckoutStripe from '@/components/PaymentPage/methods/ExpressCheck
import SecurityPayments from '@/components/pages/TrialPayment/components/SecurityPayments'; import SecurityPayments from '@/components/pages/TrialPayment/components/SecurityPayments';
import PaymentCardModal from '@/components/PaymentModalNew/PaymentCardModal'; import PaymentCardModal from '@/components/PaymentModalNew/PaymentCardModal';
import CreditCardIcon from '@/components/PaymentModalNew/PaymentCardModal/CreditCardIcon'; import CreditCardIcon from '@/components/PaymentModalNew/PaymentCardModal/CreditCardIcon';
import {addCurrency} from "@/locales";
import {getPriceCentsToDollars} from "@/services/price";
import {useSelector} from "react-redux";
import {selectors} from "@/store";
interface IPaymentModalNewProps { interface IPaymentModalNewProps {
returnUrl: string; returnUrl: string;
@ -33,6 +36,7 @@ export default function PaymentModalNew({
}: IPaymentModalNewProps) { }: IPaymentModalNewProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const ref = useRef<HTMLDivElement>(); const ref = useRef<HTMLDivElement>();
const currency = useSelector(selectors.selectCurrency);
const [stripePromise, setStripePromise] = const [stripePromise, setStripePromise] =
useState<Promise<Stripe | null> | null>(null); useState<Promise<Stripe | null> | null>(null);
@ -105,7 +109,7 @@ export default function PaymentModalNew({
} }
<div className={styles.paymentModalPrice}>Total due today: <div className={styles.paymentModalPrice}>Total due today:
${getFormattedPrice(activeProduct.trialPrice)}</div> {addCurrency(getPriceCentsToDollars(activeProduct.trialPrice), currency)}</div>
{!isLoadingPayment && {!isLoadingPayment &&
<> <>

41
src/components/palmistry/discount-screen/discount-screen.tsx
View File

@ -14,6 +14,10 @@ import HeaderLogo from "@/components/palmistry/header-logo/header-logo";
import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm"; import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm";
import { ResponseGet } from "@/api/resources/SinglePayment"; import { ResponseGet } from "@/api/resources/SinglePayment";
import Loader, { LoaderColor } from "@/components/Loader"; import Loader, { LoaderColor } from "@/components/Loader";
import {useSelector} from "react-redux";
import {selectors} from "@/store";
import {addCurrency} from "@/locales";
import {getPriceCentsToDollars} from "@/services/price";
const currentProductKey = "skip.trial.subscription.aura"; const currentProductKey = "skip.trial.subscription.aura";
const returnUrl = `${window.location.host}/palmistry/premium-bundle`; const returnUrl = `${window.location.host}/palmistry/premium-bundle`;
@ -25,7 +29,7 @@ export default function DiscountScreen() {
const { i18n } = useTranslations(); const { i18n } = useTranslations();
const locale = i18n.language; const locale = i18n.language;
const [price, setPrice] = React.useState(""); const [price, setPrice] = React.useState(0);
const [isSuccess] = React.useState(false); const [isSuccess] = React.useState(false);
const [stripePromise, setStripePromise] = const [stripePromise, setStripePromise] =
React.useState<Promise<Stripe | null> | null>(null); React.useState<Promise<Stripe | null> | null>(null);
@ -33,22 +37,23 @@ export default function DiscountScreen() {
const [clientSecret, setClientSecret] = React.useState<string | null>(null); const [clientSecret, setClientSecret] = React.useState<string | null>(null);
const [stripePublicKey, setStripePublicKey] = React.useState<string>(""); const [stripePublicKey, setStripePublicKey] = React.useState<string>("");
const [isLoading, setIsLoading] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false);
const currency = useSelector(selectors.selectCurrency);
const goPremiumBundle = () => { const goPremiumBundle = () => {
navigate(routes.client.palmistryPremiumBundle()); navigate(routes.client.palmistryPremiumBundle());
}; };
React.useEffect(() => { // React.useEffect(() => {
(async () => { // (async () => {
const { sub_plans } = await api.getSubscriptionPlans({ locale }); // const { sub_plans } = await api.getSubscriptionPlans({ locale });
const plan = sub_plans.find((plan) => plan.id === "stripe.40"); // const plan = sub_plans.find((plan) => plan.id === "stripe.40");
//
if (!plan?.price_cents) return; // if (!plan?.price_cents) return;
//
setPrice((plan?.price_cents / 100).toFixed(2)); // setPrice((plan?.price_cents / 100).toFixed(2));
})(); // })();
// eslint-disable-next-line react-hooks/exhaustive-deps // // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // }, []);
React.useEffect(() => { React.useEffect(() => {
(async () => { (async () => {
@ -58,7 +63,9 @@ export default function DiscountScreen() {
(product) => product.key === currentProductKey (product) => product.key === currentProductKey
); );
if (product) { if (product && product.price) {
console.log(locale)
setPrice((product?.price))
setProduct(product); setProduct(product);
} }
})(); })();
@ -133,14 +140,14 @@ export default function DiscountScreen() {
<div className="discount-screen__blocks"> <div className="discount-screen__blocks">
<section className="discount-screen__block"> <section className="discount-screen__block">
<span className="discount-screen__price-block"> <span className="discount-screen__price-block">
$19 for <br /> 1-week plan {addCurrency(getPriceCentsToDollars(1900), currency)} for <br /> 1-week plan
</span> </span>
<div className="discount-screen__details"> <div className="discount-screen__details">
<span className="discount-screen__details-name"> <span className="discount-screen__details-name">
Total savings Total savings
</span> </span>
<span className="discount-screen__details-value">$0</span> <span className="discount-screen__details-value">{addCurrency(getPriceCentsToDollars(0), currency)}</span>
</div> </div>
<div className="discount-screen__details"> <div className="discount-screen__details">
@ -161,14 +168,14 @@ export default function DiscountScreen() {
<div className="discount-screen__header-block">save 33%</div> <div className="discount-screen__header-block">save 33%</div>
<span className="discount-screen__price-block"> <span className="discount-screen__price-block">
${price} for <br /> 1-week plan {addCurrency(getPriceCentsToDollars(price || 0), currency)} for <br /> 1-week plan
</span> </span>
<div className="discount-screen__details"> <div className="discount-screen__details">
<span className="discount-screen__details-name"> <span className="discount-screen__details-name">
Total savings Total savings
</span> </span>
<span className="discount-screen__details-value">$6.27</span> <span className="discount-screen__details-value">{addCurrency(getPriceCentsToDollars(627), currency)}</span>
</div> </div>
<div className="discount-screen__details"> <div className="discount-screen__details">

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

@ -11,7 +11,8 @@ import { selectors } from '@/store';
import { EPlacementKeys } from '@/api/resources/Paywall'; import { EPlacementKeys } from '@/api/resources/Paywall';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
import PaymentModalNew from '@/components/PaymentModalNew'; import PaymentModalNew from '@/components/PaymentModalNew';
import { getFormattedPrice } from '@/utils/price.utils'; import {addCurrency} from "@/locales";
import {getPriceCentsToDollars} from "@/services/price";
export default function PaymentScreen() { export default function PaymentScreen() {
const time = useTimer(); const time = useTimer();
@ -43,7 +44,7 @@ export default function PaymentScreen() {
const trialPrice = activeProductFromStore?.trialPrice || 0; const trialPrice = activeProductFromStore?.trialPrice || 0;
const fullPrice = activeProductFromStore?.price || 0; const fullPrice = activeProductFromStore?.price || 0;
const currency = useSelector(selectors.selectCurrency);
const [minutes, seconds] = time.split(":"); const [minutes, seconds] = time.split(":");
const returnUrl = window.location.origin + '/palmistry/payment'; const returnUrl = window.location.origin + '/palmistry/payment';
@ -131,7 +132,7 @@ export default function PaymentScreen() {
<span>Total today</span> <span>Total today</span>
<span className="payment-screen__trial-price"> <span className="payment-screen__trial-price">
${getFormattedPrice(trialPrice)} {addCurrency(getPriceCentsToDollars(trialPrice), currency)}
</span> </span>
</div> </div>
@ -163,13 +164,11 @@ export default function PaymentScreen() {
<div className="payment-screen__prices"> <div className="payment-screen__prices">
<span> <span>
You will be charged only{" "} You will be charged only{" "}
<b>${getFormattedPrice(trialPrice)} for your {activeProductFromStore?.trialDuration}-day trial.</b> <b>{addCurrency(getPriceCentsToDollars(trialPrice), currency)} for your {activeProductFromStore?.trialDuration}-day trial.</b>
</span> </span>
<span> <span>
Then <s>${getFormattedPrice(fullPrice)}</s> $ Then <s>{addCurrency(getPriceCentsToDollars(fullPrice), currency)}</s> {addCurrency(getPriceCentsToDollars(trialPrice), currency)} per week. Save {addCurrency(getPriceCentsToDollars(fullPrice - trialPrice), currency)} every week.
{getFormattedPrice(trialPrice)} per week. Save $
{getFormattedPrice(fullPrice - trialPrice)} every week.
</span> </span>
<span> <span>

9
src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx
View File

@ -13,6 +13,10 @@ import { useAuth } from "@/auth";
import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm"; import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm";
import { ResponseGet } from "@/api/resources/SinglePayment"; import { ResponseGet } from "@/api/resources/SinglePayment";
import Loader, { LoaderColor } from "@/components/Loader"; import Loader, { LoaderColor } from "@/components/Loader";
import {useSelector} from "react-redux";
import {selectors} from "@/store";
import {addCurrency} from "@/locales";
const currentProductKey = "premium.bundle.aura"; const currentProductKey = "premium.bundle.aura";
const returnUrl = window.location.host; const returnUrl = window.location.host;
@ -29,6 +33,7 @@ export default function PremiumBundleScreen() {
const [clientSecret, setClientSecret] = React.useState<string | null>(null); const [clientSecret, setClientSecret] = React.useState<string | null>(null);
const [stripePublicKey, setStripePublicKey] = React.useState<string>(""); const [stripePublicKey, setStripePublicKey] = React.useState<string>("");
const [isLoading, setIsLoading] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false);
const currency = useSelector(selectors.selectCurrency);
React.useEffect(() => { React.useEffect(() => {
(async () => { (async () => {
@ -209,9 +214,9 @@ export default function PremiumBundleScreen() {
<div className="premium-bundle-screen__subsection"> <div className="premium-bundle-screen__subsection">
<span className="premium-bundle-screen__one-time-price"> <span className="premium-bundle-screen__one-time-price">
One-time price of $19! One-time price of {addCurrency(19, currency)}!
</span> </span>
<p>Original price is $45. Save 58%!</p> <p>Original price is {addCurrency(45, currency)}. Save 58%!</p>
</div> </div>
<div className="premium-bundle-screen__subsection"> <div className="premium-bundle-screen__subsection">

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

@ -7,14 +7,13 @@ 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 { actions } from "@/store"; import { actions } from "@/store";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall"; import { EPlacementKeys } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall"; import { usePaywall } from "@/hooks/paywall/usePaywall";
import {addCurrency} from "@/locales";
import {getPriceCentsToDollars} from "@/services/price";
const bestPlanId = "stripe.15"; const bestPlanId = "stripe.15";
const getFormattedPrice = (product: IPaywallProduct) => {
return (product?.trialPrice / 100).toFixed(2);
};
export default function StepSubscriptionPlan() { export default function StepSubscriptionPlan() {
const steps = useSteps(); const steps = useSteps();
@ -26,7 +25,7 @@ export default function StepSubscriptionPlan() {
const defaultProduct = properties.find( const defaultProduct = properties.find(
(property) => property.key === "default.product" (property) => property.key === "default.product"
)?.value; )?.value;
const currency = useSelector(selectors.selectCurrency);
const storedEmail = steps.getStoredValue(Step.Email); const storedEmail = steps.getStoredValue(Step.Email);
const [product, setProduct] = React.useState(""); const [product, setProduct] = React.useState("");
@ -37,7 +36,6 @@ export default function StepSubscriptionPlan() {
if (!defaultProduct || activeProductFromStore) return; if (!defaultProduct || activeProductFromStore) return;
const targetDefaultProduct = products.find((p) => p.key === defaultProduct); const targetDefaultProduct = products.find((p) => p.key === defaultProduct);
if (!targetDefaultProduct) return; if (!targetDefaultProduct) return;
setProduct(targetDefaultProduct._id); setProduct(targetDefaultProduct._id);
steps.saveCurrent(targetDefaultProduct._id); steps.saveCurrent(targetDefaultProduct._id);
dispatch( dispatch(
@ -133,7 +131,7 @@ export default function StepSubscriptionPlan() {
}`} }`}
onClick={() => setProduct(_product._id)} onClick={() => setProduct(_product._id)}
> >
<h3>${getFormattedPrice(_product)}</h3> <h3>{addCurrency(getPriceCentsToDollars(_product.trialPrice || 0), currency)}</h3>
</div> </div>
))} ))}
</div> </div>
@ -145,7 +143,7 @@ export default function StepSubscriptionPlan() {
: "" : ""
}`} }`}
> >
It costs us $13.21 to compensate our AURA employees for the trial, but It costs us {addCurrency(13.73, currency)} to compensate our AURA employees for the trial, but
please choose the amount you are comfortable with. please choose the amount you are comfortable with.
</span> </span>