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 { usePaywall } from '@/hooks/paywall/usePaywall';
import { useMakePayment } from '@/hooks/payment/useMakePayment';
import { getFormattedPrice } from '@/utils/price.utils';
import routes from '@/routes';
import Title from '@/components/Title';
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 PaymentCardModal from '@/components/PaymentModalNew/PaymentCardModal';
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 {
returnUrl: string;
@ -33,6 +36,7 @@ export default function PaymentModalNew({
}: IPaymentModalNewProps) {
const navigate = useNavigate();
const ref = useRef<HTMLDivElement>();
const currency = useSelector(selectors.selectCurrency);
const [stripePromise, setStripePromise] =
useState<Promise<Stripe | null> | null>(null);
@ -105,7 +109,7 @@ export default function PaymentModalNew({
}
<div className={styles.paymentModalPrice}>Total due today:
${getFormattedPrice(activeProduct.trialPrice)}</div>
{addCurrency(getPriceCentsToDollars(activeProduct.trialPrice), currency)}</div>
{!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 { ResponseGet } from "@/api/resources/SinglePayment";
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 returnUrl = `${window.location.host}/palmistry/premium-bundle`;
@ -25,7 +29,7 @@ export default function DiscountScreen() {
const { i18n } = useTranslations();
const locale = i18n.language;
const [price, setPrice] = React.useState("");
const [price, setPrice] = React.useState(0);
const [isSuccess] = React.useState(false);
const [stripePromise, setStripePromise] =
React.useState<Promise<Stripe | null> | null>(null);
@ -33,22 +37,23 @@ export default function DiscountScreen() {
const [clientSecret, setClientSecret] = React.useState<string | null>(null);
const [stripePublicKey, setStripePublicKey] = React.useState<string>("");
const [isLoading, setIsLoading] = React.useState(false);
const currency = useSelector(selectors.selectCurrency);
const goPremiumBundle = () => {
navigate(routes.client.palmistryPremiumBundle());
};
React.useEffect(() => {
(async () => {
const { sub_plans } = await api.getSubscriptionPlans({ locale });
const plan = sub_plans.find((plan) => plan.id === "stripe.40");
if (!plan?.price_cents) return;
setPrice((plan?.price_cents / 100).toFixed(2));
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// React.useEffect(() => {
// (async () => {
// const { sub_plans } = await api.getSubscriptionPlans({ locale });
// const plan = sub_plans.find((plan) => plan.id === "stripe.40");
//
// if (!plan?.price_cents) return;
//
// setPrice((plan?.price_cents / 100).toFixed(2));
// })();
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, []);
React.useEffect(() => {
(async () => {
@ -58,7 +63,9 @@ export default function DiscountScreen() {
(product) => product.key === currentProductKey
);
if (product) {
if (product && product.price) {
console.log(locale)
setPrice((product?.price))
setProduct(product);
}
})();
@ -133,14 +140,14 @@ export default function DiscountScreen() {
<div className="discount-screen__blocks">
<section className="discount-screen__block">
<span className="discount-screen__price-block">
$19 for <br /> 1-week plan
{addCurrency(getPriceCentsToDollars(1900), currency)} for <br /> 1-week plan
</span>
<div className="discount-screen__details">
<span className="discount-screen__details-name">
Total savings
</span>
<span className="discount-screen__details-value">$0</span>
<span className="discount-screen__details-value">{addCurrency(getPriceCentsToDollars(0), currency)}</span>
</div>
<div className="discount-screen__details">
@ -161,14 +168,14 @@ export default function DiscountScreen() {
<div className="discount-screen__header-block">save 33%</div>
<span className="discount-screen__price-block">
${price} for <br /> 1-week plan
{addCurrency(getPriceCentsToDollars(price || 0), currency)} for <br /> 1-week plan
</span>
<div className="discount-screen__details">
<span className="discount-screen__details-name">
Total savings
</span>
<span className="discount-screen__details-value">$6.27</span>
<span className="discount-screen__details-value">{addCurrency(getPriceCentsToDollars(627), currency)}</span>
</div>
<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 { useSearchParams } from 'react-router-dom';
import PaymentModalNew from '@/components/PaymentModalNew';
import { getFormattedPrice } from '@/utils/price.utils';
import {addCurrency} from "@/locales";
import {getPriceCentsToDollars} from "@/services/price";
export default function PaymentScreen() {
const time = useTimer();
@ -43,7 +44,7 @@ export default function PaymentScreen() {
const trialPrice = activeProductFromStore?.trialPrice || 0;
const fullPrice = activeProductFromStore?.price || 0;
const currency = useSelector(selectors.selectCurrency);
const [minutes, seconds] = time.split(":");
const returnUrl = window.location.origin + '/palmistry/payment';
@ -131,7 +132,7 @@ export default function PaymentScreen() {
<span>Total today</span>
<span className="payment-screen__trial-price">
${getFormattedPrice(trialPrice)}
{addCurrency(getPriceCentsToDollars(trialPrice), currency)}
</span>
</div>
@ -163,13 +164,11 @@ export default function PaymentScreen() {
<div className="payment-screen__prices">
<span>
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>
Then <s>${getFormattedPrice(fullPrice)}</s> $
{getFormattedPrice(trialPrice)} per week. Save $
{getFormattedPrice(fullPrice - trialPrice)} every week.
Then <s>{addCurrency(getPriceCentsToDollars(fullPrice), currency)}</s> {addCurrency(getPriceCentsToDollars(trialPrice), currency)} per week. Save {addCurrency(getPriceCentsToDollars(fullPrice - trialPrice), currency)} every week.
</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 { ResponseGet } from "@/api/resources/SinglePayment";
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 returnUrl = window.location.host;
@ -29,6 +33,7 @@ export default function PremiumBundleScreen() {
const [clientSecret, setClientSecret] = React.useState<string | null>(null);
const [stripePublicKey, setStripePublicKey] = React.useState<string>("");
const [isLoading, setIsLoading] = React.useState(false);
const currency = useSelector(selectors.selectCurrency);
React.useEffect(() => {
(async () => {
@ -209,9 +214,9 @@ export default function PremiumBundleScreen() {
<div className="premium-bundle-screen__subsection">
<span className="premium-bundle-screen__one-time-price">
One-time price of $19!
One-time price of {addCurrency(19, currency)}!
</span>
<p>Original price is $45. Save 58%!</p>
<p>Original price is {addCurrency(45, currency)}. Save 58%!</p>
</div>
<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 EmailHeader from "@/components/palmistry/email-header/email-header";
import { actions } from "@/store";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import {addCurrency} from "@/locales";
import {getPriceCentsToDollars} from "@/services/price";
const bestPlanId = "stripe.15";
const getFormattedPrice = (product: IPaywallProduct) => {
return (product?.trialPrice / 100).toFixed(2);
};
export default function StepSubscriptionPlan() {
const steps = useSteps();
@ -26,7 +25,7 @@ export default function StepSubscriptionPlan() {
const defaultProduct = properties.find(
(property) => property.key === "default.product"
)?.value;
const currency = useSelector(selectors.selectCurrency);
const storedEmail = steps.getStoredValue(Step.Email);
const [product, setProduct] = React.useState("");
@ -37,7 +36,6 @@ export default function StepSubscriptionPlan() {
if (!defaultProduct || activeProductFromStore) return;
const targetDefaultProduct = products.find((p) => p.key === defaultProduct);
if (!targetDefaultProduct) return;
setProduct(targetDefaultProduct._id);
steps.saveCurrent(targetDefaultProduct._id);
dispatch(
@ -133,7 +131,7 @@ export default function StepSubscriptionPlan() {
}`}
onClick={() => setProduct(_product._id)}
>
<h3>${getFormattedPrice(_product)}</h3>
<h3>{addCurrency(getPriceCentsToDollars(_product.trialPrice || 0), currency)}</h3>
</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.
</span>