From 2d89bfbe164d4cb254a4f1d301c07620711070c8 Mon Sep 17 00:00:00 2001 From: Daniil Chemerkin Date: Sat, 7 Sep 2024 13:49:27 +0000 Subject: [PATCH] Develop --- src/components/PaymentModalNew/index.tsx | 8 +++- .../discount-screen/discount-screen.tsx | 41 +++++++++++-------- .../payment-screen/payment-screen.tsx | 13 +++--- .../premium-bundle-screen.tsx | 9 +++- .../step-subscription-plan.tsx | 14 +++---- 5 files changed, 49 insertions(+), 36 deletions(-) diff --git a/src/components/PaymentModalNew/index.tsx b/src/components/PaymentModalNew/index.tsx index 36df019..663a70f 100644 --- a/src/components/PaymentModalNew/index.tsx +++ b/src/components/PaymentModalNew/index.tsx @@ -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(); + const currency = useSelector(selectors.selectCurrency); const [stripePromise, setStripePromise] = useState | null>(null); @@ -105,7 +109,7 @@ export default function PaymentModalNew({ }
Total due today: - ${getFormattedPrice(activeProduct.trialPrice)}
+ {addCurrency(getPriceCentsToDollars(activeProduct.trialPrice), currency)} {!isLoadingPayment && <> diff --git a/src/components/palmistry/discount-screen/discount-screen.tsx b/src/components/palmistry/discount-screen/discount-screen.tsx index 5cffddb..31d653b 100644 --- a/src/components/palmistry/discount-screen/discount-screen.tsx +++ b/src/components/palmistry/discount-screen/discount-screen.tsx @@ -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 | null>(null); @@ -33,22 +37,23 @@ export default function DiscountScreen() { const [clientSecret, setClientSecret] = React.useState(null); const [stripePublicKey, setStripePublicKey] = React.useState(""); 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() {
- $19 for
1-week plan + {addCurrency(getPriceCentsToDollars(1900), currency)} for
1-week plan
Total savings - $0 + {addCurrency(getPriceCentsToDollars(0), currency)}
@@ -161,14 +168,14 @@ export default function DiscountScreen() {
save 33%
- ${price} for
1-week plan + {addCurrency(getPriceCentsToDollars(price || 0), currency)} for
1-week plan
Total savings - $6.27 + {addCurrency(getPriceCentsToDollars(627), currency)}
diff --git a/src/components/palmistry/payment-screen/payment-screen.tsx b/src/components/palmistry/payment-screen/payment-screen.tsx index e0e4cca..8a50dd1 100644 --- a/src/components/palmistry/payment-screen/payment-screen.tsx +++ b/src/components/palmistry/payment-screen/payment-screen.tsx @@ -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() { Total today - ${getFormattedPrice(trialPrice)} + {addCurrency(getPriceCentsToDollars(trialPrice), currency)}
@@ -163,13 +164,11 @@ export default function PaymentScreen() {
You will be charged only{" "} - ${getFormattedPrice(trialPrice)} for your {activeProductFromStore?.trialDuration}-day trial. + {addCurrency(getPriceCentsToDollars(trialPrice), currency)} for your {activeProductFromStore?.trialDuration}-day trial. - Then ${getFormattedPrice(fullPrice)} $ - {getFormattedPrice(trialPrice)} per week. Save $ - {getFormattedPrice(fullPrice - trialPrice)} every week. + Then {addCurrency(getPriceCentsToDollars(fullPrice), currency)} {addCurrency(getPriceCentsToDollars(trialPrice), currency)} per week. Save {addCurrency(getPriceCentsToDollars(fullPrice - trialPrice), currency)} every week. diff --git a/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx b/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx index 804a4af..66f1fc0 100644 --- a/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx +++ b/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx @@ -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(null); const [stripePublicKey, setStripePublicKey] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); + const currency = useSelector(selectors.selectCurrency); React.useEffect(() => { (async () => { @@ -209,9 +214,9 @@ export default function PremiumBundleScreen() {
- One-time price of $19! + One-time price of {addCurrency(19, currency)}! -

Original price is $45. Save 58%!

+

Original price is {addCurrency(45, currency)}. Save 58%!

diff --git a/src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx b/src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx index 35cd301..b32fbc3 100644 --- a/src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx +++ b/src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx @@ -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)} > -

${getFormattedPrice(_product)}

+

{addCurrency(getPriceCentsToDollars(_product.trialPrice || 0), currency)}

))}
@@ -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.