Develop

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<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 &&
           <>

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<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(() => {
+  // 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(() => {
     (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">

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() {
           <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> $
+            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>

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<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">

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