diff --git a/src/components/palmistry/discount-screen/discount-screen.css b/src/components/palmistry/discount-screen/discount-screen.css index ffbf7c2..761937b 100644 --- a/src/components/palmistry/discount-screen/discount-screen.css +++ b/src/components/palmistry/discount-screen/discount-screen.css @@ -106,6 +106,10 @@ color: #fff; } +.discount-screen__loader { + scale: .75; +} + .discount-screen__header-block { top: 0; color: #fff; diff --git a/src/components/palmistry/discount-screen/discount-screen.tsx b/src/components/palmistry/discount-screen/discount-screen.tsx index e1a1deb..5cffddb 100644 --- a/src/components/palmistry/discount-screen/discount-screen.tsx +++ b/src/components/palmistry/discount-screen/discount-screen.tsx @@ -13,6 +13,7 @@ import { useAuth } from "@/auth"; 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"; const currentProductKey = "skip.trial.subscription.aura"; const returnUrl = `${window.location.host}/palmistry/premium-bundle`; @@ -31,6 +32,7 @@ export default function DiscountScreen() { const [product, setProduct] = React.useState(); const [clientSecret, setClientSecret] = React.useState(null); const [stripePublicKey, setStripePublicKey] = React.useState(""); + const [isLoading, setIsLoading] = React.useState(false); const goPremiumBundle = () => { navigate(routes.client.palmistryPremiumBundle()); @@ -78,34 +80,42 @@ export default function DiscountScreen() { key, }; - const response = await api.createSinglePayment({ - token: token, - data: { - user: { - id: user.id, - email: user.email, - name: user.username || "", - sign: user.profile?.sign?.sign || "", - age: user.profile.age?.years || 0, + try { + setIsLoading(true); + const response = await api.createSinglePayment({ + token: token, + data: { + user: { + id: user.id, + email: user.email, + name: user.username || "", + sign: user.profile?.sign?.sign || "", + age: user.profile.age?.years || 0, + }, + partner: { + sign: "", + age: 0, + }, + paymentInfo, + return_url: returnUrl, }, - partner: { - sign: "", - age: 0, - }, - paymentInfo, - return_url: returnUrl, - }, - }); + }); - if ( - ("paymentIntent" in response && - response.paymentIntent.status === "paid") || - ("payment" in response && response.payment.status === "paid") - ) { - goPremiumBundle(); - } else if ("paymentIntent" in response) { - setClientSecret(response.paymentIntent.data.client_secret); - setStripePublicKey(response.paymentIntent.data.public_key); + if ( + ("paymentIntent" in response && + response.paymentIntent.status === "paid") || + ("payment" in response && response.payment.status === "paid") || + ("invoiceId" in response && response.invoiceId === "paid") + ) { + goPremiumBundle(); + } else if ("paymentIntent" in response) { + setClientSecret(response.paymentIntent.data.client_secret); + setStripePublicKey(response.paymentIntent.data.public_key); + } + } catch (error) { + console.log("Error: ", error); + } finally { + setIsLoading(false); } }; @@ -123,14 +133,14 @@ export default function DiscountScreen() {
- €19 for
1-week plan + $19 for
1-week plan
Total savings - €0 + $0
@@ -151,14 +161,14 @@ export default function DiscountScreen() {
save 33%
- €{price} for
1-week plan + ${price} for
1-week plan
Total savings - €6.27 + $6.27
@@ -166,8 +176,21 @@ export default function DiscountScreen() { no
-
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 60da2dd..804a4af 100644 --- a/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx +++ b/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx @@ -12,6 +12,7 @@ import { useApi } from "@/api"; import { useAuth } from "@/auth"; import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm"; import { ResponseGet } from "@/api/resources/SinglePayment"; +import Loader, { LoaderColor } from "@/components/Loader"; const currentProductKey = "premium.bundle.aura"; const returnUrl = window.location.host; @@ -27,6 +28,7 @@ export default function PremiumBundleScreen() { const [isSuccess] = React.useState(false); const [clientSecret, setClientSecret] = React.useState(null); const [stripePublicKey, setStripePublicKey] = React.useState(""); + const [isLoading, setIsLoading] = React.useState(false); React.useEffect(() => { (async () => { @@ -40,7 +42,7 @@ export default function PremiumBundleScreen() { setProduct(product); } })(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); React.useEffect(() => { @@ -54,37 +56,45 @@ export default function PremiumBundleScreen() { const { _id, key } = product; - const response = await api.createSinglePayment({ - token: token, - data: { - user: { - id: user.id, - email: user.email, - name: user.username || "", - sign: user.profile?.sign?.sign || "", - age: user.profile.age?.years || 0, + try { + setIsLoading(true); + const response = await api.createSinglePayment({ + token: token, + data: { + user: { + id: user.id, + email: user.email, + name: user.username || "", + sign: user.profile?.sign?.sign || "", + age: user.profile.age?.years || 0, + }, + partner: { + sign: "", + age: 0, + }, + paymentInfo: { + productId: _id, + key, + }, + return_url: returnUrl, }, - partner: { - sign: "", - age: 0, - }, - paymentInfo: { - productId: _id, - key, - }, - return_url: returnUrl, - }, - }); + }); - if ( - ("paymentIntent" in response && - response.paymentIntent.status === "paid") || - ("payment" in response && response.payment.status === "paid") - ) { - goHome(); - } else if ("paymentIntent" in response) { - setClientSecret(response.paymentIntent.data.client_secret); - setStripePublicKey(response.paymentIntent.data.public_key); + if ( + ("paymentIntent" in response && + response.paymentIntent.status === "paid") || + ("payment" in response && response.payment.status === "paid") || + ("invoiceId" in response && response.invoiceId === "paid") + ) { + goHome(); + } else if ("paymentIntent" in response) { + setClientSecret(response.paymentIntent.data.client_secret); + setStripePublicKey(response.paymentIntent.data.public_key); + } + } catch (error) { + console.log("Error: ", error); + } finally { + setIsLoading(false); } }; @@ -199,9 +209,9 @@ export default function PremiumBundleScreen() {
- One-time price of €19! + One-time price of $19! -

Original price is €45. Save 58%!

+

Original price is $45. Save 58%!

@@ -215,21 +225,31 @@ export default function PremiumBundleScreen() {